@sanity/ui 2.6.4 → 2.6.5

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useImperativeHandle, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useReducer, Fragment as Fragment$1, startTransition } from "react";
+import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useImperativeHandle, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, useReducer, Fragment as Fragment$1, startTransition } from "react";
 import ReactIs, { isValidElementType } from "react-is";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
@@ -4343,7 +4343,6 @@ function TooltipDelayGroupProvider(props) {
 }
 const Root$a = styled(Layer)`
   pointer-events: none;
-  max-width: ${({ $maxWidth }) => $maxWidth}px;
 `, Tooltip = forwardRef(function(props, forwardedRef) {
   var _a, _b, _c, _d, _e, _f, _g;
   const boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), {
@@ -4363,18 +4362,9 @@ const Root$a = styled(Layer)`
     zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport";
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
   useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, mounted = useMounted(), tooltipWidth = useMemo(() => {
-    const availableWidths = [
-      ...boundaryElement ? [boundaryElement.offsetWidth] : [],
-      portalElement != null && portalElement.offsetWidth || mounted ? document.body.offsetWidth : (
-        // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
-        800
-      )
-    ];
-    return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2;
-  }, [boundaryElement, mounted, portalElement]), middleware = useMemo(() => {
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, middleware = useMemo(() => {
     const ret = [];
     return ret.push(
       flip({
@@ -4457,7 +4447,13 @@ const Root$a = styled(Layer)`
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, [handleIsOpenChange, showTooltip]), useCloseOnMouseLeave({ handleIsOpenChange, referenceElement, showTooltip });
+  }, [handleIsOpenChange, showTooltip]), useCloseOnMouseLeave({ handleIsOpenChange, referenceElement, showTooltip }), useLayoutEffect(() => {
+    const availableWidths = [
+      ...boundaryElement ? [boundaryElement.offsetWidth] : [],
+      (portalElement == null ? void 0 : portalElement.offsetWidth) || document.body.offsetWidth
+    ];
+    setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
+  }, [boundaryElement, portalElement]);
   const setArrow = useCallback(
     (arrowEl) => {
       arrowRef.current = arrowEl, update();
@@ -4498,9 +4494,11 @@ const Root$a = styled(Layer)`
       "data-ui": "Tooltip",
       ...restProps,
       ref: setFloating,
-      style: floatingStyles,
+      style: {
+        ...floatingStyles,
+        maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
+      },
       zOffset,
-      $maxWidth: tooltipWidth,
       children: /* @__PURE__ */ jsx(
         TooltipCard,
         {
@@ -4547,13 +4545,16 @@ function useCloseOnMouseLeave({
   referenceElement,
   showTooltip
 }) {
-  const handleWindowMouseMove = useEffectEvent((event) => {
-    referenceElement && (referenceElement === event.target || event.target instanceof Node && referenceElement.contains(event.target) || handleIsOpenChange(!1));
+  const onMouseMove = useEffectEvent((target) => {
+    referenceElement && (referenceElement === target || target instanceof Node && referenceElement.contains(target) || handleIsOpenChange(!1));
   });
   useEffect(() => {
-    if (showTooltip)
-      return window.addEventListener("mousemove", handleWindowMouseMove), () => window.removeEventListener("mousemove", handleWindowMouseMove);
-  }, [handleWindowMouseMove, showTooltip]);
+    if (!showTooltip) return;
+    const handleMouseMove = (event) => {
+      onMouseMove(event.target);
+    };
+    return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
+  }, [onMouseMove, showTooltip]);
 }
 const Root$9 = styled.div`
   line-height: 0;