@sanity/ui 3.0.0-static.31 → 3.0.0-static.33

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

@@ -7,7 +7,7 @@ import { box, text, textOverflow, animatedSpinnerIcon, spinner, button, buttonLo
 import { useEffectEvent } from "use-effect-event";
 import { SpinnerIcon, CloseIcon, ChevronRightIcon } from "@sanity/icons";
 import { isValidElementType } from "react-is";
-import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
+import { detectOverflow, autoPlacement, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import { createPortal } from "react-dom";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -551,7 +551,10 @@ function getElementRef(element) {
   return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
 }
 function useCard() {
-  return useContext(CardContext);
+  const card2 = useContext(CardContext);
+  if (!card2)
+    throw new Error("useCard(): missing context value");
+  return card2;
 }
 const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`), elementMap = globalScope;
 elementMap[elementKey] = null;
@@ -577,11 +580,10 @@ function Portal(props) {
   } = props, card2 = useCard(), portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
   if (!portalElement)
     return null;
-  const t0 = card2?.scheme || "light";
+  let t0;
+  $[0] !== card2.scheme || $[1] !== children ? (t0 = /* @__PURE__ */ jsx(CardProvider, { tone: "transparent", scheme: card2.scheme, children }), $[0] = card2.scheme, $[1] = children, $[2] = t0) : t0 = $[2];
   let t1;
-  $[0] !== children || $[1] !== t0 ? (t1 = /* @__PURE__ */ jsx(CardProvider, { tone: "transparent", scheme: t0, children }), $[0] = children, $[1] = t0, $[2] = t1) : t1 = $[2];
-  let t2;
-  return $[3] !== portalElement || $[4] !== t1 ? (t2 = createPortal(t1, portalElement), $[3] = portalElement, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
+  return $[3] !== portalElement || $[4] !== t0 ? (t1 = createPortal(t0, portalElement), $[3] = portalElement, $[4] = t0, $[5] = t1) : t1 = $[5], t1;
 }
 function getLayerContext(contextValue) {
   if (!isRecord(contextValue) || contextValue.version !== 0)
@@ -801,7 +803,7 @@ function Card(props) {
     tone: t5,
     ...rest
   } = t0, $[0] = t0, $[1] = className, $[2] = disabled, $[3] = pressed, $[4] = rest, $[5] = schemeProp, $[6] = selected, $[7] = style, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5) : (className = $[1], disabled = $[2], pressed = $[3], rest = $[4], schemeProp = $[5], selected = $[6], style = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12]);
-  const checkered = t1 === void 0 ? !1 : t1, focusRing = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_CARD_ELEMENT : t3, radius = t4 === void 0 ? 0 : t4, toneProp = t5 === void 0 ? "default" : t5, parent = useCard(), tone = toneProp === "inherit" ? parent?.tone : toneProp, scheme = schemeProp === void 0 ? parent?.scheme : schemeProp, t6 = scheme === parent?.scheme ? void 0 : scheme;
+  const checkered = t1 === void 0 ? !1 : t1, focusRing = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_CARD_ELEMENT : t3, radius = t4 === void 0 ? 0 : t4, toneProp = t5 === void 0 ? "default" : t5, parent = useContext(CardContext), tone = toneProp === "inherit" ? parent?.tone : toneProp, scheme = schemeProp === void 0 ? parent?.scheme : schemeProp, t6 = scheme === parent?.scheme ? void 0 : scheme;
   let t7;
   $[13] !== className || $[14] !== t6 || $[15] !== tone ? (t7 = card({
     className,
@@ -817,7 +819,7 @@ function Card(props) {
   const t14 = scheme ?? "light", t15 = tone ?? "default", t16 = parent?.unstable_CompatProvider;
   let t17;
   if ($[28] !== node || $[29] !== t14 || $[30] !== t15 || $[31] !== t16 ? (t17 = /* @__PURE__ */ jsx(CardProvider, { scheme: t14, tone: t15, unstable_CompatProvider: t16, children: node }), $[28] = node, $[29] = t14, $[30] = t15, $[31] = t16, $[32] = t17) : t17 = $[32], node = t17, parent?.unstable_CompatProvider) {
-    const CompatProvider = parent.unstable_CompatProvider, t18 = scheme ?? "light", t19 = tone ?? parent?.tone ?? "default";
+    const CompatProvider = parent.unstable_CompatProvider, t18 = scheme ?? "light", t19 = tone ?? parent.tone;
     let t20;
     return $[33] !== CompatProvider || $[34] !== node || $[35] !== t18 || $[36] !== t19 ? (t20 = /* @__PURE__ */ jsx(CompatProvider, { scheme: t18, tone: t19, children: node }), $[33] = CompatProvider, $[34] = node, $[35] = t18, $[36] = t19, $[37] = t20) : t20 = $[37], t20;
   }
@@ -1098,6 +1100,7 @@ function Popover(props) {
     overflow = "hidden",
     padding,
     placement: placementProp = "bottom",
+    placementStrategy = "flip",
     portal,
     preventOverflow = !0,
     radius = 3,
@@ -1115,12 +1118,14 @@ function Popover(props) {
   useImperativeHandle(forwardedRef, () => ref.current);
   const referenceWidthRef = useRef(void 0), middleware = useMemo(() => {
     const ret = [];
-    return (constrainSize || preventOverflow) && ret.push(flip({
+    return (constrainSize || preventOverflow) && (placementStrategy === "autoPlacement" ? ret.push(autoPlacement({
+      allowedPlacements: [placementProp].concat(fallbackPlacements)
+    })) : ret.push(flip({
       boundary: floatingBoundary || void 0,
       fallbackPlacements,
       padding: DEFAULT_POPOVER_PADDING,
       rootBoundary
-    })), ret.push(offset({
+    }))), ret.push(offset({
       mainAxis: DEFAULT_POPOVER_DISTANCE
     })), (constrainSize || matchReferenceWidth) && ret.push(size({
       apply({
@@ -1146,7 +1151,7 @@ function Popover(props) {
       padding: DEFAULT_POPOVER_PADDING,
       strategy: "referenceHidden"
     })), ret;
-  }, [animate, arrowProp, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
+  }, [animate, arrowProp, constrainSize, fallbackPlacements, floatingBoundary, placementProp, placementStrategy, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
     x,
     y,
     middlewareData,
@@ -1181,7 +1186,7 @@ function Popover(props) {
     /* @__PURE__ */ jsx(PopoverLayer, { ...rest, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: popover({
       className
     }), hidden: referenceHidden, maxWidth: widthProp, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, x, y, zOffset, children: content })
-  ] }), children = open && (portal ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_1 }) }) : node_1);
+  ] }), children = open && (portal ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2.tone : tone, scheme: scheme ?? "light", children: node_1 }) }) : node_1);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
     child
@@ -2000,44 +2005,6 @@ function usePrefersDark(t0) {
 function _temp$1() {
   return !1;
 }
-function PortalProvider(props) {
-  const $ = c(7), {
-    boundaryElement,
-    children,
-    element,
-    __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(emptySubscribe, _temp, _temp2);
-  let t0;
-  const t1 = boundaryElement || null, t2 = element || fallbackElement;
-  let t3;
-  $[0] !== elements || $[1] !== t1 || $[2] !== t2 ? (t3 = {
-    version: 0,
-    boundaryElement: t1,
-    element: t2,
-    elements
-  }, $[0] = elements, $[1] = t1, $[2] = t2, $[3] = t3) : t3 = $[3], t0 = t3;
-  const value = t0;
-  let t4;
-  return $[4] !== children || $[5] !== value ? (t4 = /* @__PURE__ */ jsx(PortalContext.Provider, { value, children }), $[4] = children, $[5] = value, $[6] = t4) : t4 = $[6], t4;
-}
-function _temp2() {
-  return null;
-}
-function _temp() {
-  return document.body;
-}
-const emptySubscribe = () => () => {
-};
-function useUnique(value) {
-  const valueRef = useRef(value);
-  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
-}
-function _isEqual(objA, objB) {
-  if (!objA || !objB)
-    return objA === objB;
-  const keysA = Object.keys(objA), keysB = Object.keys(objB);
-  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
-}
 function useDelayedState(initialState) {
   const $ = c(3), [state, setState] = useState(initialState), delayedAction = useRef(void 0);
   let t0;
@@ -2250,7 +2217,7 @@ function Tooltip(props) {
   }), originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: {
     ...floatingStyles,
     maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
-  }, tone, zOffset, children: content }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
+  }, tone, zOffset, children: content }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2.tone : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
     child
@@ -2280,6 +2247,44 @@ function useCloseOnMouseLeave(t0) {
   let t3;
   $[7] !== isInsideGroup || $[8] !== showTooltip ? (t3 = [isInsideGroup, showTooltip], $[7] = isInsideGroup, $[8] = showTooltip, $[9] = t3) : t3 = $[9], useEffect(t2, t3);
 }
+function PortalProvider(props) {
+  const $ = c(7), {
+    boundaryElement,
+    children,
+    element,
+    __unstable_elements: elementsProp
+  } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(emptySubscribe, _temp, _temp2);
+  let t0;
+  const t1 = boundaryElement || null, t2 = element || fallbackElement;
+  let t3;
+  $[0] !== elements || $[1] !== t1 || $[2] !== t2 ? (t3 = {
+    version: 0,
+    boundaryElement: t1,
+    element: t2,
+    elements
+  }, $[0] = elements, $[1] = t1, $[2] = t2, $[3] = t3) : t3 = $[3], t0 = t3;
+  const value = t0;
+  let t4;
+  return $[4] !== children || $[5] !== value ? (t4 = /* @__PURE__ */ jsx(PortalContext.Provider, { value, children }), $[4] = children, $[5] = value, $[6] = t4) : t4 = $[6], t4;
+}
+function _temp2() {
+  return null;
+}
+function _temp() {
+  return document.body;
+}
+const emptySubscribe = () => () => {
+};
+function useUnique(value) {
+  const valueRef = useRef(value);
+  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
+}
+function _isEqual(objA, objB) {
+  if (!objA || !objB)
+    return objA === objB;
+  const keysA = Object.keys(objA), keysB = Object.keys(objB);
+  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
+}
 export {
   AnimatedSpinnerIcon,
   Arrow,