@sanity/ui 1.7.9 → 1.7.11

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css,
 import { white as white$1, black as black$1, hues } from '@sanity/color';
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
 import Refractor from 'react-refractor';
-import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate, size as size$2 } from '@floating-ui/react-dom';
+import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from '@floating-ui/react-dom';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 const EMPTY_ARRAY = [];
@@ -3983,6 +3983,7 @@ function avatarArrowStyle() {
       top: "-5px",
       left: "50%",
       transform: "translateX(-6px)",
+      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       "&:not([hidden])": {
         display: "block"
       }
@@ -4019,13 +4020,14 @@ function avatarRootStyle(props) {
       opacity: 0.5
     },
     "&>svg": {
+      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       "&:not([hidden])": {
         display: "block"
       }
     },
     /* &:is(button) */
     '&[data-as="button"]': {
-      "-webkit-font-smoothing": "inherit",
+      WebkitFontSmoothing: "inherit",
       appearance: "none",
       margin: 0,
       padding: 0,
@@ -4033,6 +4035,7 @@ function avatarRootStyle(props) {
       font: "inherit",
       color: "inherit",
       outline: "none",
+      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       "&:focus": {
         boxShadow: focusRingStyle({
           focusRing
@@ -4097,7 +4100,7 @@ function avatarStrokeStyle() {
   return {
     strokeWidth: "3px",
     '[data-status="editing"] &': {
-      strokeSasharray: "2 4",
+      strokeDasharray: "2 4",
       strokeLinecap: "round"
     }
   };
@@ -4514,17 +4517,21 @@ const Flex = forwardRef(function Flex2(props, ref) {
     wrap,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$x, {
-    "data-ui": "Flex",
-    ...restProps,
-    $align: useArrayProp(align),
-    $direction: useArrayProp(direction),
-    $gap: useArrayProp(gap),
-    $justify: useArrayProp(justify),
-    $wrap: useArrayProp(wrap),
-    forwardedAs: as,
-    ref
-  });
+  return (
+    // @ts-expect-error -- some dollar prefixed typings aren't inferred correctly https://github.com/styled-components/styled-components/issues/4062
+    /* @__PURE__ */
+    jsx(Root$x, {
+      "data-ui": "Flex",
+      ...restProps,
+      $align: useArrayProp(align),
+      $direction: useArrayProp(direction),
+      $gap: useArrayProp(gap),
+      $justify: useArrayProp(justify),
+      $wrap: useArrayProp(wrap),
+      forwardedAs: as,
+      ref
+    })
+  );
 });
 var __freeze$w = Object.freeze;
 var __defProp$x = Object.defineProperty;
@@ -6870,28 +6877,11 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       boundary: boundaryElement || void 0,
       fallbackPlacements,
       padding: 4,
-      rootBoundary,
-      mainAxis: false
+      rootBoundary
     }));
     ret.push(offset({
       mainAxis: 3
     }));
-    ret.push(size$2({
-      apply(_ref22) {
-        let {
-          availableWidth,
-          availableHeight,
-          elements
-        } = _ref22;
-        Object.assign(elements.floating.style, {
-          maxWidth: "".concat(availableWidth - 4 * 2, "px"),
-          // the padding is `4px`
-          maxHeight: "".concat(availableHeight - 4 * 2, "px")
-          // the padding is `4px`
-        });
-      }
-    }));
-
     ret.push(shift({
       boundary: boundaryElement || void 0,
       rootBoundary,
@@ -6904,16 +6894,23 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     return ret;
   }, [boundaryElement, fallbackPlacements]);
   const {
-    floatingStyles,
+    x,
+    y,
     placement,
     middlewareData,
     refs,
-    update
+    update,
+    strategy
   } = useFloating({
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate
   });
+  const rootStyle = useMemo(() => ({
+    position: strategy,
+    top: y != null ? y : 0,
+    left: x != null ? x : 0
+  }), [strategy, x, y]);
   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;
@@ -6987,7 +6984,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     "data-ui": "Tooltip",
     ...restProps,
     ref: setFloating,
-    style: floatingStyles,
+    style: rootStyle,
     zOffset,
     children: /* @__PURE__ */jsxs(Card, {
       "data-ui": "Tooltip__card",
@@ -7165,10 +7162,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref23 => {
+  const defaultRenderOption = useCallback(_ref22 => {
     let {
       value: value2
-    } = _ref23;
+    } = _ref22;
     return /* @__PURE__ */jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7621,10 +7618,10 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
     }, itemIndex))
   });
 });
-function dialogStyle(_ref24) {
+function dialogStyle(_ref23) {
   let {
     theme
-  } = _ref24;
+  } = _ref23;
   const color = theme.sanity.color.base;
   return {
     "&:not([hidden])": {
@@ -8686,15 +8683,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
 var _a$6, _b$3, _c$1, _d;
 const keyframe = keyframes(_a$6 || (_a$6 = __template$6(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
 const animation = css(_b$3 || (_b$3 = __template$6(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref25 => {
+const skeletonStyle = css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref24 => {
   let {
     $visible
-  } = _ref25;
+  } = _ref24;
   return $visible ? 1 : 0;
-}, _ref26 => {
+}, _ref25 => {
   let {
     $animated
-  } = _ref26;
+  } = _ref25;
   return $animated ? animation : css(_c$1 || (_c$1 = __template$6(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
@@ -8725,12 +8722,12 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled(Skeleton)(_ref27 => {
+const Root$3 = styled(Skeleton)(_ref26 => {
   let {
     $size,
     $style,
     theme
-  } = _ref27;
+  } = _ref26;
   const {
     media
   } = theme.sanity;
@@ -9077,12 +9074,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.map(_ref28 => {
+            children: state.map(_ref27 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref28;
+              } = _ref27;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
                   opacity: 1,