@sanity/ui 4.0.0-beta.8 → 4.0.0-next.2

package/src/components/tree/TreeItem.tsx

@@ -1,236 +0,0 @@
-import {ToggleArrowRightIcon} from '@sanity/icons'
-import {type ResponsiveProp, tree_item, vars} from '@sanity/ui-css'
-import type {FontTextSize, FontWeight, Space} from '@sanity/ui-tokens'
-import {
-  type ElementType,
-  type KeyboardEvent,
-  type MouseEvent,
-  type MouseEventHandler,
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import type {ComponentType, Props} from '../../core/types'
-import {Box, type BoxProps} from '../../primitives/box/Box'
-import {
-  Selectable,
-  type SelectableElementType,
-  type SelectableOwnProps,
-} from '../../primitives/selectable/Selectable'
-import {Text} from '../../primitives/text/Text'
-import {TreeContext} from './TreeContext'
-import {TreeGroup} from './TreeGroup'
-import {useTree} from './useTree'
-
-/** @beta */
-export const DEFAULT_TREE_ITEM_ELEMENT = 'a'
-
-/** @beta */
-export type TreeItemOwnProps = SelectableOwnProps & {
-  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>
-  gap?: ResponsiveProp<Space>
-  /** @deprecated Use `gap` instead */
-  space?: never
-  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,
-    gap: gapProp,
-    href,
-    icon: IconComponent,
-    id: idProp,
-    linkAs = 'a',
-    muted,
-    onClick,
-    padding = 2,
-    radius = 2,
-    selected = false,
-    text,
-    weight,
-    ...rest
-  } = props as TreeItemProps<typeof DEFAULT_TREE_ITEM_ELEMENT>
-  const gap = gapProp ?? padding
-
-  const [rootElement, setRootElement] = useState<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, 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 === rootElement
-  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(rootElement)
-      }
-    },
-    [expanded, itemKey, onClick, rootElement, setExpanded, setFocusedElement],
-  )
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLElement>) => {
-      if (focused && event.key === 'Enter') {
-        const el = treeitemRef.current || rootElement
-
-        el?.click()
-      }
-    },
-    [focused, rootElement],
-  )
-
-  useEffect(() => {
-    if (!rootElement) return
-
-    return registerItem(rootElement, itemKey, expanded, selected)
-  }, [expanded, itemKey, registerItem, rootElement, selected])
-
-  const content = (
-    <Box display="flex" gap={gap} padding={padding}>
-      <Text
-        flex="none"
-        muted={muted}
-        size={fontSize}
-        style={{
-          visibility: IconComponent || children ? 'visible' : 'hidden',
-          pointerEvents: 'none',
-        }}
-        weight={weight}
-      >
-        {IconComponent ? (
-          <IconComponent />
-        ) : (
-          <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
-        )}
-      </Text>
-
-      <Text flex={1} muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
-        {text}
-      </Text>
-    </Box>
-  )
-
-  if (href) {
-    return (
-      <Box
-        data-selected={selected ? '' : undefined}
-        data-tree-id={id}
-        data-tree-key={itemKey}
-        data-ui="TreeItem"
-        {...(rest as BoxProps<'li'>)}
-        ref={setRootElement}
-        as="li"
-        className={tree_item({className})}
-        role="none"
-        onClick={handleClick}
-      >
-        <Selectable
-          ref={treeitemRef}
-          aria-expanded={expanded}
-          as={linkAs}
-          data-ui="TreeItem__box"
-          href={href}
-          radius={radius}
-          role="treeitem"
-          selected={selected}
-          style={{paddingLeft: `calc(${vars.space[2]} * ${tree.level})`}}
-          tabIndex={tabIndex}
-        >
-          {content}
-        </Selectable>
-
-        <TreeContext value={contextValue}>
-          {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
-        </TreeContext>
-      </Box>
-    )
-  }
-
-  return (
-    <Box
-      data-pressed={selected ? '' : undefined}
-      data-tree-id={id}
-      data-tree-key={itemKey}
-      data-ui="TreeItem"
-      {...rest}
-      ref={setRootElement}
-      aria-expanded={expanded}
-      className={tree_item({className})}
-      role="treeitem"
-      tabIndex={tabIndex}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-    >
-      <Selectable
-        data-focused={focused ? '' : undefined}
-        data-ui="TreeItem__box"
-        radius={radius}
-        selected={selected}
-        style={{paddingLeft: `calc(${vars.space[2]} * ${tree.level})`}}
-        tabIndex={tabIndex}
-      >
-        {content}
-      </Selectable>
-
-      <TreeContext value={contextValue}>
-        {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
-      </TreeContext>
-    </Box>
-  )
-}

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

@@ -1,108 +0,0 @@
-import {LinkIcon} from '@sanity/icons'
-import {Box, SPACE, Tree, TreeItem} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-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 padding = useSelect('Padding', SPACE)
-
-  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 ref={ref} gap={1} padding={padding} radius={3}>
-          <TreeItem expanded text="Fruit" onClick={handleClick}>
-            <TreeItem
-              data-testid="oranges"
-              selected={id === 'oranges'}
-              text="Oranges"
-              onClick={handleClick}
-            />
-            <TreeItem
-              data-testid="pineapples"
-              selected={id === 'pineapples'}
-              text="Pineapples"
-              onClick={handleClick}
-            />
-            <TreeItem data-testid="apples" text="Apples" onClick={handleClick}>
-              <TreeItem
-                data-testid="apples/macintosh"
-                href="/apples/macintosh"
-                icon={LinkIcon}
-                text="Macintosh"
-                onClick={handleClick}
-              />
-              <TreeItem
-                data-testid="apples/granny-smith"
-                text="Granny Smith"
-                onClick={handleClick}
-              />
-              <TreeItem data-testid="apples/fuji" text="Fuji" onClick={handleClick} />
-            </TreeItem>
-            <TreeItem muted text="Bananas" onClick={handleClick} />
-            <TreeItem text="Pears" onClick={handleClick}>
-              <TreeItem muted text="Anjou" onClick={handleClick} />
-              <TreeItem muted text="Bartlett" onClick={handleClick} />
-              <TreeItem muted text="Bosc" onClick={handleClick} />
-              <TreeItem muted text="Concorde" onClick={handleClick} />
-              <TreeItem muted text="Seckel" onClick={handleClick} />
-              <TreeItem muted text="Starkrimson" onClick={handleClick} />
-            </TreeItem>
-          </TreeItem>
-          <TreeItem text="Vegetables" onClick={handleClick}>
-            <TreeItem text="Podded vegetables" onClick={handleClick}>
-              <TreeItem muted text="Lentil" onClick={handleClick} />
-              <TreeItem muted text="Pea" onClick={handleClick} />
-              <TreeItem muted text="Peanut" onClick={handleClick} />
-            </TreeItem>
-            <TreeItem text="Bulb and stem vegetables" onClick={handleClick}>
-              <TreeItem muted text="Asparagus" onClick={handleClick} />
-              <TreeItem muted text="Celery" onClick={handleClick} />
-              <TreeItem muted text="Leek" onClick={handleClick} />
-              <TreeItem muted text="Onion" onClick={handleClick} />
-            </TreeItem>
-            <TreeItem text="Root and tuberous vegetables" onClick={handleClick}>
-              <TreeItem muted text="Carrot" onClick={handleClick} />
-              <TreeItem muted text="Ginger" onClick={handleClick} />
-              <TreeItem muted text="Parsnip" onClick={handleClick} />
-              <TreeItem muted text="Potato" onClick={handleClick} />
-            </TreeItem>
-          </TreeItem>
-          <TreeItem text="Grains" onClick={handleClick}>
-            <TreeItem text="Cereal grains" onClick={handleClick}>
-              <TreeItem muted text="Barley" onClick={handleClick} />
-              <TreeItem muted text="Oats" onClick={handleClick} />
-              <TreeItem muted text="Rice" onClick={handleClick} />
-            </TreeItem>
-            <TreeItem text="Pseudocereal grains" onClick={handleClick}>
-              <TreeItem muted text="Amaranth" onClick={handleClick} />
-              <TreeItem muted text="Buckwheat" onClick={handleClick} />
-              <TreeItem muted text="Chia" onClick={handleClick} />
-              <TreeItem muted text="Quinoa" onClick={handleClick} />
-            </TreeItem>
-            <TreeItem text="Oilseeds" onClick={handleClick}>
-              <TreeItem muted text="India mustard" onClick={handleClick} />
-              <TreeItem muted text="Safflower" onClick={handleClick} />
-              <TreeItem muted text="Flax seed" onClick={handleClick} />
-              <TreeItem muted text="Poppy seed" onClick={handleClick} />
-            </TreeItem>
-          </TreeItem>
-        </Tree>
-      </Wrapper>
-    </Box>
-  )
-}

