@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -1,6 +1,8 @@
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 import {
-  forwardRef,
-  memo,
+  type FocusEvent,
+  type KeyboardEvent,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -9,229 +11,238 @@ import {
   useState,
 } from 'react'
 
-import {Stack} from '../../primitives'
+import {Stack} from '../../primitives/stack/stack'
+import type {ComponentType, Props} from '../../types'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
 import {TreeContext} from './treeContext'
-import {TreeContextValue, TreeState} from './types'
+import type {TreeContextValue, TreeState} from './types'
+
+/** @beta */
+export const DEFAULT_TREE_ELEMENT = 'div'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface TreeProps {
-  space?: number | number[]
+export type TreeOwnProps = {
+  gap?: ResponsiveProp<Space>
 }
 
+/** @beta */
+export type TreeElementType = 'div' | ComponentType
+
+/** @beta */
+export type TreeProps<E extends TreeElementType = TreeElementType> = Props<TreeOwnProps, E>
+
 /**
  * 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 function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
+  props: TreeProps<E>,
+): React.JSX.Element {
+  const {
+    children,
+    gap = 1,
+    onFocus,
+    ref: forwardedRef,
+    ...rest
+  } = props as TreeProps<typeof DEFAULT_TREE_ELEMENT>
+
+  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,
+      gap,
+      level: 0,
+      path,
+      registerItem,
+      setExpanded,
+      setFocusedElement,
+      state,
+    }),
+    [focusedElement, gap, itemElements, path, registerItem, setExpanded, state],
+  )
+
+  const handleKeyDown = useCallback(
+    (event: 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: 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"
+        {...rest}
+        gap={gap}
+        onFocus={handleFocus}
+        onKeyDown={handleKeyDown}
+        ref={ref}
+        role="tree"
+      >
+        {children}
+      </Stack>
+    </TreeContext.Provider>
+  )
+}

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

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

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

@@ -1,30 +1,46 @@
-import {memo} from 'react'
-
-import {Stack} from '../../primitives'
+import {Stack} from '../../primitives/stack/stack'
+import type {ComponentType, Props} from '../../types'
 import {useTree} from './useTree'
 
-export interface TreeGroupProps {
+/** @public */
+export const DEFAULT_TREE_GROUP_ELEMENT = 'div'
+
+/** @public */
+export type TreeGroupElementType = 'div' | ComponentType
+
+/** @public */
+export type TreeGroupOwnProps = {
   expanded?: boolean
 }
 
-export const TreeGroup = memo(function TreeGroup(
-  props: TreeGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+/** @public */
+export type TreeGroupProps<E extends TreeGroupElementType = TreeGroupElementType> = Props<
+  TreeGroupOwnProps,
+  E
+>
+
+export const TreeGroup = function TreeGroup(
+  props: Props<TreeGroupProps, 'div'>,
 ): React.JSX.Element {
-  const {children, expanded = false, ...restProps} = props
+  const {
+    children,
+    expanded = false,
+    ...rest
+  } = props as TreeGroupProps<typeof DEFAULT_TREE_GROUP_ELEMENT>
+
   const tree = useTree()
 
   return (
     <Stack
       as="ul"
       data-ui="TreeGroup"
-      {...restProps}
+      {...rest}
       hidden={!expanded}
-      marginTop={tree.space}
+      marginTop={tree.gap}
       role="group"
-      space={tree.space}
+      gap={tree.gap}
     >
       {children}
     </Stack>
   )
-})
+}