@sanity/ui 2.8.13 → 2.9.0-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.8.13",
+  "version": "2.9.0-canary.1",
   "keywords": [
     "sanity",
     "ui",
@@ -51,32 +51,6 @@
     "src",
     "theme.js"
   ],
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "prepare": "husky install",
-    "prepack": "pnpm build",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -110,6 +84,7 @@
     "@sanity/icons": "^3.4.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
+    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -198,19 +173,37 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.12.3",
   "engines": {
     "node": ">=14.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "pnpm": {
-    "overrides": {
-      "conventional-changelog-conventionalcommits": ">= 8.0.0"
-    }
-  },
   "esm.sh": {
     "bundle": false
+  },
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   }
-}
+}

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

@@ -17,6 +17,7 @@ import {
   useMemo,
   useReducer,
   useRef,
+  useState,
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
@@ -184,21 +185,22 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     typeof filterOptionProp === 'function' ? filterOptionProp : DEFAULT_FILTER_OPTION
 
   // Element refs
-  const rootElementRef = useRef<HTMLDivElement | null>(null)
-  const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
-  const inputElementRef = useRef<HTMLInputElement | null>(null)
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const [resultsPopoverElement, setResultsPopoverElement] = useState<HTMLDivElement | null>(null)
+  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
   const listBoxElementRef = useRef<HTMLDivElement | null>(null)
 
   // Value refs
   const listFocusedRef = useRef(false)
   const valueRef = useRef(value)
   const valuePropRef = useRef(valueProp)
-  const popoverMouseWithinRef = useRef(false)
+  const [popoverMouseWithin, setPopoverMouseWithin] = useState(false)
 
   // Forward ref to parent
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
-    () => inputElementRef.current,
+    () => inputElement,
+    [inputElement],
   )
 
   const listBoxId = `${id}-listbox`
@@ -222,13 +224,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
         // closes the results in certain situations):
         // - Do not handle blur if the mouse is within the popover
-        if (popoverMouseWithinRef.current) {
+        if (popoverMouseWithin) {
           return
         }
 
         const elements: HTMLElement[] = (relatedElements || []).concat(
-          rootElementRef.current ? [rootElementRef.current] : [],
-          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
+          rootElement ? [rootElement] : [],
+          resultsPopoverElement ? [resultsPopoverElement] : [],
         )
 
         let focusInside = false
@@ -244,13 +246,20 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
         if (focusInside === false) {
           dispatch({type: 'root/blur'})
-          popoverMouseWithinRef.current = false
+          setPopoverMouseWithin(false)
           if (onQueryChange) onQueryChange(null)
           if (onBlur) onBlur(event)
         }
       }, 0)
     },
-    [onBlur, onQueryChange, relatedElements],
+    [
+      onBlur,
+      onQueryChange,
+      popoverMouseWithin,
+      relatedElements,
+      resultsPopoverElement,
+      rootElement,
+    ],
   )
 
   const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {
@@ -269,7 +278,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     (v: string) => {
       dispatch({type: 'value/change', value: v})
 
-      popoverMouseWithinRef.current = false
+      setPopoverMouseWithin(false)
 
       if (onSelect) onSelect(v)
 
@@ -278,9 +287,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       if (onChange) onChange(v)
       if (onQueryChange) onQueryChange(null)
 
-      inputElementRef.current?.focus()
+      inputElement?.focus()
     },
-    [onChange, onSelect, onQueryChange],
+    [onSelect, onChange, onQueryChange, inputElement],
   )
 
   const handleRootKeyDown = useCallback(
@@ -324,9 +333,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       if (event.key === 'Escape') {
         dispatch({type: 'root/escape'})
-        popoverMouseWithinRef.current = false
+        setPopoverMouseWithin(false)
         if (onQueryChange) onQueryChange(null)
-        inputElementRef.current?.focus()
+        inputElement?.focus()
 
         return
       }
@@ -338,12 +347,12 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         (listEl === target || listEl?.contains(target)) &&
         !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)
       ) {
-        inputElementRef.current?.focus()
+        inputElement?.focus()
 
         return
       }
     },
