@sanity/ui 1.7.3 → 1.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.d.ts +19 -19
- package/dist/index.esm.js +354 -103
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +354 -103
- package/dist/index.js.map +1 -1
- package/package.json +36 -35
- package/src/__workshop__/constants.ts +2 -2
- package/src/components/autocomplete/__mocks__/apiStore.ts +2 -2
- package/src/components/autocomplete/__workshop__/async.tsx +2 -2
- package/src/components/autocomplete/__workshop__/constrainedHeight.tsx +2 -2
- package/src/components/autocomplete/__workshop__/custom.tsx +1 -1
- package/src/components/autocomplete/__workshop__/fullscreen.tsx +6 -6
- package/src/components/autocomplete/autocomplete.tsx +20 -20
- package/src/components/autocomplete/autocompleteOption.tsx +1 -1
- package/src/components/autocomplete/autocompleteReducer.ts +1 -1
- package/src/components/breadcrumbs/breadcrumbs.tsx +2 -2
- package/src/components/dialog/dialog.tsx +11 -11
- package/src/components/dialog/dialogProvider.tsx +1 -1
- package/src/components/dialog/styles.ts +1 -1
- package/src/components/hotkeys/hotkeys.tsx +1 -1
- package/src/components/menu/__workshop__/asComponent.tsx +1 -1
- package/src/components/menu/__workshop__/menuButton.tsx +1 -1
- package/src/components/menu/menu.test.tsx +3 -3
- package/src/components/menu/menu.tsx +7 -7
- package/src/components/menu/menuButton.tsx +7 -7
- package/src/components/menu/menuGroup.tsx +4 -4
- package/src/components/menu/menuItem.tsx +4 -4
- package/src/components/menu/useMenuController.ts +3 -3
- package/src/components/skeleton/skeleton.tsx +2 -2
- package/src/components/skeleton/textSkeleton.tsx +25 -19
- package/src/components/tab/__workshop__/example.tsx +6 -1
- package/src/components/tab/tab.tsx +8 -3
- package/src/components/tab/tabList.tsx +22 -5
- package/src/components/tab/tabPanel.tsx +1 -1
- package/src/components/toast/toast.test.tsx +2 -1
- package/src/components/toast/toast.tsx +1 -1
- package/src/components/toast/toastProvider.tsx +1 -1
- package/src/components/tree/__workshop__/basic.perf.ts +1 -1
- package/src/components/tree/helpers.ts +2 -2
- package/src/components/tree/style.ts +1 -1
- package/src/components/tree/tree.tsx +9 -9
- package/src/components/tree/treeGroup.tsx +1 -1
- package/src/components/tree/treeItem.tsx +4 -4
- package/src/hooks/useArrayProp.ts +2 -2
- package/src/hooks/useClickOutside.ts +2 -2
- package/src/hooks/useCustomValidity.ts +1 -1
- package/src/hooks/useMediaIndex/useMediaIndex.test.tsx +4 -4
- package/src/hooks/usePrefersDark.hydration.test.tsx +2 -1
- package/src/hooks/usePrefersReducedMotion.hydration.test.tsx +2 -1
- package/src/lib/globalScope.ts +1 -0
- package/src/primitives/_selectable/selectable.tsx +1 -1
- package/src/primitives/_selectable/style.ts +1 -1
- package/src/primitives/avatar/avatar.tsx +3 -3
- package/src/primitives/avatar/avatarCounter.tsx +5 -3
- package/src/primitives/avatar/avatarStack.tsx +2 -2
- package/src/primitives/avatar/styles.ts +1 -1
- package/src/primitives/badge/badge.tsx +2 -2
- package/src/primitives/box/box.tsx +2 -2
- package/src/primitives/button/button.tsx +2 -2
- package/src/primitives/button/styles.ts +1 -1
- package/src/primitives/card/__workshop__/asComponent.tsx +1 -1
- package/src/primitives/card/__workshop__/selected.tsx +19 -15
- package/src/primitives/card/card.tsx +1 -1
- package/src/primitives/card/styles.ts +1 -1
- package/src/primitives/checkbox/checkbox.tsx +1 -1
- package/src/primitives/code/code.tsx +2 -1
- package/src/primitives/container/container.tsx +2 -2
- package/src/primitives/container/styles.ts +1 -1
- package/src/primitives/flex/flex.tsx +2 -2
- package/src/primitives/grid/grid.tsx +1 -1
- package/src/primitives/heading/heading.tsx +1 -1
- package/src/primitives/heading/styles.ts +4 -2
- package/src/primitives/helpers.ts +2 -2
- package/src/primitives/inline/inline.tsx +2 -2
- package/src/primitives/kbd/kbd.tsx +1 -1
- package/src/primitives/label/label.tsx +1 -1
- package/src/primitives/label/styles.ts +1 -1
- package/src/primitives/popover/__workshop__/RecursiveStory.tsx +1 -1
- package/src/primitives/popover/__workshop__/TestStory.tsx +1 -1
- package/src/primitives/popover/helpers.ts +1 -1
- package/src/primitives/popover/popover.tsx +11 -11
- package/src/primitives/popover/popoverArrow.tsx +1 -1
- package/src/primitives/popover/popoverCard.tsx +4 -4
- package/src/primitives/radio/radio.tsx +1 -1
- package/src/primitives/select/select.tsx +1 -1
- package/src/primitives/select/styles.ts +2 -2
- package/src/primitives/spinner/spinner.tsx +1 -1
- package/src/primitives/stack/stack.tsx +1 -1
- package/src/primitives/stack/styles.ts +1 -1
- package/src/primitives/switch/__workshop__/props.tsx +1 -1
- package/src/primitives/switch/styles.ts +1 -1
- package/src/primitives/switch/switch.tsx +1 -1
- package/src/primitives/text/__workshop__/colored.tsx +9 -8
- package/src/primitives/text/styles.ts +4 -2
- package/src/primitives/text/text.tsx +2 -2
- package/src/primitives/textArea/textArea.tsx +3 -3
- package/src/primitives/textInput/__workshop__/plain.tsx +2 -2
- package/src/primitives/textInput/textInput.tsx +11 -11
- package/src/primitives/tooltip/tooltip.tsx +8 -7
- package/src/primitives/tooltip/tooltipArrow.tsx +1 -1
- package/src/styles/border/borderStyle.ts +5 -5
- package/src/styles/colorVars/colorVarsStyle.ts +1 -1
- package/src/styles/flex/flexItemStyle.ts +1 -1
- package/src/styles/flex/flexStyle.ts +3 -3
- package/src/styles/font/responsiveFont.ts +1 -1
- package/src/styles/font/textAlignStyle.ts +1 -1
- package/src/styles/helpers.ts +3 -3
- package/src/styles/input/responsiveInputPaddingStyle.ts +4 -4
- package/src/styles/input/textInputStyle.ts +2 -2
- package/src/styles/margin/marginStyle.ts +1 -1
- package/src/styles/padding/paddingStyle.ts +1 -1
- package/src/theme/__workshop__/color.tsx +1 -0
- package/src/theme/lib/theme/color/button/createButtonModes.ts +1 -1
- package/src/theme/lib/theme/color/button/createButtonTones.ts +1 -1
- package/src/theme/lib/theme/color/card/createCardStates.ts +1 -1
- package/src/theme/lib/theme/color/factory.ts +2 -2
- package/src/theme/lib/theme/color/input/createInputModes.ts +1 -1
- package/src/theme/lib/theme/color/muted/createMuted.ts +1 -1
- package/src/theme/lib/theme/color/selectable/createSelectableTones.ts +2 -2
- package/src/theme/lib/theme/color/solid/createSolidTones.ts +1 -1
- package/src/theme/lib/theme/color/spot/createSpot.ts +1 -1
- package/src/theme/lib/theme/shadow.ts +1 -1
- package/src/theme/lib/theme/theme.ts +1 -1
- package/src/theme/theme.test.tsx +2 -1
- package/src/theme/themeProvider.tsx +1 -1
- package/src/theme/useRootTheme.ts +1 -0
- package/src/utils/boundaryElement/boundaryElement.test.tsx +2 -1
- package/src/utils/elementQuery/elementQuery.tsx +2 -2
- package/src/utils/layer/layer.test.tsx +2 -1
- package/src/utils/layer/layer.tsx +3 -3
- package/src/utils/layer/layerProvider.tsx +2 -2
- package/src/utils/portal/portal.test.tsx +2 -1
- package/src/utils/srOnly/srOnly.tsx +1 -1
- package/src/utils/virtualList/__workshop__/changingProps.tsx +1 -1
- package/src/utils/virtualList/virtualList.tsx +2 -1
|
@@ -105,7 +105,7 @@ function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps) {
|
|
|
105
105
|
const {sizes} = theme.sanity.fonts.text
|
|
106
106
|
|
|
107
107
|
return _responsive(theme.sanity.media, $fontSize, (sizeIndex) =>
|
|
108
|
-
textSize(sizes[sizeIndex] || sizes[2])
|
|
108
|
+
textSize(sizes[sizeIndex] || sizes[2]),
|
|
109
109
|
)
|
|
110
110
|
}
|
|
111
111
|
|
|
@@ -115,7 +115,7 @@ function inputStyle(): Array<
|
|
|
115
115
|
$fontSize: number[]
|
|
116
116
|
$padding: number[]
|
|
117
117
|
$space: number[]
|
|
118
|
-
} & ThemeProps
|
|
118
|
+
} & ThemeProps,
|
|
119
119
|
) => CSSObject[])
|
|
120
120
|
| ((props: ThemeProps) => FlattenSimpleInterpolation)
|
|
121
121
|
> {
|
|
@@ -32,7 +32,7 @@ const Root = styled(Text)`
|
|
|
32
32
|
*/
|
|
33
33
|
export const Spinner = forwardRef(function Spinner(
|
|
34
34
|
props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
|
|
35
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
35
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
36
36
|
) {
|
|
37
37
|
return (
|
|
38
38
|
<Root data-ui="Spinner" {...props} ref={ref}>
|
|
@@ -19,7 +19,7 @@ const Root = styled(Box)<ResponsiveStackSpaceStyleProps>(stackBaseStyle, respons
|
|
|
19
19
|
*/
|
|
20
20
|
export const Stack = forwardRef(function Stack(
|
|
21
21
|
props: StackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
|
|
22
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
22
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
23
23
|
) {
|
|
24
24
|
const {as, space, ...restProps} = props
|
|
25
25
|
|
|
@@ -21,7 +21,7 @@ export function stackBaseStyle(): CSSObject {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
export function responsiveStackSpaceStyle(
|
|
24
|
-
props: ResponsiveStackSpaceStyleProps & ThemeProps
|
|
24
|
+
props: ResponsiveStackSpaceStyleProps & ThemeProps,
|
|
25
25
|
): CSSObject[] {
|
|
26
26
|
const {theme} = props
|
|
27
27
|
const {media, space} = theme.sanity
|
|
@@ -122,7 +122,7 @@ export function switchTrackStyles(props: ThemeProps): FlattenSimpleInterpolation
|
|
|
122
122
|
|
|
123
123
|
/* Thumb */
|
|
124
124
|
export function switchThumbStyles(
|
|
125
|
-
props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps
|
|
125
|
+
props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
|
|
126
126
|
): FlattenSimpleInterpolation {
|
|
127
127
|
const {$indeterminate, theme} = props
|
|
128
128
|
const {input} = theme.sanity
|
|
@@ -27,7 +27,7 @@ const Thumb = styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switch
|
|
|
27
27
|
*/
|
|
28
28
|
export const Switch = forwardRef(function Switch(
|
|
29
29
|
props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps,
|
|
30
|
-
forwardedRef: React.ForwardedRef<HTMLInputElement
|
|
30
|
+
forwardedRef: React.ForwardedRef<HTMLInputElement>,
|
|
31
31
|
) {
|
|
32
32
|
const {checked, className, disabled, indeterminate, readOnly, style, ...restProps} = props
|
|
33
33
|
const ref = useForwardedRef(forwardedRef)
|
|
@@ -3,15 +3,16 @@ import {useSelect} from '@sanity/ui-workshop'
|
|
|
3
3
|
import styled, {css} from 'styled-components'
|
|
4
4
|
import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
|
|
5
5
|
|
|
6
|
-
const ColoredText = styled(Text)<{color?: ThemeColorSpotKey}>(
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
const ColoredText = styled(Text)<{color?: ThemeColorSpotKey}>((props: {
|
|
7
|
+
color?: ThemeColorSpotKey
|
|
8
|
+
theme: Theme
|
|
9
|
+
}) => {
|
|
10
|
+
const {spot} = props.theme.sanity.color
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
)
|
|
12
|
+
return css`
|
|
13
|
+
color: ${spot[props.color || 'gray']};
|
|
14
|
+
`
|
|
15
|
+
})
|
|
15
16
|
|
|
16
17
|
export default function ColoredTextStory() {
|
|
17
18
|
const theme = useTheme()
|
|
@@ -2,7 +2,7 @@ import {css, FlattenSimpleInterpolation} from 'styled-components'
|
|
|
2
2
|
import {ThemeProps} from '../../styles'
|
|
3
3
|
|
|
4
4
|
export function textBaseStyle(
|
|
5
|
-
props: {$accent?: boolean; $muted?: boolean} & ThemeProps
|
|
5
|
+
props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
|
|
6
6
|
): FlattenSimpleInterpolation {
|
|
7
7
|
const {$accent, $muted, theme} = props
|
|
8
8
|
const {weights} = theme.sanity.fonts.text
|
|
@@ -40,7 +40,9 @@ export function textBaseStyle(
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
&:focus {
|
|
43
|
-
box-shadow:
|
|
43
|
+
box-shadow:
|
|
44
|
+
0 0 0 1px var(--card-bg-color),
|
|
45
|
+
0 0 0 3px var(--card-focus-ring-color);
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
&:focus:not(:focus-visible) {
|
|
@@ -31,7 +31,7 @@ export interface TextProps {
|
|
|
31
31
|
const Root = styled.div<ResponsiveFontStyleProps>(
|
|
32
32
|
responsiveTextFont,
|
|
33
33
|
responsiveTextAlignStyle,
|
|
34
|
-
textBaseStyle
|
|
34
|
+
textBaseStyle,
|
|
35
35
|
)
|
|
36
36
|
|
|
37
37
|
const SpanWithTextOverflow = styled.span`
|
|
@@ -47,7 +47,7 @@ const SpanWithTextOverflow = styled.span`
|
|
|
47
47
|
*/
|
|
48
48
|
export const Text = forwardRef(function Text(
|
|
49
49
|
props: TextProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
|
|
50
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
50
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
51
51
|
) {
|
|
52
52
|
const {
|
|
53
53
|
accent = false,
|
|
@@ -39,12 +39,12 @@ const InputRoot = styled.span`
|
|
|
39
39
|
const Input = styled.textarea<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
|
|
40
40
|
responsiveInputPaddingStyle,
|
|
41
41
|
textInputBaseStyle,
|
|
42
|
-
textInputFontSizeStyle
|
|
42
|
+
textInputFontSizeStyle,
|
|
43
43
|
)
|
|
44
44
|
|
|
45
45
|
const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
|
|
46
46
|
responsiveRadiusStyle,
|
|
47
|
-
textInputRepresentationStyle
|
|
47
|
+
textInputRepresentationStyle,
|
|
48
48
|
)
|
|
49
49
|
|
|
50
50
|
/**
|
|
@@ -52,7 +52,7 @@ const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresenta
|
|
|
52
52
|
*/
|
|
53
53
|
export const TextArea = forwardRef(function TextArea(
|
|
54
54
|
props: TextAreaProps & Omit<React.HTMLProps<HTMLTextAreaElement>, 'as'>,
|
|
55
|
-
forwardedRef: React.ForwardedRef<HTMLTextAreaElement
|
|
55
|
+
forwardedRef: React.ForwardedRef<HTMLTextAreaElement>,
|
|
56
56
|
) {
|
|
57
57
|
const {
|
|
58
58
|
border = true,
|
|
@@ -58,7 +58,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
|
|
|
58
58
|
'Icon (right)',
|
|
59
59
|
WORKSHOP_ICON_SYMBOL_OPTIONS,
|
|
60
60
|
'close',
|
|
61
|
-
'Props'
|
|
61
|
+
'Props',
|
|
62
62
|
) as IconSymbol
|
|
63
63
|
const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
|
|
64
64
|
const placeholder = useText('Placeholder', '', 'Props') || undefined
|
|
@@ -71,7 +71,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
|
|
|
71
71
|
|
|
72
72
|
const handleChange = useCallback(
|
|
73
73
|
(event: React.ChangeEvent<HTMLInputElement>) => setValue(event.currentTarget.value),
|
|
74
|
-
[]
|
|
74
|
+
[],
|
|
75
75
|
)
|
|
76
76
|
|
|
77
77
|
return (
|
|
@@ -105,12 +105,12 @@ const Suffix = styled(Card).attrs({forwardedAs: 'span'})`
|
|
|
105
105
|
const Input = styled.input<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
|
|
106
106
|
responsiveInputPaddingStyle,
|
|
107
107
|
textInputBaseStyle,
|
|
108
|
-
textInputFontSizeStyle
|
|
108
|
+
textInputFontSizeStyle,
|
|
109
109
|
)
|
|
110
110
|
|
|
111
111
|
const Presentation = styled.span<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
|
|
112
112
|
responsiveRadiusStyle,
|
|
113
|
-
textInputRepresentationStyle
|
|
113
|
+
textInputRepresentationStyle,
|
|
114
114
|
)
|
|
115
115
|
|
|
116
116
|
const LeftBox = styled(Box)`
|
|
@@ -137,7 +137,7 @@ const RightCard = styled(Card)`
|
|
|
137
137
|
*/
|
|
138
138
|
export const TextInput = forwardRef(function TextInput(
|
|
139
139
|
props: TextInputProps & Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'prefix' | 'type'>,
|
|
140
|
-
forwardedRef: React.Ref<HTMLInputElement
|
|
140
|
+
forwardedRef: React.Ref<HTMLInputElement>,
|
|
141
141
|
) {
|
|
142
142
|
const {
|
|
143
143
|
border = true,
|
|
@@ -193,7 +193,7 @@ export const TextInput = forwardRef(function TextInput(
|
|
|
193
193
|
// Focus the input, in case focus has been lost when clicking the clear button
|
|
194
194
|
ref.current?.focus()
|
|
195
195
|
},
|
|
196
|
-
[onClear, ref]
|
|
196
|
+
[onClear, ref],
|
|
197
197
|
)
|
|
198
198
|
|
|
199
199
|
// Render prefix (memoized)
|
|
@@ -204,7 +204,7 @@ export const TextInput = forwardRef(function TextInput(
|
|
|
204
204
|
<span>{prefix}</span>
|
|
205
205
|
</Prefix>
|
|
206
206
|
),
|
|
207
|
-
[prefix, radius]
|
|
207
|
+
[prefix, radius],
|
|
208
208
|
)
|
|
209
209
|
|
|
210
210
|
// Render presentation (memoized)
|
|
@@ -250,7 +250,7 @@ export const TextInput = forwardRef(function TextInput(
|
|
|
250
250
|
$hasClearButton,
|
|
251
251
|
$hasPrefix,
|
|
252
252
|
$hasSuffix,
|
|
253
|
-
]
|
|
253
|
+
],
|
|
254
254
|
)
|
|
255
255
|
|
|
256
256
|
// Render clear button (memoized)
|
|
@@ -263,7 +263,7 @@ export const TextInput = forwardRef(function TextInput(
|
|
|
263
263
|
|
|
264
264
|
return v - 2
|
|
265
265
|
}),
|
|
266
|
-
[padding]
|
|
266
|
+
[padding],
|
|
267
267
|
)
|
|
268
268
|
const clearButtonPadding = useMemo(
|
|
269
269
|
() =>
|
|
@@ -274,11 +274,11 @@ export const TextInput = forwardRef(function TextInput(
|
|
|
274
274
|
|
|
275
275
|
return v - 1
|
|
276
276
|
}),
|
|
277
|
-
[padding]
|
|
277
|
+
[padding],
|
|
278
278
|
)
|
|
279
279
|
const clearButtonProps: TextInputClearButtonProps = useMemo(
|
|
280
280
|
() => (typeof clearButton === 'object' ? clearButton : EMPTY_RECORD),
|
|
281
|
-
[clearButton]
|
|
281
|
+
[clearButton],
|
|
282
282
|
)
|
|
283
283
|
const clearButtonNode = useMemo(
|
|
284
284
|
() =>
|
|
@@ -317,7 +317,7 @@ export const TextInput = forwardRef(function TextInput(
|
|
|
317
317
|
handleClearMouseDown,
|
|
318
318
|
radius,
|
|
319
319
|
readOnly,
|
|
320
|
-
]
|
|
320
|
+
],
|
|
321
321
|
)
|
|
322
322
|
|
|
323
323
|
// Render suffix (memoized)
|
|
@@ -328,7 +328,7 @@ export const TextInput = forwardRef(function TextInput(
|
|
|
328
328
|
<span>{suffix}</span>
|
|
329
329
|
</Suffix>
|
|
330
330
|
),
|
|
331
|
-
[radius, suffix]
|
|
331
|
+
[radius, suffix],
|
|
332
332
|
)
|
|
333
333
|
|
|
334
334
|
return (
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
1
2
|
import {
|
|
2
3
|
arrow,
|
|
3
4
|
autoUpdate,
|
|
@@ -55,7 +56,7 @@ const Root = styled(Layer)`
|
|
|
55
56
|
*/
|
|
56
57
|
export const Tooltip = forwardRef(function Tooltip(
|
|
57
58
|
props: TooltipProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content'>,
|
|
58
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
59
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
59
60
|
) {
|
|
60
61
|
const boundaryElementContext = useBoundaryElement()
|
|
61
62
|
const theme = useTheme()
|
|
@@ -89,7 +90,7 @@ export const Tooltip = forwardRef(function Tooltip(
|
|
|
89
90
|
fallbackPlacements,
|
|
90
91
|
padding: 4,
|
|
91
92
|
rootBoundary,
|
|
92
|
-
})
|
|
93
|
+
}),
|
|
93
94
|
)
|
|
94
95
|
|
|
95
96
|
// Define distance between reference and floating element
|
|
@@ -101,7 +102,7 @@ export const Tooltip = forwardRef(function Tooltip(
|
|
|
101
102
|
boundary: boundaryElement || undefined,
|
|
102
103
|
rootBoundary,
|
|
103
104
|
padding: 4,
|
|
104
|
-
})
|
|
105
|
+
}),
|
|
105
106
|
)
|
|
106
107
|
|
|
107
108
|
// Place arrow
|
|
@@ -122,7 +123,7 @@ export const Tooltip = forwardRef(function Tooltip(
|
|
|
122
123
|
top: y ?? 0,
|
|
123
124
|
left: x ?? 0,
|
|
124
125
|
}),
|
|
125
|
-
[strategy, x, y]
|
|
126
|
+
[strategy, x, y],
|
|
126
127
|
)
|
|
127
128
|
|
|
128
129
|
const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
|
|
@@ -193,7 +194,7 @@ export const Tooltip = forwardRef(function Tooltip(
|
|
|
193
194
|
arrowRef.current = arrowEl
|
|
194
195
|
update()
|
|
195
196
|
},
|
|
196
|
-
[update]
|
|
197
|
+
[update],
|
|
197
198
|
)
|
|
198
199
|
|
|
199
200
|
const setFloating = useCallback(
|
|
@@ -201,7 +202,7 @@ export const Tooltip = forwardRef(function Tooltip(
|
|
|
201
202
|
forwardedRef.current = node
|
|
202
203
|
refs.setFloating(node)
|
|
203
204
|
},
|
|
204
|
-
[forwardedRef, refs]
|
|
205
|
+
[forwardedRef, refs],
|
|
205
206
|
)
|
|
206
207
|
|
|
207
208
|
const childRef: ForwardedRef<HTMLElement | null> = (childProp as any)?.ref
|
|
@@ -217,7 +218,7 @@ export const Tooltip = forwardRef(function Tooltip(
|
|
|
217
218
|
// childRef.current = node
|
|
218
219
|
setReferenceElement(node)
|
|
219
220
|
},
|
|
220
|
-
[childRef]
|
|
221
|
+
[childRef],
|
|
221
222
|
)
|
|
222
223
|
|
|
223
224
|
const child = useMemo(() => {
|
|
@@ -74,7 +74,7 @@ interface TooltipArrowProps {}
|
|
|
74
74
|
|
|
75
75
|
export const TooltipArrow = forwardRef(function TooltipArrow(
|
|
76
76
|
props: TooltipArrowProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
|
|
77
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
77
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
78
78
|
) {
|
|
79
79
|
const {...restProps} = props
|
|
80
80
|
|
|
@@ -16,7 +16,7 @@ function border(props: ResponsiveBorderStyleProps & ThemeProps) {
|
|
|
16
16
|
const {media} = theme.sanity
|
|
17
17
|
|
|
18
18
|
return _responsive(media, props.$border, (value) =>
|
|
19
|
-
value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}}
|
|
19
|
+
value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}},
|
|
20
20
|
)
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -25,7 +25,7 @@ function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
|
|
|
25
25
|
const {media} = theme.sanity
|
|
26
26
|
|
|
27
27
|
return _responsive(media, props.$borderTop, (value) =>
|
|
28
|
-
value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}}
|
|
28
|
+
value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}},
|
|
29
29
|
)
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -34,7 +34,7 @@ function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
|
|
|
34
34
|
const {media} = theme.sanity
|
|
35
35
|
|
|
36
36
|
return _responsive(media, props.$borderRight, (value) =>
|
|
37
|
-
value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}}
|
|
37
|
+
value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}},
|
|
38
38
|
)
|
|
39
39
|
}
|
|
40
40
|
|
|
@@ -43,7 +43,7 @@ function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
|
|
|
43
43
|
const {media} = theme.sanity
|
|
44
44
|
|
|
45
45
|
return _responsive(media, props.$borderBottom, (value) =>
|
|
46
|
-
value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}}
|
|
46
|
+
value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}},
|
|
47
47
|
)
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -52,6 +52,6 @@ function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
|
|
|
52
52
|
const {media} = theme.sanity
|
|
53
53
|
|
|
54
54
|
return _responsive(media, props.$borderLeft, (value) =>
|
|
55
|
-
value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}}
|
|
55
|
+
value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}},
|
|
56
56
|
)
|
|
57
57
|
}
|
|
@@ -16,7 +16,7 @@ export function flexItemStyle(): Array<
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
export function responsiveFlexItemStyle(
|
|
19
|
-
props: ResponsiveFlexItemStyleProps & ThemeProps
|
|
19
|
+
props: ResponsiveFlexItemStyleProps & ThemeProps,
|
|
20
20
|
): CSSObject[] {
|
|
21
21
|
const {theme} = props
|
|
22
22
|
const {media} = theme.sanity
|
|
@@ -23,7 +23,7 @@ export function responsiveFlexStyle(): Array<
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
export function responsiveFlexAlignStyle(
|
|
26
|
-
props: ResponsiveFlexStyleProps & ThemeProps
|
|
26
|
+
props: ResponsiveFlexStyleProps & ThemeProps,
|
|
27
27
|
): CSSObject[] {
|
|
28
28
|
const {theme} = props
|
|
29
29
|
const {media} = theme.sanity
|
|
@@ -52,7 +52,7 @@ export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeP
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
export function responsiveFlexJustifyStyle(
|
|
55
|
-
props: ResponsiveFlexStyleProps & ThemeProps
|
|
55
|
+
props: ResponsiveFlexStyleProps & ThemeProps,
|
|
56
56
|
): CSSObject[] {
|
|
57
57
|
const {theme} = props
|
|
58
58
|
const {media} = theme.sanity
|
|
@@ -63,7 +63,7 @@ export function responsiveFlexJustifyStyle(
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
export function responsiveFlexDirectionStyle(
|
|
66
|
-
props: ResponsiveFlexStyleProps & ThemeProps
|
|
66
|
+
props: ResponsiveFlexStyleProps & ThemeProps,
|
|
67
67
|
): CSSObject[] {
|
|
68
68
|
const {theme} = props
|
|
69
69
|
const {media} = theme.sanity
|
|
@@ -10,7 +10,7 @@ import {ResponsiveFontStyleProps} from './types'
|
|
|
10
10
|
*/
|
|
11
11
|
export function responsiveFont(
|
|
12
12
|
fontKey: ThemeFontKey,
|
|
13
|
-
props: ResponsiveFontStyleProps & ThemeProps
|
|
13
|
+
props: ResponsiveFontStyleProps & ThemeProps,
|
|
14
14
|
): CSSObject[] {
|
|
15
15
|
const {$size, $weight, theme} = props
|
|
16
16
|
const {fonts, media} = theme.sanity
|
|
@@ -8,7 +8,7 @@ import {ResponsiveTextAlignStyleProps} from './types'
|
|
|
8
8
|
* @internal
|
|
9
9
|
*/
|
|
10
10
|
export function responsiveTextAlignStyle(
|
|
11
|
-
props: ResponsiveTextAlignStyleProps & ThemeProps
|
|
11
|
+
props: ResponsiveTextAlignStyleProps & ThemeProps,
|
|
12
12
|
): CSSObject[] {
|
|
13
13
|
const {theme} = props
|
|
14
14
|
|
package/src/styles/helpers.ts
CHANGED
|
@@ -28,7 +28,7 @@ export function rem(pixelValue: number): string | 0 {
|
|
|
28
28
|
export function _responsive<T>(
|
|
29
29
|
media: number[],
|
|
30
30
|
values: T[],
|
|
31
|
-
callback: (value: T, index: number, array: T[]) => CSSObject
|
|
31
|
+
callback: (value: T, index: number, array: T[]) => CSSObject,
|
|
32
32
|
): CSSObject[] {
|
|
33
33
|
const statements = values?.map(callback) || []
|
|
34
34
|
|
|
@@ -54,7 +54,7 @@ export function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?:
|
|
|
54
54
|
export function _getResponsiveSpace(
|
|
55
55
|
theme: Theme,
|
|
56
56
|
props: string[],
|
|
57
|
-
spaceIndexes: number[] = EMPTY_ARRAY
|
|
57
|
+
spaceIndexes: number[] = EMPTY_ARRAY,
|
|
58
58
|
): CSSObject[] | null {
|
|
59
59
|
if (!Array.isArray(spaceIndexes)) {
|
|
60
60
|
throw new Error('the property must be array of numbers')
|
|
@@ -65,6 +65,6 @@ export function _getResponsiveSpace(
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
return _responsive(theme.sanity.media, spaceIndexes, (spaceIndex) =>
|
|
68
|
-
_fillCSSObject(props, rem(theme.sanity.space[spaceIndex]))
|
|
68
|
+
_fillCSSObject(props, rem(theme.sanity.space[spaceIndex])),
|
|
69
69
|
)
|
|
70
70
|
}
|
|
@@ -11,7 +11,7 @@ export interface TextInputResponsivePaddingStyleProps {
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
export function responsiveInputPaddingStyle(
|
|
14
|
-
props: TextInputResponsivePaddingStyleProps & ThemeProps
|
|
14
|
+
props: TextInputResponsivePaddingStyleProps & ThemeProps,
|
|
15
15
|
): CSSObject[] {
|
|
16
16
|
const {$fontSize, $iconLeft, $iconRight, $padding, $space, theme} = props
|
|
17
17
|
const {fonts, media, space: spaceScale} = theme.sanity
|
|
@@ -51,7 +51,7 @@ export function responsiveInputPaddingIconsStyle(
|
|
|
51
51
|
$fontSize: number[]
|
|
52
52
|
$padding: number[]
|
|
53
53
|
$space: number[]
|
|
54
|
-
} & ThemeProps
|
|
54
|
+
} & ThemeProps,
|
|
55
55
|
): CSSObject[] {
|
|
56
56
|
return responsiveInputPaddingStyle({...props, $iconLeft: true, $iconRight: true})
|
|
57
57
|
}
|
|
@@ -61,7 +61,7 @@ export function responsiveInputPaddingIconLeftStyle(
|
|
|
61
61
|
$fontSize: number[]
|
|
62
62
|
$padding: number[]
|
|
63
63
|
$space: number[]
|
|
64
|
-
} & ThemeProps
|
|
64
|
+
} & ThemeProps,
|
|
65
65
|
): CSSObject[] {
|
|
66
66
|
return responsiveInputPaddingStyle({...props, $iconLeft: true})
|
|
67
67
|
}
|
|
@@ -71,7 +71,7 @@ export function responsiveInputPaddingIconRightStyle(
|
|
|
71
71
|
$fontSize: number[]
|
|
72
72
|
$padding: number[]
|
|
73
73
|
$space: number[]
|
|
74
|
-
} & ThemeProps
|
|
74
|
+
} & ThemeProps,
|
|
75
75
|
): CSSObject[] {
|
|
76
76
|
return responsiveInputPaddingStyle({...props, $iconRight: true})
|
|
77
77
|
}
|
|
@@ -38,7 +38,7 @@ export function textInputRootStyle(): FlattenSimpleInterpolation {
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
export function textInputBaseStyle(
|
|
41
|
-
props: TextInputInputStyleProps & ThemeProps
|
|
41
|
+
props: TextInputInputStyleProps & ThemeProps,
|
|
42
42
|
): FlattenSimpleInterpolation {
|
|
43
43
|
const {theme, $scheme, $tone, $weight} = props
|
|
44
44
|
const font = theme.sanity.fonts.text
|
|
@@ -126,7 +126,7 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
|
|
|
126
126
|
}
|
|
127
127
|
|
|
128
128
|
export function textInputRepresentationStyle(
|
|
129
|
-
props: TextInputRepresentationStyleProps & ThemeProps
|
|
129
|
+
props: TextInputRepresentationStyleProps & ThemeProps,
|
|
130
130
|
): FlattenSimpleInterpolation {
|
|
131
131
|
const {$hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
|
|
132
132
|
const {focusRing, input} = theme.sanity
|
|
@@ -4,7 +4,7 @@ import {ThemeProps} from '../types'
|
|
|
4
4
|
import {ResponsiveMarginStyleProps} from './types'
|
|
5
5
|
|
|
6
6
|
export function responsiveMarginStyle(
|
|
7
|
-
props: ResponsiveMarginStyleProps & ThemeProps
|
|
7
|
+
props: ResponsiveMarginStyleProps & ThemeProps,
|
|
8
8
|
): CSSObject[][] {
|
|
9
9
|
const {theme} = props
|
|
10
10
|
|
|
@@ -4,7 +4,7 @@ import {ThemeProps} from '../types'
|
|
|
4
4
|
import {ResponsivePaddingStyleProps} from './types'
|
|
5
5
|
|
|
6
6
|
export function responsivePaddingStyle(
|
|
7
|
-
props: ResponsivePaddingStyleProps & ThemeProps
|
|
7
|
+
props: ResponsivePaddingStyleProps & ThemeProps,
|
|
8
8
|
): CSSObject[][] {
|
|
9
9
|
const {theme} = props
|
|
10
10
|
|
|
@@ -10,7 +10,7 @@ export function createButtonModes(
|
|
|
10
10
|
base: ThemeColorBase,
|
|
11
11
|
dark: boolean,
|
|
12
12
|
solid: ThemeColorSolid,
|
|
13
|
-
muted: ThemeColorMuted
|
|
13
|
+
muted: ThemeColorMuted,
|
|
14
14
|
): ThemeColorButton {
|
|
15
15
|
return {
|
|
16
16
|
default: createButtonTones(opts, base, dark, solid, muted, 'default'),
|
|
@@ -87,7 +87,7 @@ export type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
|
|
|
87
87
|
* @public
|
|
88
88
|
*/
|
|
89
89
|
export function createColorTheme(
|
|
90
|
-
partialOpts: PartialThemeColorBuilderOpts = {}
|
|
90
|
+
partialOpts: PartialThemeColorBuilderOpts = {},
|
|
91
91
|
): ThemeColorSchemes {
|
|
92
92
|
const builders: ThemeColorBuilderOpts = {...defaultOpts, ...partialOpts}
|
|
93
93
|
|
|
@@ -117,7 +117,7 @@ function _createColorScheme(opts: ThemeColorBuilderOpts, dark: boolean): ThemeCo
|
|
|
117
117
|
function _createColor(
|
|
118
118
|
opts: ThemeColorBuilderOpts,
|
|
119
119
|
dark: boolean,
|
|
120
|
-
name: ThemeColorName
|
|
120
|
+
name: ThemeColorName,
|
|
121
121
|
): ThemeColor {
|
|
122
122
|
const base = opts.base({dark, name})
|
|
123
123
|
const solid = createSolidTones(opts, base, dark, name)
|
|
@@ -9,7 +9,7 @@ export function createSelectableTones(
|
|
|
9
9
|
base: ThemeColorBase,
|
|
10
10
|
dark: boolean,
|
|
11
11
|
solid: ThemeColorSolid,
|
|
12
|
-
muted: ThemeColorMuted
|
|
12
|
+
muted: ThemeColorMuted,
|
|
13
13
|
): ThemeColorSelectable {
|
|
14
14
|
return {
|
|
15
15
|
default: _createSelectableStates(opts, base, dark, solid, muted, 'default'),
|
|
@@ -26,7 +26,7 @@ function _createSelectableStates(
|
|
|
26
26
|
dark: boolean,
|
|
27
27
|
solid: ThemeColorSolid,
|
|
28
28
|
muted: ThemeColorMuted,
|
|
29
|
-
tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
|
|
29
|
+
tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical',
|
|
30
30
|
): ThemeColorSelectableStates {
|
|
31
31
|
return {
|
|
32
32
|
enabled: opts.selectable({
|