@sanity/ui 2.3.6-canary.0 → 2.3.6-canary.2

package/src/core/primitives/flex/flex.tsx

@@ -1,6 +1,6 @@
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   flexItemStyle,
   FlexItemStyleProps,
@@ -36,15 +36,21 @@ export const Flex = forwardRef(function Flex(
 ) {
   const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
 
+  const $align = useMemo(() => _getArrayProp(align), [align])
+  const $direction = useMemo(() => _getArrayProp(direction), [direction])
+  const $gap = useMemo(() => _getArrayProp(gap), [gap])
+  const $justify = useMemo(() => _getArrayProp(justify), [justify])
+  const $wrap = useMemo(() => _getArrayProp(wrap), [wrap])
+
   return (
     <Root
       data-ui="Flex"
       {...restProps}
-      $align={useArrayProp(align)}
-      $direction={useArrayProp(direction)}
-      $gap={useArrayProp(gap)}
-      $justify={useArrayProp(justify)}
-      $wrap={useArrayProp(wrap)}
+      $align={$align}
+      $direction={$direction}
+      $gap={$gap}
+      $justify={$justify}
+      $wrap={$wrap}
       forwardedAs={as}
       ref={ref}
     />

package/src/core/primitives/grid/grid.tsx

@@ -1,6 +1,6 @@
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 import {ResponsiveGridProps} from '../types'
@@ -24,19 +24,28 @@ export const Grid = forwardRef(function Grid(
   const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
     props
 
+  const $autoRows = useMemo(() => _getArrayProp(autoRows), [autoRows])
+  const $autoCols = useMemo(() => _getArrayProp(autoCols), [autoCols])
+  const $autoFlow = useMemo(() => _getArrayProp(autoFlow), [autoFlow])
+  const $columns = useMemo(() => _getArrayProp(columns), [columns])
+  const $gap = useMemo(() => _getArrayProp(gap), [gap])
+  const $gapX = useMemo(() => _getArrayProp(gapX), [gapX])
+  const $gapY = useMemo(() => _getArrayProp(gapY), [gapY])
+  const $rows = useMemo(() => _getArrayProp(rows), [rows])
+
   return (
     <Root
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Grid"
       {...restProps}
-      $autoRows={useArrayProp(autoRows)}
-      $autoCols={useArrayProp(autoCols)}
-      $autoFlow={useArrayProp(autoFlow)}
-      $columns={useArrayProp(columns)}
-      $gap={useArrayProp(gap)}
-      $gapX={useArrayProp(gapX)}
-      $gapY={useArrayProp(gapY)}
-      $rows={useArrayProp(rows)}
+      $autoRows={$autoRows}
+      $autoCols={$autoCols}
+      $autoFlow={$autoFlow}
+      $columns={$columns}
+      $gap={$gap}
+      $gapX={$gapX}
+      $gapY={$gapY}
+      $rows={$rows}
       forwardedAs={as}
       ref={ref}
     >

package/src/core/primitives/heading/heading.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,
@@ -62,6 +62,9 @@ export const Heading = forwardRef(function Heading(
     ...restProps
   } = props
 
+  const $size = useMemo(() => _getArrayProp(size), [size])
+  const $align = useMemo(() => _getArrayProp(align), [align])
+
   let children = childrenProp
 
   if (textOverflow === 'ellipsis') {
@@ -73,9 +76,9 @@ export const Heading = forwardRef(function Heading(
       data-ui="Heading"
       {...restProps}
       $accent={accent}
-      $align={useArrayProp(align)}
+      $align={$align}
+      $size={$size}
       $muted={muted}
-      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

package/src/core/primitives/inline/inline.tsx

@@ -1,6 +1,6 @@
 import {forwardRef, useMemo, Children} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {Box, BoxProps} from '../box'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
@@ -26,6 +26,7 @@ export const Inline = forwardRef(function Inline(
 ) {
   const {as, children: childrenProp, space, ...restProps} = props
 
+  const $space = useMemo(() => _getArrayProp(space), [space])
   const children = useMemo(
     () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
     [childrenProp],
@@ -35,7 +36,7 @@ export const Inline = forwardRef(function Inline(
     <Root
       data-ui="Inline"
       {...restProps}
-      $space={useArrayProp(space)}
+      $space={$space}
       forwardedAs={as}
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref={ref as any}

package/src/core/primitives/kbd/kbd.tsx

@@ -1,6 +1,6 @@
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled, css} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Radius} from '../../types'
 import {Box} from '../box'
@@ -46,9 +46,10 @@ export const KBD = forwardRef(function KBD(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
+  const $radius = useMemo(() => _getArrayProp(radius), [radius])
 
   return (
-    <Root data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
+    <Root data-ui="KBD" {...restProps} $radius={$radius} ref={ref}>
       <Box as="span" padding={padding}>
         <Text as="span" size={fontSize} weight="semibold">
           {children}

package/src/core/primitives/label/label.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'
@@ -59,6 +59,9 @@ export const Label = forwardRef(function Label(
     ...restProps
   } = props
 
+  const $size = useMemo(() => _getArrayProp(size), [size])
+  const $align = useMemo(() => _getArrayProp(align), [align])
+
   let children = childrenProp
 
   if (textOverflow === 'ellipsis') {
@@ -72,9 +75,9 @@ export const Label = forwardRef(function Label(
       data-ui="Label"
       {...restProps}
       $accent={accent}
-      $align={useArrayProp(align)}
+      $align={$align}
+      $size={$size}
       $muted={muted}
-      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

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

@@ -23,8 +23,9 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
+import {useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
+import {_getArrayProp} from '../../styles'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {
@@ -162,11 +163,11 @@ export const Popover = memo(
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
     const boundarySize = useElementSize(boundaryElement)?.border
-    const padding = useArrayProp(paddingProp)
-    const radius = useArrayProp(radiusProp)
-    const shadow = useArrayProp(shadowProp)
-    const widthArrayProp = useArrayProp(widthProp)
-    const zOffset = useArrayProp(zOffsetProp)
+    const padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
+    const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
+    const shadow = useMemo(() => _getArrayProp(shadowProp), [shadowProp])
+    const widthArrayProp = useMemo(() => _getArrayProp(widthProp), [widthProp])
+    const zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp])
     const ref = useRef<HTMLDivElement | null>(null)
     const arrowRef = useRef<HTMLDivElement | null>(null)
     const rootBoundary: RootBoundary = 'viewport'

package/src/core/primitives/select/select.tsx

@@ -1,7 +1,8 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
+import {forwardRef, useImperativeHandle, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity, useArrayProp} from '../../hooks'
+import {useCustomValidity} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
@@ -59,16 +60,21 @@ export const Select = forwardRef(function Select(
 
   useCustomValidity(ref, customValidity)
 
+  const $fontSize = useMemo(() => _getArrayProp(fontSize), [fontSize])
+  const $padding = useMemo(() => _getArrayProp(padding), [padding])
+  const $radius = useMemo(() => _getArrayProp(radius), [radius])
+  const $space = useMemo(() => _getArrayProp(space), [space])
+
   return (
     <Root data-ui="Select">
       <Input
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-ui="Select"
         {...restProps}
-        $fontSize={useArrayProp(fontSize)}
-        $padding={useArrayProp(padding)}
-        $radius={useArrayProp(radius)}
-        $space={useArrayProp(space)}
+        $fontSize={$fontSize}
+        $padding={$padding}
+        $radius={$radius}
+        $space={$space}
         disabled={disabled || readOnly}
         ref={ref}
       >

package/src/core/primitives/stack/stack.tsx

@@ -1,6 +1,6 @@
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {Box, BoxProps} from '../box'
 import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
 
@@ -24,13 +24,14 @@ export const Stack = forwardRef(function Stack(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {as, space, ...restProps} = props
+  const $space = useMemo(() => _getArrayProp(space), [space])
 
   return (
     <Root
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}
-      $space={useArrayProp(space)}
+      $space={$space}
       forwardedAs={as}
       ref={ref}
     />

package/src/core/primitives/text/text.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   ResponsiveFontStyleProps,
   responsiveTextAlignStyle,
@@ -63,6 +63,9 @@ export const Text = forwardRef(function Text(
     ...restProps
   } = props
 
+  const $size = useMemo(() => _getArrayProp(size), [size])
+  const $align = useMemo(() => _getArrayProp(align), [align])
+
   let children = childrenProp
 
   if (textOverflow === 'ellipsis') {
@@ -74,10 +77,10 @@ export const Text = forwardRef(function Text(
       data-ui="Text"
       {...restProps}
       $accent={accent}
-      $align={useArrayProp(align)}
+      $align={$align}
+      $size={$size}
       $muted={muted}
       ref={ref}
-      $size={useArrayProp(size)}
       $weight={weight}
     >
       <span>{children}</span>

package/src/core/primitives/textArea/textArea.tsx

@@ -1,7 +1,8 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
+import {forwardRef, useImperativeHandle, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity, useArrayProp} from '../../hooks'
+import {useCustomValidity} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -80,6 +81,11 @@ export const TextArea = forwardRef(function TextArea(
 
   useCustomValidity(ref, customValidity)
 
+  const $radius = useMemo(() => _getArrayProp(radius), [radius])
+  const $fontSize = useMemo(() => _getArrayProp(fontSize), [fontSize])
+  const $padding = useMemo(() => _getArrayProp(padding), [padding])
+  const $space = useMemo(() => _getArrayProp(0), [])
+
   return (
     <Root data-ui="TextArea">
       <InputRoot>
@@ -88,17 +94,17 @@ export const TextArea = forwardRef(function TextArea(
           data-scheme={rootTheme.scheme}
           data-tone={rootTheme.tone}
           {...restProps}
-          $fontSize={useArrayProp(fontSize)}
-          $padding={useArrayProp(padding)}
+          $fontSize={$fontSize}
+          $padding={$padding}
+          $space={$space}
           $scheme={rootTheme.scheme}
-          $space={useArrayProp(0)}
           $tone={rootTheme.tone}
           $weight={weight}
           disabled={disabled}
           ref={ref}
         />
         <Presentation
-          $radius={useArrayProp(radius)}
+          $radius={$radius}
           $scheme={rootTheme.scheme}
           $tone={rootTheme.tone}
           data-border={border ? '' : undefined}

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

@@ -4,7 +4,8 @@ import {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, u
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useCustomValidity} from '../../hooks'
+import {useCustomValidity} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
@@ -177,10 +178,10 @@ export const TextInput = forwardRef(function TextInput(
 
   const rootTheme = useRootTheme()
 
-  const fontSize = useArrayProp(fontSizeProp)
-  const padding = useArrayProp(paddingProp)
-  const radius = useArrayProp(radiusProp)
-  const space = useArrayProp(spaceProp)
+  const fontSize = useMemo(() => _getArrayProp(fontSizeProp), [fontSizeProp])
+  const padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
+  const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
+  const space = useMemo(() => _getArrayProp(spaceProp), [spaceProp])
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)

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

@@ -24,9 +24,10 @@ import {
   useImperativeHandle,
 } from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import {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 {
@@ -122,7 +123,10 @@ export const Tooltip = forwardRef(function Tooltip(
   } = props
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
-  const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
+  const fallbackPlacements = useMemo(
+    () => _getArrayProp(fallbackPlacementsProp),
+    [fallbackPlacementsProp],
+  )
   const ref = useRef<HTMLDivElement | null>(null)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)

package/src/core/theme/themeProvider.tsx

@@ -24,13 +24,11 @@ export interface ThemeProviderProps {
  * @public
  */
 export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
+  const {children} = props
   const parentTheme = useContext(ThemeContext)
-  const {
-    children,
-    scheme = parentTheme?.scheme || 'light',
-    theme: rootTheme = parentTheme?.theme || null,
-    tone = parentTheme?.tone || 'default',
-  } = props
+  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
+  const rootTheme = parentTheme?.theme || null
+  const tone = parentTheme?.tone || 'default'
 
   const themeContext: ThemeContextValue | null = useMemo(() => {
     if (!rootTheme) return null

package/src/core/utils/layer/layerProvider.tsx

@@ -1,5 +1,6 @@
 import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import {useMediaIndex, useArrayProp} from '../../hooks'
+import {useMediaIndex} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
@@ -28,7 +29,7 @@ export function LayerProvider(props: LayerProviderProps): React.ReactElement {
   const level = parentLevel + 1
 
   // Get z-index offset
-  const zOffset = useArrayProp(zOffsetProp)
+  const zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp])
 
   // Get responsive z-index value
   const maxMediaIndex = zOffset.length - 1