@sanity/ui 0.37.3 → 0.37.4

package/src/components/tree/index.ts

@@ -0,0 +1,4 @@
+export * from './tree'
+export * from './treeItem'
+export * from './types'
+export * from './useTree'

package/src/components/tree/style.ts

@@ -0,0 +1,107 @@
+import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {rem, ThemeProps} from '../../styles'
+import {_colorVarsStyle} from '../../styles/colorVars'
+
+export function treeItemRootStyle(): FlattenSimpleInterpolation {
+  return css`
+    &[role='none'] > [role='treeitem'] {
+      outline: none;
+      cursor: default;
+      border-radius: 3px;
+
+      &:focus {
+        position: relative;
+      }
+    }
+
+    &[role='treeitem'] {
+      outline: none;
+
+      & > div {
+        cursor: default;
+        border-radius: 3px;
+      }
+
+      &:focus > div {
+        position: relative;
+      }
+    }
+  `
+}
+
+export function treeItemRootColorStyle(props: ThemeProps): FlattenSimpleInterpolation {
+  const {theme} = props
+  const $tone = 'default'
+  const {base, muted, selectable} = theme.sanity.color
+  // @todo: remove use of `muted` here
+  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default
+
+  return css`
+    /* <div role="none"><a data-ui="TreeItem__box" role="treeitem" tabIndex="0"></div> */
+    &[role='none'] {
+      & > [role='treeitem'] {
+        ${_colorVarsStyle(base, tone.enabled)}
+
+        background-color: var(--card-bg-color);
+        color: var(--treeitem-fg-color);
+      }
+
+      &[data-selected] > [role='treeitem'] {
+        ${_colorVarsStyle(base, tone.pressed)}
+      }
+
+      @media (hover: hover) {
+        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
+          ${_colorVarsStyle(base, tone.hovered)}
+        }
+
+        & > [role='treeitem']:focus {
+          ${_colorVarsStyle(base, tone.selected)}
+        }
+      }
+    }
+
+    /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */
+    &[role='treeitem'] {
+      & > [data-ui='TreeItem__box'] {
+        ${_colorVarsStyle(base, tone.enabled)}
+
+        background-color: var(--card-bg-color);
+        color: var(--card-fg-color);
+      }
+
+      &[data-selected] > [data-ui='TreeItem__box'] {
+        ${_colorVarsStyle(base, tone.pressed)}
+      }
+
+      @media (hover: hover) {
+        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
+          ${_colorVarsStyle(base, tone.hovered)}
+        }
+
+        &:focus > [data-ui='TreeItem__box'] {
+          ${_colorVarsStyle(base, tone.selected)}
+        }
+      }
+    }
+  `
+}
+
+export interface TreeItemBoxStyleProps {
+  $level: number
+}
+
+export function treeItemBoxStyle(
+  props: TreeItemBoxStyleProps & ThemeProps
+): FlattenSimpleInterpolation {
+  const {$level, theme} = props
+  const {space} = theme.sanity
+
+  return css`
+    padding-left: ${rem(space[2] * $level)};
+
+    &[data-as='a'] {
+      text-decoration: none;
+    }
+  `
+}

package/src/components/tree/tree.tsx

@@ -0,0 +1,189 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {Stack} from '../../primitives'
+import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
+import {TreeContext} from './treeContext'
+import {TreeContextValue, TreeState} from './types'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface TreeProps {
+  space?: number | number[]
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function Tree(
+  props: TreeProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>
+): React.ReactElement {
+  const {children, space = 1, ...restProps} = props
+  const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
+  const path: string[] = useMemo(() => [], [])
+  const rootRef = useRef<HTMLDivElement | null>(null)
+  const [itemElements, setItemElements] = useState<HTMLElement[]>([])
+  const [state, setState] = useState<TreeState>({})
+
+  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: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!focusedElement) return
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+
+        const nextEl = _findNextItemElement(state, itemElements, focusedElement)
+
+        if (nextEl) {
+          _focusItemElement(nextEl)
+          setFocusedElement(nextEl)
+        }
+
+        return
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+
+        const prevEl = _findPrevItemElement(state, itemElements, focusedElement)
+
+        if (prevEl) {
+          _focusItemElement(prevEl)
+          setFocusedElement(prevEl)
+        }
+
+        return
+      }
+
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+
+        const itemKey = focusedElement.getAttribute('data-tree-key')
+
+        if (!itemKey) return
+
+        const itemState = state[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 && state[parentKey]
+
+          if (parentState) {
+            parentState.element.focus()
+            setFocusedElement(parentState.element)
+          }
+        }
+
+        return
+      }
+
+      if (event.key === 'ArrowRight') {
+        event.preventDefault()
+
+        const focusedKey = focusedElement.getAttribute('data-tree-key')
+
+        if (!focusedKey) return
+
+        if (!state[focusedKey]?.expanded) {
+          setState((s) => {
+            const itemState = s[focusedKey]
+
+            if (!itemState) return s
+
+            return {...s, [focusedKey]: {...itemState, expanded: true}}
+          })
+        }
+
+        return
+      }
+    },
+    [focusedElement, itemElements, state]
+  )
+
+  useEffect(() => {
+    if (!rootRef.current) return
+    const _itemElements = Array.from(
+      rootRef.current.querySelectorAll('[data-ui="TreeItem"]')
+    ) as HTMLElement[]
+
+    setItemElements(_itemElements)
+  }, [children])
+
+  return (
+    <TreeContext.Provider value={contextValue}>
+      <Stack
+        as="ul"
+        data-ui="Tree"
+        {...restProps}
+        onKeyDown={handleKeyDown}
+        ref={rootRef}
+        role="tree"
+        space={space}
+      >
+        {children}
+      </Stack>
+    </TreeContext.Provider>
+  )
+}

