@sanity/ui 3.0.0-static.2 → 3.0.0-static.20

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

@@ -1,4 +1,4 @@
-import {Box, Card, Text, VirtualList, VirtualListChangeOpts} from '@sanity/ui'
+import {Box, Card, Text, VirtualList, type VirtualListChangeOpts} from '@sanity/ui'
 import {useCallback, useRef, useState} from 'react'
 
 interface Item {

package/src/core/utils/virtualList/virtualList.tsx

@@ -1,8 +1,8 @@
+import {vars} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 import {
-  ForwardedRef,
-  forwardRef,
-  ReactElement,
-  ReactNode,
+  type CSSProperties,
+  type ReactNode,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -10,15 +10,15 @@ import {
   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'
+import {Box} from '../../primitives'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @beta
- */
+/** @beta */
+export const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
+
+/** @beta */
 export interface VirtualListChangeOpts {
   fromIndex: number
   gap: number
@@ -28,45 +28,50 @@ export interface VirtualListChangeOpts {
   toIndex: number
 }
 
-/**
- * @beta
- */
-export interface VirtualListProps<Item = any> extends Omit<StackProps, 'gap'> {
-  gap?: 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 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()
+/** @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>,
+) {
+  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(() => {
-    if (!wrapperRef.current) return
-
-    const firstElement = wrapperRef.current.firstChild
-
-    if (firstElement instanceof HTMLElement) {
-      setItemHeight(firstElement.offsetHeight)
-    }
-  }, [renderItem])
-
   useEffect((): (() => void) | undefined => {
     if (!ref.current) return
 
@@ -119,23 +124,42 @@ export const VirtualList = forwardRef(function VirtualList(
   }, [])
 
   const len = items.length
-  const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0
+  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 (!onChange) return
-    onChange({fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex})
-  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex])
+    onChange?.({
+      fromIndex,
+      gap: gapValue,
+      itemHeight,
+      scrollHeight,
+      scrollTop,
+      toIndex,
+    })
+  }, [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex])
 
   const children = useMemo(() => {
     if (!renderItem || items.length === 0) return null
 
     if (itemHeight === -1) {
       return [
-        <Box insetTop={0} insetLeft={0} key={0} position="absolute">
-          {renderItem(items[0])}
-        </Box>,
+        <>
+          <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]}}
+          />
+        </>,
       ]
     }
 
@@ -147,35 +171,29 @@ export const VirtualList = forwardRef(function VirtualList(
       return (
         <Box
           insetLeft={0}
+          insetRight={0}
           key={key}
           position="absolute"
-          style={{top: itemIndex * (itemHeight + space[gap])}}
+          style={{top: itemIndex * (itemHeight + gapValue) - gapValue}}
         >
           {node}
         </Box>
       )
     })
-  }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex])
+  }, [fromIndex, gap, gapValue, getItemKey, itemHeight, items, renderItem, toIndex])
 
-  const wrapperStyle = useMemo(() => ({height}), [height])
+  const wrapperStyle: CSSProperties = useMemo(() => ({height}), [height])
 
   return (
-    <Box
-      // Root
-      as={as}
-      data-ui="VirtualList"
-      {...restProps}
-      position="relative"
-      ref={ref}
-    >
+    <Box data-ui="VirtualList" {...rest} as={as} position="relative" ref={ref}>
       <div ref={wrapperRef} style={wrapperStyle}>
         {children}
       </div>
     </Box>
   )
-})
+}
 
-VirtualList.displayName = 'ForwardRef(VirtualList)'
+VirtualList.displayName = 'VirtualList'
 
 function findScrollable(parentNode: ParentNode | null) {
   let _scrollEl = parentNode

package/src/css/_assign.ts

@@ -0,0 +1,3 @@
+export function _assign<T extends object, U extends object>(target: T, source: U): T & U {
+  return Object.assign(target, source)
+}

package/src/css/_compileStyle.ts

@@ -0,0 +1,156 @@
+import {PREFIX} from './prefix'
+import type {Properties, PropertiesWithVarsAndNested, Style, StyleRules} from './types'
+import {isArray} from './util'
+
+/** @internal */
+export function _compileStyle(style: Style): string {
+  let css = ''
+
+  if (style.rules) {
+    css += compileStyleRules(style.rules)
+  }
+
+  if (style.keyframes && Object.keys(style.keyframes).length > 0) {
+    for (const [name, value] of Object.entries(style.keyframes)) {
+      let keyframesCss = `@keyframes ${name} {\n`
+
+      for (const [key, props] of Object.entries(value)) {
+        keyframesCss += `  ${key} {\n`
+        keyframesCss += compileProperties(props)
+        keyframesCss += `}\n`
+      }
+
+      keyframesCss += `\n}\n\n`
+
+      css += keyframesCss
+    }
+  }
+
+  if (style.layers && Object.keys(style.layers).length > 0) {
+    for (const [layerName, layerRules] of Object.entries(style.layers)) {
+      if (Object.keys(layerRules).length > 0) {
+        css += `@layer ${layerName} {\n`
+        css += compileStyleRules(layerRules)
+        css += '}\n\n'
+      }
+    }
+  }
+
+  return css
+}
+
+export function compileStyleRules(rules: StyleRules) {
+  let css = ''
+
+  const mediaMap = new Map<
+    string,
+    {
+      selector: string
+      props: PropertiesWithVarsAndNested
+    }[]
+  >()
+
+  for (const [selector, properties] of Object.entries(rules)) {
+    if (!properties) {
+      continue
+    }
+
+    if (properties['@media']) {
+      for (const [mediaQuery, mediaProps] of Object.entries(properties['@media'])) {
+        const arr = mediaMap.get(mediaQuery) ?? []
+
+        arr.push({
+          selector,
+          props: mediaProps,
+        })
+
+        mediaMap.set(mediaQuery, arr)
+      }
+    }
+
+    css += compileStyleRule(selector, properties)
+  }
+
+  for (const [mediaQuery, mediaRules] of mediaMap) {
+    css += `@media ${mediaQuery} {\n`
+
+    for (const rule of mediaRules) {
+      css += compileStyleRule(rule.selector, rule.props)
+    }
+
+    css += `}\n\n`
+  }
+
+  return css
+}
+
+function compileStyleRule(_selector: string, properties: Properties): string {
+  let css = ''
+
+  const {
+    _prefix = true,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    '@media': _mediaProps,
+    'nest': nestedProps,
+    ...restProperties
+  } = properties
+
+  const selector = _prefix ? `${_selector.replace(/\./g, `.${PREFIX}`)}` : _selector
+
+  const propEntries = Object.entries(restProperties)
+
+  if (propEntries.length) {
+    css += `${selector} {\n`
+    css += compileProperties(restProperties)
+    css += '}\n\n'
+  }
+
+  if (nestedProps) {
+    for (const [_nestedSelector, nestedProperties] of Object.entries(nestedProps)) {
+      const nestedPrefix = _prefix && (nestedProperties._prefix ?? true)
+      const nestedSelector = nestedPrefix
+        ? _nestedSelector.replace(/\./g, `.${PREFIX}`)
+        : _nestedSelector
+
+      css += `${nestedSelector.replace(/&/g, selector)} {\n`
+      css += compileProperties(nestedProperties)
+      css += '}\n\n'
+    }
+  }
+
+  return css
+}
+
+function compileProperties(props: Properties) {
+  let css = ''
+
+  const propEntries = Object.entries(props)
+
+  for (const [key, value] of propEntries) {
+    // custom properties (vars)
+    if (key === 'vars') {
+      for (const [k, v] of Object.entries(value)) {
+        css += `  ${k}: ${v};\n`
+      }
+      continue
+    }
+
+    if (key.startsWith('@')) {
+      continue
+    }
+
+    if (isArray(value)) {
+      for (const item of value) {
+        css += `  ${toSnakeCase(key)}: ${item};\n`
+      }
+    } else {
+      css += `  ${toSnakeCase(key)}: ${value};\n`
+    }
+  }
+
+  return css
+}
+
+function toSnakeCase(str: string): string {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+}

package/src/css/_compileSystem.ts

@@ -0,0 +1,7 @@
+import {_compileStyle} from './_compileStyle'
+import {_systemStyle} from './_system.style'
+
+/** @internal */
+export function _compileSystem(): string {
+  return _compileStyle(_systemStyle)
+}

package/src/css/_compileTheme.ts

@@ -0,0 +1,13 @@
+import {_compileStyle} from './_compileStyle'
+import {properties} from './theme'
+
+/** @internal */
+export function _compileTheme(): string {
+  return _compileStyle({
+    layers: {
+      theme: {
+        ':root': properties,
+      },
+    },
+  })
+}

package/src/css/_composeClassNames.ts

@@ -0,0 +1,12 @@
+import {_getClassNames} from './_getClassNames'
+
+/** @internal */
+export function _composeClassNames(
+  ...classNames: Array<string | false | undefined>
+): string | undefined {
+  return unique(_getClassNames(...classNames)).join(' ') || undefined
+}
+
+function unique<T>(array: T[]): T[] {
+  return Array.from(new Set(array))
+}

package/src/css/_fromEntries.ts

@@ -0,0 +1,3 @@
+export function _fromEntries<K extends string | number | symbol, T>(entries: [K, T][]) {
+  return Object.fromEntries(entries) as Record<K, T>
+}

package/src/css/_getClassNames.ts

@@ -0,0 +1,9 @@
+/** @internal */
+export function _getClassNames(...classNames: Array<string | false | undefined>): string[] {
+  return classNames
+    .map((n) => typeof n === 'string' && n.trim())
+    .filter(Boolean)
+    .join(' ')
+    .split(' ')
+    .filter(Boolean)
+}

package/src/css/_hash.ts

@@ -0,0 +1,9 @@
+/** Hash a string using the djb2 algorithm. */
+// from: https://github.com/souporserious/restyle/blob/4e71e9aa295803dd3cb47a47e3600a52b68bac38/src/utils.ts#L70C1-L77C2
+export function _hash(value: string): string {
+  let h = 5381
+  for (let index = 0, len = value.length; index < len; index++) {
+    h = ((h << 5) + h + value.charCodeAt(index)) >>> 0
+  }
+  return h.toString(36)
+}

package/src/css/_mergeStyles.ts

@@ -0,0 +1,24 @@
+import type {Style, StyleKeyframes, StyleLayers, StyleRules} from './types'
+
+/** @internal */
+export function _mergeStyles(styles: Style[]): Style {
+  const keyframes: StyleKeyframes = {}
+  const layers: StyleLayers = {}
+  const rules: StyleRules = {}
+
+  for (const s of styles) {
+    Object.assign(keyframes, s.keyframes)
+
+    for (const layerName in s.layers) {
+      if (!layers[layerName]) {
+        layers[layerName] = {}
+      }
+
+      Object.assign(layers[layerName], s.layers[layerName])
+    }
+
+    Object.assign(rules, s.rules)
+  }
+
+  return {keyframes, layers, rules}
+}

package/src/css/_resp.ts

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from './types'
+import type {ResponsiveProp} from './types'
 
 export function _resp<T>(
   prefix: string | undefined,
@@ -18,7 +18,7 @@ export function _resp<T>(
           .join('-')
           .replace(/\./g, '_')
 
-        return index === 0 ? `${className}` : `_${index}:${className}`
+        return index === 0 ? className : `${index}:${className}`
       })
       .filter(Boolean)
       .join(' ')

package/src/css/_responsiveRule.ts

@@ -0,0 +1,38 @@
+import type {Properties, StyleRules} from './types'
+
+/** @internal */
+export function _responsiveRule(rules: StyleRules, _name: string, properties: Properties): void {
+  const name = _name.replace(/\./g, '_')
+
+  rules[`.${name}`] = properties
+  rules[`.1\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 360px)': properties,
+    },
+  }
+  rules[`.2\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 600px)': properties,
+    },
+  }
+  rules[`.3\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 900px)': properties,
+    },
+  }
+  rules[`.4\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 1200px)': properties,
+    },
+  }
+  rules[`.5\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 1800px)': properties,
+    },
+  }
+  rules[`.6\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 2400px)': properties,
+    },
+  }
+}

package/src/css/_scopeClassName.ts

@@ -0,0 +1,9 @@
+import {PREFIX} from './prefix'
+
+const p = (PREFIX as string) === '__PREFIX__' ? 's-' : PREFIX
+
+/** @internal */
+export function _scopeClassName(className: string | undefined) {
+  if (className === undefined) return undefined
+  return `${p}${className.trim()}`
+}

package/src/css/_scopeClassNames.ts

@@ -0,0 +1,12 @@
+import {_getClassNames} from './_getClassNames'
+import {_scopeClassName} from './_scopeClassName'
+
+export function _scopeClassNames(
+  ...classNames: Array<string | false | undefined>
+): string | undefined {
+  return (
+    _getClassNames(...classNames)
+      .map(_scopeClassName)
+      .join(' ') || undefined
+  )
+}