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

package/package.json

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

package/src/core/primitives/popover/popover.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
-  Middleware,
   RootBoundary,
   arrow,
   autoUpdate,
@@ -182,94 +181,70 @@ export const Popover = memo(
     const mediaIndex = useMediaIndex()
     const boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : undefined
 
-    // Update width when
-    // - media index changes
-    // - `width` property changes
-    const width = calcCurrentWidth({
-      container,
-      mediaIndex,
-      width: widthArrayProp,
-    })
-    const widthRef = useRef(width)
-
-    useEffect(() => {
-      widthRef.current = width
-    }, [width])
-
-    // Update max width when
-    // - boundary width changes
-    // - `width` property changes
-    const maxWidth = calcMaxWidth({boundaryWidth, currentWidth: width})
-    const maxWidthRef = useRef(maxWidth)
-
-    useEffect(() => {
-      maxWidthRef.current = maxWidth
-    }, [maxWidth])
-
-    // Keep track of reference element width (see `size` middleware below)
-    const referenceWidthRef = useRef<number>()
-
     // Force apply width & max width to floating element
     useLayoutEffect(() => {
       const floatingElement = ref.current
 
-      if (!open || !floatingElement) return
+      // If constrainSize or matchReferenceWidth is true, then the styles are set by the `size` middleware
+      if (!open || !floatingElement || constrainSize || matchReferenceWidth) return
 
-      const referenceWidth = referenceWidthRef.current
+      const currentWidth = calcCurrentWidth({
+        container,
+        mediaIndex,
+        width: widthArrayProp,
+      })
+      const maxWidth = calcMaxWidth({boundaryWidth, currentWidth})
 
-      if (matchReferenceWidth) {
-        if (referenceWidthRef.current !== undefined) {
-          floatingElement.style.width = `${referenceWidth}px`
-        }
-      } else if (width !== undefined) {
-        floatingElement.style.width = `${width}px`
+      if (currentWidth !== undefined) {
+        floatingElement.style.width = `${currentWidth}px`
       }
 
       if (typeof maxWidth === 'number') {
         floatingElement.style.maxWidth = `${maxWidth}px`
       }
-    }, [width, matchReferenceWidth, maxWidth, open])
-
-    const middleware = useMemo(() => {
-      const ret: Middleware[] = []
+    }, [
+      boundaryWidth,
+      constrainSize,
+      container,
+      matchReferenceWidth,
+      mediaIndex,
+      open,
+      widthArrayProp,
+    ])
 
-      // Flip the floating element when leaving the boundary box
-      if (constrainSize || preventOverflow) {
-        ret.push(
+    const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
+      middleware: [
+        // Flip the floating element when leaving the boundary box
+        (constrainSize || preventOverflow) &&
           flip({
             boundary: floatingBoundary || undefined,
             fallbackPlacements,
             padding: DEFAULT_POPOVER_PADDING,
             rootBoundary,
           }),
-        )
-      }
-
-      // Define distance between reference and floating element
-      ret.push(offset({mainAxis: DEFAULT_POPOVER_DISTANCE}))
-
-      // Track sizes
-      if (constrainSize || matchReferenceWidth) {
-        ret.push(
+        // Define distance between reference and floating element
+        offset({mainAxis: DEFAULT_POPOVER_DISTANCE}),
+        // Track sizes
+        (constrainSize || matchReferenceWidth) &&
           size({
             apply({availableWidth, availableHeight, elements, referenceWidth}) {
-              // not fresh, so use refs
-
-              referenceWidthRef.current = referenceWidth
-
-              const _currentWidth = widthRef.current
-              const _maxWidth = maxWidthRef.current
+              const currentWidth = calcCurrentWidth({
+                container,
+                mediaIndex,
+                width: widthArrayProp,
+              })
+              const maxWidth = calcMaxWidth({boundaryWidth, currentWidth})
 
               if (matchReferenceWidth) {
                 elements.floating.style.width = `${referenceWidth}px`
-              } else if (_currentWidth !== undefined) {
-                elements.floating.style.width = `${_currentWidth}px`
+              } else if (currentWidth !== undefined) {
+                elements.floating.style.width = `${currentWidth}px`
               }
 
               if (constrainSize) {
                 elements.floating.style.maxWidth = `${Math.min(
                   availableWidth,
-                  _maxWidth ?? Infinity,
+                  maxWidth ?? Infinity,
                 )}px`
 
                 elements.floating.style.maxHeight = `${availableHeight}px`
@@ -281,60 +256,28 @@ export const Popover = memo(
             matchReferenceWidth,
             padding: DEFAULT_POPOVER_PADDING,
           }),
-        )
-      }
-
-      // Shift the popover so its sits within the boundary element
-      if (preventOverflow) {
-        ret.push(
+        // Shift the popover so its sits within the boundary element
+        preventOverflow &&
           shift({
             boundary: floatingBoundary || undefined,
             rootBoundary,
             padding: DEFAULT_POPOVER_PADDING,
           }),
-        )
-      }
-
-      // Place arrow
-      if (arrowProp) {
-        ret.push(
+        // Place arrow
+        arrowProp &&
           arrow({
             element: arrowElement,
             padding: DEFAULT_POPOVER_PADDING,
           }),
-        )
-      }
-
-      // Determine the origin to scale from.
-      // Must be placed after `@sanity/ui/size` and `shift` middleware.
-      if (animate) {
-        ret.push(origin)
-      }
-
-      ret.push(
+        // Determine the origin to scale from.
+        // Must be placed after `@sanity/ui/size` and `shift` middleware.
+        animate && origin,
         hide({
           boundary: referenceBoundary || undefined,
           padding: DEFAULT_POPOVER_PADDING,
           strategy: 'referenceHidden',
         }),
-      )
-
-      return ret
-    }, [
-      animate,
-      arrowElement,
-      arrowProp,
-      constrainSize,
-      fallbackPlacements,
-      floatingBoundary,
-      margins,
-      matchReferenceWidth,
-      preventOverflow,
-      referenceBoundary,
-    ])
-
-    const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
-      middleware,
+      ],
       placement: placementProp,
       whileElementsMounted: autoUpdate,
     })
@@ -405,7 +348,6 @@ export const Popover = memo(
           originY={originY}
           strategy={strategy}
           tone={tone}
-          width={matchReferenceWidth ? referenceWidthRef.current : width}
           x={x}
           y={y}
         >

package/src/core/primitives/popover/popoverCard.tsx

@@ -51,7 +51,6 @@ export const PopoverCard = memo(
       shadow?: number | number[]
       strategy: Strategy
       tone: CardTone
-      width: number | undefined
       x: number | null
       y: number | null
     } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
@@ -76,7 +75,6 @@ export const PopoverCard = memo(
       strategy,
       style,
       tone,
-      width,
       x: xProp,
       y: yProp,
       ...restProps
@@ -101,12 +99,11 @@ export const PopoverCard = memo(
         originY,
         position: strategy,
         top: y,
-        width,
         zIndex,
         willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [animate, originX, originY, strategy, style, width, x, y, zIndex],
+      [animate, originX, originY, strategy, style, x, y, zIndex],
     )
 
     const arrowStyle: CSSProperties = useMemo(

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
+}