@sanity/ui 4.0.0-beta.8 → 4.0.0-next.2

package/src/components/virtualList/VirtualList.tsx

@@ -1,254 +0,0 @@
-import {vars} from '@sanity/ui-css'
-import type {Space} from '@sanity/ui-tokens'
-import {
-  type ReactNode,
-  startTransition,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
-
-import {_isScrollable} from '../../core/helpers/scroll'
-import type {ComponentType, Props} from '../../core/types'
-import {Box} from '../../primitives/box/Box'
-
-/** @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 interface VirtualListOwnProps<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  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,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Item = any,
-> = Props<VirtualListOwnProps<Item>, E>
-
-/** @beta */
-export function VirtualList<
-  E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Item = any,
->(props: VirtualListProps<E, Item>): 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<number | undefined>(undefined)
-
-  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 scrollableParent = _findScrollableParent(ref.current.parentNode)
-
-    if (scrollableParent !== document.documentElement && scrollableParent) {
-      if (!(scrollableParent instanceof HTMLElement)) return
-
-      const handleScroll = () => {
-        setScrollTop(scrollableParent.scrollTop)
-      }
-
-      scrollableParent.addEventListener('scroll', handleScroll, {passive: true})
-
-      const ro = new ResizeObserver((entries) => {
-        setScrollHeight(entries[0].contentRect.height)
-      })
-
-      ro.observe(scrollableParent)
-
-      handleScroll()
-
-      return () => {
-        scrollableParent.removeEventListener('scroll', handleScroll)
-
-        ro.unobserve(scrollableParent)
-        ro.disconnect()
-      }
-    }
-
-    const handleScroll = () => {
-      setScrollTop(window.scrollY)
-    }
-
-    const handleResize = () => {
-      setScrollHeight(window.innerHeight)
-    }
-
-    window.addEventListener('scroll', handleScroll, {passive: true})
-    window.addEventListener('resize', handleResize)
-
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    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(() => {
-    if (itemHeight === undefined) return
-
-    onChange?.({
-      fromIndex,
-      gap: gapValue,
-      itemHeight,
-      scrollHeight,
-      scrollTop,
-      toIndex,
-    })
-  }, [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex])
-
-  useEffect(() => {
-    startTransition(() => setItemHeight(undefined))
-  }, [renderItem])
-
-  const children = useChildren({
-    fromIndex,
-    gap,
-    getItemKey,
-    itemHeight,
-    items,
-    renderItem,
-    toIndex,
-    gapValue,
-    setGapValue,
-    setItemHeight,
-  })
-
-  return (
-    <Box data-ui="VirtualList" {...rest} ref={ref} as={as} position="relative">
-      <div ref={wrapperRef} style={{height}}>
-        {children}
-      </div>
-    </Box>
-  )
-}
-
-function useChildren({
-  fromIndex,
-  gap,
-  getItemKey,
-  itemHeight,
-  items,
-  renderItem,
-  toIndex,
-  gapValue,
-  setGapValue,
-  setItemHeight,
-}: Pick<VirtualListProps, 'getItemKey' | 'renderItem'> &
-  Required<Pick<VirtualListProps, 'items'>> & {
-    fromIndex: number
-    gap: Space
-    itemHeight: number | undefined
-    toIndex: number
-    gapValue: number
-    setGapValue: React.Dispatch<React.SetStateAction<number>>
-    setItemHeight: React.Dispatch<React.SetStateAction<number | undefined>>
-  }) {
-  if (!renderItem || items.length === 0) return null
-
-  if (itemHeight === -1) {
-    return [
-      <>
-        <Box
-          key={0}
-          ref={(el) => {
-            if (el) setItemHeight(el.offsetHeight)
-          }}
-          insetLeft={0}
-          insetRight={0}
-          insetTop={0}
-          position="absolute"
-        >
-          {renderItem(items[0])}
-        </Box>
-        <div
-          ref={(el) => {
-            if (el) setGapValue(el.offsetHeight)
-          }}
-          style={{height: vars.space[gap]}}
-        />
-      </>,
-    ]
-  }
-
-  const slicedItems = items.slice(fromIndex, toIndex)
-
-  return slicedItems.map((item, _itemIndex) => {
-    const itemIndex = fromIndex + _itemIndex
-    const node = renderItem(item)
-    const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
-
-    return (
-      <Box
-        key={key}
-        insetLeft={0}
-        insetRight={0}
-        position="absolute"
-        style={{
-          top: typeof itemHeight === 'number' ? itemIndex * (itemHeight + gapValue) : undefined,
-        }}
-      >
-        {node}
-      </Box>
-    )
-  })
-}
-
-function _findScrollableParent(parentNode: ParentNode | null) {
-  let _scrollEl = parentNode
-
-  while (_scrollEl && !_isScrollable(_scrollEl)) {
-    _scrollEl = _scrollEl.parentNode
-  }
-
-  return _scrollEl
-}

