@sanity/ui 2.15.8 → 2.15.9

package/dist/_chunks-cjs/_visual-editing.js

@@ -1,5 +1,5 @@
 "use strict";
-var jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), react = require("react"), styledComponents = require("styled-components"), theme = require("@sanity/ui/theme"), ReactIs = require("react-is"), icons = require("@sanity/icons"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), resizeObserver = require("@juggle/resize-observer"), reactDom = require("react-dom"), useEffectEvent = require("use-effect-event");
+var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), react = require("react"), styledComponents = require("styled-components"), ReactIs = require("react-is"), icons = require("@sanity/icons"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), resizeObserver = require("@juggle/resize-observer"), reactDom = require("react-dom"), useEffectEvent = require("use-effect-event");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -41,6 +41,35 @@ const createColorTheme = theme.createColorTheme, hexToRgb = theme.hexToRgb, hslT
     bounce: 0.25
   }
 };
+function _isEnterToClickElement(element) {
+  return isHTMLAnchorElement(element) || isHTMLButtonElement(element);
+}
+function isHTMLElement(node) {
+  return node instanceof Node && node.nodeType === Node.ELEMENT_NODE;
+}
+function isHTMLAnchorElement(element) {
+  return isHTMLElement(element) && element.nodeName === "A";
+}
+function isHTMLInputElement(element) {
+  return isHTMLElement(element) && element.nodeName === "INPUT";
+}
+function isHTMLButtonElement(element) {
+  return isHTMLElement(element) && element.nodeName === "BUTTON";
+}
+function isHTMLSelectElement(element) {
+  return isHTMLElement(element) && element.nodeName === "SELECT";
+}
+function isHTMLTextAreaElement(element) {
+  return isHTMLElement(element) && element.nodeName === "TEXTAREA";
+}
+function containsOrEqualsElement(element, node) {
+  return element.contains(node) || element === node;
+}
+function _isScrollable(el) {
+  if (!(el instanceof Element)) return !1;
+  const style = window.getComputedStyle(el);
+  return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
+}
 function _fillCSSObject(keys, value) {
   return keys.reduce((style, key2) => (style[key2] = value, style), {});
 }
@@ -562,12 +591,27 @@ function responsiveBoxOverflowStyle(props) {
   }));
 }
 const BASE_STYLE$3 = {
+  minWidth: 0,
+  minHeight: 0
+};
+function flexItemStyle() {
+  return [BASE_STYLE$3, responsiveFlexItemStyle];
+}
+function responsiveFlexItemStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return props.$flex ? _responsive(media, props.$flex, (flex) => ({
+    flex
+  })) : EMPTY_ARRAY;
+}
+const BASE_STYLE$2 = {
   "&&:not([hidden])": {
     display: "flex"
   }
 };
 function responsiveFlexStyle() {
-  return [BASE_STYLE$3, responsiveFlexAlignStyle, responsiveFlexGapStyle, responsiveFlexWrapStyle, responsiveFlexJustifyStyle, responsiveFlexDirectionStyle];
+  return [BASE_STYLE$2, responsiveFlexAlignStyle, responsiveFlexGapStyle, responsiveFlexWrapStyle, responsiveFlexJustifyStyle, responsiveFlexDirectionStyle];
 }
 function responsiveFlexAlignStyle(props) {
   const {
@@ -610,21 +654,6 @@ function responsiveFlexDirectionStyle(props) {
     flexDirection: direction
   }));
 }
-const BASE_STYLE$2 = {
-  minWidth: 0,
-  minHeight: 0
-};
-function flexItemStyle() {
-  return [BASE_STYLE$2, responsiveFlexItemStyle];
-}
-function responsiveFlexItemStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return props.$flex ? _responsive(media, props.$flex, (flex) => ({
-    flex
-  })) : EMPTY_ARRAY;
-}
 function focusRingBorderStyle(border2) {
   return `inset 0 0 0 ${border2.width}px ${border2.color}`;
 }
