@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

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

@@ -1,248 +0,0 @@
-import type {ResponsiveProp} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
-import {
-  type FocusEvent,
-  type KeyboardEvent,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import {Stack} from '../../primitives/stack/Stack'
-import type {ComponentType, Props} from '../../types'
-import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
-import {TreeContext} from './TreeContext'
-import type {TreeContextValue, TreeState} from './types'
-
-/** @beta */
-export const DEFAULT_TREE_ELEMENT = 'div'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-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 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
-      }
-
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
-
-        const prevEl = _findPrevItemElement(
-          stateRef.current,
-          itemElements,
-          focusedElementRef.current,
-        )
-
-        if (prevEl) {
-          _focusItemElement(prevEl)
-          setFocusedElement(prevEl)
-        }
-
-        return
-      }
-
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault()
-
-        const itemKey = focusedElementRef.current.getAttribute('data-tree-key')
-
-        if (!itemKey) return
-
-        const itemState = stateRef.current[itemKey]
-
-        if (!itemState) return
-
-        if (itemState.expanded) {
-          setState((s) => {
-            const itemState = s[itemKey]
-
-            if (!itemState) return s
-
-            return {...s, [itemKey]: {...itemState, expanded: false}}
-          })
-        } else {
-          const itemPath = itemKey.split('/')
-
-          itemPath.pop()
-
-          const parentKey = itemPath.join('/')
-          const parentState = parentKey && stateRef.current[parentKey]
-
-          if (parentState) {
-            parentState.element.focus()
-            setFocusedElement(parentState.element)
-          }
-        }
-
-        return
-      }
-
-      if (event.key === 'ArrowRight') {
-        event.preventDefault()
-
-        const focusedKey = focusedElementRef.current.getAttribute('data-tree-key')
-
-        if (!focusedKey) return
-
-        if (!stateRef.current[focusedKey]?.expanded) {
-          setState((s) => {
-            const itemState = s[focusedKey]
-
-            if (!itemState) return s
-
-            return {...s, [focusedKey]: {...itemState, expanded: true}}
-          })
-        }
-
-        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 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import type {TreeContextValue} from './types'
-
-/**
- * @internal
- */
-export const TreeContext: Context<TreeContextValue | null> =
-  createGlobalScopedContext<TreeContextValue | null>('@sanity/ui/v3/tree', null)

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

@@ -1,46 +0,0 @@
-import {Stack} from '../../primitives/stack/Stack'
-import type {ComponentType, Props} from '../../types'
-import {useTree} from './useTree'
-
-/** @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 = function TreeGroup(
-  props: Props<TreeGroupProps, 'div'>,
-): React.JSX.Element {
-  const {
-    children,
-    expanded = false,
-    ...rest
-  } = props as TreeGroupProps<typeof DEFAULT_TREE_GROUP_ELEMENT>
-
-  const tree = useTree()
-
-  return (
-    <Stack
-      as="ul"
-      data-ui="TreeGroup"
-      {...rest}
-      hidden={!expanded}
-      marginTop={tree.gap}
-      role="group"
-      gap={tree.gap}
-    >
-      {children}
-    </Stack>
-  )
-}

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

@@ -1,237 +0,0 @@
-import {ToggleArrowRightIcon} from '@sanity/icons'
-import {type ResponsiveProp, treeItem, vars} from '@sanity/ui/css'
-import type {FontTextSize, FontWeight, Space} from '@sanity/ui/theme'
-import {
-  type ElementType,
-  type KeyboardEvent,
-  type MouseEvent,
-  type MouseEventHandler,
-  type ReactNode,
-  type Ref,
-  useCallback,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-} 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 type {ComponentType, Props} from '../../types'
-import {TreeContext} from './TreeContext'
-import {TreeGroup} from './TreeGroup'
-import {useTree} from './useTree'
-
-/** @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
-   * @internal
-   */
-  linkAs?: SelectableElementType
-  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
-  padding?: ResponsiveProp<Space>
-  space?: ResponsiveProp<Space>
-  text?: ReactNode
-  weight?: FontWeight
-}
-
-/** @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 function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(
-  props: TreeItemProps<E>,
-): React.JSX.Element {
-  const {
-    children,
-    className,
-    expanded: expandedProp = false,
-    fontSize = 1,
-    href,
-    icon: IconComponent,
-    id: idProp,
-    linkAs = 'a',
-    muted,
-    onClick,
-    padding = 2,
-    radius = 2,
-    selected = false,
-    space = 2,
-    text,
-    weight,
-    ...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
-  const _id = useId()
-  const id = idProp || _id
-  const itemPath = useMemo(() => path.concat([id || '']), [id, path])
-  const itemKey = itemPath.join('/')
-  const itemState = tree.state[itemKey]
-  const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
-  const focused = tree.focusedElement && tree.focusedElement === rootRef.current
-  const tabIndex = focused ? 0 : -1
-  const contextValue = useMemo(
-    () => ({...tree, level: tree.level + 1, path: itemPath}),
-    [itemPath, tree],
-  )
-
-  const handleClick = useCallback(
-    (event: MouseEvent<HTMLAnchorElement> | MouseEvent<HTMLLIElement>) => {
-      if (onClick) onClick(event)
-
-      const target = event.target
-
-      if (
-        target instanceof HTMLElement &&
-        (target.getAttribute('data-ui') === 'TreeItem' ||
-          target.closest('[data-ui="TreeItem__box"]'))
-      ) {
-        event.stopPropagation()
-        setExpanded(itemKey, !expanded)
-        setFocusedElement(rootRef.current)
-      }
-    },
-    [expanded, itemKey, onClick, setExpanded, setFocusedElement],
-  )
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLElement>) => {
-      if (focused && event.key === 'Enter') {
-        const el = treeitemRef.current || rootRef.current
-
-        el?.click()
-      }
-    },
-    [focused],
-  )
-
-  useEffect(() => {
-    if (!rootRef.current) return
-
-    return registerItem(rootRef.current, itemPath.join('/'), expanded, selected)
-  }, [expanded, itemPath, registerItem, selected])
-
-  const content = (
-    <Flex gap={space} padding={padding}>
-      <Box
-        style={{
-          visibility: IconComponent || children ? 'visible' : 'hidden',
-          pointerEvents: 'none',
-        }}
-      >
-        {IconComponent && (
-          <Text muted={muted} size={fontSize} weight={weight}>
-            <IconComponent />
-          </Text>
-        )}
-        {!IconComponent && (
-          <Text muted={muted} size={fontSize} weight={weight}>
-            <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
-          </Text>
-        )}
-      </Box>
-      <Box flex={1}>
-        <Text muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
-          {text}
-        </Text>
-      </Box>
-    </Flex>
-  )
-
-  if (href) {
-    return (
-      <Box
-        data-selected={selected ? '' : undefined}
-        data-tree-id={id}
-        data-tree-key={itemKey}
-        data-ui="TreeItem"
-        {...(rest as BoxProps<'li'>)}
-        as="li"
-        className={treeItem({className})}
-        onClick={handleClick}
-        ref={rootRef as Ref<HTMLLIElement>}
-        role="none"
-      >
-        <Selectable
-          aria-expanded={expanded}
-          as={linkAs}
-          // data-pressed={selected ? '' : undefined}
-          data-ui="TreeItem__box"
-          href={href}
-          radius={radius}
-          ref={treeitemRef}
-          role="treeitem"
-          selected={selected}
-          tabIndex={tabIndex}
-          style={{
-            paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
-          }}
-        >
-          {content}
-        </Selectable>
-
-        <TreeContext.Provider value={contextValue}>
-          {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
-        </TreeContext.Provider>
-      </Box>
-    )
-  }
-
-  return (
-    <Box
-      data-selected={selected ? '' : undefined}
-      data-ui="TreeItem"
-      data-tree-id={id}
-      data-tree-key={itemKey}
-      {...(rest as BoxProps<'a'>)}
-      aria-expanded={expanded}
-      className={treeItem({className})}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      ref={rootRef as Ref<HTMLAnchorElement>}
-      role="treeitem"
-      tabIndex={tabIndex}
-    >
-      <Selectable
-        as="button"
-        // data-pressed={selected ? '' : undefined}
-        data-focused={focused ? '' : undefined}
-        data-ui="TreeItem__box"
-        radius={radius}
-        selected={selected}
-        style={{
-          paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
-        }}
-      >
-        {content}
-      </Selectable>
-
-      <TreeContext.Provider value={contextValue}>
-        {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
-      </TreeContext.Provider>
-    </Box>
-  )
-}

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

@@ -1,105 +0,0 @@
-import {LinkIcon} from '@sanity/icons'
-import {Box, Tree, TreeItem} from '@sanity/ui'
-import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
-import {useCallback, useState} from 'react'
-
-import {perfTests} from './basic.perf'
-
-export default function BasicStory(): React.JSX.Element {
-  const {ref, Wrapper} = usePerfTest(perfTests[0])
-
-  const [id, setId] = useState('')
-
-  const handleClick = useCallback((event: React.MouseEvent) => {
-    event.preventDefault()
-
-    const testid = event.currentTarget.getAttribute('data-testid')
-
-    if (testid) setId(testid)
-  }, [])
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Wrapper>
-        <Tree gap={1} ref={ref}>
-          <TreeItem onClick={handleClick} expanded text="Fruit">
-            <TreeItem
-              data-testid="oranges"
-              onClick={handleClick}
-              selected={id === 'oranges'}
-              text="Oranges"
-            />
-            <TreeItem
-              data-testid="pineapples"
-              onClick={handleClick}
-              text="Pineapples"
-              selected={id === 'pineapples'}
-            />
-            <TreeItem data-testid="apples" onClick={handleClick} text="Apples">
-              <TreeItem
-                data-testid="apples/macintosh"
-                onClick={handleClick}
-                href="/apples/macintosh"
-                icon={LinkIcon}
-                text="Macintosh"
-              />
-              <TreeItem
-                data-testid="apples/granny-smith"
-                onClick={handleClick}
-                text="Granny Smith"
-              />
-              <TreeItem data-testid="apples/fuji" onClick={handleClick} text="Fuji" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Bananas" />
-            <TreeItem onClick={handleClick} text="Pears">
-              <TreeItem onClick={handleClick} text="Anjou" />
-              <TreeItem onClick={handleClick} text="Bartlett" />
-              <TreeItem onClick={handleClick} text="Bosc" />
-              <TreeItem onClick={handleClick} text="Concorde" />
-              <TreeItem onClick={handleClick} text="Seckel" />
-              <TreeItem onClick={handleClick} text="Starkrimson" />
-            </TreeItem>
-          </TreeItem>
-          <TreeItem onClick={handleClick} text="Vegetables">
-            <TreeItem onClick={handleClick} text="Podded vegetables">
-              <TreeItem onClick={handleClick} text="Lentil" />
-              <TreeItem onClick={handleClick} text="Pea" />
-              <TreeItem onClick={handleClick} text="Peanut" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Bulb and stem vegetables">
-              <TreeItem onClick={handleClick} text="Asparagus" />
-              <TreeItem onClick={handleClick} text="Celery" />
-              <TreeItem onClick={handleClick} text="Leek" />
-              <TreeItem onClick={handleClick} text="Onion" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Root and tuberous vegetables">
-              <TreeItem onClick={handleClick} text="Carrot" />
-              <TreeItem onClick={handleClick} text="Ginger" />
-              <TreeItem onClick={handleClick} text="Parsnip" />
-              <TreeItem onClick={handleClick} text="Potato" />
-            </TreeItem>
-          </TreeItem>
-          <TreeItem onClick={handleClick} text="Grains">
-            <TreeItem onClick={handleClick} text="Cereal grains">
-              <TreeItem onClick={handleClick} text="Barley" />
-              <TreeItem onClick={handleClick} text="Oats" />
-              <TreeItem onClick={handleClick} text="Rice" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Pseudocereal grains">
-              <TreeItem onClick={handleClick} text="Amaranth" />
-              <TreeItem onClick={handleClick} text="Buckwheat" />
-              <TreeItem onClick={handleClick} text="Chia" />
-              <TreeItem onClick={handleClick} text="Quinoa" />
-            </TreeItem>
-            <TreeItem onClick={handleClick} text="Oilseeds">
-              <TreeItem onClick={handleClick} text="India mustard" />
-              <TreeItem onClick={handleClick} text="Safflower" />
-              <TreeItem onClick={handleClick} text="Flax seed" />
-              <TreeItem onClick={handleClick} text="Poppy seed" />
-            </TreeItem>
-          </TreeItem>
-        </Tree>
-      </Wrapper>
-    </Box>
-  )
-}