package/src/components/tree/treeContext.ts

@@ -0,0 +1,12 @@
+import {createContext} from 'react'
+import {globalScope} from '../../lib/globalScope'
+import {TreeContextValue} from './types'
+
+const key = Symbol.for('@sanity/ui/context/tree')
+
+globalScope[key] = globalScope[key] || createContext<TreeContextValue | null>(null)
+
+/**
+ * @internal
+ */
+export const TreeContext: React.Context<TreeContextValue | null> = globalScope[key]

package/src/components/tree/treeGroup.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import {Stack} from '../../primitives'
+import {useTree} from './useTree'
+
+export interface TreeGroupProps {
+  expanded?: boolean
+}
+
+export function TreeGroup(
+  props: TreeGroupProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>
+): React.ReactElement {
+  const {children, expanded = false, ...restProps} = props
+  const tree = useTree()
+
+  return (
+    <Stack
+      as="ul"
+      data-ui="TreeGroup"
+      {...restProps}
+      hidden={!expanded}
+      marginTop={tree.space}
+      role="group"
+      space={tree.space}
+    >
+      {children}
+    </Stack>
+  )
+}

package/src/components/tree/treeItem.tsx

@@ -0,0 +1,194 @@
+import {useId} from '@reach/auto-id'
+import {ToggleArrowRightIcon} from '@sanity/icons'
+import React, {createElement, useCallback, useEffect, useMemo, useRef} from 'react'
+import styled from 'styled-components'
+import {Box, Flex, Text} from '../../primitives'
+import {ThemeFontWeightKey} from '../../theme'
+import {
+  treeItemRootStyle,
+  treeItemRootColorStyle,
+  treeItemBoxStyle,
+  TreeItemBoxStyleProps,
+} from './style'
+import {TreeContext} from './treeContext'
+import {TreeGroup} from './treeGroup'
+import {useTree} from './useTree'
+
+/**
+ * @beta
+ */
+export interface TreeItemProps {
+  expanded?: boolean
+  fontSize?: number | number[]
+  icon?: React.ComponentType
+  padding?: number | number[]
+  space?: number | number[]
+  text?: React.ReactNode
+  weight?: ThemeFontWeightKey
+}
+
+const Root = styled.li(treeItemRootStyle, treeItemRootColorStyle)
+
+const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
+
+const ToggleArrowText = styled(Text)`
+  & > svg {
+    transition: transform 100ms;
+  }
+`
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function TreeItem(
+  props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>
+): React.ReactElement {
+  const {
+    children,
+    expanded: expandedProp = false,
+    fontSize,
+    href,
+    icon,
+    id: idProp,
+    muted,
+    onClick,
+    padding = 3,
+    selected = false,
+    space = 2,
+    text,
+    weight,
+    ...restProps
+  } = props
+  const rootRef = useRef<HTMLLIElement | null>(null)
+  const treeitemRef = useRef<HTMLDivElement | null>(null)
+  const tree = useTree()
+  const {path, registerItem, setExpanded, setFocusedElement} = tree
+  const id = useId(idProp) || idProp
+  const itemPath = useMemo(() => path.concat([id || '']), [id, path])
+  const itemKey = itemPath.join('/')
+  const itemState = tree.state[itemKey]
+  const focused = tree.focusedElement === rootRef.current
+  const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
+  const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
+  const contextValue = useMemo(
+    () => ({...tree, level: tree.level + 1, path: itemPath}),
+    [itemPath, tree]
+  )
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLLIElement>) => {
+      if (onClick) onClick(event)
+
+      const target = event.target
+
+      if (
+        target instanceof HTMLElement &&
+        (target.getAttribute('data-ui') === 'TreeItem__box' ||
+          target.closest('[data-ui="TreeItem__box"]'))
+      ) {
+        event.stopPropagation()
+        setExpanded(itemKey, !expanded)
+        setFocusedElement(rootRef.current)
+      }
+    },
+    [expanded, itemKey, onClick, setExpanded, setFocusedElement]
+  )
+
+  const handleKeyDown = useCallback(
+    (event: React.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 padding={padding}>
+      <Box
+        marginRight={space}
+        style={{visibility: icon || children ? 'visible' : 'hidden', pointerEvents: 'none'}}
+      >
+        {icon && (
+          <Text muted={muted} size={fontSize} weight={weight}>
+            {createElement(icon)}
+          </Text>
+        )}
+        {!icon && (
+          <ToggleArrowText muted={muted} size={fontSize} weight={weight}>
+            <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
+          </ToggleArrowText>
+        )}
+      </Box>
+      <Box flex={1}>
+        <Text muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
+          {text}
+        </Text>
+      </Box>
+    </Flex>
+  )
+
+  if (href) {
+    return (
+      <Root
+        data-selected={selected ? '' : undefined}
+        data-tree-id={id}
+        data-tree-key={itemKey}
+        data-ui="TreeItem"
+        {...restProps}
+        onClick={handleClick}
+        ref={rootRef}
+        role="none"
+      >
+        <TreeItemBox
+          $level={tree.level}
+          aria-expanded={expanded}
+          data-ui="TreeItem__box"
+          href={href}
+          ref={treeitemRef}
+          role="treeitem"
+          tabIndex={tabIndex}
+        >
+          {content}
+        </TreeItemBox>
+
+        <TreeContext.Provider value={contextValue}>
+          {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
+        </TreeContext.Provider>
+      </Root>
+    )
+  }
+
+  return (
+    <Root
+      data-selected={selected ? '' : undefined}
+      data-ui="TreeItem"
+      data-tree-id={id}
+      data-tree-key={itemKey}
+      {...restProps}
+      aria-expanded={expanded}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      ref={rootRef}
+      role="treeitem"
+      tabIndex={tabIndex}
+    >
+      <TreeItemBox $level={tree.level} as="div" data-ui="TreeItem__box">
+        {content}
+      </TreeItemBox>
+
+      <TreeContext.Provider value={contextValue}>
+        {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
+      </TreeContext.Provider>
+    </Root>
+  )
+}

package/src/components/tree/types.ts

@@ -0,0 +1,21 @@
+/**
+ * @beta
+ */
+export interface TreeState {
+  [key: string]: {element: HTMLElement; expanded: boolean} | undefined
+}
+
+/**
+ * @beta
+ */
+export interface TreeContextValue {
+  version: 0.0
+  focusedElement: HTMLElement | null
+  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
+  space: number | number[]
+  state: TreeState
+}

package/src/components/tree/useTree.ts

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

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const EMPTY_ARRAY: any[] = []
+export const EMPTY_RECORD: Record<string, any> = {}

package/src/helpers/animation.ts

@@ -0,0 +1,27 @@
+/**
+ * @internal
+ */
+export function _raf(fn: () => void): () => void {
+  const frameId = requestAnimationFrame(fn)
+
+  return () => {
+    cancelAnimationFrame(frameId)
+  }
+}
+
+/**
+ * @internal
+ */
+export function _raf2(fn: () => void): () => void {
+  let innerDispose: (() => void) | null = null
+
+  const outerDispose = _raf(() => {
+    innerDispose = _raf(fn)
+  })
+
+  return () => {
+    if (innerDispose) innerDispose()
+
+    outerDispose()
+  }
+}

package/src/helpers/element.ts

@@ -0,0 +1,48 @@
+/**
+ * @internal
+ */
+export function _isEnterToClickElement(element: HTMLElement): boolean {
+  return isHTMLAnchorElement(element) || isHTMLButtonElement(element)
+}
+
+/**
+ * @internal
+ */
+export function isHTMLElement(node: unknown): node is HTMLElement {
+  return node instanceof Node && node.nodeType === Node.ELEMENT_NODE
+}
+
+/**
+ * @internal
+ */
+export function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement {
+  return isHTMLElement(element) && element.nodeName === 'A'
+}
+
+/**
+ * @internal
+ */
+export function isHTMLInputElement(element: unknown): element is HTMLInputElement {
+  return isHTMLElement(element) && element.nodeName === 'INPUT'
+}
+
+/**
+ * @internal
+ */
+export function isHTMLButtonElement(element: unknown): element is HTMLButtonElement {
+  return isHTMLElement(element) && element.nodeName === 'BUTTON'
+}
+
+/**
+ * @internal
+ */
+export function isHTMLSelectElement(element: unknown): element is HTMLSelectElement {
+  return isHTMLElement(element) && element.nodeName === 'SELECT'
+}
+
+/**
+ * @internal
+ */
+export function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement {
+  return isHTMLElement(element) && element.nodeName === 'TEXTAREA'
+}