@sanity/ui 2.8.13 → 2.9.0-canary.1

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

@@ -21,8 +21,10 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
+  useState,
 } from 'react'
 import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
@@ -126,15 +128,14 @@ export const Popover = memo(
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
-      boundaryElement = boundaryElementContext.element,
+      boundaryElement: _boundaryElement,
       children: childProp,
       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,
@@ -144,16 +145,23 @@ 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: _zOffsetProp,
       updateRef,
       ...restProps
     } = props
+    const boundaryElement = _boundaryElement ?? boundaryElementContext.element
+    const fallbackPlacements =
+      _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
+    const floatingBoundary = _floatingBoundary ?? boundaryElement ?? boundaryElementContext.element
+    const referenceBoundary =
+      _referenceBoundary ?? boundaryElement ?? boundaryElementContext.element
+    const zOffsetProp = _zOffsetProp ?? layer.popover.zOffset
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
     const boundarySize = useElementSize(boundaryElement)?.border
@@ -202,7 +210,7 @@ export const Popover = memo(
     const referenceWidthRef = useRef<number>()
 
     // Force apply width & max width to floating element
-    useEffect(() => {
+    useLayoutEffect(() => {
       const floatingElement = ref.current
 
       if (!open || !floatingElement) return
@@ -210,7 +218,7 @@ export const Popover = memo(
       const referenceWidth = referenceWidthRef.current
 
       if (matchReferenceWidth) {
-        if (referenceWidth !== undefined) {
+        if (referenceWidthRef.current !== undefined) {
           floatingElement.style.width = `${referenceWidth}px`
         }
       } else if (width !== undefined) {
@@ -350,36 +358,24 @@ export const Popover = memo(
       [refs],
     )
 
+    const [childElement, setChildElement] = useState<HTMLElement | null>(null)
     const setReference = useCallback(
       (node: HTMLElement | null) => {
         refs.setReference(node)
-
-        const childRef = getElementRef(childProp as any)
-
-        if (typeof childRef === 'function') {
-          childRef(node)
-        } else if (childRef) {
-          childRef.current = node
-        }
+        setChildElement(node)
       },
-      [childProp, refs],
+      [refs],
     )
 
+    useImperativeHandle(getElementRef(childProp as any), () => childElement, [childElement])
+
     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

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

@@ -97,22 +97,25 @@ 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: _fallbackPlacementsProp,
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    zOffset: _zOffset,
     delay,
     ...restProps
   } = props
+  const boundaryElement = _boundaryElement ?? boundaryElementContext?.element
+  const fallbackPlacementsProp =
+    _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
+  const zOffset = _zOffset ?? layer.tooltip.zOffset
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)

package/src/core/theme/themeProvider.tsx

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

package/src/core/utils/portal/portalProvider.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useRef, useSyncExternalStore} from 'react'
+import {useMemo, useState, useSyncExternalStore} from 'react'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
@@ -51,13 +51,13 @@ const emptySubscribe = () => () => {}
  * equality comparison (eg by identity), and only goes one level deep.
  */
 function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
-  const valueRef = useRef<ValueType>(value)
+  const [cachedValue, setCachedValue] = useState(value)
 
-  if (!_isEqual(valueRef.current, value)) {
-    valueRef.current = value
+  if (!_isEqual(cachedValue, value)) {
+    setCachedValue(value)
   }
 
-  return valueRef.current
+  return cachedValue
 }
 
 function _isEqual(objA: Comparable, objB: Comparable): boolean {