@sanity/ui 2.3.6-canary.6 → 2.3.6

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

@@ -1,8 +1,8 @@
-import {createContext, useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import {useMediaIndex} from '../../hooks'
-import {_getArrayProp} from '../../styles'
+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'
 
 /**
  * @public
@@ -20,15 +20,15 @@ export function LayerProvider(props: LayerProviderProps): React.ReactElement {
 
   // Get parent context values
   const parentContextValue = useContext(LayerContext)
-  const parentRegisterChild = useContext(LayerContextRegisterChild)
   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 = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp])
+  const zOffset = useArrayProp(zOffsetProp)
 
   // Get responsive z-index value
   const maxMediaIndex = zOffset.length - 1
@@ -36,36 +36,51 @@ export function LayerProvider(props: LayerProviderProps): React.ReactElement {
   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 [childLayers, setChildLayers] = useState<Record<number, number>>({})
-  // A memo value that is used to keep track of the number of child levels
-  const size = useMemo(() => Object.keys(childLayers).length, [childLayers])
+  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) => {
+    (childLevel?: number) => {
       // Register child layers to the parent layer
       const parentDispose = parentRegisterChild?.(childLevel)
 
-      setChildLayers((state) => {
-        const prevLen = state[childLevel] ?? 0
-        const nextState = {...state, [childLevel]: prevLen + 1}
-
-        return nextState
-      })
-
-      return () => {
+      if (childLevel !== undefined) {
         setChildLayers((state) => {
-          const nextState = {...state}
+          const prevLen = state[childLevel] ?? 0
+          const nextState = {...state, [childLevel]: prevLen + 1}
 
-          if (nextState[childLevel] === 1) {
-            delete nextState[childLevel]
-          } else {
-            nextState[childLevel] -= 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?.()
       }
@@ -76,24 +91,17 @@ export function LayerProvider(props: LayerProviderProps): React.ReactElement {
   // Register this layer on mount
   useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild])
 
-  const value = useMemo(
+  const value: LayerContextValue = useMemo(
     () => ({
-      version: 0.0 as const,
+      version: 0.0,
       isTopLayer,
       level,
+      registerChild,
       size,
       zIndex,
     }),
-    [isTopLayer, level, size, zIndex],
+    [isTopLayer, level, registerChild, size, zIndex],
   )
 
-  return (
-    <LayerContext.Provider value={value}>
-      <LayerContextRegisterChild.Provider value={registerChild}>
-        {children}
-      </LayerContextRegisterChild.Provider>
-    </LayerContext.Provider>
-  )
+  return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
 }
-
-const LayerContextRegisterChild = createContext<((childLevel: number) => () => void) | null>(null)

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

@@ -3,6 +3,7 @@ export interface LayerContextValue {
   version: 0.0
   isTopLayer: boolean
   level?: number
+  registerChild: (childLevel?: number) => () => void
   size: number
   zIndex: number
 }