@sanity/ui 1.7.12 → 1.8.1

package/dist/index.js

@@ -3074,9 +3074,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] || react.createContext(null);
-const ThemeContext = globalScope[key$7];
+const key$8 = Symbol.for("@sanity/ui/context/theme");
+globalScope[key$8] = globalScope[key$8] || react.createContext(null);
+const ThemeContext = globalScope[key$8];
 function ThemeProvider(props) {
   const parentTheme = react.useContext(ThemeContext);
   const {
@@ -5269,9 +5269,9 @@ const KBD = react.forwardRef(function KBD2(props, ref) {
     })
   });
 });
-const key$6 = Symbol.for("@sanity/ui/context/boundaryElement");
-globalScope[key$6] = globalScope[key$6] || react.createContext(null);
-const BoundaryElementContext = globalScope[key$6];
+const key$7 = Symbol.for("@sanity/ui/context/boundaryElement");
+globalScope[key$7] = globalScope[key$7] || react.createContext(null);
+const BoundaryElementContext = globalScope[key$7];
 function BoundaryElementProvider(props) {
   const {
     children,
@@ -5400,9 +5400,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] || react.createContext(null);
-const LayerContext = globalScope[key$5];
+const key$6 = Symbol.for("@sanity/ui/context/layer");
+globalScope[key$6] = globalScope[key$6] || react.createContext(null);
+const LayerContext = globalScope[key$6];
 function useLayer() {
   const value = react.useContext(LayerContext);
   if (!value) {
@@ -5639,7 +5639,7 @@ const Layer = react.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 = {
@@ -5658,8 +5658,8 @@ const defaultContextValue = {
     return globalScope[elementKey];
   }
 };
-globalScope[key$4] = globalScope[key$4] || react.createContext(defaultContextValue);
-const PortalContext = globalScope[key$4];
+globalScope[key$5] = globalScope[key$5] || react.createContext(defaultContextValue);
+const PortalContext = globalScope[key$5];
 function usePortal() {
   const value = react.useContext(PortalContext);
   if (!value) {
@@ -6681,6 +6681,11 @@ const Presentation = styled__default.default.span(responsiveRadiusStyle, textInp
 const LeftBox = styled__default.default(Box)(_d$3 || (_d$3 = __template$g(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
 const RightBox = styled__default.default(Box)(_e$1 || (_e$1 = __template$g(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 const RightCard = styled__default.default(Card)(_f$1 || (_f$1 = __template$g(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const TextInputClearButton = styled__default.default(Button)({
+  "&:not([hidden])": {
+    display: "block"
+  }
+});
 const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
   const {
     border = true,
@@ -6776,7 +6781,7 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
     padding: clearButtonBoxPadding,
     style: CLEAR_BUTTON_BOX_STYLE,
     tone: customValidity ? "critical" : "inherit",
-    children: /* @__PURE__ */jsxRuntime.jsx(Button, {
+    children: /* @__PURE__ */jsxRuntime.jsx(TextInputClearButton, {
       "aria-label": "Clear",
       "data-qa": "clear-button",
       fontSize,
@@ -6825,6 +6830,22 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
     }), suffixNode]
   });
 });
+function useDelayedState(initialState) {
+  const [state, setState] = react.useState(initialState);
+  const delayedAction = react.useRef();
+  const onStateChange = react.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", {
@@ -6854,6 +6875,40 @@ const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
     })
   });
 });
+const key$4 = Symbol.for("@sanity/ui/context/tooltipDelayGroup");
+globalScope[key$4] = globalScope[key$4] || react.createContext(null);
+const TooltipDelayGroupContext = globalScope[key$4];
+function useTooltipDelayGroup() {
+  const value = react.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 = react.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__ */jsxRuntime.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", {
@@ -6877,6 +6932,7 @@ const Tooltip = react.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);
@@ -6947,18 +7003,41 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     if (staticSide) style[staticSide] = -15;
     return style;
   }, [arrowX, arrowY, staticSide]);
-  const [isOpen, setIsOpen] = react.useState(false);
-  const handleBlur = react.useCallback(() => setIsOpen(false), []);
-  const handleFocus = react.useCallback(() => setIsOpen(true), []);
-  const handleMouseEnter = react.useCallback(() => setIsOpen(true), []);
-  const handleMouseLeave = react.useCallback(() => setIsOpen(false), []);
+  const tooltipId = react.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 = react.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 = react.useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
+  const handleFocus = react.useCallback(() => handleIsOpenChange(true), [handleIsOpenChange]);
+  const handleMouseEnter = react.useCallback(() => handleIsOpenChange(true), [handleIsOpenChange]);
+  const handleMouseLeave = react.useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
   react.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);
       }
     }
@@ -6966,13 +7045,13 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     return () => {
       window.removeEventListener("mousemove", handleWindowMouseMove);
     };
-  }, [isOpen, referenceElement]);
+  }, [isOpen, referenceElement, handleIsOpenChange]);
   react.useEffect(() => {
-    if (disabled) setIsOpen(false);
-  }, [disabled]);
+    if (disabled) handleIsOpenChange(false);
+  }, [disabled, handleIsOpenChange]);
   react.useEffect(() => {
-    if (!content) setIsOpen(false);
-  }, [content]);
+    if (!content) handleIsOpenChange(false);
+  }, [content, handleIsOpenChange]);
   react.useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]);
   const setArrow = react.useCallback(arrowEl => {
     arrowRef.current = arrowEl;
@@ -7023,7 +7102,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     })
   });
   return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [child, isOpen && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: [child, showTooltip && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: portal ? /* @__PURE__ */jsxRuntime.jsx(Portal, {
         __unstable_name: typeof portal === "string" ? portal : void 0,
         children: root
@@ -9659,6 +9738,8 @@ exports.ThemeProvider = ThemeProvider;
 exports.Toast = Toast;
 exports.ToastProvider = ToastProvider;
 exports.Tooltip = Tooltip;
+exports.TooltipDelayGroupContext = TooltipDelayGroupContext;
+exports.TooltipDelayGroupProvider = TooltipDelayGroupProvider;
 exports.Tree = Tree;
 exports.TreeItem = TreeItem;
 exports.VirtualList = VirtualList;
@@ -9717,5 +9798,6 @@ exports.usePrefersReducedMotion = usePrefersReducedMotion;
 exports.useRootTheme = useRootTheme;
 exports.useTheme = useTheme;
 exports.useToast = useToast;
+exports.useTooltipDelayGroup = useTooltipDelayGroup;
 exports.useTree = useTree;
 //# sourceMappingURL=index.js.map