@sanity/ui 3.0.0-static.11 → 3.0.0-static.13

package/src/ui/components/tree/tree.tsx

@@ -1,12 +1,8 @@
-import {GapStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {ResponsiveProp} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
 import {
   FocusEvent,
-  ForwardedRef,
-  forwardRef,
   KeyboardEvent,
-  memo,
-  ReactElement,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -16,229 +12,240 @@ import {
 } from 'react'
 
 import {Stack} from '../../primitives'
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
 import {TreeContext} from './treeContext'
 import {TreeContextValue, TreeState} from './types'
 
+/** @beta */
+export const DEFAULT_TREE_ELEMENT = 'div'
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface TreeProps extends Pick<GapStyleProps, 'gap'> {
+export type TreeOwnProps = {
+  gap?: ResponsiveProp<Space>
   /** @deprecated Use `gap` instead. */
   space?: 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: Props<TreeProps, 'div'>,
-    forwardedRef: ForwardedRef<HTMLDivElement>,
-  ): ReactElement {
-    const {children, gap, 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>) {
+  const {
+    children,
+    gap,
+    space = 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,
+      level: 0,
+      path,
+      registerItem,
+      setExpanded,
+      setFocusedElement,
+      space,
+      state,
+    }),
+    [focusedElement, itemElements, path, registerItem, setExpanded, space, 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: 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,
-          )
+        return
+      }
 
-          if (prevEl) {
-            _focusItemElement(prevEl)
-            setFocusedElement(prevEl)
-          }
-
-          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: 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}
-          gap={gap ?? space}
-          onFocus={handleFocus}
-          onKeyDown={handleKeyDown}
-          ref={ref}
-          role="tree"
-        >
-          {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 ?? space}
+        onFocus={handleFocus}
+        onKeyDown={handleKeyDown}
+        ref={ref}
+        role="tree"
+      >
+        {children}
+      </Stack>
+    </TreeContext.Provider>
+  )
+}
+
+Tree.displayName = 'Tree'

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

@@ -1,30 +1,50 @@
 import {memo, ReactElement} from 'react'
 
 import {Stack} from '../../primitives'
-import {Props} from '../../types'
+import {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
 }
 
+/** @public */
+export type TreeGroupProps<E extends TreeGroupElementType = TreeGroupElementType> = Props<
+  TreeGroupOwnProps,
+  E
+>
+
 export const TreeGroup = memo(function TreeGroup(
   props: Props<TreeGroupProps, 'div'>,
 ): ReactElement {
-  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}
       role="group"
-      space={tree.space}
+      gap={tree.space}
     >
       {children}
     </Stack>
   )
 })
+
+TreeGroup.displayName = 'TreeGroup'

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

@@ -4,10 +4,10 @@ import {FontTextSize, Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {
   ElementType,
   KeyboardEvent,
-  memo,
   MouseEvent,
-  ReactElement,
+  MouseEventHandler,
   ReactNode,
+  Ref,
   useCallback,
   useEffect,
   useId,
@@ -15,37 +15,48 @@ import {
   useRef,
 } from 'react'
 
-import {Box, CardProps, Flex, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {Props} from '../../types'
+import {Box, BoxProps, CardOwnProps, Flex, Text} from '../../primitives'
+import {Selectable, SelectableElementType} from '../../primitives/_selectable'
+import {ComponentType, Props} from '../../types'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
 import {useTree} from './useTree'
 
-/**
- * @beta
- */
-export interface TreeItemProps extends CardProps {
+/** @beta */
+export const DEFAULT_TREE_ITEM_ELEMENT = 'a'
+
+/** @beta */
+export type TreeItemOwnProps = CardOwnProps & {
   expanded?: boolean
   fontSize?: ResponsiveProp<FontTextSize>
   icon?: ElementType
   /**
    * Allows passing a custom element type to the link component
    */
-  linkAs?: ElementType
+  linkAs?: SelectableElementType
+  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
   padding?: ResponsiveProp<Space>
   space?: ResponsiveProp<Space>
   text?: ReactNode
   weight?: ThemeFontWeightKey
 }
 
+/** @beta */
+export type TreeItemElementType = 'a' | 'li' | ComponentType
+
+/** @beta */
+export type TreeItemProps<E extends TreeItemElementType = TreeItemElementType> = Props<
+  TreeItemOwnProps,
+  E
+>
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export const TreeItem = memo(function TreeItem(
-  props: Omit<Props<TreeItemProps, 'div'>, 'as'>,
-): ReactElement {
+export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(
+  props: TreeItemProps<E>,
+) {
   const {
     children,
     className,
@@ -63,9 +74,10 @@ export const TreeItem = memo(function TreeItem(
     space = 2,
     text,
     weight,
-    ...restProps
-  } = props
-  const rootRef = useRef<HTMLDivElement | null>(null)
+    ...rest
+  } = props as TreeItemProps<typeof DEFAULT_TREE_ITEM_ELEMENT>
+
+  const rootRef = useRef<HTMLElement | null>(null)
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
@@ -83,7 +95,7 @@ export const TreeItem = memo(function TreeItem(
   )
 
   const handleClick = useCallback(
-    (event: MouseEvent<HTMLDivElement>) => {
+    (event: MouseEvent<HTMLAnchorElement> | MouseEvent<HTMLLIElement>) => {
       if (onClick) onClick(event)
 
       const target = event.target
@@ -152,11 +164,11 @@ export const TreeItem = memo(function TreeItem(
         data-tree-id={id}
         data-tree-key={itemKey}
         data-ui="TreeItem"
-        {...restProps}
+        {...(rest as BoxProps<'li'>)}
         as="li"
         className={composeClassNames(className, treeItem())}
         onClick={handleClick}
-        ref={rootRef}
+        ref={rootRef as Ref<HTMLLIElement>}
         role="none"
       >
         <Selectable
@@ -189,12 +201,12 @@ export const TreeItem = memo(function TreeItem(
       data-ui="TreeItem"
       data-tree-id={id}
       data-tree-key={itemKey}
-      {...restProps}
+      {...(rest as BoxProps<'a'>)}
       aria-expanded={expanded}
       className={composeClassNames(className, treeItem())}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      ref={rootRef}
+      ref={rootRef as Ref<HTMLAnchorElement>}
       role="treeitem"
       tabIndex={tabIndex}
     >
@@ -215,6 +227,6 @@ export const TreeItem = memo(function TreeItem(
       </TreeContext.Provider>
     </Box>
   )
-})
+}
 
-TreeItem.displayName = 'Memo(TreeItem)'
+TreeItem.displayName = 'TreeItem'

package/src/ui/hooks/useClickOutside.ts

@@ -2,14 +2,10 @@ import {useEffect, useRef, useState} from 'react'
 
 import {EMPTY_ARRAY} from '../constants'
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideListener = (event: MouseEvent) => void
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
 function _getElements(

package/src/ui/hooks/useClickOutsideEvent.ts

@@ -3,19 +3,13 @@ import {useEffectEvent} from 'use-effect-event'
 
 import {EMPTY_ARRAY} from '../constants'
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideEventListener = (event: MouseEvent) => void
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
-/**
- * @public
- */
+/** @public */
 export function useClickOutsideEvent(
   listener: ClickOutsideEventListener | false | undefined,
   elementsArg: () => ClickOutsideEventElements = () => EMPTY_ARRAY,