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

package/dist/_chunks-cjs/_visual-editing.cjs

@@ -540,7 +540,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 react.useContext(CardContext);
+  const card = react.useContext(CardContext);
+  if (!card)
+    throw new Error("useCard(): missing context value");
+  return card;
 }
 const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`), elementMap = globalScope;
 elementMap[elementKey] = null;
@@ -566,11 +569,10 @@ function Portal(props) {
   } = props, card = useCard(), portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
   if (!portalElement)
     return null;
-  const t0 = card?.scheme || "light";
+  let t0;
+  $[0] !== card.scheme || $[1] !== children ? (t0 = /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: "transparent", scheme: card.scheme, children }), $[0] = card.scheme, $[1] = children, $[2] = t0) : t0 = $[2];
   let t1;
-  $[0] !== children || $[1] !== t0 ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: "transparent", scheme: t0, children }), $[0] = children, $[1] = t0, $[2] = t1) : t1 = $[2];
-  let t2;
-  return $[3] !== portalElement || $[4] !== t1 ? (t2 = reactDom.createPortal(t1, portalElement), $[3] = portalElement, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
+  return $[3] !== portalElement || $[4] !== t0 ? (t1 = reactDom.createPortal(t0, portalElement), $[3] = portalElement, $[4] = t0, $[5] = t1) : t1 = $[5], t1;
 }
 function getLayerContext(contextValue) {
   if (!isRecord(contextValue) || contextValue.version !== 0)
@@ -790,7 +792,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 = react.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 = css.card({
     className,
@@ -806,7 +808,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CompatProvider, { scheme: t18, tone: t19, children: node }), $[33] = CompatProvider, $[34] = node, $[35] = t18, $[36] = t19, $[37] = t20) : t20 = $[37], t20;
   }
@@ -1087,6 +1089,7 @@ function Popover(props) {
     overflow = "hidden",
     padding,
     placement: placementProp = "bottom",
+    placementStrategy = "flip",
     portal,
     preventOverflow = !0,
     radius = 3,
@@ -1104,12 +1107,14 @@ function Popover(props) {
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const referenceWidthRef = react.useRef(void 0), middleware = react.useMemo(() => {
     const ret = [];
-    return (constrainSize || preventOverflow) && ret.push(reactDom$1.flip({
+    return (constrainSize || preventOverflow) && (placementStrategy === "autoPlacement" ? ret.push(reactDom$1.autoPlacement({
+      allowedPlacements: [placementProp].concat(fallbackPlacements)
+    })) : ret.push(reactDom$1.flip({
       boundary: floatingBoundary || void 0,
       fallbackPlacements,
       padding: DEFAULT_POPOVER_PADDING,
       rootBoundary
-    })), ret.push(reactDom$1.offset({
+    }))), ret.push(reactDom$1.offset({
       mainAxis: DEFAULT_POPOVER_DISTANCE
     })), (constrainSize || matchReferenceWidth) && ret.push(size({
       apply({
@@ -1135,7 +1140,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,
@@ -1170,7 +1175,7 @@ function Popover(props) {
     /* @__PURE__ */ jsxRuntime.jsx(PopoverLayer, { ...rest, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: css.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__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: tone === "inherit" ? card?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_1 }) }) : node_1);
+  ] }), children = open && (portal ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: tone === "inherit" ? card.tone : tone, scheme: scheme ?? "light", children: node_1 }) }) : node_1);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
     child
@@ -1989,44 +1994,6 @@ function usePrefersDark(t0) {
 function _temp$1() {
   return !1;
 }
-function PortalProvider(props) {
-  const $ = compilerRuntime.c(7), {
-    boundaryElement,
-    children,
-    element,
-    __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), fallbackElement = react.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__ */ jsxRuntime.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 = react.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 $ = compilerRuntime.c(3), [state, setState] = react.useState(initialState), delayedAction = react.useRef(void 0);
   let t0;
@@ -2239,7 +2206,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__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: tone === "inherit" ? card?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
+  }, tone, zOffset, children: content }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: tone === "inherit" ? card.tone : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
     child
@@ -2269,6 +2236,44 @@ function useCloseOnMouseLeave(t0) {
   let t3;
   $[7] !== isInsideGroup || $[8] !== showTooltip ? (t3 = [isInsideGroup, showTooltip], $[7] = isInsideGroup, $[8] = showTooltip, $[9] = t3) : t3 = $[9], react.useEffect(t2, t3);
 }
+function PortalProvider(props) {
+  const $ = compilerRuntime.c(7), {
+    boundaryElement,
+    children,
+    element,
+    __unstable_elements: elementsProp
+  } = props, elements = useUnique(elementsProp), fallbackElement = react.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__ */ jsxRuntime.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 = react.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]);
+}
 exports.AnimatedSpinnerIcon = AnimatedSpinnerIcon;
 exports.Arrow = Arrow;
 exports.BoundaryElementContext = BoundaryElementContext;