@sanity/ui 3.0.12-canary.2 → 3.0.13

package/src/core/primitives/button/button.tsx

@@ -3,7 +3,7 @@ import {forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 
-import {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'
@@ -97,16 +97,16 @@ export const Button = forwardRef(function Button(
   } = props
   const {button} = useTheme_v2()
 
-  const justify = getArrayProp(justifyProp)
-  const padding = getArrayProp(paddingProp)
-  const paddingX = getArrayProp(paddingXProp)
-  const paddingY = getArrayProp(paddingYProp)
-  const paddingTop = getArrayProp(paddingTopProp)
-  const paddingBottom = getArrayProp(paddingBottomProp)
-  const paddingLeft = getArrayProp(paddingLeftProp)
-  const paddingRight = getArrayProp(paddingRightProp)
-  const radius = getArrayProp(radiusProp)
-  const space = getArrayProp(spaceProp)
+  const justify = useArrayProp(justifyProp)
+  const padding = useArrayProp(paddingProp)
+  const paddingX = useArrayProp(paddingXProp)
+  const paddingY = useArrayProp(paddingYProp)
+  const paddingTop = useArrayProp(paddingTopProp)
+  const paddingBottom = useArrayProp(paddingBottomProp)
+  const paddingLeft = useArrayProp(paddingLeftProp)
+  const paddingRight = useArrayProp(paddingRightProp)
+  const radius = useArrayProp(radiusProp)
+  const space = useArrayProp(spaceProp)
 
   const boxProps = useMemo(
     () => ({

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

@@ -3,7 +3,7 @@ import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 
-import {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,
@@ -93,16 +93,16 @@ export const Card = forwardRef(function Card(
         data-ui="Card"
         data-tone={tone}
         {...restProps}
-        $border={getArrayProp(border)}
-        $borderTop={getArrayProp(borderTop)}
-        $borderRight={getArrayProp(borderRight)}
-        $borderBottom={getArrayProp(borderBottom)}
-        $borderLeft={getArrayProp(borderLeft)}
+        $border={useArrayProp(border)}
+        $borderTop={useArrayProp(borderTop)}
+        $borderRight={useArrayProp(borderRight)}
+        $borderBottom={useArrayProp(borderBottom)}
+        $borderLeft={useArrayProp(borderLeft)}
         $checkered={checkered}
         $focusRing={focusRing}
         $muted={muted}
-        $radius={getArrayProp(radius)}
-        $shadow={getArrayProp(shadow)}
+        $radius={useArrayProp(radius)}
+        $shadow={useArrayProp(shadow)}
         $tone={tone}
         data-checkered={checkered ? '' : undefined}
         data-pressed={pressed ? '' : undefined}

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

@@ -1,7 +1,7 @@
 import {forwardRef, lazy, Suspense} from 'react'
 import {styled} from 'styled-components'
 
-import {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'
 
@@ -30,7 +30,7 @@ export const Code = forwardRef(function Code(
   const {children, language, size = 2, weight, ...restProps} = props
 
   return (
-    <StyledCode data-ui="Code" {...restProps} $size={getArrayProp(size)} $weight={weight} ref={ref}>
+    <StyledCode data-ui="Code" {...restProps} $size={useArrayProp(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 {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 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={getArrayProp(width)}
+      $width={useArrayProp(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 {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {
   flexItemStyle,
   FlexItemStyleProps,
@@ -41,11 +41,11 @@ export const Flex = forwardRef(function Flex(
     <StyledFlex
       data-ui="Flex"
       {...restProps}
-      $align={getArrayProp(align)}
-      $direction={getArrayProp(direction)}
-      $gap={getArrayProp(gap)}
-      $justify={getArrayProp(justify)}
-      $wrap={getArrayProp(wrap)}
+      $align={useArrayProp(align)}
+      $direction={useArrayProp(direction)}
+      $gap={useArrayProp(gap)}
+      $justify={useArrayProp(justify)}
+      $wrap={useArrayProp(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 {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 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={getArrayProp(autoRows)}
-      $autoCols={getArrayProp(autoCols)}
-      $autoFlow={getArrayProp(autoFlow)}
-      $columns={getArrayProp(columns)}
-      $gap={getArrayProp(gap)}
-      $gapX={getArrayProp(gapX)}
-      $gapY={getArrayProp(gapY)}
-      $rows={getArrayProp(rows)}
+      $autoRows={useArrayProp(autoRows)}
+      $autoCols={useArrayProp(autoCols)}
+      $autoFlow={useArrayProp(autoFlow)}
+      $columns={useArrayProp(columns)}
+      $gap={useArrayProp(gap)}
+      $gapX={useArrayProp(gapX)}
+      $gapY={useArrayProp(gapY)}
+      $rows={useArrayProp(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 {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,
@@ -67,9 +67,9 @@ export const Heading = forwardRef(function Heading(
       data-ui="Heading"
       {...restProps}
       $accent={accent}
-      $align={getArrayProp(align)}
+      $align={useArrayProp(align)}
       $muted={muted}
-      $size={getArrayProp(size)}
+      $size={useArrayProp(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 {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 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={getArrayProp(space)}
+      $space={useArrayProp(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 {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 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={getArrayProp(radius)} ref={ref}>
+    <StyledKBD data-ui="KBD" {...restProps} $radius={useArrayProp(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 {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 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={getArrayProp(align)}
+      $align={useArrayProp(align)}
       $muted={muted}
-      $size={getArrayProp(size)}
+      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

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

@@ -24,8 +24,7 @@ import {
   useState,
 } from 'react'
 
-import {useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
-import {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
@@ -186,11 +185,11 @@ export const Popover = forwardRef(function Popover(
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const boundarySize = useElementSize(boundaryElement)?.border
-  const padding = getArrayProp(paddingProp)
-  const radius = getArrayProp(radiusProp)
-  const shadow = getArrayProp(shadowProp)
-  const widthArrayProp = getArrayProp(widthProp)
-  const zOffset = getArrayProp(zOffsetProp)
+  const padding = useArrayProp(paddingProp)
+  const radius = useArrayProp(radiusProp)
+  const shadow = useArrayProp(shadowProp)
+  const widthArrayProp = useArrayProp(widthProp)
+  const zOffset = useArrayProp(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,8 +2,7 @@ import {ChevronDownIcon} from '@sanity/icons'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useCustomValidity} from '../../hooks'
-import {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp, useCustomValidity} from '../../hooks'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
@@ -67,10 +66,10 @@ export const Select = forwardRef(function Select(
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-ui="Select"
         {...restProps}
-        $fontSize={getArrayProp(fontSize)}
-        $padding={getArrayProp(padding)}
-        $radius={getArrayProp(radius)}
-        $space={getArrayProp(space)}
+        $fontSize={useArrayProp(fontSize)}
+        $padding={useArrayProp(padding)}
+        $radius={useArrayProp(radius)}
+        $space={useArrayProp(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 {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 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={getArrayProp(space)}
+      $space={useArrayProp(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 {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveTextAlignStyle,
@@ -68,10 +68,10 @@ export const Text = forwardRef(function Text(
       data-ui="Text"
       {...restProps}
       $accent={accent}
-      $align={getArrayProp(align)}
+      $align={useArrayProp(align)}
       $muted={muted}
       ref={ref}
-      $size={getArrayProp(size)}
+      $size={useArrayProp(size)}
       $weight={weight}
     >
       <span>{children}</span>

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

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

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

@@ -5,8 +5,7 @@ import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 
 import {EMPTY_RECORD} from '../../constants'
-import {useCustomValidity} from '../../hooks'
-import {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp, useCustomValidity} from '../../hooks'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -180,10 +179,10 @@ export const TextInput = forwardRef(function TextInput(
 
   const rootTheme = useRootTheme()
 
-  const fontSize = getArrayProp(fontSizeProp)
-  const padding = getArrayProp(paddingProp)
-  const radius = getArrayProp(radiusProp)
-  const space = getArrayProp(spaceProp)
+  const fontSize = useArrayProp(fontSizeProp)
+  const padding = useArrayProp(paddingProp)
+  const radius = useArrayProp(radiusProp)
+  const space = useArrayProp(spaceProp)
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)

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

@@ -25,8 +25,7 @@ import {
 import {styled} from 'styled-components'
 import {useEffectEvent} from 'use-effect-event'
 
-import {usePrefersReducedMotion} from '../../hooks'
-import {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
@@ -120,7 +119,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const zOffset = _zOffset ?? layer.tooltip.zOffset
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
-  const fallbackPlacements = getArrayProp(fallbackPlacementsProp)
+  const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -286,6 +285,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,7 +1,6 @@
 import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
 
-import {useMediaIndex} from '../../hooks'
-import {getArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp, useMediaIndex} from '../../hooks'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
@@ -30,7 +29,7 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const level = parentLevel + 1
 
   // Get z-index offset
-  const zOffset = getArrayProp(zOffsetProp)
+  const zOffset = useArrayProp(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()