package/src/components/virtualList/__workshop__/ChangingProps.tsx

@@ -1,41 +0,0 @@
-import {Box, Card, Container, Text, VirtualList} from '@sanity/ui'
-import {useState} from 'react'
-
-type Item = {
-  key: number
-}
-
-const data: Item[] = Array.from(new Array(1000)).map((_, key) => ({key}))
-
-export default function ChangingPropsStory(): React.JSX.Element {
-  const [expanded, setExpanded] = useState(false)
-
-  const toggleExpand = () => setExpanded((v) => !v)
-
-  return (
-    <Container paddingX={4} paddingY={5} width={1}>
-      <Box marginBottom={5}>
-        <Text muted size={1}>
-          Click any item to toggle expanded view
-        </Text>
-      </Box>
-
-      <VirtualList
-        gap={expanded ? 4 : 2}
-        items={data}
-        renderItem={(item) => (
-          <Card
-            as="button"
-            paddingX={3}
-            paddingY={expanded ? 5 : 3}
-            radius={4}
-            shadow={1}
-            onClick={toggleExpand}
-          >
-            <Text size={1}>Item #{item.key}</Text>
-          </Card>
-        )}
-      />
-    </Container>
-  )
-}

package/src/components/virtualList/__workshop__/ElementScroll.tsx

@@ -1,43 +0,0 @@
-import {Card, Container, Text, VirtualList} from '@sanity/ui'
-
-type Item = {
-  key: number
-}
-
-const data: Item[] = Array.from(new Array(1000)).map((_, key) => ({key}))
-
-export default function ElementScrollStory(): React.JSX.Element {
-  return (
-    <Card
-      __unstable_pattern="halftone"
-      height="fill"
-      padding={4}
-      sizing="border"
-      tone="transparent"
-    >
-      <Card
-        height="fill"
-        margin="auto"
-        maxWidth={1}
-        overflow="auto"
-        padding={4}
-        radius={5}
-        shadow={1}
-        sizing="border"
-        tone="default"
-      >
-        <Container width={1}>
-          <VirtualList
-            gap={2}
-            items={data}
-            renderItem={(item) => (
-              <Card padding={3} radius={4} shadow={1}>
-                <Text size={1}>Item #{item.key}</Text>
-              </Card>
-            )}
-          />
-        </Container>
-      </Card>
-    </Card>
-  )
-}

package/src/components/virtualList/__workshop__/InfiniteList.tsx

@@ -1,40 +0,0 @@
-import {Card, Container, Text, VirtualList} from '@sanity/ui'
-import {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(() => getData(ITEMS_PER_PAGE))
-  const offsetRef = useRef(0)
-
-  return (
-    <Container padding={4} width={1}>
-      <VirtualList
-        gap={2}
-        getItemKey={(item) => `item-${item.key}`}
-        items={data}
-        renderItem={(item) => (
-          <Card padding={3} radius={4} shadow={1}>
-            <Text size={1}>Item #{item.key}</Text>
-          </Card>
-        )}
-        onChange={({toIndex}) => {
-          const maxIndex = (offsetRef.current + 1) * ITEMS_PER_PAGE
-
-          if (toIndex >= maxIndex - 50) {
-            offsetRef.current += 1
-            setData((d) => d.concat(getData(ITEMS_PER_PAGE, offsetRef.current * ITEMS_PER_PAGE)))
-          }
-        }}
-      />
-    </Container>
-  )
-}

package/src/components/virtualList/__workshop__/WindowScrolll.tsx

@@ -1,23 +0,0 @@
-import {Card, Container, Text, VirtualList} from '@sanity/ui'
-
-type Item = {
-  key: number
-}
-
-const data: Item[] = Array.from(new Array(1000)).map((_, key) => ({key}))
-
-export default function WindowScrollStory(): React.JSX.Element {
-  return (
-    <Container paddingX={[4, 5, 6]} paddingY={[5, 6, 7]} width={1}>
-      <VirtualList
-        gap={2}
-        items={data}
-        renderItem={(item) => (
-          <Card padding={3} radius={4} shadow={1}>
-            <Text size={1}>Item #{item.key}</Text>
-          </Card>
-        )}
-      />
-    </Container>
-  )
-}

package/src/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/_keys.ts

@@ -1,26 +0,0 @@
-type PropertyKey = string | number | symbol
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Any = any
-
-/** @internal */
-export function _splitKeys<
-  P extends Record<PropertyKey, Any>,
-  const K extends readonly (keyof P)[],
->(props: P, keys: K) {
-  const style = {} as Pick<P, K[number]>
-  const rest = {} as Omit<P, K[number]>
-
-  // Faster membership than Array.includes for large key lists
-  const keySet = new Set<PropertyKey>(keys as readonly PropertyKey[])
-
-  for (const k in props) {
-    if (keySet.has(k)) {
-      ;(style as Any)[k] = (props as Any)[k]
-    } else {
-      ;(rest as Any)[k] = (props as Any)[k]
-    }
-  }
-
-  return [style, rest] as const
-}

