@sanity/ui 2.3.7-canary.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.3.7-canary.0",
+  "version": "2.5.0",
   "keywords": [
     "sanity",
     "ui",
@@ -23,10 +23,6 @@
   "exports": {
     ".": {
       "source": "./exports/index.ts",
-      "react-compiler": {
-        "source": "./exports/index.ts",
-        "default": "./dist/index.compiled.mjs"
-      },
       "import": "./dist/index.mjs",
       "require": "./dist/index.js",
       "default": "./dist/index.js"
@@ -55,6 +51,32 @@
     "src",
     "theme.js"
   ],
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "prepare": "husky install",
+    "prepublishOnly": "pnpm build",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -84,7 +106,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.0",
     "@sanity/color": "^3.0.6",
-    "@sanity/icons": "3.2.1-canary.0",
+    "@sanity/icons": "^3.2.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
     "react-refractor": "^2.2.0"
@@ -97,7 +119,7 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "6.9.4-canary.1",
+    "@sanity/pkg-utils": "^6.9.3",
     "@sanity/semantic-release-preset": "^4.1.8",
     "@sanity/ui-workshop": "^2.0.15",
     "@storybook/addon-a11y": "^8.0.8",
@@ -171,6 +193,7 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@9.2.0",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -180,28 +203,9 @@
   "esm.sh": {
     "bundle": false
   },
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+  "pnpm": {
+    "overrides": {
+      "conventional-changelog-conventionalcommits": ">= 8.0.0"
+    }
   }
-}
+}

package/src/core/components/autocomplete/autocomplete.tsx

