@sanity/ui 3.0.0-static.27 → 3.0.0-static.28

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 (217) hide show
  1. package/README.md +1 -1
  2. package/dist/_chunks-cjs/_visual-editing.cjs +710 -840
  3. package/dist/_chunks-cjs/_visual-editing.cjs.map +1 -1
  4. package/dist/_chunks-cjs/refractor.cjs +2 -2
  5. package/dist/_chunks-cjs/refractor.cjs.map +1 -1
  6. package/dist/_chunks-es/_visual-editing.js +705 -834
  7. package/dist/_chunks-es/_visual-editing.js.map +1 -1
  8. package/dist/_chunks-es/refractor.js +1 -1
  9. package/dist/css/layers.css +4 -0
  10. package/dist/css/primitives/popover/popover.css +4 -0
  11. package/dist/css.cjs +58 -49
  12. package/dist/css.cjs.map +1 -1
  13. package/dist/css.d.cts +13 -5
  14. package/dist/css.d.ts +13 -5
  15. package/dist/css.js +58 -49
  16. package/dist/css.js.map +1 -1
  17. package/dist/index.cjs +2006 -1824
  18. package/dist/index.cjs.map +1 -1
  19. package/dist/index.css +1 -0
  20. package/dist/index.d.cts +34 -17
  21. package/dist/index.d.ts +34 -17
  22. package/dist/index.js +2002 -1821
  23. package/dist/index.js.map +1 -1
  24. package/dist/theme.cjs +7 -7
  25. package/dist/theme.cjs.map +1 -1
  26. package/dist/theme.js +7 -7
  27. package/dist/theme.js.map +1 -1
  28. package/exports/_visual-editing.ts +1 -1
  29. package/package.json +10 -15
  30. package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx +2 -2
  31. package/src/core/components/autocomplete/__workshop__/fullscreen.tsx +1 -1
  32. package/src/core/components/autocomplete/autocomplete.tsx +13 -17
  33. package/src/core/components/autocomplete/autocompleteOption.tsx +1 -1
  34. package/src/core/components/autocomplete/constants.ts +3 -1
  35. package/src/core/components/autocomplete/types.ts +1 -1
  36. package/src/core/components/breadcrumbs/breadcrumbs.tsx +8 -3
  37. package/src/core/components/dialog/__workshop__/activate.tsx +11 -3
  38. package/src/core/components/dialog/__workshop__/panes.tsx +12 -5
  39. package/src/core/components/dialog/dialog.tsx +12 -6
  40. package/src/core/components/dialog/dialogCard.tsx +89 -54
  41. package/src/core/components/dialog/dialogContext.ts +1 -1
  42. package/src/core/components/dialog/dialogProvider.tsx +1 -1
  43. package/src/core/components/dialog/index.ts +1 -0
  44. package/src/core/components/dialog/isTargetWithinScope.ts +1 -1
  45. package/src/core/components/hotkeys/hotkeys.tsx +3 -2
  46. package/src/core/components/menu/__workshop__/avatarMenu.tsx +12 -6
  47. package/src/core/components/menu/__workshop__/customSelectedState.tsx +1 -5
  48. package/src/core/components/menu/__workshop__/shouldFocus.tsx +1 -2
  49. package/src/core/components/menu/helpers.ts +1 -1
  50. package/src/core/components/menu/menu.tsx +6 -3
  51. package/src/core/components/menu/menuButton.tsx +5 -3
  52. package/src/core/components/menu/menuDivider.tsx +1 -1
  53. package/src/core/components/menu/menuGroup.tsx +8 -4
  54. package/src/core/components/menu/menuItem.tsx +4 -2
  55. package/src/core/components/tab/tab.tsx +2 -2
  56. package/src/core/components/tab/tabList.tsx +2 -2
  57. package/src/core/components/tab/tabPanel.tsx +2 -2
  58. package/src/core/components/toast/toast.tsx +7 -2
  59. package/src/core/components/toast/toastLayer.tsx +3 -2
  60. package/src/core/components/toast/toastProvider.tsx +1 -1
  61. package/src/core/components/tree/tree.tsx +2 -2
  62. package/src/core/components/tree/treeGroup.tsx +2 -2
  63. package/src/core/components/tree/treeItem.tsx +13 -6
  64. package/src/core/components/tree/types.ts +0 -1
  65. package/src/core/components/virtualList/virtualList.tsx +10 -5
  66. package/src/core/helpers/focus.ts +0 -8
  67. package/src/core/hooks/useArrayProp.ts +1 -1
  68. package/src/core/hooks/useElementRect/__workshop__/example.tsx +1 -3
  69. package/src/core/hooks/useElementSize.ts +1 -1
  70. package/src/core/hooks/useResponsiveProp.ts +1 -1
  71. package/src/core/index.ts +83 -7
  72. package/src/core/observers/{elementSizeObserver.ts → elementSize.ts} +1 -1
  73. package/src/core/primitives/_selectable/index.ts +1 -0
  74. package/src/core/primitives/_selectable/selectable.tsx +13 -3
  75. package/src/core/{types/selectable.ts → primitives/_selectable/types.ts} +1 -1
  76. package/src/core/primitives/arrow/arrow.tsx +1 -1
  77. package/src/core/primitives/avatar/avatar.tsx +4 -3
  78. package/src/core/primitives/avatar/avatarCounter.tsx +3 -3
  79. package/src/core/primitives/avatar/avatarStack.tsx +4 -4
  80. package/src/core/primitives/avatar/types.ts +17 -0
  81. package/src/core/primitives/badge/badge.tsx +2 -1
  82. package/src/core/primitives/badge/types.ts +11 -2
  83. package/src/core/primitives/box/__workshop__/responsive.tsx +0 -1
  84. package/src/core/primitives/box/box.tsx +1 -1
  85. package/src/core/primitives/box/index.ts +1 -0
  86. package/src/core/primitives/button/__workshop__/disabled.tsx +37 -51
  87. package/src/core/primitives/button/__workshop__/index.ts +5 -0
  88. package/src/core/primitives/button/__workshop__/textOverflow.tsx +13 -0
  89. package/src/core/primitives/button/button.tsx +15 -14
  90. package/src/core/primitives/button/index.ts +1 -0
  91. package/src/core/primitives/card/__workshop__/listNavigation.tsx +2 -2
  92. package/src/core/primitives/card/card.tsx +1 -1
  93. package/src/core/primitives/card/types.ts +3 -0
  94. package/src/core/primitives/checkbox/__workshop__/tones.tsx +9 -1
  95. package/src/core/primitives/checkbox/checkbox.tsx +3 -4
  96. package/src/core/primitives/code/__workshop__/opticalAlignment.tsx +17 -42
  97. package/src/core/primitives/code/code.tsx +1 -1
  98. package/src/core/primitives/container/container.tsx +1 -1
  99. package/src/core/primitives/flex/flex.tsx +1 -1
  100. package/src/core/primitives/flex/index.ts +1 -0
  101. package/src/core/primitives/grid/grid.tsx +1 -1
  102. package/src/core/primitives/grid/index.ts +1 -0
  103. package/src/core/primitives/heading/heading.tsx +1 -1
  104. package/src/core/primitives/inline/inline.tsx +1 -1
  105. package/src/core/primitives/kbd/kbd.tsx +1 -1
  106. package/src/core/primitives/label/label.tsx +1 -1
  107. package/src/core/primitives/layer/layer.test.tsx +1 -1
  108. package/src/core/primitives/layer/layer.tsx +2 -2
  109. package/src/core/primitives/layer/layerCard.tsx +3 -3
  110. package/src/core/primitives/layer/layerProvider.tsx +2 -1
  111. package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +12 -10
  112. package/src/core/primitives/popover/__workshop__/TestStory.tsx +9 -8
  113. package/src/core/primitives/popover/constants.ts +1 -1
  114. package/src/core/primitives/popover/floating-ui/size.ts +1 -1
  115. package/src/core/primitives/popover/popover.tsx +7 -4
  116. package/src/core/primitives/popover/popoverLayer.tsx +2 -1
  117. package/src/core/primitives/popover/types.ts +5 -0
  118. package/src/core/primitives/radio/radio.tsx +2 -2
  119. package/src/core/primitives/select/select.tsx +2 -2
  120. package/src/core/{components → primitives}/skeleton/__workshop__/index.ts +1 -1
  121. package/src/core/{components → primitives}/skeleton/codeSkeleton.tsx +1 -1
  122. package/src/core/{components → primitives}/skeleton/headingSkeleton.tsx +1 -1
  123. package/src/core/{components → primitives}/skeleton/labelSkeleton.tsx +1 -1
  124. package/src/core/{components → primitives}/skeleton/skeleton.tsx +7 -8
  125. package/src/core/{components → primitives}/skeleton/textSkeleton.tsx +1 -1
  126. package/src/core/primitives/spinner/spinner.tsx +1 -1
  127. package/src/core/primitives/srOnly/srOnly.tsx +1 -1
  128. package/src/core/primitives/stack/stack.tsx +1 -1
  129. package/src/core/primitives/switch/switch.tsx +1 -6
  130. package/src/core/primitives/text/__workshop__/colored.tsx +2 -2
  131. package/src/core/primitives/text/__workshop__/opticalAlignment.tsx +17 -42
  132. package/src/core/primitives/text/text.tsx +3 -1
  133. package/src/core/primitives/textArea/__workshop__/plain.tsx +2 -2
  134. package/src/core/primitives/textArea/textArea.tsx +2 -2
  135. package/src/core/primitives/textInput/textInput.tsx +3 -2
  136. package/src/core/primitives/tooltip/constants.ts +1 -1
  137. package/src/core/primitives/tooltip/tooltip.tsx +5 -3
  138. package/src/core/primitives/tooltip/tooltipLayer.tsx +1 -1
  139. package/src/core/primitives/types.ts +8 -10
  140. package/src/core/types/radius.ts +1 -1
  141. package/src/core/utils/elementQuery/__workshop__/customMedia.tsx +9 -5
  142. package/src/core/utils/elementQuery/elementQuery.tsx +2 -2
  143. package/src/core/utils/portal/portal.tsx +1 -1
  144. package/src/css/components/dialog/dialog.css.ts +26 -1
  145. package/src/css/components/dialog/dialog.ts +27 -7
  146. package/src/css/components/skeleton/skeleton.ts +3 -1
  147. package/src/css/components/skeleton/types.ts +3 -1
  148. package/src/css/index.ts +75 -5
  149. package/src/css/primitives/_input/input.ts +2 -1
  150. package/src/css/primitives/_input/types.ts +2 -1
  151. package/src/css/primitives/_selectable/_selectable.css.ts +32 -24
  152. package/src/css/primitives/_selectable/selectable.ts +1 -1
  153. package/src/css/primitives/_selectable/types.ts +1 -1
  154. package/src/css/primitives/avatar/avatar.css.ts +8 -4
  155. package/src/css/primitives/avatar/avatar.ts +1 -1
  156. package/src/css/primitives/badge/types.ts +0 -2
  157. package/src/css/primitives/box/box.ts +35 -37
  158. package/src/css/primitives/box/types.ts +34 -36
  159. package/src/css/primitives/button/button.css.ts +4 -0
  160. package/src/css/primitives/button/button.ts +5 -2
  161. package/src/css/primitives/button/types.ts +4 -11
  162. package/src/css/primitives/card/__workshop__/color.tsx +70 -0
  163. package/src/css/primitives/card/__workshop__/index.ts +14 -0
  164. package/src/css/primitives/card/card.css.ts +4 -0
  165. package/src/css/primitives/code/code.ts +3 -1
  166. package/src/css/primitives/code/types.ts +2 -1
  167. package/src/css/primitives/container/container.ts +3 -1
  168. package/src/css/primitives/heading/heading.ts +4 -1
  169. package/src/css/primitives/heading/types.ts +3 -1
  170. package/src/css/primitives/kbd/kbd.ts +1 -1
  171. package/src/css/primitives/kbd/types.ts +1 -1
  172. package/src/css/primitives/label/label.ts +4 -1
  173. package/src/css/primitives/label/types.ts +3 -1
  174. package/src/css/primitives/switch/switch.css.ts +1 -1
  175. package/src/css/primitives/text/text.ts +6 -1
  176. package/src/css/primitives/text/types.ts +5 -2
  177. package/src/theme/v3/defaultFonts.ts +6 -6
  178. package/src/theme/v3/defaultTokens.ts +1 -1
  179. package/bin/sanity-ui.cjs +0 -5
  180. package/dist/ui.css +0 -1
  181. package/src/cli/buildCommand.ts +0 -10
  182. package/src/cli/index.ts +0 -26
  183. package/src/core/components/autocomplete/index.ts +0 -2
  184. package/src/core/components/index.ts +0 -10
  185. package/src/core/helpers/index.ts +0 -5
  186. package/src/core/hooks/index.ts +0 -13
  187. package/src/core/observers/index.ts +0 -2
  188. package/src/core/primitives/index.ts +0 -30
  189. package/src/core/types/avatar.ts +0 -16
  190. package/src/core/types/card.ts +0 -4
  191. package/src/core/types/index.ts +0 -15
  192. package/src/core/types/popover.ts +0 -4
  193. package/src/core/utils/index.ts +0 -4
  194. package/src/css/__theme/index.ts +0 -16
  195. package/src/css/__theme/lib/contract/buildVarContract.ts +0 -78
  196. package/src/css/__theme/lib/contract/index.ts +0 -4
  197. package/src/css/__theme/lib/contract/types.ts +0 -17
  198. package/src/css/__theme/resolveTheme.ts +0 -865
  199. package/src/css/components/index.ts +0 -6
  200. package/src/css/primitives/index.ts +0 -24
  201. package/src/css/props/index.ts +0 -37
  202. package/src/css/utils/srOnly/index.ts +0 -1
  203. /package/src/core/{global.ts → __DEV__.ts} +0 -0
  204. /package/src/core/{types/dialog.ts → components/dialog/types.ts} +0 -0
  205. /package/src/core/observers/{resizeObserver.ts → resize.ts} +0 -0
  206. /package/src/core/{types/badge.ts → primitives/badge/types2.ts} +0 -0
  207. /package/src/core/{types/box.ts → primitives/box/types.ts} +0 -0
  208. /package/src/core/{types/button.ts → primitives/button/types.ts} +0 -0
  209. /package/src/core/{types/flex.ts → primitives/flex/types.ts} +0 -0
  210. /package/src/core/{types/grid.ts → primitives/grid/types.ts} +0 -0
  211. /package/src/core/{components → primitives}/skeleton/__workshop__/delay.tsx +0 -0
  212. /package/src/core/{components → primitives}/skeleton/__workshop__/skeleton.tsx +0 -0
  213. /package/src/core/{components → primitives}/skeleton/index.ts +0 -0
  214. /package/src/core/types/{text.ts → textAlign.ts} +0 -0
  215. /package/src/css/{utils → primitives/srOnly}/index.ts +0 -0
  216. /package/src/css/{utils → primitives}/srOnly/srOnly.css.ts +0 -0
  217. /package/src/css/{utils → primitives}/srOnly/srOnly.ts +0 -0
