@sanity/ui 4.0.0-static.34 → 4.0.0-static.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.34",
+  "version": "4.0.0-static.36",
   "keywords": [
     "react",
     "ui",
@@ -119,7 +119,7 @@
     "@sanity/icons": "^3.7.4",
     "@vanilla-extract/dynamic": "^2.1.5",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.19",
+    "framer-motion": "^12.23.21",
     "react-refractor": "^4.0.0",
     "use-effect-event": "^2.0.3"
   },
@@ -196,7 +196,7 @@
     "react-dom": "^19",
     "react-is": "^19"
   },
-  "packageManager": "pnpm@10.17.0",
+  "packageManager": "pnpm@10.17.1",
   "engines": {
     "node": ">=20.19 <22 || >=22.12"
   },

package/src/core/components/dialog/Dialog.tsx

@@ -9,6 +9,7 @@ import {
   type FocusEvent,
   type ForwardedRef,
   type ReactNode,
+  use,
   useCallback,
   useMemo,
   useRef,
@@ -22,7 +23,7 @@ import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {Container} from '../../primitives/container/Container'
 import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer/Layer'
 import type {ComponentType, Props} from '../../types'
-import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
+import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
 import {Portal} from '../../utils/portal/Portal'
 import {usePortal} from '../../utils/portal/usePortal'
 import {DialogCard} from './DialogCard'
@@ -115,7 +116,7 @@ export function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEME
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
-  const boundaryElement = useBoundaryElement().element
+  const boundaryElement = use(BoundaryElementContext)
   const cardRadius = useMemo(() => _getResponsiveProp(cardRadiusProp), [cardRadiusProp])
   const position = useMemo(() => _getResponsiveProp(positionProp), [positionProp])
   const zOffset = useMemo(() => _getResponsiveProp(zOffsetProp), [zOffsetProp])

package/src/core/components/dialog/DialogCard.tsx

@@ -11,6 +11,7 @@ import {
 import {
   type ForwardedRef,
   type ReactNode,
+  use,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -28,7 +29,7 @@ import {Flex} from '../../primitives/flex/Flex'
 import {useLayer} from '../../primitives/layer/useLayer'
 import {Text} from '../../primitives/text/Text'
 import type {Props} from '../../types'
-import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
+import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
 import {usePortal} from '../../utils/portal/usePortal'
 import {isTargetWithinScope} from './isTargetWithinScope'
 
@@ -87,11 +88,10 @@ export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIAL
 
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
-  const boundaryElement = useBoundaryElement().element
+  const boundaryElement = use(BoundaryElementContext)
   const ref = useRef<HTMLDivElement | null>(null)
   const contentRef = useRef<HTMLDivElement | null>(null)
-  const layer = useLayer()
-  const {isTopLayer} = layer
+  const {isTopLayer} = useLayer()
   const labelId = `${id}_label`
   const showCloseButton = Boolean(onClose) && hideCloseButton === false
   const showHeader = Boolean(header) || showCloseButton

package/src/core/index.ts

@@ -60,7 +60,7 @@ export * from './primitives/button/types'
 export * from './primitives/card/Card'
 export * from './primitives/card/CardProvider'
 export * from './primitives/card/types'
-export * from './primitives/card/useCard'
+export {useCard} from './primitives/card/useCard'
 export * from './primitives/checkbox/Checkbox'
 export * from './primitives/code/Code'
 export * from './primitives/container/Container'
@@ -96,18 +96,18 @@ export * from './primitives/tooltip/Tooltip'
 export * from './primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupContext'
 export * from './primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupProvider'
 export * from './primitives/tooltip/tooltipDelayGroup/types'
-export * from './primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup'
+export {useTooltipDelayGroup} from './primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup'
 
 // utils
 export * from './utils/boundaryElement/BoundaryElementProvider'
 export * from './utils/boundaryElement/types'
-export * from './utils/boundaryElement/useBoundaryElement'
+export {useBoundaryElement} from './utils/boundaryElement/useBoundaryElement'
 export * from './utils/elementQuery/ElementQuery'
 export * from './utils/ErrorBoundary'
 export * from './utils/portal/Portal'
 export * from './utils/portal/PortalProvider'
 export * from './utils/portal/types'
-export * from './utils/portal/usePortal'
+export {usePortal} from './utils/portal/usePortal'
 
 // root
 export * from './Root'

package/src/core/primitives/card/useCard.ts

@@ -7,9 +7,14 @@ import type {CardContextValue} from './types'
 export function useCard(): CardContextValue {
   const card = use(CardContext)
 
-  if (!card) {
-    throw new Error('useCard(): missing context value')
-  }
+  assertCardContext(card)
 
   return card
 }
+
+/** @internal */
+export function assertCardContext(card: CardContextValue | null): asserts card is CardContextValue {
+  if (!card) {
+    throw new Error('useCard(): missing context value', {cause: card})
+  }
+}

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

@@ -18,6 +18,7 @@ import {
   type ReactElement,
   type ReactNode,
   type Ref,
+  use,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -29,11 +30,12 @@ import {_getResponsiveProp} from '../../helpers/props'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Placement, Props} from '../../types'
-import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
+import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
 import {getElementRef} from '../../utils/getElementRef'
 import {Portal} from '../../utils/portal/Portal'
+import {CardContext} from '../card/CardContext'
 import {CardProvider} from '../card/CardProvider'
-import {useCard} from '../card/useCard'
+import {assertCardContext} from '../card/useCard'
 import {type LayerOwnProps} from '../layer/Layer'
 import {useLayer} from '../layer/useLayer'
 import {
@@ -153,8 +155,6 @@ function ViewportOverlay() {
 export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_ELEMENT>(
   props: PopoverProps<E>,
 ): React.JSX.Element {
-  const boundaryElementContext = useBoundaryElement()
-
   const {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
     animate: _animate = false,
@@ -191,10 +191,8 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
   } = props as PopoverProps<typeof DEFAULT_POPOVER_ELEMENT>
   const fallbackPlacements =
     _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
-  const floatingBoundary = _floatingBoundary ?? boundaryElementContext.element
-  const referenceBoundary = _referenceBoundary ?? boundaryElementContext.element
-
-  const card = useCard()
+  const floatingBoundary = _floatingBoundary ?? use(BoundaryElementContext)
+  const referenceBoundary = _referenceBoundary ?? use(BoundaryElementContext)
 
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
@@ -309,17 +307,24 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     </>
   )
 
-  const children =
-    open &&
-    (portal ? (
+  let children = open ? node : null
+
+  if (open && portal) {
+    let resolvedTone = tone as Exclude<typeof tone, 'inherit'>
+    if (tone === 'inherit') {
+      const card = use(CardContext)
+      assertCardContext(card)
+      resolvedTone = card.tone
+    }
+
+    children = (
       <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
+        <CardProvider tone={resolvedTone} scheme={scheme ?? 'light'}>
           {node}
         </CardProvider>
       </Portal>
-    ) : (
-      node
-    ))
+    )
+  }
 
   return (
     <>

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

@@ -19,6 +19,7 @@ import {
   type ReactElement,
   type ReactNode,
   type RefAttributes,
+  use,
   useCallback,
   useEffect,
   useId,
@@ -35,20 +36,21 @@ import {useDelayedState} from '../../hooks/useDelayedState'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Delay, Placement, Props} from '../../types'
-import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
+import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
 import {getElementRef} from '../../utils/getElementRef'
 import {Portal} from '../../utils/portal/Portal'
-import {usePortal} from '../../utils/portal/usePortal'
+import {PortalContext} from '../../utils/portal/PortalContext'
+import {assertPortalContext} from '../../utils/portal/usePortal'
+import {CardContext} from '../card/CardContext'
 import {CardProvider} from '../card/CardProvider'
-import {useCard} from '../card/useCard'
+import {assertCardContext} from '../card/useCard'
 import type {LayerOwnProps} from '../layer/Layer'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
-import {useTooltipDelayGroup} from './tooltipDelayGroup/useTooltipDelayGroup'
-// import {useTooltipDelayGroup} from './TooltipDelayGroup'
+import {TooltipDelayGroupContext} from './tooltipDelayGroup/TooltipDelayGroupContext'
 import {TooltipLayer} from './TooltipLayer'
 
 /** @public */
@@ -106,8 +108,6 @@ export type TooltipProps<E extends TooltipElementType = TooltipElementType> = Pr
 export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
   props: TooltipProps<E>,
 ): React.JSX.Element {
-  const boundaryElementContext = useBoundaryElement()
-
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
@@ -130,11 +130,10 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     tone = 'inherit',
     ...rest
   } = props as TooltipProps<typeof DEFAULT_TOOLTIP_ELEMENT>
-  const boundaryElement = _boundaryElement ?? boundaryElementContext?.element
+  const boundaryElement = _boundaryElement ?? use(BoundaryElementContext)
   const fallbackPlacements =
     _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
 
-  const card = useCard()
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const ref = useRef<HTMLDivElement | null>(null)
@@ -145,9 +144,13 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
-  const portal = usePortal()
-  const portalElement =
-    typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
+  let portalElement: HTMLElement | null = null
+  if (portalProp) {
+    const portal = use(PortalContext)
+    assertPortalContext(portal)
+    portalElement =
+      typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
+  }
 
   const middleware = useMiddleware({
     animate,
@@ -174,7 +177,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
 
   const tooltipId = useId()
   const [isOpen, setIsOpen] = useDelayedState(false)
-  const delayGroupContext = useTooltipDelayGroup()
+  const delayGroupContext = use(TooltipDelayGroupContext)
   const {setIsGroupActive, setOpenTooltipId} = delayGroupContext || {}
   const showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId
 
@@ -385,17 +388,24 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     </TooltipLayer>
   )
 
-  const children =
-    showTooltip &&
-    (portalProp ? (
+  let children = showTooltip ? node : null
+
+  if (showTooltip && portalProp) {
+    let resolvedTone = tone as Exclude<typeof tone, 'inherit'>
+    if (tone === 'inherit') {
+      const card = use(CardContext)
+      assertCardContext(card)
+      resolvedTone = card.tone
+    }
+
+    children = (
       <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
+        <CardProvider tone={resolvedTone} scheme={scheme ?? 'light'}>
           {node}
         </CardProvider>
       </Portal>
-    ) : (
-      node
-    ))
+    )
+  }
 
   return (
     <>

package/src/core/utils/boundaryElement/BoundaryElementContext.ts

@@ -3,8 +3,5 @@ import type {Context} from 'react'
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import type {BoundaryElementContextValue} from './types'
 
-export const BoundaryElementContext: Context<BoundaryElementContextValue | null> =
-  createGlobalScopedContext<BoundaryElementContextValue | null>(
-    '@sanity/ui/v4/boundaryElement',
-    null,
-  )
+export const BoundaryElementContext: Context<BoundaryElementContextValue> =
+  createGlobalScopedContext<BoundaryElementContextValue>('@sanity/ui/v4/boundaryElement', null)

package/src/core/utils/boundaryElement/BoundaryElementProvider.tsx

@@ -1,7 +1,6 @@
-import {type ReactNode, useMemo} from 'react'
+import {type ReactNode} from 'react'
 
 import {BoundaryElementContext} from './BoundaryElementContext'
-import type {BoundaryElementContextValue} from './types'
 
 /** @public */
 export interface BoundaryElementProviderProps {
@@ -12,7 +11,6 @@ export interface BoundaryElementProviderProps {
 /** @public */
 export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
   const {children, element} = props
-  const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
 
-  return <BoundaryElementContext value={value}>{children}</BoundaryElementContext>
+  return <BoundaryElementContext value={element}>{children}</BoundaryElementContext>
 }

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

@@ -1,5 +1,2 @@
 /** @public */
-export interface BoundaryElementContextValue {
-  version: 0.0
-  element: HTMLElement | null
-}
+export type BoundaryElementContextValue = HTMLElement | null

package/src/core/utils/boundaryElement/useBoundaryElement.ts

@@ -1,24 +1,12 @@
-import {use} from 'react'
+import {use, useMemo} from 'react'
 
-import {isRecord} from '../../lib/isRecord'
 import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 
-const DEFAULT_VALUE: BoundaryElementContextValue = {
-  version: 0.0,
-  element: null,
-}
-
 /** @public */
-export function useBoundaryElement(): BoundaryElementContextValue {
-  const value = use(BoundaryElementContext)
-
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (value && (!isRecord(value) || value.version !== 0.0)) {
-    throw new Error('useBoundaryElement(): the context value is not compatible')
-  }
-
-  return value || DEFAULT_VALUE
+export function useBoundaryElement(): {version: 0.0; element: BoundaryElementContextValue} {
+  // eslint-disable-next-line no-warning-comments
+  // @TODO this wrapping is for BC and should be removed
+  const element = use(BoundaryElementContext)
+  return useMemo(() => ({version: 0.0, element}), [element])
 }

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

@@ -1,8 +1,9 @@
-import type {ReactNode, ReactPortal} from 'react'
+import {type ReactNode, type ReactPortal, use} from 'react'
 import {createPortal} from 'react-dom'
 
+import {CardContext} from '../../primitives/card/CardContext'
 import {CardProvider} from '../../primitives/card/CardProvider'
-import {useCard} from '../../primitives/card/useCard'
+import {assertCardContext} from '../../primitives/card/useCard'
 import {usePortal} from './usePortal'
 
 /** @public */
@@ -17,7 +18,6 @@ export interface PortalProps {
 /** @public */
 export function Portal(props: PortalProps): ReactPortal | null {
   const {children, __unstable_name: name} = props
-  const card = useCard()
   const portal = usePortal()
   const portalElement =
     (name ? portal.elements && portal.elements[name] : portal.element) ||
@@ -27,6 +27,9 @@ export function Portal(props: PortalProps): ReactPortal | null {
     return null
   }
 
+  const card = use(CardContext)
+  assertCardContext(card)
+
   return createPortal(
     <CardProvider tone="transparent" scheme={card.scheme}>
       {children}

package/src/core/utils/portal/usePortal.ts

@@ -8,6 +8,15 @@ import type {PortalContextValue} from './types'
 export function usePortal(): PortalContextValue {
   const value = use(PortalContext)
 
+  assertPortalContext(value)
+
+  return value
+}
+
+/** @internal */
+export function assertPortalContext(
+  value: PortalContextValue | null,
+): asserts value is PortalContextValue {
   if (!value) {
     throw new Error('usePortal(): missing context value')
   }
@@ -18,6 +27,4 @@ export function usePortal(): PortalContextValue {
   if (!isRecord(value) || value.version !== 0.0) {
     throw new Error('usePortal(): the context value is not compatible')
   }
-
-  return value
 }

package/src/core/utils/boundaryElement/BoundaryElement.test.tsx

@@ -1,102 +0,0 @@
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '$test/utils'
-
-import {BoundaryElementContext} from './BoundaryElementContext'
-import type {BoundaryElementContextValue} from './types'
-import {useBoundaryElement} from './useBoundaryElement'
-
-describe('utils/boundaryElement', () => {
-  describe('useBoundaryElement', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootBoundaryElement = useBoundaryElement()
-
-        log(rootBoundaryElement)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: BoundaryElementContextValue = {
-          version: 0.0,
-          element: null,
-        }
-
-        return (
-          <BoundaryElementContext value={value}>
-            <Debug />
-          </BoundaryElementContext>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].element).toBe(null)
-    })
-
-    it('should provide default value when no context value is provided', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootBoundaryElement = useBoundaryElement()
-
-        log(rootBoundaryElement)
-
-        return null
-      }
-
-      function Root() {
-        return (
-          <BoundaryElementContext
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <Debug />
-          </BoundaryElementContext>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].element).toBe(null)
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useBoundaryElement()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-
-        return (
-          <BoundaryElementContext
-            // @ts-expect-error - we want to test the error case
-            value={() => ({version: 1})}
-          >
-            <Debug />
-          </BoundaryElementContext>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useBoundaryElement(): the context value is not compatible',
-      )
-    })
-  })
-})