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

package/src/ui/utils/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 ChangingProps() {
-  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/ui/utils/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 ElementScroll() {
-  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/ui/utils/virtualList/__workshop__/index.ts

@@ -1,29 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'utils/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')),
-    },
-  ],
-})

package/src/ui/utils/virtualList/__workshop__/infiniteList.tsx

@@ -1,48 +0,0 @@
-import {Box, Card, Text, VirtualList, 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 InfiniteList() {
-  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/ui/utils/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 Example() {
-  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/ui/utils/virtualList/index.ts

@@ -1 +0,0 @@
-export * from './virtualList'

package/src/ui/utils/virtualList/virtualList.tsx

@@ -1,189 +0,0 @@
-import {
-  ForwardedRef,
-  forwardRef,
-  ReactElement,
-  ReactNode,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import {useTheme_v2} from '../../_compat'
-import {_isScrollable} from '../../helpers'
-import {_ResizeObserver} from '../../observers'
-import {Box, StackProps} from '../../primitives'
-import {Props} from '../../types'
-
-/**
- * @beta
- */
-export interface VirtualListChangeOpts {
-  fromIndex: number
-  gap: number
-  itemHeight: number
-  scrollHeight: number
-  scrollTop: number
-  toIndex: number
-}
-
-/**
- * @beta
- */
-export interface VirtualListProps<Item = any> extends Omit<StackProps, 'gap'> {
-  gap?: number
-  getItemKey?: (item: Item, itemIndex: number) => string
-  items?: Item[]
-  onChange?: (opts: VirtualListChangeOpts) => void
-  renderItem?: (item: Item) => ReactNode
-}
-
-/**
- * @beta
- */
-export const VirtualList = forwardRef(function VirtualList(
-  props: Props<VirtualListProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
-): ReactElement {
-  const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
-  const {space} = useTheme_v2()
-  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)
-
-  // Sync ref to parent
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  useEffect(() => {
-    if (!wrapperRef.current) return
-
-    const firstElement = wrapperRef.current.firstChild
-
-    if (firstElement instanceof HTMLElement) {
-      setItemHeight(firstElement.offsetHeight)
-    }
-  }, [renderItem])
-
-  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 + space[gap]) - space[gap] : 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 (!onChange) return
-    onChange({fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex})
-  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex])
-
-  const children = useMemo(() => {
-    if (!renderItem || items.length === 0) return null
-
-    if (itemHeight === -1) {
-      return [
-        <Box insetTop={0} insetLeft={0} insetRight={0} key={0} position="absolute">
-          {renderItem(items[0])}
-        </Box>,
-      ]
-    }
-
-    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 + space[gap])}}
-        >
-          {node}
-        </Box>
-      )
-    })
-  }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex])
-
-  const wrapperStyle = useMemo(() => ({height}), [height])
-
-  return (
-    <Box
-      // Root
-      as={as}
-      data-ui="VirtualList"
-      {...restProps}
-      position="relative"
-      ref={ref}
-    >
-      <div ref={wrapperRef} style={wrapperStyle}>
-        {children}
-      </div>
-    </Box>
-  )
-})
-
-VirtualList.displayName = 'ForwardRef(VirtualList)'
-
-function findScrollable(parentNode: ParentNode | null) {
-  let _scrollEl = parentNode
-
-  while (_scrollEl && !_isScrollable(_scrollEl)) {
-    _scrollEl = _scrollEl.parentNode
-  }
-
-  return _scrollEl
-}