@sanity/ui 1.7.11 → 1.8.0

package/dist/index.cjs.mjs

@@ -57,6 +57,8 @@ export const ThemeProvider = cjs.ThemeProvider;
 export const Toast = cjs.Toast;
 export const ToastProvider = cjs.ToastProvider;
 export const Tooltip = cjs.Tooltip;
+export const TooltipDelayGroupContext = cjs.TooltipDelayGroupContext;
+export const TooltipDelayGroupProvider = cjs.TooltipDelayGroupProvider;
 export const Tree = cjs.Tree;
 export const TreeItem = cjs.TreeItem;
 export const VirtualList = cjs.VirtualList;
@@ -115,5 +117,6 @@ export const usePrefersReducedMotion = cjs.usePrefersReducedMotion;
 export const useRootTheme = cjs.useRootTheme;
 export const useTheme = cjs.useTheme;
 export const useToast = cjs.useToast;
+export const useTooltipDelayGroup = cjs.useTooltipDelayGroup;
 export const useTree = cjs.useTree;
 

package/dist/index.d.ts

@@ -627,6 +627,16 @@ export declare function createColorTheme(
 /** @internal */
 export declare type CSSObject = StyledObject<any>
 
+/**
+ * @beta
+ */
+export declare type Delay =
+  | number
+  | Partial<{
+      open: number
+      close: number
+    }>
+
 /**
  * @public
  */
@@ -2990,6 +3000,47 @@ export declare const Tooltip: ForwardRefExoticComponent<
     RefAttributes<HTMLDivElement>
 >
 
+/**
+ * @beta
+ */
+export declare const TooltipDelayGroupContext: React.Context<TooltipDelayGroupContextValue | null>
+
+/**
+ * @beta
+ */
+export declare interface TooltipDelayGroupContextValue {
+  isGroupActive: boolean
+  setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void
+  setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void
+  openDelay: number
+  closeDelay: number
+  openTooltipId: string | null
+}
+
+/**
+ * @public
+ * Provides context for a group of tooltip elements that should share a delay
+ * which temporarily becomes 1 ms after the first floating element of the group opens.
+ */
+export declare function TooltipDelayGroupProvider(
+  props: TooltipDelayGroupProviderProps,
+): React.ReactElement
+
+/**
+ * @public
+ * */
+export declare interface TooltipDelayGroupProviderProps {
+  children?: React.ReactNode
+  /**
+   * @public Handles the delays to open or close a tooltip inside a group
+   *
+   * If only a `number` is passed, it will be used for both opening and closing.
+   *
+   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+   */
+  delay: Delay
+}
+
 /**
  * @public
  */
@@ -3006,6 +3057,14 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
   portal?: boolean | string
   scheme?: ThemeColorSchemeKey
   shadow?: number | number[]
+  /**
+   * @public Adds a delay to open or close the tooltip.  Defaults to 0.
+   *
+   * If only a `number` is passed, it will be used for both opening and closing.
+   *
+   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+   */
+  delay?: Delay
 }
 
 /**
@@ -3189,6 +3248,11 @@ export declare function useTheme(): Theme
  */
 export declare function useToast(): ToastContextValue
 
+/**
+ * @beta
+ */
+export declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null
+
 /**
  * @beta
  */

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 } from '@floating-ui/react-dom';
+import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate, size as size$2 } from '@floating-ui/react-dom';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 const EMPTY_ARRAY = [];
@@ -3061,9 +3061,9 @@ function getGlobalScope() {
   throw new Error("@sanity/ui: could not locate global scope");
 }
 const globalScope = getGlobalScope();
-const key$7 = Symbol.for("@sanity/ui/context/theme");
-globalScope[key$7] = globalScope[key$7] || createContext(null);
-const ThemeContext = globalScope[key$7];
+const key$8 = Symbol.for("@sanity/ui/context/theme");
+globalScope[key$8] = globalScope[key$8] || createContext(null);
+const ThemeContext = globalScope[key$8];
 function ThemeProvider(props) {
   const parentTheme = useContext(ThemeContext);
   const {
@@ -5256,9 +5256,9 @@ const KBD = forwardRef(function KBD2(props, ref) {
     })
   });
 });
-const key$6 = Symbol.for("@sanity/ui/context/boundaryElement");
-globalScope[key$6] = globalScope[key$6] || createContext(null);
-const BoundaryElementContext = globalScope[key$6];
+const key$7 = Symbol.for("@sanity/ui/context/boundaryElement");
+globalScope[key$7] = globalScope[key$7] || createContext(null);
+const BoundaryElementContext = globalScope[key$7];
 function BoundaryElementProvider(props) {
   const {
     children,
@@ -5387,9 +5387,9 @@ function getLayerContext(contextValue) {
   }
   throw new Error("could not get layer context");
 }
-const key$5 = Symbol.for("@sanity/ui/context/layer");
-globalScope[key$5] = globalScope[key$5] || createContext(null);
-const LayerContext = globalScope[key$5];
+const key$6 = Symbol.for("@sanity/ui/context/layer");
+globalScope[key$6] = globalScope[key$6] || createContext(null);
+const LayerContext = globalScope[key$6];
 function useLayer() {
   const value = useContext(LayerContext);
   if (!value) {
@@ -5626,7 +5626,7 @@ const Layer = forwardRef(function Layer2(props, ref) {
     })
   });
 });
