@sanity/ui 3.0.10 → 3.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.10",
+  "version": "3.0.11",
   "keywords": [
     "sanity",
     "ui",
@@ -156,7 +156,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^22.18.0",
+    "@types/node": "^22.18.1",
     "@types/react": "^19.1.11",
     "@types/react-dom": "^19.1.8",
     "@types/react-is": "^19.0.0",

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

@@ -16,6 +16,7 @@ import {
   useMemo,
   useReducer,
   useRef,
+  useState,
 } from 'react'
 
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
@@ -189,6 +190,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
   const inputElementRef = useRef<HTMLInputElement | null>(null)
   const listBoxElementRef = useRef<HTMLDivElement | null>(null)
+  // Element refs that need to be accessed during render
+  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
 
   // Value refs
   const listFocusedRef = useRef(false)
@@ -196,10 +199,17 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const valuePropRef = useRef(valueProp)
   const popoverMouseWithinRef = useRef(false)
 
-  // Forward ref to parent
+  // Forward inputElement state to inputElementRef
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    inputElementRef,
+    () => inputElement,
+    [inputElement],
+  )
+  // Forward inputElement to parent
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
-    () => inputElementRef.current,
+    () => inputElement,
+    [inputElement],
   )
 
   const listBoxId = `${id}-listbox`
@@ -529,40 +539,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     return query
   }, [currentOption, query, renderValue, value])
 
-  const input = (
-    <TextInput
-      {...restProps}
-      aria-activedescendant={activeItemId}
-      aria-autocomplete="list"
-      aria-expanded={expanded}
-      aria-owns={listBoxId}
-      autoCapitalize="off"
-      autoComplete="off"
-      autoCorrect="off"
-      border={border}
-      clearButton={clearButton}
-      customValidity={customValidity}
-      disabled={disabled}
-      fontSize={fontSize}
-      icon={icon}
-      iconRight={loading && AnimatedSpinnerIcon}
-      id={id}
-      inputMode="search"
-      onChange={handleInputChange}
-      onClear={handleClearButtonClick}
-      onFocus={handleInputFocus}
-      padding={padding}
-      prefix={prefix}
-      radius={radius}
-      readOnly={readOnly}
-      ref={inputElementRef}
-      role="combobox"
-      spellCheck={false}
-      suffix={suffix || openButtonNode}
-      value={inputValue}
-    />
-  )
-
   const handleListBoxKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
       // If the focus is currently in the list, move focus to the input element
@@ -632,15 +608,16 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const results = useMemo(() => {
     if (renderPopover) {
-      return renderPopover(
-        {
-          content,
-          hidden: !expanded,
-          inputElement: inputElementRef.current,
-          onMouseEnter: handlePopoverMouseEnter,
-          onMouseLeave: handlePopoverMouseLeave,
-        },
-        resultsPopoverElementRef,
+      return (
+        <RenderPopover
+          content={content}
+          hidden={!expanded}
+          inputElement={inputElement}
+          onMouseEnter={handlePopoverMouseEnter}
+          onMouseLeave={handlePopoverMouseLeave}
+          resultsPopoverElementRef={resultsPopoverElementRef}
+          renderPopover={renderPopover}
+        />
       )
     }
 
@@ -663,7 +640,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         portal
         radius={radius}
         ref={resultsPopoverElementRef}
-        referenceElement={inputElementRef.current}
+        referenceElement={inputElement}
         {...popover}
       />
     )
@@ -673,6 +650,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     filteredOptionsLen,
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
+    inputElement,
     popover,
     radius,
     renderPopover,
@@ -686,12 +664,66 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       onKeyDown={handleRootKeyDown}
       ref={rootElementRef}
     >
-      {input}
+      <TextInput
+        {...restProps}
+        aria-activedescendant={activeItemId}
+        aria-autocomplete="list"
+        aria-expanded={expanded}
+        aria-owns={listBoxId}
+        autoCapitalize="off"
+        autoComplete="off"
+        autoCorrect="off"
+        border={border}
+        clearButton={clearButton}
+        customValidity={customValidity}
+        disabled={disabled}
+        fontSize={fontSize}
+        icon={icon}
+        iconRight={loading && AnimatedSpinnerIcon}
+        id={id}
+        inputMode="search"
+        onChange={handleInputChange}
+        onClear={handleClearButtonClick}
+        onFocus={handleInputFocus}
+        padding={padding}
+        prefix={prefix}
+        radius={radius}
+        readOnly={readOnly}
+        ref={setInputElement}
+        role="combobox"
+        spellCheck={false}
+        suffix={suffix || openButtonNode}
+        value={inputValue}
+      />
       {results}
     </StyledAutocomplete>
   )
 })
 
