@sanity/ui 3.0.11 → 3.0.12-canary.1

package/src/core/primitives/box/box.tsx

@@ -1,7 +1,7 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 import {
   boxStyle,
   flexItemStyle,
@@ -96,31 +96,31 @@ export const Box = forwardRef(function Box(
       data-as={typeof asProp === 'string' ? asProp : undefined}
       data-ui="Box"
       {...restProps}
-      $column={useArrayProp(column)}
-      $columnStart={useArrayProp(columnStart)}
-      $columnEnd={useArrayProp(columnEnd)}
-      $display={useArrayProp(display)}
-      $flex={useArrayProp(flex)}
-      $height={useArrayProp(height)}
-      $margin={useArrayProp(margin)}
-      $marginX={useArrayProp(marginX)}
-      $marginY={useArrayProp(marginY)}
-      $marginTop={useArrayProp(marginTop)}
-      $marginRight={useArrayProp(marginRight)}
-      $marginBottom={useArrayProp(marginBottom)}
-      $marginLeft={useArrayProp(marginLeft)}
-      $overflow={useArrayProp(overflow)}
-      $padding={useArrayProp(padding)}
-      $paddingX={useArrayProp(paddingX)}
-      $paddingY={useArrayProp(paddingY)}
-      $paddingTop={useArrayProp(paddingTop)}
-      $paddingRight={useArrayProp(paddingRight)}
-      $paddingBottom={useArrayProp(paddingBottom)}
-      $paddingLeft={useArrayProp(paddingLeft)}
-      $row={useArrayProp(row)}
-      $rowStart={useArrayProp(rowStart)}
-      $rowEnd={useArrayProp(rowEnd)}
-      $sizing={useArrayProp(sizing)}
+      $column={getArrayProp(column)}
+      $columnStart={getArrayProp(columnStart)}
+      $columnEnd={getArrayProp(columnEnd)}
+      $display={getArrayProp(display)}
+      $flex={getArrayProp(flex)}
+      $height={getArrayProp(height)}
+      $margin={getArrayProp(margin)}
+      $marginX={getArrayProp(marginX)}
+      $marginY={getArrayProp(marginY)}
+      $marginTop={getArrayProp(marginTop)}
+      $marginRight={getArrayProp(marginRight)}
+      $marginBottom={getArrayProp(marginBottom)}
+      $marginLeft={getArrayProp(marginLeft)}
+      $overflow={getArrayProp(overflow)}
+      $padding={getArrayProp(padding)}
+      $paddingX={getArrayProp(paddingX)}
+      $paddingY={getArrayProp(paddingY)}
+      $paddingTop={getArrayProp(paddingTop)}
+      $paddingRight={getArrayProp(paddingRight)}
+      $paddingBottom={getArrayProp(paddingBottom)}
+      $paddingLeft={getArrayProp(paddingLeft)}
+      $row={getArrayProp(row)}
+      $rowStart={getArrayProp(rowStart)}
+      $rowEnd={getArrayProp(rowEnd)}
+      $sizing={getArrayProp(sizing)}
       as={asProp}
       ref={ref}
     >

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 {useArrayProp} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 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 = 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 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 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 {useArrayProp} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 import {
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,
@@ -93,16 +93,16 @@ export const Card = forwardRef(function Card(
         data-ui="Card"
         data-tone={tone}
         {...restProps}
-        $border={useArrayProp(border)}
-        $borderTop={useArrayProp(borderTop)}
-        $borderRight={useArrayProp(borderRight)}
-        $borderBottom={useArrayProp(borderBottom)}
-        $borderLeft={useArrayProp(borderLeft)}
+        $border={getArrayProp(border)}
+        $borderTop={getArrayProp(borderTop)}
+        $borderRight={getArrayProp(borderRight)}
+        $borderBottom={getArrayProp(borderBottom)}
+        $borderLeft={getArrayProp(borderLeft)}
         $checkered={checkered}
         $focusRing={focusRing}
         $muted={muted}
-        $radius={useArrayProp(radius)}
-        $shadow={useArrayProp(shadow)}
+        $radius={getArrayProp(radius)}
+        $shadow={getArrayProp(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 {useArrayProp} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 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={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 '../../hooks/useArrayProp'
 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 '../../hooks/useArrayProp'
 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 '../../hooks/useArrayProp'
 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 '../../hooks/useArrayProp'
 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 '../../hooks/useArrayProp'
 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 '../../hooks/useArrayProp'
 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 '../../hooks/useArrayProp'
 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/floating-ui/size.ts

@@ -1,23 +1,28 @@
-import {detectOverflow, Elements, Middleware} from '@floating-ui/react-dom'
+import {detectOverflow, Middleware} from '@floating-ui/react-dom'
 
 import {PopoverMargins} from '../../../types'
 
-export interface SizeMiddlewareApplyOptions {
-  availableWidth: number
-  availableHeight: number
-  elements: Elements
-  referenceWidth: number
-}
-
 export function size(options: {
-  apply: (args: SizeMiddlewareApplyOptions) => void
   boundaryElement?: HTMLElement | null
   constrainSize: boolean
   margins: PopoverMargins
   matchReferenceWidth?: boolean
+  maxWidthRef: React.RefObject<number | undefined>
   padding?: number
+  referenceWidthRef: React.RefObject<number | undefined>
+  setReferenceWidth: (referenceWidth: number) => void
+  widthRef: React.RefObject<number | undefined>
 }): Middleware {
-  const {apply, margins, padding = 0} = options
+  const {
+    constrainSize,
+    margins,
+    matchReferenceWidth,
+    maxWidthRef,
+    padding = 0,
+    referenceWidthRef,
+    setReferenceWidth,
+    widthRef,
+  } = options
 
   return {
     name: '@sanity/ui/size',
@@ -61,12 +66,23 @@ export function size(options: {
 
       // IMPORTANT – APPLY ELEMENT STYLES HERE
       // Elements need to be resized BEFORE the `platform.getDimensions` call below
-      apply({
-        availableWidth: maxWidth - margins[1] - margins[3],
-        availableHeight: maxHeight - margins[0] - margins[2],
-        elements,
-        referenceWidth: reference.width - margins[1] - margins[3],
-      })
+      const availableWidth = maxWidth - margins[1] - margins[3]
+      const availableHeight = maxHeight - margins[0] - margins[2]
+      const referenceWidth = reference.width - margins[1] - margins[3]
+      referenceWidthRef.current = referenceWidth
+      setReferenceWidth(referenceWidth)
+
+      if (matchReferenceWidth) {
+        elements.floating.style.width = `${referenceWidth}px`
+      } else if (widthRef.current !== undefined) {
+        elements.floating.style.width = `${widthRef.current}px`
+      }
+
+      if (constrainSize) {
+        elements.floating.style.maxWidth = `${Math.min(availableWidth, maxWidthRef.current ?? Infinity)}px`
+
+        elements.floating.style.maxHeight = `${availableHeight}px`
+      }
 
       const nextDimensions = await platform.getDimensions(elements.floating)