@sanity/ui 2.3.6 → 2.3.7-canary.0

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

@@ -1,6 +1,6 @@
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 import {ResponsiveGridProps} from '../types'
@@ -24,19 +24,28 @@ 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={useArrayProp(autoRows)}
-      $autoCols={useArrayProp(autoCols)}
-      $autoFlow={useArrayProp(autoFlow)}
-      $columns={useArrayProp(columns)}
-      $gap={useArrayProp(gap)}
-      $gapX={useArrayProp(gapX)}
-      $gapY={useArrayProp(gapY)}
-      $rows={useArrayProp(rows)}
+      $autoRows={$autoRows}
+      $autoCols={$autoCols}
+      $autoFlow={$autoFlow}
+      $columns={$columns}
+      $gap={$gap}
+      $gapX={$gapX}
+      $gapY={$gapY}
+      $rows={$rows}
       forwardedAs={as}
       ref={ref}
     >

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

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,
@@ -62,6 +62,9 @@ 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') {
@@ -73,9 +76,9 @@ export const Heading = forwardRef(function Heading(
       data-ui="Heading"
       {...restProps}
       $accent={accent}
-      $align={useArrayProp(align)}
+      $align={$align}
+      $size={$size}
       $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 {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {Box, BoxProps} from '../box'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
@@ -26,6 +26,7 @@ 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],
@@ -35,7 +36,7 @@ export const Inline = forwardRef(function Inline(
     <Root
       data-ui="Inline"
       {...restProps}
-      $space={useArrayProp(space)}
+      $space={$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} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled, css} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Radius} from '../../types'
 import {Box} from '../box'
@@ -46,9 +46,10 @@ 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={useArrayProp(radius)} ref={ref}>
+    <Root data-ui="KBD" {...restProps} $radius={$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} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'
@@ -59,6 +59,9 @@ 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') {
@@ -72,9 +75,9 @@ export const Label = forwardRef(function Label(
       data-ui="Label"
       {...restProps}
       $accent={accent}
-      $align={useArrayProp(align)}
+      $align={$align}
+      $size={$size}
       $muted={muted}
-      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

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

@@ -23,8 +23,9 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
+import {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 {
@@ -65,6 +66,7 @@ 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:
@@ -131,15 +133,14 @@ export const Popover = memo(
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
-      boundaryElement = boundaryElementContext.element,
-      children: childProp,
+      boundaryElement: _boundaryElement,
+      children: _children,
       constrainSize = false,
       content,
       disabled,
-      fallbackPlacements = props.fallbackPlacements ??
-        DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+      fallbackPlacements: _fallbackPlacements,
       matchReferenceWidth,
-      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      floatingBoundary: _floatingBoundary,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -149,24 +150,32 @@ export const Popover = memo(
       portal,
       preventOverflow = true,
       radius: radiusProp = 3,
-      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      referenceBoundary: _referenceBoundary,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      zOffset: zOffsetProp = layer.popover.zOffset,
+      zOffset: _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 = useArrayProp(paddingProp)
-    const radius = useArrayProp(radiusProp)
-    const shadow = useArrayProp(shadowProp)
-    const widthArrayProp = useArrayProp(widthProp)
-    const zOffset = useArrayProp(zOffsetProp)
+    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 ref = useRef<HTMLDivElement | null>(null)
     const arrowRef = useRef<HTMLDivElement | null>(null)
     const rootBoundary: RootBoundary = 'viewport'
@@ -355,45 +364,26 @@ export const Popover = memo(
       [refs],
     )
 
-    const setReference = useCallback(
-      (node: HTMLElement | null) => {
-        refs.setReference(node)
-
-        // 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])
-
-    useEffect(() => {
-      if (updateRef) {
-        if (typeof updateRef === 'function') {
-          updateRef(update)
-        } else if (updateRef) {
-          updateRef.current = update
-        }
-      }
-    }, [update, updateRef])
+    useImperativeHandle(updateRef, () => update, [update])
 
     useEffect(() => {
-      if (child) return
+      if (_children) return
       refs.setReference(referenceElement || null)
-    }, [referenceElement, refs, child])
+    }, [_children, referenceElement, refs])
+
+    const children = useMemo(() => {
+      if (!_children || referenceElement) return null
+
+      return cloneElement(_children, {
+        ref: (node: HTMLDivElement | null): void => {
+          logDeprecatedWarning()
+          refs.setReference(node)
+        },
+      })
+    }, [_children, referenceElement, refs])
 
     if (disabled) {
-      return childProp || <></>
+      return _children || <></>
     }
 
     const popover = (
@@ -448,11 +438,21 @@ export const Popover = memo(
           )}
         </ConditionalWrapper>
 
-        {/* the referred element */}
-        {child}
+        {/* the referred element (legacy, use referenceElement instead) */}
+        {children}
       </>
     )
   }),
 )
 
 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,7 +1,8 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
+import {forwardRef, useImperativeHandle, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity, useArrayProp} from '../../hooks'
+import {useCustomValidity} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
@@ -59,16 +60,21 @@ 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={useArrayProp(fontSize)}
-        $padding={useArrayProp(padding)}
-        $radius={useArrayProp(radius)}
-        $space={useArrayProp(space)}
+        $fontSize={$fontSize}
+        $padding={$padding}
+        $radius={$radius}
+        $space={$space}
         disabled={disabled || readOnly}
         ref={ref}
       >

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

@@ -1,6 +1,6 @@
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {Box, BoxProps} from '../box'
 import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
 
@@ -24,13 +24,14 @@ 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={useArrayProp(space)}
+      $space={$space}
       forwardedAs={as}
       ref={ref}
     />

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

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

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

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

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

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

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

@@ -24,9 +24,10 @@ import {
   useImperativeHandle,
 } from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import {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 {
@@ -104,25 +105,31 @@ export const Tooltip = forwardRef(function Tooltip(
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
-    boundaryElement = boundaryElementContext?.element,
+    boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
-      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+    fallbackPlacements: _fallbackPlacements,
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    zOffset: _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 = useArrayProp(fallbackPlacementsProp)
+  const fallbackPlacements = useMemo(
+    () => _getArrayProp(fallbackPlacementsProp),
+    [fallbackPlacementsProp],
+  )
   const ref = useRef<HTMLDivElement | null>(null)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -291,7 +298,7 @@ export const Tooltip = forwardRef(function Tooltip(
   useEffect(() => {
     if (!showTooltip) return
 
-    function handleWindowMouseMove(event: MouseEvent) {
+    const handleWindowMouseMove = (event: MouseEvent) => {
       if (!referenceElement) return
 
       const isHoveringReference =

package/src/core/theme/themeProvider.tsx

@@ -24,13 +24,11 @@ export interface ThemeProviderProps {
  * @public
  */
 export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
+  const {children} = props
   const parentTheme = useContext(ThemeContext)
-  const {
-    children,
-    scheme = parentTheme?.scheme || 'light',
-    theme: rootTheme = parentTheme?.theme || null,
-    tone = parentTheme?.tone || 'default',
-  } = props
+  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
+  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)
     })