@sanity/ui 2.13.4 → 2.14.0

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

@@ -5,8 +5,15 @@ function _interopDefaultCompat(e) {
 }
 var ReactIs__default = /* @__PURE__ */ _interopDefaultCompat(ReactIs);
 const createColorTheme = theme.createColorTheme, hexToRgb = theme.hexToRgb, hslToRgb = theme.hslToRgb, multiply = theme.multiply, parseColor = theme.parseColor, rgbToHex = theme.rgbToHex, rgbToHsl = theme.rgbToHsl, rgba = theme.rgba, screen = theme.screen, studioTheme = theme.buildTheme(), EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity", POPOVER_MOTION_PROPS = {
+  /**
+   * These variants makes use of special timing, by using a negative opacity as a starting position,
+   * as well as double opacity as the end position.
+   * The purpose of this is to make the tooltip/popover container appear before the content, and when exiting
+   * we want the content to disappear faster than the container.
+   */
   initial: {
     opacity: 0.5,
+    // the nagative opacity here, as well as the double opacity further down, are to make the content appear after the backgdrop, and when exiting the content should disappear first.
     [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
     scale: 0.97,
     willChange: "transform"
@@ -3485,7 +3492,19 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion.create(Card)).w
   ] }), $[48] = placement, $[49] = radius, $[50] = ref, $[51] = rootStyle2, $[52] = scheme, $[53] = shadow, $[54] = t11, $[55] = t12, $[56] = t8, $[57] = t9, $[58] = tone, $[59] = t13) : t13 = $[59], t13;
 }));
 PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
-const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
+const ViewportOverlay = () => {
+  const $ = reactCompilerRuntime.c(2), {
+    zIndex
+  } = useLayer();
+  let t0;
+  return $[0] !== zIndex ? (t0 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    height: "100vh",
+    inset: 0,
+    position: "fixed",
+    width: "100vw",
+    zIndex
+  } }), $[0] = zIndex, $[1] = t0) : t0 = $[1], t0;
+}, Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
   const {
     container,
     layer
@@ -3501,6 +3520,7 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"],
     matchReferenceWidth,
     floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+    modal,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActivate,
     open,
@@ -3608,7 +3628,10 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
   }, [update, updateRef]), disabled)
     return childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  const popover = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, hidden: referenceHidden, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, tone, width: matchReferenceWidth ? referenceWidthRef.current : width, x, y, children: content }) }), children = open && (portal ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover);
+  const popover = /* @__PURE__ */ jsxRuntime.jsxs(LayerProvider, { zOffset, children: [
+    modal && /* @__PURE__ */ jsxRuntime.jsx(ViewportOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, hidden: referenceHidden, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, tone, width: matchReferenceWidth ? referenceWidthRef.current : width, x, y, children: content })
+  ] }), children = open && (portal ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
     child