@sanity/ui 3.0.0-static.18 → 3.0.0-static.19

package/src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -1,7 +1,7 @@
-import {ReactElement, ReactNode, useMemo} from 'react'
+import {type ReactElement, type ReactNode, useMemo} from 'react'
 
 import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
+import type {BoundaryElementContextValue} from './types'
 
 /** @public */
 export interface BoundaryElementProviderProps {

package/src/core/utils/boundaryElement/useBoundaryElement.ts

@@ -2,7 +2,7 @@ import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
 import {BoundaryElementContext} from './boundaryElementContext'
-import {BoundaryElementContextValue} from './types'
+import type {BoundaryElementContextValue} from './types'
 
 const DEFAULT_VALUE: BoundaryElementContextValue = {
   version: 0.0,

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,27 +1,34 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
+import {varNames, vars} from '@sanity/ui/css'
 import {styled} from 'styled-components'
 
 const TestCard = styled(Card)`
-  --card-fg-color: orange;
-
   [data-eq-min~='0'] > & {
-    --card-fg-color: green;
+    ${varNames.color.fg}: light-dark(${vars.palette.orange[600]}, ${vars.palette.orange[400]});
   }
 
   [data-eq-min~='1'] > & {
-    --card-fg-color: blue;
+    ${varNames.color.fg}: light-dark(${vars.palette.red[600]}, ${vars.palette.red[400]});
+  }
+
+  [data-eq-min~='2'] > & {
+    ${varNames.color.fg}: light-dark(${vars.palette.magenta[600]}, ${vars.palette.magenta[400]});
+  }
+
+  [data-eq-min~='3'] > & {
+    ${varNames.color.fg}: light-dark(${vars.palette.purple[600]}, ${vars.palette.purple[400]});
   }
 `
 
 export default function CustomMediaQuery() {
   return (
-    <Box padding={[3, 4, 5]}>
-      <Box marginBottom={[3, 4, 5]}>
+    <Box padding={4}>
+      <Box marginBottom={4}>
         <Text>Resize this frame to see the text color change:</Text>
       </Box>
 
-      <ElementQuery media={[100, 200, 300]}>
-        <TestCard padding={2} shadow={1}>
+      <ElementQuery media={[0, 100, 200, 300]}>
+        <TestCard padding={3} shadow={1}>
           <Text>This card sits inside an element query.</Text>
         </TestCard>
       </ElementQuery>

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -2,7 +2,7 @@ import {BREAKPOINTS} from '@sanity/ui/css'
 import {useImperativeHandle, useMemo, useState} from 'react'
 
 import {useElementSize} from '../../hooks'
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /** @beta */

package/src/core/utils/errorBoundary.tsx

@@ -1,4 +1,4 @@
-import {Component, ErrorInfo, PropsWithChildren, ReactNode} from 'react'
+import {Component, type ErrorInfo, type PropsWithChildren, type ReactNode} from 'react'
 
 import {Code} from '../primitives/code'
 
@@ -23,7 +23,7 @@ export interface ErrorBoundaryState {
  * @beta
  */
 export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState = {error: null}
+  override state: ErrorBoundaryState = {error: null}
 
   static displayName = 'ErrorBoundary'
 
@@ -32,11 +32,11 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     return {error}
   }
 
-  componentDidCatch(error: Error, info: ErrorInfo): void {
+  override componentDidCatch(error: Error, info: ErrorInfo): void {
     this.props.onCatch({error, info})
   }
 
-  render(): ReactNode {
+  override render(): ReactNode {
     const {error} = this.state
 
     if (error) {

package/src/core/utils/layer/__workshop__/multipleRoots.tsx

@@ -4,14 +4,14 @@ import {LayerDebugInfo} from './_debug'
 
 export default function MultipleRootsStory() {
   return (
-    <Stack space={4}>
+    <Stack gap={4}>
       <LayerProvider zOffset={100}>
         <Card padding={3} shadow={1}>
-          <Stack space={3}>
+          <Stack gap={3}>
             <LayerDebugInfo />
             <Layer>
               <Card padding={3} shadow={1}>
-                <Stack space={3}>
+                <Stack gap={3}>
                   <LayerDebugInfo />
                   <Layer>
                     <Card padding={3} shadow={1}>
@@ -27,11 +27,11 @@ export default function MultipleRootsStory() {
 
       <LayerProvider zOffset={200}>
         <Card as={Layer} padding={3} shadow={5} style={{top: -50, left: 30}}>
-          <Stack space={3}>
+          <Stack gap={3}>
             <LayerDebugInfo />
             <Layer>
               <Card padding={3} shadow={1}>
-                <Stack space={3}>
+                <Stack gap={3}>
                   <LayerDebugInfo />
                   <Layer>
                     <Card padding={3} shadow={1}>

package/src/core/utils/layer/__workshop__/nested.tsx

@@ -28,7 +28,7 @@ function Root() {
           </Text>
         </Box>
         <Box padding={3}>
-          <Stack space={3}>
+          <Stack gap={3}>
             <LayerDebugInfo id="layer-debug-info-1" />
             <Button id="open-layer-1" mode="ghost" onClick={handleOpen} text="Open layer 1" />
             {open && (
@@ -61,7 +61,7 @@ function Layer1({onClose}: {onClose: () => void}) {
         </Box>
       </Flex>
       <Box padding={3}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <LayerDebugInfo />
           <Button id="open-layer-2" mode="ghost" onClick={handleOpen} text="Open layer 2" />
           {open && (
@@ -89,7 +89,7 @@ function Layer2({onClose}: {onClose: () => void}) {
         </Box>
       </Flex>
       <Box padding={3}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <LayerDebugInfo />
         </Stack>
       </Box>

package/src/core/utils/layer/__workshop__/responsiveZOffset.tsx

@@ -1,13 +1,17 @@
-import {Card, Layer} from '@sanity/ui'
+import {Layer} from '@sanity/ui'
 
 import {LayerDebugInfo} from './_debug'
 
 export default function ResponsiveZOffsetStory() {
   return (
-    <Layer id="responsive-layer" zOffset={[1, 2, 3, 4, 5, 6, 7]}>
-      <Card padding={[1, 2, 3, 4, 5, 6, 7]} shadow={1}>
-        <LayerDebugInfo />
-      </Card>
+    <Layer
+      id="responsive-layer"
+      padding={[1, 2, 3, 4, 5, 6, 7]}
+      sizing="border"
+      shadow={1}
+      zOffset={[1, 2, 3, 4, 5, 6, 7]}
+    >
+      <LayerDebugInfo />
     </Layer>
   )
 }

package/src/core/utils/layer/getLayerContext.test.ts

@@ -1,5 +1,7 @@
+import {describe, expect, it} from 'vitest'
+
 import {getLayerContext} from './getLayerContext'
-import {LayerContextValue} from './types'
+import type {LayerContextValue} from './types'
 
 describe('getLayerContext', () => {
   describe('0.0', () => {

package/src/core/utils/layer/getLayerContext.ts

@@ -1,5 +1,5 @@
 import {isRecord} from '../../lib/isRecord'
-import {LayerContextValue} from './types'
+import type {LayerContextValue} from './types'
 
 export function getLayerContext(contextValue: LayerContextValue): LayerContextValue {
   // NOTE: This check is for future-compatiblity

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

@@ -1,14 +1,14 @@
-/** @jest-environment jsdom */
+import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {LayerContext} from './layerContext'
-import {LayerContextValue} from './types'
+import type {LayerContextValue} from './types'
 import {useLayer} from './useLayer'
 
 describe('utils/layer', () => {
   describe('useLayer', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootLayer = useLayer()
@@ -45,7 +45,7 @@ describe('utils/layer', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -73,7 +73,7 @@ describe('utils/layer', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

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

@@ -1,5 +1,5 @@
-import {CardElementType, CardOwnProps} from '../../primitives'
-import {Props} from '../../types'
+import type {CardElementType, CardOwnProps} from '../../primitives'
+import type {Props} from '../../types'
 import {LayerCard} from './layerCard'
 import {LayerProvider} from './layerProvider'
 

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

@@ -2,9 +2,9 @@ import {type FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} fr
 
 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 {Card, type CardElementType} from '../../primitives'
+import type {Props} from '../../types'
+import type {LayerElementType, LayerOwnProps} from './layer'
 import {useLayer} from './useLayer'
 
 /** @internal */

package/src/core/utils/layer/layerContext.ts

@@ -1,5 +1,5 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {LayerContextValue} from './types'
+import type {LayerContextValue} from './types'
 
 export const LayerContext = createGlobalScopedContext<LayerContextValue | null>(
   '@sanity/ui/context/layer',

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

@@ -1,9 +1,17 @@
-import {ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import {
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 
 import {useArrayProp, useMediaIndex} from '../../hooks'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
-import {LayerContextValue} from './types'
+import type {LayerContextValue} from './types'
 
 /** @public */
 export interface LayerProviderProps {

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

@@ -2,7 +2,7 @@ import {useContext} from 'react'
 
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
-import {LayerContextValue} from './types'
+import type {LayerContextValue} from './types'
 
 /** @public */
 export function useLayer(): LayerContextValue {

package/src/core/utils/portal/__workshop__/named.tsx

@@ -18,7 +18,7 @@ export default function NamedStory() {
     <PortalProvider __unstable_elements={__unstable_elements}>
       <Container width={1}>
         <Card height="fill" padding={4}>
-          <Stack space={2}>
+          <Stack gap={2}>
             <Text size={1} weight="medium">
               Portal 1
             </Text>
@@ -26,7 +26,7 @@ export default function NamedStory() {
           </Stack>
         </Card>
         <Card height="fill" padding={4}>
-          <Stack space={2}>
+          <Stack gap={2}>
             <Text size={1} weight="medium">
               Portal 2
             </Text>
@@ -34,7 +34,7 @@ export default function NamedStory() {
           </Stack>
         </Card>
         <Card height="fill" padding={4}>
-          <Stack space={2}>
+          <Stack gap={2}>
             <Text size={1} weight="medium">
               Portal 3
             </Text>

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

@@ -1,14 +1,14 @@
-/** @jest-environment jsdom */
+import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {PortalContext} from './portalContext'
-import {PortalContextValue} from './types'
+import type {PortalContextValue} from './types'
 import {usePortal} from './usePortal'
 
 describe('utils/portal', () => {
   describe('usePortal', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootPortal = usePortal()
@@ -40,7 +40,7 @@ describe('utils/portal', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -68,7 +68,7 @@ describe('utils/portal', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

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

@@ -1,4 +1,4 @@
-import {ReactNode, ReactPortal} from 'react'
+import type {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
 import {CardProvider, useCard} from '../../primitives'
@@ -19,7 +19,8 @@ export function Portal(props: PortalProps): ReactPortal | null {
   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

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,7 +1,7 @@
-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 */
 export interface PortalProviderProps {

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

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

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

@@ -1,6 +1,6 @@
-import {composeClassNames, srOnly} from '@sanity/ui/css'
+import {_composeClassNames, srOnly} from '@sanity/ui/css'
 
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_SR_ONLY_ELEMENT = 'span'
@@ -30,7 +30,7 @@ export function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEM
       data-ui="SrOnly"
       {...rest}
       aria-hidden
-      className={composeClassNames(className, srOnly())}
+      className={_composeClassNames(className, srOnly())}
     >
       {children}
     </Element>

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 {Space} from '@sanity/ui/theme'
+import type {Space} from '@sanity/ui/theme'
 import {
   type CSSProperties,
-  ReactNode,
+  type ReactNode,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -13,7 +13,7 @@ import {
 import {_isScrollable} from '../../helpers'
 import {_ResizeObserver} from '../../observers'
 import {Box} from '../../primitives'
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 /** @beta */
 export const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'

package/src/css/_assign.ts

@@ -0,0 +1,3 @@
+export function _assign<T extends object, U extends object>(target: T, source: U): T & U {
+  return Object.assign(target, source)
+}

package/src/css/_compileStyle.ts

@@ -1,5 +1,5 @@
-import {PREFIX} from './constants'
-import {Properties, PropertiesWithVarsAndNested, Style, StyleRules} from './types'
+import {PREFIX} from './prefix'
+import type {Properties, PropertiesWithVarsAndNested, Style, StyleRules} from './types'
 import {isArray} from './util'
 
 /** @internal */
@@ -29,7 +29,7 @@ export function _compileStyle(style: Style): string {
   if (style.layers && Object.keys(style.layers).length > 0) {
     for (const [layerName, layerRules] of Object.entries(style.layers)) {
       if (Object.keys(layerRules).length > 0) {
-        css += `@layer ${PREFIX}${layerName} {\n`
+        css += `@layer ${layerName} {\n`
         css += compileStyleRules(layerRules)
         css += '}\n\n'
       }
@@ -91,7 +91,7 @@ function compileStyleRule(_selector: string, properties: Properties): string {
     _prefix = true,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     '@media': _mediaProps,
-    '@nest': nestedProps,
+    'nest': nestedProps,
     ...restProperties
   } = properties
 
@@ -127,6 +127,14 @@ function compileProperties(props: Properties) {
   const propEntries = Object.entries(props)
 
   for (const [key, value] of propEntries) {
+    // custom properties (vars)
+    if (key === 'vars') {
+      for (const [k, v] of Object.entries(value)) {
+        css += `  ${k}: ${v};\n`
+      }
+      continue
+    }
+
     if (key.startsWith('@')) {
       continue
     }

package/src/css/_compileTheme.ts

@@ -1,16 +1,13 @@
-import {type RootTheme} from '@sanity/ui/theme'
-
-import {_compileTheme_v3} from './_compileTheme_v3'
+import {_compileStyle} from './_compileStyle'
+import {properties} from './theme'
 
 /** @internal */
-export function _compileTheme(theme: RootTheme): string {
-  if (theme.v3) {
-    return _compileTheme_v3(theme.v3)
-  }
-
-  if (theme.v2) {
-    return `/* v2 - not supported */\n`
-  }
-
-  return `/* v0 - not supported */\n`
+export function _compileTheme(): string {
+  return _compileStyle({
+    layers: {
+      theme: {
+        ':root': properties,
+      },
+    },
+  })
 }

package/src/css/_composeClassNames.ts

@@ -0,0 +1,12 @@
+import {_getClassNames} from './_getClassNames'
+
+/** @internal */
+export function _composeClassNames(
+  ...classNames: Array<string | false | undefined>
+): string | undefined {
+  return unique(_getClassNames(...classNames)).join(' ') || undefined
+}
+
+function unique<T>(array: T[]): T[] {
+  return Array.from(new Set(array))
+}

package/src/css/_fromEntries.ts

@@ -0,0 +1,3 @@
+export function _fromEntries<K extends string | number | symbol, T>(entries: [K, T][]) {
+  return Object.fromEntries(entries) as Record<K, T>
+}

package/src/css/_getClassNames.ts

@@ -0,0 +1,9 @@
+/** @internal */
+export function _getClassNames(...classNames: Array<string | false | undefined>): string[] {
+  return classNames
+    .map((n) => typeof n === 'string' && n.trim())
+    .filter(Boolean)
+    .join(' ')
+    .split(' ')
+    .filter(Boolean)
+}

package/src/css/_hash.ts

@@ -0,0 +1,9 @@
+/** Hash a string using the djb2 algorithm. */
+// from: https://github.com/souporserious/restyle/blob/4e71e9aa295803dd3cb47a47e3600a52b68bac38/src/utils.ts#L70C1-L77C2
+export function _hash(value: string): string {
+  let h = 5381
+  for (let index = 0, len = value.length; index < len; index++) {
+    h = ((h << 5) + h + value.charCodeAt(index)) >>> 0
+  }
+  return h.toString(36)
+}

package/src/css/_mergeStyles.ts

@@ -1,4 +1,4 @@
-import {Style, StyleKeyframes, StyleLayers, StyleRules} from './types'
+import type {Style, StyleKeyframes, StyleLayers, StyleRules} from './types'
 
 /** @internal */
 export function _mergeStyles(styles: Style[]): Style {

package/src/css/_resp.ts

@@ -1,8 +1,4 @@
-import {ResponsiveProp} from './types'
-
-function _(className: string) {
-  return className
-}
+import type {ResponsiveProp} from './types'
 
 export function _resp<T>(
   prefix: string | undefined,
@@ -22,16 +18,14 @@ export function _resp<T>(
           .join('-')
           .replace(/\./g, '_')
 
-        return index === 0 ? _(className) : _(`${index}:${className}`)
+        return index === 0 ? className : `${index}:${className}`
       })
       .filter(Boolean)
       .join(' ')
   }
 
-  return _(
-    (typeof prop === 'boolean' ? [prefix] : [prefix, prop])
-      .filter((s) => s === 0 || Boolean(s))
-      .join('-')
-      .replace(/\./g, '_'),
-  )
+  return (typeof prop === 'boolean' ? [prefix] : [prefix, prop])
+    .filter((s) => s === 0 || Boolean(s))
+    .join('-')
+    .replace(/\./g, '_')
 }

package/src/css/_scopeClassName.ts

@@ -0,0 +1,9 @@
+import {PREFIX} from './prefix'
+
+const p = (PREFIX as string) === '__PREFIX__' ? 's-' : PREFIX
+
+/** @internal */
+export function _scopeClassName(className: string | undefined) {
+  if (className === undefined) return undefined
+  return `${p}${className.trim()}`
+}

package/src/css/_scopeClassNames.ts

@@ -0,0 +1,12 @@
+import {_getClassNames} from './_getClassNames'
+import {_scopeClassName} from './_scopeClassName'
+
+export function _scopeClassNames(
+  ...classNames: Array<string | false | undefined>
+): string | undefined {
+  return (
+    _getClassNames(...classNames)
+      .map(_scopeClassName)
+      .join(' ') || undefined
+  )
+}