@sanity/ui 4.0.0-static.33 → 4.0.0-static.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.33",
+  "version": "4.0.0-static.35",
   "keywords": [
     "react",
     "ui",

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

@@ -5,17 +5,25 @@ import {
   type ResponsiveProp,
 } from '@sanity/ui/css'
 import type {CardTone, ColorScheme, Radius} from '@sanity/ui/theme'
-import {type FocusEvent, type ForwardedRef, type ReactNode, useCallback, useRef} from 'react'
+import {
+  type FocusEvent,
+  type ForwardedRef,
+  type ReactNode,
+  use,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react'
 
 import {Z_OFFSETS} from '../../constants'
 import {isHTMLElement} from '../../helpers/element'
 import {focusFirstDescendant, focusLastDescendant} from '../../helpers/focus'
+import {_getResponsiveProp} from '../../helpers/props'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 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'
@@ -108,10 +116,11 @@ 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 cardRadius = useResponsiveProp(cardRadiusProp)
-  const position = useResponsiveProp(positionProp)
-  const zOffset = useResponsiveProp(zOffsetProp)
+  const boundaryElement = use(BoundaryElementContext)
+  const cardRadius = useMemo(() => _getResponsiveProp(cardRadiusProp), [cardRadiusProp])
+  const position = useMemo(() => _getResponsiveProp(positionProp), [positionProp])
+  const zOffset = useMemo(() => _getResponsiveProp(zOffsetProp), [zOffsetProp])
+
   const preDivRef = useRef<HTMLDivElement | null>(null)
   const postDivRef = useRef<HTMLDivElement | null>(null)
   const cardRef = useRef<HTMLDivElement | null>(null)

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/components/dialog/DialogProvider.tsx

@@ -30,5 +30,5 @@ export function DialogProvider(props: DialogProviderProps): React.JSX.Element {
     [position, zOffset],
   )
 
-  return <DialogContext.Provider value={contextValue}>{children}</DialogContext.Provider>
+  return <DialogContext value={contextValue}>{children}</DialogContext>
 }

package/src/core/components/menu/Menu.test.tsx

@@ -45,9 +45,9 @@ describe('components/menu', () => {
         )
 
         return (
-          <MenuContext.Provider value={value}>
+          <MenuContext value={value}>
             <Debug />
-          </MenuContext.Provider>
+          </MenuContext>
         )
       }
 
@@ -77,12 +77,12 @@ describe('components/menu', () => {
 
       function Root() {
         return (
-          <MenuContext.Provider
+          <MenuContext
             // @ts-expect-error - we want to test the error case
             value={undefined}
           >
             <Debug />
-          </MenuContext.Provider>
+          </MenuContext>
         )
       }
 
@@ -108,12 +108,12 @@ describe('components/menu', () => {
         // NOTE: we’re testing this because the context value may be a function in the future
 
         return (
-          <MenuContext.Provider
+          <MenuContext
             // @ts-expect-error - we want to test the error case
             value={() => ({version: 1})}
           >
             <Debug />
-          </MenuContext.Provider>
+          </MenuContext>
         )
       }
 

package/src/core/components/menu/Menu.tsx

@@ -153,7 +153,7 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
   )
 
   return (
-    <MenuContext.Provider value={value}>
+    <MenuContext value={value}>
       <Box
         data-ui="Menu"
         {...rest}
@@ -169,6 +169,6 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
       >
         <Stack gap={gap}>{children}</Stack>
       </Box>
-    </MenuContext.Provider>
+    </MenuContext>
   )
 }

package/src/core/components/toast/Toast.test.tsx

@@ -26,9 +26,9 @@ describe('components/toast', () => {
         }
 
         return (
-          <ToastContext.Provider value={value}>
+          <ToastContext value={value}>
             <Debug />
-          </ToastContext.Provider>
+          </ToastContext>
         )
       }
 
@@ -53,12 +53,12 @@ describe('components/toast', () => {
 
       function Root() {
         return (
-          <ToastContext.Provider
+          <ToastContext
             // @ts-expect-error - we want to test the error case
             value={undefined}
           >
             <Debug />
-          </ToastContext.Provider>
+          </ToastContext>
         )
       }
 
@@ -84,12 +84,12 @@ describe('components/toast', () => {
         // NOTE: we’re testing this because the context value may be a function in the future
 
         return (
-          <ToastContext.Provider
+          <ToastContext
             // @ts-expect-error - we want to test the error case
             value={() => ({version: 1})}
           >
             <Debug />
-          </ToastContext.Provider>
+          </ToastContext>
         )
       }
 

package/src/core/components/toast/ToastProvider.tsx

@@ -86,7 +86,7 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
   }, [])
 
   return (
-    <ToastContext.Provider value={value}>
+    <ToastContext value={value}>
       {children}
       {mounted && (
         <LayerProvider zOffset={zOffset}>
@@ -107,6 +107,6 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
           </ToastLayer>
         </LayerProvider>
       )}
-    </ToastContext.Provider>
+    </ToastContext>
   )
 }

package/src/core/components/tree/Tree.tsx

@@ -231,7 +231,7 @@ export function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
   }, [children])
 
   return (
-    <TreeContext.Provider value={contextValue}>
+    <TreeContext value={contextValue}>
       <Stack
         as="ul"
         data-ui="Tree"
@@ -244,6 +244,6 @@ export function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
       >
         {children}
       </Stack>
-    </TreeContext.Provider>
+    </TreeContext>
   )
 }

