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

package/package.json

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

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

@@ -5,13 +5,20 @@ 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,
+  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'
@@ -109,9 +116,10 @@ export function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEME
   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 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/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'

package/src/core/lib/createGlobalScopedContext.ts

@@ -25,7 +25,9 @@ export function createGlobalScopedContext<ContextType, const T extends ContextTy
    * Prevent errors about re-renders on React SSR on Next.js App Router
    */
   if (typeof document === 'undefined') {
-    return createContext<ContextType>(defaultValue)
+    const context = createContext<ContextType>(defaultValue)
+    context.displayName = key
+    return context
   }
 
   // Use the global scope as a map of symbols to contexts

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/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

@@ -25,8 +25,8 @@ 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'
@@ -198,7 +198,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
 
   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'

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

@@ -23,8 +23,8 @@ import {
 import {isValidElementType} from 'react-is'
 
 import {EMPTY_RECORD} from '../../constants'
+import {_getResponsiveProp} from '../../helpers/props'
 import {useCustomValidity} from '../../hooks/useCustomValidity'
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {isRecord} from '../../lib/isRecord'
 import type {ComponentType, Props} from '../../types'
 import {Box} from '../box/Box'
@@ -107,7 +107,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
 
   const ref = useRef<HTMLInputElement | null>(null)
 
-  const responsivePadding = useResponsiveProp(padding)
+  const responsivePadding = useMemo(() => _getResponsiveProp(padding), [padding])
 
   const withClearButton = Boolean(clearButton)
 
@@ -137,35 +137,6 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     [onClear, ref],
   )
 
-  const clearButtonBoxPadding = useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(responsivePadding).map(([key, value]) => {
-        if (value === 0) return [key, 0]
-        if (value === 1) return [key, 1]
-        if (value === 2) return [key, 1]
-
-        return [key, typeof value === 'number' ? value - 2 : 0]
-      }),
-    ) as ResponsiveProp<Space>
-  }, [responsivePadding])
-
-  const clearButtonPadding = useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(responsivePadding).map(([key, value]) => {
-        if (value === 0) return [key, 0]
-        if (value === 1) return [key, 0]
-        if (value === 2) return [key, 1]
-
-        return [key, typeof value === 'number' ? value - 1 : 0]
-      }),
-    ) as ResponsiveProp<Space>
-  }, [responsivePadding])
-
-  const clearButtonProps: TextInputClearButtonProps = useMemo(
-    () => (isRecord(clearButton) ? clearButton : EMPTY_RECORD),
-    [clearButton],
-  )
-
   return (
     <span
       className={textInput({
@@ -224,28 +195,14 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
         </span>
 
         {!disabled && !readOnly && clearButton && (
-          <Box
-            as="span"
-            insetTop={0}
-            insetRight={0}
-            padding={clearButtonBoxPadding}
-            position="absolute"
-            style={{zIndex: 2}}
-          >
-            <Button
-              aria-label="Clear"
-              data-qa="clear-button"
-              display="block"
-              fontSize={fontSize}
-              icon={CloseIcon}
-              mode="bleed"
-              padding={clearButtonPadding}
-              radius={radius}
-              {...clearButtonProps}
-              onClick={handleClearClick}
-              onMouseDown={handleClearMouseDown}
-            />
-          </Box>
+          <ClearButton
+            fontSize={fontSize}
+            radius={radius}
+            clearButtonProps={isRecord(clearButton) ? clearButton : EMPTY_RECORD}
+            handleClearClick={handleClearClick}
+            handleClearMouseDown={handleClearMouseDown}
+            padding={responsivePadding}
+          />
         )}
       </span>
 
@@ -257,3 +214,66 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     </span>
   )
 }
+
+function ClearButton({
+  fontSize,
+  radius,
+  clearButtonProps,
+  handleClearClick,
+  handleClearMouseDown,
+  padding,
+}: {
+  clearButtonProps: TextInputClearButtonProps
+  handleClearClick: (event: MouseEvent<HTMLButtonElement>) => void
+  handleClearMouseDown: (event: MouseEvent<HTMLButtonElement>) => void
+  padding: ResponsiveProp<Space>
+} & Pick<TextInputOwnProps, 'fontSize' | 'radius'>) {
+  const clearButtonBoxPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(padding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 1]
+        if (value === 2) return [key, 1]
+
+        return [key, typeof value === 'number' ? value - 2 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [padding])
+
+  const clearButtonPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(padding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 0]
+        if (value === 2) return [key, 1]
+
+        return [key, typeof value === 'number' ? value - 1 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [padding])
+
+  return (
+    <Box
+      as="span"
+      insetTop={0}
+      insetRight={0}
+      padding={clearButtonBoxPadding}
+      position="absolute"
+      style={{zIndex: 2}}
+    >
+      <Button
+        aria-label="Clear"
+        data-qa="clear-button"
+        display="block"
+        fontSize={fontSize}
+        icon={CloseIcon}
+        mode="bleed"
+        padding={clearButtonPadding}
+        radius={radius}
+        {...clearButtonProps}
+        onClick={handleClearClick}
+        onMouseDown={handleClearMouseDown}
+      />
+    </Box>
+  )
+}

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

@@ -49,7 +49,5 @@ export function TooltipDelayGroupProvider(
     [closeDelay, isGroupActive, openDelay, openTooltipId, setIsGroupActive, setOpenTooltipId],
   )
 
-  return (
-    <TooltipDelayGroupContext.Provider value={value}>{children}</TooltipDelayGroupContext.Provider>
-  )
+  return <TooltipDelayGroupContext value={value}>{children}</TooltipDelayGroupContext>
 }

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

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

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

@@ -14,5 +14,5 @@ export function BoundaryElementProvider(props: BoundaryElementProviderProps): Re
   const {children, element} = props
   const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
 
-  return <BoundaryElementContext.Provider value={value}>{children}</BoundaryElementContext.Provider>
+  return <BoundaryElementContext value={value}>{children}</BoundaryElementContext>
 }