@sanity/ui 3.1.13 → 4.0.0-beta.0

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

@@ -0,0 +1,109 @@
+import {LinkIcon} from '@sanity/icons'
+import {Box, Tree, TreeItem} from '@sanity/ui'
+import {SPACE} from '@sanity/ui/tokens'
+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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,17 @@
+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
+}

package/src/components/virtualList/VirtualList.tsx

@@ -0,0 +1,254 @@
+import {vars} from '@sanity/ui-css'
+import type {Space} from '@sanity/ui-tokens'
+import {
+  type ReactNode,
+  startTransition,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+
+import {_isScrollable} from '../../core/helpers/scroll'
+import type {ComponentType, Props} from '../../core/types'
+import {Box} from '../../primitives/box/Box'
+
+/** @beta */
+export const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
+
+/** @beta */
+export interface VirtualListChangeOpts {
+  fromIndex: number
+  gap: number
+  itemHeight: number
+  scrollHeight: number
+  scrollTop: number
+  toIndex: number
+}
+
+/** @beta */
+export interface VirtualListOwnProps<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Item = any,
+> {
+  gap?: Space
+  getItemKey?: (item: Item, itemIndex: number) => string
+  items?: Item[]
+  onChange?: (opts: VirtualListChangeOpts) => void
+  renderItem?: (item: Item) => ReactNode
+}
+
+/** @beta */
+export type VirtualListElementType = 'div' | ComponentType
+
+/** @beta */
+export type VirtualListProps<
+  E extends VirtualListElementType = VirtualListElementType,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Item = any,
+> = Props<VirtualListOwnProps<Item>, E>
+
+/** @beta */
+export function VirtualList<
+  E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Item = any,
+>(props: VirtualListProps<E, Item>): React.JSX.Element {
+  const {
+    as = DEFAULT_VIRTUAL_LIST_ELEMENT,
+    gap = 0,
+    getItemKey,
+    items = [],
+    onChange,
+    renderItem,
+    ref: forwardedRef,
+    ...rest
+  } = props as VirtualListProps<typeof DEFAULT_VIRTUAL_LIST_ELEMENT>
+
+  const ref = useRef<HTMLDivElement | null>(null)
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const [scrollTop, setScrollTop] = useState(0)
+  const [scrollHeight, setScrollHeight] = useState(0)
+  const [itemHeight, setItemHeight] = useState<number | undefined>(undefined)
+
+  const [gapValue, setGapValue] = useState(0)
+
+  // Sync ref to parent
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+
+  useEffect((): (() => void) | undefined => {
+    if (!ref.current) return
+
+    const scrollableParent = _findScrollableParent(ref.current.parentNode)
+
+    if (scrollableParent !== document.documentElement && scrollableParent) {
+      if (!(scrollableParent instanceof HTMLElement)) return
+
+      const handleScroll = () => {
+        setScrollTop(scrollableParent.scrollTop)
+      }
+
+      scrollableParent.addEventListener('scroll', handleScroll, {passive: true})
+
+      const ro = new ResizeObserver((entries) => {
+        setScrollHeight(entries[0].contentRect.height)
+      })
+
+      ro.observe(scrollableParent)
+
+      handleScroll()
+
+      return () => {
+        scrollableParent.removeEventListener('scroll', handleScroll)
+
+        ro.unobserve(scrollableParent)
+        ro.disconnect()
+      }
+    }
+
+    const handleScroll = () => {
+      setScrollTop(window.scrollY)
+    }
+
+    const handleResize = () => {
+      setScrollHeight(window.innerHeight)
+    }
+
+    window.addEventListener('scroll', handleScroll, {passive: true})
+    window.addEventListener('resize', handleResize)
+
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setScrollHeight(window.innerHeight)
+
+    handleScroll()
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  const len = items.length
+  const height = itemHeight ? len * (itemHeight + gapValue) - gapValue : 0
+  const fromIndex = height ? Math.max(Math.floor((scrollTop / height) * len) - 2, 0) : 0
+  const toIndex = height ? Math.ceil(((scrollTop + scrollHeight) / height) * len) + 1 : 0
+
+  useEffect(() => {
+    if (itemHeight === undefined) return
+
+    onChange?.({
+      fromIndex,
+      gap: gapValue,
+      itemHeight,
+      scrollHeight,
+      scrollTop,
+      toIndex,
+    })
+  }, [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex])
+
+  useEffect(() => {
+    startTransition(() => setItemHeight(undefined))
+  }, [renderItem])
+
+  const children = useChildren({
+    fromIndex,
+    gap,
+    getItemKey,
+    itemHeight,
+    items,
+    renderItem,
+    toIndex,
+    gapValue,
+    setGapValue,
+    setItemHeight,
+  })
+
+  return (
+    <Box data-ui="VirtualList" {...rest} ref={ref} as={as} position="relative">
+      <div ref={wrapperRef} style={{height}}>
+        {children}
+      </div>
+    </Box>
+  )
+}
+
+function useChildren({
+  fromIndex,
+  gap,
+  getItemKey,
+  itemHeight,
+  items,
+  renderItem,
+  toIndex,
+  gapValue,
+  setGapValue,
+  setItemHeight,
+}: Pick<VirtualListProps, 'getItemKey' | 'renderItem'> &
+  Required<Pick<VirtualListProps, 'items'>> & {
+    fromIndex: number
+    gap: Space
+    itemHeight: number | undefined
+    toIndex: number
+    gapValue: number
+    setGapValue: React.Dispatch<React.SetStateAction<number>>
+    setItemHeight: React.Dispatch<React.SetStateAction<number | undefined>>
+  }) {
+  if (!renderItem || items.length === 0) return null
+
+  if (itemHeight === -1) {
+    return [
+      <>
+        <Box
+          key={0}
+          ref={(el) => {
+            if (el) setItemHeight(el.offsetHeight)
+          }}
+          insetLeft={0}
+          insetRight={0}
+          insetTop={0}
+          position="absolute"
+        >
+          {renderItem(items[0])}
+        </Box>
+        <div
+          ref={(el) => {
+            if (el) setGapValue(el.offsetHeight)
+          }}
+          style={{height: vars.space[gap]}}
+        />
+      </>,
+    ]
+  }
+
+  const slicedItems = items.slice(fromIndex, toIndex)
+
+  return slicedItems.map((item, _itemIndex) => {
+    const itemIndex = fromIndex + _itemIndex
+    const node = renderItem(item)
+    const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
+
+    return (
+      <Box
+        key={key}
+        insetLeft={0}
+        insetRight={0}
+        position="absolute"
+        style={{
+          top: typeof itemHeight === 'number' ? itemIndex * (itemHeight + gapValue) : undefined,
+        }}
+      >
+        {node}
+      </Box>
+    )
+  })
+}
+
+function _findScrollableParent(parentNode: ParentNode | null) {
+  let _scrollEl = parentNode
+
+  while (_scrollEl && !_isScrollable(_scrollEl)) {
+    _scrollEl = _scrollEl.parentNode
+  }
+
+  return _scrollEl
+}

package/src/components/virtualList/__workshop__/ChangingProps.tsx

@@ -0,0 +1,41 @@
+import {Box, Card, Container, Text, VirtualList} from '@sanity/ui'
+import {useState} from 'react'
+
+type Item = {
+  key: number
+}
+
+const data: Item[] = Array.from(new Array(1000)).map((_, key) => ({key}))
+
+export default function ChangingPropsStory(): React.JSX.Element {
+  const [expanded, setExpanded] = useState(false)
+
+  const toggleExpand = () => setExpanded((v) => !v)
+
+  return (
+    <Container paddingX={4} paddingY={5} width={1}>
+      <Box marginBottom={5}>
+        <Text muted size={1}>
+          Click any item to toggle expanded view
+        </Text>
+      </Box>
+
+      <VirtualList
+        gap={expanded ? 4 : 2}
+        items={data}
+        renderItem={(item) => (
+          <Card
+            as="button"
+            paddingX={3}
+            paddingY={expanded ? 5 : 3}
+            radius={4}
+            shadow={1}
+            onClick={toggleExpand}
+          >
+            <Text size={1}>Item #{item.key}</Text>
+          </Card>
+        )}
+      />
+    </Container>
+  )
+}