@sanity/ui 2.6.4 → 2.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.6.4",
+  "version": "2.6.6",
   "keywords": [
     "sanity",
     "ui",

package/src/core/primitives/tooltip/tooltip.tsx

@@ -21,12 +21,12 @@ import {
   useState,
   useId,
   useImperativeHandle,
+  useLayoutEffect,
 } from 'react'
 import {styled} from 'styled-components'
 import {useEffectEvent} from 'use-effect-event'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
-import {useMounted} from '../../hooks/useMounted'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import type {Placement} from '../../types'
@@ -86,9 +86,8 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   animate?: boolean
 }
 
-const Root = styled(Layer)<{$maxWidth: number}>`
+const Root = styled(Layer)`
   pointer-events: none;
-  max-width: ${({$maxWidth}) => $maxWidth}px;
 `
 
 /**
@@ -128,6 +127,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'
+  const [tooltipMaxWidth, setTooltipMaxWidth] = useState(0)
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
@@ -135,22 +135,6 @@ export const Tooltip = forwardRef(function Tooltip(
   const portalElement =
     typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
 
-  const mounted = useMounted()
-  // Get the maximum tooltip width (sans tooltip padding)
-  // Tooltip width should never exceed the width of either any supplied boundary or portal element.
-  // If both portal and boundary elements are provided, use the smaller width of the two.
-  const tooltipWidth = useMemo(() => {
-    const availableWidths = [
-      ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
-      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])
-
   const middleware = useMemo(() => {
     const ret: Middleware[] = []
 
@@ -284,6 +268,9 @@ export const Tooltip = forwardRef(function Tooltip(
     [childProp?.props, handleIsOpenChange],
   )
 
+  // Handle closing the tooltip when the mouse leaves the referenceElement
+  useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})
+
   // Close when `disabled` changes to `true`
   useEffect(() => {
     if (disabled && showTooltip) handleIsOpenChange(false)
@@ -314,8 +301,18 @@ export const Tooltip = forwardRef(function Tooltip(
     }
   }, [handleIsOpenChange, showTooltip])
 
-  // Handle closing the tooltip when the mouse leaves the referenceElement
-  useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})
+  // // Set the max width of the tooltip based on boundaries and portals
+  useLayoutEffect(() => {
+    // Get the maximum tooltip width (sans tooltip padding)
+    // Tooltip width should never exceed the width of either any supplied boundary or portal element.
+    // If both portal and boundary elements are provided, use the smaller width of the two.
+    const availableWidths = [
+      ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
+      portalElement?.offsetWidth || document.body.offsetWidth,
+    ]
+
+    setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2)
+  }, [boundaryElement, portalElement])
 
   const setArrow = useCallback(
     (arrowEl: HTMLDivElement | null) => {
@@ -379,9 +376,11 @@ export const Tooltip = forwardRef(function Tooltip(
       data-ui="Tooltip"
       {...restProps}
       ref={setFloating}
-      style={floatingStyles}
+      style={{
+        ...floatingStyles,
+        maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : undefined,
+      }}
       zOffset={zOffset}
-      $maxWidth={tooltipWidth}
     >
       <TooltipCard
         {...restProps}
@@ -447,15 +446,16 @@ function useCloseOnMouseLeave({
   // Since we don't want the `mouseevent` events to be attached and removed if the `referenceElement` is changed
   // we use a "effect event" (https://19.react.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)
   // in order to always see the latest `referenceElement` value inside the event handler itself.
-  const handleWindowMouseMove = useEffectEvent((event: MouseEvent) => {
+  const onMouseMove = useEffectEvent((target: EventTarget | null, teardown: () => void) => {
     if (!referenceElement) return
 
     const isHoveringReference =
-      referenceElement === event.target ||
-      (event.target instanceof Node && referenceElement.contains(event.target))
+      referenceElement === target || (target instanceof Node && referenceElement.contains(target))
 
     if (!isHoveringReference) {
       handleIsOpenChange(false)
+      // Allow removing the event listener eagerly, to avoid race conditions
+      teardown()
     }
   })
 
@@ -465,8 +465,12 @@ function useCloseOnMouseLeave({
   useEffect(() => {
     if (!showTooltip) return
 
-    window.addEventListener('mousemove', handleWindowMouseMove)
+    const handleMouseMove = (event: MouseEvent) => {
+      onMouseMove(event.target, () => window.removeEventListener('mousemove', handleMouseMove))
+    }
+
+    window.addEventListener('mousemove', handleMouseMove)
 
-    return () => window.removeEventListener('mousemove', handleWindowMouseMove)
-  }, [handleWindowMouseMove, showTooltip])
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [onMouseMove, showTooltip])
 }