-const key$4 = Symbol.for("@sanity/ui/context/portal");
+const key$5 = Symbol.for("@sanity/ui/context/portal");
 const elementKey = Symbol.for("@sanity/ui/context/portal/element");
 globalScope[elementKey] = null;
 const defaultContextValue = {
@@ -5645,8 +5645,8 @@ const defaultContextValue = {
     return globalScope[elementKey];
   }
 };
-globalScope[key$4] = globalScope[key$4] || createContext(defaultContextValue);
-const PortalContext = globalScope[key$4];
+globalScope[key$5] = globalScope[key$5] || createContext(defaultContextValue);
+const PortalContext = globalScope[key$5];
 function usePortal() {
   const value = useContext(PortalContext);
   if (!value) {
@@ -6812,6 +6812,22 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     }), suffixNode]
   });
 });
+function useDelayedState(initialState) {
+  const [state, setState] = useState(initialState);
+  const delayedAction = useRef();
+  const onStateChange = useCallback((nextState, delay) => {
+    const action = () => {
+      setState(nextState);
+    };
+    if (delayedAction.current) {
+      clearTimeout(delayedAction.current);
+      delayedAction.current = void 0;
+    }
+    if (!delay) return action();
+    delayedAction.current = setTimeout(action, delay);
+  }, []);
+  return [state, onStateChange];
+}
 var __freeze$f = Object.freeze;
 var __defProp$f = Object.defineProperty;
 var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
@@ -6841,6 +6857,40 @@ const TooltipArrow = forwardRef(function TooltipArrow2(props, ref) {
     })
   });
 });
+const key$4 = Symbol.for("@sanity/ui/context/tooltipDelayGroup");
+globalScope[key$4] = globalScope[key$4] || createContext(null);
+const TooltipDelayGroupContext = globalScope[key$4];
+function useTooltipDelayGroup() {
+  const value = useContext(TooltipDelayGroupContext);
+  return value;
+}
+function TooltipDelayGroupProvider(props) {
+  const {
+    children,
+    delay
+  } = props;
+  const [isGroupActive, setIsGroupActive] = useDelayedState(false);
+  const [openTooltipId, setOpenTooltipId] = useDelayedState(null);
+  const isInsideContext = useTooltipDelayGroup();
+  if (isInsideContext) {
+    throw new Error("TooltipDelayGroupProvider cannot be nested inside another TooltipDelayGroupProvider");
+  }
+  const openDelay = typeof delay === "number" ? delay : (delay == null ? void 0 : delay.open) || 0;
+  const closeDelay = typeof delay === "number" ? delay : (delay == null ? void 0 : delay.close) || 0;
+  const value = useMemo(() => ({
+    isGroupActive,
+    setIsGroupActive,
+    openTooltipId,
+    setOpenTooltipId,
+    // When the group is active, we want the next tooltip to open immediately.
+    openDelay: isGroupActive ? 1 : openDelay,
+    closeDelay
+  }), [closeDelay, isGroupActive, openDelay, openTooltipId, setIsGroupActive, setOpenTooltipId]);
+  return /* @__PURE__ */jsx(TooltipDelayGroupContext.Provider, {
+    value,
+    children
+  });
+}
 var __freeze$e = Object.freeze;
 var __defProp$e = Object.defineProperty;
 var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
@@ -6864,6 +6914,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     scheme,
     shadow = 2,
     zOffset = (_a2 = theme.sanity.layer) == null ? void 0 : _a2.tooltip.zOffset,
+    delay,
     ...restProps
   } = props;
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
@@ -6877,11 +6928,28 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       boundary: boundaryElement || void 0,
       fallbackPlacements,
       padding: 4,
-      rootBoundary
+      rootBoundary,
+      mainAxis: false
     }));
     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,
@@ -6894,23 +6962,16 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     return ret;
   }, [boundaryElement, fallbackPlacements]);
   const {
-    x,
-    y,
+    floatingStyles,
     placement,
     middlewareData,
     refs,
-    update,
-    strategy
+    update
   } = 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;
@@ -6924,18 +6985,41 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     if (staticSide) style[staticSide] = -15;
     return style;
   }, [arrowX, arrowY, staticSide]);
