@sanity/ui 4.0.0-static.43 → 4.0.0-static.45

package/dist/index.js

@@ -1,14 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { SpinnerIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon, CheckmarkIcon, RemoveIcon } from "@sanity/icons";
-import { isValidElement, useDebugValue, useSyncExternalStore, createContext, use, useRef, useImperativeHandle, useEffect, useState, cloneElement, useReducer, Children, Fragment as Fragment$1, startTransition, useId, lazy, Suspense, useLayoutEffect, Component } from "react";
+import { isValidElement, useDebugValue, useSyncExternalStore, useState, Activity, createContext, use, useRef, useImperativeHandle, useEffect, cloneElement, useReducer, useEffectEvent, Children, Fragment as Fragment$1, startTransition, useId, lazy, Suspense, useLayoutEffect, Component } from "react";
 import { box, text, textOverflow, animatedSpinnerIcon, spinner, button, buttonLoadingBox, _arrow, vars, _arrowSvg, _arrowStrokeMask, _arrowStroke, _arrowShape, card, BREAKPOINTS, popoverCard, popover, _selectable, stack, textInput, textInputPrefix, textInputElement, _inputElement, _inputPresentation, textInputSuffix, breadcrumbs, container as container$1, dialogCard, dialogHeader, dialogContent, dialogScrollerShadowTop, dialogScroller, dialogScrollerShadowBottom, dialogFooter, dialog, dialogContainer, kbd, menu, menuDivider, toast, toastLayer, treeItem, label, avatar, avatarArrow, avatarInitials, avatarImage, avatarImageOutline, avatarCounter, avatarStack, badge, checkbox, checkboxInput, checkboxPresentation, code, heading, radio, radioInput, radioPresentation, select, selectPresentation, skeleton, codeSkeleton, headingSkeleton, labelSkeleton, textSkeleton, srOnly, _switch, _switchElement, _switchPresentation, _switchTrack, _switchThumb, textArea, tooltip, root } from "@sanity/ui/css";
 import { isValidElementType } from "react-is";
 import { detectOverflow, useFloating, autoPlacement, flip, offset, shift, arrow, hide, autoUpdate } from "@floating-ui/react-dom";
-import { motion, AnimatePresence } from "motion/react";
+import { invariant, PresenceChild, motion, AnimatePresence } from "motion/react";
 import { createPortal } from "react-dom";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useEffectEvent } from "use-effect-event";
 import { ResizeObserver } from "@juggle/resize-observer";
 const EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_PROPS = {
   card: {
@@ -470,6 +469,24 @@ const origin = {
 function clamp(num, min, max) {
   return Math.min(Math.max(num, min), max);
 }
+function AnimateActivity(t0) {
+  const $ = c(9), {
+    mode: modeFromProps,
+    layoutMode,
+    children
+  } = t0, [mode, setMode] = useState(modeFromProps), isPresent = modeFromProps === "visible";
+  if (isPresent && mode !== "visible")
+    return setMode("visible"), null;
+  let t1;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => setMode("hidden"), $[0] = t1) : t1 = $[0];
+  const onExitComplete = t1;
+  invariant(!!Activity, "Activity component not found - upgrade to React 19.2.0 or higher");
+  const t2 = isPresent ? void 0 : onExitComplete, t3 = layoutMode === "pop" ? "popLayout" : "sync", t4 = children;
+  let t5;
+  $[1] !== isPresent || $[2] !== t2 || $[3] !== t3 || $[4] !== t4 ? (t5 = /* @__PURE__ */ jsx(PresenceChild, { isPresent, onExitComplete: t2, presenceAffectsLayout: !1, mode: t3, children: t4 }), $[1] = isPresent, $[2] = t2, $[3] = t3, $[4] = t4, $[5] = t5) : t5 = $[5];
+  let t6;
+  return $[6] !== mode || $[7] !== t5 ? (t6 = /* @__PURE__ */ jsx(Activity, { mode, children: t5 }), $[6] = mode, $[7] = t5, $[8] = t6) : t6 = $[8], t6;
+}
 function getGlobalScope() {
   if (typeof globalThis < "u") return globalThis;
   if (typeof window < "u") return window;
@@ -1042,7 +1059,7 @@ function ViewportOverlay() {
   } }), $[0] = zIndex, $[1] = t0) : t0 = $[1], t0;
 }
 function Popover(props) {
-  const $ = c(113), t0 = props;
+  const $ = c(114), t0 = props;
   let _fallbackPlacements, _floatingBoundary, _referenceBoundary, childProp, className, content2, disabled, forwardedRef, matchReferenceWidth, modal, open, padding, portal, referenceElement, rest, scheme, t1, t10, t11, t12, t13, t14, t2, t3, t4, t5, t6, t7, t8, t9, updateRef;
   if ($[0] !== t0) {
     const {
@@ -1171,7 +1188,7 @@ function Popover(props) {
     t28
   ] }), $[97] = t26, $[98] = t28, $[99] = t29) : t29 = $[99];
   const node_0 = t29;
