@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/core/primitives/label/__workshop__/plain.tsx

@@ -1,24 +1,28 @@
-import {Flex, Label} from '@sanity/ui'
-import {useSelect, useText} from '@sanity/ui-workshop'
+import {Container, Flex, Label} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 
 import {
   WORKSHOP_FONT_WEIGHT_OPTIONS,
   WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_ALIGN_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '$workshop'
 
-export default function PlainStory() {
-  const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS, undefined, 'Props')
-  const textChild = useText('Text', 'Label text', 'Props')
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
+export default function PlainStory(): React.JSX.Element {
+  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
+  const muted = useBoolean('Muted', false)
+  const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS)
+  const textChild = useText('Text', 'Label text')
+  const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Label size={size} textOverflow={textOverflow} weight={weight}>
-        {textChild}
-      </Label>
+      <Container width={0}>
+        <Label align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
+          {textChild}
+        </Label>
+      </Container>
     </Flex>
   )
 }

package/src/core/primitives/label/label.tsx

@@ -1,79 +1,75 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import {
+  label,
+  type LabelStyleProps,
+  textOverflow,
+  type TextOverflowStyleProps,
+} from '@sanity/ui/css'
 
-import {useArrayProp} from '../../hooks'
-import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
-import {TextAlign} from '../../types'
-import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
-import {labelBaseStyle} from './styles'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface LabelProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  muted?: boolean
-  size?: number | number[]
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey
-}
+/** @public */
+export const DEFAULT_LABEL_ELEMENT = 'div'
+
+/** @public */
+export type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps
 
-const StyledLabel = styled.div<{
-  $accent?: boolean
-  $align: TextAlign[]
-  $muted: boolean
-  $size: number[]
-}>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
+/** @public */
+export type LabelElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'li'
+  | 'p'
+  | 'span'
+  | ComponentType
+
+/** @public */
+export type LabelProps<E extends LabelElementType = LabelElementType> = Props<LabelOwnProps, E>
 
 /**
  * Typographic labels.
  *
  * @public
  */
-export const Label = forwardRef(function Label(
-  props: LabelProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
+export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
+  props: LabelProps<E>,
+): React.JSX.Element {
   const {
-    accent,
     align,
-    children: childrenProp,
+    as: Element = DEFAULT_LABEL_ELEMENT,
+    children,
+    className,
     muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
+    size = 1,
+    textOverflow: textOverflowProp,
+    weight = 'regular',
+    ...rest
   } = props
 
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  } else {
-    children = <span>{children}</span>
-  }
-
   return (
-    <StyledLabel
+    <Element
       data-ui="Label"
-      {...restProps}
-      $accent={accent}
-      $align={useArrayProp(align)}
-      $muted={muted}
-      $size={useArrayProp(size)}
-      $weight={weight}
-      ref={ref}
+      {...rest}
+      className={label({
+        className,
+        align,
+        muted,
+        size,
+        weight,
+      })}
     >
-      {children}
-    </StyledLabel>
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
   )
-})
-Label.displayName = 'ForwardRef(Label)'
+}

package/src/core/{utils → primitives}/layer/__workshop__/_debug.tsx

@@ -1,6 +1,6 @@
 import {Code, useLayer} from '@sanity/ui'
 
