@sanity/ui 3.0.11 → 3.0.12-canary.1

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

@@ -1,6 +1,5 @@
 import {
   forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -26,212 +25,207 @@ export interface TreeProps {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export const Tree = memo(
-  forwardRef(function Tree(
-    props: TreeProps &
-      Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-    forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.JSX.Element {
-    const {children, space = 1, onFocus, ...restProps} = props
-    const ref = useRef<HTMLDivElement | null>(null)
-    const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
-    const focusedElementRef = useRef(focusedElement)
-    const path: string[] = useMemo(() => [], [])
-    const [itemElements, setItemElements] = useState<HTMLElement[]>([])
-    const [state, setState] = useState<TreeState>({})
-    const stateRef = useRef(state)
-
-    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
-      forwardedRef,
-      () => ref.current,
-    )
-
-    useEffect(() => {
-      focusedElementRef.current = focusedElement
-    }, [focusedElement])
-
-    useEffect(() => {
-      stateRef.current = state
-    }, [state])
-
-    const registerItem = useCallback(
-      (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => {
-        setState((s) => ({...s, [path]: {element, expanded}}))
-
-        if (selected) {
-          setFocusedElement(element)
+export const Tree = forwardRef(function Tree(
+  props: TreeProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+): React.JSX.Element {
+  const {children, space = 1, onFocus, ...restProps} = props
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
+  const focusedElementRef = useRef(focusedElement)
+  const path: string[] = useMemo(() => [], [])
+  const [itemElements, setItemElements] = useState<HTMLElement[]>([])
+  const [state, setState] = useState<TreeState>({})
+  const stateRef = useRef(state)
+
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+
+  useEffect(() => {
+    focusedElementRef.current = focusedElement
+  }, [focusedElement])
+
+  useEffect(() => {
+    stateRef.current = state
+  }, [state])
+
+  const registerItem = useCallback(
+    (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => {
+      setState((s) => ({...s, [path]: {element, expanded}}))
+
+      if (selected) {
+        setFocusedElement(element)
+      }
+
+      return () => {
+        setState((s) => {
+          const newState = {...s}
+
+          delete newState[path]
+
+          return newState
+        })
+      }
+    },
+    [],
+  )
+
+  const setExpanded = useCallback((path: string, expanded: boolean) => {
+    setState((s) => {
+      const itemState = s[path]
+
+      if (!itemState) return s
+
+      return {...s, [path]: {...itemState, expanded}}
+    })
+  }, [])
+
+  const contextValue: TreeContextValue = useMemo(
+    () => ({
+      version: 0.0,
+      focusedElement: focusedElement || itemElements[0] || null,
+      level: 0,
+      path,
+      registerItem,
+      setExpanded,
+      setFocusedElement,
+      space,
+      state,
+    }),
+    [focusedElement, itemElements, path, registerItem, setExpanded, space, state],
+  )
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!focusedElementRef.current) return
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+
+        const nextEl = _findNextItemElement(
+          stateRef.current,
+          itemElements,
+          focusedElementRef.current,
+        )
+
+        if (nextEl) {
+          _focusItemElement(nextEl)
+          setFocusedElement(nextEl)
         }
 
-        return () => {
-          setState((s) => {
-            const newState = {...s}
+        return
+      }
 
-            delete newState[path]
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
 
-            return newState
-          })
-        }
-      },
-      [],
-    )
-
-    const setExpanded = useCallback((path: string, expanded: boolean) => {
-      setState((s) => {
-        const itemState = s[path]
-
-        if (!itemState) return s
-
-        return {...s, [path]: {...itemState, expanded}}
-      })
-    }, [])
-
-    const contextValue: TreeContextValue = useMemo(
-      () => ({
-        version: 0.0,
-        focusedElement: focusedElement || itemElements[0] || null,
-        level: 0,
-        path,
-        registerItem,
-        setExpanded,
-        setFocusedElement,
-        space,
-        state,
-      }),
-      [focusedElement, itemElements, path, registerItem, setExpanded, space, state],
-    )
-
-    const handleKeyDown = useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (!focusedElementRef.current) return
-
-        if (event.key === 'ArrowDown') {
-          event.preventDefault()
-
-          const nextEl = _findNextItemElement(
-            stateRef.current,
-            itemElements,
-            focusedElementRef.current,
-          )
-
-          if (nextEl) {
-            _focusItemElement(nextEl)
-            setFocusedElement(nextEl)
-          }
+        const prevEl = _findPrevItemElement(
+          stateRef.current,
+          itemElements,
+          focusedElementRef.current,
+        )
 
-          return
+        if (prevEl) {
+          _focusItemElement(prevEl)
+          setFocusedElement(prevEl)
         }
 
-        if (event.key === 'ArrowUp') {
-          event.preventDefault()
-
-          const prevEl = _findPrevItemElement(
-            stateRef.current,
-            itemElements,
-            focusedElementRef.current,
-          )
-
-          if (prevEl) {
-            _focusItemElement(prevEl)
-            setFocusedElement(prevEl)
-          }
-
-          return
-        }
+        return
+      }
 
-        if (event.key === 'ArrowLeft') {
-          event.preventDefault()
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
 
-          const itemKey = focusedElementRef.current.getAttribute('data-tree-key')
+        const itemKey = focusedElementRef.current.getAttribute('data-tree-key')
 
-          if (!itemKey) return
+        if (!itemKey) return
 
-          const itemState = stateRef.current[itemKey]
+        const itemState = stateRef.current[itemKey]
 
-          if (!itemState) return
+        if (!itemState) return
 
-          if (itemState.expanded) {
-            setState((s) => {
-              const itemState = s[itemKey]
+        if (itemState.expanded) {
+          setState((s) => {
+            const itemState = s[itemKey]
 
-              if (!itemState) return s
+            if (!itemState) return s
 
-              return {...s, [itemKey]: {...itemState, expanded: false}}
-            })
-          } else {
-            const itemPath = itemKey.split('/')
+            return {...s, [itemKey]: {...itemState, expanded: false}}
+          })
+        } else {
+          const itemPath = itemKey.split('/')
 
-            itemPath.pop()
+          itemPath.pop()
 
-            const parentKey = itemPath.join('/')
-            const parentState = parentKey && stateRef.current[parentKey]
+          const parentKey = itemPath.join('/')
+          const parentState = parentKey && stateRef.current[parentKey]
 
-            if (parentState) {
-              parentState.element.focus()
-              setFocusedElement(parentState.element)
-            }
+          if (parentState) {
+            parentState.element.focus()
+            setFocusedElement(parentState.element)
           }
-
-          return
         }
 
-        if (event.key === 'ArrowRight') {
-          event.preventDefault()
+        return
+      }
 
-          const focusedKey = focusedElementRef.current.getAttribute('data-tree-key')
+      if (event.key === 'ArrowRight') {
+        event.preventDefault()
 
-          if (!focusedKey) return
+        const focusedKey = focusedElementRef.current.getAttribute('data-tree-key')
 
-          if (!stateRef.current[focusedKey]?.expanded) {
-            setState((s) => {
-              const itemState = s[focusedKey]
+        if (!focusedKey) return
 
-              if (!itemState) return s
+        if (!stateRef.current[focusedKey]?.expanded) {
+          setState((s) => {
+            const itemState = s[focusedKey]
 
-              return {...s, [focusedKey]: {...itemState, expanded: true}}
-            })
-          }
+            if (!itemState) return s
 
-          return
+            return {...s, [focusedKey]: {...itemState, expanded: true}}
+          })
         }
-      },
-      [itemElements],
-    )
-
-    const handleFocus = useCallback(
-      (event: React.FocusEvent<HTMLDivElement>) => {
-        setFocusedElement(event.target)
-
-        // Call the element's `focus` handler
-        onFocus?.(event)
-      },
-      [onFocus],
-    )
-
-    useEffect(() => {
-      if (!ref.current) return
-      const _itemElements = Array.from(
-        ref.current.querySelectorAll('[data-ui="TreeItem"]'),
-      ) as HTMLElement[]
-
-      setItemElements(_itemElements)
-    }, [children])
-
-    return (
-      <TreeContext.Provider value={contextValue}>
-        <Stack
-          as="ul"
-          data-ui="Tree"
-          {...restProps}
-          onFocus={handleFocus}
-          onKeyDown={handleKeyDown}
-          ref={ref}
-          role="tree"
-          space={space}
-        >
-          {children}
-        </Stack>
-      </TreeContext.Provider>
-    )
-  }),
-)
-Tree.displayName = 'Memo(ForwardRef(Tree))'
+
+        return
+      }
+    },
+    [itemElements],
+  )
+
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLDivElement>) => {
+      setFocusedElement(event.target)
+
+      // Call the element's `focus` handler
+      onFocus?.(event)
+    },
+    [onFocus],
+  )
+
+  useEffect(() => {
+    if (!ref.current) return
+    const _itemElements = Array.from(
+      ref.current.querySelectorAll('[data-ui="TreeItem"]'),
+    ) as HTMLElement[]
+
+    setItemElements(_itemElements)
+  }, [children])
+
+  return (
+    <TreeContext.Provider value={contextValue}>
+      <Stack
+        as="ul"
+        data-ui="Tree"
+        {...restProps}
+        onFocus={handleFocus}
+        onKeyDown={handleKeyDown}
+        ref={ref}
+        role="tree"
+        space={space}
+      >
+        {children}
+      </Stack>
+    </TreeContext.Provider>
+  )
+})
+Tree.displayName = 'ForwardRef(Tree)'

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

