@sanity/ui 2.14.4-canary.2 → 2.14.4

package/dist/_chunks-es/_visual-editing.mjs

@@ -10,41 +10,33 @@ import { motion, AnimatePresence } from "framer-motion";
 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_PROPS = {
-  outerVariants: {
-    initial: {
-      scale: 0.97,
-      willChange: "transform"
-    },
-    hidden: {
-      opacity: 0
-    },
-    visible: {
-      opacity: 1,
-      transition: {
-        when: "beforeChildren",
-        duration: 0.1
-      }
-    },
-    scaleIn: {
-      scale: 1
-    },
-    scaleOut: {
-      scale: 0.97
-    }
+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"
   },
-  innerVariants: {
-    hidden: {
-      opacity: 0
-    },
-    visible: {
-      opacity: 1
-    }
+  animate: {
+    opacity: 2,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 1,
+    scale: 1
+  },
+  exit: {
+    opacity: 0,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
+    scale: 0.97
   },
   transition: {
-    type: "spring",
-    visualDuration: 0.2,
-    bounce: 0.25
+    duration: 0.4,
+    type: "spring"
   }
 };
 function _fillCSSObject(keys, value) {
@@ -3133,7 +3125,7 @@ const StyledLayer = /* @__PURE__ */ styled.div.withConfig({
     zIndex
   }, $[14] = style, $[15] = zIndex, $[16] = t5) : t5 = $[16];
   let t6;
-  return $[17] !== children || $[18] !== handleFocus || $[19] !== restProps || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledLayer, { "data-ui": "Layer", ...restProps, onFocus: handleFocus, ref, style: t5, children }), $[17] = children, $[18] = handleFocus, $[19] = restProps, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
+  return $[17] !== children || $[18] !== handleFocus || $[19] !== restProps || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledLayer, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: t5, children }), $[17] = children, $[18] = handleFocus, $[19] = restProps, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
 }), Layer = forwardRef(function(props, ref) {
   const $ = c(11);
   let children, restProps, t0;
@@ -3429,11 +3421,8 @@ function calcMaxWidth(params) {
 const MotionCard$1 = styled(motion.create(Card)).withConfig({
   displayName: "MotionCard",
   componentId: "sc-ihg31s-0"
-})`&:not([hidden]){display:flex;}flex-direction:column;width:max-content;min-width:min-content;will-change:transform;`, MotionFlex = styled(motion.create(Flex)).withConfig({
-  displayName: "MotionFlex",
-  componentId: "sc-ihg31s-1"
-})`will-change:opacity;`, PopoverCard = memo(forwardRef(function(props, ref) {
-  const $ = c(66);
+})`&:not([hidden]){display:flex;}flex-direction:column;width:max-content;min-width:min-content;& > *{opacity:var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY},1);will-change:opacity;}`, PopoverCard = memo(forwardRef(function(props, ref) {
+  const $ = c(60);
   let animate, arrow2, arrowRef, arrowX, arrowY, children, marginsProp, originX, originY, overflow, padding, placement, radius, restProps, scheme, shadow, strategy, style, tone, width, xProp, yProp;
   $[0] !== props ? ({
     __unstable_margins: marginsProp,
@@ -3491,22 +3480,18 @@ const MotionCard$1 = styled(motion.create(Card)).withConfig({
   }, $[33] = t5, $[34] = t6, $[35] = t7) : t7 = $[35], t4 = t7;
   const arrowStyle = t4, t8 = restProps;
   let t9;
-  $[36] !== animate ? (t9 = animate ? ["hidden", "initial"] : void 0, $[36] = animate, $[37] = t9) : t9 = $[37];
+  $[36] !== animate ? (t9 = animate ? POPOVER_MOTION_PROPS : {}, $[36] = animate, $[37] = t9) : t9 = $[37];
   let t10;
-  $[38] !== animate ? (t10 = animate ? ["visible", "scaleIn"] : void 0, $[38] = animate, $[39] = t10) : t10 = $[39];
+  $[38] !== children || $[39] !== padding ? (t10 = /* @__PURE__ */ jsx(Flex, { direction: "column", flex: 1, padding, children }), $[38] = children, $[39] = padding, $[40] = t10) : t10 = $[40];
   let t11;
-  $[40] !== animate ? (t11 = animate ? ["hidden", "scaleOut"] : void 0, $[40] = animate, $[41] = t11) : t11 = $[41];
+  $[41] !== overflow || $[42] !== t10 ? (t11 = /* @__PURE__ */ jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, overflow, children: t10 }), $[41] = overflow, $[42] = t10, $[43] = t11) : t11 = $[43];
   let t12;
-  $[42] !== children || $[43] !== padding ? (t12 = /* @__PURE__ */ jsx(Flex, { direction: "column", flex: 1, padding, children }), $[42] = children, $[43] = padding, $[44] = t12) : t12 = $[44];
+  $[44] !== arrow2 || $[45] !== arrowRef || $[46] !== arrowStyle ? (t12 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[44] = arrow2, $[45] = arrowRef, $[46] = arrowStyle, $[47] = t12) : t12 = $[47];
   let t13;
-  $[45] !== overflow || $[46] !== t12 ? (t13 = /* @__PURE__ */ jsx(MotionFlex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, overflow, variants: POPOVER_MOTION_PROPS.innerVariants, transition: POPOVER_MOTION_PROPS.transition, children: t12 }), $[45] = overflow, $[46] = t12, $[47] = t13) : t13 = $[47];
-  let t14;
-  $[48] !== arrow2 || $[49] !== arrowRef || $[50] !== arrowStyle ? (t14 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[48] = arrow2, $[49] = arrowRef, $[50] = arrowStyle, $[51] = t14) : t14 = $[51];
-  let t15;
-  return $[52] !== placement || $[53] !== radius || $[54] !== ref || $[55] !== rootStyle2 || $[56] !== scheme || $[57] !== shadow || $[58] !== t10 || $[59] !== t11 || $[60] !== t13 || $[61] !== t14 || $[62] !== t8 || $[63] !== t9 || $[64] !== tone ? (t15 = /* @__PURE__ */ jsxs(MotionCard$1, { "data-ui": "Popover", ...t8, "data-placement": placement, radius, ref, scheme, shadow, sizing: "border", style: rootStyle2, tone, variants: POPOVER_MOTION_PROPS.outerVariants, transition: POPOVER_MOTION_PROPS.transition, initial: t9, animate: t10, exit: t11, children: [
-    t13,
-    t14
-  ] }), $[52] = placement, $[53] = radius, $[54] = ref, $[55] = rootStyle2, $[56] = scheme, $[57] = shadow, $[58] = t10, $[59] = t11, $[60] = t13, $[61] = t14, $[62] = t8, $[63] = t9, $[64] = tone, $[65] = t15) : t15 = $[65], t15;
+  return $[48] !== placement || $[49] !== radius || $[50] !== ref || $[51] !== rootStyle2 || $[52] !== scheme || $[53] !== shadow || $[54] !== t11 || $[55] !== t12 || $[56] !== t8 || $[57] !== t9 || $[58] !== tone ? (t13 = /* @__PURE__ */ jsxs(MotionCard$1, { "data-ui": "Popover", ...t8, "data-placement": placement, radius, ref, scheme, shadow, sizing: "border", style: rootStyle2, tone, ...t9, children: [
+    t11,
+    t12
+  ] }), $[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 ViewportOverlay = () => {
@@ -4435,8 +4420,8 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
 }, MotionCard = styled(motion.create(Card)).withConfig({
   displayName: "MotionCard",
   componentId: "sc-1xn138w-0"
-})`will-change:transform;`, TooltipCard = memo(forwardRef(function(props, ref) {
-  const $ = c(48);
+})`& > *{opacity:var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY},1);will-change:opacity;}`, TooltipCard = memo(forwardRef(function(props, ref) {
+  const $ = c(42);
   let animate, arrow2, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, restProps, scheme, shadow, style;
   $[0] !== props ? ({
     animate,
@@ -4476,18 +4461,14 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   }, $[21] = t4, $[22] = t5, $[23] = t6) : t6 = $[23], t3 = t6;
   const arrowStyle = t3, t7 = restProps;
   let t8;
-  $[24] !== animate ? (t8 = animate ? ["hidden", "initial"] : void 0, $[24] = animate, $[25] = t8) : t8 = $[25];
+  $[24] !== animate ? (t8 = animate ? POPOVER_MOTION_PROPS : {}, $[24] = animate, $[25] = t8) : t8 = $[25];
   let t9;
-  $[26] !== animate ? (t9 = animate ? ["visible", "scaleIn"] : void 0, $[26] = animate, $[27] = t9) : t9 = $[27];
+  $[26] !== arrow2 || $[27] !== arrowRef || $[28] !== arrowStyle ? (t9 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[26] = arrow2, $[27] = arrowRef, $[28] = arrowStyle, $[29] = t9) : t9 = $[29];
   let t10;
-  $[28] !== animate ? (t10 = animate ? ["hidden", "scaleOut"] : void 0, $[28] = animate, $[29] = t10) : t10 = $[29];
-  let t11;
-  $[30] !== arrow2 || $[31] !== arrowRef || $[32] !== arrowStyle ? (t11 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[30] = arrow2, $[31] = arrowRef, $[32] = arrowStyle, $[33] = t11) : t11 = $[33];
-  let t12;
-  return $[34] !== children || $[35] !== padding || $[36] !== placement || $[37] !== radius || $[38] !== ref || $[39] !== rootStyle2 || $[40] !== scheme || $[41] !== shadow || $[42] !== t10 || $[43] !== t11 || $[44] !== t7 || $[45] !== t8 || $[46] !== t9 ? (t12 = /* @__PURE__ */ jsxs(MotionCard, { "data-ui": "Tooltip__card", ...t7, "data-placement": placement, padding, radius, ref, scheme, shadow, style: rootStyle2, variants: POPOVER_MOTION_PROPS.outerVariants, transition: POPOVER_MOTION_PROPS.transition, initial: t8, animate: t9, exit: t10, children: [
+  return $[30] !== children || $[31] !== padding || $[32] !== placement || $[33] !== radius || $[34] !== ref || $[35] !== rootStyle2 || $[36] !== scheme || $[37] !== shadow || $[38] !== t7 || $[39] !== t8 || $[40] !== t9 ? (t10 = /* @__PURE__ */ jsxs(MotionCard, { "data-ui": "Tooltip__card", ...t7, "data-placement": placement, padding, radius, ref, scheme, shadow, style: rootStyle2, ...t8, children: [
     children,
-    t11
-  ] }), $[34] = children, $[35] = padding, $[36] = placement, $[37] = radius, $[38] = ref, $[39] = rootStyle2, $[40] = scheme, $[41] = shadow, $[42] = t10, $[43] = t11, $[44] = t7, $[45] = t8, $[46] = t9, $[47] = t12) : t12 = $[47], t12;
+    t9
+  ] }), $[30] = children, $[31] = padding, $[32] = placement, $[33] = radius, $[34] = ref, $[35] = rootStyle2, $[36] = scheme, $[37] = shadow, $[38] = t7, $[39] = t8, $[40] = t9, $[41] = t10) : t10 = $[41], t10;
 }));
 TooltipCard.displayName = "Memo(ForwardRef(TooltipCard))";
 const TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
@@ -4581,7 +4562,19 @@ const StyledTooltip = styled(Layer).withConfig({
       }
     else
       setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]);
+  }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]), handleBlur = useCallback((e) => {
+    handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
+  }, [childProp?.props, handleIsOpenChange]), handleClick = useCallback((e_0) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
+  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = useCallback((e_1) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
+  }, [childProp?.props, handleIsOpenChange]), handleFocus = useCallback((e_2) => {
+    handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
+  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = useCallback((e_3) => {
+    handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
+  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = useCallback((e_4) => {
+    handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
+  }, [childProp?.props, handleIsOpenChange]);
   useCloseOnMouseLeave({
     handleIsOpenChange,
     referenceElement,
@@ -4598,27 +4591,7 @@ const StyledTooltip = styled(Layer).withConfig({
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, [handleIsOpenChange, showTooltip]);
-  const handleChildEvent = useEffectEvent((open_0, immediate_0) => handleIsOpenChange(open_0, immediate_0));
-  useEffect(() => {
-    if (!referenceElement) return;
-    const controller = new AbortController(), {
-      signal
-    } = controller;
-    return referenceElement.addEventListener("blur", () => handleChildEvent(!1), {
-      signal
-    }), referenceElement.addEventListener("focus", () => handleChildEvent(!0), {
-      signal
-    }), referenceElement.addEventListener("mouseenter", () => handleChildEvent(!0), {
-      signal
-    }), referenceElement.addEventListener("mouseleave", () => handleChildEvent(!1), {
-      signal
-    }), referenceElement.addEventListener("click", () => handleChildEvent(!1, !0), {
-      signal
-    }), referenceElement.addEventListener("contextmenu", () => handleChildEvent(!1, !0), {
-      signal
-    }), () => controller.abort();
-  }, [referenceElement]), useLayoutEffect(() => {
+  }, [handleIsOpenChange, showTooltip]), useLayoutEffect(() => {
     const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
   }, [boundaryElement, portalElement]);
@@ -4627,8 +4600,14 @@ const StyledTooltip = styled(Layer).withConfig({
   }, [update]), setFloating = useCallback((node) => {
     ref.current = node, refs.setFloating(node);
   }, [refs]), child = useMemo(() => childProp ? cloneElement(childProp, {
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleClick,
+    onContextMenu: handleContextMenu,
     ref: setReferenceElement
-  }) : null, [childProp]);
+  }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
   if (useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsx(Fragment, {});
   if (disabled) return child;
   const tooltip = /* @__PURE__ */ jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: {
@@ -5340,6 +5319,7 @@ export {
   MenuDivider,
   MenuGroup,
   MenuItem,
+  POPOVER_MOTION_CONTENT_OPACITY_PROPERTY,
   Popover,
   Portal,
   PortalProvider,