@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.d.mts CHANGED
@@ -1558,16 +1558,16 @@ export declare interface PopoverProps extends CardProps, LayerProps {
1558
1558
  ref: ForwardedRef<HTMLElement>
1559
1559
  }>
1560
1560
  /**
1561
- * When `true`, prevent overflow within the current boundary:
1562
- * - by flipping on its side axis
1563
- * - by resizing
1564
- /*
1565
- * Note that:
1566
- * - setting `preventOverflow` to `true` also prevents overflow on its side axis
1567
- * - setting `matchReferenceWidth` to `true` also causes the popover to resize
1568
- *
1569
- * @defaultValue false
1570
- */
1561
+ * When `true`, prevent overflow within the current boundary:
1562
+ * - by flipping on its side axis
1563
+ * - by resizing
1564
+ *
1565
+ * Note that:
1566
+ * - setting `preventOverflow` to `true` also prevents overflow on its side axis
1567
+ * - setting `matchReferenceWidth` to `true` also causes the popover to resize
1568
+ *
1569
+ * @defaultValue false
1570
+ */
1571
1571
  constrainSize?: boolean
1572
1572
  content?: ReactNode
1573
1573
  disabled?: boolean
package/dist/index.d.ts CHANGED
@@ -1558,16 +1558,16 @@ export declare interface PopoverProps extends CardProps, LayerProps {
1558
1558
  ref: ForwardedRef<HTMLElement>
1559
1559
  }>
1560
1560
  /**
1561
- * When `true`, prevent overflow within the current boundary:
1562
- * - by flipping on its side axis
1563
- * - by resizing
1564
- /*
1565
- * Note that:
1566
- * - setting `preventOverflow` to `true` also prevents overflow on its side axis
1567
- * - setting `matchReferenceWidth` to `true` also causes the popover to resize
1568
- *
1569
- * @defaultValue false
1570
- */
1561
+ * When `true`, prevent overflow within the current boundary:
1562
+ * - by flipping on its side axis
1563
+ * - by resizing
1564
+ *
1565
+ * Note that:
1566
+ * - setting `preventOverflow` to `true` also prevents overflow on its side axis
1567
+ * - setting `matchReferenceWidth` to `true` also causes the popover to resize
1568
+ *
1569
+ * @defaultValue false
1570
+ */
1571
1571
  constrainSize?: boolean
1572
1572
  content?: ReactNode
1573
1573
  disabled?: boolean
package/dist/index.js CHANGED
@@ -201,7 +201,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
201
201
  customValidity,
202
202
  disabled,
203
203
  filterOption: filterOptionProp,
204
- fontSize = 1,
204
+ fontSize = 2,
205
205
  icon,
206
206
  id,
207
207
  listBox = _visualEditing.EMPTY_RECORD,
@@ -240,16 +240,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
240
240
  value
241
241
  } = state, defaultRenderOption = react.useCallback(({
242
242
  value: value_0
243
- }) => /* @__PURE__ */ jsxRuntime.jsx(
244
- _visualEditing.Card,
245
- {
246
- as: "button",
247
- padding: paddingProp,
248
- radius: 2,
249
- selectable: !0,
250
- children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 })
251
- }
252
- ), [fontSize, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = react.useRef(null), resultsPopoverElementRef = react.useRef(null), inputElementRef = react.useRef(null), listBoxElementRef = react.useRef(null), listFocusedRef = react.useRef(!1), valueRef = react.useRef(value), valuePropRef = react.useRef(valueProp), popoverMouseWithinRef = react.useRef(!1);
243
+ }) => /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Card, { as: "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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 = react.useRef(null), resultsPopoverElementRef = react.useRef(null), inputElementRef = react.useRef(null), listBoxElementRef = react.useRef(null), listFocusedRef = react.useRef(!1), valueRef = react.useRef(value), valuePropRef = react.useRef(valueProp), popoverMouseWithinRef = react.useRef(!1);
253
244
  react.useImperativeHandle(forwardedRef, () => inputElementRef.current);
254
245
  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : _visualEditing.EMPTY_ARRAY, padding = _visualEditing.useArrayProp(paddingProp), currentOption = react.useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = react.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 = react.useCallback((event) => {
255
246
  setTimeout(() => {
@@ -384,7 +375,6 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
384
375
  return /* @__PURE__ */ jsxRuntime.jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: react.cloneElement(renderOption(option_0), {
385
376
  disabled: loading,
386
377
  selected: active,
387
- selectable: !0,
388
378
  tabIndex: listFocused && active ? 0 : -1
389
379
  }) }, option_0.value);
390
380
  }) }) }), [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]), results = react.useMemo(() => renderPopover ? renderPopover({
@@ -393,7 +383,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
393
383
  inputElement: inputElementRef.current,
394
384
  onMouseEnter: handlePopoverMouseEnter,
395
385
  onMouseLeave: handlePopoverMouseLeave
396
- }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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]);
386
+ }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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]);
397
387
  return (
398
388
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
399
389
  /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
@@ -514,9 +504,7 @@ const DialogCard = react.forwardRef(function(props, forwardedRef) {
514
504
  });
515
505
  DialogCard.displayName = "ForwardRef(DialogCard)";
516
506
  const Dialog = react.forwardRef(function(props, ref) {
517
- const $ = reactCompilerRuntime.c(66), context = useDialog(), {
518
- layer
519
- } = _visualEditing.useTheme_v2();
507
+ const $ = reactCompilerRuntime.c(66), context = useDialog();
520
508
  let _positionProp, _zOffsetProp, cardShadow, children, className, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5, tone;
521
509
  $[0] !== props ? ({
522
510
  __unstable_autoFocus: t0,
@@ -543,7 +531,7 @@ const Dialog = react.forwardRef(function(props, ref) {
543
531
  tone,
544
532
  ...restProps
545
533
  } = 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]);
546
- 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 = _visualEditing.usePrefersReducedMotion() ? !1 : _animate, portal = _visualEditing.usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = _visualEditing.useBoundaryElement().element, cardRadius = _visualEditing.useArrayProp(cardRadiusProp), position = _visualEditing.useArrayProp(positionProp), width = _visualEditing.useArrayProp(widthProp), zOffset = _visualEditing.useArrayProp(zOffsetProp), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null);
534
+ 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 ?? _visualEditing.Z_OFFSETS.dialog, animate = _visualEditing.usePrefersReducedMotion() ? !1 : _animate, portal = _visualEditing.usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = _visualEditing.useBoundaryElement().element, cardRadius = _visualEditing.useArrayProp(cardRadiusProp), position = _visualEditing.useArrayProp(positionProp), width = _visualEditing.useArrayProp(widthProp), zOffset = _visualEditing.useArrayProp(zOffsetProp), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null);
547
535
  let t6;
548
536
  $[24] !== onFocus ? (t6 = (event) => {
549
537
  onFocus?.(event);