-    [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],
+    [activeValue, filteredOptions, filteredOptionsLen, inputElement, onQueryChange],
   )
 
   const handleInputChange = useCallback(
@@ -377,11 +386,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   )
 
   const handlePopoverMouseEnter = useCallback(() => {
-    popoverMouseWithinRef.current = true
+    setPopoverMouseWithin(true)
   }, [])
 
   const handlePopoverMouseLeave = useCallback(() => {
-    popoverMouseWithinRef.current = false
+    setPopoverMouseWithin(false)
   }, [])
 
   const handleClearButtonClick = useCallback(() => {
@@ -389,8 +398,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     valueRef.current = ''
     if (onChange) onChange('')
     if (onQueryChange) onQueryChange(null)
-    inputElementRef.current?.focus()
-  }, [onChange, onQueryChange])
+    inputElement?.focus()
+  }, [inputElement, onChange, onQueryChange])
 
   const handleClearButtonFocus = useCallback(() => {
     dispatch({type: 'input/focus'})
@@ -482,9 +491,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       if (openButtonProps.onClick) openButtonProps.onClick(event)
 
-      _raf(() => inputElementRef.current?.focus())
+      _raf(() => inputElement?.focus())
     },
-    [openButtonProps, dispatchOpen],
+    [dispatchOpen, openButtonProps, inputElement],
   )
 
   const openButtonNode = useMemo(
@@ -554,7 +563,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       prefix={prefix}
       radius={radius}
       readOnly={readOnly}
-      ref={inputElementRef}
+      ref={setInputElement}
       role="combobox"
       spellCheck={false}
       suffix={suffix || openButtonNode}
@@ -566,10 +575,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     (event: KeyboardEvent<HTMLDivElement>) => {
       // If the focus is currently in the list, move focus to the input element
       if (event.key === 'Tab') {
-        if (listFocused) inputElementRef.current?.focus()
+        if (listFocused) inputElement?.focus()
       }
     },
-    [listFocused],
+    [inputElement, listFocused],
   )
 
   const content = useMemo(() => {
@@ -635,11 +644,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         {
           content,
           hidden: !expanded,
-          inputElement: inputElementRef.current,
+          inputElement,
           onMouseEnter: handlePopoverMouseEnter,
           onMouseLeave: handlePopoverMouseLeave,
         },
-        resultsPopoverElementRef,
+        {current: resultsPopoverElement},
       )
     }
 
@@ -661,8 +670,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
         portal
         radius={radius}
-        ref={resultsPopoverElementRef}
-        referenceElement={inputElementRef.current}
+        ref={setResultsPopoverElement}
+        referenceElement={inputElement}
         {...popover}
       />
     )
@@ -672,9 +681,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     filteredOptionsLen,
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
+    inputElement,
     popover,
     radius,
     renderPopover,
