@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.
- package/dist/_chunks-cjs/_visual-editing.js +60 -56
- package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
- package/dist/_chunks-es/_visual-editing.mjs +61 -57
- package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
- package/dist/_visual-editing.d.mts +10 -10
- package/dist/_visual-editing.d.ts +10 -10
- package/dist/cli.js +1 -1
- package/dist/css.d.mts +11 -1
- package/dist/css.d.ts +11 -1
- package/dist/css.js +324 -309
- package/dist/css.js.map +1 -1
- package/dist/css.mjs +324 -309
- package/dist/css.mjs.map +1 -1
- package/dist/index.d.mts +10 -10
- package/dist/index.d.ts +10 -10
- package/dist/index.js +5 -17
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +7 -19
- package/dist/index.mjs.map +1 -1
- package/dist/sanity-theme.css +1 -1
- package/dist/system.css +229 -10
- package/dist/theme.js +1 -1
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +1 -1
- package/dist/theme.mjs.map +1 -1
- package/package.json +2 -2
- package/src/css/aspects/index.ts +1 -0
- package/src/css/aspects/minWidth/index.ts +2 -0
- package/src/css/aspects/minWidth/minWidth.style.ts +13 -0
- package/src/css/aspects/minWidth/minWidth.ts +6 -0
- package/src/css/aspects/minWidth/types.ts +7 -0
- package/src/css/compile/compileRule.ts +1 -0
- package/src/css/compile/compileStyle.ts +1 -1
- package/src/css/primitives/_input/__workshop__/index.ts +1 -1
- package/src/css/primitives/box/box.style.ts +1 -1
- package/src/css/primitives/box/box.ts +2 -3
- package/src/css/primitives/box/types.ts +2 -0
- package/src/css/primitives/card/card.style.ts +69 -3
- package/src/css/primitives/card/types.ts +0 -1
- package/src/css/primitives/popover/popover.ts +4 -0
- package/src/css/primitives/switch/switch.style.ts +8 -83
- package/src/css/system.style.ts +2 -0
- package/src/theme/v3/defaults.ts +1 -1
- package/src/ui/components/autocomplete/__workshop__/index.ts +1 -1
- package/src/ui/components/autocomplete/autocomplete.tsx +2 -11
- package/src/ui/components/dialog/dialog.tsx +3 -4
- package/src/ui/constants.ts +6 -0
- package/src/ui/hooks/useMediaIndex/useMediaIndex.ts +0 -2
- package/src/ui/primitives/box/box.tsx +3 -2
- package/src/ui/primitives/card/card.tsx +2 -6
- package/src/ui/primitives/code/code.tsx +1 -1
- package/src/ui/primitives/kbd/kbd.tsx +2 -2
- package/src/ui/primitives/popover/popover.tsx +5 -75
- package/src/ui/primitives/popover/popoverCard.tsx +45 -39
- package/src/ui/primitives/textInput/textInput.tsx +1 -1
- package/src/ui/primitives/tooltip/tooltip.tsx +2 -3
- 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
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
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
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
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 =
|
|
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,
|
|
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 ??
|
|
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);
|