@sanity/ui 1.1.0 → 1.2.1

package/src/helpers/element.ts

@@ -46,3 +46,10 @@ export function isHTMLSelectElement(element: unknown): element is HTMLSelectElem
 export function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement {
   return isHTMLElement(element) && element.nodeName === 'TEXTAREA'
 }
+
+/**
+ * @internal
+ */
+export function containsOrEqualsElement(element: HTMLElement, node: Node): boolean {
+  return element.contains(node) || element === node
+}

package/src/utils/layer/__workshop__/_debug.tsx

@@ -1,11 +1,17 @@
 import {Code, useLayer} from '@sanity/ui'
 
-export function LayerDebugInfo() {
+export function LayerDebugInfo(props: {id?: string}) {
+  const {id} = props
   const layer = useLayer()
 
   return (
-    <Code>
-      zIndex={layer.zIndex}, size={layer.size}
+    <Code id={id}>
+      {[
+        //
+        `isTopLayer=${layer.isTopLayer}`,
+        `size=${layer.size}`,
+        `zIndex=${layer.zIndex}`,
+      ].join('\n')}
     </Code>
   )
 }

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

@@ -6,9 +6,9 @@ export default defineScope({
   title: 'Layer',
   stories: [
     {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./plain')),
+      name: 'nested',
+      title: 'Nested',
+      component: lazy(() => import('./nested')),
     },
     {
       name: 'multiple-roots',

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

@@ -23,8 +23,9 @@ export default function MultipleRootsStory() {
           </Stack>
         </Card>
       </LayerProvider>
+
       <LayerProvider zOffset={200}>
-        <Card as={Layer as any} padding={3} shadow={5} style={{top: -50, left: 30}}>
+        <Card as={Layer} padding={3} shadow={5} style={{top: -50, left: 30}}>
           <Stack space={3}>
             <LayerDebugInfo />
             <Layer>

package/src/utils/layer/__workshop__/{plain.tsx → nested.tsx}

@@ -4,13 +4,23 @@ 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}>
+      <Card radius={2} shadow={1}>
         <Box padding={3}>
           <Text>
             <strong>Root layer</strong>
@@ -18,8 +28,8 @@ export default function PlainStory() {
         </Box>
         <Box padding={3}>
           <Stack space={3}>
-            <LayerDebugInfo />
-            <Button mode="ghost" onClick={handleOpen} text="Open layer 1" />
+            <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} />
@@ -52,7 +62,7 @@ function Layer1({onClose}: {onClose: () => void}) {
       <Box padding={3}>
         <Stack space={3}>
           <LayerDebugInfo />
-          <Button mode="ghost" onClick={handleOpen} text="Open layer 2" />
+          <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} />

package/src/utils/layer/getLayerContext.test.ts

@@ -0,0 +1,30 @@
+import {getLayerContext} from './getLayerContext'
+import {LayerContextValue} from './types'
+
+describe('getLayerContext', () => {
+  describe('0.0', () => {
+    it('should convert 0.0 to 0.0', () => {
+      const contextValue: LayerContextValue = {
+        version: 0.0,
+        isTopLayer: true,
+        level: 0,
+        registerChild: () => () => {
+          //
+        },
+        size: 0,
+        zIndex: 0,
+      }
+
+      const result = getLayerContext(contextValue)
+
+      expect(result).toEqual({
+        version: 0.0,
+        isTopLayer: true,
+        level: 0,
+        registerChild: expect.any(Function),
+        size: 0,
+        zIndex: 0,
+      })
+    })
+  })
+})

package/src/utils/layer/getLayerContext.ts

@@ -0,0 +1,21 @@
+import {isRecord} from '../../lib/isRecord'
+import {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/utils/layer/layer.test.tsx

@@ -22,6 +22,7 @@ describe('utils/layer', () => {
         const value: LayerContextValue = {
           version: 0.0,
           isTopLayer: true,
+          level: 0,
           registerChild: () => () => undefined,
           size: 0,
           zIndex: 0,

package/src/utils/layer/layer.tsx

@@ -1,6 +1,8 @@
-import {forwardRef} from 'react'
+import {FocusEvent, forwardRef, useCallback, useEffect, useRef} from 'react'
 import styled from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
+import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
+import {useForwardedRef} from '../../hooks'
 import {LayerProvider} from './layerProvider'
 import {useLayer} from './useLayer'
 
@@ -9,26 +11,66 @@ import {useLayer} from './useLayer'
  */
 export interface LayerProps {
   as?: React.ElementType | keyof 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 JSX.IntrinsicElements
+  onActivate?: LayerProps['onActivate']
 }
 
-const Root = styled.div`
-  position: relative;
-`
+const Root = styled.div({position: 'relative'})
 
 const LayerChildren = forwardRef(function LayerChildren(
   props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
   ref: React.Ref<HTMLDivElement>
 ) {
-  const {children, style = EMPTY_RECORD, ...restProps} = props
-  const {zIndex} = useLayer()
+  const {children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps} = props
+  const {zIndex, isTopLayer} = useLayer()
+  const lastFocusedRef = useRef<HTMLElement | null>(null)
+  const forwardedRef = useForwardedRef(ref)
+  const isTopLayerRef = useRef<boolean>(isTopLayer)
+
+  // 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 = forwardedRef.current
+      const target = document.activeElement
+
+      if (!isTopLayer || !rootElement || !target) return
+
+      if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {
+        lastFocusedRef.current = target
+      }
+    },
+    [forwardedRef, isTopLayer, onFocus]
+  )
 
   return (
-    <Root {...restProps} data-ui="Layer" ref={ref} style={{...style, zIndex}}>
+    <Root
+      {...restProps}
+      data-ui="Layer"
+      onFocus={handleFocus}
+      ref={forwardedRef}
+      style={{...style, zIndex}}
+    >
       {children}
     </Root>
   )

package/src/utils/layer/layerContext.ts

@@ -1,4 +1,4 @@
-import {createContext} from 'react'
+import {Context, createContext} from 'react'
 import {globalScope} from '../../lib/globalScope'
 import {LayerContextValue} from './types'
 
@@ -6,4 +6,4 @@ const key = Symbol.for('@sanity/ui/context/layer')
 
 globalScope[key] = globalScope[key] || createContext<LayerContextValue | null>(null)
 
-export const LayerContext: React.Context<LayerContextValue | null> = globalScope[key]
+export const LayerContext: Context<LayerContextValue | null> = globalScope[key]

package/src/utils/layer/layerProvider.tsx

@@ -1,5 +1,6 @@
 import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
 import {useMediaIndex, useArrayProp} from '../../hooks'
+import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
 
@@ -16,30 +17,90 @@ export interface LayerProviderProps {
  */
 export function LayerProvider(props: LayerProviderProps): React.ReactElement {
   const {children, zOffset: zOffsetProp = 0} = props
-  const parent = useContext(LayerContext)
+
+  // 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] : zOffset[mediaIndex]
+
+  // 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 registerChild = useCallback(() => {
-    setSize((v) => v + 1)
+  const isTopLayer = size === 0
 
-    return () => setSize((v) => v - 1)
-  }, [])
+  const registerChild = useCallback(
+    (childLevel?: number) => {
+      // Register child layers to the parent layer
+      const parentDispose = parentRegisterChild?.(childLevel)
 
-  const parentRegisterChild = parent?.registerChild
+      if (childLevel !== undefined) {
+        setChildLayers((state) => {
+          const prevLen = state[childLevel] ?? 0
+          const nextState = {...state, [childLevel]: prevLen + 1}
 
-  useEffect(() => {
-    if (!parentRegisterChild) return
+          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]
+  )
 
-    return parentRegisterChild()
-  }, [parentRegisterChild])
+  // Register this layer on mount
+  useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild])
 
   const value: LayerContextValue = useMemo(
-    () => ({version: 0.0, isTopLayer: size === 0, registerChild, size, zIndex}),
-    [size, registerChild, zIndex]
+    () => ({
+      version: 0.0,
+      isTopLayer,
+      level,
+      registerChild,
+      size,
+      zIndex,
+    }),
+    [isTopLayer, level, registerChild, size, zIndex]
   )
 
   return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>

package/src/utils/layer/types.ts

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

package/src/utils/layer/useLayer.ts

@@ -1,5 +1,5 @@
 import {useContext} from 'react'
-import {isRecord} from '../../lib/isRecord'
+import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
 
@@ -13,12 +13,13 @@ export function useLayer(): LayerContextValue {
     throw new Error('useLayer(): missing context value')
   }
 
-  // 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(value) || value.version !== 0.0) {
-    throw new Error('useLayer(): the context value is not compatible')
+  try {
+    return getLayerContext(value)
+  } catch (err) {
+    if (err instanceof Error) {
+      throw new Error(`useLayer(): ${err.message}`)
+    } else {
+      throw new Error(`useLayer(): ${err}`)
+    }
   }
-
-  return value
 }