@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

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

@@ -1,21 +0,0 @@
-import {isRecord} from '../../lib/isRecord'
-import type {LayerContextValue} from './types'
-
-export function getLayerContext(contextValue: LayerContextValue): LayerContextValue {
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (!isRecord(contextValue) || contextValue.version !== 0.0) {
-    throw new Error('the context value is not compatible')
-  }
-
-  if (!contextValue) {
-    throw new Error('components using `useLayer()` should be wrapped in a <LayerProvider>.')
-  }
-
-  if (contextValue.version === 0.0) {
-    return contextValue
-  }
-
-  throw new Error('could not get layer context')
-}

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

@@ -1,110 +0,0 @@
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '$test/utils'
-
-import {LayerContext} from './layerContext'
-import type {LayerContextValue} from './types'
-import {useLayer} from './useLayer'
-
-describe('primitives/layer', () => {
-  describe('useLayer', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootLayer = useLayer()
-
-        log(rootLayer)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: LayerContextValue = {
-          version: 0.0,
-          isTopLayer: true,
-          level: 0,
-          registerChild: () => () => undefined,
-          size: 0,
-          zIndex: 0,
-        }
-
-        return (
-          <LayerContext.Provider value={value}>
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].isTopLayer).toBe(true)
-      expect(typeof log.mock.calls[0][0].registerChild).toBe('function')
-      expect(log.mock.calls[0][0].size).toBe(0)
-      expect(log.mock.calls[0][0].zIndex).toBe(0)
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useLayer()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        return (
-          <LayerContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useLayer(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useLayer()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-
-        return (
-          <LayerContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={() => ({version: 1})}
-          >
-            <Debug />
-          </LayerContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useLayer(): the context value is not compatible',
-      )
-    })
-  })
-})

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

@@ -1,42 +0,0 @@
-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/primitives/layer/layerCard.tsx

@@ -1,90 +0,0 @@
-import {type FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-
-import {EMPTY_RECORD} from '../../constants'
-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'
-
-/** @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 {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/primitives/layer/layerContext.ts

@@ -1,7 +0,0 @@
-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/primitives/layer/layerProvider.tsx

@@ -1,106 +0,0 @@
-import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
-import {type ReactNode, useCallback, useContext, useEffect, useMemo, useState} from 'react'
-
-import {useMediaIndex} from '../../hooks/useMediaIndex/useMediaIndex'
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
-import type {LayerContextValue} from './types'
-
-/** @public */
-export interface LayerProviderProps {
-  children?: ReactNode
-  zOffset?: ResponsiveProp<number>
-}
-
-/** @public */
-export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
-  const {children, zOffset: zOffsetProp = 0} = props
-
-  // Get parent context values
-  const parentContextValue = useContext(LayerContext)
-  const parent = parentContextValue && getLayerContext(parentContextValue)
-  const parentRegisterChild = parent?.registerChild
-  const parentLevel = parent?.level ?? 0
-
-  // Get level
-  const level = parentLevel + 1
-
-  // Get z-index offset
-  const zOffset = useResponsiveProp(zOffsetProp)
-
-  // Get responsive z-index value
-  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>>({})
-
-  // A state value that is used to keep track of the number of child levels
-  const [size, setSize] = useState(0)
-
-  const isTopLayer = size === 0
-
-  const registerChild = useCallback(
-    (childLevel?: number) => {
-      // Register child layers to the parent layer
-      const parentDispose = parentRegisterChild?.(childLevel)
-
-      if (childLevel !== undefined) {
-        setChildLayers((state) => {
-          const prevLen = state[childLevel] ?? 0
-          const nextState = {...state, [childLevel]: prevLen + 1}
-
-          setSize(Object.keys(nextState).length)
-
-          return nextState
-        })
-      } else {
-        // Legacy behavior: if no child level is provided, increment the size by 1
-        setSize((v) => v + 1)
-      }
-
-      return () => {
-        if (childLevel !== undefined) {
-          setChildLayers((state) => {
-            const nextState = {...state}
-
-            if (nextState[childLevel] === 1) {
-              delete nextState[childLevel]
-
-              setSize(Object.keys(nextState).length)
-            } else {
-              nextState[childLevel] -= 1
-            }
-
-            return nextState
-          })
-        } else {
-          // Legacy behavior: if no child level is provided, decrement the size by 1
-          setSize((v) => v - 1)
-        }
-
-        parentDispose?.()
-      }
-    },
-    [parentRegisterChild, setSize, setChildLayers],
-  )
-
-  // Register this layer on mount
-  useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild])
-
-  const value: LayerContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      isTopLayer,
-      level,
-      registerChild,
-      size,
-      zIndex,
-    }),
-    [isTopLayer, level, registerChild, size, zIndex],
-  )
-
-  return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
-}

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

@@ -1,9 +0,0 @@
-/** @public */
-export interface LayerContextValue {
-  version: 0.0
-  isTopLayer: boolean
-  level?: number
-  registerChild: (childLevel?: number) => () => void
-  size: number
-  zIndex: number
-}

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

@@ -1,24 +0,0 @@
-import {useContext} from 'react'
-
-import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
-import type {LayerContextValue} from './types'
-
-/** @public */
-export function useLayer(): LayerContextValue {
-  const value = useContext(LayerContext)
-
-  if (!value) {
-    throw new Error('useLayer(): missing context value')
-  }
-
-  try {
-    return getLayerContext(value)
-  } catch (err) {
-    if (err instanceof Error) {
-      throw new Error(`useLayer(): ${err.message}`)
-    } else {
-      throw new Error(`useLayer(): ${err}`)
-    }
-  }
-}

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

