@sanity/ui 2.13.4 → 2.14.0

package/dist/_legacy/_visual-editing.esm.js

@@ -11,8 +11,15 @@ import { ResizeObserver } from "@juggle/resize-observer";
 import { createPortal } from "react-dom";
 import { useEffectEvent } from "use-effect-event";
 const createColorTheme = createColorTheme$1, hexToRgb = hexToRgb$1, hslToRgb = hslToRgb$1, multiply = multiply$1, parseColor = parseColor$1, rgbToHex = rgbToHex$1, rgbToHsl = rgbToHsl$1, rgba = rgba$1, screen = screen$1, studioTheme = 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"
@@ -3489,7 +3496,19 @@ const MotionCard$1 = styled(motion.create(Card)).withConfig({
   ] }), $[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 = memo(forwardRef(function(props, forwardedRef) {
+const ViewportOverlay = () => {
+  const $ = c(2), {
+    zIndex
+  } = useLayer();
+  let t0;
+  return $[0] !== zIndex ? (t0 = /* @__PURE__ */ jsx("div", { style: {
+    height: "100vh",
+    inset: 0,
+    position: "fixed",
+    width: "100vw",
+    zIndex
+  } }), $[0] = zIndex, $[1] = t0) : t0 = $[1], t0;
+}, Popover = memo(forwardRef(function(props, forwardedRef) {
   const {
     container,
     layer
@@ -3505,6 +3524,7 @@ const Popover = memo(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,
@@ -3612,7 +3632,10 @@ const Popover = memo(forwardRef(function(props, forwardedRef) {
     updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
   }, [update, updateRef]), disabled)
     return childProp || /* @__PURE__ */ jsx(Fragment, {});
-  const popover = /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ 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__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover);
+  const popover = /* @__PURE__ */ jsxs(LayerProvider, { zOffset, children: [
+    modal && /* @__PURE__ */ jsx(ViewportOverlay, {}),
+    /* @__PURE__ */ 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__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
     child