@sanity/ui 2.2.0 → 2.3.0

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

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

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

@@ -1,10 +1,18 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
+import {
+  createElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useForwardedRef, useCustomValidity} from '../../hooks'
+import {useArrayProp, useCustomValidity} from '../../hooks'
 import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
@@ -173,8 +181,7 @@ export const TextInput = forwardRef(function TextInput(
     weight,
     ...restProps
   } = props
-
-  const ref = useForwardedRef(forwardedRef)
+  const ref = useRef<HTMLInputElement | null>(null)
 
   const rootTheme = useRootTheme()
 
@@ -190,6 +197,11 @@ 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,9 +22,10 @@ import {
   type ForwardedRef,
   useId,
   useSyncExternalStore,
+  useImperativeHandle,
 } from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp, useForwardedRef, usePrefersReducedMotion} from '../../hooks'
+import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
@@ -97,7 +98,7 @@ const Root = styled(Layer)<{$maxWidth: number}>`
  */
 export const Tooltip = forwardRef(function Tooltip(
   props: TooltipProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
   const {layer} = useTheme_v2()
@@ -123,11 +124,13 @@ export const Tooltip = forwardRef(function Tooltip(
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
-  const forwardedRef = useForwardedRef(ref)
+  const ref = useRef<HTMLDivElement | null>(null)
   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
@@ -348,10 +351,10 @@ export const Tooltip = forwardRef(function Tooltip(
 
   const setFloating = useCallback(
     (node: HTMLDivElement | null) => {
-      forwardedRef.current = node
+      ref.current = node
       refs.setFloating(node)
     },
-    [forwardedRef, refs],
+    [refs],
   )
 
   const childRef: ForwardedRef<HTMLElement | null> = (childProp as any)?.ref

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

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

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

@@ -1,8 +1,7 @@
-import {FocusEvent, forwardRef, useCallback, useEffect, useRef} from 'react'
+import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, 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'
 
@@ -25,14 +24,16 @@ const Root = styled.div({position: 'relative'})
 
 const LayerChildren = forwardRef(function LayerChildren(
   props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.Ref<HTMLDivElement>,
+  forwardedRef: React.Ref<HTMLDivElement>,
 ) {
   const {children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps} = props
   const {zIndex, isTopLayer} = useLayer()
   const lastFocusedRef = useRef<HTMLElement | null>(null)
-  const forwardedRef = useForwardedRef(ref)
+  const ref = useRef<HTMLDivElement | null>(null)
   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.
@@ -51,7 +52,7 @@ const LayerChildren = forwardRef(function LayerChildren(
       // Call the user-provided onFocus handler if any
       onFocus?.(event)
 
-      const rootElement = forwardedRef.current
+      const rootElement = ref.current
       const target = document.activeElement
 
       if (!isTopLayer || !rootElement || !target) return
@@ -60,17 +61,11 @@ const LayerChildren = forwardRef(function LayerChildren(
         lastFocusedRef.current = target
       }
     },
-    [forwardedRef, isTopLayer, onFocus],
+    [isTopLayer, onFocus],
   )
 
   return (
-    <Root
-      {...restProps}
-      data-ui="Layer"
-      onFocus={handleFocus}
-      ref={forwardedRef}
-      style={{...style, zIndex}}
-    >
+    <Root {...restProps} data-ui="Layer" onFocus={handleFocus} ref={ref} style={{...style, zIndex}}>
       {children}
     </Root>
   )

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

@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
+import {forwardRef, useEffect, useImperativeHandle, 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'
@@ -48,16 +47,19 @@ export const VirtualList = forwardRef(function VirtualList(
   props: VirtualListProps &
     StackProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ): React.ReactElement {
   const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
   const {space} = useTheme_v2()
-  const forwardedRef = useForwardedRef(ref)
+  const ref = useRef<HTMLDivElement | null>(null)
   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
 
@@ -69,9 +71,9 @@ export const VirtualList = forwardRef(function VirtualList(
   }, [renderItem])
 
   useEffect(() => {
-    if (!forwardedRef.current) return
+    if (!ref.current) return
 
-    let _scrollEl = forwardedRef.current.parentNode
+    let _scrollEl = ref.current.parentNode
 
     while (_scrollEl && !_isScrollable(_scrollEl)) {
       _scrollEl = _scrollEl.parentNode
@@ -123,7 +125,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
@@ -158,7 +160,7 @@ export const VirtualList = forwardRef(function VirtualList(
   const wrapperStyle = useMemo(() => ({height}), [height])
 
   return (
-    <Root as={as} data-ui="VirtualList" {...restProps} ref={forwardedRef}>
+    <Root as={as} data-ui="VirtualList" {...restProps} ref={ref}>
       <div ref={wrapperRef} style={wrapperStyle}>
         {children}
       </div>