package/src/components/tree/__workshop__/TabFromElement.tsx

@@ -1,84 +0,0 @@
-import {LinkIcon} from '@sanity/icons'
-import {Box, Text, TextInput, 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 [focus, setFocus] = useState('')
-
-  const handleClick = useCallback((event: React.MouseEvent) => {
-    event.preventDefault()
-
-    const testid = event.currentTarget.getAttribute('data-testid')
-
-    if (testid) setId(testid)
-  }, [])
-
-  const handleFocus = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
-    const elementFocus = event.target.getAttribute('data-testid')
-    if (elementFocus) setFocus(elementFocus)
-  }, [])
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Box paddingY={3}>
-        <Text muted size={1}>
-          This example is to demonstrate that when you tab from an outside element (using the
-          keyboard to navigate), you can still access the tree and tree item. Press the input
-          beneath and start tabbing / using the arrow.
-        </Text>
-      </Box>
-      <Box paddingY={3}>
-        <Text>Focus: {focus}</Text>
-      </Box>
-      <Wrapper>
-        <TextInput />
-        <Tree ref={ref} gap={1} onFocus={handleFocus}>
-          <TreeItem data-testid="fruit" expanded text="Fruit" onClick={handleClick}>
-            <TreeItem
-              data-testid="oranges"
-              selected={id === 'oranges'}
-              text="Oranges"
-              onClick={handleClick}
-            />
-            <TreeItem
-              data-testid="pineapples"
-              selected={id === 'pineapples'}
-              text="Pineapples"
-              onClick={handleClick}
-            />
-            <TreeItem data-testid="apples" text="Apples" onClick={handleClick}>
-              <TreeItem
-                data-testid="apples/macintosh"
-                href="/apples/macintosh"
-                icon={LinkIcon}
-                text="Macintosh"
-                onClick={handleClick}
-              />
-              <TreeItem
-                data-testid="apples/granny-smith"
-                text="Granny Smith"
-                onClick={handleClick}
-              />
-              <TreeItem data-testid="apples/fuji" text="Fuji" onClick={handleClick} />
-            </TreeItem>
-            <TreeItem data-testid="bananas" text="Bananas" onClick={handleClick} />
-            <TreeItem data-testid="pears" text="Pears" onClick={handleClick}>
-              <TreeItem data-testid="pears/anjou" text="Anjou" onClick={handleClick} />
-              <TreeItem data-testid="pears/bartlett" text="Bartlett" onClick={handleClick} />
-              <TreeItem data-testid="pears/bosc" text="Bosc" onClick={handleClick} />
-              <TreeItem data-testid="pears/concorde" text="Concorde" onClick={handleClick} />
-              <TreeItem data-testid="pears/seckel" text="Seckel" onClick={handleClick} />
-              <TreeItem data-testid="pears/starkrimson" text="Starkrimson" onClick={handleClick} />
-            </TreeItem>
-          </TreeItem>
-        </Tree>
-      </Wrapper>
-    </Box>
-  )
-}

