@sanity/ui 2.3.6-canary.6 → 2.3.6

package/src/core/primitives/grid/grid.tsx

@@ -1,6 +1,6 @@
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 import {ResponsiveGridProps} from '../types'
@@ -24,28 +24,19 @@ export const Grid = forwardRef(function Grid(
   const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
     props
 
-  const $autoRows = useMemo(() => _getArrayProp(autoRows), [autoRows])
-  const $autoCols = useMemo(() => _getArrayProp(autoCols), [autoCols])
-  const $autoFlow = useMemo(() => _getArrayProp(autoFlow), [autoFlow])
-  const $columns = useMemo(() => _getArrayProp(columns), [columns])
-  const $gap = useMemo(() => _getArrayProp(gap), [gap])
-  const $gapX = useMemo(() => _getArrayProp(gapX), [gapX])
-  const $gapY = useMemo(() => _getArrayProp(gapY), [gapY])
-  const $rows = useMemo(() => _getArrayProp(rows), [rows])
-
   return (
     <Root
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Grid"
       {...restProps}
-      $autoRows={$autoRows}
-      $autoCols={$autoCols}
-      $autoFlow={$autoFlow}
-      $columns={$columns}
-      $gap={$gap}
-      $gapX={$gapX}
-      $gapY={$gapY}
-      $rows={$rows}
+      $autoRows={useArrayProp(autoRows)}
+      $autoCols={useArrayProp(autoCols)}
+      $autoFlow={useArrayProp(autoFlow)}
+      $columns={useArrayProp(columns)}
+      $gap={useArrayProp(gap)}
+      $gapX={useArrayProp(gapX)}
+      $gapY={useArrayProp(gapY)}
+      $rows={useArrayProp(rows)}
       forwardedAs={as}
       ref={ref}
     >

package/src/core/primitives/heading/heading.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,
@@ -62,9 +62,6 @@ export const Heading = forwardRef(function Heading(
     ...restProps
   } = props
 
-  const $size = useMemo(() => _getArrayProp(size), [size])
-  const $align = useMemo(() => _getArrayProp(align), [align])
-
   let children = childrenProp
 
   if (textOverflow === 'ellipsis') {
@@ -76,9 +73,9 @@ export const Heading = forwardRef(function Heading(
       data-ui="Heading"
       {...restProps}
       $accent={accent}
-      $align={$align}
-      $size={$size}
+      $align={useArrayProp(align)}
       $muted={muted}
+      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

package/src/core/primitives/inline/inline.tsx

@@ -1,6 +1,6 @@
 import {forwardRef, useMemo, Children} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
@@ -26,7 +26,6 @@ export const Inline = forwardRef(function Inline(
 ) {
   const {as, children: childrenProp, space, ...restProps} = props
 
-  const $space = useMemo(() => _getArrayProp(space), [space])
   const children = useMemo(
     () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
     [childrenProp],
@@ -36,7 +35,7 @@ export const Inline = forwardRef(function Inline(
     <Root
       data-ui="Inline"
       {...restProps}
-      $space={$space}
+      $space={useArrayProp(space)}
       forwardedAs={as}
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref={ref as any}

package/src/core/primitives/kbd/kbd.tsx

@@ -1,6 +1,6 @@
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled, css} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Radius} from '../../types'
 import {Box} from '../box'
@@ -46,10 +46,9 @@ export const KBD = forwardRef(function KBD(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
-  const $radius = useMemo(() => _getArrayProp(radius), [radius])
 
   return (
-    <Root data-ui="KBD" {...restProps} $radius={$radius} ref={ref}>
+    <Root data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
       <Box as="span" padding={padding}>
         <Text as="span" size={fontSize} weight="semibold">
           {children}

package/src/core/primitives/label/label.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'
@@ -59,9 +59,6 @@ export const Label = forwardRef(function Label(
     ...restProps
   } = props
 
-  const $size = useMemo(() => _getArrayProp(size), [size])
-  const $align = useMemo(() => _getArrayProp(align), [align])
-
   let children = childrenProp
 
   if (textOverflow === 'ellipsis') {
@@ -75,9 +72,9 @@ export const Label = forwardRef(function Label(
       data-ui="Label"
       {...restProps}
       $accent={accent}
-      $align={$align}
-      $size={$size}
+      $align={useArrayProp(align)}
       $muted={muted}
+      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

package/src/core/primitives/popover/popover.tsx

@@ -23,9 +23,8 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import {useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
+import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
-import {_getArrayProp} from '../../styles'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {
@@ -66,7 +65,6 @@ export interface PopoverProps
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
-  /** @deprecated Use `referenceElement` instead */
   children?: React.ReactElement
   /**
    * When `true`, prevent overflow within the current boundary:
@@ -133,14 +131,15 @@ export const Popover = memo(
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
-      boundaryElement: _boundaryElement,
-      children: _children,
+      boundaryElement = boundaryElementContext.element,
+      children: childProp,
       constrainSize = false,
       content,
       disabled,
-      fallbackPlacements: _fallbackPlacements,
+      fallbackPlacements = props.fallbackPlacements ??
+        DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
-      floatingBoundary: _floatingBoundary,
+      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -150,32 +149,24 @@ export const Popover = memo(
       portal,
       preventOverflow = true,
       radius: radiusProp = 3,
-      referenceBoundary: _referenceBoundary,
+      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      zOffset: _zOffset,
+      zOffset: zOffsetProp = layer.popover.zOffset,
       updateRef,
       ...restProps
     } = props
-    const boundaryElement = _boundaryElement ?? boundaryElementContext.element
-    const referenceBoundary =
-      _referenceBoundary ?? props.boundaryElement ?? boundaryElementContext.element
-    const floatingBoundary =
-      _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element
-    const fallbackPlacements =
-      _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
-    const zOffsetProp = _zOffset ?? layer.popover.zOffset
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
     const boundarySize = useElementSize(boundaryElement)?.border
-    const padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
-    const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
-    const shadow = useMemo(() => _getArrayProp(shadowProp), [shadowProp])
-    const widthArrayProp = _getArrayProp(widthProp)
-    const zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp])
+    const padding = useArrayProp(paddingProp)
+    const radius = useArrayProp(radiusProp)
+    const shadow = useArrayProp(shadowProp)
+    const widthArrayProp = useArrayProp(widthProp)
+    const zOffset = useArrayProp(zOffsetProp)
     const ref = useRef<HTMLDivElement | null>(null)
     const arrowRef = useRef<HTMLDivElement | null>(null)
     const rootBoundary: RootBoundary = 'viewport'
@@ -364,26 +355,45 @@ export const Popover = memo(
       [refs],
     )
 
-    useImperativeHandle(updateRef, () => update, [update])
+    const setReference = useCallback(
+      (node: HTMLElement | null) => {
+        refs.setReference(node)
 
-    useEffect(() => {
-      if (_children) return
-      refs.setReference(referenceElement || null)
-    }, [_children, referenceElement, refs])
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const childRef = (childProp as any)?.ref
+
+        if (typeof childRef === 'function') {
+          childRef(node)
+        } else if (childRef) {
+          childRef.current = node
+        }
+      },
+      [childProp, refs],
+    )
+
+    const child = useMemo(() => {
+      if (!childProp || referenceElement) return null
+
+      return cloneElement(childProp, {ref: setReference})
+    }, [childProp, referenceElement, setReference])
 
-    const children = useMemo(() => {
-      if (!_children || referenceElement) return null
+    useEffect(() => {
+      if (updateRef) {
+        if (typeof updateRef === 'function') {
+          updateRef(update)
+        } else if (updateRef) {
+          updateRef.current = update
+        }
+      }
+    }, [update, updateRef])
 
-      return cloneElement(_children, {
-        ref: (node: HTMLDivElement | null): void => {
-          logDeprecatedWarning()
-          refs.setReference(node)
-        },
-      })
-    }, [_children, referenceElement, refs])
+    useEffect(() => {
+      if (child) return
+      refs.setReference(referenceElement || null)
+    }, [referenceElement, refs, child])
 
     if (disabled) {
-      return _children || <></>
+      return childProp || <></>
     }
 
     const popover = (
@@ -438,21 +448,11 @@ export const Popover = memo(
           )}
         </ConditionalWrapper>
 
-        {/* the referred element (legacy, use referenceElement instead) */}
-        {children}
+        {/* the referred element */}
+        {child}
       </>
     )
   }),
 )
 
 Popover.displayName = 'Popover'
-
-let didWarn = false
-
-function logDeprecatedWarning() {
-  if (!didWarn) {
-    // eslint-disable-next-line no-console
-    console.warn('Popover: Please use the `referenceElement` prop instead of passing a children.')
-    didWarn = true
-  }
-}

package/src/core/primitives/select/select.tsx

@@ -1,8 +1,7 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {forwardRef, useImperativeHandle, useMemo, useRef} from 'react'
+import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity} from '../../hooks'
-import {_getArrayProp} from '../../styles'
+import {useCustomValidity, useArrayProp} from '../../hooks'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
@@ -60,21 +59,16 @@ export const Select = forwardRef(function Select(
 
   useCustomValidity(ref, customValidity)
 
-  const $fontSize = useMemo(() => _getArrayProp(fontSize), [fontSize])
-  const $padding = useMemo(() => _getArrayProp(padding), [padding])
-  const $radius = useMemo(() => _getArrayProp(radius), [radius])
-  const $space = useMemo(() => _getArrayProp(space), [space])
-
   return (
     <Root data-ui="Select">
       <Input
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-ui="Select"
         {...restProps}
-        $fontSize={$fontSize}
-        $padding={$padding}
-        $radius={$radius}
-        $space={$space}
+        $fontSize={useArrayProp(fontSize)}
+        $padding={useArrayProp(padding)}
+        $radius={useArrayProp(radius)}
+        $space={useArrayProp(space)}
         disabled={disabled || readOnly}
         ref={ref}
       >

package/src/core/primitives/stack/stack.tsx

@@ -1,6 +1,6 @@
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
 
@@ -24,14 +24,13 @@ export const Stack = forwardRef(function Stack(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {as, space, ...restProps} = props
-  const $space = useMemo(() => _getArrayProp(space), [space])
 
   return (
     <Root
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}
-      $space={$space}
+      $space={useArrayProp(space)}
       forwardedAs={as}
       ref={ref}
     />

package/src/core/primitives/text/text.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveTextAlignStyle,
@@ -63,9 +63,6 @@ export const Text = forwardRef(function Text(
     ...restProps
   } = props
 
-  const $size = useMemo(() => _getArrayProp(size), [size])
-  const $align = useMemo(() => _getArrayProp(align), [align])
-
   let children = childrenProp
 
   if (textOverflow === 'ellipsis') {
@@ -77,10 +74,10 @@ export const Text = forwardRef(function Text(
       data-ui="Text"
       {...restProps}
       $accent={accent}
-      $align={$align}
-      $size={$size}
+      $align={useArrayProp(align)}
       $muted={muted}
       ref={ref}
+      $size={useArrayProp(size)}
       $weight={weight}
     >
       <span>{children}</span>

package/src/core/primitives/textArea/textArea.tsx

@@ -1,8 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useImperativeHandle, useMemo, useRef} from 'react'
+import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity} from '../../hooks'
-import {_getArrayProp} from '../../styles'
+import {useCustomValidity, useArrayProp} from '../../hooks'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -81,11 +80,6 @@ export const TextArea = forwardRef(function TextArea(
 
   useCustomValidity(ref, customValidity)
 
-  const $radius = useMemo(() => _getArrayProp(radius), [radius])
-  const $fontSize = useMemo(() => _getArrayProp(fontSize), [fontSize])
-  const $padding = useMemo(() => _getArrayProp(padding), [padding])
-  const $space = useMemo(() => _getArrayProp(0), [])
-
   return (
     <Root data-ui="TextArea">
       <InputRoot>
@@ -94,17 +88,17 @@ export const TextArea = forwardRef(function TextArea(
           data-scheme={rootTheme.scheme}
           data-tone={rootTheme.tone}
           {...restProps}
-          $fontSize={$fontSize}
-          $padding={$padding}
-          $space={$space}
+          $fontSize={useArrayProp(fontSize)}
+          $padding={useArrayProp(padding)}
           $scheme={rootTheme.scheme}
+          $space={useArrayProp(0)}
           $tone={rootTheme.tone}
           $weight={weight}
           disabled={disabled}
           ref={ref}
         />
         <Presentation
-          $radius={$radius}
+          $radius={useArrayProp(radius)}
           $scheme={rootTheme.scheme}
           $tone={rootTheme.tone}
           data-border={border ? '' : undefined}

package/src/core/primitives/textInput/textInput.tsx

@@ -4,8 +4,7 @@ import {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, u
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useCustomValidity} from '../../hooks'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp, useCustomValidity} from '../../hooks'
 import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
@@ -178,10 +177,10 @@ export const TextInput = forwardRef(function TextInput(
 
   const rootTheme = useRootTheme()
 
-  const fontSize = useMemo(() => _getArrayProp(fontSizeProp), [fontSizeProp])
-  const padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
-  const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
-  const space = useMemo(() => _getArrayProp(spaceProp), [spaceProp])
+  const fontSize = useArrayProp(fontSizeProp)
+  const padding = useArrayProp(paddingProp)
+  const radius = useArrayProp(radiusProp)
+  const space = useArrayProp(spaceProp)
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)

package/src/core/primitives/tooltip/tooltip.tsx

@@ -24,10 +24,9 @@ import {
   useImperativeHandle,
 } from 'react'
 import {styled} from 'styled-components'
-import {usePrefersReducedMotion} from '../../hooks'
+import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
-import {_getArrayProp} from '../../styles'
 import {useTheme_v2} from '../../theme'
 import type {Placement} from '../../types'
 import {
@@ -105,31 +104,25 @@ export const Tooltip = forwardRef(function Tooltip(
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
-    boundaryElement: _boundaryElement,
+    boundaryElement = boundaryElementContext?.element,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: _fallbackPlacements,
+    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
+      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset: _zOffset,
+    zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
   } = props
-  const zOffset = _zOffset ?? layer.tooltip.zOffset
-  const fallbackPlacementsProp =
-    _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
-  const boundaryElement = _boundaryElement ?? boundaryElementContext?.element
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
-  const fallbackPlacements = useMemo(
-    () => _getArrayProp(fallbackPlacementsProp),
-    [fallbackPlacementsProp],
-  )
+  const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -298,7 +291,7 @@ export const Tooltip = forwardRef(function Tooltip(
   useEffect(() => {
     if (!showTooltip) return
 
-    const handleWindowMouseMove = (event: MouseEvent) => {
+    function handleWindowMouseMove(event: MouseEvent) {
       if (!referenceElement) return
 
       const isHoveringReference =
@@ -364,6 +357,10 @@ export const Tooltip = forwardRef(function Tooltip(
   )
 
   const childRef = useRef<HTMLElement | null>(null)
+
+  // Merge refs so that any ref we are overriding is called as well
+  useImperativeHandle((childProp as any)?.ref, () => childRef.current)
+
   const child = useMemo(() => {
     if (!childProp) return null
 

package/src/core/theme/themeProvider.tsx

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

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

@@ -21,16 +21,15 @@ export const ElementQuery = forwardRef(function ElementQuery(
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const theme = useTheme_v2()
-  const {children, media: _media, ...restProps} = props
-  const media = _media ?? theme.media
+  const {children, media = theme.media, ...restProps} = props
 
   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 = findMaxBreakpoints(media, width)
-  const min = findMinBreakpoints(media, width)
+  const max = useMemo(() => findMaxBreakpoints(media, width), [media, width])
+  const min = useMemo(() => findMinBreakpoints(media, width), [media, width])
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 

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

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