+    resultsPopoverElement,
   ])
 
   return (
@@ -683,7 +694,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       onBlur={handleRootBlur}
       onFocus={handleRootFocus}
       onKeyDown={handleRootKeyDown}
-      ref={rootElementRef}
+      ref={setRootElement}
     >
       {input}
       {results}

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

@@ -305,13 +305,15 @@ export const Dialog = forwardRef(function Dialog(
     onFocus,
     padding: paddingProp = 3,
     portal: portalProp,
-    position: positionProp = dialog.position || 'fixed',
+    position: _positionProp,
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
+    zOffset: _zOffsetProp,
     animate: _animate = false,
     ...restProps
   } = props
+  const positionProp = _positionProp ?? (dialog.position || 'fixed')
+  const zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset)
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()

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

@@ -57,10 +57,12 @@ export const Menu = forwardRef(function Menu(
     originElement,
     padding = 1,
     registerElement,
-    shouldFocus = (props.focusFirst && 'first') || (props.focusLast && 'last') || null,
+    shouldFocus: _shouldFocus,
     space = 1,
     ...restProps
   } = props
+  const shouldFocus =
+    _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
   const ref = useRef<HTMLDivElement | null>(null)
 

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

@@ -53,9 +53,10 @@ export function MenuGroup(
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseEnter: _onItemMouseEnter,
     registerElement,
   } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
   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

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

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

@@ -36,31 +36,28 @@ export function useMenuController(props: {
     activeIndexRef.current = nextActiveIndex
   }, [])
 
-  const mount = useCallback(
-    (element: HTMLElement | null, selected?: boolean): (() => void) => {
-      if (!element) return () => undefined
+  const mount = (element: HTMLElement | null, selected?: boolean): (() => void) => {
+    if (!element) return () => undefined
 
-      if (elementsRef.current.indexOf(element) === -1) {
-        elementsRef.current.push(element)
-        _sortElements(rootElementRef.current, elementsRef.current)
-      }
+    if (elementsRef.current.indexOf(element) === -1) {
+      elementsRef.current.push(element)
+      _sortElements(rootElementRef.current, elementsRef.current)
+    }
 
-      if (selected) {
-        const selectedIndex = elementsRef.current.indexOf(element)
+    if (selected) {
+      const selectedIndex = elementsRef.current.indexOf(element)
 
-        setActiveIndex(selectedIndex)
-      }
+      setActiveIndex(selectedIndex)
+    }
 
-      return () => {
-        const idx = elementsRef.current.indexOf(element)
+    return () => {
+      const idx = elementsRef.current.indexOf(element)
 
-        if (idx > -1) {
-          elementsRef.current.splice(idx, 1)
-        }
+      if (idx > -1) {
+        elementsRef.current.splice(idx, 1)
       }
-    },
-    [rootElementRef, setActiveIndex],
-  )
+    }
+  }
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -170,7 +167,7 @@ export function useMenuController(props: {
     [setActiveIndex],
   )
 
-  const handleItemMouseLeave = useCallback(() => {
+  const handleItemMouseLeave = () => {
     // Set the active index to -2 to deactivate all menu items
     // when the user moves the mouse away from the menu item.
     // We avoid using -1 because it would focus the first menu item,
@@ -178,7 +175,7 @@ export function useMenuController(props: {
     // between two menu items or a menu divider.
     setActiveIndex(-2)
     rootElementRef.current?.focus()
-  }, [rootElementRef, setActiveIndex])
+  }
 
   // Set focus on the currently active element
   useEffect(() => {

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'
 import {
@@ -64,7 +64,7 @@ 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
@@ -73,9 +73,9 @@ export const TreeItem = memo(function TreeItem(
   const itemPath = useMemo(() => path.concat([id || '']), [id, path])
   const itemKey = itemPath.join('/')
   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],
@@ -94,28 +94,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, itemPath.join('/'), expanded, selected)
+  }, [expanded, itemPath, registerItem, rootElement, selected])
 
   const content = (
     <Flex padding={padding}>
@@ -154,7 +154,7 @@ export const TreeItem = memo(function TreeItem(
         data-ui="TreeItem"
         {...restProps}
         onClick={handleClick}
-        ref={rootRef}
+        ref={setRootElement}
         role="none"
       >
         <TreeItemBox
@@ -187,7 +187,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/hooks/useArrayProp.ts

@@ -1,4 +1,4 @@
-import {useMemo} from 'react'
+import {useState} from 'react'
 import {_getArrayProp} from '../styles'
 
 /** @beta */
@@ -12,14 +12,19 @@ export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[],
 ): T[] {
-  // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
-  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val])
+  const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
+    _getArrayProp(val, defaultVal),
+    JSON.stringify(val ?? defaultVal),
+  ])
 
-  return useMemo(
-    () => _getArrayProp(val, defaultVal),
+  const hash = JSON.stringify(val ?? defaultVal)
 
-    // Improve performance: Keep object identify for a given hash of the value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [__perf_hash__],
-  )
+  if (hash !== cachedHash) {
+    // If the cached hash has changed, update the cache right away.
+    // Calling setState during render is fine in this case, and preferred over a useEffect loop
+    // https://19.react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+    setCache([_getArrayProp(val, defaultVal), hash])
+  }
+
+  return cachedVal
 }

package/src/core/hooks/useMatchMedia.ts

@@ -11,34 +11,24 @@ export function useMatchMedia(
   mediaQueryString: `(${string})`,
   getServerSnapshot?: () => boolean,
 ): boolean {
+  /**
+   * `subscribe` and `getSnapshot` are only called on the client and both need access to the same `matchMedia` instance
+   * we don't want to eagerly instantiate it to ensure it's only created when actually used
+   */
+  const cachedMatchMedia = useMemo(
+    () => (typeof window === 'undefined' ? null : window.matchMedia(mediaQueryString)),
+    [mediaQueryString],
+  )
   const {subscribe, getSnapshot} = useMemo(() => {
-    /**
-     * `subscribe` and `getSnapshot` are only called on the client and both need access to the same `matchMedia` instance
-     * we don't want to eagerly instantiate it to ensure it's only created when actually used
-     */
-    let MEDIA_QUERY_CACHE: MediaQueryList | undefined
-
-    const getMatchMedia = (): MediaQueryList => {
-      if (!MEDIA_QUERY_CACHE) {
-        // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
-        // the `window` global is available and we're in a browser environment
-        MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)
-      }
-
-      return MEDIA_QUERY_CACHE
-    }
-
     return {
       subscribe: (onStoreChange: () => void): (() => void) => {
-        const matchMedia = getMatchMedia()
-
-        matchMedia.addEventListener('change', onStoreChange)
+        cachedMatchMedia!.addEventListener('change', onStoreChange)
 
-        return () => matchMedia.removeEventListener('change', onStoreChange)
+        return () => cachedMatchMedia!.removeEventListener('change', onStoreChange)
       },
-      getSnapshot: () => getMatchMedia().matches,
+      getSnapshot: () => cachedMatchMedia!.matches,
     }
-  }, [mediaQueryString])
+  }, [cachedMatchMedia])
 
   useDebugValue(mediaQueryString)
 

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,5 +1,5 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {Children, cloneElement, forwardRef, isValidElement, useMemo} from 'react'
+import {Children, cloneElement, forwardRef, isValidElement} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
@@ -65,10 +65,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children = useMemo<React.ReactElement[]>(
-    () => Children.toArray(childrenProp).filter(isValidElement),
-    [childrenProp],
-  )
+  const children: React.ReactElement[] = Children.toArray(childrenProp).filter(isValidElement)
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)