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

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

@@ -1,53 +1,75 @@
-import {ForwardedRef, forwardRef, useImperativeHandle, useMemo, useState} from 'react'
+import {BREAKPOINTS} from '@sanity/ui/css'
+import {useImperativeHandle, useMemo, useState} from 'react'
 
-import {useTheme_v2} from '../../_compat'
 import {useElementSize} from '../../hooks'
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
+/** @beta */
+export const DEFAULT_ELEMENT_QUERY_ELEMENT = 'div'
+
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface MediaQueryProps {
+export type ElementQueryOwnProps = {
   media?: number[]
 }
 
+/** @beta */
+export type ElementQueryElementType = 'div' | ComponentType
+
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export const ElementQuery = forwardRef(function ElementQuery(
-  props: Props<MediaQueryProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
-) {
-  const theme = useTheme_v2()
-  const {children, media: _media, ...restProps} = props
-  const media = _media ?? theme.media
+export type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> = Props<
+  ElementQueryOwnProps,
+  E
+>
+
+const DEFAULT_BREAKPOINTS = Object.values(BREAKPOINTS)
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function ElementQuery<
+  E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
+>(props: ElementQueryProps<E>) {
+  const {
+    as: Element = DEFAULT_ELEMENT_QUERY_ELEMENT,
+    children,
+    media: mediaProp,
+    ref: forwardedRef,
+    ...rest
+  } = props as ElementQueryProps<typeof DEFAULT_ELEMENT_QUERY_ELEMENT>
+
+  const breakpoints = mediaProp ?? DEFAULT_BREAKPOINTS
 
   const [element, setElement] = useState<HTMLDivElement | null>(null)
   const elementSize = useElementSize(element)
   const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
 
   const max = useMemo(() => {
-    const eq = findMaxBreakpoints(media, width)
+    const eq = findMaxBreakpoints(breakpoints, width)
 
     return eq.length ? eq.join(' ') : undefined
-  }, [media, width])
+  }, [breakpoints, width])
+
   const min = useMemo(() => {
-    const eq = findMinBreakpoints(media, width)
+    const eq = findMinBreakpoints(breakpoints, width)
 
     return eq.length ? eq.join(' ') : undefined
-  }, [media, width])
+  }, [breakpoints, width])
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => element, [
     element,
   ])
 
   return (
-    <div data-ui="ElementQuery" {...restProps} data-eq-max={max} data-eq-min={min} ref={setElement}>
+    <Element data-ui="ElementQuery" {...rest} data-eq-max={max} data-eq-min={min} ref={setElement}>
       {children}
-    </div>
+    </Element>
   )
-})
-ElementQuery.displayName = 'ForwardRef(ElementQuery)'
+}

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,18 +23,20 @@ export interface ErrorBoundaryState {
  * @beta
  */
 export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState = {error: null}
+  override state: ErrorBoundaryState = {error: null}
+
+  static displayName = 'ErrorBoundary'
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
     // Update state so the next render will show the fallback UI.
     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/index.ts

@@ -1,6 +1,5 @@
 export * from './arrow'
 export * from './boundaryElement'
-export * from './conditionalWrapper'
 export * from './elementQuery'
 export * from './errorBoundary'
 export * from './layer'

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 type {ResponsiveProp} from '@sanity/ui/css'
 
-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[]
+  zOffset?: ResponsiveProp<number>
 }
 
-interface LayerChildrenProps extends BoxProps {
-  onActivate?: LayerProps['onActivate']
-}
+/** @public */
+export type LayerElementType = CardElementType
+
+/** @public */
+export type LayerProps<E extends LayerElementType = LayerElementType> = Props<LayerOwnProps, E>
 
-const LayerChildren = forwardRef(function LayerChildren(
-  props: Props<LayerChildrenProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
+/** @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)'
+}

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

@@ -0,0 +1,90 @@
+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>
+  )
+}

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,26 @@
-import {ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useState} from 'react'
-
-import {useArrayProp, useMediaIndex} from '../../hooks'
+import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
+import {
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+
+import {useMediaIndex, useResponsiveProp} 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[]
+  zOffset?: ResponsiveProp<number>
 }
 
-/**
- * @public
- */
+/** @public */
 export function LayerProvider(props: LayerProviderProps): ReactElement {
   const {children, zOffset: zOffsetProp = 0} = props
 
@@ -29,12 +34,12 @@ export function LayerProvider(props: LayerProviderProps): ReactElement {
   const level = parentLevel + 1
 
   // Get z-index offset
-  const zOffset = useArrayProp(zOffsetProp)
+  const zOffset = useResponsiveProp(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]
+  const maxMediaIndex = Object.values(zOffset).length - 1
+  const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex) as Breakpoint
+  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>>({})
@@ -106,5 +111,3 @@ export function LayerProvider(props: LayerProviderProps): ReactElement {
 
   return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
 }
-
-LayerProvider.displayName = 'LayerProvider'

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 {