@@ -1,77 +0,0 @@
-import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Button, Card, Flex, Popover, Text, useClickOutsideEvent} from '@sanity/ui'
-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,
-} from '$workshop'
-
-export default function AlignedStory(): React.JSX.Element {
-  const constrainSize = useBoolean('Constrain size', false)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS)
-  const portal = useBoolean('Portal', true)
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
-
-  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)
-  const buttonElementRef = useRef<HTMLButtonElement | null>(null)
-  const popoverElementRef = useRef<HTMLDivElement | null>(null)
-
-  const content = (
-    <Text size={1}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
-      hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
-      quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam luctus
-      felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at rhoncus a, tempus vel
-      neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
-      Sed id mauris quam. Nam finibus sapien non lacinia ultricies. Integer fermentum tortor at
-      pellentesque faucibus. In venenatis commodo placerat. Curabitur commodo tortor libero, vel
-      pellentesque elit luctus sodales. Donec mattis tristique nunc ac lacinia. Vestibulum non
-      pulvinar turpis, posuere consequat arcu. Fusce ut urna blandit, finibus nisi a, molestie elit.
-      Nulla sed eleifend mi.
-    </Text>
-  )
-
-  const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
-
-  useClickOutsideEvent(
-    () => setOpen(false),
-    () => [buttonElementRef.current, popoverElementRef.current],
-  )
-
-  return (
-    <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
-      <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1} sizing="border">
-        <Flex align={flexAlign} height="fill" justify={flexJustify}>
-          <Popover
-            constrainSize={constrainSize}
-            content={content}
-            floatingBoundary={boundaryElement}
-            open={open}
-            overflow="auto"
-            padding={3}
-            portal={portal}
-            placement={placement}
-            ref={popoverElementRef}
-            width={width}
-          >
-            <Button
-              icon={EllipsisVerticalIcon}
-              mode="bleed"
-              onClick={handleToggleOpen}
-              ref={buttonElementRef}
-              selected={open}
-            />
-          </Popover>
-        </Flex>
-      </Card>
-    </Card>
-  )
-}

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

@@ -1,31 +0,0 @@
-import {Box, Card, Container, Flex, Popover, Text} from '@sanity/ui'
-
-export default function MarginsStory(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Popover
-        __unstable_margins={[-8, 8, -8, 8]}
-        arrow={false}
-        content={
-          <Box padding={2}>
-            <Text align="center" muted size={1}>
-              Popover
-            </Text>
-          </Box>
-        }
-        matchReferenceWidth
-        open
-        placement="bottom-start"
-        // radius={0}
-      >
-        <Container width={0}>
-          <Card padding={2} muted shadow={1}>
-            <Text align="center" muted size={1}>
-              Reference
-            </Text>
-          </Card>
-        </Container>
-      </Popover>
-    </Flex>
-  )
-}

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

@@ -1,32 +0,0 @@
-import {Box, Button, Container, Flex, Popover, Stack, Text} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
-
-export default function MatchReferenceWidthStory(): React.JSX.Element {
-  const arrow = useBoolean('Arrow', true)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Popover
-        arrow={arrow}
-        content={
-          <Box padding={3}>
-            <Text size={1}>Content</Text>
-          </Box>
-        }
-        matchReferenceWidth
-        open
-        placement={placement}
-        radius={2}
-      >
-        <Container width={0}>
-          <Stack>
-            <Button fontSize={1} mode="ghost" selected text="Button" />
-          </Stack>
-        </Container>
-      </Popover>
-    </Flex>
-  )
-}

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

@@ -1,11 +0,0 @@
-import {Button, Card, Popover, Text} from '@sanity/ui'
-
-export default function OpenOnMountStory(): React.JSX.Element {
-  return (
-    <Card height="fill" padding={3} sizing="border">
-      <Popover content={<Text size={1}>popover content</Text>} open padding={3} tone="default">
-        <Button text="This button is the popover reference" />
-      </Popover>
-    </Card>
-  )
-}

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

@@ -1,71 +0,0 @@
-import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {useState} from 'react'
-
-import {
-  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
-  WORKSHOP_PLACEMENT_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const arrow = useBoolean('Arrow', true)
-  const boundaryElementFlag = useBoolean('Boundary element', true)
-  const constrainSize = useBoolean('Constrain size', true)
-  const matchReferenceWidth = useBoolean('Match reference width', false)
-  const open = useBoolean('Open', true)
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
-  const portal = useBoolean('Portal', true)
-  const preventOverflow = useBoolean('Prevent overflow', true)
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
-  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <Card height="fill" padding={3} sizing="border">
-      <PortalProvider element={portalElement}>
-        <Text align="center" muted size={1}>
-          Scroll this box to reveal the popover
-        </Text>
-        <div
-          ref={setBoundaryElement}
-          style={{
-            height: 'calc(100vh - 120px)',
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            margin: 60,
-            overflow: 'auto',
-            outline: '1px solid red',
-            width: 'calc(100vw - 120px)',
-          }}
-        >
-          <div style={{padding: '150vh 0', textAlign: 'center'}}>
-            <Popover
-              __unstable_margins={[1, 1, 1, 1]}
-              arrow={arrow}
-              constrainSize={constrainSize}
-              content={<Text size={1}>popover content</Text>}
-              fallbackPlacements={['top', 'bottom']}
-              floatingBoundary={boundaryElementFlag ? boundaryElement : undefined}
-              matchReferenceWidth={matchReferenceWidth}
-              open={open}
-              padding={padding}
-              placement={placement}
-              portal={portal}
-              preventOverflow={preventOverflow}
-              radius={radius}
-              width={width}
-            >
-              <Button text="This button is the popover reference" />
-            </Popover>
-          </div>
-        </div>
-        <div ref={setPortalElement} />
-      </PortalProvider>
-    </Card>
-  )
-}