@sanity/ui 3.0.0-static.12 → 3.0.0-static.14

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

@@ -1679,9 +1679,9 @@ function size(options) {
     }
   };
 }
-const DEFAULT_POPOVER_CARD_ELEMENT = "div", MotionCard$1 = framerMotion.motion.create(Card);
-function PopoverCard(props) {
-  const $ = reactCompilerRuntime.c(68), t0 = props;
+const DEFAULT_POPOVER_LAYER_ELEMENT = "div", MotionLayer$1 = framerMotion.motion.create(Layer);
+function PopoverLayer(props) {
+  const $ = reactCompilerRuntime.c(67), t0 = props;
   let animate, arrow, arrowRef, arrowX, arrowY, children, marginsProp, maxWidth, originX, originY, overflow, padding, placement, radius, referenceWidth, rest, shadow, strategy, style, t1, t2, xProp, yProp;
   $[0] !== t0 ? ({
     __unstable_margins: marginsProp,
@@ -1708,56 +1708,54 @@ function PopoverCard(props) {
     y: yProp,
     ...rest
   } = t0, $[0] = t0, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = marginsProp, $[8] = maxWidth, $[9] = originX, $[10] = originY, $[11] = overflow, $[12] = padding, $[13] = placement, $[14] = radius, $[15] = referenceWidth, $[16] = rest, $[17] = shadow, $[18] = strategy, $[19] = style, $[20] = t1, $[21] = t2, $[22] = xProp, $[23] = yProp) : (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], marginsProp = $[7], maxWidth = $[8], originX = $[9], originY = $[10], overflow = $[11], padding = $[12], placement = $[13], radius = $[14], referenceWidth = $[15], rest = $[16], shadow = $[17], strategy = $[18], style = $[19], t1 = $[20], t2 = $[21], xProp = $[22], yProp = $[23]);
-  const as = t1 === void 0 ? DEFAULT_POPOVER_CARD_ELEMENT : t1, tone = t2 === void 0 ? "inherit" : t2, layer = useLayer();
+  const as = t1 === void 0 ? DEFAULT_POPOVER_LAYER_ELEMENT : t1, tone = t2 === void 0 ? "inherit" : t2;
   let t3;
   t3 = marginsProp || DEFAULT_POPOVER_MARGINS;
   const margins = t3, x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0];
   let t4;
-  const t5 = layer.zIndex ?? 100, t6 = animate ? "transform" : void 0;
-  let t7;
-  $[24] !== originX || $[25] !== originY || $[26] !== referenceWidth || $[27] !== strategy || $[28] !== style || $[29] !== t5 || $[30] !== t6 || $[31] !== x || $[32] !== y ? (t7 = {
+  const t5 = animate ? "transform" : void 0;
+  let t6;
+  $[24] !== originX || $[25] !== originY || $[26] !== referenceWidth || $[27] !== style || $[28] !== t5 || $[29] !== x || $[30] !== y ? (t6 = {
     left: x,
     originX,
     originY,
-    position: strategy,
     top: y,
     width: referenceWidth,
-    zIndex: t5,
-    willChange: t6,
+    willChange: t5,
     ...style
-  }, $[24] = originX, $[25] = originY, $[26] = referenceWidth, $[27] = strategy, $[28] = style, $[29] = t5, $[30] = t6, $[31] = x, $[32] = y, $[33] = t7) : t7 = $[33], t4 = t7;
+  }, $[24] = originX, $[25] = originY, $[26] = referenceWidth, $[27] = style, $[28] = t5, $[29] = x, $[30] = y, $[31] = t6) : t6 = $[31], t4 = t6;
   const rootStyle = t4;
-  let t8;
-  const t9 = arrowX !== null ? arrowX : void 0, t10 = arrowY !== null ? arrowY : void 0;
-  let t11;
-  $[34] !== t10 || $[35] !== t9 ? (t11 = {
-    left: t9,
-    top: t10,
+  let t7;
+  const t8 = arrowX !== null ? arrowX : void 0, t9 = arrowY !== null ? arrowY : void 0;
+  let t10;
+  $[32] !== t8 || $[33] !== t9 ? (t10 = {
+    left: t8,
+    top: t9,
     right: void 0,
     bottom: void 0
-  }, $[34] = t10, $[35] = t9, $[36] = t11) : t11 = $[36], t8 = t11;
-  const arrowStyle = t8;
+  }, $[32] = t8, $[33] = t9, $[34] = t10) : t10 = $[34], t7 = t10;
+  const arrowStyle = t7;
+  let t11;
+  $[35] === Symbol.for("react.memo_cache_sentinel") ? (t11 = css.popoverCard(), $[35] = t11) : t11 = $[35];
   let t12;
-  $[37] === Symbol.for("react.memo_cache_sentinel") ? (t12 = css.popoverCard(), $[37] = t12) : t12 = $[37];
+  $[36] !== animate ? (t12 = animate ? ["hidden", "initial"] : void 0, $[36] = animate, $[37] = t12) : t12 = $[37];
   let t13;
-  $[38] !== animate ? (t13 = animate ? ["hidden", "initial"] : void 0, $[38] = animate, $[39] = t13) : t13 = $[39];
+  $[38] !== animate ? (t13 = animate ? ["visible", "scaleIn"] : void 0, $[38] = animate, $[39] = t13) : t13 = $[39];
   let t14;
-  $[40] !== animate ? (t14 = animate ? ["visible", "scaleIn"] : void 0, $[40] = animate, $[41] = t14) : t14 = $[41];
+  $[40] !== animate ? (t14 = animate ? ["hidden", "scaleOut"] : void 0, $[40] = animate, $[41] = t14) : t14 = $[41];
   let t15;
-  $[42] !== animate ? (t15 = animate ? ["hidden", "scaleOut"] : void 0, $[42] = animate, $[43] = t15) : t15 = $[43];
+  $[42] !== children || $[43] !== padding ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", flex: 1, padding, children }), $[42] = children, $[43] = padding, $[44] = t15) : t15 = $[44];
   let t16;
-  $[44] !== children || $[45] !== padding ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", flex: 1, padding, children }), $[44] = children, $[45] = padding, $[46] = t16) : t16 = $[46];
+  $[45] !== maxWidth || $[46] !== overflow || $[47] !== t15 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, maxWidth, overflow, children: t15 }), $[45] = maxWidth, $[46] = overflow, $[47] = t15, $[48] = t16) : t16 = $[48];
   let t17;
