Skip to content

Commit c93d7de

Browse files
shiftpshshiftpsh
committed
feat: bump lib version; add cssLength
1 parent ef724d9 commit c93d7de

File tree

8 files changed

+103
-64
lines changed

8 files changed

+103
-64
lines changed

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"dependencies": {
1515
"@emotion/react": "link:../node_modules/@emotion/react",
1616
"@emotion/styled": "link:../node_modules/@emotion/styled",
17-
"@floating-ui/react-dom-interactions": "link:../node_modules/@floating-ui/react-dom-interactions",
17+
"@floating-ui/react": "link:../node_modules/@floating-ui/react",
1818
"@solved-ac/ui-react": "link:..",
1919
"@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
2020
"@testing-library/react": "link:../node_modules/@testing-library/react",

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
"peerDependencies": {
3333
"@emotion/react": ">=11",
3434
"@emotion/styled": ">=11",
35-
"@floating-ui/react-dom-interactions": "^0.13.3",
36-
"framer-motion": "6.x",
35+
"@floating-ui/react": "^0.24.3",
36+
"framer-motion": ">=6",
3737
"react": ">=17",
3838
"react-dom": ">=17"
3939
},
@@ -42,7 +42,7 @@
4242
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
4343
"@emotion/react": "^11.1.5",
4444
"@emotion/styled": "^11.1.5",
45-
"@floating-ui/react-dom-interactions": "^0.13.3",
45+
"@floating-ui/react": "^0.24.3",
4646
"@tabler/icons-react": "^2.11.0",
4747
"@testing-library/jest-dom": "^4.2.4",
4848
"@testing-library/react": "^9.5.0",

‎src/components/Select.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
useListNavigation,
1717
useRole,
1818
useTypeahead,
19-
} from '@floating-ui/react-dom-interactions'
19+
} from '@floating-ui/react'
2020
import { IconChevronDown } from '@tabler/icons-react'
2121
import { AnimatePresence, motion } from 'framer-motion'
2222
import { ellipsis } from 'polished'
@@ -142,7 +142,7 @@ export const Select = forwardRefWithGenerics(
142142
}
143143
}, [value])
144144

