@sanity/ui 2.16.21 → 2.16.23

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var _visualEditing = require("./_chunks-cjs/_visual-editing.js"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), react = require("react"), styledComponents = require("styled-components"), reactCompilerRuntime = require("react-compiler-runtime"), theme = require("@sanity/ui/theme"), framerMotion = require("framer-motion");
+var _visualEditing = require("./_chunks-cjs/_visual-editing.js"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), react = require("react"), styledComponents = require("styled-components"), reactCompilerRuntime = require("react-compiler-runtime"), theme = require("@sanity/ui/theme"), react$1 = require("motion/react");
 function _raf(fn) {
   const frameId = requestAnimationFrame(fn);
   return () => {
@@ -381,26 +381,71 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
       };
   }, [disabled, handleClearButtonFocus, loading, value]), openButtonBoxPadding = react.useMemo(() => padding.map((v_0) => v_0 === 0 ? 0 : v_0 === 1 || v_0 === 2 ? 1 : v_0 - 2), [padding]), openButtonPadding = react.useMemo(() => padding.map((v_1) => Math.max(v_1 - 1, 0)), [padding]), openButtonProps = react.useMemo(() => typeof openButton == "object" ? openButton : _visualEditing.EMPTY_RECORD, [openButton]), handleOpenClick = react.useCallback((event_4) => {
     dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
-  }, [openButtonProps, dispatchOpen]), openButtonNode = react.useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Button, { "aria-label": "Open", disabled: expanded, fontSize, icon: icons.ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]), inputValue = react.useMemo(() => query === null ? value !== null ? renderValue(value, currentOption) : "" : query, [currentOption, query, renderValue, value]), input = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.TextInput, { ...restProps, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", border, clearButton, customValidity, disabled, fontSize, icon, iconRight: loading && AnimatedSpinnerIcon, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: inputElementRef, role: "combobox", spellCheck: !1, suffix: suffix || openButtonNode, value: inputValue }), handleListBoxKeyDown = react.useCallback((event_5) => {
+  }, [openButtonProps, dispatchOpen]), openButtonNode = react.useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Button, { "aria-label": "Open", disabled: expanded, fontSize, icon: icons.ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]), inputValue = react.useMemo(() => query === null ? value !== null ? renderValue(value, currentOption) : "" : query, [currentOption, query, renderValue, value]), input = /* @__PURE__ */ jsxRuntime.jsx(
+    _visualEditing.TextInput,
+    {
+      ...restProps,
+      "aria-activedescendant": activeItemId,
+      "aria-autocomplete": "list",
+      "aria-expanded": expanded,
+      "aria-owns": listBoxId,
+      autoCapitalize: "off",
+      autoComplete: "off",
+      autoCorrect: "off",
+      border,
+      clearButton,
+      customValidity,
+      disabled,
+      fontSize,
+      icon,
+      iconRight: loading && AnimatedSpinnerIcon,
+      id,
+      inputMode: "search",
+      onChange: handleInputChange,
+      onClear: handleClearButtonClick,
+      onFocus: handleInputFocus,
+      padding,
+      prefix,
+      radius,
+      readOnly,
+      ref: inputElementRef,
+      role: "combobox",
+      spellCheck: !1,
+      suffix: suffix || openButtonNode,
+      value: inputValue
+    }
+  ), handleListBoxKeyDown = react.useCallback((event_5) => {
     event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
-  }, [listFocused]), content2 = react.useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ListBox, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", id: listBoxId, ref: listBoxElementRef, role: "listbox", space: 1, children: filteredOptions.map((option_0) => {
-    const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
-    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), {
-      disabled: loading,
-      selected: active,
-      tabIndex: listFocused && active ? 0 : -1
-    }) }, option_0.value);
-  }) }) }), [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]), results = react.useMemo(() => renderPopover ? renderPopover(
-    // eslint-disable-next-line react-hooks/refs
+  }, [listFocused]), content2 = react.useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ListBox, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(
+    _visualEditing.Stack,
+    {
+      as: "ul",
+      "aria-multiselectable": !1,
+      "data-ui": "AutoComplete__resultsList",
+      id: listBoxId,
+      ref: listBoxElementRef,
+      role: "listbox",
+      space: 1,
+      children: filteredOptions.map((option_0) => {
+        const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
+        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), {
+          disabled: loading,
+          selected: active,
+          tabIndex: listFocused && active ? 0 : -1
+        }) }, option_0.value);
+      })
+    }
+  ) }), [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]), results = react.useMemo(() => renderPopover ? renderPopover(
+    // oxlint-disable-next-line react-compiler
     {
       content: content2,
       hidden: !expanded,
-      // eslint-disable-next-line react-hooks/refs
+      // oxlint-disable-next-line react-compiler
       inputElement: inputElementRef.current,
       onMouseEnter: handlePopoverMouseEnter,
       onMouseLeave: handlePopoverMouseLeave
     },
-    // eslint-disable-next-line react-hooks/refs
+    // oxlint-disable-next-line react-compiler
     resultsPopoverElementRef
   ) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
     _visualEditing.Popover,
@@ -525,32 +570,7 @@ function responsiveDialogPositionStyle(props) {
   }));
 }
 function animationDialogStyle(props) {
-  return props.$animate ? styledComponents.css`
-    @keyframes zoomIn {
-      from {
-        opacity: 0;
-        transform: scale(0.95);
-      }
-      to {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-
-    animation: fadeIn 200ms ease-out;
-    // Animates the dialog card.
-    & > [data-ui='DialogCard'] {
-      animation: zoomIn 200ms ease-out;
-    }
-  ` : styledComponents.css``;
+  return props.$animate ? styledComponents.css`@keyframes zoomIn{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}animation:fadeIn 200ms ease-out;& > [data-ui='DialogCard']{animation:zoomIn 200ms ease-out;}` : styledComponents.css``;
 }
 const DialogContext = _visualEditing.createGlobalScopedContext("@sanity/ui/context/dialog", {
   version: 0
@@ -875,47 +895,11 @@ MenuButton.displayName = "ForwardRef(MenuButton)";
 function _temp$2(v) {
   return !v;
 }
-const keyframe = styledComponents.keyframes`
-  0% {
-    background-position: 100%;
-  }
-  100% {
-    background-position: -100%;
-  }
-`, animation = styledComponents.css`
-  background-image: linear-gradient(
-    to right,
-    var(--card-skeleton-color-from),
-    var(--card-skeleton-color-to),
-    var(--card-skeleton-color-from),
-    var(--card-skeleton-color-from),
-    var(--card-skeleton-color-from)
-  );
-  background-position: 100%;
-  background-size: 200% 100%;
-  background-attachment: fixed;
-  animation-name: ${keyframe};
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-  animation-duration: 2000ms;
-`, skeletonStyle = styledComponents.css`
-  opacity: ${({
+const keyframe = styledComponents.keyframes`0%{background-position:100%;}100%{background-position:-100%;}`, animation = styledComponents.css`background-image:linear-gradient( to right,var(--card-skeleton-color-from),var(--card-skeleton-color-to),var(--card-skeleton-color-from),var(--card-skeleton-color-from),var(--card-skeleton-color-from) );background-position:100%;background-size:200% 100%;background-attachment:fixed;animation-name:${keyframe};animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:2000ms;`, skeletonStyle = styledComponents.css`opacity:${({
   $visible
-}) => $visible ? 1 : 0};
-  transition: opacity 200ms ease-in;
-
-  @media screen and (prefers-reduced-motion: no-preference) {
-    ${({
+}) => $visible ? 1 : 0};transition:opacity 200ms ease-in;@media screen and (prefers-reduced-motion:no-preference){${({
   $animated
-}) => $animated ? animation : styledComponents.css`
-            background-color: var(--card-skeleton-color-from);
-          `}
-  }
-
-  @media screen and (prefers-reduced-motion: reduce) {
-    background-color: var(--card-skeleton-color-from);
-  }
-`, StyledSkeleton$1 = /* @__PURE__ */ styledComponents.styled(_visualEditing.Box).withConfig({
+}) => $animated ? animation : styledComponents.css`background-color:var(--card-skeleton-color-from);`}}@media screen and (prefers-reduced-motion:reduce){background-color:var(--card-skeleton-color-from);}`, StyledSkeleton$1 = /* @__PURE__ */ styledComponents.styled(_visualEditing.Box).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-ebtpni-0"
 })(_visualEditing.responsiveRadiusStyle, skeletonStyle), Skeleton = react.forwardRef(function(props, ref) {
@@ -1165,7 +1149,7 @@ const container = {
   visible: {
     opacity: 1
   }
-}, MotionToast = framerMotion.motion.create(StyledToast), MotionFlex = framerMotion.motion.create(_visualEditing.Flex), MotionText = framerMotion.motion.create(_visualEditing.Text), MotionLoadingBar = framerMotion.motion.create(LoadingBar), MotionLoadingBarProgress = framerMotion.motion.create(LoadingBarProgress);
+}, MotionToast = react$1.motion.create(StyledToast), MotionFlex = react$1.motion.create(_visualEditing.Flex), MotionText = react$1.motion.create(_visualEditing.Text), MotionLoadingBar = react$1.motion.create(LoadingBar), MotionLoadingBarProgress = react$1.motion.create(LoadingBarProgress);
 function useMounted() {
   return react.useSyncExternalStore(subscribe, _temp$1, _temp2);
 }
@@ -1240,7 +1224,7 @@ function ToastProvider(props) {
   }, $[1] = t2) : t2 = $[1];
   const value = t2;
   let t3;
-  $[2] !== gap || $[3] !== mounted || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== state || $[8] !== zOffset ? (t3 = mounted && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(ToastLayer, { padding, paddingX, paddingY, gap, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: !1, mode: "popLayout", children: state.map(_temp) }) }) }), $[2] = gap, $[3] = mounted, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = state, $[8] = zOffset, $[9] = t3) : t3 = $[9];
+  $[2] !== gap || $[3] !== mounted || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== state || $[8] !== zOffset ? (t3 = mounted && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(ToastLayer, { padding, paddingX, paddingY, gap, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { initial: !1, mode: "popLayout", children: state.map(_temp) }) }) }), $[2] = gap, $[3] = mounted, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = state, $[8] = zOffset, $[9] = t3) : t3 = $[9];
   let t4;
   return $[10] !== children || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
     children,
