@sanity/ui 0.37.12 → 0.37.13
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/lib/dts/src/components/autocomplete/autocomplete.d.ts +2 -2
- package/lib/dts/src/components/autocomplete/autocomplete.d.ts.map +1 -1
- package/lib/dts/src/components/autocomplete/autocomplete.styles.d.ts.map +1 -1
- package/lib/dts/src/components/autocomplete/constants.d.ts +0 -4
- package/lib/dts/src/components/autocomplete/constants.d.ts.map +1 -1
- package/lib/dts/src/components/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/lib/dts/src/components/dialog/dialog.d.ts.map +1 -1
- package/lib/dts/src/components/dialog/styles.d.ts +1 -1
- package/lib/dts/src/components/dialog/styles.d.ts.map +1 -1
- package/lib/dts/src/components/hotkeys/hotkeys.d.ts.map +1 -1
- package/lib/dts/src/components/menu/menuButton.d.ts.map +1 -1
- package/lib/dts/src/components/menu/menuGroup.d.ts.map +1 -1
- package/lib/dts/src/components/menu/menuItem.d.ts.map +1 -1
- package/lib/dts/src/components/skeleton/skeleton.d.ts.map +1 -1
- package/lib/dts/src/hooks/_internal/useUnique.d.ts +2 -3
- package/lib/dts/src/hooks/_internal/useUnique.d.ts.map +1 -1
- package/lib/dts/src/hooks/index.d.ts +2 -1
- package/lib/dts/src/hooks/index.d.ts.map +1 -1
- package/lib/dts/src/hooks/useArrayProp.d.ts +7 -0
- package/lib/dts/src/hooks/useArrayProp.d.ts.map +1 -0
- package/lib/dts/src/hooks/useElementRect/useElementRect.d.ts +1 -1
- package/lib/dts/src/hooks/useElementRect/useElementRect.d.ts.map +1 -1
- package/lib/dts/src/hooks/useElementSize.d.ts +7 -0
- package/lib/dts/src/hooks/useElementSize.d.ts.map +1 -0
- package/lib/dts/src/index.d.ts +1 -0
- package/lib/dts/src/index.d.ts.map +1 -1
- package/lib/dts/src/observers/elementSizeObserver.d.ts +37 -0
- package/lib/dts/src/observers/elementSizeObserver.d.ts.map +1 -0
- package/lib/dts/src/observers/index.d.ts +3 -0
- package/lib/dts/src/observers/index.d.ts.map +1 -0
- package/lib/dts/src/observers/resizeObserver.d.ts +5 -0
- package/lib/dts/src/observers/resizeObserver.d.ts.map +1 -0
- package/lib/dts/src/primitives/_selectable/selectable.d.ts +1 -2
- package/lib/dts/src/primitives/_selectable/selectable.d.ts.map +1 -1
- package/lib/dts/src/primitives/avatar/avatar.d.ts.map +1 -1
- package/lib/dts/src/primitives/avatar/avatarCounter.d.ts +1 -0
- package/lib/dts/src/primitives/avatar/avatarCounter.d.ts.map +1 -1
- package/lib/dts/src/primitives/avatar/avatarStack.d.ts +1 -0
- package/lib/dts/src/primitives/avatar/avatarStack.d.ts.map +1 -1
- package/lib/dts/src/primitives/avatar/styles.d.ts.map +1 -1
- package/lib/dts/src/primitives/badge/badge.d.ts.map +1 -1
- package/lib/dts/src/primitives/box/box.d.ts.map +1 -1
- package/lib/dts/src/primitives/button/button.d.ts.map +1 -1
- package/lib/dts/src/primitives/card/card.d.ts.map +1 -1
- package/lib/dts/src/primitives/code/code.d.ts.map +1 -1
- package/lib/dts/src/primitives/container/container.d.ts.map +1 -1
- package/lib/dts/src/primitives/container/styles.d.ts.map +1 -1
- package/lib/dts/src/primitives/container/types.d.ts +1 -1
- package/lib/dts/src/primitives/container/types.d.ts.map +1 -1
- package/lib/dts/src/primitives/flex/flex.d.ts.map +1 -1
- package/lib/dts/src/primitives/grid/grid.d.ts.map +1 -1
- package/lib/dts/src/primitives/heading/heading.d.ts.map +1 -1
- package/lib/dts/src/primitives/inline/inline.d.ts.map +1 -1
- package/lib/dts/src/primitives/inline/styles.d.ts.map +1 -1
- package/lib/dts/src/primitives/inline/types.d.ts +1 -1
- package/lib/dts/src/primitives/inline/types.d.ts.map +1 -1
- package/lib/dts/src/primitives/kbd/kbd.d.ts.map +1 -1
- package/lib/dts/src/primitives/label/label.d.ts.map +1 -1
- package/lib/dts/src/primitives/popover/popover.d.ts.map +1 -1
- package/lib/dts/src/primitives/select/styles.d.ts +5 -1
- package/lib/dts/src/primitives/select/styles.d.ts.map +1 -1
- package/lib/dts/src/primitives/stack/stack.d.ts.map +1 -1
- package/lib/dts/src/primitives/stack/styles.d.ts +1 -1
- package/lib/dts/src/primitives/stack/styles.d.ts.map +1 -1
- package/lib/dts/src/primitives/text/text.d.ts.map +1 -1
- package/lib/dts/src/primitives/textArea/textArea.d.ts.map +1 -1
- package/lib/dts/src/primitives/textInput/textInput.d.ts.map +1 -1
- package/lib/dts/src/primitives/tooltip/tooltip.d.ts.map +1 -1
- package/lib/dts/src/primitives/types.d.ts +1 -1
- package/lib/dts/src/primitives/types.d.ts.map +1 -1
- package/lib/dts/src/styles/border/types.d.ts +5 -5
- package/lib/dts/src/styles/border/types.d.ts.map +1 -1
- package/lib/dts/src/styles/box/types.d.ts +4 -4
- package/lib/dts/src/styles/box/types.d.ts.map +1 -1
- package/lib/dts/src/styles/flex/flexItemStyle.d.ts.map +1 -1
- package/lib/dts/src/styles/flex/types.d.ts +6 -6
- package/lib/dts/src/styles/flex/types.d.ts.map +1 -1
- package/lib/dts/src/styles/font/responsiveFont.d.ts +1 -1
- package/lib/dts/src/styles/font/responsiveFont.d.ts.map +1 -1
- package/lib/dts/src/styles/font/types.d.ts +3 -3
- package/lib/dts/src/styles/font/types.d.ts.map +1 -1
- package/lib/dts/src/styles/grid/types.d.ts +14 -14
- package/lib/dts/src/styles/grid/types.d.ts.map +1 -1
- package/lib/dts/src/styles/helpers.d.ts +4 -4
- package/lib/dts/src/styles/helpers.d.ts.map +1 -1
- package/lib/dts/src/styles/input/responsiveInputPaddingStyle.d.ts +12 -12
- package/lib/dts/src/styles/input/responsiveInputPaddingStyle.d.ts.map +1 -1
- package/lib/dts/src/styles/input/textInputStyle.d.ts +4 -1
- package/lib/dts/src/styles/input/textInputStyle.d.ts.map +1 -1
- package/lib/dts/src/styles/margin/types.d.ts +7 -7
- package/lib/dts/src/styles/margin/types.d.ts.map +1 -1
- package/lib/dts/src/styles/padding/types.d.ts +7 -7
- package/lib/dts/src/styles/padding/types.d.ts.map +1 -1
- package/lib/dts/src/styles/radius/types.d.ts +1 -1
- package/lib/dts/src/styles/radius/types.d.ts.map +1 -1
- package/lib/dts/src/styles/shadow/shadowStyle.d.ts.map +1 -1
- package/lib/dts/src/styles/shadow/types.d.ts +1 -1
- package/lib/dts/src/styles/shadow/types.d.ts.map +1 -1
- package/lib/dts/src/theme/lib/theme/fonts.d.ts +1 -3
- package/lib/dts/src/theme/lib/theme/fonts.d.ts.map +1 -1
- package/lib/dts/src/theme/studioTheme/fonts.d.ts.map +1 -1
- package/lib/dts/src/types/index.d.ts +2 -1
- package/lib/dts/src/types/index.d.ts.map +1 -1
- package/lib/dts/src/types/placement.d.ts +7 -0
- package/lib/dts/src/types/placement.d.ts.map +1 -0
- package/lib/dts/src/types/text.d.ts +5 -0
- package/lib/dts/src/types/text.d.ts.map +1 -0
- package/lib/dts/src/utils/elementQuery/elementQuery.d.ts.map +1 -1
- package/lib/dts/src/utils/index.d.ts +0 -1
- package/lib/dts/src/utils/index.d.ts.map +1 -1
- package/lib/dts/src/utils/virtualList/virtualList.d.ts.map +1 -1
- package/lib/sanity-ui.js +738 -627
- package/lib/sanity-ui.js.map +1 -1
- package/lib/{sanity-ui.modern.js → sanity-ui.modern.mjs} +736 -616
- package/lib/sanity-ui.modern.mjs.map +1 -0
- package/lib/sanity-ui.module.js +732 -623
- package/lib/sanity-ui.module.js.map +1 -1
- package/package.json +11 -11
- package/src/__workshop__/color/overview.tsx +9 -11
- package/src/components/autocomplete/__workshop__/async.tsx +14 -12
- package/src/components/autocomplete/__workshop__/constrainedHeight.tsx +36 -0
- package/src/components/autocomplete/autocomplete.styles.tsx +0 -1
- package/src/components/autocomplete/autocomplete.tsx +14 -7
- package/src/components/autocomplete/constants.ts +0 -5
- package/src/components/breadcrumbs/breadcrumbs.tsx +3 -2
- package/src/components/dialog/dialog.tsx +17 -9
- package/src/components/dialog/styles.ts +3 -3
- package/src/components/hotkeys/hotkeys.tsx +3 -1
- package/src/components/menu/__workshop__/constrainedInBoundary.tsx +11 -14
- package/src/components/menu/__workshop__/groups.tsx +1 -1
- package/src/components/menu/menuButton.tsx +21 -13
- package/src/components/menu/menuGroup.tsx +3 -2
- package/src/components/menu/menuItem.tsx +4 -5
- package/src/components/skeleton/skeleton.tsx +10 -1
- package/src/components/skeleton/textSkeleton.tsx +7 -7
- package/src/hooks/_internal/useUnique.ts +4 -5
- package/src/hooks/index.ts +2 -1
- package/src/hooks/useArrayProp.ts +23 -0
- package/src/hooks/useElementRect/useElementRect.ts +4 -16
- package/src/hooks/useElementSize.ts +18 -0
- package/src/index.ts +1 -0
- package/src/observers/elementSizeObserver.ts +116 -0
- package/src/observers/index.ts +2 -0
- package/src/{utils → observers}/resizeObserver.ts +1 -4
- package/src/primitives/_selectable/selectable.tsx +5 -4
- package/src/primitives/avatar/avatar.tsx +7 -5
- package/src/primitives/avatar/avatarCounter.tsx +14 -12
- package/src/primitives/avatar/avatarStack.tsx +19 -13
- package/src/primitives/avatar/styles.ts +2 -2
- package/src/primitives/badge/badge.tsx +3 -2
- package/src/primitives/box/box.tsx +27 -26
- package/src/primitives/button/button.tsx +22 -10
- package/src/primitives/card/card.tsx +13 -11
- package/src/primitives/checkbox/__workshop__/example.tsx +4 -2
- package/src/primitives/checkbox/__workshop__/props.tsx +4 -2
- package/src/primitives/checkbox/__workshop__/readOnly.tsx +4 -2
- package/src/primitives/code/__workshop__/props.tsx +1 -1
- package/src/primitives/code/code.tsx +2 -1
- package/src/primitives/container/container.tsx +10 -1
- package/src/primitives/container/styles.ts +2 -2
- package/src/primitives/container/types.ts +1 -1
- package/src/primitives/flex/flex.tsx +6 -5
- package/src/primitives/grid/__workshop__/responsive.tsx +13 -12
- package/src/primitives/grid/grid.tsx +9 -8
- package/src/primitives/heading/__workshop__/opticalAlignment.tsx +19 -7
- package/src/primitives/heading/heading.tsx +3 -2
- package/src/primitives/inline/inline.tsx +12 -6
- package/src/primitives/inline/styles.ts +2 -2
- package/src/primitives/inline/types.ts +1 -1
- package/src/primitives/kbd/kbd.tsx +2 -1
- package/src/primitives/label/label.tsx +4 -3
- package/src/primitives/popover/__workshop__/{margins.tsx → MarginsStory.tsx} +1 -1
- package/src/primitives/popover/__workshop__/{matchReferenceWidth.tsx → MatchReferenceWidthStory.tsx} +0 -0
- package/src/primitives/popover/__workshop__/{plain.tsx → PlainStory.tsx} +12 -14
- package/src/primitives/popover/__workshop__/{recursive.tsx → RecursiveStory.tsx} +4 -1
- package/src/primitives/popover/__workshop__/RightAlignedStory.tsx +60 -0
- package/src/primitives/popover/__workshop__/TestStory.tsx +79 -0
- package/src/primitives/popover/__workshop__/index.ts +10 -5
- package/src/primitives/popover/popover.tsx +5 -3
- package/src/primitives/select/select.tsx +9 -9
- package/src/primitives/select/styles.ts +10 -4
- package/src/primitives/stack/stack.tsx +2 -1
- package/src/primitives/stack/styles.ts +3 -3
- package/src/primitives/text/__workshop__/opticalAlignment.tsx +15 -5
- package/src/primitives/text/text.tsx +3 -2
- package/src/primitives/textArea/__workshop__/plain.tsx +23 -18
- package/src/primitives/textArea/textArea.tsx +17 -5
- package/src/primitives/textInput/__workshop__/clearButton.tsx +14 -8
- package/src/primitives/textInput/__workshop__/index.ts +2 -2
- package/src/primitives/textInput/__workshop__/plain.tsx +39 -32
- package/src/primitives/textInput/__workshop__/tones.tsx +97 -75
- package/src/primitives/textInput/__workshop__/typed.tsx +8 -2
- package/src/primitives/textInput/textInput.tsx +43 -12
- package/src/primitives/tooltip/__workshop__/props.tsx +5 -1
- package/src/primitives/tooltip/tooltip.tsx +3 -2
- package/src/primitives/types.ts +1 -1
- package/src/styles/border/borderStyle.ts +6 -6
- package/src/styles/border/types.ts +5 -5
- package/src/styles/box/boxStyle.ts +5 -5
- package/src/styles/box/types.ts +4 -4
- package/src/styles/flex/flexItemStyle.ts +5 -4
- package/src/styles/flex/flexStyle.ts +6 -6
- package/src/styles/flex/types.ts +6 -6
- package/src/styles/font/responsiveFont.ts +7 -27
- package/src/styles/font/textAlignStyle.ts +2 -2
- package/src/styles/font/types.ts +4 -3
- package/src/styles/grid/gridItemStyle.ts +7 -7
- package/src/styles/grid/gridStyle.ts +9 -9
- package/src/styles/grid/types.ts +14 -14
- package/src/styles/helpers.ts +9 -9
- package/src/styles/input/responsiveInputPaddingStyle.ts +24 -27
- package/src/styles/input/textInputStyle.ts +89 -79
- package/src/styles/margin/marginStyle.ts +8 -8
- package/src/styles/margin/marginsStyle.test.ts +1 -1
- package/src/styles/margin/types.ts +7 -7
- package/src/styles/padding/paddingStyle.test.ts +1 -1
- package/src/styles/padding/paddingStyle.ts +8 -8
- package/src/styles/padding/types.ts +7 -7
- package/src/styles/radius/radiusStyle.ts +2 -2
- package/src/styles/radius/types.ts +1 -1
- package/src/styles/shadow/shadowStyle.ts +2 -5
- package/src/styles/shadow/types.ts +1 -1
- package/src/theme/lib/theme/fonts.ts +1 -3
- package/src/theme/studioTheme/fonts.ts +5 -9
- package/src/types/index.ts +2 -2
- package/src/types/placement.ts +18 -0
- package/src/types/text.ts +4 -0
- package/src/utils/elementQuery/elementQuery.tsx +5 -18
- package/src/utils/index.ts +0 -1
- package/src/utils/layer/layer.tsx +1 -1
- package/src/utils/layer/layerProvider.tsx +2 -2
- package/src/utils/virtualList/virtualList.tsx +8 -7
- package/lib/dts/src/hooks/useResponsiveProp.d.ts +0 -6
- package/lib/dts/src/hooks/useResponsiveProp.d.ts.map +0 -1
- package/lib/dts/src/types/common.d.ts +0 -11
- package/lib/dts/src/types/common.d.ts.map +0 -1
- package/lib/dts/src/utils/resizeObserver.d.ts +0 -6
- package/lib/dts/src/utils/resizeObserver.d.ts.map +0 -1
- package/lib/sanity-ui.modern.js.map +0 -1
- package/src/hooks/useResponsiveProp.ts +0 -10
- package/src/primitives/popover/__workshop__/rightAligned.tsx +0 -57
- package/src/types/common.ts +0 -12
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import {useMemo} from 'react'
|
|
2
|
-
import {getResponsiveProp} from '../styles'
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* This API might change. DO NOT USE IN PRODUCTION.
|
|
6
|
-
* @beta
|
|
7
|
-
*/
|
|
8
|
-
export function useResponsiveProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
|
|
9
|
-
return useMemo(() => getResponsiveProp(val, defaultVal), [defaultVal, val])
|
|
10
|
-
}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import {EllipsisVerticalIcon} from '@sanity/icons'
|
|
2
|
-
import {Box, Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
|
|
3
|
-
import React, {useCallback, useState} from 'react'
|
|
4
|
-
|
|
5
|
-
export default function RightAlignedStory() {
|
|
6
|
-
const [open, setOpen] = useState(false)
|
|
7
|
-
const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
|
|
8
|
-
const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
|
|
9
|
-
const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
|
|
10
|
-
const content = (
|
|
11
|
-
<Box overflow="auto" padding={3}>
|
|
12
|
-
<Text>
|
|
13
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
|
|
14
|
-
hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
|
|
15
|
-
quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam
|
|
16
|
-
luctus felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at rhoncus a,
|
|
17
|
-
tempus vel neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
|
|
18
|
-
cubilia curae; Sed id mauris quam. Nam finibus sapien non lacinia ultricies. Integer
|
|
19
|
-
fermentum tortor at pellentesque faucibus. In venenatis commodo placerat. Curabitur commodo
|
|
20
|
-
tortor libero, vel pellentesque elit luctus sodales. Donec mattis tristique nunc ac lacinia.
|
|
21
|
-
Vestibulum non pulvinar turpis, posuere consequat arcu. Fusce ut urna blandit, finibus nisi
|
|
22
|
-
a, molestie elit. Nulla sed eleifend mi.
|
|
23
|
-
</Text>
|
|
24
|
-
</Box>
|
|
25
|
-
)
|
|
26
|
-
|
|
27
|
-
const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
|
|
28
|
-
const handleClose = useCallback(() => setOpen(false), [])
|
|
29
|
-
|
|
30
|
-
useClickOutside(handleClose, [buttonElement, popoverElement])
|
|
31
|
-
|
|
32
|
-
return (
|
|
33
|
-
<Box height="fill" padding={[4, 5, 6]} sizing="border">
|
|
34
|
-
<Card height="fill" padding={2} ref={setBoundaryElement} shadow={1}>
|
|
35
|
-
<Flex justify="flex-end" padding={0}>
|
|
36
|
-
<Popover
|
|
37
|
-
boundaryElement={boundaryElement}
|
|
38
|
-
constrainSize
|
|
39
|
-
content={content}
|
|
40
|
-
open={open}
|
|
41
|
-
portal
|
|
42
|
-
preventOverflow
|
|
43
|
-
ref={setPopoverElement}
|
|
44
|
-
>
|
|
45
|
-
<Button
|
|
46
|
-
icon={EllipsisVerticalIcon}
|
|
47
|
-
mode="bleed"
|
|
48
|
-
onClick={handleToggleOpen}
|
|
49
|
-
ref={setButtonElement}
|
|
50
|
-
selected={open}
|
|
51
|
-
/>
|
|
52
|
-
</Popover>
|
|
53
|
-
</Flex>
|
|
54
|
-
</Card>
|
|
55
|
-
</Box>
|
|
56
|
-
)
|
|
57
|
-
}
|
package/src/types/common.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import {Placement as PopperPlacement} from '@popperjs/core'
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @public
|
|
5
|
-
*/
|
|
6
|
-
export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* A re-export of Popper’s `Placement` type
|
|
10
|
-
* @public
|
|
11
|
-
*/
|
|
12
|
-
export type Placement = PopperPlacement
|