@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

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

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

@@ -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/__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__/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

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/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
-}