package/src/core/components/tree/TreeItem.tsx

@@ -195,9 +195,9 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
           {content}
         </Selectable>
 
-        <TreeContext.Provider value={contextValue}>
+        <TreeContext value={contextValue}>
           {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
-        </TreeContext.Provider>
+        </TreeContext>
       </Box>
     )
   }
@@ -232,9 +232,9 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
         {content}
       </Selectable>
 
-      <TreeContext.Provider value={contextValue}>
+      <TreeContext value={contextValue}>
         {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
-      </TreeContext.Provider>
+      </TreeContext>
     </Box>
   )
 }

package/src/core/helpers/props.ts

@@ -4,15 +4,6 @@ import {EMPTY_ARRAY} from '../constants'
 import {isArray} from '../lib/isArray'
 import {isRecord} from '../lib/isRecord'
 
-/**
- * @internal
- */
-export function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
-  if (val === undefined) return defaultVal || EMPTY_ARRAY
-
-  return Array.isArray(val) ? val : [val]
-}
-
 /**
  * @internal
  */

package/src/core/hooks/useResponsiveProp.ts

@@ -1,28 +1,15 @@
 import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
-import {useState} from 'react'
+import {useMemo} from 'react'
 
 import {_getResponsiveProp} from '../helpers/props'
 
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @internal
+ * @deprecated use `_getResponsiveProp` directly instead, if necessary
  */
 export function useResponsiveProp<T>(
   val: ResponsiveProp<T> | undefined,
   defaultVal?: Partial<Record<Breakpoint, T>>,
 ): Partial<Record<Breakpoint, T>> {
-  const [[cachedVal, cachedHash], setCache] = useState<[Partial<Record<Breakpoint, T>>, string]>(
-    () => [_getResponsiveProp(val, defaultVal), JSON.stringify(val ?? defaultVal)],
-  )
-
-  const hash = JSON.stringify(val ?? defaultVal)
-
-  if (hash !== cachedHash) {
-    // If the cached hash has changed, update the cache right away.
-    // Calling setState during render is fine in this case, and preferred over a useEffect loop
-    // https://19.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-    setCache([_getResponsiveProp(val, defaultVal), hash])
-  }
-
-  return cachedVal
+  return useMemo(() => _getResponsiveProp(val, defaultVal), [defaultVal, val])
 }

package/src/core/index.ts

@@ -42,7 +42,6 @@ export * from './hooks/useMatchMedia'
 export * from './hooks/useMediaIndex/useMediaIndex'
 export * from './hooks/usePrefersDark'
 export * from './hooks/usePrefersReducedMotion'
-export * from './hooks/useResponsiveProp'
 
 // observers
 export * from './observers/elementSize'
@@ -61,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'
@@ -97,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/avatar/Avatar.tsx

