@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

package/src/core/components/tree/treeItem.tsx

@@ -0,0 +1,237 @@
+import {ToggleArrowRightIcon} from '@sanity/icons'
+import {type ResponsiveProp, treeItem, vars} from '@sanity/ui/css'
+import type {FontTextSize, FontWeight, Space} from '@sanity/ui/theme'
+import {
+  type ElementType,
+  type KeyboardEvent,
+  type MouseEvent,
+  type MouseEventHandler,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+} from 'react'
+
+import {Box, type BoxProps} from '../../primitives/box/box'
+import type {CardOwnProps} from '../../primitives/card/card'
+import {Flex} from '../../primitives/flex/flex'
+import {Selectable, type SelectableElementType} from '../../primitives/selectable/selectable'
+import {Text} from '../../primitives/text/text'
+import type {ComponentType, Props} from '../../types'
+import {TreeContext} from './treeContext'
+import {TreeGroup} from './treeGroup'
+import {useTree} from './useTree'
+
+/** @beta */
+export const DEFAULT_TREE_ITEM_ELEMENT = 'a'
+
+/** @beta */
+export type TreeItemOwnProps = CardOwnProps & {
+  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>
+  space?: ResponsiveProp<Space>
+  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,
+    href,
+    icon: IconComponent,
+    id: idProp,
+    linkAs = 'a',
+    muted,
+    onClick,
+    padding = 2,
+    radius = 2,
+    selected = false,
+    space = 2,
+    text,
+    weight,
+    ...rest
+  } = props as TreeItemProps<typeof DEFAULT_TREE_ITEM_ELEMENT>
+
+  const rootRef = useRef<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 = useMemo(() => path.concat([id || '']), [id, path])
+  const itemKey = itemPath.join('/')
+  const itemState = tree.state[itemKey]
+  const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
+  const focused = tree.focusedElement && tree.focusedElement === rootRef.current
+  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(rootRef.current)
+      }
+    },
+    [expanded, itemKey, onClick, setExpanded, setFocusedElement],
+  )
+
+  const handleKeyDown = useCallback(
+    (event: 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 gap={space} padding={padding}>
+      <Box
+        style={{
+          visibility: IconComponent || children ? 'visible' : 'hidden',
+          pointerEvents: 'none',
+        }}
+      >
+        {IconComponent && (
+          <Text muted={muted} size={fontSize} weight={weight}>
+            <IconComponent />
+          </Text>
+        )}
+        {!IconComponent && (
+          <Text muted={muted} size={fontSize} weight={weight}>
+            <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
+          </Text>
+        )}
+      </Box>
+      <Box flex={1}>
+        <Text muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
+          {text}
+        </Text>
+      </Box>
+    </Flex>
+  )
+
+  if (href) {
+    return (
+      <Box
+        data-selected={selected ? '' : undefined}
+        data-tree-id={id}
+        data-tree-key={itemKey}
+        data-ui="TreeItem"
+        {...(rest as BoxProps<'li'>)}
+        as="li"
+        className={treeItem({className})}
+        onClick={handleClick}
+        ref={rootRef as Ref<HTMLLIElement>}
+        role="none"
+      >
+        <Selectable
+          aria-expanded={expanded}
+          as={linkAs}
+          // data-pressed={selected ? '' : undefined}
+          data-ui="TreeItem__box"
+          href={href}
+          radius={radius}
+          ref={treeitemRef}
+          role="treeitem"
+          selected={selected}
+          tabIndex={tabIndex}
+          style={{
+            paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
+          }}
+        >
+          {content}
+        </Selectable>
+
+        <TreeContext.Provider value={contextValue}>
+          {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
+        </TreeContext.Provider>
+      </Box>
+    )
+  }
+
+  return (
+    <Box
+      data-selected={selected ? '' : undefined}
+      data-ui="TreeItem"
+      data-tree-id={id}
+      data-tree-key={itemKey}
+      {...(rest as BoxProps<'a'>)}
+      aria-expanded={expanded}
+      className={treeItem({className})}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      ref={rootRef as Ref<HTMLAnchorElement>}
+      role="treeitem"
+      tabIndex={tabIndex}
+    >
+      <Selectable
+        as="button"
+        // data-pressed={selected ? '' : undefined}
+        data-focused={focused ? '' : undefined}
+        data-ui="TreeItem__box"
+        radius={radius}
+        selected={selected}
+        style={{
+          paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
+        }}
+      >
+        {content}
+      </Selectable>
+
+      <TreeContext.Provider value={contextValue}>
+        {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
+      </TreeContext.Provider>
+    </Box>
+  )
+}

package/src/core/components/tree/types.ts

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

@@ -0,0 +1,17 @@
+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/__workshop__/changingProps.tsx

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

@@ -0,0 +1,24 @@
+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__/index.ts

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

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

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

@@ -0,0 +1,22 @@
+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/virtualList.tsx

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