@sanity/ui 4.0.0-static.4 → 4.0.0-static.40

package/src/core/components/tree/{tree.tsx → Tree.tsx}

@@ -11,10 +11,10 @@ import {
   useState,
 } from 'react'
 
-import {Stack} from '../../primitives/stack/stack'
+import {Stack} from '../../primitives/stack/Stack'
 import type {ComponentType, Props} from '../../types'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
-import {TreeContext} from './treeContext'
+import {TreeContext} from './TreeContext'
 import type {TreeContextValue, TreeState} from './types'
 
 /** @beta */
@@ -230,7 +230,7 @@ export function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
   }, [children])
 
   return (
-    <TreeContext.Provider value={contextValue}>
+    <TreeContext value={contextValue}>
       <Stack
         as="ul"
         data-ui="Tree"
@@ -243,6 +243,6 @@ export function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
       >
         {children}
       </Stack>
-    </TreeContext.Provider>
+    </TreeContext>
   )
 }

package/src/core/components/tree/{treeContext.ts → TreeContext.ts}

@@ -7,4 +7,4 @@ import type {TreeContextValue} from './types'
  * @internal
  */
 export const TreeContext: Context<TreeContextValue | null> =
-  createGlobalScopedContext<TreeContextValue | null>('@sanity/ui/v3/tree', null)
+  createGlobalScopedContext<TreeContextValue | null>('@sanity/ui/v4/tree', null)

package/src/core/components/tree/{treeGroup.tsx → TreeGroup.tsx}

@@ -1,4 +1,4 @@
-import {Stack} from '../../primitives/stack/stack'
+import {Stack} from '../../primitives/stack/Stack'
 import type {ComponentType, Props} from '../../types'
 import {useTree} from './useTree'
 

package/src/core/components/tree/{treeItem.tsx → TreeItem.tsx}

@@ -7,22 +7,22 @@ import {
   type MouseEvent,
   type MouseEventHandler,
   type ReactNode,
-  type Ref,
   useCallback,
   useEffect,
   useId,
   useMemo,
   useRef,
+  useState,
 } from 'react'
 
-import {Box, type BoxProps} from '../../primitives/box/box'
-import type {CardOwnProps} from '../../primitives/card/card'
-import {Flex} from '../../primitives/flex/flex'
-import {Selectable, type SelectableElementType} from '../../primitives/selectable/selectable'
-import {Text} from '../../primitives/text/text'
+import {Box, type BoxProps} from '../../primitives/box/Box'
+import type {CardOwnProps} from '../../primitives/card/Card'
+import {Flex} from '../../primitives/flex/Flex'
+import {Selectable, type SelectableElementType} from '../../primitives/selectable/Selectable'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
-import {TreeContext} from './treeContext'
-import {TreeGroup} from './treeGroup'
+import {TreeContext} from './TreeContext'
+import {TreeGroup} from './TreeGroup'
 import {useTree} from './useTree'
 
 /** @beta */
@@ -81,17 +81,19 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
     ...rest
   } = props as TreeItemProps<typeof DEFAULT_TREE_ITEM_ELEMENT>
 
-  const rootRef = useRef<HTMLElement | 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 expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
-  const focused = tree.focusedElement && tree.focusedElement === rootRef.current
+  const focused = tree.focusedElement && tree.focusedElement === rootElement
   const tabIndex = focused ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
@@ -111,28 +113,28 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
       ) {
         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: 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 gap={space} padding={padding}>
@@ -172,7 +174,7 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
         as="li"
         className={treeItem({className})}
         onClick={handleClick}
-        ref={rootRef as Ref<HTMLLIElement>}
+        ref={setRootElement}
         role="none"
       >
         <Selectable
@@ -193,9 +195,9 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
           {content}
         </Selectable>
 
-        <TreeContext.Provider value={contextValue}>
+        <TreeContext value={contextValue}>
           {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
-        </TreeContext.Provider>
+        </TreeContext>
       </Box>
     )
   }
@@ -211,7 +213,8 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
       className={treeItem({className})}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      ref={rootRef as Ref<HTMLAnchorElement>}
+      // @ts-expect-error - TODO: fix this
+      ref={setRootElement}
       role="treeitem"
       tabIndex={tabIndex}
     >
@@ -229,9 +232,9 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
         {content}
       </Selectable>
 
-      <TreeContext.Provider value={contextValue}>
+      <TreeContext value={contextValue}>
         {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
-      </TreeContext.Provider>
+      </TreeContext>
     </Box>
   )
 }

package/src/core/components/tree/__workshop__/index.ts

