@sanity/ui 2.3.6-canary.2 → 2.3.6-canary.4

package/src/core/theme/themeProvider.tsx

@@ -27,8 +27,8 @@ export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
   const {children} = props
   const parentTheme = useContext(ThemeContext)
   const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
-  const rootTheme = parentTheme?.theme || null
-  const tone = parentTheme?.tone || 'default'
+  const rootTheme = props.theme ?? (parentTheme?.theme || null)
+  const tone = props.tone ?? (parentTheme?.tone || 'default')
 
   const themeContext: ThemeContextValue | null = useMemo(() => {
     if (!rootTheme) return null

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -21,15 +21,16 @@ export const ElementQuery = forwardRef(function ElementQuery(
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const theme = useTheme_v2()
-  const {children, media = theme.media, ...restProps} = props
+  const {children, media: _media, ...restProps} = props
+  const media = _media ?? theme.media
 
   const ref = useRef<HTMLDivElement | null>(null)
   const [element, setElement] = useState<HTMLDivElement | null>(null)
   const elementSize = useElementSize(element)
   const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
 
-  const max = useMemo(() => findMaxBreakpoints(media, width), [media, width])
-  const min = useMemo(() => findMinBreakpoints(media, width), [media, width])
+  const max = findMaxBreakpoints(media, width)
+  const min = findMinBreakpoints(media, width)
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 

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

@@ -8,9 +8,6 @@ describe('getLayerContext', () => {
         version: 0.0,
         isTopLayer: true,
         level: 0,
-        registerChild: () => () => {
-          //
-        },
         size: 0,
         zIndex: 0,
       }
@@ -21,7 +18,6 @@ describe('getLayerContext', () => {
         version: 0.0,
         isTopLayer: true,
         level: 0,
-        registerChild: expect.any(Function),
         size: 0,
         zIndex: 0,
       })

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

@@ -24,7 +24,6 @@ describe('utils/layer', () => {
           version: 0.0,
           isTopLayer: true,
           level: 0,
-          registerChild: () => () => undefined,
           size: 0,
           zIndex: 0,
         }
@@ -40,7 +39,6 @@ describe('utils/layer', () => {
 
       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)
     })

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

@@ -1,9 +1,8 @@
-import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import {createContext, useCallback, useContext, useEffect, useMemo, useState} from 'react'
 import {useMediaIndex} from '../../hooks'
 import {_getArrayProp} from '../../styles'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
-import {LayerContextValue} from './types'
 
 /**
  * @public
@@ -21,8 +20,8 @@ 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
@@ -37,51 +36,36 @@ 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 [, 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 [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 isTopLayer = size === 0
 
   const registerChild = useCallback(
-    (childLevel?: number) => {
+    (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)
+      setChildLayers((state) => {
+        const prevLen = state[childLevel] ?? 0
+        const nextState = {...state, [childLevel]: prevLen + 1}
 
-          return nextState
-        })
-      } else {
-        // Legacy behavior: if no child level is provided, increment the size by 1
-        setSize((v) => v + 1)
-      }
+        return nextState
+      })
 
       return () => {
-        if (childLevel !== undefined) {
-          setChildLayers((state) => {
-            const nextState = {...state}
-
-            if (nextState[childLevel] === 1) {
-              delete nextState[childLevel]
+        setChildLayers((state) => {
+          const nextState = {...state}
 
-              setSize(Object.keys(nextState).length)
-            } else {
-              nextState[childLevel] -= 1
-            }
+          if (nextState[childLevel] === 1) {
+            delete nextState[childLevel]
+          } else {
+            nextState[childLevel] -= 1
+          }
 
-            return nextState
-          })
-        } else {
-          // Legacy behavior: if no child level is provided, decrement the size by 1
-          setSize((v) => v - 1)
-        }
+          return nextState
+        })
 
         parentDispose?.()
       }
@@ -92,17 +76,24 @@ export function LayerProvider(props: LayerProviderProps): React.ReactElement {
   // Register this layer on mount
   useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild])
 
-  const value: LayerContextValue = useMemo(
+  const value = useMemo(
     () => ({
-      version: 0.0,
+      version: 0.0 as const,
       isTopLayer,
       level,
-      registerChild,
       size,
       zIndex,
     }),
-    [isTopLayer, level, registerChild, size, zIndex],
+    [isTopLayer, level, size, zIndex],
   )
 
-  return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
+  return (
+    <LayerContext.Provider value={value}>
+      <LayerContextRegisterChild.Provider value={registerChild}>
+        {children}
+      </LayerContextRegisterChild.Provider>
+    </LayerContext.Provider>
+  )
 }
+
+const LayerContextRegisterChild = createContext<((childLevel: number) => () => void) | null>(null)

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

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