@sanity/ui 1.8.3 → 1.9.1

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 = [];
@@ -6847,6 +6847,7 @@ function useDelayedState(initialState) {
   }, []);
   return [state, onStateChange];
 }
+const DEFAULT_TOOLTIP_PADDING = 4;
 const DEFAULT_FALLBACK_PLACEMENTS = {
   top: ["bottom", "left", "right"],
   "top-start": ["bottom-start", "left-start", "right-start"],
@@ -6930,7 +6931,7 @@ var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
   value: __freeze$e(raw || cooked.slice())
 }));
 var _a$e;
-const Root$a = styled(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n"])));
+const Root$a = styled(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n  // Note that 100vw doesn't exclude system scrollbars.\n  // This should be sufficiently small enough to not trigger overflow-x scrollbars when portalled.\n  max-width: calc(100vw - ", "px);\n"])), DEFAULT_TOOLTIP_PADDING * 10);
 const Tooltip = forwardRef(function Tooltip2(props, ref) {
   var _a2, _b, _c, _d, _e;
   const boundaryElementContext = useBoundaryElement();
@@ -6958,42 +6959,25 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   const middleware = useMemo(() => {
     const ret = [];
     ret.push(flip({
-      boundary: boundaryElement || void 0,
+      boundary: portal ? void 0 : boundaryElement || void 0,
       fallbackPlacements,
-      padding: 4,
-      rootBoundary,
-      mainAxis: false
+      padding: DEFAULT_TOOLTIP_PADDING,
+      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,
+      boundary: portal ? void 0 : boundaryElement || void 0,
       rootBoundary,
-      padding: 4
+      padding: DEFAULT_TOOLTIP_PADDING
     }));
     ret.push(arrow({
       element: arrowRef,
       padding: 2
     }));
     return ret;
-  }, [boundaryElement, fallbackPlacements]);
+  }, [boundaryElement, fallbackPlacements, portal]);
   const {
     floatingStyles,
     placement,
@@ -7027,19 +7011,21 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   const closeDelayProp = typeof delay === "number" ? delay : (delay == null ? void 0 : delay.close) || 0;
   const openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp;
   const closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp;
-  const handleIsOpenChange = useCallback(open => {
+  const handleIsOpenChange = useCallback((open, immediate) => {
     if (isInsideGroup) {
       if (open) {
-        delayGroupContext.setIsGroupActive(open, openDelay);
-        delayGroupContext.setOpenTooltipId(tooltipId, openDelay);
+        const groupedOpenDelay = immediate ? 0 : openDelay;
+        delayGroupContext.setIsGroupActive(open, groupedOpenDelay);
+        delayGroupContext.setOpenTooltipId(tooltipId, groupedOpenDelay);
       } else {
         const minimumGroupDeactivateDelay = 200;
         const groupDeactivateDelay = closeDelay > minimumGroupDeactivateDelay ? closeDelay : minimumGroupDeactivateDelay;
         delayGroupContext.setIsGroupActive(open, groupDeactivateDelay);
-        delayGroupContext.setOpenTooltipId(null, closeDelay);
+        delayGroupContext.setOpenTooltipId(null, immediate ? 0 : closeDelay);
       }
     } else {
-      setIsOpen(open, open ? openDelay : closeDelay);
+      const standaloneDelay = immediate ? 0 : open ? openDelay : closeDelay;
+      setIsOpen(open, standaloneDelay);
     }
   }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]);
   const handleBlur = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
@@ -7068,6 +7054,18 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     if (!content) handleIsOpenChange(false);
   }, [content, handleIsOpenChange]);
   useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]);
+  useEffect(() => {
+    if (!showTooltip) return;
+    function handleWindowKeyDown(event) {
+      if (event.key === "Escape") {
+        handleIsOpenChange(false, true);
+      }
+    }
+    window.addEventListener("keydown", handleWindowKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleWindowKeyDown);
+    };
+  }, [handleIsOpenChange, showTooltip]);
   const setArrow = useCallback(arrowEl => {
     arrowRef.current = arrowEl;
     update();
@@ -7279,10 +7277,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,
@@ -7735,10 +7733,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])": {
@@ -8800,15 +8798,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);
@@ -8839,12 +8837,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;
@@ -9191,12 +9189,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,