@@ -8,14 +8,14 @@ const scope: WorkshopScope = {
     {
       name: 'basic',
       title: 'Basic',
-      component: lazy(() => import('./basic')),
-      // options: {perfTests: () => import('./basic.perf')},
+      component: lazy(() => import('./Basic')),
+      // options: {perfTests: () => import('./Basic.perf')},
     },
     {
       name: 'tab',
       title: 'Tab',
-      component: lazy(() => import('./tabFromElement')),
-      // options: {perfTests: () => import('./basic.perf')},
+      component: lazy(() => import('./TabFromElement')),
+      // options: {perfTests: () => import('./Basic.perf')},
     },
   ],
 }

package/src/core/components/tree/useTree.ts

@@ -1,13 +1,13 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
-import {TreeContext} from './treeContext'
+import {TreeContext} from './TreeContext'
 import type {TreeContextValue} from './types'
 
 /**
  * @beta
  */
 export function useTree(): TreeContextValue {
-  const tree = useContext(TreeContext)
+  const tree = use(TreeContext)
 
   if (!tree) {
     throw new Error('Tree: missing context value')

package/src/core/components/virtualList/{virtualList.tsx → VirtualList.tsx}

@@ -3,6 +3,7 @@ import type {Space} from '@sanity/ui/theme'
 import {
   type CSSProperties,
   type ReactNode,
+  startTransition,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -12,7 +13,7 @@ import {
 
 import {_isScrollable} from '../../helpers/scroll'
 import {_ResizeObserver} from '../../observers/resize'
-import {Box} from '../../primitives/box/box'
+import {Box} from '../../primitives/box/Box'
 import type {ComponentType, Props} from '../../types'
 
 /** @beta */
@@ -29,7 +30,10 @@ export interface VirtualListChangeOpts {
 }
 
 /** @beta */
-export type VirtualListOwnProps<Item = any> = {
+export type VirtualListOwnProps<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Item = any,
+> = {
   gap?: Space
   getItemKey?: (item: Item, itemIndex: number) => string
   items?: Item[]
@@ -113,6 +117,7 @@ export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VI
     window.addEventListener('scroll', handleScroll, {passive: true})
     window.addEventListener('resize', handleResize)
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setScrollHeight(window.innerHeight)
 
     handleScroll()
@@ -141,51 +146,21 @@ export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VI
 
   useEffect(() => {
     // console.log('renderItem', renderItem)
-    setItemHeight(-1)
+    startTransition(() => setItemHeight(-1))
   }, [renderItem])
 
-  const children = useMemo(() => {
-    if (!renderItem || items.length === 0) return null
-
-    if (itemHeight === -1) {
-      return [
-        <>
-          <Box
-            ref={(el) => (el ? setItemHeight(el.offsetHeight) : undefined)}
-            insetTop={0}
-            insetLeft={0}
-            insetRight={0}
-            key={0}
-            position="absolute"
-          >
-            {renderItem(items[0])}
-          </Box>
-          <div
-            ref={(el) => (el ? setGapValue(el.offsetHeight) : undefined)}
-            style={{height: vars.space[gap]}}
-          />
-        </>,
-      ]
-    }
-
-    return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
-      const itemIndex = fromIndex + _itemIndex
-      const node = renderItem(item)
-      const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
-
-      return (
-        <Box
-          insetLeft={0}
-          insetRight={0}
-          key={key}
-          position="absolute"
-          style={{top: itemIndex * (itemHeight + gapValue)}}
-        >
-          {node}
-        </Box>
-      )
-    })
-  }, [fromIndex, gap, gapValue, getItemKey, itemHeight, items, renderItem, toIndex])
+  const children = useChildren({
+    fromIndex,
+    gap,
+    getItemKey,
+    itemHeight,
+    items,
+    renderItem,
+    toIndex,
+    gapValue,
+    setGapValue,
+    setItemHeight,
+  })
 
   const wrapperStyle: CSSProperties = useMemo(() => ({height}), [height])
 
@@ -198,6 +173,73 @@ export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VI
   )
 }
 
+function useChildren({
+  fromIndex,
+  gap,
+  getItemKey,
+  itemHeight,
+  items,
+  renderItem,
+  toIndex,
+  gapValue,
+  setGapValue,
+  setItemHeight,
+}: Pick<VirtualListProps, 'getItemKey' | 'renderItem'> &
+  Required<Pick<VirtualListProps, 'items'>> & {
+    fromIndex: number
+    gap: Space
+    itemHeight: number
+    toIndex: number
+    gapValue: number
+    setGapValue: React.Dispatch<React.SetStateAction<number>>
+    setItemHeight: React.Dispatch<React.SetStateAction<number>>
+  }) {
+  if (!renderItem || items.length === 0) return null
+
+  if (itemHeight === -1) {
+    return [
+      <>
+        <Box
+          ref={(el) => {
+            if (el) setItemHeight(el.offsetHeight)
+          }}
+          insetTop={0}
+          insetLeft={0}
+          insetRight={0}
+          key={0}
+          position="absolute"
+        >
+          {renderItem(items[0])}
+        </Box>
+        <div
+          ref={(el) => {
+            if (el) setGapValue(el.offsetHeight)
+          }}
+          style={{height: vars.space[gap]}}
+        />
+      </>,
+    ]
+  }
+
+  return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
+    const itemIndex = fromIndex + _itemIndex
+    const node = renderItem(item)
+    const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
+
+    return (
+      <Box
+        insetLeft={0}
+        insetRight={0}
+        key={key}
+        position="absolute"
+        style={{top: itemIndex * (itemHeight + gapValue)}}
+      >
+        {node}
+      </Box>
+    )
+  })
+}
+
 function findScrollable(parentNode: ParentNode | null) {
   let _scrollEl = parentNode
 

package/src/core/components/virtualList/__workshop__/index.ts

@@ -8,22 +8,22 @@ const scope: WorkshopScope = {
     {
       name: 'window-scroll',
       title: 'Window scroll',
-      component: lazy(() => import('./windowScrolll')),
+      component: lazy(() => import('./WindowScrolll')),
     },
     {
       name: 'element-scroll',
       title: 'Element scroll',
-      component: lazy(() => import('./elementScroll')),
+      component: lazy(() => import('./ElementScroll')),
     },
     {
       name: 'infinite-list',
       title: 'Infinite list',
-      component: lazy(() => import('./infiniteList')),
+      component: lazy(() => import('./InfiniteList')),
     },
     {
       name: 'changing-props',
       title: 'Changing props',
-      component: lazy(() => import('./changingProps')),
+      component: lazy(() => import('./ChangingProps')),
     },
   ],
 }