package/src/components/tree/__workshop__/basic.perf.ts

@@ -1,19 +0,0 @@
-import type {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
-import {findByTestId, fireEvent} from '@testing-library/dom'
-
-function test<ElementType = unknown>(
-  title: string,
-  run: PerfTestRunFn<ElementType>,
-): PerfTestProps<ElementType> {
-  return {name: title, run}
-}
-
-export const perfTests: PerfTestProps<HTMLDivElement>[] = [
-  test('Toggle tree groups', async ({target}: {target: HTMLDivElement}) => {
-    const apples = await findByTestId(target, 'apples')
-    const oranges = await findByTestId(target, 'oranges')
-
-    fireEvent.click(apples)
-    fireEvent.click(oranges)
-  }),
-]

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

@@ -1,23 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'components/tree',
-  title: 'Tree',
-  stories: [
-    {
-      name: 'basic',
-      title: 'Basic',
-      component: lazy(() => import('./Basic')),
-      // options: {perfTests: () => import('./Basic.perf')},
-    },
-    {
-      name: 'tab',
-      title: 'Tab',
-      component: lazy(() => import('./TabFromElement')),
-      // options: {perfTests: () => import('./Basic.perf')},
-    },
-  ],
-}
-
-export default scope

package/src/components/tree/helpers.ts