@@ -1474,82 +1458,13 @@ const TreeContext = _visualEditing.createGlobalScopedContext("@sanity/ui/context
 }));
 Tree.displayName = "Memo(ForwardRef(Tree))";
 function treeItemRootStyle() {
-  return styledComponents.css`
-    &[role='none'] > [role='treeitem'] {
-      outline: none;
-      cursor: default;
-      border-radius: 3px;
-
-      background-color: var(--card-bg-color);
-      color: var(--treeitem-fg-color);
-
-      &:focus {
-        position: relative;
-      }
-    }
-
-    &[role='treeitem'] {
-      outline: none;
-
-      & > div {
-        cursor: default;
-        border-radius: 3px;
-
-        background-color: var(--card-bg-color);
-        color: var(--treeitem-fg-color);
-      }
-
-      &:focus > div {
-        position: relative;
-      }
-    }
-  `;
+  return styledComponents.css`&[role='none'] > [role='treeitem']{outline:none;cursor:default;border-radius:3px;background-color:var(--card-bg-color);color:var(--treeitem-fg-color);&:focus{position:relative;}}&[role='treeitem']{outline:none;& > div{cursor:default;border-radius:3px;background-color:var(--card-bg-color);color:var(--treeitem-fg-color);}&:focus > div{position:relative;}}`;
 }
 function treeItemRootColorStyle(props) {
   const $tone = "default", {
     color
   } = theme.getTheme_v2(props.theme), tone = color.selectable[$tone];
-  return styledComponents.css`
-    &[role='none'] {
-      & > [role='treeitem'] {
-        ${_visualEditing._cardColorStyle(color, tone.enabled)}
-      }
-
-      &[data-selected] > [role='treeitem'] {
-        ${_visualEditing._cardColorStyle(color, tone.pressed)}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
-          ${_visualEditing._cardColorStyle(color, tone.hovered)}
-        }
-
-        & > [role='treeitem']:focus {
-          ${_visualEditing._cardColorStyle(color, tone.selected)}
-        }
-      }
-    }
-
-    &[role='treeitem'] {
-      & > [data-ui='TreeItem__box'] {
-        ${_visualEditing._cardColorStyle(color, tone.enabled)}
-      }
-
-      &[data-selected] > [data-ui='TreeItem__box'] {
-        ${_visualEditing._cardColorStyle(color, tone.pressed)}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
-          ${_visualEditing._cardColorStyle(color, tone.hovered)}
-        }
-
-        &:focus > [data-ui='TreeItem__box'] {
-          ${_visualEditing._cardColorStyle(color, tone.selected)}
-        }
-      }
-    }
-  `;
+  return styledComponents.css`&[role='none']{& > [role='treeitem']{${_visualEditing._cardColorStyle(color, tone.enabled)}}&[data-selected] > [role='treeitem']{${_visualEditing._cardColorStyle(color, tone.pressed)}}@media (hover:hover){&:not([data-selected]) > [role='treeitem']:not(:focus):hover{${_visualEditing._cardColorStyle(color, tone.hovered)}}& > [role='treeitem']:focus{${_visualEditing._cardColorStyle(color, tone.selected)}}}}&[role='treeitem']{& > [data-ui='TreeItem__box']{${_visualEditing._cardColorStyle(color, tone.enabled)}}&[data-selected] > [data-ui='TreeItem__box']{${_visualEditing._cardColorStyle(color, tone.pressed)}}@media (hover:hover){&:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover{${_visualEditing._cardColorStyle(color, tone.hovered)}}&:focus > [data-ui='TreeItem__box']{${_visualEditing._cardColorStyle(color, tone.selected)}}}}`;
 }
 function treeItemBoxStyle(props) {
   const {
@@ -1557,13 +1472,7 @@ function treeItemBoxStyle(props) {
   } = props, {
     space
   } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    padding-left: ${_visualEditing.rem(space[2] * $level)};
-
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `;
+  return styledComponents.css`padding-left:${_visualEditing.rem(space[2] * $level)};&[data-as='a']{text-decoration:none;}`;
 }
 function useTree() {
   const tree = react.useContext(TreeContext);