@sanity/ui 2.3.7-canary.0 → 2.4.0

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 =

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)
     })

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
 }