@sanity/ui 1.7.2 → 1.7.4
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 +340 -103
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +340 -103
- package/dist/index.js.map +1 -1
- package/package.json +33 -33
- 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__/index.ts +5 -0
- package/src/components/menu/__workshop__/menuButton.tsx +1 -1
- package/src/components/menu/__workshop__/shouldFocus.tsx +46 -0
- 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 +10 -5
- package/src/components/skeleton/skeleton.tsx +2 -2
- package/src/components/skeleton/textSkeleton.tsx +25 -19
- package/src/components/tab/tab.tsx +2 -2
- package/src/components/tab/tabList.tsx +3 -3
- 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
package/src/lib/globalScope.ts
CHANGED
|
@@ -9,5 +9,5 @@ import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from '.
|
|
|
9
9
|
export const Selectable = styled(Box)<SelectableStyleProps & ResponsiveRadiusStyleProps>(
|
|
10
10
|
responsiveRadiusStyle,
|
|
11
11
|
selectableBaseStyle,
|
|
12
|
-
selectableColorStyle
|
|
12
|
+
selectableColorStyle,
|
|
13
13
|
)
|
|
@@ -33,7 +33,7 @@ export function selectableBaseStyle(): FlattenSimpleInterpolation {
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
export function selectableColorStyle(
|
|
36
|
-
props: SelectableStyleProps & ThemeProps
|
|
36
|
+
props: SelectableStyleProps & ThemeProps,
|
|
37
37
|
): FlattenSimpleInterpolation {
|
|
38
38
|
const {$tone, theme} = props
|
|
39
39
|
const {base, muted, selectable} = theme.sanity.color
|
|
@@ -29,7 +29,7 @@ export interface AvatarProps {
|
|
|
29
29
|
|
|
30
30
|
const Root = styled.div<{$color: string; $size: AvatarSize[]}>(
|
|
31
31
|
responsiveAvatarSizeStyle,
|
|
32
|
-
avatarStyle.root
|
|
32
|
+
avatarStyle.root,
|
|
33
33
|
)
|
|
34
34
|
|
|
35
35
|
const Arrow = styled.div(avatarStyle.arrow)
|
|
@@ -45,7 +45,7 @@ const Initials = styled.div(avatarStyle.initials)
|
|
|
45
45
|
*/
|
|
46
46
|
export const Avatar = forwardRef(function Avatar(
|
|
47
47
|
props: AvatarProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
|
|
48
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
48
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
49
49
|
) {
|
|
50
50
|
const {
|
|
51
51
|
as: asProp,
|
|
@@ -72,7 +72,7 @@ export const Avatar = forwardRef(function Avatar(
|
|
|
72
72
|
|
|
73
73
|
const elementId = useId()
|
|
74
74
|
const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
|
|
75
|
-
animateArrowFrom || arrowPositionProp || 'inside'
|
|
75
|
+
animateArrowFrom || arrowPositionProp || 'inside',
|
|
76
76
|
)
|
|
77
77
|
|
|
78
78
|
const [imageFailed, setImageFailed] = useState<boolean>(false)
|
|
@@ -34,7 +34,9 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
|
|
|
34
34
|
color: inherit;
|
|
35
35
|
color: var(--card-fg-color);
|
|
36
36
|
background: var(--card-bg-color);
|
|
37
|
-
box-shadow:
|
|
37
|
+
box-shadow:
|
|
38
|
+
0 0 0 1px var(--card-bg-color),
|
|
39
|
+
inset 0 0 0 1.5px var(--card-hairline-hard-color);
|
|
38
40
|
padding: 0 ${rem(theme.sanity.space[2])};
|
|
39
41
|
|
|
40
42
|
&:not([hidden]) {
|
|
@@ -45,7 +47,7 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
|
|
|
45
47
|
|
|
46
48
|
const Root = styled.div<{$size: AvatarSize[]}>(
|
|
47
49
|
_responsiveAvatarCounterSizeStyle,
|
|
48
|
-
_avatarCounterBaseStyle
|
|
50
|
+
_avatarCounterBaseStyle,
|
|
49
51
|
)
|
|
50
52
|
|
|
51
53
|
/**
|
|
@@ -63,7 +65,7 @@ export interface AvatarCounterProps {
|
|
|
63
65
|
*/
|
|
64
66
|
export const AvatarCounter = forwardRef(function AvatarCounter(
|
|
65
67
|
props: AvatarCounterProps,
|
|
66
|
-
ref: React.Ref<HTMLDivElement
|
|
68
|
+
ref: React.Ref<HTMLDivElement>,
|
|
67
69
|
) {
|
|
68
70
|
const {count, size: sizeProp = 0} = props
|
|
69
71
|
const size = useArrayProp(sizeProp)
|
|
@@ -58,7 +58,7 @@ export interface AvatarStackProps {
|
|
|
58
58
|
*/
|
|
59
59
|
export const AvatarStack = forwardRef(function AvatarStack(
|
|
60
60
|
props: AvatarStackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
|
|
61
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
61
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
62
62
|
) {
|
|
63
63
|
const {
|
|
64
64
|
children: childrenProp,
|
|
@@ -67,7 +67,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
|
|
|
67
67
|
...restProps
|
|
68
68
|
} = props
|
|
69
69
|
const children = childrenToElementArray(childrenProp).filter(
|
|
70
|
-
(child) => typeof child !== 'string'
|
|
70
|
+
(child) => typeof child !== 'string',
|
|
71
71
|
) as React.ReactElement[]
|
|
72
72
|
const maxLength = Math.max(maxLengthProp, 0)
|
|
73
73
|
const size = useArrayProp(sizeProp)
|
|
@@ -98,7 +98,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
|
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
export function responsiveAvatarSizeStyle(
|
|
101
|
-
props: ResponsiveAvatarSizeStyleProps & ThemeProps
|
|
101
|
+
props: ResponsiveAvatarSizeStyleProps & ThemeProps,
|
|
102
102
|
): CSSObject[] {
|
|
103
103
|
const {theme} = props
|
|
104
104
|
const {avatar, media} = theme.sanity
|
|
@@ -21,7 +21,7 @@ export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
|
|
|
21
21
|
|
|
22
22
|
const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
|
|
23
23
|
responsiveRadiusStyle,
|
|
24
|
-
badgeStyle
|
|
24
|
+
badgeStyle,
|
|
25
25
|
)
|
|
26
26
|
|
|
27
27
|
/**
|
|
@@ -29,7 +29,7 @@ const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
|
|
|
29
29
|
*/
|
|
30
30
|
export const Badge = forwardRef(function Badge(
|
|
31
31
|
props: BadgeProps & React.HTMLProps<HTMLDivElement>,
|
|
32
|
-
ref
|
|
32
|
+
ref,
|
|
33
33
|
) {
|
|
34
34
|
const {
|
|
35
35
|
children,
|
|
@@ -46,7 +46,7 @@ const Root = styled.div<
|
|
|
46
46
|
responsiveBoxStyle,
|
|
47
47
|
responsiveGridItemStyle,
|
|
48
48
|
responsiveMarginStyle,
|
|
49
|
-
responsivePaddingStyle
|
|
49
|
+
responsivePaddingStyle,
|
|
50
50
|
)
|
|
51
51
|
|
|
52
52
|
/**
|
|
@@ -54,7 +54,7 @@ const Root = styled.div<
|
|
|
54
54
|
*/
|
|
55
55
|
export const Box = forwardRef(function Box(
|
|
56
56
|
props: BoxProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
|
|
57
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
57
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
58
58
|
) {
|
|
59
59
|
const {
|
|
60
60
|
as: asProp = 'div',
|
|
@@ -59,7 +59,7 @@ const LoadingBox = styled.div`
|
|
|
59
59
|
*/
|
|
60
60
|
export const Button = forwardRef(function Button(
|
|
61
61
|
props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as'>,
|
|
62
|
-
ref: React.ForwardedRef<HTMLButtonElement
|
|
62
|
+
ref: React.ForwardedRef<HTMLButtonElement>,
|
|
63
63
|
) {
|
|
64
64
|
const {
|
|
65
65
|
children,
|
|
@@ -111,7 +111,7 @@ export const Button = forwardRef(function Button(
|
|
|
111
111
|
paddingLeft,
|
|
112
112
|
paddingRight,
|
|
113
113
|
}),
|
|
114
|
-
[padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]
|
|
114
|
+
[padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],
|
|
115
115
|
)
|
|
116
116
|
|
|
117
117
|
return (
|
|
@@ -46,7 +46,7 @@ const buttonTheme = {border: {width: 1}}
|
|
|
46
46
|
* @internal
|
|
47
47
|
*/
|
|
48
48
|
export function buttonColorStyles(
|
|
49
|
-
props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps
|
|
49
|
+
props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
|
|
50
50
|
): CSSObject[] {
|
|
51
51
|
const {$mode, theme} = props
|
|
52
52
|
const {focusRing} = theme.sanity
|
|
@@ -3,7 +3,7 @@ import {forwardRef} from 'react'
|
|
|
3
3
|
|
|
4
4
|
const CustomLink = forwardRef(function CustomLink(
|
|
5
5
|
props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
|
|
6
|
-
ref: React.ForwardedRef<HTMLAnchorElement
|
|
6
|
+
ref: React.ForwardedRef<HTMLAnchorElement>,
|
|
7
7
|
): React.ReactElement {
|
|
8
8
|
const {children, req, ...restProps} = props
|
|
9
9
|
|
|
@@ -14,23 +14,27 @@ import {
|
|
|
14
14
|
import {useBoolean} from '@sanity/ui-workshop'
|
|
15
15
|
import styled, {css} from 'styled-components'
|
|
16
16
|
|
|
17
|
-
const TextWithTone = styled(Text)<{$tone: ThemeColorToneKey}>(
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
const TextWithTone = styled(Text)<{$tone: ThemeColorToneKey}>(({
|
|
18
|
+
$tone,
|
|
19
|
+
theme,
|
|
20
|
+
}: {
|
|
21
|
+
$tone: ThemeColorToneKey
|
|
22
|
+
theme: Theme
|
|
23
|
+
}) => {
|
|
24
|
+
const tone = theme.sanity.color.solid[$tone]
|
|
20
25
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
return css`
|
|
27
|
+
&:not([data-selected]) {
|
|
28
|
+
--card-fg-color: ${tone ? tone.enabled.bg : undefined};
|
|
29
|
+
--card-muted-fg-color: ${tone ? tone.enabled.bg : undefined};
|
|
30
|
+
}
|
|
26
31
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
)
|
|
32
|
+
[data-ui='Card']:disabled & {
|
|
33
|
+
--card-fg-color: inherit;
|
|
34
|
+
--card-muted-fg-color: inherit;
|
|
35
|
+
}
|
|
36
|
+
`
|
|
37
|
+
})
|
|
34
38
|
|
|
35
39
|
export default function SelectedStory() {
|
|
36
40
|
const disabled = useBoolean('Disabled', false) || false
|
|
@@ -52,7 +52,7 @@ const Root = styled(Box)<
|
|
|
52
52
|
*/
|
|
53
53
|
export const Card = forwardRef(function Card(
|
|
54
54
|
props: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
|
|
55
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
55
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
56
56
|
) {
|
|
57
57
|
const {
|
|
58
58
|
__unstable_checkered: checkered = false,
|
|
@@ -5,7 +5,7 @@ import {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'
|
|
|
5
5
|
import {CardStyleProps} from './types'
|
|
6
6
|
|
|
7
7
|
export function cardStyle(
|
|
8
|
-
props: CardStyleProps & ThemeProps
|
|
8
|
+
props: CardStyleProps & ThemeProps,
|
|
9
9
|
): Array<FlattenSimpleInterpolation | (() => FlattenSimpleInterpolation)> {
|
|
10
10
|
return [cardBaseStyle(props), cardColorStyle(props)]
|
|
11
11
|
}
|
|
@@ -20,7 +20,7 @@ const Input = styled.input(inputElementStyles)
|
|
|
20
20
|
*/
|
|
21
21
|
export const Checkbox = forwardRef(function Checkbox(
|
|
22
22
|
props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & CheckboxProps,
|
|
23
|
-
forwardedRef: React.ForwardedRef<HTMLInputElement
|
|
23
|
+
forwardedRef: React.ForwardedRef<HTMLInputElement>,
|
|
24
24
|
) {
|
|
25
25
|
const {
|
|
26
26
|
checked,
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
1
2
|
import {forwardRef} from 'react'
|
|
2
3
|
import Refractor from 'react-refractor'
|
|
3
4
|
import styled from 'styled-components'
|
|
@@ -22,7 +23,7 @@ const Root = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeF
|
|
|
22
23
|
*/
|
|
23
24
|
export const Code = forwardRef(function Code(
|
|
24
25
|
props: CodeProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
|
|
25
|
-
ref: React.ForwardedRef<HTMLElement
|
|
26
|
+
ref: React.ForwardedRef<HTMLElement>,
|
|
26
27
|
) {
|
|
27
28
|
const {children, language: languageProp, size = 2, weight, ...restProps} = props
|
|
28
29
|
const language = typeof languageProp === 'string' ? languageProp : undefined
|
|
@@ -13,7 +13,7 @@ export interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
|
|
|
13
13
|
|
|
14
14
|
const Root = styled(Box)<ResponsiveWidthStyleProps>(
|
|
15
15
|
containerBaseStyle,
|
|
16
|
-
responsiveContainerWidthStyle
|
|
16
|
+
responsiveContainerWidthStyle,
|
|
17
17
|
)
|
|
18
18
|
|
|
19
19
|
/**
|
|
@@ -21,7 +21,7 @@ const Root = styled(Box)<ResponsiveWidthStyleProps>(
|
|
|
21
21
|
*/
|
|
22
22
|
export const Container = forwardRef(function Container(
|
|
23
23
|
props: ContainerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
|
|
24
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
24
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
25
25
|
) {
|
|
26
26
|
const {as, width = 2, ...restProps} = props
|
|
27
27
|
|
|
@@ -12,7 +12,7 @@ export function containerBaseStyle(): CSSObject {
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
export function responsiveContainerWidthStyle(
|
|
15
|
-
props: ResponsiveWidthStyleProps & ThemeProps
|
|
15
|
+
props: ResponsiveWidthStyleProps & ThemeProps,
|
|
16
16
|
): CSSObject[] {
|
|
17
17
|
const {theme} = props
|
|
18
18
|
const {container, media} = theme.sanity
|
|
@@ -22,7 +22,7 @@ export interface FlexProps
|
|
|
22
22
|
|
|
23
23
|
const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
|
|
24
24
|
flexItemStyle,
|
|
25
|
-
responsiveFlexStyle
|
|
25
|
+
responsiveFlexStyle,
|
|
26
26
|
)
|
|
27
27
|
|
|
28
28
|
/**
|
|
@@ -30,7 +30,7 @@ const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
|
|
|
30
30
|
*/
|
|
31
31
|
export const Flex = forwardRef(function Flex(
|
|
32
32
|
props: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
|
|
33
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
33
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
34
34
|
) {
|
|
35
35
|
const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
|
|
36
36
|
|
|
@@ -17,7 +17,7 @@ const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
|
|
|
17
17
|
*/
|
|
18
18
|
export const Grid = forwardRef(function Grid(
|
|
19
19
|
props: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
|
|
20
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
20
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
21
21
|
) {
|
|
22
22
|
const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
|
|
23
23
|
props
|
|
@@ -47,7 +47,7 @@ const SpanWithTextOverflow = styled.span`
|
|
|
47
47
|
*/
|
|
48
48
|
export const Heading = forwardRef(function Heading(
|
|
49
49
|
props: HeadingProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
|
|
50
|
-
ref: React.ForwardedRef<HTMLElement
|
|
50
|
+
ref: React.ForwardedRef<HTMLElement>,
|
|
51
51
|
) {
|
|
52
52
|
const {
|
|
53
53
|
accent = false,
|
|
@@ -3,7 +3,7 @@ import {ThemeProps} from '../../styles'
|
|
|
3
3
|
import {HeadingStyleProps} from './types'
|
|
4
4
|
|
|
5
5
|
export function headingBaseStyle(
|
|
6
|
-
props: HeadingStyleProps & ThemeProps
|
|
6
|
+
props: HeadingStyleProps & ThemeProps,
|
|
7
7
|
): FlattenSimpleInterpolation {
|
|
8
8
|
const {$accent, $muted, theme} = props
|
|
9
9
|
|
|
@@ -36,7 +36,9 @@ export function headingBaseStyle(
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&:focus {
|
|
39
|
-
box-shadow:
|
|
39
|
+
box-shadow:
|
|
40
|
+
0 0 0 1px var(--card-bg-color),
|
|
41
|
+
0 0 0 3px var(--card-focus-ring-color);
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
&:focus:not(:focus-visible) {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import {isElement, isFragment} from 'react-is'
|
|
2
2
|
|
|
3
3
|
export function childrenToElementArray(
|
|
4
|
-
children: React.ReactNode
|
|
4
|
+
children: React.ReactNode,
|
|
5
5
|
): Array<React.ReactElement | string> {
|
|
6
6
|
const childrenArray = Array.isArray(children) ? children : [children]
|
|
7
7
|
|
|
8
8
|
return childrenArray.filter(
|
|
9
|
-
(node) => isElement(node) || isFragment(node) || typeof node === 'string'
|
|
9
|
+
(node) => isElement(node) || isFragment(node) || typeof node === 'string',
|
|
10
10
|
) as Array<React.ReactElement | string>
|
|
11
11
|
}
|
|
@@ -20,7 +20,7 @@ const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlin
|
|
|
20
20
|
*/
|
|
21
21
|
export const Inline = forwardRef(function Inline(
|
|
22
22
|
props: InlineProps & React.HTMLProps<HTMLDivElement>,
|
|
23
|
-
ref
|
|
23
|
+
ref,
|
|
24
24
|
) {
|
|
25
25
|
const {as, children: childrenProp, space, ...restProps} = props
|
|
26
26
|
|
|
@@ -29,7 +29,7 @@ export const Inline = forwardRef(function Inline(
|
|
|
29
29
|
childrenToElementArray(childrenProp)
|
|
30
30
|
.filter(Boolean)
|
|
31
31
|
.map((child, idx) => <div key={idx}>{child}</div>),
|
|
32
|
-
[childrenProp]
|
|
32
|
+
[childrenProp],
|
|
33
33
|
)
|
|
34
34
|
|
|
35
35
|
return (
|
|
@@ -34,7 +34,7 @@ const Root = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdSt
|
|
|
34
34
|
*/
|
|
35
35
|
export const KBD = forwardRef(function KBD(
|
|
36
36
|
props: KBDProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
|
|
37
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
37
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
38
38
|
) {
|
|
39
39
|
const {children, fontSize = 1, padding = 1, radius = 2, ...restProps} = props
|
|
40
40
|
|
|
@@ -44,7 +44,7 @@ const SpanWithTextOverflow = styled.span`
|
|
|
44
44
|
*/
|
|
45
45
|
export const Label = forwardRef(function Label(
|
|
46
46
|
props: LabelProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
|
|
47
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
47
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
48
48
|
) {
|
|
49
49
|
const {
|
|
50
50
|
accent,
|
|
@@ -2,7 +2,7 @@ import {css, FlattenSimpleInterpolation} from 'styled-components'
|
|
|
2
2
|
import {ThemeProps} from '../../styles'
|
|
3
3
|
|
|
4
4
|
export function labelBaseStyle(
|
|
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 {fonts} = theme.sanity
|
|
@@ -74,7 +74,7 @@ export const Popover = memo(
|
|
|
74
74
|
forwardRef(function Popover(
|
|
75
75
|
props: PopoverProps &
|
|
76
76
|
Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
|
|
77
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
77
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
78
78
|
): React.ReactElement {
|
|
79
79
|
const theme = useTheme()
|
|
80
80
|
const boundaryElementContext = useBoundaryElement()
|
|
@@ -175,7 +175,7 @@ export const Popover = memo(
|
|
|
175
175
|
fallbackPlacements,
|
|
176
176
|
padding: DEFAULT_POPOVER_PADDING,
|
|
177
177
|
rootBoundary,
|
|
178
|
-
})
|
|
178
|
+
}),
|
|
179
179
|
)
|
|
180
180
|
}
|
|
181
181
|
|
|
@@ -183,7 +183,7 @@ export const Popover = memo(
|
|
|
183
183
|
ret.push(
|
|
184
184
|
offset({
|
|
185
185
|
mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
|
|
186
|
-
})
|
|
186
|
+
}),
|
|
187
187
|
)
|
|
188
188
|
|
|
189
189
|
// Track sizes
|
|
@@ -207,7 +207,7 @@ export const Popover = memo(
|
|
|
207
207
|
if (constrainSize) {
|
|
208
208
|
elements.floating.style.maxWidth = `${Math.min(
|
|
209
209
|
availableWidth,
|
|
210
|
-
_maxWidth ?? Infinity
|
|
210
|
+
_maxWidth ?? Infinity,
|
|
211
211
|
)}px`
|
|
212
212
|
|
|
213
213
|
elements.floating.style.maxHeight = `${availableHeight}px`
|
|
@@ -218,7 +218,7 @@ export const Popover = memo(
|
|
|
218
218
|
margins,
|
|
219
219
|
matchReferenceWidth,
|
|
220
220
|
padding: DEFAULT_POPOVER_PADDING,
|
|
221
|
-
})
|
|
221
|
+
}),
|
|
222
222
|
)
|
|
223
223
|
}
|
|
224
224
|
|
|
@@ -229,7 +229,7 @@ export const Popover = memo(
|
|
|
229
229
|
boundary: floatingBoundary || undefined,
|
|
230
230
|
rootBoundary,
|
|
231
231
|
padding: DEFAULT_POPOVER_PADDING,
|
|
232
|
-
})
|
|
232
|
+
}),
|
|
233
233
|
)
|
|
234
234
|
}
|
|
235
235
|
|
|
@@ -239,7 +239,7 @@ export const Popover = memo(
|
|
|
239
239
|
arrow({
|
|
240
240
|
element: arrowRef,
|
|
241
241
|
padding: DEFAULT_POPOVER_PADDING,
|
|
242
|
-
})
|
|
242
|
+
}),
|
|
243
243
|
)
|
|
244
244
|
}
|
|
245
245
|
|
|
@@ -248,7 +248,7 @@ export const Popover = memo(
|
|
|
248
248
|
boundary: referenceBoundary || undefined,
|
|
249
249
|
padding: DEFAULT_POPOVER_PADDING,
|
|
250
250
|
strategy: 'referenceHidden',
|
|
251
|
-
})
|
|
251
|
+
}),
|
|
252
252
|
)
|
|
253
253
|
|
|
254
254
|
return ret
|
|
@@ -283,7 +283,7 @@ export const Popover = memo(
|
|
|
283
283
|
forwardedRef.current = node
|
|
284
284
|
refs.setFloating(node)
|
|
285
285
|
},
|
|
286
|
-
[forwardedRef, refs]
|
|
286
|
+
[forwardedRef, refs],
|
|
287
287
|
)
|
|
288
288
|
|
|
289
289
|
const setReference = useCallback(
|
|
@@ -299,7 +299,7 @@ export const Popover = memo(
|
|
|
299
299
|
childRef.current = node
|
|
300
300
|
}
|
|
301
301
|
},
|
|
302
|
-
[childProp, refs]
|
|
302
|
+
[childProp, refs],
|
|
303
303
|
)
|
|
304
304
|
|
|
305
305
|
const child = useMemo(() => {
|
|
@@ -373,7 +373,7 @@ export const Popover = memo(
|
|
|
373
373
|
{child}
|
|
374
374
|
</>
|
|
375
375
|
)
|
|
376
|
-
})
|
|
376
|
+
}),
|
|
377
377
|
)
|
|
378
378
|
|
|
379
379
|
Popover.displayName = 'Popover'
|
|
@@ -57,7 +57,7 @@ const ShapePath = styled.path`
|
|
|
57
57
|
|
|
58
58
|
export const PopoverArrow = forwardRef(function PopoverArrow(
|
|
59
59
|
props: Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
|
|
60
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
60
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
61
61
|
) {
|
|
62
62
|
return (
|
|
63
63
|
<Root data-ui="Popover__arrow" {...props} ref={ref}>
|
|
@@ -43,7 +43,7 @@ export const PopoverCard = memo(
|
|
|
43
43
|
x: number | null
|
|
44
44
|
y: number | null
|
|
45
45
|
} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
|
|
46
|
-
ref: React.ForwardedRef<HTMLDivElement
|
|
46
|
+
ref: React.ForwardedRef<HTMLDivElement>,
|
|
47
47
|
) {
|
|
48
48
|
const {
|
|
49
49
|
__unstable_margins: marginsProp,
|
|
@@ -72,7 +72,7 @@ export const PopoverCard = memo(
|
|
|
72
72
|
// Get margins: [top, right, bottom, left]
|
|
73
73
|
const margins: PopoverMargins = useMemo(
|
|
74
74
|
() => marginsProp || DEFAULT_POPOVER_MARGINS,
|
|
75
|
-
[marginsProp]
|
|
75
|
+
[marginsProp],
|
|
76
76
|
)
|
|
77
77
|
|
|
78
78
|
// Translate according to margins
|
|
@@ -88,7 +88,7 @@ export const PopoverCard = memo(
|
|
|
88
88
|
zIndex,
|
|
89
89
|
...style,
|
|
90
90
|
}),
|
|
91
|
-
[strategy, style, width, x, y, zIndex]
|
|
91
|
+
[strategy, style, width, x, y, zIndex],
|
|
92
92
|
)
|
|
93
93
|
|
|
94
94
|
const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
|
|
@@ -128,7 +128,7 @@ export const PopoverCard = memo(
|
|
|
128
128
|
{arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
|
|
129
129
|
</Root>
|
|
130
130
|
)
|
|
131
|
-
})
|
|
131
|
+
}),
|
|
132
132
|
)
|
|
133
133
|
|
|
134
134
|
PopoverCard.displayName = 'PopoverCard'
|
|
@@ -18,7 +18,7 @@ const Input = styled.input(inputElementStyle)
|
|
|
18
18
|
*/
|
|
19
19
|
export const Radio = forwardRef(function Radio(
|
|
20
20
|
props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps,
|
|
21
|
-
forwardedRef: React.ForwardedRef<HTMLInputElement
|
|
21
|
+
forwardedRef: React.ForwardedRef<HTMLInputElement>,
|
|
22
22
|
) {
|
|
23
23
|
const {className, disabled, style, customValidity, readOnly, ...restProps} = props
|
|
24
24
|
const ref = useForwardedRef(forwardedRef)
|
|
@@ -33,7 +33,7 @@ const IconBox = styled(Box)(selectStyle.iconBox)
|
|
|
33
33
|
*/
|
|
34
34
|
export const Select = forwardRef(function Select(
|
|
35
35
|
props: SelectProps & Omit<React.HTMLProps<HTMLSelectElement>, 'as'>,
|
|
36
|
-
forwardedRef: React.ForwardedRef<HTMLSelectElement
|
|
36
|
+
forwardedRef: React.ForwardedRef<HTMLSelectElement>,
|
|
37
37
|
) {
|
|
38
38
|
const {
|
|
39
39
|
children,
|
|
@@ -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
|
|