@@ -9,7 +9,7 @@ import {
 import type {AvatarColor, AvatarSize, FontLabelSize} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useState} from 'react'
 
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import {_getResponsiveProp} from '../../helpers/props'
 import type {ComponentType, Props} from '../../types'
 import {Box} from '../box/Box'
 import {Label} from '../label/Label'
@@ -61,7 +61,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
     ...rest
   } = props as AvatarProps<typeof DEFAULT_AVATAR_ELEMENT>
 
-  const size = useResponsiveProp(sizeProp)
+  const size = useMemo(() => _getResponsiveProp(sizeProp), [sizeProp])
 
   const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
     animateArrowFrom || arrowPositionProp || 'inside',

package/src/core/primitives/card/CardProvider.tsx

@@ -1,5 +1,5 @@
 import type {CardTone, ColorScheme} from '@sanity/ui/theme'
-import {type ReactNode, useMemo} from 'react'
+import {type ReactNode} from 'react'
 
 import {CardContext} from './CardContext'
 import type {_CardCompatProviderComponent} from './types'
@@ -14,14 +14,5 @@ export function CardProvider(props: {
 }): React.JSX.Element {
   const {children, tone, scheme, unstable_CompatProvider} = props
 
-  return (
-    <CardContext.Provider
-      value={useMemo(
-        () => ({tone, scheme, unstable_CompatProvider}),
-        [tone, scheme, unstable_CompatProvider],
-      )}
-    >
-      {children}
-    </CardContext.Provider>
-  )
+  return <CardContext value={{tone, scheme, unstable_CompatProvider}}>{children}</CardContext>
 }

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/layer/Layer.test.tsx

@@ -30,9 +30,9 @@ describe('primitives/layer', () => {
         }
 
         return (
-          <LayerContext.Provider value={value}>
+          <LayerContext value={value}>
             <Debug />
-          </LayerContext.Provider>
+          </LayerContext>
         )
       }
 
@@ -60,12 +60,12 @@ describe('primitives/layer', () => {
 
       function Root() {
         return (
-          <LayerContext.Provider
+          <LayerContext
             // @ts-expect-error - we want to test the error case
             value={undefined}
           >
             <Debug />
-          </LayerContext.Provider>
+          </LayerContext>
         )
       }
 
@@ -91,12 +91,12 @@ describe('primitives/layer', () => {
         // NOTE: we’re testing this because the context value may be a function in the future
 
         return (
-          <LayerContext.Provider
+          <LayerContext
             // @ts-expect-error - we want to test the error case
             value={() => ({version: 1})}
           >
             <Debug />
-          </LayerContext.Provider>
+          </LayerContext>
         )
       }
 

package/src/core/primitives/layer/LayerProvider.tsx

@@ -1,8 +1,8 @@
 import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
 import {type ReactNode, use, useCallback, useEffect, useMemo, useState} from 'react'
 
+import {_getResponsiveProp} from '../../helpers/props'
 import {useMediaIndex} from '../../hooks/useMediaIndex/useMediaIndex'
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './LayerContext'
 import type {LayerContextValue} from './types'
@@ -27,7 +27,7 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const level = parentLevel + 1
 
   // Get z-index offset
-  const zOffset = useResponsiveProp(zOffsetProp)
+  const zOffset = useMemo(() => _getResponsiveProp(zOffsetProp), [zOffsetProp])
 
   // Get responsive z-index value
   const maxMediaIndex = Object.values(zOffset).length - 1
@@ -102,5 +102,5 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
     [isTopLayer, level, registerChild, size, zIndex],
   )
 
-  return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
+  return <LayerContext value={value}>{children}</LayerContext>
 }

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

@@ -18,6 +18,7 @@ import {
   type ReactElement,
   type ReactNode,
   type Ref,
+  use,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -25,15 +26,16 @@ import {
 } from 'react'
 
 import {Z_OFFSETS} from '../../constants'
+import {_getResponsiveProp} from '../../helpers/props'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 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,14 +191,12 @@ 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
-  const zOffset = useResponsiveProp(zOffsetProp)
+  const zOffset = useMemo(() => _getResponsiveProp(zOffsetProp), [zOffsetProp])
   const ref = useRef<HTMLDivElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'
@@ -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 (
     <>