@sanity/ui 4.0.0-v4.1 → 4.0.0

package/src/core/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 gap={1} onFocus={handleFocus} ref={ref}>
-          <TreeItem data-testid="fruit" 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 data-testid="bananas" onClick={handleClick} text="Bananas" />
-            <TreeItem data-testid="pears" onClick={handleClick} text="Pears">
-              <TreeItem data-testid="pears/anjou" onClick={handleClick} text="Anjou" />
-              <TreeItem data-testid="pears/bartlett" onClick={handleClick} text="Bartlett" />
-              <TreeItem data-testid="pears/bosc" onClick={handleClick} text="Bosc" />
-              <TreeItem data-testid="pears/concorde" onClick={handleClick} text="Concorde" />
-              <TreeItem data-testid="pears/seckel" onClick={handleClick} text="Seckel" />
-              <TreeItem data-testid="pears/starkrimson" onClick={handleClick} text="Starkrimson" />
-            </TreeItem>
-          </TreeItem>
-        </Tree>
-      </Wrapper>
-    </Box>
-  )
-}

package/src/core/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/core/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/core/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/core/components/tree/types.ts

@@ -1,24 +0,0 @@
-import type {ResponsiveProp} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
-
-/**
- * @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/core/components/tree/useTree.ts

@@ -1,17 +0,0 @@
-import {useContext} from 'react'
-
-import {TreeContext} from './TreeContext'
-import type {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/core/components/virtualList/VirtualList.tsx

@@ -1,209 +0,0 @@
-import {vars} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
-import {
-  type CSSProperties,
-  type ReactNode,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import {_isScrollable} from '../../helpers/scroll'
-import {_ResizeObserver} from '../../observers/resize'
-import {Box} from '../../primitives/box/Box'
-import type {ComponentType, Props} from '../../types'
-
-/** @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 type VirtualListOwnProps<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> = Props<
-  VirtualListOwnProps,
-  E
->
-
-/** @beta */
-export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT>(
-  props: VirtualListProps<E>,
-): 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(-1)
-
-  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 scrollEl = findScrollable(ref.current.parentNode)
-
-    if (scrollEl) {
-      if (!(scrollEl instanceof HTMLElement)) return
-
-      const handleScroll = () => {
-        setScrollTop(scrollEl.scrollTop)
-      }
-
-      scrollEl.addEventListener('scroll', handleScroll, {passive: true})
-
-      const ro = new _ResizeObserver((entries) => {
-        setScrollHeight(entries[0].contentRect.height)
-      })
-
-      ro.observe(scrollEl)
-
-      handleScroll()
-
-      return () => {
-        scrollEl.removeEventListener('scroll', handleScroll)
-
-        ro.unobserve(scrollEl)
-        ro.disconnect()
-      }
-    }
-
-    const handleScroll = () => {
-      setScrollTop(window.scrollY)
-    }
-
-    const handleResize = () => {
-      setScrollHeight(window.innerHeight)
-    }
-
-    window.addEventListener('scroll', handleScroll, {passive: true})
-    window.addEventListener('resize', handleResize)
-
-    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(() => {
-    onChange?.({
-      fromIndex,
-      gap: gapValue,
-      itemHeight,
-      scrollHeight,
-      scrollTop,
-      toIndex,
-    })
-  }, [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex])
-
-  useEffect(() => {
-    // console.log('renderItem', renderItem)
-    setItemHeight(-1)
-  }, [renderItem])
-
-  const children = useMemo(() => {
-    if (!renderItem || items.length === 0) return null
-
-    if (itemHeight === -1) {
-      return [
-        <>
-          <Box
-            ref={(el) => (el ? setItemHeight(el.offsetHeight) : undefined)}
-            insetTop={0}
-            insetLeft={0}
-            insetRight={0}
-            key={0}
-            position="absolute"
-          >
-            {renderItem(items[0])}
-          </Box>
-          <div
-            ref={(el) => (el ? setGapValue(el.offsetHeight) : undefined)}
-            style={{height: vars.space[gap]}}
-          />
-        </>,
-      ]
-    }
-
-    return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
-      const itemIndex = fromIndex + _itemIndex
-      const node = renderItem(item)
-      const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
-
-      return (
-        <Box
-          insetLeft={0}
-          insetRight={0}
-          key={key}
-          position="absolute"
-          style={{top: itemIndex * (itemHeight + gapValue)}}
-        >
-          {node}
-        </Box>
-      )
-    })
-  }, [fromIndex, gap, gapValue, getItemKey, itemHeight, items, renderItem, toIndex])
-
-  const wrapperStyle: CSSProperties = useMemo(() => ({height}), [height])
-
-  return (
-    <Box data-ui="VirtualList" {...rest} as={as} position="relative" ref={ref}>
-      <div ref={wrapperRef} style={wrapperStyle}>
-        {children}
-      </div>
-    </Box>
-  )
-}
-
-function findScrollable(parentNode: ParentNode | null) {
-  let _scrollEl = parentNode
-
-  while (_scrollEl && !_isScrollable(_scrollEl)) {
-    _scrollEl = _scrollEl.parentNode
-  }
-
-  return _scrollEl
-}

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

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

