@sanity/ui 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "keywords": [
     "sanity",
     "ui",
@@ -119,9 +119,9 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.8.18",
-    "@sanity/semantic-release-preset": "^4.1.7",
-    "@sanity/ui-workshop": "^2.0.13",
+    "@sanity/pkg-utils": "^6.8.19",
+    "@sanity/semantic-release-preset": "^4.1.8",
+    "@sanity/ui-workshop": "^2.0.15",
     "@storybook/addon-a11y": "^8.0.8",
     "@storybook/addon-docs": "^8.0.8",
     "@storybook/addon-essentials": "^8.0.8",
@@ -138,7 +138,7 @@
     "@storybook/theming": "^8.0.8",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
@@ -147,8 +147,8 @@
     "@types/react-is": "^18.3.0",
     "@types/refractor": "^3.4.1",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
     "commitizen": "^4.3.0",
     "cypress": "^13.10.0",
     "cypress-real-events": "^1.12.0",
@@ -160,7 +160,7 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-c8b3f72-20240517",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-a97cca1-20240529",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "http-server": "^14.1.1",
@@ -178,7 +178,7 @@
     "react-is": "^18.3.1",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.5",
-    "semantic-release": "^23.1.1",
+    "semantic-release": "^24.0.0",
     "start-server-and-test": "^2.0.3",
     "storybook": "^8.0.8",
     "styled-components": "^6.1.11",
@@ -202,5 +202,10 @@
   },
   "esm.sh": {
     "bundle": false
+  },
+  "pnpm": {
+    "overrides": {
+      "conventional-changelog-conventionalcommits": ">= 8.0.0"
+    }
   }
 }

package/src/core/components/autocomplete/autocomplete.tsx

@@ -13,13 +13,14 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useReducer,
   useRef,
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp, useForwardedRef} from '../../hooks'
+import {useArrayProp} from '../../hooks'
 import {
   Box,
   BoxProps,
@@ -119,7 +120,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       | 'type'
       | 'value'
     >,
-  ref: Ref<HTMLInputElement>,
+  forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
   const {
     border = true,
@@ -191,7 +192,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const valuePropRef = useRef(valueProp)
   const popoverMouseWithinRef = useRef(false)
 
-  const forwardedRef = useForwardedRef(ref)
+  // Forward ref to parent
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => inputElementRef.current,
+  )
 
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
@@ -432,14 +437,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     }
   }, [activeValue, filteredOptions])
 
