@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

package/src/core/utils/portal/portal.ts

@@ -1,31 +0,0 @@
-import {createPortal} from 'react-dom'
-import {usePortal} from './usePortal'
-
-/**
- * @public
- */
-export interface PortalProps {
-  children: React.ReactNode
-  /**
-   * @beta This API might change. DO NOT USE IN PRODUCTION.
-   */
-  __unstable_name?: string
-}
-
-/**
- * @public
- */
-export function Portal(props: PortalProps): React.ReactPortal | null {
-  const {children, __unstable_name: name} = props
-  const portal = usePortal()
-  const portalElement =
-    (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default
-
-  if (!portalElement) {
-    return null
-  }
-
-  return createPortal(children, portalElement)
-}
-
-Portal.displayName = 'Portal'

package/src/core/utils/portal/portalProvider.tsx

@@ -1,78 +0,0 @@
-import {useMemo, useRef, useSyncExternalStore} from 'react'
-import {PortalContext} from './portalContext'
-import {PortalContextValue} from './types'
-
-/**
- * @public
- */
-export interface PortalProviderProps {
-  /**
-   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
-   */
-  boundaryElement?: HTMLElement | null
-  children: React.ReactNode
-  element?: HTMLElement | null
-  /**
-   * @beta
-   */
-  __unstable_elements?: Record<string, HTMLElement | null | undefined>
-}
-
-/**
- * @public
- */
-export function PortalProvider(props: PortalProviderProps): React.ReactElement {
-  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
-  const elements = useUnique(elementsProp)
-  const fallbackElement = useSyncExternalStore(
-    emptySubscribe,
-    () => document.body,
-    () => null,
-  )
-
-  const value: PortalContextValue = useMemo(() => {
-    return {
-      version: 0.0,
-      boundaryElement: boundaryElement || null,
-      element: element || fallbackElement,
-      elements,
-    }
-  }, [boundaryElement, element, elements, fallbackElement])
-
-  return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
-}
-
-PortalProvider.displayName = 'PortalProvider'
-
-const emptySubscribe = () => () => {}
-
-/**
- * This is a React hook to make sure that a record identity is the same on every render. Uses strict
- * equality comparison (eg by identity), and only goes one level deep.
- */
-function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
-  const valueRef = useRef<ValueType>(value)
-
-  if (!_isEqual(valueRef.current, value)) {
-    valueRef.current = value
-  }
-
-  return valueRef.current
-}
-
-function _isEqual(objA: Comparable, objB: Comparable): boolean {
-  if (!objA || !objB) {
-    return objA === objB
-  }
-
-  const keysA = Object.keys(objA)
-  const keysB = Object.keys(objB)
-
-  if (keysA.length !== keysB.length) {
-    return false
-  }
-
-  return keysA.every((key) => objA[key] === objB[key])
-}
-
-type Comparable = Record<string | number | symbol, unknown> | undefined | null

package/src/core/utils/portal/usePortal.ts

@@ -1,24 +0,0 @@
-import {useContext} from 'react'
-import {isRecord} from '../../lib/isRecord'
-import {PortalContext} from './portalContext'
-import {PortalContextValue} from './types'
-
-/**
- * @public
- */
-export function usePortal(): PortalContextValue {
-  const value = useContext(PortalContext)
-
-  if (!value) {
-    throw new Error('usePortal(): missing context value')
-  }
-
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 0.0) {
-    throw new Error('usePortal(): the context value is not compatible')
-  }
-
-  return value
-}

package/src/core/utils/srOnly/srOnly.tsx

