@sanity/ui 2.14.4 → 2.15.0

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

@@ -10,33 +10,41 @@ 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_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"
-  },
-  animate: {
-    opacity: 2,
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 1,
-    scale: 1
+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 = {
+  card: {
+    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
+    }
   },
-  exit: {
-    opacity: 0,
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
-    scale: 0.97
+  children: {
+    hidden: {
+      opacity: 0
+    },
+    visible: {
+      opacity: 1
+    }
   },
   transition: {
-    duration: 0.4,
-    type: "spring"
+    type: "spring",
+    visualDuration: 0.2,
+    bounce: 0.25
   }
 };
 function _fillCSSObject(keys, value) {
@@ -3421,8 +3429,11 @@ 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;& > *{opacity:var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY},1);will-change:opacity;}`, PopoverCard = memo(forwardRef(function(props, ref) {
-  const $ = c(60);
+})`&: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);
   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,
@@ -3480,18 +3491,22 @@ 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 ? POPOVER_MOTION_PROPS : {}, $[36] = animate, $[37] = t9) : t9 = $[37];
+  $[36] !== animate ? (t9 = animate ? ["hidden", "initial"] : void 0, $[36] = animate, $[37] = t9) : t9 = $[37];
   let t10;
-  $[38] !== children || $[39] !== padding ? (t10 = /* @__PURE__ */ jsx(Flex, { direction: "column", flex: 1, padding, children }), $[38] = children, $[39] = padding, $[40] = t10) : t10 = $[40];
+  $[38] !== animate ? (t10 = animate ? ["visible", "scaleIn"] : void 0, $[38] = animate, $[39] = t10) : t10 = $[39];
   let t11;
-  $[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];
+  $[40] !== animate ? (t11 = animate ? ["hidden", "scaleOut"] : void 0, $[40] = animate, $[41] = t11) : t11 = $[41];
   let t12;
-  $[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];
+  $[42] !== children || $[43] !== padding ? (t12 = /* @__PURE__ */ jsx(Flex, { direction: "column", flex: 1, padding, children }), $[42] = children, $[43] = padding, $[44] = t12) : t12 = $[44];
   let t13;
-  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;
+  $[45] !== overflow || $[46] !== t12 ? (t13 = /* @__PURE__ */ jsx(MotionFlex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, overflow, variants: POPOVER_MOTION_PROPS.children, 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.card, 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;
 }));
 PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
 const ViewportOverlay = () => {
@@ -4420,8 +4435,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"
-})`& > *{opacity:var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY},1);will-change:opacity;}`, TooltipCard = memo(forwardRef(function(props, ref) {
-  const $ = c(42);
+})`will-change:transform;`, TooltipCard = memo(forwardRef(function(props, ref) {
+  const $ = c(48);
   let animate, arrow2, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, restProps, scheme, shadow, style;
   $[0] !== props ? ({
     animate,
@@ -4461,14 +4476,18 @@ 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 ? POPOVER_MOTION_PROPS : {}, $[24] = animate, $[25] = t8) : t8 = $[25];
+  $[24] !== animate ? (t8 = animate ? ["hidden", "initial"] : void 0, $[24] = animate, $[25] = t8) : t8 = $[25];
   let t9;
-  $[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];
+  $[26] !== animate ? (t9 = animate ? ["visible", "scaleIn"] : void 0, $[26] = animate, $[27] = t9) : t9 = $[27];
   let t10;
-  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: [
+  $[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.card, transition: POPOVER_MOTION_PROPS.transition, initial: t8, animate: t9, exit: t10, children: [
     children,
-    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;
+    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;
 }));
 TooltipCard.displayName = "Memo(ForwardRef(TooltipCard))";
 const TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
@@ -5319,7 +5338,6 @@ export {
   MenuDivider,
   MenuGroup,
   MenuItem,
-  POPOVER_MOTION_CONTENT_OPACITY_PROPERTY,
   Popover,
   Portal,
   PortalProvider,