@@ -1,105 +0,0 @@
-import type {TreeState} from './types'
-
-export function _findPrevItemElement(
-  state: TreeState,
-  itemElements: HTMLElement[],
-  focusedElement: HTMLElement,
-): HTMLElement | null {
-  const idx = itemElements.indexOf(focusedElement)
-  const els = itemElements.slice(0, idx)
-  const len = els.length
-
-  for (let i = len - 1; i >= 0; i -= 1) {
-    const itemKey = els[i].getAttribute('data-tree-key')
-
-    if (!itemKey) {
-      continue
-    }
-
-    const segments = itemKey.split('/')
-
-    segments.pop()
-
-    const p: string[] = []
-
-    let expanded = true
-
-    for (let j = 0; j < segments.length; j += 1) {
-      p.push(segments[j])
-
-      const k = p.join('/')
-
-      if (!state[k]?.expanded) {
-        expanded = false
-        break
-      }
-    }
-
-    if (expanded) {
-      return els[i]
-    }
-  }
-
-  return null
-}
-
-export function _findNextItemElement(
-  state: TreeState,
-  itemElements: HTMLElement[],
-  focusedElement: HTMLElement,
-): HTMLElement | null {
-  const idx = itemElements.indexOf(focusedElement)
-  const els = itemElements.slice(idx)
-  const len = itemElements.length
-
-  for (let i = 1; i < len; i += 1) {
-    if (!els[i]) {
-      continue
-    }
-
-    const itemKey = els[i].getAttribute('data-tree-key')
-
-    if (!itemKey) {
-      continue
-    }
-
-    const segments = itemKey.split('/')
-
-    segments.pop()
-
-    const p: string[] = []
-
-    let expanded = true
-
-    for (let j = 0; j < segments.length; j += 1) {
-      p.push(segments[j])
-
-      const k = p.join('/')
-
-      if (!state[k]?.expanded) {
-        expanded = false
-        break
-      }
-    }
-
-    if (expanded) {
-      return els[i]
-    }
-  }
-
-  return null
-}
-
-export function _focusItemElement(el: HTMLElement): void {
-  if (el.getAttribute('role') === 'treeitem') {
-    el.focus()
-  }
-
-  if (el.getAttribute('role') === 'none') {
-    const firstChild = el.firstChild
-
-    if (firstChild && firstChild instanceof HTMLElement) {
-      firstChild.focus()
-    }
-  }
-}

package/src/components/tree/types.ts

@@ -1,24 +0,0 @@
-import type {ResponsiveProp} from '@sanity/ui-css'
-import type {Space} from '@sanity/ui-tokens'
-
-/**
- * @beta
- */
-export interface TreeState {
-  [key: string]: {element: HTMLElement; expanded: boolean} | undefined
-}
-
-/**
- * @beta
- */
-export interface TreeContextValue {
-  version: 0.0
-  focusedElement: HTMLElement | null
-  gap: ResponsiveProp<Space>
-  level: number
-  path: string[]
-  registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
-  setExpanded: (path: string, expanded: boolean) => void
-  setFocusedElement: (focusedElement: HTMLElement | null) => void
-  state: TreeState
-}

package/src/components/tree/useTree.ts

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