@@ -1,36 +0,0 @@
-import {forwardRef} from 'react'
-import {styled} from '../../lib/styled'
-
-/**
- * @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;
-  overflow: clip;
-`
-
-/**
- * @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>
-  )
-})
-SrOnly.displayName = 'ForwardRef(SrOnly)'

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

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

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

@@ -1,170 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
-import {styled} from '../../lib/styled'
-import {_isScrollable} from '../../helpers'
-import {_ResizeObserver} from '../../observers'
-import {StackProps} from '../../primitives'
-import {useTheme_v2} 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'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-): React.ReactElement {
-  const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
-  const {space} = useTheme_v2()
-  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)
-
-  // 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(() => {
-    if (!ref.current) return
-
-    let _scrollEl = ref.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)
-    }
-  }, [])
-
-  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={ref}>
-      <div ref={wrapperRef} style={wrapperStyle}>
-        {children}
-      </div>
-    </Root>
-  )
-})
-VirtualList.displayName = 'ForwardRef(VirtualList)'

package/src/css/cli/buildCommand.ts

@@ -1,36 +0,0 @@
-import fs from 'fs/promises'
-import path from 'path'
-import {buildTheme as buildUITheme} from '@sanity/ui/theme'
-import {compileSystem} from '../compile/compileSystem'
-import {compileTheme} from '../compile/compileTheme'
-
-async function buildSystem(outDir: string) {
-  const css = compileSystem()
-
-  await fs.mkdir(outDir, {recursive: true})
-
-  await fs.writeFile(path.resolve(outDir, 'system.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- system.css')
-}
-
-async function buildTheme(outDir: string) {
-  const css = compileTheme(buildUITheme().v2!)
-
-  await fs.mkdir(outDir, {recursive: true})
-
-  await fs.writeFile(path.resolve(outDir, 'sanity-theme.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- sanity-theme.css')
-}
-
-export async function buildCommand(options: {cwd?: string; outDir?: string}): Promise<void> {
-  const cwd = options.cwd ?? process.cwd()
-  const outDir = options.outDir ?? path.resolve(cwd, 'dist')
-
-  await buildSystem(outDir)
-
-  await buildTheme(outDir)
-}

package/src/css/cli/index.ts

@@ -1,38 +0,0 @@
-import cac from 'cac'
-
-import {version} from '../../../package.json'
-
-const cli = cac('ui')
-
-// cli
-//   .command('dev')
-//   .option('--cwd [cwd]', 'Output directory')
-//   .action(async (options) => {
-//     const {devCommand} = await import('./devCommand')
-
-//     await devCommand({
-//       ...options,
-//       cwd: options.cwd || process.cwd(),
-//     })
-//   })
-
-cli
-  .command('build')
-  .option('--cwd [cwd]', 'Working directory')
-  .option('--outDir [outDir]', 'Output directory')
-  .action(async (options) => {
-    const {buildCommand} = await import('./buildCommand')
-
-    await buildCommand({
-      ...options,
-      cwd: options.cwd || process.cwd(),
-    })
-  })
-
-cli.command('').action(() => {
-  cli.outputHelp()
-})
-
-cli.help()
-cli.version(version)
-cli.parse()

package/src/css/compile/comileRules.ts

@@ -1,59 +0,0 @@
-import {type Properties, type Rules} from '../types'
-import {compileRule, compileMediaQueryRule} from './compileRule'
-
-/** @public */
-export function compileRules(rules: Rules): string {
-  let css = ''
-
-  const keyframes: Record<string, Record<string, Properties>> = {}
-  const mediaQueries: Record<string, Record<string, Properties>> = {}
-
-  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] = {}
-        }
-
-        mediaQueries[key][className] = props['@media'][key]
-      }
-    }
-  }
-
-  for (const [name, value] of Object.entries(keyframes)) {
-    let keyframesCss = `@keyframes ${name} {\n`
-
-    for (const [key, props] of Object.entries(value)) {
-      keyframesCss += `  ${key} {\n`
-      keyframesCss += compileRule('', props).replace(/\n/g, '\n    ') + '\n'
-      keyframesCss += `  }\n`
-    }
-
-    keyframesCss += `}\n`
-
-    css += keyframesCss
-  }
-
-  // console.log('keyframes', keyframes)
-
-  for (const [query, queryRules] of Object.entries(mediaQueries)) {
-    css += compileMediaQueryRule(query, queryRules) + '\n'
-  }
-
-  return css.replace(/\n{2,}/g, '\n').trimStart()
-}

package/src/css/components/dialog/classes.ts

@@ -1,29 +0,0 @@
-import {composeClassNames} from '../../composeClassNames'
-
-export function dialog(): string {
-  return composeClassNames('dialog')
-}
-
-export function dialogContainer(): string {
-  return composeClassNames('dialog-container')
-}
-
-export function dialogCardRoot(): string {
-  return composeClassNames('dialog-card-root')
-}
-
-export function dialogLayout(): string {
-  return composeClassNames('dialog-layout')
-}
-
-export function dialogHeader(): string {
-  return composeClassNames('dialog-header')
-}
-
-export function dialogContent(): string {
-  return composeClassNames('dialog-content')
-}
-
-export function dialogFooter(): string {
-  return composeClassNames('dialog-footer')
-}

package/src/css/primitives/badge/rules.ts

