@sanity/ui 0.37.3 → 0.37.4

package/src/utils/resizeObserver.ts

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

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

package/src/utils/srOnly/index.ts

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

package/src/utils/srOnly/srOnly.tsx

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

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

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

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

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

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

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

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

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

package/src/utils/virtualList/virtualList.tsx

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