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

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

@@ -1,10 +1,20 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
+import {
+  ForwardedRef,
+  forwardRef,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import {useTheme_v2} from '../../_compat'
 import {_isScrollable} from '../../helpers'
-import {styled} from '../../lib/styled'
 import {_ResizeObserver} from '../../observers'
-import {StackProps} from '../../primitives'
-import {useTheme_v2} from '../../theme'
+import {Box, StackProps} from '../../primitives'
+import {Props} from '../../types'
 
 /**
  * @beta
@@ -21,34 +31,21 @@ export interface VirtualListChangeOpts {
 /**
  * @beta
  */
-export interface VirtualListProps<Item = any> {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+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) => React.ReactNode
+  renderItem?: (item: Item) => 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'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-): React.ReactElement {
+  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)
@@ -70,18 +67,12 @@ export const VirtualList = forwardRef(function VirtualList(
     }
   }, [renderItem])
 
-  useEffect(() => {
+  useEffect((): (() => void) | undefined => {
     if (!ref.current) return
 
-    let _scrollEl = ref.current.parentNode
-
-    while (_scrollEl && !_isScrollable(_scrollEl)) {
-      _scrollEl = _scrollEl.parentNode
-    }
-
-    if (_scrollEl) {
-      const scrollEl = _scrollEl
+    const scrollEl = findScrollable(ref.current.parentNode)
 
+    if (scrollEl) {
       if (!(scrollEl instanceof HTMLElement)) return
 
       const handleScroll = () => {
@@ -141,7 +132,11 @@ export const VirtualList = forwardRef(function VirtualList(
     if (!renderItem || items.length === 0) return null
 
     if (itemHeight === -1) {
-      return [<ItemWrapper key={0}>{renderItem(items[0])}</ItemWrapper>]
+      return [
+        <Box insetTop={0} insetLeft={0} key={0} position="absolute">
+          {renderItem(items[0])}
+        </Box>,
+      ]
     }
 
     return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
@@ -150,9 +145,14 @@ export const VirtualList = forwardRef(function VirtualList(
       const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
 
       return (
-        <ItemWrapper key={key} style={{top: itemIndex * (itemHeight + space[gap])}}>
+        <Box
+          insetLeft={0}
+          key={key}
+          position="absolute"
+          style={{top: itemIndex * (itemHeight + space[gap])}}
+        >
           {node}
-        </ItemWrapper>
+        </Box>
       )
     })
   }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex])
@@ -160,11 +160,29 @@ export const VirtualList = forwardRef(function VirtualList(
   const wrapperStyle = useMemo(() => ({height}), [height])
 
   return (
-    <Root as={as} data-ui="VirtualList" {...restProps} ref={ref}>
+    <Box
+      // Root
+      as={as}
+      data-ui="VirtualList"
+      {...restProps}
+      position="relative"
+      ref={ref}
+    >
       <div ref={wrapperRef} style={wrapperStyle}>
         {children}
       </div>
-    </Root>
+    </Box>
   )
 })
+
 VirtualList.displayName = 'ForwardRef(VirtualList)'
+
+function findScrollable(parentNode: ParentNode | null) {
+  let _scrollEl = parentNode
+
+  while (_scrollEl && !_isScrollable(_scrollEl)) {
+    _scrollEl = _scrollEl.parentNode
+  }
+
+  return _scrollEl
+}

package/src/css/_resp.ts

@@ -4,13 +4,15 @@ export function _resp<T>(
   prefix: string | undefined,
   prop: ResponsiveProp<T> | undefined,
 ): string | undefined {
-  if (prop === undefined) {
+  if (prop === undefined || prop === false) {
     return undefined
   }
 
   if (Array.isArray(prop)) {
     return prop
       .map((value, index) => {
+        if (value === undefined || (typeof prop === 'boolean' && prop === false)) return undefined
+
         const className = (typeof value === 'boolean' ? [prefix] : [prefix, value])
           .filter((s) => s === 0 || Boolean(s))
           .join('-')
@@ -18,6 +20,7 @@ export function _resp<T>(
 
         return index === 0 ? `${className}` : `_${index}:${className}`
       })
+      .filter(Boolean)
       .join(' ')
   }
 

package/src/css/compile/compilePalette.ts

@@ -0,0 +1,60 @@
+import {HUES, PaletteConfig, TINTS} from '@sanity/ui/theme'
+
+import {compileRule} from './compileRule'
+
+export function compilePalette(config: PaletteConfig): string {
+  const props: Record<string, string> = {
+    '--l-min': `${config.luminosity.min * 100}%`,
+    '--l-max': `${config.luminosity.max * 100}%`,
+    '--l-range': `calc(var(--l-max) - var(--l-min))`,
+
+    '--c-min': `${config.chroma.min}`,
+    '--c-max': `${config.chroma.max}`,
+    '--c-range': `calc(var(--c-max) - var(--c-min))`,
+
+    ...compileHues(config.hues),
+
+    '--black': `oklch(
+      calc(var(--l-min) + 0.0 * var(--l-range))
+      calc(var(--c-min) + 0.0 * var(--gray-c-range))
+      var(--gray-h)
+    )`,
+
+    '--white': `oklch(
+      calc(var(--l-min) + 1.0 * var(--l-range))
+      calc(var(--c-min) + 0.0 * var(--gray-c-range))
+      var(--gray-h)
+    )`,
+  }
+
+  return compileRule(':root', props, {keyframes: {}, media: {}})
+}
+
+function compileHues(hues: PaletteConfig['hues']) {
+  const rules: Record<string, string> = {}
+
+  for (const hue of HUES) {
+    const {c, h} = hues[hue]
+
+    rules[`--${hue}-h`] = `${h}`
+    rules[`--${hue}-c`] = `${c}`
+    rules[`--${hue}-c-max`] = `min(var(--c-max), var(--${hue}-c))`
+    rules[`--${hue}-c-range`] = `calc(var(--${hue}-c-max) - var(--c-min))`
+
+    for (const tint of TINTS) {
+      const l_offset = parseFloat((1 - tint / 1000).toFixed(2))
+      const c_offset_tmp = tint / 500
+      const c_offset = parseFloat((c_offset_tmp < 1 ? c_offset_tmp : 2 - c_offset_tmp).toFixed(1))
+
+      rules[`--${hue}-${tint}`] = [
+        `oklch(`,
+        `calc(var(--l-min) + ${l_offset} * var(--l-range)) `,
+        `calc(var(--c-min) + ${c_offset} * var(--${hue}-c-range)) `,
+        `var(--${hue}-h)`,
+        `)`,
+      ].join('')
+    }
+  }
+
+  return rules
+}

package/src/css/compile/compileRule.ts

@@ -1,7 +1,34 @@
 import {type Properties} from '../types'
+import {CompileRulesContext} from './types'
 
-export function compileRule(selector: string, props: Properties): string {
-  return compileProperties(selector, props) + compileNestedRules(selector, props['@nest'])
+export function compileRule(
+  selector: string,
+  props: Properties,
+  context: CompileRulesContext,
+): string {
+  let css = compileProperties(selector, props)
+
+  if (props['@nest']) {
+    css += compileNestedRules(selector, props['@nest'], context)
+  }
+
+  if (props['@keyframes']) {
+    for (const name in props['@keyframes']) {
+      context.keyframes[name] = props['@keyframes'][name]
+    }
+  }
+
+  if (props['@media']) {
+    for (const key in props['@media']) {
+      if (!context.media[key]) {
+        context.media[key] = {}
+      }
+
+      context.media[key][selector] = props['@media'][key]
+    }
+  }
+
+  return css
 }
 
 function compileProperties(selector: string, props: Properties) {
@@ -21,23 +48,22 @@ function compileProperties(selector: string, props: Properties) {
     }
   }
 
-  if (css.length === 1) return ''
+  if (css === '{') return ''
 
   return selector + css + '}'
 }
 
-function compileNestedRules(selector: string, props?: Record<string, Properties>) {
+function compileNestedRules(
+  selector: string,
+  props: Record<string, Properties>,
+  context: CompileRulesContext,
+) {
   if (!props) return ''
 
   let css = ''
 
-  for (const key in props) {
-    const value = (props as Record<string, string>)[key]
-
-    css +=
-      '\n' +
-      key.replace(/&/g, selector) +
-      compileProperties(selector, value as Properties).substring(selector.length)
+  for (const [_selector, _props] of Object.entries(props)) {
+    css += '\n' + compileRule(_selector.replace(/&/g, selector), _props, context)
   }
 
   return css
@@ -46,8 +72,14 @@ function compileNestedRules(selector: string, props?: Record<string, Properties>
 export function compileMediaQueryRule(query: string, rules: Record<string, Properties>): string {
   let css = `@media ${query}{`
 
-  for (const key in rules) {
-    css += '\n  ' + compileRule(`.${key}`.replace(/:/g, '\\:'), rules[key])
+  for (const [selector, props] of Object.entries(rules)) {
+    // console.log('compileMediaQueryRule', {selector, props})
+
+    css += '\n  ' + compileProperties(selector, props)
+
+    if (props['@nest']) {
+      css += compileNestedRules(selector, props['@nest'], {keyframes: {}, media: {}})
+    }
   }
 
   return css + '\n}'

package/src/css/compile/compileRules.test.ts

@@ -0,0 +1,35 @@
+import {responsiveRules} from '../responsiveRules'
+import {Rules} from '../types'
+import {compileRules} from './compileRules'
+
+it('should compile deeply nested rules', () => {
+  const rules: Rules = {
+    card: {
+      '@nest': {
+        '&:is(a)': {
+          '@media': {
+            '(hover: hover)': {
+              background: 'red',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(compileRules(rules))
+})
+
+it.only('should compile responsive rules', () => {
+  const rules = responsiveRules('block', {
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'block',
+      },
+    },
+  })
+
+  // eslint-disable-next-line no-console
+  console.log(compileRules(rules))
+})

package/src/css/compile/compileRules.ts

@@ -1,46 +1,30 @@
-import {type Properties, type Rules} from '../types'
-import {compileRule, compileMediaQueryRule} from './compileRule'
+import {type Rules} from '../types'
+import {compileMediaQueryRule, compileRule} from './compileRule'
+import {CompileRulesContext} from './types'
 
 /** @public */
 export function compileRules(rules: Rules): string {
   let css = ''
 
-  const keyframes: Record<string, Record<string, Properties>> = {}
-  const mediaQueries: Record<string, Record<string, Properties>> = {}
+  const context: CompileRulesContext = {
+    keyframes: {},
+    media: {},
+  }
 
   for (const [className, props] of Object.entries(rules)) {
-    const selectorCss = compileRule(`.${className}`.replace(/:/g, '\\:'), props)
-
-    css += selectorCss ? `${selectorCss}\n` : ''
-
-    if (props['@keyframes']) {
-      for (const name in props['@keyframes']) {
-        // if (!keyframes[name]) {
-        //   keyframes[name] = {from: {}, to: {}}
-        // }
-
-        keyframes[name] = props['@keyframes'][name]
-        // keyframes[name][className] = props['@keyframes'][key]
-      }
-    }
-
-    if (props['@media']) {
-      for (const key in props['@media']) {
-        if (!mediaQueries[key]) {
-          mediaQueries[key] = {}
-        }
+    const ruleCss = compileRule(`.${className}`.replace(/:/g, '\\:'), props, context)
 
-        mediaQueries[key][className] = props['@media'][key]
-      }
-    }
+    css += ruleCss ? `${ruleCss}\n` : ''
   }
 
-  for (const [name, value] of Object.entries(keyframes)) {
+  // console.log('context', context)
+
+  for (const [name, value] of Object.entries(context.keyframes)) {
     let keyframesCss = `@keyframes ${name} {\n`
 
     for (const [key, props] of Object.entries(value)) {
       keyframesCss += `  ${key}`
-      keyframesCss += compileRule('', props).replace(/\n/g, '\n    ') + '\n'
+      keyframesCss += compileRule('', props, context).replace(/\n/g, '\n    ') + '\n'
     }
 
     keyframesCss += `\n}\n`
@@ -48,7 +32,7 @@ export function compileRules(rules: Rules): string {
     css += keyframesCss
   }
 
-  for (const [query, queryRules] of Object.entries(mediaQueries)) {
+  for (const [query, queryRules] of Object.entries(context.media)) {
     css += compileMediaQueryRule(query, queryRules) + '\n'
   }