@@ -1,25 +0,0 @@
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-import type {Rules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-export const badgeRules: Rules = {
-  badge: {
-    backgroundColor: vars.color.badge.bg,
-    color: vars.color.badge.fg,
-    verticalAlign: 'top',
-  },
-
-  ...THEME_COLOR_STATE_TONES.reduce(
-    (acc, tone) => ({
-      ...acc,
-      [`badge-${tone}`]: {
-        [varNames.color.badge.bg]: vars.color.badge[tone].bg,
-        [varNames.color.badge.dot]: vars.color.badge[tone].dot,
-        [varNames.color.badge.fg]: vars.color.badge[tone].fg,
-        [varNames.color.badge.icon]: vars.color.badge[tone].icon,
-      },
-    }),
-    {} as Rules,
-  ),
-}

package/src/css/primitives/box/rules.ts

@@ -1,25 +0,0 @@
-import type {Rules} from '../../types'
-
-export const boxRules: Rules = {
-  'box': {
-    'minWidth': 0,
-    'minHeight': 0,
-
-    '@nest': {
-      // 'ul.&, ol.&': {
-      '&[data-as="ul"], &[data-as="ol"]': {
-        listStyle: 'none',
-      },
-    },
-  },
-
-  // sizing
-
-  'box-content': {
-    boxSizing: 'content-box',
-  },
-
-  'box-border': {
-    boxSizing: 'border-box',
-  },
-}

package/src/css/primitives/card/rules.ts

@@ -1,93 +0,0 @@
-import {THEME_COLOR_AVATAR_COLORS, THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-import {Properties, Rules} from '../../types'
-
-export const cardRules: Rules = {
-  card: {
-    'backgroundColor': 'var(--card-bg-color)',
-    'color': 'var(--card-fg-color)',
-
-    /* deprecated variables (kept for legacy) */
-    '--card-accent-fg-color': 'var(--color-accent-fg)',
-
-    ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => {
-      return {
-        ...acc,
-        [`--card-avatar-${color}-bg-color`]: `var(--color-avatar-${color}-bg)`,
-        [`--card-avatar-${color}-fg-color`]: `var(--color-avatar-${color}-fg)`,
-      }
-    }, {} as Properties),
-
-    '--card-backdrop-color': 'var(--color-backdrop)',
-
-    ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-      return {
-        ...acc,
-        [`--card-badge-${tone}-bg-color`]: `var(--color-badge-${tone}-bg)`,
-        [`--card-badge-${tone}-dot-color`]: `var(--color-badge-${tone}-dot)`,
-        [`--card-badge-${tone}-fg-color`]: `var(--color-badge-${tone}-fg)`,
-        [`--card-badge-${tone}-icon-color`]: `var(--color-badge-${tone}-icon)`,
-      }
-    }, {} as Properties),
-
-    '--card-bg-color': 'var(--color-bg)',
-    '--card-border-color': 'var(--color-border)',
-    '--card-code-bg-color': 'var(--color-code-bg)',
-    '--card-code-fg-color': 'var(--color-code-fg)',
-    '--card-fg-color': 'var(--color-fg)',
-    '--card-focus-ring-color': 'var(--color-focus-ring)',
-
-    '--card-icon-color': 'var(--color-icon)',
-
-    '--card-kbd-bg-color': 'var(--color-kbd-bg)',
-    '--card-kbd-border-color': 'var(--color-kbd-border)',
-    '--card-kbd-fg-color': 'var(--color-kbd-fg)',
-
-    '--card-link-fg-color': 'var(--color-link-fg)',
-
-    '--card-muted-bg-color': 'var(--color-muted-bg)',
-    '--card-muted-fg-color': 'var(--color-muted-fg)',
-
-    '--card-shadow-outline-color': 'var(--color-shadow-outline)',
-    '--card-shadow-umbra-color': 'var(--color-shadow-umbra)',
-    '--card-shadow-penumbra-color': 'var(--color-shadow-penumbra)',
-    '--card-shadow-ambient-color': 'var(--color-shadow-ambient)',
-
-    '--card-skeleton-from-color': 'var(--color-skeleton-from)',
-    '--card-skeleton-to-color': 'var(--color-skeleton-to)',
-
-    /*
-      '--card-bg-image': checkered
-        ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
-        : undefined,
-
-      '--card-bg-image': checkered
-        ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
-        : undefined,
-
-      '--card-bg2-color': color.muted.bg,
-      '--card-link-color': color.link.fg,
-      '--card-hairline-soft-color': color.border,
-      '--card-hairline-hard-color': color.border, */
-
-    '@nest': {
-      '&[data-as="button"]': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        outline: 'none',
-        font: 'inherit',
-        textAlign: 'inherit',
-        border: 0,
-        width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-      },
-
-      '&[data-as="a"]': {
-        outline: 'none',
-        textDecoration: 'none',
-      },
-
-      '&[data-as="pre"]': {
-        font: 'inherit',
-      },
-    },
-  },
-}