@@ -636,6 +665,68 @@ function focusRingStyle(opts) {
   } = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
   return [focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`, border2 && focusRingBorderStyle(border2), focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`, focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`].filter(Boolean).join(",");
 }
+function responsiveGridItemStyle() {
+  return [responsiveGridItemRowStyle, responsiveGridItemRowStartStyle, responsiveGridItemRowEndStyle, responsiveGridItemColumnStyle, responsiveGridItemColumnStartStyle, responsiveGridItemColumnEndStyle];
+}
+const GRID_ITEM_ROW = {
+  auto: "auto",
+  full: "1 / -1"
+}, GRID_ITEM_COLUMN = {
+  auto: "auto",
+  full: "1 / -1"
+};
+function responsiveGridItemRowStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$row, (row) => typeof row == "number" ? {
+    gridRow: `span ${row} / span ${row}`
+  } : {
+    gridRow: GRID_ITEM_ROW[row]
+  });
+}
+function responsiveGridItemRowStartStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$rowStart, (rowStart) => ({
+    gridRowStart: rowStart
+  }));
+}
+function responsiveGridItemRowEndStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$rowEnd, (rowEnd) => ({
+    gridRowEnd: rowEnd
+  }));
+}
+function responsiveGridItemColumnStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$column, (column) => typeof column == "number" ? {
+    gridColumn: `span ${column} / span ${column}`
+  } : {
+    gridColumn: GRID_ITEM_COLUMN[column]
+  });
+}
+function responsiveGridItemColumnStartStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$columnStart, (columnStart) => ({
+    gridColumnStart: columnStart
+  }));
+}
+function responsiveGridItemColumnEndStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$columnEnd, (columnEnd) => ({
+    gridColumnEnd: columnEnd
+  }));
+}
 const GRID_CSS = {
   "&&:not([hidden])": {
     display: "grid"
@@ -724,68 +815,6 @@ function responsiveGridGapYStyle(props) {
     rowGap: gapY ? rem(space[gapY]) : void 0
   }));
 }
-function responsiveGridItemStyle() {
-  return [responsiveGridItemRowStyle, responsiveGridItemRowStartStyle, responsiveGridItemRowEndStyle, responsiveGridItemColumnStyle, responsiveGridItemColumnStartStyle, responsiveGridItemColumnEndStyle];
-}
-const GRID_ITEM_ROW = {
-  auto: "auto",
-  full: "1 / -1"
-}, GRID_ITEM_COLUMN = {
-  auto: "auto",
-  full: "1 / -1"
-};
-function responsiveGridItemRowStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$row, (row) => typeof row == "number" ? {
-    gridRow: `span ${row} / span ${row}`
-  } : {
-    gridRow: GRID_ITEM_ROW[row]
-  });
-}
-function responsiveGridItemRowStartStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$rowStart, (rowStart) => ({
-    gridRowStart: rowStart
-  }));
-}
-function responsiveGridItemRowEndStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$rowEnd, (rowEnd) => ({
-    gridRowEnd: rowEnd
-  }));
-}
-function responsiveGridItemColumnStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$column, (column) => typeof column == "number" ? {
-    gridColumn: `span ${column} / span ${column}`
-  } : {
-    gridColumn: GRID_ITEM_COLUMN[column]
-  });
-}
-function responsiveGridItemColumnStartStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$columnStart, (columnStart) => ({
-    gridColumnStart: columnStart
-  }));
-}
-function responsiveGridItemColumnEndStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$columnEnd, (columnEnd) => ({
-    gridColumnEnd: columnEnd
-  }));
-}
 function responsiveInputPaddingStyle(props) {
   const {
     $fontSize,
@@ -2996,47 +3025,6 @@ function getLayerContext(contextValue) {
   throw new Error("could not get layer context");
 }
 const LayerContext = createGlobalScopedContext("@sanity/ui/context/layer", null);
-function useLayer() {
-  const $ = reactCompilerRuntime.c(2), value = react.useContext(LayerContext);
-  if (!value)
-    throw new Error("useLayer(): missing context value");
-  try {
-    let t1;
-    return $[0] !== value ? (t1 = getLayerContext(value), $[0] = value, $[1] = t1) : t1 = $[1], t1;
-  } catch (t0) {
-    const err = t0;
-    throw err instanceof Error ? new Error(`useLayer(): ${err.message}`) : new Error(`useLayer(): ${err}`);
-  }
-}
-function _isEnterToClickElement(element) {
-  return isHTMLAnchorElement(element) || isHTMLButtonElement(element);
-}
-function isHTMLElement(node) {
-  return node instanceof Node && node.nodeType === Node.ELEMENT_NODE;
-}
-function isHTMLAnchorElement(element) {
-  return isHTMLElement(element) && element.nodeName === "A";
-}
-function isHTMLInputElement(element) {
-  return isHTMLElement(element) && element.nodeName === "INPUT";
-}
-function isHTMLButtonElement(element) {
-  return isHTMLElement(element) && element.nodeName === "BUTTON";
-}
-function isHTMLSelectElement(element) {
-  return isHTMLElement(element) && element.nodeName === "SELECT";
-}
-function isHTMLTextAreaElement(element) {
-  return isHTMLElement(element) && element.nodeName === "TEXTAREA";
-}
-function containsOrEqualsElement(element, node) {
-  return element.contains(node) || element === node;
-}
-function _isScrollable(el) {
-  if (!(el instanceof Element)) return !1;
-  const style = window.getComputedStyle(el);
-  return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
-}
 function LayerProvider(props) {
   const $ = reactCompilerRuntime.c(19), {
     children,
@@ -3089,6 +3077,18 @@ function _temp$3(v) {
   return v + 1;
 }
 LayerProvider.displayName = "LayerProvider";
+function useLayer() {
+  const $ = reactCompilerRuntime.c(2), value = react.useContext(LayerContext);
+  if (!value)
+    throw new Error("useLayer(): missing context value");
+  try {
+    let t1;
+    return $[0] !== value ? (t1 = getLayerContext(value), $[0] = value, $[1] = t1) : t1 = $[1], t1;
+  } catch (t0) {
+    const err = t0;
+    throw err instanceof Error ? new Error(`useLayer(): ${err.message}`) : new Error(`useLayer(): ${err}`);
+  }
+}
 const StyledLayer = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledLayer",
   componentId: "sc-16kojrv-0"
@@ -4487,9 +4487,6 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
 }));
 TooltipCard.displayName = "Memo(ForwardRef(TooltipCard))";
 const TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
-function useTooltipDelayGroup() {
-  return react.useContext(TooltipDelayGroupContext);
-}
 function TooltipDelayGroupProvider(props) {
   const $ = reactCompilerRuntime.c(10), {
     children,
@@ -4511,6 +4508,9 @@ function TooltipDelayGroupProvider(props) {
   return $[7] !== children || $[8] !== value ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children }), $[7] = children, $[8] = value, $[9] = t3) : t3 = $[9], t3;
 }
 TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
+function useTooltipDelayGroup() {
+  return react.useContext(TooltipDelayGroupContext);
+}
 const StyledTooltip = styledComponents.styled(Layer).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-13f2zvh-0"
@@ -5141,7 +5141,7 @@ function MenuGroup(props) {
 }
 MenuGroup.displayName = "MenuGroup";
 const MenuItem = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(74);
+  const $ = reactCompilerRuntime.c(73);
   let IconComponent, IconRightComponent, children, disabled, hotkeys, onClick, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pressed, restProps, selectedProp, t0, t1, t2, t3, t4, t5, text;
   $[0] !== props ? ({
     as: t0,
@@ -5203,9 +5203,9 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
   $[43] === Symbol.for("react.memo_cache_sentinel") ? (t14 = (el) => {
     ref.current = el, setRootElement(el);
   }, $[43] = t14) : t14 = $[43];
-  const setRef = t14, t15 = as === "button" && pressed, t16 = as !== "button" && pressed ? "" : void 0, t17 = active ? "" : void 0, t18 = disabled ? "" : void 0, t19 = useArrayProp(radius), t20 = useArrayProp(0), t21 = disabled ? "default" : tone, t22 = as === "button" ? "button" : void 0;
-  let t23;
-  $[44] !== IconComponent || $[45] !== IconRightComponent || $[46] !== fontSize2 || $[47] !== hotkeys || $[48] !== hotkeysFontSize || $[49] !== paddingProps || $[50] !== space || $[51] !== text ? (t23 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
+  const setRef = t14, t15 = as !== "button" && pressed ? "" : void 0, t16 = active ? "" : void 0, t17 = disabled ? "" : void 0, t18 = useArrayProp(radius), t19 = useArrayProp(0), t20 = disabled ? "default" : tone, t21 = as === "button" ? "button" : void 0;
+  let t22;
+  $[44] !== IconComponent || $[45] !== IconRightComponent || $[46] !== fontSize2 || $[47] !== hotkeys || $[48] !== hotkeysFontSize || $[49] !== paddingProps || $[50] !== space || $[51] !== text ? (t22 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
     IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
       react.isValidElement(IconComponent) && IconComponent,
       ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
@@ -5219,14 +5219,14 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       react.isValidElement(IconRightComponent) && IconRightComponent,
       ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
     ] })
-  ] }), $[44] = IconComponent, $[45] = IconRightComponent, $[46] = fontSize2, $[47] = hotkeys, $[48] = hotkeysFontSize, $[49] = paddingProps, $[50] = space, $[51] = text, $[52] = t23) : t23 = $[52];
+  ] }), $[44] = IconComponent, $[45] = IconRightComponent, $[46] = fontSize2, $[47] = hotkeys, $[48] = hotkeysFontSize, $[49] = paddingProps, $[50] = space, $[51] = text, $[52] = t22) : t22 = $[52];
+  let t23;
+  $[53] !== children || $[54] !== paddingProps ? (t23 = children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...paddingProps, children }), $[53] = children, $[54] = paddingProps, $[55] = t23) : t23 = $[55];
   let t24;
-  $[53] !== children || $[54] !== paddingProps ? (t24 = children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...paddingProps, children }), $[53] = children, $[54] = paddingProps, $[55] = t24) : t24 = $[55];
-  let t25;
-  return $[56] !== as || $[57] !== disabled || $[58] !== handleClick || $[59] !== onItemMouseEnter || $[60] !== onItemMouseLeave || $[61] !== restProps || $[62] !== scheme || $[63] !== t15 || $[64] !== t16 || $[65] !== t17 || $[66] !== t18 || $[67] !== t19 || $[68] !== t20 || $[69] !== t21 || $[70] !== t22 || $[71] !== t23 || $[72] !== t24 ? (t25 = /* @__PURE__ */ jsxRuntime.jsxs(Selectable, { "data-ui": "MenuItem", role: "menuitem", ...restProps, "aria-pressed": t15, "data-pressed": t16, "data-selected": t17, "data-disabled": t18, forwardedAs: as, $radius: t19, $padding: t20, $tone: t21, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, tabIndex: -1, type: t22, children: [
-    t23,
-    t24
-  ] }), $[56] = as, $[57] = disabled, $[58] = handleClick, $[59] = onItemMouseEnter, $[60] = onItemMouseLeave, $[61] = restProps, $[62] = scheme, $[63] = t15, $[64] = t16, $[65] = t17, $[66] = t18, $[67] = t19, $[68] = t20, $[69] = t21, $[70] = t22, $[71] = t23, $[72] = t24, $[73] = t25) : t25 = $[73], t25;
+  return $[56] !== as || $[57] !== disabled || $[58] !== handleClick || $[59] !== onItemMouseEnter || $[60] !== onItemMouseLeave || $[61] !== restProps || $[62] !== scheme || $[63] !== t15 || $[64] !== t16 || $[65] !== t17 || $[66] !== t18 || $[67] !== t19 || $[68] !== t20 || $[69] !== t21 || $[70] !== t22 || $[71] !== t23 ? (t24 = /* @__PURE__ */ jsxRuntime.jsxs(Selectable, { "data-ui": "MenuItem", role: "menuitem", ...restProps, "data-pressed": t15, "data-selected": t16, "data-disabled": t17, forwardedAs: as, $radius: t18, $padding: t19, $tone: t20, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, tabIndex: -1, type: t21, children: [
+    t22,
+    t23
+  ] }), $[56] = as, $[57] = disabled, $[58] = handleClick, $[59] = onItemMouseEnter, $[60] = onItemMouseLeave, $[61] = restProps, $[62] = scheme, $[63] = t15, $[64] = t16, $[65] = t17, $[66] = t18, $[67] = t19, $[68] = t20, $[69] = t21, $[70] = t22, $[71] = t23, $[72] = t24) : t24 = $[72], t24;
 });
 MenuItem.displayName = "ForwardRef(MenuItem)";
 function _temp(s) {