@sanity/ui 2.1.15-canary.5 → 2.2.0

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

@@ -19,11 +19,16 @@ import {
   memo,
   useCallback,
   useEffect,
-  useImperativeHandle,
   useMemo,
   useRef,
 } from 'react'
-import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
+import {
+  useForwardedRef,
+  useArrayProp,
+  useElementSize,
+  useMediaIndex,
+  usePrefersReducedMotion,
+} from '../../hooks'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
@@ -122,7 +127,7 @@ export const Popover = memo(
   forwardRef(function Popover(
     props: PopoverProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
-    forwardedRef: React.ForwardedRef<HTMLDivElement>,
+    ref: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {
     const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
@@ -167,15 +172,10 @@ export const Popover = memo(
     const shadow = useArrayProp(shadowProp)
     const widthArrayProp = useArrayProp(widthProp)
     const zOffset = useArrayProp(zOffsetProp)
-    const ref = useRef<HTMLDivElement | null>(null)
+    const forwardedRef = useForwardedRef(ref)
     const arrowRef = useRef<HTMLDivElement | null>(null)
     const rootBoundary: RootBoundary = 'viewport'
 
-    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
-      forwardedRef,
-      () => ref.current,
-    )
-
     const mediaIndex = useMediaIndex()
     const boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : undefined
 
@@ -208,7 +208,7 @@ export const Popover = memo(
 
     // Force apply width & max width to floating element
     useEffect(() => {
-      const floatingElement = ref.current
+      const floatingElement = forwardedRef.current
 
       if (!open || !floatingElement) return
 
@@ -225,7 +225,7 @@ export const Popover = memo(
       if (typeof maxWidth === 'number') {
         floatingElement.style.maxWidth = `${maxWidth}px`
       }
-    }, [width, matchReferenceWidth, maxWidth, open])
+    }, [width, forwardedRef, matchReferenceWidth, maxWidth, open])
 
     const middleware = useMemo(() => {
       const ret: Middleware[] = []
@@ -349,10 +349,10 @@ export const Popover = memo(
 
     const setFloating = useCallback(
       (node: HTMLDivElement | null) => {
-        ref.current = node
+        forwardedRef.current = node
         refs.setFloating(node)
       },
-      [refs],
+      [forwardedRef, refs],
     )
 
     const setReference = useCallback(

package/src/core/primitives/radio/radio.tsx

@@ -1,6 +1,6 @@
-import {forwardRef, useImperativeHandle, useRef} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity} from '../../hooks'
+import {useForwardedRef, useCustomValidity} from '../../hooks'
 import {radioBaseStyle, inputElementStyle} from './styles'
 
 /**
@@ -23,12 +23,7 @@ export const Radio = forwardRef(function Radio(
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
   const {className, disabled, style, customValidity, readOnly, ...restProps} = props
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
+  const ref = useForwardedRef(forwardedRef)
 
   useCustomValidity(ref, customValidity)
 

package/src/core/primitives/select/select.tsx

@@ -1,7 +1,7 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity, useArrayProp} from '../../hooks'
+import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
@@ -50,12 +50,7 @@ export const Select = forwardRef(function Select(
     ...restProps
   } = props
 
-  const ref = useRef<HTMLSelectElement | null>(null)
-
-  useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
+  const ref = useForwardedRef(forwardedRef)
 
   useCustomValidity(ref, customValidity)
 

package/src/core/primitives/switch/switch.tsx

@@ -1,5 +1,6 @@
-import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+import {forwardRef, useEffect} from 'react'
 import {styled} from 'styled-components'
+import {useForwardedRef} from '../../hooks'
 import {
   switchBaseStyles,
   switchRepresentationStyles,
@@ -33,19 +34,14 @@ export const Switch = forwardRef(function Switch(
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
   const {checked, className, disabled, indeterminate, readOnly, style, ...restProps} = props
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
+  const ref = useForwardedRef(forwardedRef)
 
   useEffect(() => {
     if (ref.current) {
       // Set the indeterminate state
       ref.current.indeterminate = indeterminate || false
     }
-  }, [indeterminate])
+  }, [indeterminate, ref])
 
   return (
     <Root className={className} data-ui="Switch" style={style}>

package/src/core/primitives/textArea/textArea.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity, useArrayProp} from '../../hooks'
+import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -69,15 +69,10 @@ export const TextArea = forwardRef(function TextArea(
     ...restProps
   } = props
 
-  const ref = useRef<HTMLTextAreaElement | null>(null)
+  const ref = useForwardedRef(forwardedRef)
 
   const rootTheme = useRootTheme()
 
-  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
   useCustomValidity(ref, customValidity)
 
   return (

package/src/core/primitives/textInput/textInput.tsx

@@ -1,18 +1,10 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {
-  createElement,
-  forwardRef,
-  isValidElement,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react'
+import {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useCustomValidity} from '../../hooks'
+import {useArrayProp, useForwardedRef, useCustomValidity} from '../../hooks'
 import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
@@ -181,7 +173,8 @@ export const TextInput = forwardRef(function TextInput(
     weight,
     ...restProps
   } = props
-  const ref = useRef<HTMLInputElement | null>(null)
+
+  const ref = useForwardedRef(forwardedRef)
 
   const rootTheme = useRootTheme()
 
@@ -197,11 +190,6 @@ export const TextInput = forwardRef(function TextInput(
   const $hasSuffix = Boolean(suffix)
   const $hasPrefix = Boolean(prefix)
 
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
   useCustomValidity(ref, customValidity)
 
   // Prevent the clear button from taking the focus away from the input

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

@@ -22,10 +22,9 @@ import {
   type ForwardedRef,
   useId,
   useSyncExternalStore,
-  useImperativeHandle,
 } from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import {useArrayProp, useForwardedRef, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
@@ -98,7 +97,7 @@ const Root = styled(Layer)<{$maxWidth: number}>`
  */
 export const Tooltip = forwardRef(function Tooltip(
   props: TooltipProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
   const {layer} = useTheme_v2()
@@ -124,13 +123,11 @@ export const Tooltip = forwardRef(function Tooltip(
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
-  const ref = useRef<HTMLDivElement | null>(null)
+  const forwardedRef = useForwardedRef(ref)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'
 
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
   const portal = usePortal()
   const portalElement =
     typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
@@ -351,10 +348,10 @@ export const Tooltip = forwardRef(function Tooltip(
 
   const setFloating = useCallback(
     (node: HTMLDivElement | null) => {
-      ref.current = node
+      forwardedRef.current = node
       refs.setFloating(node)
     },
-    [refs],
+    [forwardedRef, refs],
   )
 
   const childRef: ForwardedRef<HTMLElement | null> = (childProp as any)?.ref

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -1,5 +1,5 @@
-import {forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'
-import {useElementSize} from '../../hooks'
+import {forwardRef, useCallback, useMemo, useState} from 'react'
+import {useElementSize, useForwardedRef} from '../../hooks'
 import {useTheme_v2} from '../../theme'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
@@ -18,12 +18,12 @@ export interface MediaQueryProps {
  */
 export const ElementQuery = forwardRef(function ElementQuery(
   props: MediaQueryProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'media'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const theme = useTheme_v2()
   const {children, media = theme.media, ...restProps} = props
 
-  const ref = useRef<HTMLDivElement | null>(null)
+  const forwardedRef = useForwardedRef(ref)
   const [element, setElement] = useState<HTMLDivElement | null>(null)
   const elementSize = useElementSize(element)
   const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
@@ -31,12 +31,13 @@ export const ElementQuery = forwardRef(function ElementQuery(
   const max = useMemo(() => findMaxBreakpoints(media, width), [media, width])
   const min = useMemo(() => findMinBreakpoints(media, width), [media, width])
 
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  const setRef = useCallback((el: HTMLDivElement | null) => {
-    ref.current = el
-    setElement(el)
-  }, [])
+  const setRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      forwardedRef.current = el
+      setElement(el)
+    },
+    [forwardedRef],
+  )
 
   return (
     <div

package/src/core/utils/layer/layer.tsx

@@ -1,7 +1,8 @@
-import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {FocusEvent, forwardRef, useCallback, useEffect, useRef} from 'react'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
+import {useForwardedRef} from '../../hooks'
 import {LayerProvider} from './layerProvider'
 import {useLayer} from './useLayer'
 
@@ -24,16 +25,14 @@ const Root = styled.div({position: 'relative'})
 
 const LayerChildren = forwardRef(function LayerChildren(
   props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  forwardedRef: React.Ref<HTMLDivElement>,
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const {children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps} = props
   const {zIndex, isTopLayer} = useLayer()
   const lastFocusedRef = useRef<HTMLElement | null>(null)
-  const ref = useRef<HTMLDivElement | null>(null)
+  const forwardedRef = useForwardedRef(ref)
   const isTopLayerRef = useRef<boolean>(isTopLayer)
 
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
   // When the layer very first mounts, it will be the top layer, but we don't want to fire
   // the callback in that case. We use a ref to track the previous value of isTopLayer to
   // determine if the layer has become the top layer since the last render.
@@ -52,7 +51,7 @@ const LayerChildren = forwardRef(function LayerChildren(
       // Call the user-provided onFocus handler if any
       onFocus?.(event)
 
-      const rootElement = ref.current
+      const rootElement = forwardedRef.current
       const target = document.activeElement
 
       if (!isTopLayer || !rootElement || !target) return
@@ -61,11 +60,17 @@ const LayerChildren = forwardRef(function LayerChildren(
         lastFocusedRef.current = target
       }
     },
-    [isTopLayer, onFocus],
+    [forwardedRef, isTopLayer, onFocus],
   )
 
   return (
-    <Root {...restProps} data-ui="Layer" onFocus={handleFocus} ref={ref} style={{...style, zIndex}}>
+    <Root
+      {...restProps}
+      data-ui="Layer"
+      onFocus={handleFocus}
+      ref={forwardedRef}
+      style={{...style, zIndex}}
+    >
       {children}
     </Root>
   )

package/src/core/utils/virtualList/virtualList.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
+import {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 import {_isScrollable} from '../../helpers'
+import {useForwardedRef} from '../../hooks'
 import {_ResizeObserver} from '../../observers'
 import {StackProps} from '../../primitives'
 import {useTheme_v2} from '../../theme'
@@ -47,19 +48,16 @@ export const VirtualList = forwardRef(function VirtualList(
   props: VirtualListProps &
     StackProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  ref: React.ForwardedRef<HTMLDivElement>,
 ): React.ReactElement {
   const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
   const {space} = useTheme_v2()
-  const ref = useRef<HTMLDivElement | null>(null)
+  const forwardedRef = useForwardedRef(ref)
   const wrapperRef = useRef<HTMLDivElement | null>(null)
   const [scrollTop, setScrollTop] = useState(0)
   const [scrollHeight, setScrollHeight] = useState(0)
   const [itemHeight, setItemHeight] = useState(-1)
 
-  // Sync ref to parent
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
   useEffect(() => {
     if (!wrapperRef.current) return
 
@@ -71,9 +69,9 @@ export const VirtualList = forwardRef(function VirtualList(
   }, [renderItem])
 
   useEffect(() => {
-    if (!ref.current) return
+    if (!forwardedRef.current) return
 
-    let _scrollEl = ref.current.parentNode
+    let _scrollEl = forwardedRef.current.parentNode
 
     while (_scrollEl && !_isScrollable(_scrollEl)) {
       _scrollEl = _scrollEl.parentNode
@@ -125,7 +123,7 @@ export const VirtualList = forwardRef(function VirtualList(
       window.removeEventListener('scroll', handleScroll)
       window.removeEventListener('resize', handleResize)
     }
-  }, [])
+  }, [forwardedRef])
 
   const len = items.length
   const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0
@@ -160,7 +158,7 @@ export const VirtualList = forwardRef(function VirtualList(
   const wrapperStyle = useMemo(() => ({height}), [height])
 
   return (
-    <Root as={as} data-ui="VirtualList" {...restProps} ref={ref}>
+    <Root as={as} data-ui="VirtualList" {...restProps} ref={forwardedRef}>
       <div ref={wrapperRef} style={wrapperStyle}>
         {children}
       </div>