@sanity/ui 3.0.0-static.8 → 3.0.0

package/src/core/utils/layer/layerProvider.tsx

@@ -0,0 +1,110 @@
+import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
+
+import {useArrayProp, useMediaIndex} from '../../hooks'
+import {getLayerContext} from './getLayerContext'
+import {LayerContext} from './layerContext'
+import {LayerContextValue} from './types'
+
+/**
+ * @public
+ */
+export interface LayerProviderProps {
+  children?: React.ReactNode
+  zOffset?: number | number[]
+}
+
+/**
+ * @public
+ */
+export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
+  const {children, zOffset: zOffsetProp = 0} = props
+
+  // Get parent context values
+  const parentContextValue = useContext(LayerContext)
+  const parent = parentContextValue && getLayerContext(parentContextValue)
+  const parentRegisterChild = parent?.registerChild
+  const parentLevel = parent?.level ?? 0
+
+  // Get level
+  const level = parentLevel + 1
+
+  // Get z-index offset
+  const zOffset = useArrayProp(zOffsetProp)
+
+  // Get responsive z-index value
+  const maxMediaIndex = zOffset.length - 1
+  const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex)
+  const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex]
+
+  // A state value that is used to keep track of the number of child layers on each level
+  const [, setChildLayers] = useState<Record<number, number>>({})
+
+  // A state value that is used to keep track of the number of child levels
+  const [size, setSize] = useState(0)
+
+  const isTopLayer = size === 0
+
+  const registerChild = useCallback(
+    (childLevel?: number) => {
+      // Register child layers to the parent layer
+      const parentDispose = parentRegisterChild?.(childLevel)
+
+      if (childLevel !== undefined) {
+        setChildLayers((state) => {
+          const prevLen = state[childLevel] ?? 0
+          const nextState = {...state, [childLevel]: prevLen + 1}
+
+          setSize(Object.keys(nextState).length)
+
+          return nextState
+        })
+      } else {
+        // Legacy behavior: if no child level is provided, increment the size by 1
+        setSize((v) => v + 1)
+      }
+
+      return () => {
+        if (childLevel !== undefined) {
+          setChildLayers((state) => {
+            const nextState = {...state}
+
+            if (nextState[childLevel] === 1) {
+              delete nextState[childLevel]
+
+              setSize(Object.keys(nextState).length)
+            } else {
+              nextState[childLevel] -= 1
+            }
+
+            return nextState
+          })
+        } else {
+          // Legacy behavior: if no child level is provided, decrement the size by 1
+          setSize((v) => v - 1)
+        }
+
+        parentDispose?.()
+      }
+    },
+    [parentRegisterChild, setSize, setChildLayers],
+  )
+
+  // Register this layer on mount
+  useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild])
+
+  const value: LayerContextValue = useMemo(
+    () => ({
+      version: 0.0,
+      isTopLayer,
+      level,
+      registerChild,
+      size,
+      zIndex,
+    }),
+    [isTopLayer, level, registerChild, size, zIndex],
+  )
+
+  return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
+}
+
+LayerProvider.displayName = 'LayerProvider'

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

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

@@ -0,0 +1,79 @@
+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.JSX.Element {
+  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/srOnly/srOnly.tsx

@@ -0,0 +1,36 @@
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+/**
+ * @public
+ */
+export interface SrOnlyProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  children?: React.ReactNode
+}
+
+const StyledSrOnly = 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 (
+    <StyledSrOnly aria-hidden as={as} data-ui="SrOnly" ref={ref}>
+      {children}
+    </StyledSrOnly>
+  )
+})
+SrOnly.displayName = 'ForwardRef(SrOnly)'

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