package/src/core/helpers/props.ts

@@ -4,15 +4,6 @@ import {EMPTY_ARRAY} from '../constants'
 import {isArray} from '../lib/isArray'
 import {isRecord} from '../lib/isRecord'
 
-/**
- * @internal
- */
-export function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
-  if (val === undefined) return defaultVal || EMPTY_ARRAY
-
-  return Array.isArray(val) ? val : [val]
-}
-
 /**
  * @internal
  */

package/src/core/hooks/useGlobalKeyDown.ts

@@ -2,16 +2,23 @@ import {useEffect} from 'react'
 import {useEffectEvent} from 'use-effect-event'
 
 /**
+ * Adds global keydown event listener to the window.
+ *
+ * @param onKeyDown - The function to call when a keydown event is triggered.
+ * @param options - The options to pass to the addEventListener function (example, capture: true)
  * @beta
  */
-export function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void {
+export function useGlobalKeyDown(
+  onKeyDown: (event: KeyboardEvent) => void,
+  options?: AddEventListenerOptions,
+): void {
   const handleKeyDown = useEffectEvent((event: KeyboardEvent) => onKeyDown(event))
 
   useEffect(() => {
     const handler = (event: KeyboardEvent) => handleKeyDown(event)
 
-    window.addEventListener('keydown', handler)
+    window.addEventListener('keydown', handler, options)
 
-    return () => window.removeEventListener('keydown', handler)
-  }, [])
+    return () => window.removeEventListener('keydown', handler, options)
+  }, [options])
 }

package/src/core/hooks/useMediaIndex/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'test',
       title: 'Test',
-      component: lazy(() => import('./test')),
+      component: lazy(() => import('./Test')),
     },
   ],
 }

package/src/core/hooks/useResponsiveProp.ts

@@ -1,28 +1,15 @@
 import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
-import {useState} from 'react'
+import {useMemo} from 'react'
 
 import {_getResponsiveProp} from '../helpers/props'
 
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @internal
+ * @deprecated use `_getResponsiveProp` directly instead, if necessary
  */
 export function useResponsiveProp<T>(
   val: ResponsiveProp<T> | undefined,
   defaultVal?: Partial<Record<Breakpoint, T>>,
 ): Partial<Record<Breakpoint, T>> {
-  const [[cachedVal, cachedHash], setCache] = useState<[Partial<Record<Breakpoint, T>>, string]>(
-    () => [_getResponsiveProp(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.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-    setCache([_getResponsiveProp(val, defaultVal), hash])
-  }
-
-  return cachedVal
+  return useMemo(() => _getResponsiveProp(val, defaultVal), [defaultVal, val])
 }