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

package/src/ui/utils/layer/layer.tsx

@@ -1,112 +1,42 @@
-import {
-  FocusEvent,
-  ForwardedRef,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from 'react'
-
-import {EMPTY_RECORD} from '../../constants'
-import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
-import {Box, BoxProps} from '../../primitives'
+import {CardElementType, CardOwnProps} from '../../primitives'
 import {Props} from '../../types'
+import {LayerCard} from './layerCard'
 import {LayerProvider} from './layerProvider'
-import {useLayer} from './useLayer'
 
-/**
- * @public
- */
-export interface LayerProps extends BoxProps {
+/** @public */
+export const DEFAULT_LAYER_ELEMENT = 'div'
+
+/** @public */
+export type LayerOwnProps = CardOwnProps & {
   /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
   onActivate?: (props: {activeElement: HTMLElement | null}) => void
   zOffset?: number | number[]
 }
 
-interface LayerChildrenProps extends BoxProps {
-  onActivate?: LayerProps['onActivate']
-}
+/** @public */
+export type LayerElementType = CardElementType
 
-const LayerChildren = forwardRef(function LayerChildren(
-  props: Props<LayerChildrenProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
+/** @public */
+export type LayerProps<E extends LayerElementType = LayerElementType> = Props<LayerOwnProps, E>
+
+/** @public */
+export function Layer<E extends LayerElementType = typeof DEFAULT_LAYER_ELEMENT>(
+  props: LayerProps<E>,
 ) {
   const {
+    as = DEFAULT_LAYER_ELEMENT,
     children,
-    onActivate,
-    onFocus,
-    position = 'relative',
-    style = EMPTY_RECORD,
-    ...restProps
-  } = props
-  const {zIndex, isTopLayer} = useLayer()
-  const lastFocusedRef = useRef<HTMLElement | null>(null)
-  const ref = useRef<HTMLDivElement | null>(null)
-  const isTopLayerRef = useRef<boolean>(isTopLayer)
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  // When the layer very first mounts, it will be the top layer, but we don't want to fire
-  // the callback in that case. We use a ref to track the previous value of isTopLayer to
-  // determine if the layer has become the top layer since the last render.
-  useEffect(() => {
-    const becameTopLayer = isTopLayerRef.current !== isTopLayer && isTopLayer
-
-    if (becameTopLayer) {
-      onActivate?.({activeElement: lastFocusedRef.current})
-    }
-
-    isTopLayerRef.current = isTopLayer
-  }, [isTopLayer, onActivate])
-
-  const handleFocus = useCallback(
-    (event: FocusEvent<HTMLDivElement, Element>) => {
-      // Call the user-provided onFocus handler if any
-      onFocus?.(event)
-
-      const rootElement = ref.current
-      const target = document.activeElement
-
-      if (!isTopLayer || !rootElement || !target) return
-
-      if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {
-        lastFocusedRef.current = target
-      }
-    },
-    [isTopLayer, onFocus],
-  )
-
-  return (
-    <Box
-      data-ui="Layer"
-      {...restProps}
-      onFocus={handleFocus}
-      position={position}
-      ref={ref}
-      style={{...style, zIndex}}
-    >
-      {children}
-    </Box>
-  )
-})
-
-/**
- * @public
- */
-export const Layer = forwardRef(function Layer(
-  props: Props<LayerProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {children, zOffset = 1, ...restProps} = props
+    zOffset = 1,
+    ...rest
+  } = props as LayerProps<typeof DEFAULT_LAYER_ELEMENT>
 
   return (
     <LayerProvider zOffset={zOffset}>
-      <LayerChildren {...restProps} ref={ref}>
+      <LayerCard {...rest} as={as}>
         {children}
-      </LayerChildren>
+      </LayerCard>
     </LayerProvider>
   )
-})
+}
 
-Layer.displayName = 'ForwardRef(Layer)'
+Layer.displayName = 'Layer'

package/src/ui/utils/layer/layerCard.tsx

@@ -0,0 +1,92 @@
+import {type FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+
+import {EMPTY_RECORD} from '../../constants'
+import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
+import {Card, CardElementType} from '../../primitives'
+import {Props} from '../../types'
+import {LayerElementType, LayerOwnProps} from './layer'
+import {useLayer} from './useLayer'
+
+/** @internal */
+export const DEFAULT_LAYER_CARD_ELEMENT = 'div'
+
+/** @internal */
+export type LayerCardOwnProps = Omit<LayerOwnProps, 'zOffset'>
+
+/** @internal */
+export type LayerCardElementType = LayerElementType
+
+/** @internal */
+export type LayerCardProps<E extends LayerCardElementType = LayerCardElementType> = Props<
+  LayerCardOwnProps,
+  E
+>
+
+/** @internal */
+export function LayerCard<E extends LayerCardElementType = typeof DEFAULT_LAYER_CARD_ELEMENT>(
+  props: LayerCardProps<E>,
+) {
+  const {
+    as = DEFAULT_LAYER_CARD_ELEMENT,
+    children,
+    onActivate,
+    onFocus,
+    position = 'relative',
+    ref: forwardedRef,
+    style = EMPTY_RECORD,
+    ...rest
+  } = props as LayerCardProps<typeof DEFAULT_LAYER_CARD_ELEMENT>
+
+  const {zIndex, isTopLayer} = useLayer()
+  const lastFocusedRef = useRef<HTMLElement | null>(null)
+  const ref = useRef<HTMLDivElement | null>(null)
+  const isTopLayerRef = useRef<boolean>(isTopLayer)
+
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+
+  // When the layer very first mounts, it will be the top layer, but we don't want to fire
+  // the callback in that case. We use a ref to track the previous value of isTopLayer to
+  // determine if the layer has become the top layer since the last render.
+  useEffect(() => {
+    const becameTopLayer = isTopLayerRef.current !== isTopLayer && isTopLayer
+
+    if (becameTopLayer) {
+      onActivate?.({activeElement: lastFocusedRef.current})
+    }
+
+    isTopLayerRef.current = isTopLayer
+  }, [isTopLayer, onActivate])
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLDivElement, Element>) => {
+      // Call the user-provided onFocus handler if any
+      onFocus?.(event)
+
+      const rootElement = ref.current
+      const target = document.activeElement
+
+      if (!isTopLayer || !rootElement || !target) return
+
+      if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {
+        lastFocusedRef.current = target
+      }
+    },
+    [isTopLayer, onFocus],
+  )
+
+  return (
+    <Card
+      data-ui="Layer"
+      {...rest}
+      as={as as CardElementType}
+      onFocus={handleFocus}
+      position={position}
+      ref={ref}
+      style={{...style, zIndex}}
+    >
+      {children}
+    </Card>
+  )
+}
+
+LayerCard.displayName = 'LayerCard'

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