-  const [isOpen, setIsOpen] = useState(false);
-  const handleBlur = useCallback(() => setIsOpen(false), []);
-  const handleFocus = useCallback(() => setIsOpen(true), []);
-  const handleMouseEnter = useCallback(() => setIsOpen(true), []);
-  const handleMouseLeave = useCallback(() => setIsOpen(false), []);
+  const tooltipId = useId();
+  const [isOpen, setIsOpen] = useDelayedState(false);
+  const delayGroupContext = useTooltipDelayGroup();
+  const showTooltip = isOpen || (delayGroupContext == null ? void 0 : delayGroupContext.openTooltipId) === tooltipId;
+  const isInsideGroup = delayGroupContext !== null;
+  const openDelayProp = typeof delay === "number" ? delay : (delay == null ? void 0 : delay.open) || 0;
+  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 => {
+    if (isInsideGroup) {
+      if (open) {
+        delayGroupContext.setIsGroupActive(open, openDelay);
+        delayGroupContext.setOpenTooltipId(tooltipId, openDelay);
+      } else {
+        const minimumGroupDeactivateDelay = 200;
+        const groupDeactivateDelay = closeDelay > minimumGroupDeactivateDelay ? closeDelay : minimumGroupDeactivateDelay;
+        delayGroupContext.setIsGroupActive(open, groupDeactivateDelay);
+        delayGroupContext.setOpenTooltipId(null, closeDelay);
+      }
+    } else {
+      setIsOpen(open, open ? openDelay : closeDelay);
+    }
+  }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]);
+  const handleBlur = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
+  const handleFocus = useCallback(() => handleIsOpenChange(true), [handleIsOpenChange]);
+  const handleMouseEnter = useCallback(() => handleIsOpenChange(true), [handleIsOpenChange]);
+  const handleMouseLeave = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
   useEffect(() => {
     if (!isOpen) return;
     function handleWindowMouseMove(event) {
       if (!referenceElement) return;
       const isHoveringReference = referenceElement === event.target || event.target instanceof Node && referenceElement.contains(event.target);
       if (!isHoveringReference) {
-        setIsOpen(false);
+        handleIsOpenChange(false);
         window.removeEventListener("mousemove", handleWindowMouseMove);
       }
     }
@@ -6943,13 +7027,13 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     return () => {
       window.removeEventListener("mousemove", handleWindowMouseMove);
     };
-  }, [isOpen, referenceElement]);
+  }, [isOpen, referenceElement, handleIsOpenChange]);
   useEffect(() => {
-    if (disabled) setIsOpen(false);
-  }, [disabled]);
+    if (disabled) handleIsOpenChange(false);
+  }, [disabled, handleIsOpenChange]);
   useEffect(() => {
-    if (!content) setIsOpen(false);
-  }, [content]);
+    if (!content) handleIsOpenChange(false);
+  }, [content, handleIsOpenChange]);
   useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]);
   const setArrow = useCallback(arrowEl => {
     arrowRef.current = arrowEl;
@@ -6984,7 +7068,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     "data-ui": "Tooltip",
     ...restProps,
     ref: setFloating,
-    style: rootStyle,
+    style: floatingStyles,
     zOffset,
     children: /* @__PURE__ */jsxs(Card, {
       "data-ui": "Tooltip__card",
@@ -7000,7 +7084,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     })
   });
   return /* @__PURE__ */jsxs(Fragment, {
-    children: [child, isOpen && /* @__PURE__ */jsx(Fragment, {
+    children: [child, showTooltip && /* @__PURE__ */jsx(Fragment, {
       children: portal ? /* @__PURE__ */jsx(Portal, {
         __unstable_name: typeof portal === "string" ? portal : void 0,
         children: root
@@ -7162,10 +7246,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref22 => {
+  const defaultRenderOption = useCallback(_ref23 => {
     let {
       value: value2
-    } = _ref22;
+    } = _ref23;
     return /* @__PURE__ */jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7618,10 +7702,10 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
     }, itemIndex))
   });
 });
-function dialogStyle(_ref23) {
+function dialogStyle(_ref24) {
   let {
     theme
-  } = _ref23;
+  } = _ref24;
   const color = theme.sanity.color.base;
   return {
     "&:not([hidden])": {
@@ -8683,15 +8767,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"])), _ref24 => {
+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 => {
   let {
     $visible
-  } = _ref24;
+  } = _ref25;
   return $visible ? 1 : 0;
-}, _ref25 => {
+}, _ref26 => {
   let {
     $animated
-  } = _ref25;
+  } = _ref26;
   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);
@@ -8722,12 +8806,12 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled(Skeleton)(_ref26 => {
+const Root$3 = styled(Skeleton)(_ref27 => {
   let {
     $size,
     $style,
     theme
-  } = _ref26;
+  } = _ref27;
   const {
     media
   } = theme.sanity;
@@ -9074,12 +9158,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.map(_ref27 => {
+            children: state.map(_ref28 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref27;
+              } = _ref28;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
                   opacity: 1,
@@ -9579,5 +9663,5 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
 });
-export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTree };
+export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTooltipDelayGroup, useTree };
 //# sourceMappingURL=index.esm.js.map