+function RenderPopover({
+  renderPopover,
+  content,
+  hidden,
+  inputElement,
+  onMouseEnter,
+  onMouseLeave,
+  resultsPopoverElementRef,
+}: {
+  renderPopover: Exclude<AutocompleteProps['renderPopover'], undefined>
+  resultsPopoverElementRef: Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[1]
+} & Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[0]) {
+  return renderPopover(
+    {
+      content,
+      hidden,
+      inputElement,
+      onMouseEnter,
+      onMouseLeave,
+    },
+    resultsPopoverElementRef,
+  )
+}
+
 InnerAutocomplete.displayName = 'ForwardRef(Autocomplete)'
 
 /**

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

@@ -32,18 +32,16 @@ describe('components/menu', () => {
           [],
         )
 
-        const value: MenuContextValue = useMemo(
-          () => ({
-            version: 0.0,
-            activeElement: null,
-            activeIndex: 0,
-            mount: (element: HTMLElement | null) => () => console.log(element),
-            onItemClick: () => undefined,
-            onItemMouseEnter: handleItemMouseEnter,
-            onItemMouseLeave: handleItemMouseLeave,
-            onMouseEnter: handleItemMouseEnter,
-            onMouseLeave: handleItemMouseLeave,
-          }),
+        const value = useMemo(
+          () =>
+            ({
+              version: 2,
+              activeElement: null,
+              mount: (element: HTMLElement | null) => () => console.log(element),
+              onItemClick: () => undefined,
+              onItemMouseEnter: handleItemMouseEnter,
+              onItemMouseLeave: handleItemMouseLeave,
+            }) satisfies MenuContextValue,
           [handleItemMouseEnter, handleItemMouseLeave],
         )
 
@@ -58,8 +56,7 @@ describe('components/menu', () => {
 
       const contextValue = log.mock.calls[0][0]
 
-      expect(contextValue.version).toBe(0.0)
-      expect(contextValue.activeIndex).toBe(0)
+      expect(contextValue.version).toBe(2)
       expect(typeof contextValue.mount).toBe('function')
       expect(typeof contextValue.onItemClick).toBe('function')
       expect(typeof contextValue.onItemMouseEnter).toBe('function')

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

@@ -128,26 +128,21 @@ export const Menu = forwardRef(function Menu(
     ),
   )
 
-  const value: MenuContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      activeElement,
-      activeIndex,
-      mount,
-      onClickOutside,
-      onEscape,
-      onItemClick,
-      onItemMouseEnter: handleItemMouseEnter,
-      onItemMouseLeave: handleItemMouseLeave,
-      registerElement,
-
-      // deprecated
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
-    }),
+  const value = useMemo(
+    () =>
+      ({
+        version: 2,
+        activeElement,
+        mount,
+        onClickOutside,
+        onEscape,
+        onItemClick,
+        onItemMouseEnter: handleItemMouseEnter,
+        onItemMouseLeave: handleItemMouseLeave,
+        registerElement,
+      }) satisfies MenuContextValue,
     [
       activeElement,
-      activeIndex,
       mount,
       handleItemMouseEnter,
       handleItemMouseLeave,

package/src/core/components/menu/menuContext.ts

@@ -1,26 +1,15 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 
 export interface MenuContextValue {
-  version: 0.0
+  version: 2
   activeElement: HTMLElement | null
-  activeIndex: number
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
   onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
-  onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void
-  onItemMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void
+  onItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+  onItemMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
   registerElement?: (el: HTMLElement) => () => void
-
-  /**
-   * @deprecated Use `onItemMouseEnter` instead
-   */
-  onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
-
-  /**
-   * @deprecated Use `onItemMouseLeave` instead
-   */
-  onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
 }
 
 export const MenuContext = createGlobalScopedContext<MenuContextValue | null>(

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

@@ -69,7 +69,7 @@ export function MenuGroup(
     onItemMouseEnter: _onItemMouseEnter,
     registerElement,
   } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
   const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)

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

