@sanity/ui 3.0.12 → 3.0.14

package/src/core/primitives/code/code.tsx

@@ -1,7 +1,7 @@
 import {forwardRef, lazy, Suspense} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'
 
@@ -30,7 +30,13 @@ export const Code = forwardRef(function Code(
   const {children, language, size = 2, weight, ...restProps} = props
 
   return (
-    <StyledCode data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
+    <StyledCode
+      data-ui="Code"
+      {...restProps}
+      $size={_getArrayProp(size)}
+      $weight={weight}
+      ref={ref}
+    >
       <Suspense fallback={<code>{children}</code>}>
         <LazyRefractor language={language} value={children} />
       </Suspense>

package/src/core/primitives/container/container.tsx

@@ -1,7 +1,7 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {Box, BoxProps} from '../box'
 import {ResponsiveWidthProps} from '../types'
 import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
@@ -32,7 +32,7 @@ export const Container = forwardRef(function Container(
     <StyledContainer
       data-ui="Container"
       {...restProps}
-      $width={useArrayProp(width)}
+      $width={_getArrayProp(width)}
       forwardedAs={as}
       ref={ref}
     />

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

@@ -1,7 +1,7 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   flexItemStyle,
   FlexItemStyleProps,
@@ -41,11 +41,11 @@ export const Flex = forwardRef(function Flex(
     <StyledFlex
       data-ui="Flex"
       {...restProps}
-      $align={useArrayProp(align)}
-      $direction={useArrayProp(direction)}
-      $gap={useArrayProp(gap)}
-      $justify={useArrayProp(justify)}
-      $wrap={useArrayProp(wrap)}
+      $align={_getArrayProp(align)}
+      $direction={_getArrayProp(direction)}
+      $gap={_getArrayProp(gap)}
+      $justify={_getArrayProp(justify)}
+      $wrap={_getArrayProp(wrap)}
       forwardedAs={as}
       ref={ref}
     />

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

@@ -1,7 +1,7 @@
 import {forwardRef} 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'
@@ -30,14 +30,14 @@ export const Grid = forwardRef(function Grid(
       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={_getArrayProp(autoRows)}
+      $autoCols={_getArrayProp(autoCols)}
+      $autoFlow={_getArrayProp(autoFlow)}
+      $columns={_getArrayProp(columns)}
+      $gap={_getArrayProp(gap)}
+      $gapX={_getArrayProp(gapX)}
+      $gapY={_getArrayProp(gapY)}
+      $rows={_getArrayProp(rows)}
       forwardedAs={as}
       ref={ref}
     >

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

@@ -2,7 +2,7 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,
@@ -67,9 +67,9 @@ export const Heading = forwardRef(function Heading(
       data-ui="Heading"
       {...restProps}
       $accent={accent}
-      $align={useArrayProp(align)}
+      $align={_getArrayProp(align)}
       $muted={muted}
-      $size={useArrayProp(size)}
+      $size={_getArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

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

@@ -1,7 +1,7 @@
 import {Children, forwardRef, useMemo} 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'
@@ -36,7 +36,7 @@ export const Inline = forwardRef(function Inline(
     <StyledInline
       data-ui="Inline"
       {...restProps}
-      $space={useArrayProp(space)}
+      $space={_getArrayProp(space)}
       forwardedAs={as}
       ref={ref as any}
     >

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

@@ -1,7 +1,7 @@
 import {forwardRef} from 'react'
 import {css, styled} 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'
@@ -49,7 +49,7 @@ export const KBD = forwardRef(function KBD(
   const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
 
   return (
-    <StyledKBD data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
+    <StyledKBD data-ui="KBD" {...restProps} $radius={_getArrayProp(radius)} ref={ref}>
       <Box as="span" padding={padding}>
         <Text as="span" size={fontSize} weight="semibold">
           {children}

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

@@ -2,7 +2,7 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} 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 {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
@@ -66,9 +66,9 @@ export const Label = forwardRef(function Label(
       data-ui="Label"
       {...restProps}
       $accent={accent}
-      $align={useArrayProp(align)}
+      $align={_getArrayProp(align)}
       $muted={muted}
-      $size={useArrayProp(size)}
+      $size={_getArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

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

@@ -24,8 +24,9 @@ import {
   useState,
 } 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 {LayerProps, LayerProvider, Portal, useBoundaryElement, useLayer} from '../../utils'
@@ -185,11 +186,11 @@ export const Popover = forwardRef(function Popover(
   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 = _getArrayProp(paddingProp)
+  const radius = _getArrayProp(radiusProp)
+  const shadow = _getArrayProp(shadowProp)
+  const widthArrayProp = _getArrayProp(widthProp)
+  const zOffset = _getArrayProp(zOffsetProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'

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

@@ -2,7 +2,8 @@ import {ChevronDownIcon} from '@sanity/icons'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp, useCustomValidity} from '../../hooks'
+import {useCustomValidity} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
@@ -66,10 +67,10 @@ export const Select = forwardRef(function Select(
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-ui="Select"
         {...restProps}
-        $fontSize={useArrayProp(fontSize)}
-        $padding={useArrayProp(padding)}
-        $radius={useArrayProp(radius)}
-        $space={useArrayProp(space)}
+        $fontSize={_getArrayProp(fontSize)}
+        $padding={_getArrayProp(padding)}
+        $radius={_getArrayProp(radius)}
+        $space={_getArrayProp(space)}
         disabled={disabled || readOnly}
         ref={ref}
       >

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

@@ -1,7 +1,7 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {Box, BoxProps} from '../box'
 import {responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps, stackBaseStyle} from './styles'
 
@@ -34,7 +34,7 @@ export const Stack = forwardRef(function Stack(
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}
-      $space={useArrayProp(space)}
+      $space={_getArrayProp(space)}
       forwardedAs={as}
       ref={ref}
     />

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

@@ -2,7 +2,7 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   ResponsiveFontStyleProps,
   responsiveTextAlignStyle,
@@ -68,10 +68,10 @@ export const Text = forwardRef(function Text(
       data-ui="Text"
       {...restProps}
       $accent={accent}
-      $align={useArrayProp(align)}
+      $align={_getArrayProp(align)}
       $muted={muted}
       ref={ref}
-      $size={useArrayProp(size)}
+      $size={_getArrayProp(size)}
       $weight={weight}
     >
       <span>{children}</span>

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

@@ -2,7 +2,8 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp, useCustomValidity} from '../../hooks'
+import {useCustomValidity} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -94,17 +95,17 @@ export const TextArea = forwardRef(function TextArea(
           data-scheme={rootTheme.scheme}
           data-tone={rootTheme.tone}
           {...restProps}
-          $fontSize={useArrayProp(fontSize)}
-          $padding={useArrayProp(padding)}
+          $fontSize={_getArrayProp(fontSize)}
+          $padding={_getArrayProp(padding)}
           $scheme={rootTheme.scheme}
-          $space={useArrayProp(0)}
+          $space={_getArrayProp(0)}
           $tone={rootTheme.tone}
           $weight={weight}
           disabled={disabled}
           ref={ref}
         />
         <Presentation
-          $radius={useArrayProp(radius)}
+          $radius={_getArrayProp(radius)}
           $unstableDisableFocusRing={__unstable_disableFocusRing}
           $scheme={rootTheme.scheme}
           $tone={rootTheme.tone}

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

@@ -5,7 +5,8 @@ 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 {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -179,10 +180,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 = _getArrayProp(fontSizeProp)
+  const padding = _getArrayProp(paddingProp)
+  const radius = _getArrayProp(radiusProp)
+  const space = _getArrayProp(spaceProp)
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)

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

@@ -25,9 +25,10 @@ import {
 import {styled} from 'styled-components'
 import {useEffectEvent} from 'use-effect-event'
 
-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 {Layer, type LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
@@ -119,7 +120,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const zOffset = _zOffset ?? layer.tooltip.zOffset
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
-  const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
+  const fallbackPlacements = _getArrayProp(fallbackPlacementsProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -285,6 +286,7 @@ export const Tooltip = forwardRef(function Tooltip(
       portalElement?.offsetWidth || document.body.offsetWidth,
     ]
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2)
   }, [boundaryElement, portalElement])
 

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

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

package/src/core/utils/virtualList/virtualList.tsx

@@ -66,6 +66,7 @@ export const VirtualList = forwardRef(function VirtualList(
     const firstElement = wrapperRef.current.firstChild
 
     if (firstElement instanceof HTMLElement) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setItemHeight(firstElement.offsetHeight)
     }
   }, [renderItem])
@@ -111,6 +112,7 @@ export const VirtualList = forwardRef(function VirtualList(
     window.addEventListener('scroll', handleScroll, {passive: true})
     window.addEventListener('resize', handleResize)
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setScrollHeight(window.innerHeight)
 
     handleScroll()