@sanity/ui 2.9.0-canary.5 → 2.9.0-canary.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.9.0-canary.5",
+  "version": "2.9.0-canary.6",
   "keywords": [
     "sanity",
     "ui",

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

@@ -121,7 +121,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
-  const arrowRef = useRef<HTMLDivElement | null>(null)
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'
   const [tooltipMaxWidth, setTooltipMaxWidth] = useState(0)
 
@@ -158,7 +158,7 @@ export const Tooltip = forwardRef(function Tooltip(
 
     // Place arrow
     if (arrowProp) {
-      ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
+      ret.push(arrow({element: arrowElement, padding: DEFAULT_TOOLTIP_PADDING}))
     }
 
     // Determine the origin to scale from.
@@ -168,7 +168,7 @@ export const Tooltip = forwardRef(function Tooltip(
     }
 
     return ret
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements])
+  }, [animate, arrowElement, arrowProp, boundaryElement, fallbackPlacements])
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -226,42 +226,42 @@ export const Tooltip = forwardRef(function Tooltip(
       handleIsOpenChange(false)
       childProp?.props?.onBlur?.(e)
     },
-    [childProp?.props, handleIsOpenChange],
+    [childProp, handleIsOpenChange],
   )
   const handleClick = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(false, true)
       childProp?.props.onClick?.(e)
     },
-    [childProp?.props, handleIsOpenChange],
+    [childProp, handleIsOpenChange],
   )
   const handleContextMenu = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(false, true)
       childProp?.props.onContextMenu?.(e)
     },
-    [childProp?.props, handleIsOpenChange],
+    [childProp, handleIsOpenChange],
   )
   const handleFocus = useCallback(
     (e: FocusEvent) => {
       handleIsOpenChange(true)
       childProp?.props?.onFocus?.(e)
     },
-    [childProp?.props, handleIsOpenChange],
+    [childProp, handleIsOpenChange],
   )
   const handleMouseEnter = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(true)
       childProp?.props?.onMouseEnter?.(e)
     },
-    [childProp?.props, handleIsOpenChange],
+    [childProp, handleIsOpenChange],
   )
   const handleMouseLeave = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(false)
       childProp?.props?.onMouseLeave?.(e)
     },
-    [childProp?.props, handleIsOpenChange],
+    [childProp, handleIsOpenChange],
   )
 
   // Handle closing the tooltip when the mouse leaves the referenceElement
@@ -312,7 +312,7 @@ export const Tooltip = forwardRef(function Tooltip(
 
   const setArrow = useCallback(
     (arrowEl: HTMLDivElement | null) => {
-      arrowRef.current = arrowEl
+      setArrowElement(arrowEl)
       update()
     },
     [update],
@@ -327,9 +327,9 @@ export const Tooltip = forwardRef(function Tooltip(
   )
 
   const childRef = useRef<HTMLElement | null>(null)
+  const [childElement, setChildElement] = useState<HTMLElement | null>(null)
 
-  // Merge refs so that any ref we are overriding is called as well
-  useImperativeHandle((childProp as any)?.ref, () => childRef.current)
+  useImperativeHandle(getElementRef(childProp as any), () => childElement, [childElement])
 
   const child = useMemo(() => {
     if (!childProp) return null
@@ -341,7 +341,7 @@ export const Tooltip = forwardRef(function Tooltip(
       onMouseLeave: handleMouseLeave,
       onClick: handleClick,
       onContextMenu: handleContextMenu,
-      ref: childRef,
+      ref: setChildElement,
     })
   }, [
     childProp,
@@ -465,3 +465,30 @@ function useCloseOnMouseLeave({
     return () => window.removeEventListener('mousemove', handleMouseMove)
   }, [onMouseMove, showTooltip])
 }
+
+// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
+// After React 19 accessing `element.ref` does the opposite.
+// https://github.com/facebook/react/pull/28348
+//
+// Access the ref using the method that doesn't yield a warning.
+function getElementRef(element?: React.ReactElement) {
+  if (!element) return null
+  // React <=18 in DEV
+  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
+  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
+
+  if (mayWarn) {
+    return (element as any).ref
+  }
+
+  // React 19 in DEV
+  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get
+  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
+
+  if (mayWarn) {
+    return element.props.ref
+  }
+
+  // Not DEV
+  return element.props.ref || (element as any).ref
+}