@@ -1,5 +1,3 @@
-import {memo} from 'react'
-
 import {Stack} from '../../primitives'
 import {useTree} from './useTree'
 
@@ -7,7 +5,7 @@ export interface TreeGroupProps {
   expanded?: boolean
 }
 
-export const TreeGroup = memo(function TreeGroup(
+export function TreeGroup(
   props: TreeGroupProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
 ): React.JSX.Element {
@@ -27,4 +25,4 @@ export const TreeGroup = memo(function TreeGroup(
       {children}
     </Stack>
   )
-})
+}

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, useState} from 'react'
+import {useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 
 import {Box, BoxProps, Flex, Text} from '../../primitives'
@@ -31,7 +31,7 @@ export interface TreeItemProps {
   weight?: ThemeFontWeightKey
 }
 
-const StyledTreeItem = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
+const StyledTreeItem = styled.li(treeItemRootStyle, treeItemRootColorStyle)
 
 const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
 
@@ -45,7 +45,7 @@ const ToggleArrowText = styled(Text)`
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export const TreeItem = memo(function TreeItem(
+export function TreeItem(
   props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
 ): React.JSX.Element {
   const {
@@ -203,5 +203,5 @@ export const TreeItem = memo(function TreeItem(
       </TreeContext.Provider>
     </StyledTreeItem>
   )
-})
-TreeItem.displayName = 'Memo(TreeItem)'
+}
+TreeItem.displayName = 'TreeItem'

package/src/core/hooks/index.ts

@@ -1,4 +1,4 @@
-export * from './useArrayProp'
+export {type ArrayPropPrimitive, useArrayProp} from './useArrayProp'
 export * from './useClickOutside'
 export * from './useClickOutsideEvent'
 export * from './useCustomValidity'

package/src/core/hooks/useArrayProp.ts

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useMemo} from 'react'
 
 import {_getArrayProp} from '../styles'
 
@@ -6,26 +6,14 @@ import {_getArrayProp} from '../styles'
 export type ArrayPropPrimitive = string | number | boolean | undefined | null
 
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
+ * @deprecated instead of `useArrayProp(width)` use `Array.isArray(width) ? width : [width]` instead
  * @beta
  */
 export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[],
 ): T[] {
-  const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
-    _getArrayProp(val, defaultVal),
-    JSON.stringify(val ?? defaultVal),
-  ])
-
-  const hash = JSON.stringify(val ?? defaultVal)
-
-  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
+  return useMemo(() => _getArrayProp(val, defaultVal), [val, defaultVal])
 }
+
+export {_getArrayProp as getArrayProp}

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

@@ -1,9 +1,9 @@
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useId, useState} from 'react'
 import ReactIs from 'react-is'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 import {useTheme_v2} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Label} from '../label'
@@ -75,7 +75,7 @@ export const Avatar = forwardRef(function Avatar(
   } = props
   const {avatar} = useTheme_v2()
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
-  const size = useArrayProp(sizeProp)
+  const size = getArrayProp(sizeProp)
 
   // eslint-disable-next-line no-warning-comments
   // @todo: remove this
@@ -113,18 +113,6 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
-  const initialsSize = useMemo(
-    () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
-
-        return 0
-      }),
-    [size],
-  )
-
   return (
     <StyledAvatar
       as={as}
@@ -181,7 +169,17 @@ export const Avatar = forwardRef(function Avatar(
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <InitialsLabel forwardedAs="span" size={initialsSize} weight="medium">
+            <InitialsLabel
+              forwardedAs="span"
+              size={size.map((s) => {
+                if (s === 1) return 1
+                if (s === 2) return 3
+                if (s === 3) return 5
+
+                return 0
+              })}
+              weight="medium"
+            >
               {initials}
             </InitialsLabel>
           </Initials>

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

@@ -1,9 +1,9 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {css, styled} from 'styled-components'
 
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 import {_responsive, rem, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {Label} from '../label'
@@ -69,23 +69,21 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {count, size: sizeProp = 1} = props
-  const size = useArrayProp(sizeProp)
-
-  const fontSize = useMemo(
-    () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
-
-        return 0
-      }),
-    [size],
-  )
+  const size = getArrayProp(sizeProp)
 
   return (
     <StyledAvatarCounter $size={size} data-ui="AvatarCounter" ref={ref}>
-      <Label as="span" size={fontSize} weight="medium">
+      <Label
+        as="span"
+        size={size.map((s) => {
+          if (s === 1) return 1
+          if (s === 2) return 3
+          if (s === 3) return 5
+
+          return 0
+        })}
+        weight="medium"
+      >
         {count}
       </Label>
     </StyledAvatarCounter>

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

@@ -3,7 +3,7 @@ import {Children, cloneElement, forwardRef, isValidElement} from 'react'
 import {css, styled} from 'styled-components'
 
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 import {_responsive, rem, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {AvatarCounter} from './avatarCounter'
@@ -71,7 +71,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
   } = props
   const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
   const maxLength = Math.max(maxLengthProp, 0)
-  const size = useArrayProp(sizeProp)
+  const size = getArrayProp(sizeProp)
 
   const len = children.length
   const visibleCount = maxLength - 1

package/src/core/primitives/badge/badge.tsx

@@ -1,7 +1,7 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'
@@ -51,8 +51,8 @@ export const Badge = forwardRef(function Badge(
       data-ui="Badge"
       {...restProps}
       $tone={tone}
-      $radius={useArrayProp(radius)}
-      padding={useArrayProp(padding)}
+      $radius={getArrayProp(radius)}
+      padding={getArrayProp(padding)}
       ref={ref}
     >
       <Text size={fontSize}>{children}</Text>