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

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,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 {Props} from '../../types'
+import type {CardElementType, CardOwnProps} from '../../primitives'
+import type {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/core/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, type CardElementType} from '../../primitives'
+import type {Props} from '../../types'
+import type {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/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,21 +1,25 @@
-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
- */
+/** @public */
 export interface LayerProviderProps {
   children?: ReactNode
   zOffset?: number | number[]
 }
 
-/**
- * @public
- */
+/** @public */
 export function LayerProvider(props: LayerProviderProps): ReactElement {
   const {children, zOffset: zOffsetProp = 0} = props
 
@@ -34,7 +38,7 @@ export function LayerProvider(props: LayerProviderProps): ReactElement {
   // 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]
+  const zIndex = parent ? parent.zIndex + (zOffset[mediaIndex] ?? 0) : (zOffset[mediaIndex] ?? 0)
 
   // A state value that is used to keep track of the number of child layers on each level
   const [, setChildLayers] = useState<Record<number, number>>({})

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

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

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.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,29 @@ 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)

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