@sanity/ui 0.37.2 → 0.37.3

package/src/utils/resizeObserver.ts

@@ -1,12 +0,0 @@
-import {ResizeObserver as ResizeObserverPolyfill} from '@juggle/resize-observer'
-
-/**
- * @internal
- */
-const RO: typeof ResizeObserver = (
-  typeof window !== 'undefined' && window.ResizeObserver
-    ? window.ResizeObserver
-    : ResizeObserverPolyfill
-) as any
-
-export {RO as ResizeObserver}

package/src/utils/srOnly/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/utils/srOnly/index.ts

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

package/src/utils/srOnly/srOnly.tsx

@@ -1,34 +0,0 @@
-import React, {forwardRef} from 'react'
-import styled from 'styled-components'
-
-/**
- * @public
- */
-export interface SrOnlyProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  children?: React.ReactNode
-}
-
-const Root = styled.div`
-  display: block;
-  width: 0;
-  height: 0;
-  position: absolute;
-  overflow: hidden;
-`
-
-/**
- * @public
- */
-export const SrOnly = forwardRef(function SrOnly(
-  props: SrOnlyProps & Omit<React.HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>,
-  ref: React.Ref<HTMLDivElement>
-) {
-  const {as, children} = props
-
-  return (
-    <Root aria-hidden as={as} data-ui="SrOnly" ref={ref}>
-      {children}
-    </Root>
-  )
-})

package/src/utils/virtualList/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/utils/virtualList/__workshop__/changingProps.tsx

@@ -1,36 +0,0 @@
-import {Box, Card, Text, VirtualList} from '@sanity/ui'
-import React, {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/utils/virtualList/__workshop__/elementScroll.tsx

@@ -1,24 +0,0 @@
-import {Box, Card, Container, Text, VirtualList} from '@sanity/ui'
-import React, {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/utils/virtualList/__workshop__/index.ts

@@ -1,25 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('utils/virtual-list', 'VirtualList', [
-  {
-    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/utils/virtualList/__workshop__/infiniteList.tsx

@@ -1,48 +0,0 @@
-import {Box, Card, Text, VirtualList, VirtualListChangeOpts} from '@sanity/ui'
-import React, {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/utils/virtualList/__workshop__/windowScrolll.tsx

@@ -1,22 +0,0 @@
-import {Box, Card, Container, Text, VirtualList} from '@sanity/ui'
-import React, {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/utils/virtualList/index.ts

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

package/src/utils/virtualList/virtualList.tsx

@@ -1,164 +0,0 @@
-import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
-import styled from 'styled-components'
-import {_isScrollable} from '../../helpers'
-import {useForwardedRef} from '../../hooks'
-import {StackProps} from '../../primitives'
-import {useTheme} from '../../theme'
-
-/**
- * @beta
- */
-export interface VirtualListChangeOpts {
-  fromIndex: number
-  gap: number
-  itemHeight: number
-  scrollHeight: number
-  scrollTop: number
-  toIndex: number
-}
-
-/**
- * @beta
- */
-export interface VirtualListProps<Item = any> {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  gap?: number
-  getItemKey?: (item: Item, itemIndex: number) => string
-  items?: Item[]
-  onChange?: (opts: VirtualListChangeOpts) => void
-  renderItem?: (item: Item) => React.ReactNode
-}
-
-const Root = styled.div`
-  position: relative;
-`
-
-const ItemWrapper = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-`
-
-/**
- * @beta
- */
-export const VirtualList = forwardRef(function VirtualList(
-  props: VirtualListProps &
-    StackProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>
-): React.ReactElement {
-  const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
-  const {space} = useTheme().sanity
-  const forwardedRef = useForwardedRef(ref)
-  const wrapperRef = useRef<HTMLDivElement | null>(null)
-  const [scrollTop, setScrollTop] = useState(0)
-  const [scrollHeight, setScrollHeight] = useState(0)
-  const [itemHeight, setItemHeight] = useState(-1)
-
-  useEffect(() => {
-    if (!wrapperRef.current) return
-
-    const firstElement = wrapperRef.current.firstChild
-
-    if (firstElement instanceof HTMLElement) {
-      setItemHeight(firstElement.offsetHeight)
-    }
-  }, [renderItem])
-
-  useEffect(() => {
-    if (!forwardedRef.current) return
-
-    let _scrollEl = forwardedRef.current.parentNode
-
-    while (_scrollEl && !_isScrollable(_scrollEl)) {
-      _scrollEl = _scrollEl.parentNode
-    }
-
-    if (_scrollEl) {
-      const scrollEl = _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)
-    }
-  }, [forwardedRef])
-
-  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 [<ItemWrapper key={0}>{renderItem(items[0])}</ItemWrapper>]
-    }
-
-    return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
-      const itemIndex = fromIndex + _itemIndex
-      const node = renderItem(item)
-      const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
-
-      return (
-        <ItemWrapper key={key} style={{top: itemIndex * (itemHeight + space[gap])}}>
-          {node}
-        </ItemWrapper>
-      )
-    })
-  }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex])
-
-  const wrapperStyle = useMemo(() => ({height}), [height])
-
-  return (
-    <Root as={as} data-ui="VirtualList" {...restProps} ref={forwardedRef}>
-      <div ref={wrapperRef} style={wrapperStyle}>
-        {children}
-      </div>
-    </Root>
-  )
-})