@sanity/ui 1.1.0-beta.2 → 1.2.0

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
 }

package/src/utils/portal/portalContext.ts

@@ -11,7 +11,7 @@ export const defaultContextValue: PortalContextValue = {
   version: 0.0,
   boundaryElement: null,
   get element() {
-    if (typeof window === 'undefined') {
+    if (typeof document === 'undefined') {
       return null
     }
 

package/src/utils/portal/portalProvider.tsx

@@ -19,7 +19,7 @@ export interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
-const __BROWSER__ = typeof window !== 'undefined'
+const __BROWSER__ = typeof document !== 'undefined'
 
 /**
  * @public