@sanity/ui 3.0.0-static.1 → 3.0.0-static.10

package/src/ui/utils/getElementRef.ts

@@ -0,0 +1,26 @@
+// Based on https://github.com/radix-ui/primitives/blob/0bade6a704e5821b90a6da0f3d8cfa8a7711127d/packages/react/slot/src/Slot.tsx#L128-L150
+// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
+// After React 19 accessing `element.ref` does the opposite.
+// https://github.com/facebook/react/pull/28348
+//
+// Access the ref using the method that doesn't yield a warning.
+export function getElementRef(element: React.ReactElement) {
+  // React <=18 in DEV
+  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
+  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
+
+  if (mayWarn) {
+    return (element as any).ref
+  }
+
+  // React 19 in DEV
+  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get
+  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
+
+  if (mayWarn) {
+    return (element.props as {ref?: React.Ref<unknown>}).ref
+  }
+
+  // Not DEV
+  return (element.props as {ref?: React.Ref<unknown>}).ref || (element as any).ref
+}

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

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

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

@@ -0,0 +1,98 @@
+import {CloseIcon} from '@sanity/icons'
+import {Box, Button, Card, Flex, Layer, LayerProvider, Stack, Text} from '@sanity/ui'
+import {useCallback, useState} from 'react'
+
+import {LayerDebugInfo} from './_debug'
+
+export default function PlainStory() {
+  return (
+    <Box padding={3}>
+      <Root />
+      <Root />
+      <Root />
+    </Box>
+  )
+}
+
+function Root() {
+  const [open, setOpen] = useState(false)
+  const handleOpen = useCallback(() => setOpen(true), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  return (
+    <LayerProvider>
+      <Card radius={2} shadow={1}>
+        <Box padding={3}>
+          <Text>
+            <strong>Root layer</strong>
+          </Text>
+        </Box>
+        <Box padding={3}>
+          <Stack space={3}>
+            <LayerDebugInfo id="layer-debug-info-1" />
+            <Button id="open-layer-1" mode="ghost" onClick={handleOpen} text="Open layer 1" />
+            {open && (
+              <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+                <Layer1 onClose={handleClose} />
+              </Layer>
+            )}
+          </Stack>
+        </Box>
+      </Card>
+    </LayerProvider>
+  )
+}
+
+function Layer1({onClose}: {onClose: () => void}) {
+  const [open, setOpen] = useState(false)
+  const handleOpen = useCallback(() => setOpen(true), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  return (
+    <Card radius={2} shadow={3}>
+      <Flex>
+        <Box flex={1} padding={3}>
+          <Text>
+            <strong>Layer 1</strong>
+          </Text>
+        </Box>
+        <Box padding={1}>
+          <Button icon={CloseIcon} mode="bleed" onClick={onClose} padding={2} />
+        </Box>
+      </Flex>
+      <Box padding={3}>
+        <Stack space={3}>
+          <LayerDebugInfo />
+          <Button id="open-layer-2" mode="ghost" onClick={handleOpen} text="Open layer 2" />
+          {open && (
+            <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+              <Layer2 onClose={handleClose} />
+            </Layer>
+          )}
+        </Stack>
+      </Box>
+    </Card>
+  )
+}
+
+function Layer2({onClose}: {onClose: () => void}) {
+  return (
+    <Card radius={2} shadow={3}>
+      <Flex>
+        <Box flex={1} padding={3}>
+          <Text>
+            <strong>Layer 2</strong>
+          </Text>
+        </Box>
+        <Box padding={1}>
+          <Button icon={CloseIcon} mode="bleed" onClick={onClose} padding={2} />
+        </Box>
+      </Flex>
+      <Box padding={3}>
+        <Stack space={3}>
+          <LayerDebugInfo />
+        </Stack>
+      </Box>
+    </Card>
+  )
+}

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

@@ -0,0 +1,13 @@
+import {Card, 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>
+  )
+}

package/src/ui/utils/layer/index.ts

@@ -0,0 +1,4 @@
+export * from './layer'
+export * from './layerProvider'
+export * from './types'
+export * from './useLayer'

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

@@ -0,0 +1,108 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {LayerContext} from './layerContext'
+import {LayerContextValue} from './types'
+import {useLayer} from './useLayer'
+
+describe('utils/layer', () => {
+  describe('useLayer', () => {
+    it('should get context value', async () => {
+      const log = jest.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 = jest.fn()
+
+      function Debug() {
+        try {
+          useLayer()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        const value = undefined
+
+        return (
+          <LayerContext.Provider value={value as any}>
+            <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 = jest.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
+        const value = () => {
+          return {version: 1}
+        }
+
+        return (
+          <LayerContext.Provider value={value as any}>
+            <Debug />
+          </LayerContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'useLayer(): the context value is not compatible',
+      )
+    })
+  })
+})

package/src/ui/utils/layer/layer.tsx

@@ -0,0 +1,112 @@
+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 {LayerProvider} from './layerProvider'
+import {useLayer} from './useLayer'
+
+/**
+ * @public
+ */
+export interface LayerProps extends BoxProps {
+  /** 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']
+}
+
+const LayerChildren = forwardRef(function LayerChildren(
+  props: Props<LayerChildrenProps, 'div'>,
+  forwardedRef: ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    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
+
+  return (
+    <LayerProvider zOffset={zOffset}>
+      <LayerChildren {...restProps} ref={ref}>
+        {children}
+      </LayerChildren>
+    </LayerProvider>
+  )
+})
+
+Layer.displayName = 'ForwardRef(Layer)'

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

@@ -0,0 +1,110 @@
+import {ReactElement, 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'
+
+/**
+ * @public
+ */
+export interface LayerProviderProps {
+  children?: ReactNode
+  zOffset?: number | number[]
+}
+
+/**
+ * @public
+ */
+export function LayerProvider(props: LayerProviderProps): ReactElement {
+  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 = useArrayProp(zOffsetProp)
+
+  // Get responsive z-index value
+  const maxMediaIndex = zOffset.length - 1
+  const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex)
+  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>
+}
+
+LayerProvider.displayName = 'LayerProvider'

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

@@ -0,0 +1,26 @@
+import {useContext} from 'react'
+
+import {getLayerContext} from './getLayerContext'
+import {LayerContext} from './layerContext'
+import {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/ui/utils/portal/portal.test.tsx

@@ -0,0 +1,103 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {PortalContext} from './portalContext'
+import {PortalContextValue} from './types'
+import {usePortal} from './usePortal'
+
+describe('utils/portal', () => {
+  describe('usePortal', () => {
+    it('should get context value', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        const rootPortal = usePortal()
+
+        log(rootPortal)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: PortalContextValue = {
+          version: 0.0,
+          boundaryElement: null,
+          element: null,
+        }
+
+        return (
+          <PortalContext.Provider value={value}>
+            <Debug />
+          </PortalContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].boundaryElement).toBe(null)
+      expect(log.mock.calls[0][0].element).toBe(null)
+    })
+
+    it('should fail when no context value is provided', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        try {
+          usePortal()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        const value = undefined
+
+        return (
+          <PortalContext.Provider value={value as any}>
+            <Debug />
+          </PortalContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual('usePortal(): missing context value')
+    })
+
+    it('should fail when context value is not compatible', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        try {
+          usePortal()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        // NOTE: we’re testing this because the context value may be a function in the future
+        const value = () => {
+          return {version: 1}
+        }
+
+        return (
+          <PortalContext.Provider value={value as any}>
+            <Debug />
+          </PortalContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'usePortal(): the context value is not compatible',
+      )
+    })
+  })
+})

package/src/ui/utils/portal/portal.ts

@@ -0,0 +1,46 @@
+import {createElement, ReactNode, ReactPortal} from 'react'
+import {createPortal} from 'react-dom'
+
+import {CardProvider, useCard} from '../../primitives'
+import {usePortal} from './usePortal'
+
+/**
+ * @public
+ */
+export interface PortalProps {
+  children: ReactNode
+  /**
+   * @beta This API might change. DO NOT USE IN PRODUCTION.
+   */
+  __unstable_name?: string
+}
+
+/**
+ * @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
+
+  if (!portalElement) {
+    return null
+  }
+
+  return createPortal(
+    createElement(
+      CardProvider,
+      {
+        rendered: true,
+        tone: 'transparent', // card?.tone || 'default',
+        scheme: card?.scheme || 'light',
+      },
+      children,
+    ),
+    portalElement,
+  )
+}
+
+Portal.displayName = 'Portal'