package/src/core/constants.ts

@@ -1,67 +0,0 @@
-import type {Transition, Variant} from 'motion/react'
-
-export const EMPTY_ARRAY: never[] = []
-
-export const EMPTY_RECORD: Record<string, never> = {}
-
-const POPOVER_MOTION_DURATION = 0.2
-
-/**
- * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
- */
-export const POPOVER_MOTION_PROPS: {
-  card: {
-    initial: Variant
-    hidden: Variant
-    visible: Variant
-    scaleIn: Variant
-    scaleOut: Variant
-  }
-  children: {
-    hidden: Variant
-    visible: Variant
-  }
-  transition: Transition
-} = {
-  card: {
-    initial: {
-      scale: 0.97,
-      willChange: 'transform',
-    },
-    hidden: {
-      opacity: 0,
-    },
-    visible: {
-      opacity: 1,
-      transition: {
-        when: 'beforeChildren',
-        duration: POPOVER_MOTION_DURATION / 2,
-      },
-    },
-    scaleIn: {
-      scale: 1,
-    },
-    scaleOut: {
-      scale: 0.97,
-    },
-  },
-  children: {
-    hidden: {
-      opacity: 0,
-    },
-    visible: {
-      opacity: 1,
-    },
-  },
-  transition: {
-    type: 'spring',
-    visualDuration: POPOVER_MOTION_DURATION,
-    bounce: 0.25,
-  },
-}
-
-export const Z_OFFSETS = {
-  dialog: 600,
-  popover: 400,
-  tooltip: 200,
-}

package/src/core/getElementRef.ts

@@ -1,29 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-/** @internal */
-// Based on https://github.com/radix-ui/primitives/blob/0bade6a704e5821b90a6da0f3d8cfa8a7711127d/packages/react/slot/src/Slot.tsx#L128-L150
-// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
-// After React 19 accessing `element.ref` does the opposite.
-// https://github.com/facebook/react/pull/28348
-//
-// Access the ref using the method that doesn't yield a warning.
-export function getElementRef(element: React.ReactElement): React.Ref<unknown> | undefined {
-  // React <=18 in DEV
-  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
-  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    return (element as any).ref
-  }
-
-  // React 19 in DEV
-  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get
-  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    return (element.props as {ref?: React.Ref<unknown>}).ref
-  }
-
-  // Not DEV
-  return (element.props as {ref?: React.Ref<unknown>}).ref || (element as any).ref
-}

package/src/core/helpers/animation.ts

@@ -1,26 +0,0 @@
-/**
- * @internal
- */
-export function _raf(fn: () => void): () => void {
-  const frameId = requestAnimationFrame(fn)
-
-  return () => {
-    cancelAnimationFrame(frameId)
-  }
-}
-
-/**
- * @internal
- */
-export function _raf2(fn: () => void): () => void {
-  let innerDispose: (() => void) | undefined = undefined
-
-  const dispose = _raf(() => {
-    innerDispose = _raf(fn)
-  })
-
-  return () => {
-    innerDispose?.()
-    dispose()
-  }
-}

package/src/core/helpers/element.ts

@@ -1,55 +0,0 @@
-/**
- * @internal
- */
-export function _isEnterToClickElement(element: HTMLElement): boolean {
-  return isHTMLAnchorElement(element) || isHTMLButtonElement(element)
-}
-
-/**
- * @internal
- */
-export function isHTMLElement(node: unknown): node is HTMLElement {
-  return node instanceof Node && node.nodeType === Node.ELEMENT_NODE
-}
-
-/**
- * @internal
- */
-export function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement {
-  return isHTMLElement(element) && element.nodeName === 'A'
-}
-
-/**
- * @internal
- */
-export function isHTMLInputElement(element: unknown): element is HTMLInputElement {
-  return isHTMLElement(element) && element.nodeName === 'INPUT'
-}
-
-/**
- * @internal
- */
-export function isHTMLButtonElement(element: unknown): element is HTMLButtonElement {
-  return isHTMLElement(element) && element.nodeName === 'BUTTON'
-}
-
-/**
- * @internal
- */
-export function isHTMLSelectElement(element: unknown): element is HTMLSelectElement {
-  return isHTMLElement(element) && element.nodeName === 'SELECT'
-}
-
-/**
- * @internal
- */
-export function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement {
-  return isHTMLElement(element) && element.nodeName === 'TEXTAREA'
-}
-
-/**
- * @internal
- */
-export function containsOrEqualsElement(element: HTMLElement, node: Node): boolean {
-  return element.contains(node) || element === node
-}