@sanity/ui 3.0.0-static.5 → 3.0.0-static.7

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 (57) hide show
  1. package/dist/_chunks-cjs/_visual-editing.js +60 -56
  2. package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
  3. package/dist/_chunks-es/_visual-editing.mjs +61 -57
  4. package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
  5. package/dist/_visual-editing.d.mts +10 -10
  6. package/dist/_visual-editing.d.ts +10 -10
  7. package/dist/cli.js +1 -1
  8. package/dist/css.d.mts +11 -1
  9. package/dist/css.d.ts +11 -1
  10. package/dist/css.js +324 -309
  11. package/dist/css.js.map +1 -1
  12. package/dist/css.mjs +324 -309
  13. package/dist/css.mjs.map +1 -1
  14. package/dist/index.d.mts +10 -10
  15. package/dist/index.d.ts +10 -10
  16. package/dist/index.js +5 -17
  17. package/dist/index.js.map +1 -1
  18. package/dist/index.mjs +7 -19
  19. package/dist/index.mjs.map +1 -1
  20. package/dist/sanity-theme.css +1 -1
  21. package/dist/system.css +229 -10
  22. package/dist/theme.js +1 -1
  23. package/dist/theme.js.map +1 -1
  24. package/dist/theme.mjs +1 -1
  25. package/dist/theme.mjs.map +1 -1
  26. package/package.json +2 -2
  27. package/src/css/aspects/index.ts +1 -0
  28. package/src/css/aspects/minWidth/index.ts +2 -0
  29. package/src/css/aspects/minWidth/minWidth.style.ts +13 -0
  30. package/src/css/aspects/minWidth/minWidth.ts +6 -0
  31. package/src/css/aspects/minWidth/types.ts +7 -0
  32. package/src/css/compile/compileRule.ts +1 -0
  33. package/src/css/compile/compileStyle.ts +1 -1
  34. package/src/css/primitives/_input/__workshop__/index.ts +1 -1
  35. package/src/css/primitives/box/box.style.ts +1 -1
  36. package/src/css/primitives/box/box.ts +2 -3
  37. package/src/css/primitives/box/types.ts +2 -0
  38. package/src/css/primitives/card/card.style.ts +69 -3
  39. package/src/css/primitives/card/types.ts +0 -1
  40. package/src/css/primitives/popover/popover.ts +4 -0
  41. package/src/css/primitives/switch/switch.style.ts +8 -83
  42. package/src/css/system.style.ts +2 -0
  43. package/src/theme/v3/defaults.ts +1 -1
  44. package/src/ui/components/autocomplete/__workshop__/index.ts +1 -1
  45. package/src/ui/components/autocomplete/autocomplete.tsx +2 -11
  46. package/src/ui/components/dialog/dialog.tsx +3 -4
  47. package/src/ui/constants.ts +6 -0
  48. package/src/ui/hooks/useMediaIndex/useMediaIndex.ts +0 -2
  49. package/src/ui/primitives/box/box.tsx +3 -2
  50. package/src/ui/primitives/card/card.tsx +2 -6
  51. package/src/ui/primitives/code/code.tsx +1 -1
  52. package/src/ui/primitives/kbd/kbd.tsx +2 -2
  53. package/src/ui/primitives/popover/popover.tsx +5 -75
  54. package/src/ui/primitives/popover/popoverCard.tsx +45 -39
  55. package/src/ui/primitives/textInput/textInput.tsx +1 -1
  56. package/src/ui/primitives/tooltip/tooltip.tsx +2 -3
  57. package/src/css/primitives/card/rules.ts +0 -473
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { isHTMLElement, isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, EMPTY_ARRAY, useElementSize, Code, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, createGlobalScopedContext, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, Container, useTheme_v2, usePrefersReducedMotion, Portal, Layer, containsOrEqualsElement, Grid, LayerProvider, isRecord, Selectable } from "./_chunks-es/_visual-editing.mjs";
2
- import { Arrow, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, CardProvider, Checkbox, ConditionalWrapper, ElementQuery, Heading, Hotkeys, Inline, KBD, Label, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Radio, Select, Spinner, SrOnly, Switch, Tab, TabList, TextArea, ThemeColorProvider, ThemeProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, VirtualList, _ResizeObserver, _elementSizeObserver, _getArrayProp, _isScrollable, createColorTheme, hexToRgb, hslToRgb, multiply, parseColor, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useCard, useCustomValidity, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTooltipDelayGroup } from "./_chunks-es/_visual-editing.mjs";
1
+ import { isHTMLElement, isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, EMPTY_ARRAY, useElementSize, Code, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, createGlobalScopedContext, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, Container, usePrefersReducedMotion, Z_OFFSETS, Portal, Layer, containsOrEqualsElement, Grid, LayerProvider, isRecord, Selectable } from "./_chunks-es/_visual-editing.mjs";
2
+ import { Arrow, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, CardProvider, Checkbox, ConditionalWrapper, ElementQuery, Heading, Hotkeys, Inline, KBD, Label, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Radio, Select, Spinner, SrOnly, Switch, Tab, TabList, TextArea, ThemeColorProvider, ThemeProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, VirtualList, _ResizeObserver, _elementSizeObserver, _getArrayProp, _isScrollable, createColorTheme, hexToRgb, hslToRgb, multiply, parseColor, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useCard, useCustomValidity, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTheme_v2, useTooltipDelayGroup } from "./_chunks-es/_visual-editing.mjs";
3
3
  import { composeClassNames, breadcrumbs, dialogContainer, dialogCardRoot, dialogLayout, dialogHeader, dialogContent, dialogFooter, dialog, skeleton, textSkeleton, labelSkeleton, headingSkeleton, codeSkeleton, toast, toastLoadingBar, toastLoadingBarMask, toastLoadingBarProgress, toastLayer, treeItem, compilePalette, compileTheme, compileSystem } from "@sanity/ui/css";