@@ -76,8 +76,8 @@ export const MenuItem = forwardRef(function MenuItem(
     onItemMouseEnter: _onItemMouseEnter,
     onItemMouseLeave: _onItemMouseLeave,
   } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
-  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter
+  const onItemMouseLeave = _onItemMouseLeave ?? menu.onItemMouseLeave
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const ref = useRef<HTMLDivElement | null>(null)

package/src/core/components/menu/useMenu.ts

@@ -12,8 +12,8 @@ export function useMenu(): MenuContextValue {
 
   // NOTE: This check is for future-compatiblity
   // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 0.0) {
+  // - If the value is an object, but doesn’t have `version: 2`, it’s not compatible with the current version
+  if (!isRecord(value) || value.version !== 2) {
     throw new Error('useMenu(): the context value is not compatible')
   }
 

package/src/core/components/menu/useMenuController.ts

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 
 import {_getFocusableElements, _sortElements} from './helpers'
 
@@ -29,12 +29,12 @@ export function useMenuController(props: {
   const elementsRef = useRef<HTMLElement[]>([])
   const [activeIndex, _setActiveIndex] = useState(-1)
   const activeIndexRef = useRef(activeIndex)
-  const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
-  const mounted = Boolean(rootElementRef.current)
+  const [activeElement, setActiveElement] = useState<HTMLElement | null>(null)
 
   const setActiveIndex = useCallback((nextActiveIndex: number) => {
     _setActiveIndex(nextActiveIndex)
     activeIndexRef.current = nextActiveIndex
+    setActiveElement(elementsRef.current[nextActiveIndex] || null)
   }, [])
 
   const mount = useCallback(
@@ -183,7 +183,7 @@ export function useMenuController(props: {
 
   // Set focus on the currently active element
   useEffect(() => {
-    if (!mounted) return
+    if (!rootElementRef.current) return
 
     const rafId = requestAnimationFrame(() => {
       if (activeIndex === -1) {
@@ -218,7 +218,7 @@ export function useMenuController(props: {
     })
 
     return () => cancelAnimationFrame(rafId)
-  }, [activeIndex, mounted, setActiveIndex, shouldFocus])
+  }, [activeIndex, rootElementRef, setActiveIndex, shouldFocus])
 
   return {
     activeElement,

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

@@ -1,6 +1,6 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
+import {memo, useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 
 import {Box, BoxProps, Flex, Text} from '../../primitives'
@@ -65,18 +65,20 @@ export const TreeItem = memo(function TreeItem(
     weight,
     ...restProps
   } = props
-  const rootRef = useRef<HTMLLIElement | null>(null)
+  const [rootElement, setRootElement] = useState<HTMLLIElement | null>(null)
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
   const _id = useId()
   const id = idProp || _id
-  const itemPath = useMemo(() => path.concat([id || '']), [id, path])
-  const itemKey = itemPath.join('/')
+  const [itemPath, itemKey] = useMemo(() => {
+    const itemPath = path.concat([id || ''])
+    return [itemPath, itemPath.join('/')]
+  }, [id, path])
   const itemState = tree.state[itemKey]
-  const focused = tree.focusedElement === rootRef.current
+  const focused = tree.focusedElement === rootElement
   const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
-  const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
+  const tabIndex = tree.focusedElement && tree.focusedElement === rootElement ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
     [itemPath, tree],
@@ -95,28 +97,28 @@ export const TreeItem = memo(function TreeItem(
       ) {
         event.stopPropagation()
         setExpanded(itemKey, !expanded)
-        setFocusedElement(rootRef.current)
+        setFocusedElement(rootElement)
       }
     },
-    [expanded, itemKey, onClick, setExpanded, setFocusedElement],
+    [expanded, itemKey, onClick, rootElement, setExpanded, setFocusedElement],
   )
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       if (focused && event.key === 'Enter') {
-        const el = treeitemRef.current || rootRef.current
+        const el = treeitemRef.current || rootElement
 
         el?.click()
       }
     },
-    [focused],
+    [focused, rootElement],
   )
 
   useEffect(() => {
-    if (!rootRef.current) return
+    if (!rootElement) return
 
-    return registerItem(rootRef.current, itemPath.join('/'), expanded, selected)
-  }, [expanded, itemPath, registerItem, selected])
+    return registerItem(rootElement, itemKey, expanded, selected)
+  }, [expanded, itemKey, registerItem, rootElement, selected])
 
   const content = (
     <Flex padding={padding}>
@@ -155,7 +157,7 @@ export const TreeItem = memo(function TreeItem(
         data-ui="TreeItem"
         {...restProps}
         onClick={handleClick}
-        ref={rootRef}
+        ref={setRootElement}
         role="none"
       >
         <TreeItemBox
@@ -188,7 +190,7 @@ export const TreeItem = memo(function TreeItem(
       aria-expanded={expanded}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      ref={rootRef}
+      ref={setRootElement}
       role="treeitem"
       tabIndex={tabIndex}
     >

package/src/core/utils/portal/portalProvider.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useRef, useSyncExternalStore} from 'react'
+import {useMemo, useSyncExternalStore} from 'react'
 
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
@@ -23,8 +23,7 @@ export interface PortalProviderProps {
  * @public
  */
 export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
-  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
-  const elements = useUnique(elementsProp)
+  const {boundaryElement, children, element, __unstable_elements: elements} = props
   const fallbackElement = useSyncExternalStore(
     emptySubscribe,
     () => document.body,
@@ -46,34 +45,3 @@ export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
 PortalProvider.displayName = 'PortalProvider'
 
 const emptySubscribe = () => () => {}
-
-/**
- * This is a React hook to make sure that a record identity is the same on every render. Uses strict
- * equality comparison (eg by identity), and only goes one level deep.
- */
-function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
-  const valueRef = useRef<ValueType>(value)
-
-  if (!_isEqual(valueRef.current, value)) {
-    valueRef.current = value
-  }
-
-  return valueRef.current
-}
-
-function _isEqual(objA: Comparable, objB: Comparable): boolean {
-  if (!objA || !objB) {
-    return objA === objB
-  }
-
-  const keysA = Object.keys(objA)
-  const keysB = Object.keys(objB)
-
-  if (keysA.length !== keysB.length) {
-    return false
-  }
-
-  return keysA.every((key) => objA[key] === objB[key])
-}
-
-type Comparable = Record<string | number | symbol, unknown> | undefined | null