-  $[47] !== maxWidth || $[48] !== overflow || $[49] !== t16 ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, maxWidth, overflow, children: t16 }), $[47] = maxWidth, $[48] = overflow, $[49] = t16, $[50] = t17) : t17 = $[50];
+  $[49] !== arrow || $[50] !== arrowRef || $[51] !== arrowStyle ? (t17 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[49] = arrow, $[50] = arrowRef, $[51] = arrowStyle, $[52] = t17) : t17 = $[52];
   let t18;
-  $[51] !== arrow || $[52] !== arrowRef || $[53] !== arrowStyle ? (t18 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[51] = arrow, $[52] = arrowRef, $[53] = arrowStyle, $[54] = t18) : t18 = $[54];
-  let t19;
-  return $[55] !== as || $[56] !== placement || $[57] !== radius || $[58] !== rest || $[59] !== rootStyle || $[60] !== shadow || $[61] !== t13 || $[62] !== t14 || $[63] !== t15 || $[64] !== t17 || $[65] !== t18 || $[66] !== tone ? (t19 = /* @__PURE__ */ jsxRuntime.jsxs(MotionCard$1, { className: t12, "data-ui": "Popover", ...rest, as, "data-context-tone": tone, "data-placement": placement, direction: "column", display: "flex", radius, shadow, sizing: "border", style: rootStyle, tone, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t13, animate: t14, exit: t15, children: [
-    t17,
-    t18
-  ] }), $[55] = as, $[56] = placement, $[57] = radius, $[58] = rest, $[59] = rootStyle, $[60] = shadow, $[61] = t13, $[62] = t14, $[63] = t15, $[64] = t17, $[65] = t18, $[66] = tone, $[67] = t19) : t19 = $[67], t19;
+  return $[53] !== as || $[54] !== placement || $[55] !== radius || $[56] !== rest || $[57] !== rootStyle || $[58] !== shadow || $[59] !== strategy || $[60] !== t12 || $[61] !== t13 || $[62] !== t14 || $[63] !== t16 || $[64] !== t17 || $[65] !== tone ? (t18 = /* @__PURE__ */ jsxRuntime.jsxs(MotionLayer$1, { className: t11, "data-ui": "Popover", ...rest, as, "data-context-tone": tone, "data-placement": placement, direction: "column", display: "flex", position: strategy, radius, shadow, sizing: "border", style: rootStyle, tone, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t12, animate: t13, exit: t14, children: [
+    t16,
+    t17
+  ] }), $[53] = as, $[54] = placement, $[55] = radius, $[56] = rest, $[57] = rootStyle, $[58] = shadow, $[59] = strategy, $[60] = t12, $[61] = t13, $[62] = t14, $[63] = t16, $[64] = t17, $[65] = tone, $[66] = t18) : t18 = $[66], t18;
 }