-  const setRef = useCallback(
-    (el: HTMLInputElement | null) => {
-      inputElementRef.current = el
-      forwardedRef.current = el
-    },
-    [forwardedRef],
-  )
-
   const clearButton = useMemo(() => {
     if (!loading && !disabled && value) {
       return {
@@ -549,7 +546,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       prefix={prefix}
       radius={radius}
       readOnly={readOnly}
-      ref={setRef}
+      ref={inputElementRef}
       role="combobox"
       spellCheck={false}
       suffix={suffix || openButtonNode}

package/src/core/components/dialog/dialog.tsx

@@ -1,6 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 import {
   containsOrEqualsElement,
@@ -8,13 +8,7 @@ import {
   focusLastDescendant,
   isHTMLElement,
 } from '../../helpers'
-import {
-  useArrayProp,
-  useClickOutside,
-  useForwardedRef,
-  useGlobalKeyDown,
-  usePrefersReducedMotion,
-} from '../../hooks'
+import {useArrayProp, useClickOutside, useGlobalKeyDown, usePrefersReducedMotion} from '../../hooks'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
@@ -151,13 +145,13 @@ const DialogFooter = styled(Box)`
 
 const DialogCard = forwardRef(function DialogCard(
   props: DialogCardProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
     children,
-    contentRef,
+    contentRef: forwardedContentRef,
     footer,
     header,
     id,
@@ -175,23 +169,29 @@ const DialogCard = forwardRef(function DialogCard(
   const radius = useArrayProp(radiusProp)
   const shadow = useArrayProp(shadowProp)
   const width = useArrayProp(widthProp)
-  const forwardedRef = useForwardedRef(ref)
+  const ref = useRef<HTMLDivElement | null>(null)
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const localContentRef = useRef<HTMLDivElement | null>(null)
+  const contentRef = useRef<HTMLDivElement | null>(null)
   const layer = useLayer()
   const {isTopLayer} = layer
   const labelId = `${id}_label`
   const showCloseButton = Boolean(onClose) && hideCloseButton === false
   const showHeader = Boolean(header) || showCloseButton
 
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
+    forwardedContentRef,
+    () => contentRef.current,
+  )
+
   useEffect(() => {
     if (!autoFocus) return
 
     // On mount: focus the first focusable element
-    if (forwardedRef.current) {
-      focusFirstDescendant(forwardedRef.current)
+    if (ref.current) {
+      focusFirstDescendant(ref.current)
     }
-  }, [autoFocus, forwardedRef])
+  }, [autoFocus, ref])
 
   useGlobalKeyDown(
     useCallback(
@@ -234,22 +234,10 @@ const DialogCard = forwardRef(function DialogCard(
     [rootElement],
   )
 
-  const setRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      setRootElement(el)
-      forwardedRef.current = el
-    },
-    [forwardedRef],
-  )
-
-  const setContentRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      localContentRef.current = el
-      if (typeof contentRef === 'function') contentRef(el)
-      else if (contentRef) contentRef.current = el
-    },
-    [contentRef],
-  )
+  const setRef = useCallback((el: HTMLDivElement | null) => {
+    setRootElement(el)
+    ref.current = el
+  }, [])
 
   return (
     <DialogContainer data-ui="DialogCard" width={width}>
@@ -281,7 +269,7 @@ const DialogCard = forwardRef(function DialogCard(
             </DialogHeader>
           )}
 
-          <DialogContent flex={1} ref={setContentRef} tabIndex={-1}>
+          <DialogContent flex={1} ref={contentRef} tabIndex={-1}>
             {children}
           </DialogContent>
 

package/src/core/components/menu/menu.tsx

@@ -1,6 +1,6 @@
-import {forwardRef, useCallback, useEffect, useMemo} from 'react'
+import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
+import {useClickOutside, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
 import {ResponsivePaddingProps} from '../../primitives/types'
 import {useLayer} from '../../utils'
@@ -41,7 +41,7 @@ const Root = styled(Box)`
  */
 export const Menu = forwardRef(function Menu(
   props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     children,
@@ -62,7 +62,9 @@ export const Menu = forwardRef(function Menu(
     ...restProps
   } = props
 
-  const forwardedRef = useForwardedRef(ref)
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
   const {isTopLayer} = useLayer()
 
@@ -80,9 +82,9 @@ export const Menu = forwardRef(function Menu(
   const handleRefChange = useCallback(
     (el: HTMLDivElement | null) => {
       setRootElement(el)
-      forwardedRef.current = el
+      ref.current = el
     },
-    [forwardedRef, setRootElement],
+    [setRootElement],
   )
 
   // Trigger `onItemSelect` when active index changes

package/src/core/components/menu/menuItem.tsx

@@ -4,11 +4,13 @@ import {
   isValidElement,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
+  useRef,
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp, useForwardedRef} from '../../hooks'
+import {useArrayProp} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
@@ -76,10 +78,11 @@ export const MenuItem = forwardRef(function MenuItem(
   } = menu
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
+  const ref = useRef<HTMLDivElement | null>(null)
 
-  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
-  const ref = useForwardedRef(forwardedRef)
+  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
@@ -105,13 +108,10 @@ export const MenuItem = forwardRef(function MenuItem(
 
   const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
 
-  const setRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      ref.current = el
-      setRootElement(el)
-    },
-    [ref],
-  )
+  const setRef = useCallback((el: HTMLDivElement | null) => {
+    ref.current = el
+    setRootElement(el)
+  }, [])
 
   return (
     <Selectable

package/src/core/components/tab/tab.tsx

@@ -1,6 +1,5 @@
-import {forwardRef, useCallback, useEffect, useRef} from 'react'
+import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useForwardedRef} from '../../hooks'
 import {Button} from '../../primitives'
 import {ButtonTone} from '../../types'
 
@@ -49,9 +48,14 @@ export const Tab = forwardRef(function Tab(
     selected,
     ...restProps
   } = props
-  const elementRef = useRef<HTMLButtonElement | null>(null)
+  const ref = useRef<HTMLButtonElement | null>(null)
   const focusedRef = useRef(false)
 
+  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
   const handleBlur = useCallback(() => {
     focusedRef.current = false
   }, [])
@@ -64,20 +68,13 @@ export const Tab = forwardRef(function Tab(
     [onFocus],
   )
 
-  const ref = useForwardedRef(forwardedRef)
-
   useEffect(() => {
     if (focused && !focusedRef.current) {
-      if (elementRef.current) elementRef.current.focus()
+      if (ref.current) ref.current.focus()
       focusedRef.current = true
     }
   }, [focused])
 
-  const setRef = (el: HTMLButtonElement | null) => {
-    elementRef.current = el
-    ref.current = el
-  }
-
   return (
     <CustomButton
       data-ui="Tab"
@@ -91,7 +88,7 @@ export const Tab = forwardRef(function Tab(
       onBlur={handleBlur}
       onFocus={handleFocus}
       padding={padding}
-      ref={setRef}
+      ref={ref}
       role="tab"
       selected={selected}
       tabIndex={selected ? 0 : -1}

package/src/core/components/tree/tree.tsx

@@ -1,5 +1,13 @@
-import {forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {useForwardedRef} from '../../hooks'
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {Stack} from '../../primitives'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
 import {TreeContext} from './treeContext'
@@ -21,10 +29,10 @@ export const Tree = memo(
   forwardRef(function Tree(
     props: TreeProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-    ref: React.ForwardedRef<HTMLDivElement>,
+    forwardedRef: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {
     const {children, space = 1, onFocus, ...restProps} = props
-    const forwardedRef = useForwardedRef(ref)
+    const ref = useRef<HTMLDivElement | null>(null)
     const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
     const focusedElementRef = useRef(focusedElement)
     const path: string[] = useMemo(() => [], [])
@@ -32,6 +40,11 @@ export const Tree = memo(
     const [state, setState] = useState<TreeState>({})
     const stateRef = useRef(state)
 
+    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
+      forwardedRef,
+      () => ref.current,
+    )
+
     useEffect(() => {
       focusedElementRef.current = focusedElement
     }, [focusedElement])
@@ -194,13 +207,13 @@ export const Tree = memo(
     )
 
     useEffect(() => {
-      if (!forwardedRef.current) return
+      if (!ref.current) return
       const _itemElements = Array.from(
-        forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]'),
+        ref.current.querySelectorAll('[data-ui="TreeItem"]'),
       ) as HTMLElement[]
 
       setItemElements(_itemElements)
-    }, [children, forwardedRef])
+    }, [children, ref])
 
     return (
       <TreeContext.Provider value={contextValue}>
@@ -210,7 +223,7 @@ export const Tree = memo(
           {...restProps}
           onFocus={handleFocus}
           onKeyDown={handleKeyDown}
-          ref={forwardedRef}
+          ref={ref}
           role="tree"
           space={space}
         >

package/src/core/hooks/useForwardedRef.ts

@@ -1,21 +1,19 @@
-import {useRef} from 'react'
-import {useIsomorphicEffect} from './useIsomorphicEffect'
+import {useImperativeHandle, useRef} from 'react'
 
 /**
  * @beta
+ * @deprecated use `useImperativeHandle` instead
+ * @example
+ * ```diff
+ * -const ref = useForwardedRef(forwardedRef)
+ * +const ref = useRef(null)
+ * +useImperativeHandle(forwardedRef, () => ref.current)
+ * ```
  */
 export function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRefObject<T | null> {
   const innerRef = useRef<T | null>(null)
 
-  useIsomorphicEffect(() => {
-    if (!ref) return
-
-    if (typeof ref === 'function') {
-      ref(innerRef.current)
-    } else {
-      ref.current = innerRef.current
-    }
-  })
+  useImperativeHandle(ref, () => innerRef.current!)
 
   return innerRef
 }

package/src/core/hooks/useIsomorphicEffect.ts

@@ -2,5 +2,6 @@ import {useEffect, useLayoutEffect} from 'react'
 
 /**
  * @beta
+ * @deprecated use `useLayoutEffect` instead, or `useEffect` if possible
  */
 export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

package/src/core/primitives/checkbox/checkbox.tsx

@@ -1,7 +1,7 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import {forwardRef, useEffect} from 'react'
+import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useForwardedRef, useCustomValidity} from '../../hooks'
+import {useCustomValidity} from '../../hooks'
 import {checkboxBaseStyles, inputElementStyles} from './styles'
 
 /**
@@ -34,16 +34,21 @@ export const Checkbox = forwardRef(function Checkbox(
     style,
     ...restProps
   } = props
-  const ref = useForwardedRef(forwardedRef)
+  const ref = useRef<HTMLInputElement | null>(null)
 
-  useCustomValidity(ref, customValidity)
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
 
   useEffect(() => {
     if (ref.current) {
       // Set the indeterminate state
       ref.current.indeterminate = indeterminate || false
     }
-  }, [indeterminate, ref])
+  }, [indeterminate])
+
+  useCustomValidity(ref, customValidity)
 
   return (
     <Root className={className} data-ui="Checkbox" style={style}>

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

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

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

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

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

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

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

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