@sanity/ui 1.0.0-beta.9 → 1.0.0

package/src/components/toast/types.ts

@@ -0,0 +1,20 @@
+/**
+ * @public
+ */
+export interface ToastParams {
+  closable?: boolean
+  description?: React.ReactNode
+  duration?: number
+  id?: string
+  onClose?: () => void
+  title?: React.ReactNode
+  status?: 'error' | 'warning' | 'success' | 'info'
+}
+
+/**
+ * @public
+ */
+export interface ToastContextValue {
+  version: 0.0
+  push: (params: ToastParams) => string
+}

package/src/components/toast/useToast.ts

@@ -0,0 +1,24 @@
+import {useContext} from 'react'
+import {isRecord} from '../../lib/isRecord'
+import {ToastContext} from './toastContext'
+import {ToastContextValue} from './types'
+
+/**
+ * @public
+ */
+export function useToast(): ToastContextValue {
+  const value = useContext(ToastContext)
+
+  if (!value) {
+    throw new Error('useToast(): missing context value')
+  }
+
+  // NOTE: This check is for future-compatiblity
+  // - If the value is not an object, it’s not compatible with the current version
+  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
+  if (!isRecord(value) || value.version !== 0.0) {
+    throw new Error('useToast(): the context value is not compatible')
+  }
+
+  return value
+}

package/src/components/tree/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

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

@@ -0,0 +1,19 @@
+import {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 = [
+  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__/basic.tsx

@@ -0,0 +1,104 @@
+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() {
+  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 ref={ref} space={1}>
+          <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>
+  )
+}

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

@@ -0,0 +1,15 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'components/tree',
+  title: 'Tree',
+  stories: [
+    {
+      name: 'basic',
+      title: 'Basic',
+      component: lazy(() => import('./basic')),
+      // options: {perfTests: () => import('./basic.perf')},
+    },
+  ],
+})

package/src/components/tree/helpers.ts

@@ -0,0 +1,105 @@
+import {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/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,213 @@
+import {forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useForwardedRef} from '../../hooks'
+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 const Tree = memo(
+  forwardRef(function Tree(
+    props: TreeProps &
+      Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ): React.ReactElement {
+    const {children, space = 1, ...restProps} = props
+    const forwardedRef = useForwardedRef(ref)
+    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)
+
+    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: 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)
+          }
+
+          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]
+    )
+
+    useEffect(() => {
+      if (!forwardedRef.current) return
+      const _itemElements = Array.from(
+        forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]')
+      ) as HTMLElement[]
+
+      setItemElements(_itemElements)
+    }, [children, forwardedRef])
+
+    return (
+      <TreeContext.Provider value={contextValue}>
+        <Stack
+          as="ul"
+          data-ui="Tree"
+          {...restProps}
+          onKeyDown={handleKeyDown}
+          ref={forwardedRef}
+          role="tree"
+          space={space}
+        >
+          {children}
+        </Stack>
+      </TreeContext.Provider>
+    )
+  })
+)
+
+Tree.displayName = 'Tree'

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 {memo} from 'react'
+import {Stack} from '../../primitives'
+import {useTree} from './useTree'
+
+export interface TreeGroupProps {
+  expanded?: boolean
+}
+
+export const TreeGroup = memo(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>
+  )
+})