@sanity/ui 2.15.17 → 2.16.0

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

@@ -5,7 +5,7 @@ import { useState, useEffect, useDebugValue, useSyncExternalStore, createContext
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
 import ReactIs, { isValidElementType } from "react-is";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon } from "@sanity/icons";
-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 { ResizeObserver } from "@juggle/resize-observer";
 import { createPortal } from "react-dom";
@@ -2702,7 +2702,7 @@ const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledInline",
   componentId: "sc-1pkiy6j-0"
 })(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
-  const $ = c(12);
+  const $ = c(13);
   let as, childrenProp, restProps, space;
   $[0] !== props ? ({
     as,
@@ -2712,9 +2712,9 @@ const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
   } = props, $[0] = props, $[1] = as, $[2] = childrenProp, $[3] = restProps, $[4] = space) : (as = $[1], childrenProp = $[2], restProps = $[3], space = $[4]);
   let t0, t1;
   $[5] !== childrenProp ? (t1 = Children.map(childrenProp, _temp$4), $[5] = childrenProp, $[6] = t1) : t1 = $[6], t0 = t1;
-  const children = t0, t2 = useArrayProp(space);
-  let t3;
-  return $[7] !== as || $[8] !== children || $[9] !== restProps || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledInline, { "data-ui": "Inline", ...restProps, $space: t2, forwardedAs: as, ref, children }), $[7] = as, $[8] = children, $[9] = restProps, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
+  const children = t0, t2 = useArrayProp(space), t3 = ref;
+  let t4;
+  return $[7] !== as || $[8] !== children || $[9] !== restProps || $[10] !== t2 || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsx(StyledInline, { "data-ui": "Inline", ...restProps, $space: t2, forwardedAs: as, ref: t3, children }), $[7] = as, $[8] = children, $[9] = restProps, $[10] = t2, $[11] = t3, $[12] = t4) : t4 = $[12], t4;
 });
 Inline.displayName = "ForwardRef(Inline)";
 function _temp$4(child) {
@@ -3538,6 +3538,7 @@ const ViewportOverlay = () => {
     overflow = "hidden",
     padding: paddingProp,
     placement: placementProp = "bottom",
+    placementStrategy = "flip",
     portal,
     preventOverflow = !0,
     radius: radiusProp = 3,
@@ -3576,12 +3577,14 @@ const ViewportOverlay = () => {
   }, [width, matchReferenceWidth, maxWidth, open]);
   const 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({
@@ -3609,7 +3612,7 @@ const ViewportOverlay = () => {
       padding: DEFAULT_POPOVER_PADDING,
       strategy: "referenceHidden"
     })), ret;
-  }, [animate, arrowProp, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
+  }, [animate, arrowProp, constrainSize, fallbackPlacements, placementProp, placementStrategy, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
     x,
     y,
     middlewareData,