@@ -20,6 +20,7 @@ import {
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
+import {useArrayProp} from '../../hooks'
 import {
   Box,
   BoxProps,
@@ -31,7 +32,6 @@ import {
   Text,
   TextInput,
 } from '../../primitives'
-import {_getArrayProp} from '../../styles'
 import {Radius} from '../../types'
 import {AnimatedSpinnerIcon, ListBox, Root} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
@@ -61,6 +61,8 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseA
   onSelect?: (value: string) => void
   /** @beta */
   openButton?: boolean | AutocompleteOpenButtonProps
+  /** @beta */
+  openOnFocus?: boolean
   /** The options to render. */
   options?: Option[]
   padding?: number | number[]
@@ -138,6 +140,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     onQueryChange,
     onSelect,
     openButton,
+    openOnFocus,
     options: optionsProp,
     padding: paddingProp = 3,
     popover = EMPTY_RECORD,
@@ -200,7 +203,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
-  const padding = _getArrayProp(paddingProp)
+  const padding = useArrayProp(paddingProp)
   const currentOption = useMemo(
     () => (value !== null ? options.find((o) => o.value === value) : undefined),
     [options, value],
@@ -213,41 +216,44 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const activeItemId = activeValue ? `${id}-option-${activeValue}` : undefined
   const expanded = (query !== null && loading) || (focused && query !== null)
 
-  const handleRootBlur = (event: FocusEvent<HTMLInputElement>) => {
-    setTimeout(() => {
-      // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
-      // closes the results in certain situations):
-      // - Do not handle blur if the mouse is within the popover
-      if (popoverMouseWithinRef.current) {
-        return
-      }
+  const handleRootBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      setTimeout(() => {
+        // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
+        // closes the results in certain situations):
+        // - Do not handle blur if the mouse is within the popover
+        if (popoverMouseWithinRef.current) {
+          return
+        }
 
-      const elements: HTMLElement[] = (relatedElements || []).concat(
-        rootElementRef.current ? [rootElementRef.current] : [],
-        resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
-      )
+        const elements: HTMLElement[] = (relatedElements || []).concat(
+          rootElementRef.current ? [rootElementRef.current] : [],
+          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
+        )
 
-      let focusInside = false
+        let focusInside = false
 
-      if (document.activeElement) {
-        for (const e of elements) {
-          if (e === document.activeElement || e.contains(document.activeElement)) {
-            focusInside = true
-            break
+        if (document.activeElement) {
+          for (const e of elements) {
+            if (e === document.activeElement || e.contains(document.activeElement)) {
+              focusInside = true
+              break
+            }
           }
         }
-      }
 
-      if (focusInside === false) {
-        dispatch({type: 'root/blur'})
-        popoverMouseWithinRef.current = false
-        if (onQueryChange) onQueryChange(null)
-        if (onBlur) onBlur(event)
-      }
-    }, 0)
-  }
+        if (focusInside === false) {
+          dispatch({type: 'root/blur'})
+          popoverMouseWithinRef.current = false
+          if (onQueryChange) onQueryChange(null)
+          if (onBlur) onBlur(event)
+        }
+      }, 0)
+    },
+    [onBlur, onQueryChange, relatedElements],
+  )
 
-  const handleRootFocus = (event: FocusEvent<HTMLDivElement>) => {
+  const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {
     const listBoxElement = listBoxElementRef.current
     const focusedElement = event.target instanceof HTMLElement ? event.target : null
     const listFocused = listBoxElement?.contains(focusedElement) || false
@@ -257,7 +263,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       dispatch({type: 'root/setListFocused', listFocused})
     }
-  }
+  }, [])
 
   const handleOptionSelect = useCallback(
     (v: string) => {
@@ -351,15 +357,23 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     [onQueryChange],
   )
 
+  const dispatchOpen = useCallback(() => {
+    dispatch({
+      type: 'root/open',
+      query: value ? renderValue(value, currentOption) : '',
+    })
+  }, [currentOption, renderValue, value])
+
   const handleInputFocus = useCallback(
     (event: FocusEvent<HTMLInputElement>) => {
       if (!focused) {
         dispatch({type: 'input/focus'})
 
         if (onFocus) onFocus(event)
+        if (openOnFocus) dispatchOpen()
       }
     },
-    [focused, onFocus],
+    [focused, onFocus, openOnFocus, dispatchOpen],
   )
 
   const handlePopoverMouseEnter = useCallback(() => {
@@ -464,16 +478,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const handleOpenClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
-      dispatch({
-        type: 'root/open',
-        query: value ? renderValue(value, currentOption) : '',
-      })
+      dispatchOpen()
 
       if (openButtonProps.onClick) openButtonProps.onClick(event)
 
       _raf(() => inputElementRef.current?.focus())
     },
-    [currentOption, openButtonProps, renderValue, value],
+    [openButtonProps, dispatchOpen],
   )
 
   const openButtonNode = useMemo(

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -1,7 +1,6 @@
 import {Children, forwardRef, Fragment, isValidElement, useCallback, useMemo, useState} from 'react'
-import {useClickOutside} from '../../hooks'
+import {useArrayProp, useClickOutside} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
-import {_getArrayProp} from '../../styles'
 import {ExpandButton, Root} from './breadcrumbs.styles'
 
 /**
@@ -21,7 +20,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   ref: React.ForwardedRef<HTMLOListElement>,
 ) {
   const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
-  const space = useMemo(() => _getArrayProp(spaceRaw), [spaceRaw])
+  const space = useArrayProp(spaceRaw)
   const [open, setOpen] = useState(false)
   const [expandElement, setExpandElement] = useState<HTMLButtonElement | null>(null)
   const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)

package/src/core/components/dialog/dialog.tsx

@@ -1,14 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 import {
   containsOrEqualsElement,
@@ -16,10 +8,9 @@ import {
   focusLastDescendant,
   isHTMLElement,
 } from '../../helpers'
-import {useClickOutside, useGlobalKeyDown, usePrefersReducedMotion} from '../../hooks'
+import {useArrayProp, useClickOutside, useGlobalKeyDown, usePrefersReducedMotion} from '../../hooks'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
-import {_getArrayProp} from '../../styles'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
@@ -175,9 +166,9 @@ const DialogCard = forwardRef(function DialogCard(
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
   const boundaryElement = useBoundaryElement().element
-  const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
-  const shadow = useMemo(() => _getArrayProp(shadowProp), [shadowProp])
-  const width = useMemo(() => _getArrayProp(widthProp), [widthProp])
+  const radius = useArrayProp(radiusProp)
+  const shadow = useArrayProp(shadowProp)
+  const width = useArrayProp(widthProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const contentRef = useRef<HTMLDivElement | null>(null)
@@ -316,25 +307,23 @@ export const Dialog = forwardRef(function Dialog(
     onFocus,
     padding: paddingProp = 3,
     portal: portalProp,
-    position: _position,
+    position: positionProp = dialog.position || 'fixed',
     scheme,
     width: widthProp = 0,
-    zOffset: _zOffset,
+    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
     animate: _animate = false,
     ...restProps
   } = props
-  const positionProp = _position ?? (dialog.position || 'fixed')
-  const zOffsetProp = _zOffset ?? (dialog.zOffset || layer.dialog.zOffset)
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
   const boundaryElement = useBoundaryElement().element
-  const cardRadius = useMemo(() => _getArrayProp(cardRadiusProp), [cardRadiusProp])
-  const padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
-  const position = useMemo(() => _getArrayProp(positionProp), [positionProp])
-  const width = useMemo(() => _getArrayProp(widthProp), [widthProp])
-  const zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp])
+  const cardRadius = useArrayProp(cardRadiusProp)
+  const padding = useArrayProp(paddingProp)
+  const position = useArrayProp(positionProp)
+  const width = useArrayProp(widthProp)
+  const zOffset = useArrayProp(zOffsetProp)
   const preDivRef = useRef<HTMLDivElement | null>(null)
   const postDivRef = useRef<HTMLDivElement | null>(null)
   const cardRef = useRef<HTMLDivElement | null>(null)

package/src/core/components/hotkeys/hotkeys.tsx

@@ -1,7 +1,7 @@
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'
-import {_getArrayProp} from '../../styles'
 import {Radius} from '../../types'
 
 /**
@@ -40,7 +40,7 @@ export const Hotkeys = forwardRef(function Hotkeys(
   ref: React.Ref<HTMLElement>,
 ) {
   const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
-  const space = useMemo(() => _getArrayProp(spaceProp), [spaceProp])
+  const space = useArrayProp(spaceProp)
 
   if (!keys || keys.length === 0) {
     return <></>

package/src/core/components/menu/menu.tsx

@@ -11,7 +11,6 @@ import {useMenuController} from './useMenuController'
  * @public
  */
 export interface MenuProps extends ResponsivePaddingProps {
-  'aria-labelledby'?: string
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -21,7 +20,6 @@ export interface MenuProps extends ResponsivePaddingProps {
    */
   focusLast?: boolean
   onClickOutside?: (event: MouseEvent) => void
-  onBlurCapture?: (event: React.FocusEvent<HTMLButtonElement>) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void
@@ -59,12 +57,10 @@ export const Menu = forwardRef(function Menu(
     originElement,
     padding = 1,
     registerElement,
-    shouldFocus: _shouldFocus,
+    shouldFocus = (props.focusFirst && 'first') || (props.focusLast && 'last') || null,
     space = 1,
     ...restProps
   } = props
-  const shouldFocus =
-    _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
   const ref = useRef<HTMLDivElement | null>(null)
 

package/src/core/components/menu/menuButton.tsx

@@ -203,9 +203,8 @@ export const MenuButton = forwardRef(function MenuButton(
     }
   }, [])
 
-  const menu =
-    menuProp &&
-    cloneElement<MenuProps>(menuProp, {
+  const menuProps: MenuProps = useMemo(
+    () => ({
       'aria-labelledby': id,
       onBlurCapture: handleBlur,
       onClickOutside: handleMenuClickOutside,
@@ -214,8 +213,22 @@ export const MenuButton = forwardRef(function MenuButton(
       originElement: buttonElement,
       registerElement,
       shouldFocus,
-    })
+    }),
+    [
+      buttonElement,
+      handleMenuClickOutside,
+      handleMenuEscape,
+      handleItemClick,
+      id,
+      handleBlur,
+      registerElement,
+      shouldFocus,
+    ],
+  )
+
+  const menu = menuProp && cloneElement(menuProp, menuProps)
 
+  const ref = useRef<HTMLButtonElement | null>(null)
   const button = useMemo(
     () =>
       buttonProp &&
@@ -227,7 +240,7 @@ export const MenuButton = forwardRef(function MenuButton(
         onMouseDown: handleMouseDown,
         'aria-haspopup': true,
         'aria-expanded': open,
-        ref: setButtonElement,
+        ref: ref,
         selected: buttonProp.props.selected ?? open,
       }),
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open],
@@ -236,10 +249,19 @@ export const MenuButton = forwardRef(function MenuButton(
   // Forward button ref to parent
   useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
     forwardedRef,
-    () => buttonElement,
-    [buttonElement],
+    () => ref.current,
   )
 
+  // If there's a button then we need to set the reference element to the cloned button ref
+  // and if button changes we make sure to update or remove the reference element.
+  useEffect(() => {
+    if (!button) return undefined
+
+    setButtonElement(ref.current)
+
+    return () => setButtonElement(null)
+  }, [button])
+
   const popoverProps: MenuButtonProps['popover'] = useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,
@@ -263,15 +285,8 @@ export const MenuButton = forwardRef(function MenuButton(
   )
 
   return (
-    <>
-      <Popover
-        data-ui="MenuButton__popover"
-        referenceElement={buttonElement}
-        {...popoverProps}
-        content={menu}
-        open={open}
-      />
-      {button}
-    </>
+    <Popover data-ui="MenuButton__popover" {...popoverProps} content={menu} open={open}>
+      {button || <></>}
+    </Popover>
   )
 })

package/src/core/components/menu/menuGroup.tsx

@@ -1,9 +1,9 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {isValidElement, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {isValidElement, useCallback, useEffect, useRef, useState} from 'react'
 import {isValidElementType} from 'react-is'
+import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {_getArrayProp} from '../../styles'
 import {useRootTheme} from '../../theme'
 import {Radius, SelectableTone} from '../../types'
 import {Menu} from './menu'
@@ -39,7 +39,7 @@ export function MenuGroup(
     onClick,
     padding = 3,
     popover,
-    radius: radiusProp = 2,
+    radius = 2,
     space = 3,
     text,
     tone = 'default',
@@ -53,16 +53,14 @@ export function MenuGroup(
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseEnter = menu.onMouseEnter,
     registerElement,
   } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
   const shouldFocusRef = useRef<'first' | 'last' | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const [withinMenu, setWithinMenu] = useState(false)
-  const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
 
   const handleMouseEnter = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
@@ -168,7 +166,7 @@ export function MenuGroup(
         aria-pressed={as === 'button' ? withinMenu : undefined}
         data-pressed={as !== 'button' ? withinMenu : undefined}
         data-selected={!withinMenu && active ? '' : undefined}
-        $radius={radius}
+        $radius={useArrayProp(radius)}
         $tone={tone}
         $scheme={scheme}
         onClick={handleClick}

package/src/core/components/menu/menuItem.tsx

@@ -9,10 +9,10 @@ import {
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
+import {useArrayProp} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
-import {_getArrayProp} from '../../styles'
 import {useRootTheme} from '../../theme'
 import {SelectableTone} from '../../types/selectable'
 import {Hotkeys} from '../hotkeys'
@@ -72,11 +72,9 @@ export const MenuItem = forwardRef(function MenuItem(
     activeElement,
     mount,
     onItemClick,
-    onItemMouseEnter: _onItemMouseEnter,
-    onItemMouseLeave: _onItemMouseLeave,
+    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseLeave = menu.onMouseLeave,
   } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
-  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const ref = useRef<HTMLDivElement | null>(null)
@@ -107,9 +105,7 @@ export const MenuItem = forwardRef(function MenuItem(
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
   )
 
-  const hotkeysFontSize = useMemo(() => _getArrayProp(fontSize).map((s) => s - 1), [fontSize])
-  const $radius = useMemo(() => _getArrayProp(radius), [radius])
-  const $padding = useMemo(() => _getArrayProp(0), [])
+  const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
 
   const setRef = useCallback((el: HTMLDivElement | null) => {
     ref.current = el
@@ -125,8 +121,8 @@ export const MenuItem = forwardRef(function MenuItem(
       data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       forwardedAs={as}
-      $radius={$radius}
-      $padding={$padding}
+      $radius={useArrayProp(radius)}
+      $padding={useArrayProp(0)}
       $tone={disabled ? 'default' : tone}
       $scheme={scheme}
       disabled={disabled}

package/src/core/components/skeleton/skeleton.tsx

@@ -1,8 +1,8 @@
-import {forwardRef, useEffect, useMemo, useState} from 'react'
+import {forwardRef, useEffect, useState} from 'react'
 import {styled} from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Box} from '../../primitives'
 import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
-import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {skeletonStyle} from './styles'
 
@@ -45,7 +45,13 @@ export const Skeleton = forwardRef(function Skeleton(
     }
   }, [delay])
 
-  const $radius = useMemo(() => _getArrayProp(radius), [radius])
-
-  return <Root {...restProps} $animated={animated} $radius={$radius} $visible={visible} ref={ref} />
+  return (
+    <Root
+      {...restProps}
+      $animated={animated}
+      $radius={useArrayProp(radius)}
+      $visible={visible}
+      ref={ref}
+    />
+  )
 })