@@ -5,17 +5,13 @@ import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export interface LayerProviderProps {
   children?: ReactNode
   zOffset?: number | number[]
 }
 
-/**
- * @public
- */
+/** @public */
 export function LayerProvider(props: LayerProviderProps): ReactElement {
   const {children, zOffset: zOffsetProp = 0} = props
 

package/src/ui/utils/layer/useLayer.ts

@@ -4,9 +4,7 @@ import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export function useLayer(): LayerContextValue {
   const value = useContext(LayerContext)
 

package/src/ui/utils/portal/portal.ts

@@ -4,9 +4,7 @@ import {createPortal} from 'react-dom'
 import {CardProvider, useCard} from '../../primitives'
 import {usePortal} from './usePortal'
 
-/**
- * @public
- */
+/** @public */
 export interface PortalProps {
   children: ReactNode
   /**
@@ -15,9 +13,7 @@ export interface PortalProps {
   __unstable_name?: string
 }
 
-/**
- * @public
- */
+/** @public */
 export function Portal(props: PortalProps): ReactPortal | null {
   const {children, __unstable_name: name} = props
   const card = useCard()

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

@@ -3,9 +3,7 @@ import {ReactElement, ReactNode, useMemo, useRef, useSyncExternalStore} from 're
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export interface PortalProviderProps {
   /**
    * @deprecated Use `<BoundaryElementProvider element={...} />` instead
@@ -19,9 +17,7 @@ export interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
-/**
- * @public
- */
+/** @public */
 export function PortalProvider(props: PortalProviderProps): ReactElement {
   const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)

package/src/ui/utils/portal/types.ts

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface PortalContextValue {
   version: 0.0
   boundaryElement: HTMLElement | null

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

@@ -4,9 +4,7 @@ import {isRecord} from '../../lib/isRecord'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export function usePortal(): PortalContextValue {
   const value = useContext(PortalContext)
 

package/src/ui/utils/srOnly/srOnly.tsx

@@ -1,35 +1,40 @@
 import {composeClassNames, srOnly} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, ReactNode} from 'react'
 
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface SrOnlyProps {
-  children?: ReactNode
-}
+/** @public */
+export const DEFAULT_SR_ONLY_ELEMENT = 'span'
+
+/** @public */
+export type SrOnlyOwnProps = {} // eslint-disable-line @typescript-eslint/no-empty-object-type
+
+/** @public */
+export type SrOnlyElementType = 'span' | ComponentType
 
-/**
- * @public
- */
-export const SrOnly = forwardRef(function SrOnly(
-  props: Props<SrOnlyProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+/** @public */
+export type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props<SrOnlyOwnProps, E>
+
+/** @public */
+export function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(
+  props: SrOnlyProps<E>,
 ) {
-  const {as: As = 'div', children, className, ...rest} = props
+  const {
+    as: Element = DEFAULT_SR_ONLY_ELEMENT,
+    children,
+    className,
+    ...rest
+  } = props as SrOnlyProps<typeof DEFAULT_SR_ONLY_ELEMENT>
 
   return (
-    <As
+    <Element
       data-ui="SrOnly"
       {...rest}
       aria-hidden
       className={composeClassNames(className, srOnly())}
-      ref={ref}
     >
       {children}
-    </As>
+    </Element>
   )
-})
+}
 
-SrOnly.displayName = 'ForwardRef(SrOnly)'
+SrOnly.displayName = 'SrOnly'

package/src/ui/utils/virtualList/virtualList.tsx

@@ -1,7 +1,7 @@
+import {vars} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {
-  ForwardedRef,
-  forwardRef,
-  ReactElement,
+  type CSSProperties,
   ReactNode,
   useEffect,
   useImperativeHandle,
@@ -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 {ComponentType, Props} from '../../types'
 
-/**
- * @beta
- */
+/** @beta */
+export const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
+
+/** @beta */
 export interface VirtualListChangeOpts {
   fromIndex: number
   gap: number
@@ -28,45 +28,52 @@ 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 type VirtualListElementType = 'div' | ComponentType
+
+/** @beta */
+export type VirtualListProps<E extends VirtualListElementType = VirtualListElementType> = Props<
+  VirtualListOwnProps,
+  E
+>
+
 /**
  * @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()
+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 +126,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} insetRight={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]}}
+          />
+        </>,
       ]
     }
 
@@ -150,33 +176,26 @@ export const VirtualList = forwardRef(function VirtualList(
           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/compile/compilePalette.ts

@@ -1,27 +0,0 @@
-import {color} from '@sanity/color'
-import {HUES, TINTS} from '@sanity/ui/theme'
-
-import {compileRule} from './compileRule'
-
-export function compilePalette(): string {
-  const props: Record<string, string> = {
-    ...compileHues(),
-
-    '--black': color.black.hex,
-    '--white': color.white.hex,
-  }
-
-  return compileRule(':root', props, {keyframes: {}, media: {}})
-}
-
-function compileHues() {
-  const rules: Record<string, string> = {}
-
-  for (const hue of HUES) {
-    for (const tint of TINTS) {
-      rules[`--${hue}-${tint}`] = color[hue][tint].hex
-    }
-  }
-
-  return rules
-}