-PopoverCard.displayName = "PopoverCard";
+PopoverLayer.displayName = "PopoverCard";
 const DEFAULT_POPOVER_ELEMENT = "div";
 function ViewportOverlay() {
   const $ = reactCompilerRuntime.c(2), {
@@ -1872,9 +1870,9 @@ function Popover(props) {
     updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
   }, [update, updateRef]), disabled)
     return childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  const popover = /* @__PURE__ */ jsxRuntime.jsxs(LayerProvider, { zOffset, children: [
+  const popover = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     modal && /* @__PURE__ */ jsxRuntime.jsx(ViewportOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverCard, { ...rest, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, hidden: referenceHidden, maxWidth: widthProp, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, x, y, children: content })
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverLayer, { ...rest, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, hidden: referenceHidden, maxWidth: widthProp, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, x, y, zOffset, children: content })
   ] }), children = open && (portal ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: tone === "inherit" ? card?.tone ?? "default" : tone, scheme: scheme ?? "light", children: popover }) }) : popover);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
@@ -2233,8 +2231,32 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   right: ["right-end", "right-start", "left", "top", "bottom"],
   "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
   "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
-}, DEFAULT_TOOLTIP_CARD_ELEMENT = "div", MotionCard = framerMotion.motion.create(Card);
-function TooltipCard(props) {
+}, TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
+function TooltipDelayGroupProvider(props) {
+  const $ = reactCompilerRuntime.c(9), {
+    children,
+    delay
+  } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay : delay?.open || 0, closeDelay = typeof delay == "number" ? delay : delay?.close || 0;
+  let t0;
+  const t1 = isGroupActive ? 1 : openDelay;
+  let t2;
+  $[0] !== closeDelay || $[1] !== openTooltipId || $[2] !== setIsGroupActive || $[3] !== setOpenTooltipId || $[4] !== t1 ? (t2 = {
+    setIsGroupActive,
+    openTooltipId,
+    setOpenTooltipId,
+    openDelay: t1,
+    closeDelay
+  }, $[0] = closeDelay, $[1] = openTooltipId, $[2] = setIsGroupActive, $[3] = setOpenTooltipId, $[4] = t1, $[5] = t2) : t2 = $[5], t0 = t2;
+  const value = t0;
+  let t3;
+  return $[6] !== children || $[7] !== value ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children }), $[6] = children, $[7] = value, $[8] = t3) : t3 = $[8], t3;
+}
+TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
+function useTooltipDelayGroup() {
+  return react.useContext(TooltipDelayGroupContext);
+}
+const DEFAULT_TOOLTIP_LAYER_ELEMENT = "div", MotionLayer = framerMotion.motion.create(Layer);
+function TooltipLayer(props) {
   const $ = reactCompilerRuntime.c(53), t0 = props;
   let animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, rest, scheme, shadow, style, t1, t2;
   $[0] !== t0 ? ({
@@ -2256,7 +2278,7 @@ function TooltipCard(props) {
     tone: t2,
     ...rest
   } = t0, $[0] = t0, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = originX, $[8] = originY, $[9] = padding, $[10] = placement, $[11] = radius, $[12] = rest, $[13] = scheme, $[14] = shadow, $[15] = style, $[16] = t1, $[17] = t2) : (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], originX = $[7], originY = $[8], padding = $[9], placement = $[10], radius = $[11], rest = $[12], scheme = $[13], shadow = $[14], style = $[15], t1 = $[16], t2 = $[17]);
-  const as = t1 === void 0 ? DEFAULT_TOOLTIP_CARD_ELEMENT : t1, tone = t2 === void 0 ? "inherit" : t2;
+  const as = t1 === void 0 ? DEFAULT_TOOLTIP_LAYER_ELEMENT : t1, tone = t2 === void 0 ? "inherit" : t2;
   let t3;
   const t4 = animate ? "transform" : void 0;
   let t5;
@@ -2289,36 +2311,12 @@ function TooltipCard(props) {
   let t15;
   $[33] !== arrow || $[34] !== arrowRef || $[35] !== arrowStyle ? (t15 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[33] = arrow, $[34] = arrowRef, $[35] = arrowStyle, $[36] = t15) : t15 = $[36];
   let t16;
-  return $[37] !== as || $[38] !== children || $[39] !== padding || $[40] !== placement || $[41] !== radius || $[42] !== rest || $[43] !== rootStyle || $[44] !== scheme || $[45] !== shadow || $[46] !== t11 || $[47] !== t12 || $[48] !== t13 || $[49] !== t14 || $[50] !== t15 || $[51] !== tone ? (t16 = /* @__PURE__ */ jsxRuntime.jsxs(MotionCard, { "data-ui": "Tooltip__card", ...rest, as, className: t10, "data-animate": t11, "data-placement": placement, padding, radius, scheme, shadow, style: rootStyle, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t12, animate: t13, exit: t14, tone, children: [
+  return $[37] !== as || $[38] !== children || $[39] !== padding || $[40] !== placement || $[41] !== radius || $[42] !== rest || $[43] !== rootStyle || $[44] !== scheme || $[45] !== shadow || $[46] !== t11 || $[47] !== t12 || $[48] !== t13 || $[49] !== t14 || $[50] !== t15 || $[51] !== tone ? (t16 = /* @__PURE__ */ jsxRuntime.jsxs(MotionLayer, { "data-ui": "Tooltip__card", ...rest, as, className: t10, "data-animate": t11, "data-placement": placement, padding, radius, scheme, shadow, style: rootStyle, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t12, animate: t13, exit: t14, tone, children: [
     children,
     t15
   ] }), $[37] = as, $[38] = children, $[39] = padding, $[40] = placement, $[41] = radius, $[42] = rest, $[43] = rootStyle, $[44] = scheme, $[45] = shadow, $[46] = t11, $[47] = t12, $[48] = t13, $[49] = t14, $[50] = t15, $[51] = tone, $[52] = t16) : t16 = $[52], t16;
 }
-TooltipCard.displayName = "TooltipCard";
-const TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
-function TooltipDelayGroupProvider(props) {
-  const $ = reactCompilerRuntime.c(9), {
-    children,
-    delay
-  } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay : delay?.open || 0, closeDelay = typeof delay == "number" ? delay : delay?.close || 0;
-  let t0;
-  const t1 = isGroupActive ? 1 : openDelay;
-  let t2;
-  $[0] !== closeDelay || $[1] !== openTooltipId || $[2] !== setIsGroupActive || $[3] !== setOpenTooltipId || $[4] !== t1 ? (t2 = {
-    setIsGroupActive,
-    openTooltipId,
-    setOpenTooltipId,
-    openDelay: t1,
-    closeDelay
-  }, $[0] = closeDelay, $[1] = openTooltipId, $[2] = setIsGroupActive, $[3] = setOpenTooltipId, $[4] = t1, $[5] = t2) : t2 = $[5], t0 = t2;
-  const value = t0;
-  let t3;
-  return $[6] !== children || $[7] !== value ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children }), $[6] = children, $[7] = value, $[8] = t3) : t3 = $[8], t3;
-}
-TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
-function useTooltipDelayGroup() {
-  return react.useContext(TooltipDelayGroupContext);
-}
+TooltipLayer.displayName = "TooltipLayer";
 const DEFAULT_TOOLTIP_ELEMENT = "div";
 function Tooltip(props) {
   const boundaryElementContext = useBoundaryElement(), {
@@ -2437,10 +2435,10 @@ function Tooltip(props) {
   }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
   if (react.useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   if (disabled) return child;
-  const node_0 = /* @__PURE__ */ jsxRuntime.jsx(Layer, { "data-ui": "Tooltip", className: css.composeClassNames(className, css.tooltip()), ref: setFloating, style: {
+  const node_0 = /* @__PURE__ */ jsxRuntime.jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: css.composeClassNames(className, css.tooltip()), originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: {
     ...floatingStyles,
     maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
-  }, zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipCard, { ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, tone, children: content }) }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: tone === "inherit" ? card?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
+  }, tone, zOffset, children: content }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: tone === "inherit" ? card?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
     child