@sanity/ui 1.8.0 → 1.8.2

package/dist/index.esm.js

@@ -5860,6 +5860,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,
@@ -6059,7 +6073,7 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
 }));
 PopoverCard.displayName = "PopoverCard";
 const Popover = memo(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 {
@@ -6070,9 +6084,9 @@ const Popover = memo(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,
@@ -6080,17 +6094,17 @@ const Popover = memo(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);
@@ -6209,9 +6223,9 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     placement: placementProp,
     whileElementsMounted: 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 = useCallback(arrowEl => {
     arrowRef.current = arrowEl;
   }, []);
@@ -6668,6 +6682,11 @@ const Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationS
 const LeftBox = styled(Box)(_d$3 || (_d$3 = __template$g(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
 const RightBox = styled(Box)(_e$1 || (_e$1 = __template$g(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 const RightCard = styled(Card)(_f$1 || (_f$1 = __template$g(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const TextInputClearButton = styled(Button)({
+  "&:not([hidden])": {
+    display: "block"
+  }
+});
 const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
   const {
     border = true,
@@ -6763,7 +6782,7 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     padding: clearButtonBoxPadding,
     style: CLEAR_BUTTON_BOX_STYLE,
     tone: customValidity ? "critical" : "inherit",
-    children: /* @__PURE__ */jsx(Button, {
+    children: /* @__PURE__ */jsx(TextInputClearButton, {
       "aria-label": "Clear",
       "data-qa": "clear-button",
       fontSize,
@@ -6828,6 +6847,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", {
@@ -6899,7 +6932,7 @@ var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
 var _a$e;
 const Root$a = styled(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n"])));
 const Tooltip = forwardRef(function Tooltip2(props, ref) {
-  var _a2, _b, _c;
+  var _a2, _b, _c, _d, _e;
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
   const {
@@ -6907,13 +6940,13 @@ const Tooltip = 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;
@@ -6973,8 +7006,8 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     whileElementsMounted: 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 = useMemo(() => {
     const style = {
       left: arrowX !== null ? arrowX : void 0,