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

package/src/core/utils/portal/{portal.ts → portal.tsx}

@@ -1,11 +1,10 @@
-import {ReactNode, ReactPortal} from 'react'
+import type {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
+import {CardProvider, useCard} from '../../primitives'
 import {usePortal} from './usePortal'
 
-/**
- * @public
- */
+/** @public */
 export interface PortalProps {
   children: ReactNode
   /**
@@ -14,20 +13,27 @@ export interface PortalProps {
   __unstable_name?: string
 }
 
-/**
- * @public
- */
+/** @public */
 export function Portal(props: PortalProps): ReactPortal | null {
   const {children, __unstable_name: name} = props
+  const card = useCard()
   const portal = usePortal()
   const portalElement =
-    (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default
+    (name ? portal.elements && portal.elements[name] : portal.element) ||
+    portal.elements?.['default']
 
   if (!portalElement) {
     return null
   }
 
-  return createPortal(children, portalElement)
+  return createPortal(
+    <CardProvider
+      // rendered={true}
+      tone="transparent" // card?.tone || 'default',
+      scheme={card?.scheme || 'light'}
+    >
+      {children}
+    </CardProvider>,
+    portalElement,
+  )
 }
-
-Portal.displayName = 'Portal'

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

@@ -1,6 +1,6 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {globalScope} from '../../lib/globalScope'
-import {PortalContextValue} from './types'
+import type {PortalContextValue} from './types'
 
 const key = '@sanity/ui/context/portal'
 const elementKey = Symbol.for(`${key}/element`)

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

@@ -1,11 +1,9 @@
-import {ReactElement, ReactNode, useMemo, useRef, useSyncExternalStore} from 'react'
+import {type ReactElement, type ReactNode, useMemo, useRef, useSyncExternalStore} from 'react'
 
 import {PortalContext} from './portalContext'
-import {PortalContextValue} from './types'
+import type {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)
@@ -43,8 +39,6 @@ export function PortalProvider(props: PortalProviderProps): ReactElement {
   return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
 }
 
-PortalProvider.displayName = 'PortalProvider'
-
 const emptySubscribe = () => () => {}
 
 /**

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

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

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

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

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

@@ -1,35 +1,33 @@
-import {composeClassNames, srOnly} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, ReactNode} from 'react'
+import {srOnly} from '@sanity/ui/css'
 
-import {Props} from '../../types'
+import type {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
-      data-ui="SrOnly"
-      {...rest}
-      aria-hidden
-      className={composeClassNames(className, srOnly())}
-      ref={ref}
-    >
+    <Element data-ui="SrOnly" {...rest} aria-hidden className={srOnly({className})}>
       {children}
-    </As>
+    </Element>
   )
-})
-
-SrOnly.displayName = 'ForwardRef(SrOnly)'
+}

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,27 @@ 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)'
+}
 
 function findScrollable(parentNode: ParentNode | null) {
   let _scrollEl = parentNode

package/src/css/__theme/index.ts

@@ -0,0 +1,16 @@
+// import {buildTheme_v3} from '@sanity/ui/theme'
+
+// import {resolveTheme} from './resolveTheme'
+
+// const result = resolveTheme({theme: buildTheme_v3()})
+
+// /** @public */
+// export const vars = result.vars
+
+// /** @public */
+// export const varNames = result.varNames
+
+// /** @public */
+// export const properties = result.properties
+
+export {}

package/src/css/__theme/lib/contract/buildVarContract.ts

@@ -0,0 +1,78 @@
+// import {_hash} from '../../../_hash'
+// import type {Contract, ContractProperties, ContractVarNames, ContractVars} from './types'
+
+// export function buildVarContract<C extends Contract, P extends string>(
+//   contract: C,
+//   options: {layer: string; prefix: P},
+// ) {
+//   return {
+//     vars: buildVars(contract, options),
+//     varNames: buildVarNames(contract, options),
+//     properties: buildProperties(contract, options),
+//   }
+// }
+
+// function buildProperties<C extends Contract, P extends string>(
+//   contract: C,
+//   options: {layer: string; prefix: P},
+// ) {
+//   const _properties: ContractProperties = {}
+
+//   function walk(c: Contract) {
+//     for (const key in c) {
+//       if (typeof c[key] === 'string') {
+//         _properties[`--${options.prefix}${_hash(`${options.layer}.${c[key]}`)}`] = c[key]
+//       } else if (c[key] === null) {
+//         // ignore
+//       } else {
+//         walk(c[key])
+//       }
+//     }
+//   }
+
+//   walk(contract)
+
+//   return Object.freeze(_properties)
+// }
+
+// function buildVars<C extends Contract, P extends string>(
+//   contract: C,
+//   options: {layer: string; prefix: P},
+//   path: string = '',
+// ) {
+//   const _vars = {} as Record<string, unknown>
+
+//   for (const key in contract) {
+//     if (typeof contract[key] === 'string') {
+//       _vars[key] = `var(--${options.prefix}${_hash(`${options.layer}.${contract[key]}`)})`
+//     } else if (contract[key] === null) {
+//       _vars[key] = `var(--${options.prefix}${_hash(`${options.layer}.${path}.${key}`)})`
+//     } else {
+//       _vars[key] = buildVars(contract[key], options, [path, key].join('.'))
+//     }
+//   }
+
+//   return Object.freeze(_vars) as ContractVars<C>
+// }
+
+// function buildVarNames<C extends Contract, P extends string>(
+//   contract: C,
+//   options: {layer: string; prefix: P},
+//   path: string = '',
+// ) {
+//   const _varNames = {} as Record<string, unknown>
+
+//   for (const key in contract) {
+//     if (typeof contract[key] === 'string') {
+//       _varNames[key] = `--${options.prefix}${_hash(`${options.layer}.${contract[key]}`)}`
+//     } else if (contract[key] === null) {
+//       _varNames[key] = `--${options.prefix}${_hash(`${options.layer}.${path}.${key}`)}`
+//     } else {
+//       _varNames[key] = buildVarNames(contract[key], options, [path, key].join('.'))
+//     }
+//   }
+
+//   return Object.freeze(_varNames) as ContractVarNames<C>
+// }
+
+export {}

package/src/css/__theme/lib/contract/index.ts

@@ -0,0 +1,4 @@
+// export * from './buildVarContract'
+// export * from './types'
+
+export {}

package/src/css/__theme/lib/contract/types.ts

@@ -0,0 +1,17 @@
+// export interface Contract {
+//   [key: string]: string | Contract | null
+// }
+
+// export interface ContractProperties {
+//   [key: `--${string}`]: string
+// }
+
+// export type ContractVars<C extends Contract> = {
+//   [key in keyof C]: C[key] extends object ? ContractVars<C[key]> : `var(--${string})`
+// }
+
+// export type ContractVarNames<C extends Contract> = {
+//   [key in keyof C]: C[key] extends object ? ContractVarNames<C[key]> : `--${string}`
+// }
+
+export {}