@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.
Files changed (242) hide show
  1. package/lib/dts/src/components/autocomplete/autocomplete.d.ts +2 -2
  2. package/lib/dts/src/components/autocomplete/autocomplete.d.ts.map +1 -1
  3. package/lib/dts/src/components/autocomplete/autocomplete.styles.d.ts.map +1 -1
  4. package/lib/dts/src/components/autocomplete/constants.d.ts +0 -4
  5. package/lib/dts/src/components/autocomplete/constants.d.ts.map +1 -1
  6. package/lib/dts/src/components/breadcrumbs/breadcrumbs.d.ts.map +1 -1
  7. package/lib/dts/src/components/dialog/dialog.d.ts.map +1 -1
  8. package/lib/dts/src/components/dialog/styles.d.ts +1 -1
  9. package/lib/dts/src/components/dialog/styles.d.ts.map +1 -1
  10. package/lib/dts/src/components/hotkeys/hotkeys.d.ts.map +1 -1
  11. package/lib/dts/src/components/menu/menuButton.d.ts.map +1 -1
  12. package/lib/dts/src/components/menu/menuGroup.d.ts.map +1 -1
  13. package/lib/dts/src/components/menu/menuItem.d.ts.map +1 -1
  14. package/lib/dts/src/components/skeleton/skeleton.d.ts.map +1 -1
  15. package/lib/dts/src/hooks/_internal/useUnique.d.ts +2 -3
  16. package/lib/dts/src/hooks/_internal/useUnique.d.ts.map +1 -1
  17. package/lib/dts/src/hooks/index.d.ts +2 -1
  18. package/lib/dts/src/hooks/index.d.ts.map +1 -1
  19. package/lib/dts/src/hooks/useArrayProp.d.ts +7 -0
  20. package/lib/dts/src/hooks/useArrayProp.d.ts.map +1 -0
  21. package/lib/dts/src/hooks/useElementRect/useElementRect.d.ts +1 -1
  22. package/lib/dts/src/hooks/useElementRect/useElementRect.d.ts.map +1 -1
  23. package/lib/dts/src/hooks/useElementSize.d.ts +7 -0
  24. package/lib/dts/src/hooks/useElementSize.d.ts.map +1 -0
  25. package/lib/dts/src/index.d.ts +1 -0
  26. package/lib/dts/src/index.d.ts.map +1 -1
  27. package/lib/dts/src/observers/elementSizeObserver.d.ts +37 -0
  28. package/lib/dts/src/observers/elementSizeObserver.d.ts.map +1 -0
  29. package/lib/dts/src/observers/index.d.ts +3 -0
  30. package/lib/dts/src/observers/index.d.ts.map +1 -0
  31. package/lib/dts/src/observers/resizeObserver.d.ts +5 -0
  32. package/lib/dts/src/observers/resizeObserver.d.ts.map +1 -0
  33. package/lib/dts/src/primitives/_selectable/selectable.d.ts +1 -2
  34. package/lib/dts/src/primitives/_selectable/selectable.d.ts.map +1 -1
  35. package/lib/dts/src/primitives/avatar/avatar.d.ts.map +1 -1
  36. package/lib/dts/src/primitives/avatar/avatarCounter.d.ts +1 -0
  37. package/lib/dts/src/primitives/avatar/avatarCounter.d.ts.map +1 -1
  38. package/lib/dts/src/primitives/avatar/avatarStack.d.ts +1 -0
  39. package/lib/dts/src/primitives/avatar/avatarStack.d.ts.map +1 -1
  40. package/lib/dts/src/primitives/avatar/styles.d.ts.map +1 -1
  41. package/lib/dts/src/primitives/badge/badge.d.ts.map +1 -1
  42. package/lib/dts/src/primitives/box/box.d.ts.map +1 -1
  43. package/lib/dts/src/primitives/button/button.d.ts.map +1 -1
  44. package/lib/dts/src/primitives/card/card.d.ts.map +1 -1
  45. package/lib/dts/src/primitives/code/code.d.ts.map +1 -1
  46. package/lib/dts/src/primitives/container/container.d.ts.map +1 -1
  47. package/lib/dts/src/primitives/container/styles.d.ts.map +1 -1
  48. package/lib/dts/src/primitives/container/types.d.ts +1 -1
  49. package/lib/dts/src/primitives/container/types.d.ts.map +1 -1
  50. package/lib/dts/src/primitives/flex/flex.d.ts.map +1 -1
  51. package/lib/dts/src/primitives/grid/grid.d.ts.map +1 -1
  52. package/lib/dts/src/primitives/heading/heading.d.ts.map +1 -1
  53. package/lib/dts/src/primitives/inline/inline.d.ts.map +1 -1
  54. package/lib/dts/src/primitives/inline/styles.d.ts.map +1 -1
  55. package/lib/dts/src/primitives/inline/types.d.ts +1 -1
  56. package/lib/dts/src/primitives/inline/types.d.ts.map +1 -1
  57. package/lib/dts/src/primitives/kbd/kbd.d.ts.map +1 -1
  58. package/lib/dts/src/primitives/label/label.d.ts.map +1 -1
  59. package/lib/dts/src/primitives/popover/popover.d.ts.map +1 -1
  60. package/lib/dts/src/primitives/select/styles.d.ts +5 -1
  61. package/lib/dts/src/primitives/select/styles.d.ts.map +1 -1
  62. package/lib/dts/src/primitives/stack/stack.d.ts.map +1 -1
  63. package/lib/dts/src/primitives/stack/styles.d.ts +1 -1
  64. package/lib/dts/src/primitives/stack/styles.d.ts.map +1 -1
  65. package/lib/dts/src/primitives/text/text.d.ts.map +1 -1
  66. package/lib/dts/src/primitives/textArea/textArea.d.ts.map +1 -1
  67. package/lib/dts/src/primitives/textInput/textInput.d.ts.map +1 -1
  68. package/lib/dts/src/primitives/tooltip/tooltip.d.ts.map +1 -1
  69. package/lib/dts/src/primitives/types.d.ts +1 -1
  70. package/lib/dts/src/primitives/types.d.ts.map +1 -1
  71. package/lib/dts/src/styles/border/types.d.ts +5 -5
  72. package/lib/dts/src/styles/border/types.d.ts.map +1 -1
  73. package/lib/dts/src/styles/box/types.d.ts +4 -4
  74. package/lib/dts/src/styles/box/types.d.ts.map +1 -1
  75. package/lib/dts/src/styles/flex/flexItemStyle.d.ts.map +1 -1
  76. package/lib/dts/src/styles/flex/types.d.ts +6 -6
  77. package/lib/dts/src/styles/flex/types.d.ts.map +1 -1
  78. package/lib/dts/src/styles/font/responsiveFont.d.ts +1 -1
  79. package/lib/dts/src/styles/font/responsiveFont.d.ts.map +1 -1
  80. package/lib/dts/src/styles/font/types.d.ts +3 -3
  81. package/lib/dts/src/styles/font/types.d.ts.map +1 -1
  82. package/lib/dts/src/styles/grid/types.d.ts +14 -14
  83. package/lib/dts/src/styles/grid/types.d.ts.map +1 -1
  84. package/lib/dts/src/styles/helpers.d.ts +4 -4
  85. package/lib/dts/src/styles/helpers.d.ts.map +1 -1
  86. package/lib/dts/src/styles/input/responsiveInputPaddingStyle.d.ts +12 -12
  87. package/lib/dts/src/styles/input/responsiveInputPaddingStyle.d.ts.map +1 -1
  88. package/lib/dts/src/styles/input/textInputStyle.d.ts +4 -1
  89. package/lib/dts/src/styles/input/textInputStyle.d.ts.map +1 -1
  90. package/lib/dts/src/styles/margin/types.d.ts +7 -7
  91. package/lib/dts/src/styles/margin/types.d.ts.map +1 -1
  92. package/lib/dts/src/styles/padding/types.d.ts +7 -7
  93. package/lib/dts/src/styles/padding/types.d.ts.map +1 -1
  94. package/lib/dts/src/styles/radius/types.d.ts +1 -1
  95. package/lib/dts/src/styles/radius/types.d.ts.map +1 -1
  96. package/lib/dts/src/styles/shadow/shadowStyle.d.ts.map +1 -1
  97. package/lib/dts/src/styles/shadow/types.d.ts +1 -1
  98. package/lib/dts/src/styles/shadow/types.d.ts.map +1 -1
  99. package/lib/dts/src/theme/lib/theme/fonts.d.ts +1 -3
  100. package/lib/dts/src/theme/lib/theme/fonts.d.ts.map +1 -1
  101. package/lib/dts/src/theme/studioTheme/fonts.d.ts.map +1 -1
  102. package/lib/dts/src/types/index.d.ts +2 -1
  103. package/lib/dts/src/types/index.d.ts.map +1 -1
  104. package/lib/dts/src/types/placement.d.ts +7 -0
  105. package/lib/dts/src/types/placement.d.ts.map +1 -0
  106. package/lib/dts/src/types/text.d.ts +5 -0
  107. package/lib/dts/src/types/text.d.ts.map +1 -0
  108. package/lib/dts/src/utils/elementQuery/elementQuery.d.ts.map +1 -1
  109. package/lib/dts/src/utils/index.d.ts +0 -1
  110. package/lib/dts/src/utils/index.d.ts.map +1 -1
  111. package/lib/dts/src/utils/virtualList/virtualList.d.ts.map +1 -1
  112. package/lib/sanity-ui.js +738 -627
  113. package/lib/sanity-ui.js.map +1 -1
  114. package/lib/{sanity-ui.modern.js → sanity-ui.modern.mjs} +736 -616
  115. package/lib/sanity-ui.modern.mjs.map +1 -0
  116. package/lib/sanity-ui.module.js +732 -623
  117. package/lib/sanity-ui.module.js.map +1 -1
  118. package/package.json +11 -11
  119. package/src/__workshop__/color/overview.tsx +9 -11
  120. package/src/components/autocomplete/__workshop__/async.tsx +14 -12
  121. package/src/components/autocomplete/__workshop__/constrainedHeight.tsx +36 -0
  122. package/src/components/autocomplete/autocomplete.styles.tsx +0 -1
  123. package/src/components/autocomplete/autocomplete.tsx +14 -7
  124. package/src/components/autocomplete/constants.ts +0 -5
  125. package/src/components/breadcrumbs/breadcrumbs.tsx +3 -2
  126. package/src/components/dialog/dialog.tsx +17 -9
  127. package/src/components/dialog/styles.ts +3 -3
  128. package/src/components/hotkeys/hotkeys.tsx +3 -1
  129. package/src/components/menu/__workshop__/constrainedInBoundary.tsx +11 -14
  130. package/src/components/menu/__workshop__/groups.tsx +1 -1
  131. package/src/components/menu/menuButton.tsx +21 -13
  132. package/src/components/menu/menuGroup.tsx +3 -2
  133. package/src/components/menu/menuItem.tsx +4 -5
  134. package/src/components/skeleton/skeleton.tsx +10 -1
  135. package/src/components/skeleton/textSkeleton.tsx +7 -7
  136. package/src/hooks/_internal/useUnique.ts +4 -5
  137. package/src/hooks/index.ts +2 -1
  138. package/src/hooks/useArrayProp.ts +23 -0
  139. package/src/hooks/useElementRect/useElementRect.ts +4 -16
  140. package/src/hooks/useElementSize.ts +18 -0
  141. package/src/index.ts +1 -0
  142. package/src/observers/elementSizeObserver.ts +116 -0
  143. package/src/observers/index.ts +2 -0
  144. package/src/{utils → observers}/resizeObserver.ts +1 -4
  145. package/src/primitives/_selectable/selectable.tsx +5 -4
  146. package/src/primitives/avatar/avatar.tsx +7 -5
  147. package/src/primitives/avatar/avatarCounter.tsx +14 -12
  148. package/src/primitives/avatar/avatarStack.tsx +19 -13
  149. package/src/primitives/avatar/styles.ts +2 -2
  150. package/src/primitives/badge/badge.tsx +3 -2
  151. package/src/primitives/box/box.tsx +27 -26
  152. package/src/primitives/button/button.tsx +22 -10
  153. package/src/primitives/card/card.tsx +13 -11
  154. package/src/primitives/checkbox/__workshop__/example.tsx +4 -2
  155. package/src/primitives/checkbox/__workshop__/props.tsx +4 -2
  156. package/src/primitives/checkbox/__workshop__/readOnly.tsx +4 -2
  157. package/src/primitives/code/__workshop__/props.tsx +1 -1
  158. package/src/primitives/code/code.tsx +2 -1
  159. package/src/primitives/container/container.tsx +10 -1
  160. package/src/primitives/container/styles.ts +2 -2
  161. package/src/primitives/container/types.ts +1 -1
  162. package/src/primitives/flex/flex.tsx +6 -5
  163. package/src/primitives/grid/__workshop__/responsive.tsx +13 -12
  164. package/src/primitives/grid/grid.tsx +9 -8
  165. package/src/primitives/heading/__workshop__/opticalAlignment.tsx +19 -7
  166. package/src/primitives/heading/heading.tsx +3 -2
  167. package/src/primitives/inline/inline.tsx +12 -6
  168. package/src/primitives/inline/styles.ts +2 -2
  169. package/src/primitives/inline/types.ts +1 -1
  170. package/src/primitives/kbd/kbd.tsx +2 -1
  171. package/src/primitives/label/label.tsx +4 -3
  172. package/src/primitives/popover/__workshop__/{margins.tsx → MarginsStory.tsx} +1 -1
  173. package/src/primitives/popover/__workshop__/{matchReferenceWidth.tsx → MatchReferenceWidthStory.tsx} +0 -0
  174. package/src/primitives/popover/__workshop__/{plain.tsx → PlainStory.tsx} +12 -14
  175. package/src/primitives/popover/__workshop__/{recursive.tsx → RecursiveStory.tsx} +4 -1
  176. package/src/primitives/popover/__workshop__/RightAlignedStory.tsx +60 -0
  177. package/src/primitives/popover/__workshop__/TestStory.tsx +79 -0
  178. package/src/primitives/popover/__workshop__/index.ts +10 -5
  179. package/src/primitives/popover/popover.tsx +5 -3
  180. package/src/primitives/select/select.tsx +9 -9
  181. package/src/primitives/select/styles.ts +10 -4
  182. package/src/primitives/stack/stack.tsx +2 -1
  183. package/src/primitives/stack/styles.ts +3 -3
  184. package/src/primitives/text/__workshop__/opticalAlignment.tsx +15 -5
  185. package/src/primitives/text/text.tsx +3 -2
  186. package/src/primitives/textArea/__workshop__/plain.tsx +23 -18
  187. package/src/primitives/textArea/textArea.tsx +17 -5
  188. package/src/primitives/textInput/__workshop__/clearButton.tsx +14 -8
  189. package/src/primitives/textInput/__workshop__/index.ts +2 -2
  190. package/src/primitives/textInput/__workshop__/plain.tsx +39 -32
  191. package/src/primitives/textInput/__workshop__/tones.tsx +97 -75
  192. package/src/primitives/textInput/__workshop__/typed.tsx +8 -2
  193. package/src/primitives/textInput/textInput.tsx +43 -12
  194. package/src/primitives/tooltip/__workshop__/props.tsx +5 -1
  195. package/src/primitives/tooltip/tooltip.tsx +3 -2
  196. package/src/primitives/types.ts +1 -1
  197. package/src/styles/border/borderStyle.ts +6 -6
  198. package/src/styles/border/types.ts +5 -5
  199. package/src/styles/box/boxStyle.ts +5 -5
  200. package/src/styles/box/types.ts +4 -4
  201. package/src/styles/flex/flexItemStyle.ts +5 -4
  202. package/src/styles/flex/flexStyle.ts +6 -6
  203. package/src/styles/flex/types.ts +6 -6
  204. package/src/styles/font/responsiveFont.ts +7 -27
  205. package/src/styles/font/textAlignStyle.ts +2 -2
  206. package/src/styles/font/types.ts +4 -3
  207. package/src/styles/grid/gridItemStyle.ts +7 -7
  208. package/src/styles/grid/gridStyle.ts +9 -9
  209. package/src/styles/grid/types.ts +14 -14
  210. package/src/styles/helpers.ts +9 -9
  211. package/src/styles/input/responsiveInputPaddingStyle.ts +24 -27
  212. package/src/styles/input/textInputStyle.ts +89 -79
  213. package/src/styles/margin/marginStyle.ts +8 -8
  214. package/src/styles/margin/marginsStyle.test.ts +1 -1
  215. package/src/styles/margin/types.ts +7 -7
  216. package/src/styles/padding/paddingStyle.test.ts +1 -1
  217. package/src/styles/padding/paddingStyle.ts +8 -8
  218. package/src/styles/padding/types.ts +7 -7
  219. package/src/styles/radius/radiusStyle.ts +2 -2
  220. package/src/styles/radius/types.ts +1 -1
  221. package/src/styles/shadow/shadowStyle.ts +2 -5
  222. package/src/styles/shadow/types.ts +1 -1
  223. package/src/theme/lib/theme/fonts.ts +1 -3
  224. package/src/theme/studioTheme/fonts.ts +5 -9
  225. package/src/types/index.ts +2 -2
  226. package/src/types/placement.ts +18 -0
  227. package/src/types/text.ts +4 -0
  228. package/src/utils/elementQuery/elementQuery.tsx +5 -18
  229. package/src/utils/index.ts +0 -1
  230. package/src/utils/layer/layer.tsx +1 -1
  231. package/src/utils/layer/layerProvider.tsx +2 -2
  232. package/src/utils/virtualList/virtualList.tsx +8 -7
  233. package/lib/dts/src/hooks/useResponsiveProp.d.ts +0 -6
  234. package/lib/dts/src/hooks/useResponsiveProp.d.ts.map +0 -1
  235. package/lib/dts/src/types/common.d.ts +0 -11
  236. package/lib/dts/src/types/common.d.ts.map +0 -1
  237. package/lib/dts/src/utils/resizeObserver.d.ts +0 -6
  238. package/lib/dts/src/utils/resizeObserver.d.ts.map +0 -1
  239. package/lib/sanity-ui.modern.js.map +0 -1
  240. package/src/hooks/useResponsiveProp.ts +0 -10
  241. package/src/primitives/popover/__workshop__/rightAligned.tsx +0 -57
  242. 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
- }
@@ -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