-export function LayerDebugInfo(props: {id?: string}) {
+export function LayerDebugInfo(props: {id?: string}): React.JSX.Element {
   const {id} = props
   const layer = useLayer()
 

package/src/core/{utils → primitives}/layer/__workshop__/index.ts

@@ -1,8 +1,8 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
-  name: 'utils/layer',
+const scope: WorkshopScope = {
+  name: 'primitives/layer',
   title: 'Layer',
   stories: [
     {
@@ -21,4 +21,6 @@ export default defineScope({
       component: lazy(() => import('./responsiveZOffset')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/{utils → primitives}/layer/__workshop__/multipleRoots.tsx

@@ -2,16 +2,16 @@ import {Card, Layer, LayerProvider, Stack} from '@sanity/ui'
 
 import {LayerDebugInfo} from './_debug'
 
-export default function MultipleRootsStory() {
+export default function MultipleRootsStory(): React.JSX.Element {
   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 → primitives}/layer/__workshop__/nested.tsx

@@ -4,7 +4,7 @@ import {useCallback, useState} from 'react'
 
 import {LayerDebugInfo} from './_debug'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   return (
     <Box padding={3}>
       <Root />
@@ -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/primitives/layer/__workshop__/responsiveZOffset.tsx

@@ -0,0 +1,17 @@
+import {Layer} from '@sanity/ui'
+
+import {LayerDebugInfo} from './_debug'
+
+export default function ResponsiveZOffsetStory(): React.JSX.Element {
+  return (
+    <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 → primitives}/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 → primitives}/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 → primitives}/layer/layer.test.tsx

@@ -1,14 +1,15 @@
-/** @jest-environment jsdom */
+import {describe, expect, it, vi} from 'vitest'
+
+import {render} from '$test/utils'
 
-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('primitives/layer', () => {
   describe('useLayer', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootLayer = useLayer()
@@ -45,7 +46,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 {
@@ -58,10 +59,11 @@ describe('utils/layer', () => {
       }
 
       function Root() {
-        const value = undefined
-
         return (
-          <LayerContext.Provider value={value as any}>
+          <LayerContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
             <Debug />
           </LayerContext.Provider>
         )
@@ -73,7 +75,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 {
@@ -87,12 +89,12 @@ describe('utils/layer', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
 
         return (
-          <LayerContext.Provider value={value as any}>
+          <LayerContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
             <Debug />
           </LayerContext.Provider>
         )

package/src/core/primitives/layer/layer.tsx

@@ -0,0 +1,42 @@
+import type {ResponsiveProp} from '@sanity/ui/css'
+
+import type {CardElementType, CardOwnProps} from '../../primitives/card/card'
+import type {Props} from '../../types'
+import {LayerCard} from './layerCard'
+import {LayerProvider} from './layerProvider'
+
+/** @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?: ResponsiveProp<number>
+}
+
+/** @public */
+export type LayerElementType = CardElementType
+
+/** @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>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_LAYER_ELEMENT,
+    children,
+    zOffset = 1,
+    ...rest
+  } = props as LayerProps<typeof DEFAULT_LAYER_ELEMENT>
+
+  return (
+    <LayerProvider zOffset={zOffset}>
+      <LayerCard {...rest} as={as}>
+        {children}
+      </LayerCard>
+    </LayerProvider>
+  )
+}

package/src/core/{utils/layer/layer.tsx → primitives/layer/layerCard.tsx}

@@ -1,33 +1,42 @@
-import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
+import {type FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
 
 import {EMPTY_RECORD} from '../../constants'
-import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
-import {LayerProvider} from './layerProvider'
+import {containsOrEqualsElement, isHTMLElement} from '../../helpers/element'
+import {Card, type CardElementType} from '../../primitives/card/card'
+import type {Props} from '../../types'
+import type {LayerElementType, LayerOwnProps} from './layer'
 import {useLayer} from './useLayer'
 
-/**
- * @public
- */
-export interface LayerProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  /** 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 {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  onActivate?: LayerProps['onActivate']
-}
+/** @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>,
+): React.JSX.Element {
+  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 StyledLayer = styled.div({position: 'relative'})
-
-const LayerChildren = forwardRef(function LayerChildren(
-  props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  forwardedRef: React.Ref<HTMLDivElement>,
-) {
-  const {children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps} = props
   const {zIndex, isTopLayer} = useLayer()
   const lastFocusedRef = useRef<HTMLElement | null>(null)
   const ref = useRef<HTMLDivElement | null>(null)
@@ -66,33 +75,16 @@ const LayerChildren = forwardRef(function LayerChildren(
   )
 
   return (
-    <StyledLayer
-      {...restProps}
+    <Card
       data-ui="Layer"
+      {...rest}
+      as={as as CardElementType}
       onFocus={handleFocus}
+      position={position}
       ref={ref}
       style={{...style, zIndex}}
     >
       {children}
-    </StyledLayer>
+    </Card>
   )
-})
-
-/**
- * @public
- */
-export const Layer = forwardRef(function Layer(
-  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {children, zOffset = 1, ...restProps} = props
-
-  return (
-    <LayerProvider zOffset={zOffset}>
-      <LayerChildren {...restProps} ref={ref}>
-        {children}
-      </LayerChildren>
-    </LayerProvider>
-  )
-})
-Layer.displayName = 'ForwardRef(Layer)'
+}

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

@@ -0,0 +1,7 @@
+import type {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
+import type {LayerContextValue} from './types'
+
+export const LayerContext: Context<LayerContextValue | null> =
+  createGlobalScopedContext<LayerContextValue | null>('@sanity/ui/v3/layer', null)

package/src/core/{utils → primitives}/layer/layerProvider.tsx

@@ -1,21 +1,19 @@
-import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
+import {type ReactNode, useCallback, useContext, useEffect, useMemo, useState} from 'react'
 
-import {useArrayProp, useMediaIndex} from '../../hooks'
+import {useMediaIndex} from '../../hooks/useMediaIndex/useMediaIndex'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
-import {LayerContextValue} from './types'
+import type {LayerContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export interface LayerProviderProps {
-  children?: React.ReactNode
-  zOffset?: number | number[]
+  children?: ReactNode
+  zOffset?: ResponsiveProp<number>
 }
 
-/**
- * @public
- */
+/** @public */
 export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const {children, zOffset: zOffsetProp = 0} = props
 
@@ -29,12 +27,12 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   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 +104,3 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
 
   return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
 }
-
-LayerProvider.displayName = 'LayerProvider'

package/src/core/{utils → primitives}/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/primitives/popover/__workshop__/AlignedStory.tsx

@@ -4,20 +4,20 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
 
 import {
+  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_FLEX_ALIGN_OPTIONS,
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
-  WORKSHOP_WIDTH_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '$workshop'
 
-export default function AlignedStory() {
+export default function AlignedStory(): React.JSX.Element {
   const constrainSize = useBoolean('Constrain size', false)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS)
   const portal = useBoolean('Portal', true)
-  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 'auto')
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
 
-  const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS, 'flex-start')
-  const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'flex-end')
+  const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS)
+  const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
 
   const [open, setOpen] = useState(false)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
@@ -51,9 +51,9 @@ export default function AlignedStory() {
       <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1} sizing="border">
         <Flex align={flexAlign} height="fill" justify={flexJustify}>
           <Popover
-            boundaryElement={boundaryElement}
             constrainSize={constrainSize}
             content={content}
+            floatingBoundary={boundaryElement}
             open={open}
             overflow="auto"
             padding={3}

package/src/core/primitives/popover/__workshop__/MarginsStory.tsx

@@ -1,6 +1,6 @@
 import {Box, Card, Container, Flex, Popover, Text} from '@sanity/ui'
 
-export default function MarginsStory() {
+export default function MarginsStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Popover