145-
const { x, y, reference, floating, strategy, context, refs } = useFloating({
145+
const { x, y, refs, strategy, context } = useFloating({
146146
placement: 'bottom',
147147
open,
148148
onOpenChange: setOpen,
@@ -168,6 +168,8 @@ export const Select = forwardRefWithGenerics(
168168
],
169169
})
170170

171+
const { reference } = refs
172+
171173
useImperativeHandle(ref, () => reference)
172174

173175
const { getReferenceProps, getFloatingProps, getItemProps } =
@@ -251,12 +253,12 @@ export const Select = forwardRefWithGenerics(
251253
return (
252254
<React.Fragment>
253255
<SelectDisplay
256+
ref={refs.setReference}
254257
fullWidth={fullWidth}
255258
ellipsis={!disableEllipsis}
256259
role="button"
257260
tabIndex={0}
258261
type="button"
259-
ref={reference}
260262
{...getReferenceProps({
261263
onTouchStart() {
262264
setTouch(true)
@@ -280,14 +282,14 @@ export const Select = forwardRefWithGenerics(
280282
<FloatingOverlay lockScroll={!touch} style={{ zIndex: 1 }}>
281283
<FloatingFocusManager context={context}>
282284
<SelectItemsWrapper
283-
ref={floating}
284285
style={{
285286
position: strategy,
286287
top: y ?? 0,
287288
left: x ?? 0,
288289
originX: 0.5,
289290
originY: 0,
290291
}}
292+
ref={refs.setFloating}
291293
{...getFloatingProps({
292294
onKeyDown() {
293295
setControlledScrolling(true)

‎src/components/Tooltip.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import {
99
shift,
1010
useFloating,
1111
useHover,
12-
useInteractions
13-
} from '@floating-ui/react-dom-interactions'
12+
useInteractions,
13+
} from '@floating-ui/react'
1414
import { AnimatePresence, motion } from 'framer-motion'
1515
import { transparentize } from 'polished'
1616
import React, { ReactNode, useRef, useState } from 'react'
@@ -80,8 +80,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
8080
const {
8181
x,
8282
y,
83-
reference,
84-
floating,
83+
refs,
8584
strategy,
8685
context,
8786
placement,
@@ -115,11 +114,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
115114

116115
return (
117116
<React.Fragment>
118-
<TooltipWrapper
119-
{...getReferenceProps({
120-
ref: reference,
121-
})}
122-
>
117+
<TooltipWrapper ref={refs.setReference} {...getReferenceProps()}>
123118
{children}
124119
</TooltipWrapper>
125120
<FloatingPortal>
@@ -128,8 +123,8 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
128123
{isOpen && (
129124
<React.Fragment>
130125
<RenderComponent
126+
ref={refs.setFloating}
131127
{...getFloatingProps({
132-
ref: floating,
133128
style: {
134129
position: strategy,
135130
top: y || 0,

‎src/styles/Themes.ts‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { transparentize } from 'polished'
2+
import { cssDiv } from '../utils/css'
3+
import { cssLength } from '../utils/length'
24

35
const defaultPalette = {
46
white: '#ffffff',
@@ -50,23 +52,22 @@ const defaultPalette = {
5052
},
5153
}
5254

55+
export type CSSLength = number | string
56+
57+
export interface SolvedTextColor {
58+
main: string
59+
inverted: string
60+
light: string
61+
dark: string
62+
}
63+
5364
export interface SolvedTheme {
5465
name: string
5566
color: {
5667
solvedAc: string
5768
text: {
58-
primary: {
59-
main: string
60-
inverted: string
61-
light: string
62-
dark: string
63-
}
64-
secondary: {
65-
main: string
66-
inverted: string
67-
light: string
68-
dark: string
69-
}
69+
primary: SolvedTextColor
70+
secondary: SolvedTextColor
7071
}
7172
background: {
7273
page: string
@@ -95,7 +96,7 @@ export interface SolvedTheme {
9596
}
9697
styles: {
9798
border: (color?: string) => string
98-
shadow: (color?: string, length?: number) => string
99+
shadow: (color?: string, length?: CSSLength) => string
99100
}
100101
}
101102

@@ -139,10 +140,11 @@ const Light: SolvedTheme = {
139140
styles: {
140141
border: (color?: string) =>
141142
`1px solid ${color || defaultPalette.gray[200]}`,
142-
shadow: (color?: string, length?: number) =>
143-
`${transparentize(0.6, color || defaultPalette.gray[200])} 0px ${
144-
(length || 8) / 2
145-
}px ${length || 8}px`,
143+
shadow: (color?: string, length?: CSSLength) =>
144+
`${transparentize(
145+
0.6,
146+
color || defaultPalette.gray[200]
147+
)} 0px ${cssLength(cssDiv(length || 8, 2))} ${cssLength(length || 8)}`,
146148
},
147149
}
148150

@@ -177,10 +179,11 @@ const Dark: SolvedTheme = {
177179
styles: {
178180
border: (color?: string) =>
179181
`1px solid ${(color || defaultPalette.gray[700]).toString()}`,
180-
shadow: (color?: string, length?: number) =>
181-
`${transparentize(0.6, color || defaultPalette.gray[200])} 0px ${
182-
(length || 8) / 2
183-
}px ${length || 8}px`,
182+
shadow: (color?: string, length?: CSSLength) =>
183+
`${transparentize(
184+
0.6,
185+
color || defaultPalette.gray[200]
186+
)} 0px ${cssLength(cssDiv(length || 8, 2))} ${cssLength(length || 8)}`,
184187
},
185188
}
186189

@@ -200,10 +203,11 @@ const Black: SolvedTheme = {
200203
styles: {
201204
border: (color?: string) =>
202205
`1px solid ${(color || defaultPalette.gray[900]).toString()}`,
203-
shadow: (color?: string, length?: number) =>
204-
`${transparentize(0.6, color || defaultPalette.gray[200])} 0px ${
205-
(length || 8) / 2
206-
}px ${length || 8}px`,
206+
shadow: (color?: string, length?: CSSLength) =>
207+
`${transparentize(
208+
0.6,
209+
color || defaultPalette.gray[200]
210+
)} 0px ${cssLength(cssDiv(length || 8, 2))} ${cssLength(length || 8)}`,
207211
},
208212
}
209213

‎src/utils/css.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { CSSLength } from '../styles'
2+
import { cssLength } from './length'
3+
4+
export const cssAdd = (a: CSSLength, b: CSSLength): CSSLength => {
5+
if (typeof a === 'number' && typeof b === 'number') {
6+
return a + b
7+
}
8+
return `calc(${cssLength(a)} + ${cssLength(b)})`
9+
}
10+
11+
export const cssSub = (a: CSSLength, b: CSSLength): CSSLength => {
12+
if (typeof a === 'number' && typeof b === 'number') {
13+
return a - b
14+
}
15+
return `calc(${cssLength(a)} - ${cssLength(b)})`
16+
}
17+
18+
export const cssMul = (a: CSSLength, b: number): CSSLength => {
19+
if (typeof a === 'number') {
20+
return a * b
21+
}
22+
return `calc(${cssLength(a)} * ${b})`
23+
}
24+
25+
export const cssDiv = (a: CSSLength, b: number): CSSLength => {
26+
if (typeof a === 'number') {
27+
return a / b
28+
}
29+
return `calc(${cssLength(a)} / ${b})`
30+
}

‎src/utils/length.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { CSSLength } from '../styles'
2+
3+
export const cssLength = (cssLength?: CSSLength | null | undefined): string => {
4+
if (typeof cssLength === 'number') {
5+
return `${cssLength}px`
6+
}
7+
return cssLength || '0px'
8+
}

‎yarn.lock‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1369,34 +1369,34 @@
13691369
minimatch "^3.1.2"
13701370
strip-json-comments "^3.1.1"
13711371

1372-
"@floating-ui/core@^1.2.2":
1373-
version "1.2.2"
1374-
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.2.tgz#66f62cf1b7de2ed23a09c101808536e68caffaec"
1375-
integrity sha512-FaO9KVLFnxknZaGWGmNtjD2CVFuc0u4yeGEofoyXO2wgRA7fLtkngT6UB0vtWQWuhH3iMTZZ/Y89CMeyGfn8pA==
1372+
"@floating-ui/core@^1.3.0":
1373+
version "1.3.0"
1374+
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.0.tgz#113bc85fa102cf890ae801668f43ee265c547a09"
1375+
integrity sha512-vX1WVAdPjZg9DkDkC+zEx/tKtnST6/qcNpwcjeBgco3XRNHz5PUA+ivi/yr6G3o0kMR60uKBJcfOdfzOFI7PMQ==
13761376

1377-
"@floating-ui/dom@^1.2.1":
1378-
version "1.2.3"
1379-
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.3.tgz#8dc6fbf799fbb5c29f705b54bdd51f3ab0ee03a2"
1380-
integrity sha512-lK9cZUrHSJLMVAdCvDqs6Ug8gr0wmqksYiaoj/bxj2gweRQkSuhg2/V6Jswz2KiQ0RAULbqw1oQDJIMpQ5GfGA==
1377+
"@floating-ui/dom@^1.3.0":
1378+
version "1.3.0"
1379+
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.3.0.tgz#69456f2164fc3d33eb40837686eaf71537235ac9"
1380+
integrity sha512-qIAwejE3r6NeA107u4ELDKkH8+VtgRKdXqtSPaKflL2S2V+doyN+Wt9s5oHKXPDo4E8TaVXaHT3+6BbagH31xw==
1381+
dependencies:
1382+
"@floating-ui/core" "^1.3.0"
1383+
1384+
"@floating-ui/react-dom@^2.0.1":
1385+
version "2.0.1"
1386+
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
1387+
integrity sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==
13811388
dependencies:
1382-
"@floating-ui/core" "^1.2.2"
1389+
"@floating-ui/dom" "^1.3.0"
13831390

1384-
"@floating-ui/react-dom-interactions@^0.13.3":
1385-
version "0.13.3"
1386-
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom-interactions/-/react-dom-interactions-0.13.3.tgz#6c49dda9e16fff64d188603c1efc139588ce925d"
1387-
integrity sha512-AnCW06eIZxzD/Hl1Qbi2JkQRU5KpY7Dn81k3xRfbvs+HylhB+t3x88/GNKLK39mMTlJ/ylxm5prUpiLrTWvifQ==
1391+
"@floating-ui/react@^0.24.3":
1392+
version "0.24.3"
1393+
resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.24.3.tgz#4f11f09c7245555724f5167dd6925133457db89c"
1394+
integrity sha512-wWC9duiog4HmbgKSKObDRuXqMjZR/6m75MIG+slm5CVWbridAjK9STcnCsGYmdpK78H/GmzYj4ADVP8paZVLYQ==
13881395
dependencies:
1389-
"@floating-ui/react-dom" "^1.0.1"
1396+
"@floating-ui/react-dom" "^2.0.1"
13901397
aria-hidden "^1.1.3"
13911398
tabbable "^6.0.1"
13921399

1393-
"@floating-ui/react-dom@^1.0.1":
1394-
version "1.3.0"
1395-
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.3.0.tgz#4d35d416eb19811c2b0e9271100a6aa18c1579b3"
1396-
integrity sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==
1397-
dependencies:
1398-
"@floating-ui/dom" "^1.2.1"
1399-
14001400
"@humanwhocodes/config-array@^0.9.2":
14011401
version "0.9.5"
14021402
resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz"

0 commit comments

Comments
 (0)