@@ -20,11 +20,11 @@ export {Flex, type FlexProps} from '../src/core/primitives/flex/flex'
20
20
  export {Grid, type GridProps} from '../src/core/primitives/grid/grid'
21
21
  export {LayerProvider} from '../src/core/primitives/layer/layerProvider'
22
22
  export {Popover, type PopoverProps} from '../src/core/primitives/popover/popover'
23
+ export type {PopoverMargins} from '../src/core/primitives/popover/types'
23
24
  export {Spinner, type SpinnerProps} from '../src/core/primitives/spinner/spinner'
24
25
  export {Stack, type StackProps} from '../src/core/primitives/stack/stack'
25
26
  export {Text, type TextProps} from '../src/core/primitives/text/text'
26
27
  export {TextInput, type TextInputProps} from '../src/core/primitives/textInput/textInput'
27
28
  export {Tooltip, type TooltipProps} from '../src/core/primitives/tooltip/tooltip'
28
- export type {PopoverMargins} from '../src/core/types/popover'
29
29
  export {Portal, type PortalProps} from '../src/core/utils/portal/portal'
30
30
  export {PortalProvider, type PortalProviderProps} from '../src/core/utils/portal/portalProvider'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/ui",
3
- "version": "3.0.0-static.27",
3
+ "version": "3.0.0-static.28",
4
4
  "keywords": [
5
5
  "react",
6
6
  "ui",
@@ -41,14 +41,14 @@
41
41
  "require": "./dist/css.cjs",
42
42
  "default": "./dist/css.js"
43
43
  },
