@sanity/ui 3.0.11 → 3.0.12-canary.1

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

@@ -1,7 +1,7 @@
 import {Strategy} from '@floating-ui/react-dom'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {motion, type MotionProps} from 'framer-motion'
-import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
+import React, {CSSProperties, forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
@@ -33,136 +33,134 @@ const MotionFlex = styled(motion.create(Flex))`
 /**
  * @internal
  */
-export const PopoverCard = memo(
-  forwardRef(function PopoverCard(
-    props: {
-      /** @beta*/
-      __unstable_margins?: PopoverMargins
-      animate?: boolean
-      arrow: boolean
-      arrowRef: React.Ref<HTMLDivElement>
-      arrowX?: number
-      arrowY?: number
-      originX?: number
-      originY?: number
-      overflow?: BoxOverflow
-      padding?: number | number[]
-      placement: Placement
-      radius?: Radius | Radius[]
-      scheme?: ThemeColorSchemeKey
-      shadow?: number | number[]
-      strategy: Strategy
-      tone: CardTone
-      width: number | undefined
-      x: number | null
-      y: number | null
-    } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
-    ref: React.ForwardedRef<HTMLDivElement>,
-  ) {
-    const {
-      __unstable_margins: marginsProp,
-      animate,
-      arrow,
-      arrowRef,
-      arrowX,
-      arrowY,
-      children,
-      padding,
-      placement,
-      originX,
-      originY,
-      overflow,
-      radius,
-      scheme,
-      shadow,
-      strategy,
-      style,
-      tone,
-      width,
-      x: xProp,
-      y: yProp,
-      ...restProps
-    } = props
+export const PopoverCard = forwardRef(function PopoverCard(
+  props: {
+    /** @beta*/
+    __unstable_margins?: PopoverMargins
+    animate?: boolean
+    arrow: boolean
+    arrowRef: React.Ref<HTMLDivElement>
+    arrowX?: number
+    arrowY?: number
+    originX?: number
+    originY?: number
+    overflow?: BoxOverflow
+    padding?: number | number[]
+    placement: Placement
+    radius?: Radius | Radius[]
+    scheme?: ThemeColorSchemeKey
+    shadow?: number | number[]
+    strategy: Strategy
+    tone: CardTone
+    width: number | undefined
+    x: number | null
+    y: number | null
+  } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    __unstable_margins: marginsProp,
+    animate,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    children,
+    padding,
+    placement,
+    originX,
+    originY,
+    overflow,
+    radius,
+    scheme,
+    shadow,
+    strategy,
+    style,
+    tone,
+    width,
+    x: xProp,
+    y: yProp,
+    ...restProps
+  } = props
 
-    const {zIndex} = useLayer()
+  const {zIndex} = useLayer()
 
-    // Get margins: [top, right, bottom, left]
-    const margins: PopoverMargins = useMemo(
-      () => marginsProp || DEFAULT_POPOVER_MARGINS,
-      [marginsProp],
-    )
+  // Get margins: [top, right, bottom, left]
+  const margins: PopoverMargins = useMemo(
+    () => marginsProp || DEFAULT_POPOVER_MARGINS,
+    [marginsProp],
+  )
 
-    // Translate according to margins
-    const x = (xProp ?? 0) + margins[3]
-    const y = (yProp ?? 0) + margins[0]
+  // Translate according to margins
+  const x = (xProp ?? 0) + margins[3]
+  const y = (yProp ?? 0) + margins[0]
 
-    const rootStyle: CSSProperties = useMemo(
-      () => ({
-        left: x,
-        originX,
-        originY,
-        position: strategy,
-        top: y,
-        width,
-        zIndex,
-        willChange: animate ? 'transform' : undefined,
-        ...style,
-      }),
-      [animate, originX, originY, strategy, style, width, x, y, zIndex],
-    )
+  const rootStyle: CSSProperties = useMemo(
+    () => ({
+      left: x,
+      originX,
+      originY,
+      position: strategy,
+      top: y,
+      width,
+      zIndex,
+      willChange: animate ? 'transform' : undefined,
+      ...style,
+    }),
+    [animate, originX, originY, strategy, style, width, x, y, zIndex],
+  )
 
-    const arrowStyle: CSSProperties = useMemo(
-      () => ({
-        left: arrowX !== null ? arrowX : undefined,
-        top: arrowY !== null ? arrowY : undefined,
-        right: undefined,
-        bottom: undefined,
-      }),
-      [arrowX, arrowY],
-    )
+  const arrowStyle: CSSProperties = useMemo(
+    () => ({
+      left: arrowX !== null ? arrowX : undefined,
+      top: arrowY !== null ? arrowY : undefined,
+      right: undefined,
+      bottom: undefined,
+    }),
+    [arrowX, arrowY],
+  )
 
-    return (
-      <MotionCard
-        data-ui="Popover"
-        {...(restProps as CardProps & MotionProps)}
-        data-placement={placement}
-        radius={radius}
-        ref={ref}
-        scheme={scheme}
-        shadow={shadow}
-        sizing="border"
-        style={rootStyle}
-        tone={tone}
-        variants={POPOVER_MOTION_PROPS.card}
+  return (
+    <MotionCard
+      data-ui="Popover"
+      {...(restProps as CardProps & MotionProps)}
+      data-placement={placement}
+      radius={radius}
+      ref={ref}
+      scheme={scheme}
+      shadow={shadow}
+      sizing="border"
+      style={rootStyle}
+      tone={tone}
+      variants={POPOVER_MOTION_PROPS.card}
+      transition={POPOVER_MOTION_PROPS.transition}
+      initial={animate ? ['hidden', 'initial'] : undefined}
+      animate={animate ? ['visible', 'scaleIn'] : undefined}
+      exit={animate ? ['hidden', 'scaleOut'] : undefined}
+    >
+      <MotionFlex
+        data-ui="Popover__wrapper"
+        direction="column"
+        flex={1}
+        overflow={overflow}
+        variants={POPOVER_MOTION_PROPS.children}
         transition={POPOVER_MOTION_PROPS.transition}
-        initial={animate ? ['hidden', 'initial'] : undefined}
-        animate={animate ? ['visible', 'scaleIn'] : undefined}
-        exit={animate ? ['hidden', 'scaleOut'] : undefined}
       >
-        <MotionFlex
-          data-ui="Popover__wrapper"
-          direction="column"
-          flex={1}
-          overflow={overflow}
-          variants={POPOVER_MOTION_PROPS.children}
-          transition={POPOVER_MOTION_PROPS.transition}
-        >
-          <Flex direction="column" flex={1} padding={padding}>
-            {children}
-          </Flex>
-        </MotionFlex>
+        <Flex direction="column" flex={1} padding={padding}>
+          {children}
+        </Flex>
+      </MotionFlex>
 
-        {arrow && (
-          <Arrow
-            ref={arrowRef}
-            style={arrowStyle}
-            width={DEFAULT_POPOVER_ARROW_WIDTH}
-            height={DEFAULT_POPOVER_ARROW_HEIGHT}
-            radius={DEFAULT_POPOVER_ARROW_RADIUS}
-          />
-        )}
-      </MotionCard>
-    )
-  }),
-)
-PopoverCard.displayName = 'Memo(ForwardRef(PopoverCard))'
+      {arrow && (
+        <Arrow
+          ref={arrowRef}
+          style={arrowStyle}
+          width={DEFAULT_POPOVER_ARROW_WIDTH}
+          height={DEFAULT_POPOVER_ARROW_HEIGHT}
+          radius={DEFAULT_POPOVER_ARROW_RADIUS}
+        />
+      )}
+    </MotionCard>
+  )
+})
+PopoverCard.displayName = 'ForwardRef(PopoverCard)'

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 '../../hooks/useArrayProp'
 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 '../../hooks/useArrayProp'
 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 '../../hooks/useArrayProp'
 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 '../../hooks/useArrayProp'
 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 '../../hooks/useArrayProp'
 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,7 +25,8 @@ import {
 import {styled} from 'styled-components'
 import {useEffectEvent} from 'use-effect-event'
 
-import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import {usePrefersReducedMotion} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
@@ -98,25 +99,28 @@ export const Tooltip = forwardRef(function Tooltip(
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
-    boundaryElement = boundaryElementContext?.element,
+    boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
-      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+    fallbackPlacements: _fallbackPlacementsProp,
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    zOffset: _zOffset,
     delay,
     ...restProps
   } = props
+  const boundaryElement = _boundaryElement ?? boundaryElementContext?.element
+  const fallbackPlacementsProp =
+    _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
+  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)
@@ -129,44 +133,14 @@ export const Tooltip = forwardRef(function Tooltip(
   const portalElement =
     typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
 
-  const middleware = useMemo(() => {
-    const ret: Middleware[] = []
-
-    // Flip the floating element when leaving the boundary box
-    ret.push(
-      flip({
-        boundary: boundaryElement || undefined,
-        fallbackPlacements,
-        padding: DEFAULT_TOOLTIP_PADDING,
-        rootBoundary,
-      }),
-    )
-
-    // Define distance between reference and floating element
-    ret.push(offset({mainAxis: DEFAULT_TOOLTIP_DISTANCE}))
-
-    // Shift the tooltip so its sits with the boundary element
-    ret.push(
-      shift({
-        boundary: boundaryElement || undefined,
-        rootBoundary,
-        padding: DEFAULT_TOOLTIP_PADDING,
-      }),
-    )
-
-    // Place arrow
-    if (arrowProp) {
-      ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
-    }
-
-    // Determine the origin to scale from.
-    // Must be placed after `@sanity/ui/size` and `shift` middleware.
-    if (animate) {
-      ret.push(origin)
-    }
-
-    return ret
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements])
+  const middleware = useMiddleware({
+    animate,
+    arrowProp,
+    arrowRef,
+    boundaryElement,
+    fallbackPlacements,
+    rootBoundary,
+  })
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -417,6 +391,61 @@ export const Tooltip = forwardRef(function Tooltip(
 })
 Tooltip.displayName = 'ForwardRef(Tooltip)'
 
+function useMiddleware({
+  animate,
+  arrowProp,
+  arrowRef,
+  boundaryElement,
+  fallbackPlacements,
+  rootBoundary,
+}: {
+  animate: boolean
+  arrowProp: boolean
+  arrowRef: React.RefObject<HTMLDivElement | null>
+  boundaryElement: HTMLElement | null
+  fallbackPlacements: Placement[]
+  rootBoundary: RootBoundary
+}) {
+  return useMemo(() => {
+    const ret: Middleware[] = []
+
+    // Flip the floating element when leaving the boundary box
+    ret.push(
+      flip({
+        boundary: boundaryElement || undefined,
+        fallbackPlacements,
+        padding: DEFAULT_TOOLTIP_PADDING,
+        rootBoundary,
+      }),
+    )
+
+    // Define distance between reference and floating element
+    ret.push(offset({mainAxis: DEFAULT_TOOLTIP_DISTANCE}))
+
+    // Shift the tooltip so its sits with the boundary element
+    ret.push(
+      shift({
+        boundary: boundaryElement || undefined,
+        rootBoundary,
+        padding: DEFAULT_TOOLTIP_PADDING,
+      }),
+    )
+
+    // Place arrow
+    if (arrowProp) {
+      ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
+    }
+
+    // Determine the origin to scale from.
+    // Must be placed after `@sanity/ui/size` and `shift` middleware.
+    if (animate) {
+      ret.push(origin)
+    }
+
+    return ret
+  }, [animate, arrowProp, arrowRef, boundaryElement, fallbackPlacements, rootBoundary])
+}
+
 /**
  * As `useEffectEvent` should never be passed to other components or hooks, this custom hook groups together the `useEffectEvent` and the `useEffect` hook using it.
  * @see https://19.react.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events:~:text=Never%20pass%20them%20to%20other%20components%20or%20Hooks