@sanity/ui 1.8.1 → 1.8.3

package/dist/index.esm.js

@@ -4748,7 +4748,7 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return css(_b$i || (_b$i = __template$t(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_a$t || (_a$t = __template$t(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
+  return css(_b$i || (_b$i = __template$t(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_a$t || (_a$t = __template$t(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
 }
 function cardColorStyle(props) {
   var _a2, _b2;
@@ -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;
   }, []);
@@ -6351,7 +6365,7 @@ var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", {
 }));
 var _a$j, _b$c, _c$7, _d$5;
 function rootStyle() {
-  return css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    width: -webkit-fill-available;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function inputBaseStyle(props) {
   const {
@@ -6833,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", {
@@ -6904,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 {
@@ -6912,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;
@@ -6978,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,
@@ -8488,7 +8516,7 @@ var __template$7 = (cooked, raw) => __freeze$7(__defProp$7(cooked, "raw", {
 }));
 var _a$7, _b$4;
 function selectableBaseStyle() {
-  return css(_a$7 || (_a$7 = __template$7(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
+  return css(_a$7 || (_a$7 = __template$7(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
 }
 function selectableColorStyle(props) {
   var _a2, _b2;