package/src/core/components/virtualList/__workshop__/ElementScroll.tsx

@@ -1,24 +0,0 @@
-import {Box, Card, Container, Text, VirtualList} from '@sanity/ui'
-import {useCallback} from 'react'
-
-const data = Array.from(new Array(1000)).map((_, key) => ({key}))
-
-export default function ElementScrollStory(): React.JSX.Element {
-  const renderItem = useCallback((item: {key: number}) => {
-    return (
-      <Card padding={3} radius={2} shadow={1}>
-        <Text>Item #{item.key}</Text>
-      </Card>
-    )
-  }, [])
-
-  return (
-    <Box height="fill" padding={4} sizing="border">
-      <Card height="fill" overflow="auto" padding={4} shadow={1} sizing="border">
-        <Container width={1}>
-          <VirtualList gap={2} items={data} renderItem={renderItem} />
-        </Container>
-      </Card>
-    </Box>
-  )
-}

package/src/core/components/virtualList/__workshop__/InfiniteList.tsx

@@ -1,48 +0,0 @@
-import {Box, Card, Text, VirtualList, type VirtualListChangeOpts} from '@sanity/ui'
-import {useCallback, useRef, useState} from 'react'
-
-interface Item {
-  key: string
-}
-
-function getData(len: number, offsetIndex = 0): Item[] {
-  return Array.from(new Array(len)).map((_, index) => ({key: String(offsetIndex + index)}))
-}
-
-const ITEMS_PER_PAGE = 1000
-
-export default function InfiniteListStory(): React.JSX.Element {
-  const [data, setData] = useState<Item[]>(() => getData(ITEMS_PER_PAGE))
-  const offsetRef = useRef(0)
-
-  const getItemKey = useCallback((item: Item) => `item-${item.key}`, [])
-
-  const handleChange = useCallback((opts: VirtualListChangeOpts) => {
-    const maxIndex = (offsetRef.current + 1) * ITEMS_PER_PAGE
-
-    if (opts.toIndex >= maxIndex - 50) {
-      offsetRef.current += 1
-      setData((d) => d.concat(getData(ITEMS_PER_PAGE, offsetRef.current * ITEMS_PER_PAGE)))
-    }
-  }, [])
-
-  const renderItem = useCallback((item: Item) => {
-    return (
-      <Card padding={3} shadow={1}>
-        <Text align="center">Item #{item.key}</Text>
-      </Card>
-    )
-  }, [])
-
-  return (
-    <Box padding={4}>
-      <VirtualList
-        gap={3}
-        getItemKey={getItemKey}
-        items={data}
-        onChange={handleChange}
-        renderItem={renderItem}
-      />
-    </Box>
-  )
-}

package/src/core/components/virtualList/__workshop__/WindowScrolll.tsx

@@ -1,22 +0,0 @@
-import {Box, Card, Container, Text, VirtualList} from '@sanity/ui'
-import {useCallback} from 'react'
-
-const data = Array.from(new Array(1000)).map((_, key) => ({key}))
-
-export default function WindowScrollStory(): React.JSX.Element {
-  const renderItem = useCallback((item: {key: number}) => {
-    return (
-      <Card padding={3} radius={2} shadow={1}>
-        <Text>Item #{item.key}</Text>
-      </Card>
-    )
-  }, [])
-
-  return (
-    <Box padding={4}>
-      <Container width={1}>
-        <VirtualList gap={2} items={data} renderItem={renderItem} />
-      </Container>
-    </Box>
-  )
-}

package/src/core/components/virtualList/__workshop__/index.ts

@@ -1,31 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'components/virtual-list',
-  title: 'VirtualList',
-  stories: [
-    {
-      name: 'window-scroll',
-      title: 'Window scroll',
-      component: lazy(() => import('./WindowScrolll')),
-    },
-    {
-      name: 'element-scroll',
-      title: 'Element scroll',
-      component: lazy(() => import('./ElementScroll')),
-    },
-    {
-      name: 'infinite-list',
-      title: 'Infinite list',
-      component: lazy(() => import('./InfiniteList')),
-    },
-    {
-      name: 'changing-props',
-      title: 'Changing props',
-      component: lazy(() => import('./ChangingProps')),
-    },
-  ],
-}
-
-export default scope