-  let children = open ? node_0 : null;
+  let children = node_0;
   if (open && portal) {
     let resolvedTone = tone;
     if (tone === "inherit") {
@@ -1185,12 +1202,12 @@ function Popover(props) {
     $[104] !== t302 || $[105] !== t32 ? (t33 = /* @__PURE__ */ jsx(Portal, { __unstable_name: t302, children: t32 }), $[104] = t302, $[105] = t32, $[106] = t33) : t33 = $[106], children = t33;
   }
   let t30;
-  $[107] !== animate || $[108] !== children ? (t30 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[107] = animate, $[108] = children, $[109] = t30) : t30 = $[109];
+  $[107] !== animate || $[108] !== children || $[109] !== open ? (t30 = animate ? /* @__PURE__ */ jsx(AnimateActivity, { mode: open ? "visible" : "hidden", layoutMode: "default", children }) : /* @__PURE__ */ jsx(Activity, { mode: open ? "visible" : "hidden", children }), $[107] = animate, $[108] = children, $[109] = open, $[110] = t30) : t30 = $[110];
   let t31;
-  return $[110] !== child || $[111] !== t30 ? (t31 = /* @__PURE__ */ jsxs(Fragment, { children: [
+  return $[111] !== child || $[112] !== t30 ? (t31 = /* @__PURE__ */ jsxs(Fragment, { children: [
     t30,
     child
-  ] }), $[110] = child, $[111] = t30, $[112] = t31) : t31 = $[112], t31;
+  ] }), $[111] = child, $[112] = t30, $[113] = t31) : t31 = $[113], t31;
 }
 function useMiddleware$1(t0) {
   const $ = c(36), {
@@ -4509,7 +4526,7 @@ function TooltipLayer(props) {
 }
 const DEFAULT_TOOLTIP_ELEMENT = "div";
 function Tooltip(props) {
-  const $ = c(143), t0 = props;
+  const $ = c(144), t0 = props;
   let _boundaryElement, _fallbackPlacements, childProp, className, content2, delay, disabled, forwardedRef, portalProp, rest, scheme, t1, t2, t3, t4, t5, t6, t7, t8, t9;
   $[0] !== t0 ? ({
     animate: t1,
@@ -4703,7 +4720,7 @@ function Tooltip(props) {
   let t40;
   $[109] !== animate || $[110] !== arrowProp || $[111] !== arrowX || $[112] !== arrowY || $[113] !== as || $[114] !== content2 || $[115] !== originX || $[116] !== originY || $[117] !== padding || $[118] !== placement || $[119] !== radius || $[120] !== rest || $[121] !== scheme || $[122] !== setArrow || $[123] !== setFloating || $[124] !== shadow || $[125] !== t37 || $[126] !== t39 || $[127] !== tone || $[128] !== zOffset ? (t40 = /* @__PURE__ */ jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: t37, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: t39, tone, zOffset, children: content2 }), $[109] = animate, $[110] = arrowProp, $[111] = arrowX, $[112] = arrowY, $[113] = as, $[114] = content2, $[115] = originX, $[116] = originY, $[117] = padding, $[118] = placement, $[119] = radius, $[120] = rest, $[121] = scheme, $[122] = setArrow, $[123] = setFloating, $[124] = shadow, $[125] = t37, $[126] = t39, $[127] = tone, $[128] = zOffset, $[129] = t40) : t40 = $[129];
   const node_0 = t40;
-  let children = showTooltip ? node_0 : null;
+  let children = node_0;
   if (showTooltip && portalProp) {
     let resolvedTone = tone;
     if (tone === "inherit") {
@@ -4717,12 +4734,12 @@ function Tooltip(props) {
     $[134] !== t412 || $[135] !== t43 ? (t44 = /* @__PURE__ */ jsx(Portal, { __unstable_name: t412, children: t43 }), $[134] = t412, $[135] = t43, $[136] = t44) : t44 = $[136], children = t44;
   }
   let t41;
-  $[137] !== animate || $[138] !== children ? (t41 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[137] = animate, $[138] = children, $[139] = t41) : t41 = $[139];
+  $[137] !== animate || $[138] !== children || $[139] !== showTooltip ? (t41 = animate ? /* @__PURE__ */ jsx(AnimateActivity, { mode: showTooltip ? "visible" : "hidden", layoutMode: "default", children }) : /* @__PURE__ */ jsx(Activity, { mode: showTooltip ? "visible" : "hidden", children }), $[137] = animate, $[138] = children, $[139] = showTooltip, $[140] = t41) : t41 = $[140];
   let t42;
-  return $[140] !== child || $[141] !== t41 ? (t42 = /* @__PURE__ */ jsxs(Fragment, { children: [
+  return $[141] !== child || $[142] !== t41 ? (t42 = /* @__PURE__ */ jsxs(Fragment, { children: [
     t41,
     child
-  ] }), $[140] = child, $[141] = t41, $[142] = t42) : t42 = $[142], t42;
+  ] }), $[141] = child, $[142] = t41, $[143] = t42) : t42 = $[143], t42;
 }
 function useMiddleware(t0) {
   const $ = c(17), {