44
+ "./index.css": "./dist/index.css",
44
45
  "./package.json": "./package.json",
45
46
  "./theme": {
46
47
  "source": "./exports/theme.ts",
47
48
  "import": "./dist/theme.js",
48
49
  "require": "./dist/theme.cjs",
49
50
  "default": "./dist/theme.js"
50
- },
51
- "./ui.css": "./dist/ui.css"
51
+ }
52
52
  },
53
53
  "main": "./dist/index.cjs",
54
54
  "module": "./dist/index.js",
@@ -66,9 +66,6 @@
66
66
  ]
67
67
  }
68
68
  },
69
- "bin": {
70
- "sanity-ui": "./bin/sanity-ui.cjs"
71
- },
72
69
  "files": [
73
70
  "dist",
74
71
  "exports",
@@ -127,7 +124,7 @@
127
124
  "@sanity/pkg-utils": "^7.2.2",
128
125
  "@sanity/prettier-config": "^1.0.3",
129
126
  "@sanity/semantic-release-preset": "^5.0.0",
130
- "@sanity/ui-workshop": "^2.1.3",
127
+ "@sanity/ui-workshop": "^3.0.0",
131
128
  "@testing-library/dom": "^10.4.0",
132
129
  "@testing-library/jest-dom": "^6.6.3",
133
130
  "@testing-library/react": "^16.3.0",
@@ -150,7 +147,6 @@
150
147
  "cypress-real-events": "^1.14.0",
151
148
  "cz-conventional-changelog": "^3.3.0",
152
149
  "dotenv-flow": "^4.1.0",
153
- "esbuild-register": "^3.6.0",
154
150
  "eslint": "^9.26.0",
155
151
  "eslint-config-prettier": "^10.1.2",
156
152
  "eslint-formatter-compact": "^8.40.0",
@@ -163,7 +159,6 @@
163
159
  "eslint-plugin-simple-import-sort": "^12.1.1",
164
160
  "eslint-plugin-storybook": "^9.0.5",
165
161
  "globals": "^16.0.0",
166
- "http-server": "^14.1.1",
167
162
  "husky": "^8.0.3",
168
163
  "lightningcss": "^1.30.1",
169
164
  "lint-staged": "^14.0.1",
@@ -172,6 +167,7 @@
172
167
  "postcss": "^8.5.3",
173
168
  "postcss-preset-env": "^10.2.0",
174
169
  "prettier": "^3.5.3",
170
+ "prettier-plugin-packagejson": "^2.5.15",
175
171
  "react": "^19.1.0",
176
172
  "react-dom": "^19.1.0",
177
173
  "react-is": "^19.1.0",
@@ -206,7 +202,6 @@
206
202
  "scripts": {
207
203
  "build": "run-s clean pkg:build pkg:check",
208
204
  "clean": "rimraf dist",
209
- "_css:build": "node -r esbuild-register scripts/build",
210
205
  "commit": "cz",
211
206
  "cypress:dev": "run-p dev cypress:open",
212
207
  "cypress:open": "cypress open",
@@ -215,19 +210,19 @@
215
210
  "figma:build": "pnpm run --filter 'figma-plugin-sanity-ui' build",
216
211
  "format": "prettier --write --cache --ignore-unknown .",
217
212
  "lint": "eslint .",
218
- "pkg:build": "mkdirp dist && touch dist/ui.css && pkg build --strict",
213
+ "pkg:build": "mkdirp dist && touch dist/index.css && NODE_ENV=production pkg build --strict",
219
214
  "pkg:check": "pkg --strict",
220
- "pkg:watch": "mkdirp dist && touch dist/ui.css && pkg watch --strict",
215
+ "pkg:watch": "mkdirp dist && touch dist/index.css && pkg watch --strict",
221
216
  "release": "semantic-release",
222
217
  "storybook:build": "pnpm run --filter 'sanity-ui-storybook' build",
223
218
  "storybook:dev": "pnpm run --filter 'sanity-ui-storybook' dev",
224
219
  "test": "vitest run",
225
- "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
220
+ "test:browser": "start-server-and-test 'run-s workshop:build workshop:preview' http://localhost:1337 'run-s cypress:run'",
226
221
  "typecheck": "tsc",
227
222
  "watch": "pkg watch --strict",
228
223
  "workshop:build": "workshop build",
229
224
  "workshop:clean": "rimraf .workshop",
230
- "workshop:dev": "node -r esbuild-register ../ui-workshop/scripts/dev",
231
- "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
225
+ "workshop:dev": "workshop dev",
226
+ "workshop:preview": "workshop preview"
232
227
  }
233
228
  }
