@sanity/ui 1.8.0 → 1.8.2

package/dist/index.js

@@ -5873,6 +5873,20 @@ const DEFAULT_POPOVER_PADDING = 4;
 const DEFAULT_POPOVER_ARROW_WIDTH = 27;
 const DEFAULT_POPOVER_ARROW_HEIGHT = 11;
 const DEFAULT_POPOVER_MARGINS = [0, 0, 0, 0];
+const DEFAULT_FALLBACK_PLACEMENTS$1 = {
+  top: ["bottom", "left", "right"],
+  "top-start": ["bottom-start", "left-start", "right-start"],
+  "top-end": ["bottom-end", "left-end", "right-end"],
+  bottom: ["top", "left", "right"],
+  "bottom-start": ["top-start", "left-start", "right-start"],
+  "bottom-end": ["top-end", "left-end", "right-end"],
+  left: ["right", "top", "bottom"],
+  "left-start": ["right-start", "top-start", "bottom-start"],
+  "left-end": ["right-end", "top-end", "bottom-end"],
+  right: ["left", "top", "bottom"],
+  "right-start": ["left-start", "top-start", "bottom-start"],
+  "right-end": ["left-end", "top-end", "bottom-end"]
+};
 function size(options) {
   const {
     apply,
@@ -6072,7 +6086,7 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
 }));
 PopoverCard.displayName = "PopoverCard";
 const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const theme = useTheme();
   const boundaryElementContext = useBoundaryElement();
   const {
@@ -6083,9 +6097,9 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     constrainSize = false,
     content,
     disabled,
-    fallbackPlacements,
+    fallbackPlacements = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS$1[(_a = props.placement) != null ? _a : "bottom"],
     matchReferenceWidth,
-    floatingBoundary = (_a = props.boundaryElement) != null ? _a : boundaryElementContext.element,
+    floatingBoundary = (_c = props.boundaryElement) != null ? _c : boundaryElementContext.element,
     open,
     overflow = "hidden",
     padding: paddingProp,
@@ -6093,17 +6107,17 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     portal,
     preventOverflow = true,
     radius: radiusProp = 3,
-    referenceBoundary = (_b = props.boundaryElement) != null ? _b : boundaryElementContext.element,
+    referenceBoundary = (_d = props.boundaryElement) != null ? _d : boundaryElementContext.element,
     referenceElement,
     scheme,
     shadow: shadowProp = 3,
     tone = "inherit",
     width: widthProp = "auto",
-    zOffset: zOffsetProp = (_c = theme.sanity.layer) == null ? void 0 : _c.popover.zOffset,
+    zOffset: zOffsetProp = (_e = theme.sanity.layer) == null ? void 0 : _e.popover.zOffset,
     updateRef,
     ...restProps
   } = props;
-  const boundarySize = (_d = useElementSize(boundaryElement)) == null ? void 0 : _d.border;
+  const boundarySize = (_f = useElementSize(boundaryElement)) == null ? void 0 : _f.border;
   const padding = useArrayProp(paddingProp);
   const radius = useArrayProp(radiusProp);
   const shadow = useArrayProp(shadowProp);
@@ -6222,9 +6236,9 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     placement: placementProp,
     whileElementsMounted: reactDom$1.autoUpdate
   });
-  const referenceHidden = (_e = middlewareData.hide) == null ? void 0 : _e.referenceHidden;
-  const arrowX = (_f = middlewareData.arrow) == null ? void 0 : _f.x;
-  const arrowY = (_g = middlewareData.arrow) == null ? void 0 : _g.y;
+  const referenceHidden = (_g = middlewareData.hide) == null ? void 0 : _g.referenceHidden;
+  const arrowX = (_h = middlewareData.arrow) == null ? void 0 : _h.x;
+  const arrowY = (_i = middlewareData.arrow) == null ? void 0 : _i.y;
   const setArrow = react.useCallback(arrowEl => {
     arrowRef.current = arrowEl;
   }, []);
@@ -6681,6 +6695,11 @@ const Presentation = styled__default.default.span(responsiveRadiusStyle, textInp
 const LeftBox = styled__default.default(Box)(_d$3 || (_d$3 = __template$g(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
 const RightBox = styled__default.default(Box)(_e$1 || (_e$1 = __template$g(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 const RightCard = styled__default.default(Card)(_f$1 || (_f$1 = __template$g(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const TextInputClearButton = styled__default.default(Button)({
+  "&:not([hidden])": {
+    display: "block"
+  }
+});
 const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
   const {
     border = true,
@@ -6776,7 +6795,7 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
     padding: clearButtonBoxPadding,
     style: CLEAR_BUTTON_BOX_STYLE,
     tone: customValidity ? "critical" : "inherit",
-    children: /* @__PURE__ */jsxRuntime.jsx(Button, {
+    children: /* @__PURE__ */jsxRuntime.jsx(TextInputClearButton, {
       "aria-label": "Clear",
       "data-qa": "clear-button",
       fontSize,
@@ -6841,6 +6860,20 @@ function useDelayedState(initialState) {
   }, []);
   return [state, onStateChange];
 }
+const DEFAULT_FALLBACK_PLACEMENTS = {
+  top: ["bottom", "left", "right"],
+  "top-start": ["bottom-start", "left-start", "right-start"],
+  "top-end": ["bottom-end", "left-end", "right-end"],
+  bottom: ["top", "left", "right"],
+  "bottom-start": ["top-start", "left-start", "right-start"],
+  "bottom-end": ["top-end", "left-end", "right-end"],
+  left: ["right", "top", "bottom"],
+  "left-start": ["right-start", "top-start", "bottom-start"],
+  "left-end": ["right-end", "top-end", "bottom-end"],
+  right: ["left", "top", "bottom"],
+  "right-start": ["left-start", "top-start", "bottom-start"],
+  "right-end": ["left-end", "top-end", "bottom-end"]
+};
 var __freeze$f = Object.freeze;
 var __defProp$f = Object.defineProperty;
 var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
@@ -6912,7 +6945,7 @@ var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
 var _a$e;
 const Root$a = styled__default.default(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n"])));
 const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
-  var _a2, _b, _c;
+  var _a2, _b, _c, _d, _e;
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
   const {
@@ -6920,13 +6953,13 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp,
+    fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a2 = props.placement) != null ? _a2 : "bottom"],
     padding,
     placement: placementProp = "bottom",
     portal,
     scheme,
     shadow = 2,
-    zOffset = (_a2 = theme.sanity.layer) == null ? void 0 : _a2.tooltip.zOffset,
+    zOffset = (_c = theme.sanity.layer) == null ? void 0 : _c.tooltip.zOffset,
     delay,
     ...restProps
   } = props;
@@ -6986,8 +7019,8 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     whileElementsMounted: reactDom$1.autoUpdate
   });
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
-  const arrowX = (_b = middlewareData.arrow) == null ? void 0 : _b.x;
-  const arrowY = (_c = middlewareData.arrow) == null ? void 0 : _c.y;
+  const arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x;
+  const arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y;
   const arrowStyle = react.useMemo(() => {
     const style = {
       left: arrowX !== null ? arrowX : void 0,