@@ -0,0 +1,174 @@
+import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
+import {styled} from 'styled-components'
+
+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 React.JSX.IntrinsicElements
+  gap?: number
+  getItemKey?: (item: Item, itemIndex: number) => string
+  items?: Item[]
+  onChange?: (opts: VirtualListChangeOpts) => void
+  renderItem?: (item: Item) => React.ReactNode
+}
+
+const StyledVirtualList = 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.JSX.Element {
+  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((): (() => void) | undefined => {
+    if (!ref.current) return
+
+    const scrollEl = findScrollable(ref.current.parentNode)
+
+    if (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 (
+    <StyledVirtualList as={as} data-ui="VirtualList" {...restProps} ref={ref}>
+      <div ref={wrapperRef} style={wrapperStyle}>
+        {children}
+      </div>
+    </StyledVirtualList>
+  )
+})
+VirtualList.displayName = 'ForwardRef(VirtualList)'
+
+function findScrollable(parentNode: ParentNode | null) {
+  let _scrollEl = parentNode
+
+  while (_scrollEl && !_isScrollable(_scrollEl)) {
+    _scrollEl = _scrollEl.parentNode
+  }
+
+  return _scrollEl
+}

package/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts

@@ -4,7 +4,7 @@ import {
   ThemeColorSelectable,
   ThemeColorSelectableStates,
   ThemeColorSolid,
-} from '../../../../v0'
+} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createSelectableTones(

package/src/theme/build/_deprecated/color/_solid/createSolidTones.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBase, ThemeColorName, ThemeColorSolid} from '../../../../v0'
+import {ThemeColorBase, ThemeColorName, ThemeColorSolid} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createSolidTones(

package/src/theme/build/_deprecated/color/button/createButtonModes.ts

@@ -1,4 +1,9 @@
-import {ThemeColorBase, ThemeColorButton, ThemeColorMuted, ThemeColorSolid} from '../../../../v0'
+import {
+  ThemeColorBase,
+  ThemeColorButton,
+  ThemeColorMuted,
+  ThemeColorSolid,
+} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 import {createButtonTones} from './createButtonTones'
 

package/src/theme/build/_deprecated/color/button/createButtonTones.ts

@@ -1,10 +1,10 @@
 import {
   ThemeColorBase,
+  ThemeColorButtonModeKey,
   ThemeColorButtonTones,
   ThemeColorMuted,
   ThemeColorSolid,
-} from '../../../../v0'
-import {ThemeColorButtonModeKey} from '../../../../v2'
+} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createButtonTones(

package/src/theme/build/_deprecated/color/card/createCardStates.ts

@@ -4,7 +4,7 @@ import {
   ThemeColorMuted,
   ThemeColorName,
   ThemeColorSolid,
-} from '../../../../v0'
+} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createCardStates(

package/src/theme/build/_deprecated/color/factory.ts

@@ -1,6 +1,7 @@
 import {
   ThemeColor,
   ThemeColorBase,
+  ThemeColorButtonModeKey,
   ThemeColorButtonStates,
   ThemeColorGenericState,
   ThemeColorInputState,
@@ -12,9 +13,9 @@ import {
   ThemeColorSolid,
   ThemeColorSolidTone,
   ThemeColorSpotKey,
+  ThemeColorSyntax,
   ThemeColorToneKey,
-} from '../../../v0'
-import {ThemeColorButtonModeKey, ThemeColorSyntax} from '../../../v2'
+} from '../../../system'
 import {createSelectableTones} from './_selectable/createSelectableTones'
 import {createSolidTones} from './_solid/createSolidTones'
 import {createButtonModes} from './button/createButtonModes'

package/src/theme/build/_deprecated/color/input/createInputModes.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBase, ThemeColorInput, ThemeColorMuted, ThemeColorSolid} from '../../../../v0'
+import {ThemeColorBase, ThemeColorInput, ThemeColorMuted, ThemeColorSolid} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createInputModes(

package/src/theme/build/_deprecated/color/muted/createMuted.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBase, ThemeColorMuted, ThemeColorName} from '../../../../v0'
+import {ThemeColorBase, ThemeColorMuted, ThemeColorName} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createMutedTones(

package/src/theme/build/_deprecated/color/spot/createSpot.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBase, ThemeColorSpot} from '../../../../v0'
+import {ThemeColorBase, ThemeColorSpot} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createSpot(

package/src/theme/build/buildColorTheme.ts

@@ -25,7 +25,7 @@ import {
   ThemeColorStateKey,
   ThemeColorStateToneKey,
   ThemeColorSyntax,
-} from '../v2'
+} from '../system'
 import {ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
 import {resolveColorTokens} from './resolveColorTokens'
 

package/src/theme/build/buildTheme.ts

@@ -1,12 +1,36 @@
-import {type ThemeConfig} from '../config'
-import {type RootTheme} from '../types'
-import {buildTheme_v3} from '../v3'
-import {v2_v0} from '../versioning/v2_v0'
-import {v3_v2} from '../versioning/v3_v2'
+import {ThemeConfig} from '../config'
+import {defaultThemeConfig} from '../defaults/config'
+import {defaultThemeFonts} from '../defaults/fonts'
+import {RootTheme, RootTheme_v2} from '../system'
+import {v2_v0} from '../versioning'
+import {buildColorTheme} from './buildColorTheme'
+import {renderThemeColorSchemes} from './renderColorTheme'
 
 /** @internal */
-export function buildTheme(_config?: ThemeConfig): RootTheme {
-  const v3 = buildTheme_v3({v2: _config})
+export function buildTheme(config?: ThemeConfig): RootTheme {
+  const colorTheme = buildColorTheme(config)
 
-  return v2_v0(v3_v2(v3), v3)
+  const v2: RootTheme_v2 = {
+    _version: 2,
+    avatar: config?.avatar ?? defaultThemeConfig.avatar,
+    button: config?.button ?? defaultThemeConfig.button,
+    card: config?.card ?? defaultThemeConfig.card,
+    // How colors are generated:
+    // 1. Merge custom tokens with default tokens
+    // 2. Generate tree of color keys (gray/500, black, white, etc.)
+    // 3. Apply mixing and render to hex values
+    // render(build(mergeWithDefaults()))
+    color: renderThemeColorSchemes(colorTheme, config),
+    container: config?.container ?? defaultThemeConfig.container,
+    font: config?.font ?? defaultThemeFonts,
+    input: config?.input ?? defaultThemeConfig.input,
+    layer: config?.layer ?? defaultThemeConfig.layer,
+    media: config?.media ?? defaultThemeConfig.media,
+    radius: config?.radius ?? defaultThemeConfig.radius,
+    shadow: config?.shadow ?? defaultThemeConfig.shadow,
+    space: config?.space ?? defaultThemeConfig.space,
+    style: config?.style ?? defaultThemeConfig.style,
+  }
+
+  return v2_v0(v2)
 }

package/src/theme/build/lib/color-fns/rgba.ts

@@ -4,10 +4,6 @@ import {parseColor} from './parse'
  * @internal
  */
 export function rgba(color: unknown, a: number): string {
-  if (typeof color === 'string' && color.startsWith('var(')) {
-    return `color-mix(in srgb, transparent, ${color} ${a * 100}%)`
-  }
-
   const rgb = parseColor(color)
 
   return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`

package/src/theme/build/renderColorTheme.ts

@@ -1,7 +1,7 @@
-// import {COLOR_HUES} from '@sanity/color'
+import {COLOR_HUES} from '@sanity/color'
+
 import {ThemeColorPalette, ThemeConfig} from '../config'
 import {defaultColorPalette} from '../defaults/colorPalette'
-import {HUES} from '../palette'
 import {
   THEME_COLOR_STATE_TONES,
   ThemeColorAvatar_v2,
@@ -24,7 +24,7 @@ import {
   ThemeColorShadow,
   ThemeColorState_v2,
   ThemeColorSyntax,
-} from '../v2'
+} from '../system'
 import {renderColorValue, RenderColorValueOptions} from './renderColorValue'
 
 export function renderThemeColorSchemes(
@@ -192,7 +192,7 @@ function renderThemeColorAvatar(
 ): ThemeColorAvatar_v2 {
   const colorAvatar = {} as ThemeColorAvatar_v2
 
-  for (const hue of HUES) {
+  for (const hue of COLOR_HUES) {
     colorAvatar[hue] = renderThemeColorAvatarColor(value[hue], options)
   }
 

package/src/theme/build/renderColorValue.ts

@@ -1,7 +1,7 @@
 import {ColorTint as ColorPaletteValue} from '@sanity/color'
 
 import {parseTokenValue, ThemeColorPalette} from '../config'
-import {ThemeColorBlendModeKey} from '../v2'
+import {ThemeColorBlendModeKey} from '../system'
 import {hexToRgb, mix, rgba, rgbToHex} from './lib/color-fns'
 import {mixThemeColor} from './mixThemeColor'
 

package/src/theme/build/resolveColorTokens.ts

@@ -27,7 +27,7 @@ import {
   ThemeColorCardToneKey,
   ThemeColorStateKey,
   ThemeColorStateToneKey,
-} from '../v2'
+} from '../system'
 import {merge} from './merge'
 
 /**

package/src/theme/config/system.ts

@@ -8,7 +8,7 @@ import {
   THEME_COLOR_STATE_TONES,
   THEME_COLOR_STATES,
   ThemeColorBlendModeKey,
-} from '../v2'
+} from '../system'
 
 /** @public */
 export const COLOR_CONFIG_STATE_KEYS = [

package/src/theme/config/tokens/color/types.ts

@@ -1,6 +1,6 @@
 import {ColorHueKey} from '@sanity/color'
 
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey, ThemeColorSyntax} from '../../../v2'
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey, ThemeColorSyntax} from '../../../system'
 import {
   ColorBlendModeTokenValue,
   ColorConfigCardTone,

package/src/theme/config/tokens/parseTokenKey.ts

@@ -1,4 +1,4 @@
-import {isColorButtonMode} from '../../v2'
+import {isColorButtonMode} from '../../system'
 import {
   isColorConfigBaseKey,
   isColorConfigBaseTone,

package/src/theme/config/tokens/parseTokenValue.ts

@@ -1,4 +1,4 @@
-import {isColorBlendModeValue, isColorHueKey, isColorTintKey} from '../../v2'
+import {isColorBlendModeValue, isColorHueKey, isColorTintKey} from '../../system'
 import {isColorOpacityValue, isColorValue} from '../helpers'
 import {TokenValueNode} from './types'