@@ -1,17 +1,17 @@
1
1
  import {
2
2
  Autocomplete,
3
+ type AutocompleteProps,
3
4
  BoundaryElementProvider,
4
5
  Box,
5
6
  Card,
6
7
  Container,
7
8
  LayerProvider,
9
+ Popover,
8
10
  Stack,
9
11
  Text,
10
12
  } from '@sanity/ui'
11
13
  import {useCallback, useState} from 'react'
12
14
 
13
- import {Popover} from '../../../primitives'
14
- import type {AutocompleteProps} from '../autocomplete'
15
15
  import countries from './mock/countries'
16
16
  import type {ExampleOption} from './types'
17
17
 
@@ -174,7 +174,7 @@ export default function Fullscreen() {
174
174
  }, [value])
175
175
 
176
176
  return (
177
- <Card display="flex" direction="column" minHeight="full" tone="transparent">
177
+ <Card display="flex" flexDirection="column" minHeight="full" tone="transparent">
178
178
  <PortalProvider element={portalElement}>
179
179
  <Card hidden={open} padding={2}>
180
180
  <Flex align="center">
@@ -1,6 +1,6 @@
1
1
  import {ChevronDownIcon} from '@sanity/icons'
2
2
  import type {ResponsiveProp} from '@sanity/ui/css'
3
- import type {Space} from '@sanity/ui/theme'
3
+ import type {Radius, Space} from '@sanity/ui/theme'
4
4
  import {
5
5
  type ChangeEvent,
6
6
  cloneElement,
@@ -19,22 +19,18 @@ import {
19
19
  } from 'react'
20
20
 
21
21
  import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
22
- import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
23
- import {useResponsiveProp} from '../../hooks'
24
- import {
25
- Box,
26
- type BoxProps,
27
- Button,
28
- Card,
29
- Popover,
30
- type PopoverProps,
31
- Stack,
32
- Text,
33
- TextInput,
34
- type TextInputOwnProps,
35
- } from '../../primitives'
22
+ import {_raf} from '../../helpers/animation'
23
+ import {_hasFocus, focusFirstDescendant} from '../../helpers/focus'
24
+ import {useResponsiveProp} from '../../hooks/useResponsiveProp'
25
+ import {Box, type BoxOwnProps} from '../../primitives/box'
26
+ import {Button} from '../../primitives/button'
27
+ import {Card} from '../../primitives/card'
28
+ import {Popover, type PopoverProps} from '../../primitives/popover'
36
29
  import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
37
- import type {ComponentType, Props, Radius} from '../../types'
30
+ import {Stack} from '../../primitives/stack'
31
+ import {Text} from '../../primitives/text'
32
+ import {TextInput, type TextInputOwnProps} from '../../primitives/textInput'
33
+ import type {ComponentType, Props} from '../../types/props'
38
34
  import {AutocompleteOption} from './autocompleteOption'
39
35
  import {autocompleteReducer} from './autocompleteReducer'
40
36
  import {
@@ -55,7 +51,7 @@ export type AutocompleteOwnProps<O extends BaseAutocompleteOption = BaseAutocomp
55
51
  filterOption?: (query: string, option: O) => boolean
56
52
  icon?: ElementType | ReactNode
57
53
  /** @beta */
58
- listBox?: BoxProps
54
+ listBox?: BoxOwnProps
59
55
  loading?: boolean
60
56
  onChange?: (value: string) => void
61
57
  onQueryChange?: (query: string | null) => void
@@ -1,6 +1,6 @@
1
1
  import {type KeyboardEvent, type ReactElement, type ReactNode, useCallback} from 'react'
2
2
 
3
- import {_isEnterToClickElement} from '../../helpers'
3
+ import {_isEnterToClickElement} from '../../helpers/element'
4
4
 
5
5
  export interface AutocompleteOptionProps {
6
6
  children: ReactNode
@@ -1,4 +1,6 @@
1
- import type {Placement} from '../../types'
1
+ // import type {Placement} from '../../types'
2
+
3
+ import type {Placement} from '../../types/placement'
2
4
 
3
5
  /**
4
6
  * @internal
@@ -1,4 +1,4 @@
1
- import type {ButtonProps} from '../../primitives'
1
+ import type {ButtonProps} from '../../primitives/button'
2
2
 
3
3
  /** @public */
4
4
  export type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>
@@ -11,9 +11,14 @@ import {
11
11
  useState,
12
12
  } from 'react'
13
13
 
14
- import {useClickOutsideEvent} from '../../hooks'
15
- import {Box, Button, type ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
16
- import type {ComponentType, Props} from '../../types'
14
+ import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
15
+ import {Box} from '../../primitives/box'
16
+ import {Button, type ButtonProps} from '../../primitives/button'
17
+ import {Flex} from '../../primitives/flex'
18
+ import {Popover} from '../../primitives/popover'
19
+ import {Stack} from '../../primitives/stack'
20
+ import {Text} from '../../primitives/text'
21
+ import type {ComponentType, Props} from '../../types/props'
17
22
 
18
23
  /** @beta */
19
24
  export const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
@@ -1,8 +1,16 @@
1
+ import {
2
+ Button,
3
+ Flex,
4
+ Layer,
5
+ LayerProvider,
6
+ Menu,
7
+ MenuButton,
8
+ MenuItem,
9
+ Stack,
10
+ Text,
11
+ } from '@sanity/ui'
1
12
  import {useState} from 'react'
2
13
 
3
- import {Button, Flex, Stack, Text} from '../../../primitives'
4
- import {Layer, LayerProvider} from '../../../utils'
5
- import {Menu, MenuButton, MenuItem} from '../../menu'
6
14
  import {Dialog} from '../dialog'
7
15
 
8
16
  export default function LayeringFocusStory() {
@@ -1,11 +1,18 @@
1
+ import {
2
+ BoundaryElementProvider,
3
+ Box,
4
+ Button,
5
+ Card,
6
+ Dialog,
7
+ Flex,
8
+ Menu,
9
+ MenuButton,
10
+ MenuItem,
11
+ PortalProvider,
12
+ } from '@sanity/ui'
1
13
  import {useCallback, useState} from 'react'
2
14
  import {styled} from 'styled-components'
3
15
 
4
- import {Box, Button, Card, Flex} from '../../../primitives'
5
- import {BoundaryElementProvider, PortalProvider} from '../../../utils'
6
- import {Menu, MenuButton, MenuItem} from '../../menu'
7
- import {Dialog} from '../dialog'
8
-
9
16
  export default function PanesStory() {
10
17
  return (
11
18
  <Flex height="fill">
@@ -4,17 +4,23 @@ import {
4
4
  dialogContainer,
5
5
  type ResponsiveProp,
6
6
  } from '@sanity/ui/css'
7
- import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
7
+ import type {Radius, ThemeColorSchemeKey} from '@sanity/ui/theme'
8
8
  import {type FocusEvent, type ForwardedRef, type ReactNode, useCallback, useRef} from 'react'
9
9
 
10
10
  import {Z_OFFSETS} from '../../constants'
11
- import {focusFirstDescendant, focusLastDescendant, isHTMLElement} from '../../helpers'
12
- import {usePrefersReducedMotion, useResponsiveProp} from '../../hooks'
13
- import {Container, Layer, type LayerOwnProps, type LayerProps} from '../../primitives'
14
- import type {CardTone, ComponentType, DialogPosition, Props, Radius} from '../../types'
15
- import {Portal, useBoundaryElement, usePortal} from '../../utils'
11
+ import {isHTMLElement} from '../../helpers/element'
12
+ import {focusFirstDescendant, focusLastDescendant} from '../../helpers/focus'
13
+ import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
14
+ import {useResponsiveProp} from '../../hooks/useResponsiveProp'
15
+ import type {CardTone} from '../../primitives/card'
16
+ import {Container} from '../../primitives/container'
17
+ import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer'
18
+ import type {ComponentType, Props} from '../../types/props'
19
+ import {useBoundaryElement} from '../../utils/boundaryElement'
20
+ import {Portal, usePortal} from '../../utils/portal'
16
21
  import {DialogCard} from './dialogCard'
17
22
  import {isTargetWithinScope} from './isTargetWithinScope'
23
+ import type {DialogPosition} from './types'
18
24
  import {useDialog} from './useDialog'
19
25
 
20
26
  /** @public */
@@ -1,5 +1,13 @@
1
1
  import {CloseIcon} from '@sanity/icons'
2
- import {dialogCard, dialogContent, dialogFooter, dialogHeader, dialogLayout} from '@sanity/ui/css'
2
+ import {
3
+ dialogCard,
4
+ dialogContent,
5
+ dialogFooter,
6
+ dialogHeader,
7
+ dialogScroller,
8
+ dialogScrollerShadowBottom,
9
+ dialogScrollerShadowTop,
10
+ } from '@sanity/ui/css'
3
11
  import {
4
12
  type ForwardedRef,
5
13
  type ReactNode,
@@ -7,22 +15,21 @@ import {
7
15
  useEffect,
8
16
  useImperativeHandle,
9
17
  useRef,
18
+ useState,
10
19
  } from 'react'
11
20
 
12
- import {focusFirstDescendant} from '../../helpers'
13
- import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
14
- import {
15
- Box,
16
- Button,
17
- Card,
18
- type CardElementType,
19
- type CardOwnProps,
20
- Flex,
21
- Text,
22
- useLayer,
23
- } from '../../primitives'
24
- import type {Props} from '../../types'
25
- import {useBoundaryElement, usePortal} from '../../utils'
21
+ import {focusFirstDescendant} from '../../helpers/focus'
22
+ import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
23
+ import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
24
+ import {Box} from '../../primitives/box'
25
+ import {Button} from '../../primitives/button'
26
+ import {Card, type CardElementType, type CardOwnProps} from '../../primitives/card'
27
+ import {Flex} from '../../primitives/flex'
28
+ import {useLayer} from '../../primitives/layer'
29
+ import {Text} from '../../primitives/text'
30
+ import type {Props} from '../../types/props'
31
+ import {useBoundaryElement} from '../../utils/boundaryElement'
32
+ import {usePortal} from '../../utils/portal'
26
33
  import {isTargetWithinScope} from './isTargetWithinScope'
27
34
 
28
35
  /** @internal */
@@ -88,6 +95,7 @@ export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIAL
88
95
  const labelId = `${id}_label`
89
96
  const showCloseButton = Boolean(onClose) && hideCloseButton === false
90
97
  const showHeader = Boolean(header) || showCloseButton
98
+ const [scrollTop, setScrollTop] = useState(0)
91
99
 
92
100
  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
93
101
  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
@@ -142,50 +150,77 @@ export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIAL
142
150
  () => [ref.current],
143
151
  )
144
152
 
153
+ useEffect(() => {
154
+ const el = contentRef.current
155
+
156
+ if (!el) return
157
+
158
+ const handleScroll = () => {
159
+ // console.log('scroll', el.scrollTop)
160
+ setScrollTop(el.scrollTop)
161
+ }
162
+
163
+ el.addEventListener('scroll', handleScroll, {passive: true})
164
+
165
+ return () => {
166
+ el.removeEventListener('scroll', handleScroll)
167
+ }
168
+ }, [])
169
+
145
170
  return (
146
- <Card {...rest} as={as} className={dialogCard()} display="flex" ref={ref}>
147
- <Flex className={dialogLayout()} direction="column" flex={1}>
148
- {showHeader && (
149
- <Box className={dialogHeader()} position="relative">
150
- <Flex align="flex-start" padding={3}>
151
- <Box flex={1} padding={2}>
152
- {header && (
153
- <Text id={labelId} size={1} weight="semibold">
154
- {header}
155
- </Text>
156
- )}
157
- </Box>
158
- {showCloseButton && (
159
- <Box flex="none">
160
- <Button
161
- aria-label="Close dialog"
162
- disabled={!onClose}
163
- icon={CloseIcon}
164
- mode="bleed"
165
- onClick={onClose}
166
- padding={2}
167
- />
168
- </Box>
169
- )}
170
- </Flex>
171
+ <Card
172
+ {...rest}
173
+ as={as}
174
+ className={dialogCard()}
175
+ display="flex"
176
+ flexDirection="column"
177
+ ref={ref}
178
+ >
179
+ {showHeader && (
180
+ <Flex align="flex-start" className={dialogHeader()} padding={3} position="relative">
181
+ <Box flex={1} padding={2}>
182
+ {header && (
183
+ <Text id={labelId} size={1} weight="semibold">
184
+ {header}
185
+ </Text>
186
+ )}
171
187
  </Box>
188
+
189
+ {showCloseButton && (
190
+ <Box flex="none">
191
+ <Button
192
+ aria-label="Close dialog"
193
+ disabled={!onClose}
194
+ icon={CloseIcon}
195
+ mode="bleed"
196
+ onClick={onClose}
197
+ padding={2}
198
+ />
199
+ </Box>
200
+ )}
201
+ </Flex>
202
+ )}
203
+
204
+ <Box className={dialogContent()} flex={1} position="relative" tabIndex={-1}>
205
+ {showHeader && (
206
+ <div
207
+ className={dialogScrollerShadowTop()}
208
+ style={{opacity: Math.min(scrollTop, 32) / 32}}
209
+ />
172
210
  )}
173
- <Box
174
- className={dialogContent()}
175
- flex={1}
176
- overflow="auto"
177
- position="relative"
178
- ref={contentRef}
179
- tabIndex={-1}
180
- >
211
+
212
+ <Box className={dialogScroller()} overflow="auto" ref={contentRef}>
181
213
  {children}
182
214
  </Box>
183
- {footer && (
184
- <Box className={dialogFooter()} position="relative">
185
- {footer}
186
- </Box>
187
- )}
188
- </Flex>
215
+
216
+ {footer && <div className={dialogScrollerShadowBottom()} />}
217
+ </Box>
218
+
219
+ {footer && (
220
+ <Box className={dialogFooter()} position="relative">
221
+ {footer}
222
+ </Box>
223
+ )}
189
224
  </Card>
190
225
  )
191
226
  }
@@ -1,7 +1,7 @@
1
1
  import type {ResponsiveProp} from '@sanity/ui/css'
2
2
 
3
3
  import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
4
- import type {DialogPosition} from '../../types'
4
+ import type {DialogPosition} from './types'
5
5
 
6
6
  /**
7
7
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -1,8 +1,8 @@
1
1
  import type {ResponsiveProp} from '@sanity/ui/css'
2
2
  import {type ReactElement, type ReactNode, useMemo} from 'react'
3
3
 
4
- import type {DialogPosition} from '../../types'
5
4
  import {DialogContext, type DialogContextValue} from './dialogContext'
5
+ import type {DialogPosition} from './types'
6
6
 
7
7
  /**
8
8
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -1,4 +1,5 @@
1
1
  export * from './dialog'
2
2
  export * from './dialogContext'
3
3
  export * from './dialogProvider'
4
+ export * from './types'
4
5
  export * from './useDialog'
@@ -1,4 +1,4 @@
1
- import {containsOrEqualsElement} from '../../helpers'
1
+ import {containsOrEqualsElement} from '../../helpers/element'
2
2
 
3
3
  export function isTargetWithinScope(
4
4
  boundaryElement: HTMLElement | null,
@@ -1,8 +1,9 @@
1
1
  import type {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
2
2
  import type {FontTextSize, Space} from '@sanity/ui/theme'
3
3
 
4
- import {Box, KBD} from '../../primitives'
5
- import type {ComponentType, Props} from '../../types'
4
+ import {Box} from '../../primitives/box'
5
+ import {KBD} from '../../primitives/kbd'
6
+ import type {ComponentType, Props} from '../../types/props'
6
7
 
7
8
  /** @public */
8
9
  export const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
@@ -1,10 +1,16 @@
1
1
  import {UsersIcon} from '@sanity/icons'
2
-
3
- import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
4
- import {Hotkeys} from '../../hotkeys'
5
- import {Menu} from '../menu'
6
- import {MenuButton} from '../menuButton'
7
- import {MenuItem} from '../menuItem'
2
+ import {
3
+ Avatar,
4
+ Badge,
5
+ Box,
6
+ Button,
7
+ Flex,
8
+ Hotkeys,
9
+ Menu,
10
+ MenuButton,
11
+ MenuItem,
12
+ Text,
13
+ } from '@sanity/ui'
8
14
 
9
15
  export default function AvatarMenuStory() {
10
16
  return (
@@ -1,11 +1,7 @@
1
1
  import {ChevronDownIcon} from '@sanity/icons'
2
+ import {Box, Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
2
3
  import {useSelect} from '@sanity/ui-workshop'
3
4
 
4
- import {Box, Button} from '../../../primitives'
5
- import {Menu} from '../menu'
6
- import {MenuButton} from '../menuButton'
7
- import {MenuItem} from '../menuItem'
8
-
9
5
  const selectedOptions = {
10
6
  undefined: 'undefined',
11
7
  true: true,
@@ -1,8 +1,7 @@
1
+ import {Button, Flex, LayerProvider, Popover} from '@sanity/ui'
1
2
  import {useSelect} from '@sanity/ui-workshop'
2
3
  import {Fragment, useCallback, useState} from 'react'
3
4
 
4
- import {Button, Flex, Popover} from '../../../primitives'
5
- import {LayerProvider} from '../../../utils'
6
5
  import {Menu} from '../menu'
7
6
  import {MenuDivider} from '../menuDivider'
8
7
  import {MenuItem} from '../menuItem'
@@ -1,4 +1,4 @@
1
- import {isHTMLAnchorElement, isHTMLButtonElement} from '../../helpers'
1
+ import {isHTMLAnchorElement, isHTMLButtonElement} from '../../helpers/element'
2
2
 
3
3
  /**
4
4
  * @internal
@@ -2,9 +2,12 @@ import {menu, type PaddingStyleProps, type ResponsiveProp} from '@sanity/ui/css'
2
2
  import type {Space} from '@sanity/ui/theme'
3
3
  import {useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
4
4
 
5
- import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
6
- import {Box, Stack, useLayer} from '../../primitives'
7
- import type {ComponentType, Props} from '../../types'
5
+ import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
6
+ import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
7
+ import {Box} from '../../primitives/box'
8
+ import {useLayer} from '../../primitives/layer'
9
+ import {Stack} from '../../primitives/stack'
10
+ import type {ComponentType, Props} from '../../types/props'
8
11
  import {MenuContext, type MenuContextValue} from './menuContext'
9
12
  import {useMenuController} from './useMenuController'
10
13
 
@@ -1,4 +1,4 @@
1
- import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
1
+ import type {Radius, ThemeColorSchemeKey} from '@sanity/ui/theme'
2
2
  import {
3
3
  cloneElement,
4
4
  type FocusEvent,
@@ -14,8 +14,10 @@ import {
14
14
  useState,
15
15
  } from 'react'
16
16
 
17
- import {type ButtonProps, Popover, type PopoverProps} from '../../primitives'
18
- import type {Placement, Props, Radius} from '../../types'
17
+ import type {ButtonProps} from '../../primitives/button'
18
+ import {Popover, type PopoverProps} from '../../primitives/popover'
19
+ import type {Placement} from '../../types/placement'
20
+ import type {Props} from '../../types/props'
19
21
  import type {MenuProps} from './menu'
20
22
 
21
23
  /** @public */
@@ -1,6 +1,6 @@
1
1
  import {menuDivider} from '@sanity/ui/css'
2
2
 
3
- import type {ComponentType, Props} from '../../types'
3
+ import type {ComponentType, Props} from '../../types/props'
4
4
 
5
5
  /** @public */
6
6
  export const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'