4
4
  import { px, rem } from "@sanity/ui/css";
5
5
  import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
@@ -208,7 +208,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
208
208
  customValidity,
209
209
  disabled,
210
210
  filterOption: filterOptionProp,
211
- fontSize = 1,
211
+ fontSize = 2,
212
212
  icon,
213
213
  id,
214
214
  listBox = EMPTY_RECORD,
@@ -247,16 +247,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
247
247
  value
248
248
  } = state, defaultRenderOption = useCallback(({
249
249
  value: value_0
250
- }) => /* @__PURE__ */ jsx(
251
- Card,
252
- {
253
- as: "button",
254
- padding: paddingProp,
255
- radius: 2,
256
- selectable: !0,
257
- children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 })
258
- }
259
- ), [fontSize, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
250
+ }) => /* @__PURE__ */ jsx(Card, { as: "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 }) }), [fontSize, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
260
251
  useImperativeHandle(forwardedRef, () => inputElementRef.current);
261
252
  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = useCallback((event) => {
262
253
  setTimeout(() => {
@@ -391,7 +382,6 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
391
382
  return /* @__PURE__ */ jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: cloneElement(renderOption(option_0), {
392
383
  disabled: loading,
393
384
  selected: active,
394
- selectable: !0,
395
385
  tabIndex: listFocused && active ? 0 : -1
396
386
  }) }, option_0.value);
397
387
  }) }) }), [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]), results = useMemo(() => renderPopover ? renderPopover({
@@ -400,7 +390,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
400
390
  inputElement: inputElementRef.current,
401
391
  onMouseEnter: handlePopoverMouseEnter,
402
392
  onMouseLeave: handlePopoverMouseLeave
403
- }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsx(Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius: 3, ref: resultsPopoverElementRef, referenceElement: inputElementRef.current, ...popover }), [content2, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
393
+ }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsx(Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius: 3, ref: resultsPopoverElementRef, referenceElement: inputElementRef.current, ...popover }), [content2, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, renderPopover]);
404
394
  return (
405
395
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
406
396
  /* @__PURE__ */ jsxs("div", { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
@@ -521,9 +511,7 @@ const DialogCard = forwardRef(function(props, forwardedRef) {
521
511
  });
522
512
  DialogCard.displayName = "ForwardRef(DialogCard)";
523
513
  const Dialog = forwardRef(function(props, ref) {
524
- const $ = c(66), context = useDialog(), {
525
- layer
526
- } = useTheme_v2();
514
+ const $ = c(66), context = useDialog();
527
515
  let _positionProp, _zOffsetProp, cardShadow, children, className, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5, tone;
528
516
  $[0] !== props ? ({
529
517
  __unstable_autoFocus: t0,
@@ -550,7 +538,7 @@ const Dialog = forwardRef(function(props, ref) {
550
538
  tone,
551
539
  ...restProps
552
540
  } = props, $[0] = props, $[1] = _positionProp, $[2] = _zOffsetProp, $[3] = cardShadow, $[4] = children, $[5] = className, $[6] = contentRef, $[7] = footer, $[8] = header, $[9] = id, $[10] = onActivate, $[11] = onClickOutside, $[12] = onClose, $[13] = onFocus, $[14] = portalProp, $[15] = restProps, $[16] = scheme, $[17] = t0, $[18] = t1, $[19] = t2, $[20] = t3, $[21] = t4, $[22] = t5, $[23] = tone) : (_positionProp = $[1], _zOffsetProp = $[2], cardShadow = $[3], children = $[4], className = $[5], contentRef = $[6], footer = $[7], header = $[8], id = $[9], onActivate = $[10], onClickOutside = $[11], onClose = $[12], onFocus = $[13], portalProp = $[14], restProps = $[15], scheme = $[16], t0 = $[17], t1 = $[18], t2 = $[19], t3 = $[20], t4 = $[21], t5 = $[22], tone = $[23]);
553
- const autoFocus = t0 === void 0 ? !0 : t0, hideCloseButton = t1 === void 0 ? !1 : t1, _animate = t2 === void 0 ? !1 : t2, cardRadiusProp = t3 === void 0 ? 4 : t3, padding = t4 === void 0 ? 3 : t4, widthProp = t5 === void 0 ? 0 : t5, positionProp = _positionProp ?? (context.position || "fixed"), zOffsetProp = _zOffsetProp ?? (context.zOffset || layer.dialog.zOffset), animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null);
541
+ const autoFocus = t0 === void 0 ? !0 : t0, hideCloseButton = t1 === void 0 ? !1 : t1, _animate = t2 === void 0 ? !1 : t2, cardRadiusProp = t3 === void 0 ? 4 : t3, padding = t4 === void 0 ? 3 : t4, widthProp = t5 === void 0 ? 0 : t5, positionProp = _positionProp ?? context.position ?? "fixed", zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null);
554
542
  let t6;
555
543
  $[24] !== onFocus ? (t6 = (event) => {
556
544
  onFocus?.(event);