@sanity/ui 3.0.11 → 3.0.12-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.11",
+  "version": "3.0.12-canary.1",
   "keywords": [
     "sanity",
     "ui",
@@ -60,32 +60,6 @@
     "exports",
     "src"
   ],
-  "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 --cache .",
-    "prepack": "pnpm build",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "prepare": "husky install",
-    "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"
@@ -210,25 +184,37 @@
     "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.15.9",
   "engines": {
     "node": ">=20.19 <22 || >=22.12"
   },
   "publishConfig": {
     "access": "public"
   },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "$@types/react",
-      "@types/react-dom": "$@types/react-dom",
-      "@types/react-is": "$@types/react-is",
-      "conventional-changelog-conventionalcommits": ">= 8.0.0",
-      "react": "$react",
-      "react-dom": "$react-dom",
-      "react-is": "$react-is"
-    }
-  },
   "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 .",
+    "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"
   }
-}
+}

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

@@ -21,7 +21,6 @@ import {
 
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp} from '../../hooks'
 import {
   Box,
   BoxProps,
@@ -33,6 +32,7 @@ import {
   Text,
   TextInput,
 } from '../../primitives'
+import {_getArrayProp} from '../../styles'
 import {Radius} from '../../types'
 import {AnimatedSpinnerIcon, ListBox, StyledAutocomplete} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
@@ -214,7 +214,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
-  const padding = useArrayProp(paddingProp)
+  const padding = _getArrayProp(paddingProp)
   const currentOption = useMemo(
     () => (value !== null ? options.find((o) => o.value === value) : undefined),
     [options, value],

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

@@ -9,8 +9,9 @@ import {
   useState,
 } from 'react'
 
-import {useArrayProp, useClickOutsideEvent} from '../../hooks'
+import {useClickOutsideEvent} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
+import {_getArrayProp} from '../../styles'
 import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
 
 /**
@@ -30,7 +31,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   ref: React.ForwardedRef<HTMLOListElement>,
 ) {
   const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
-  const space = useArrayProp(spaceRaw)
+  const space = _getArrayProp(spaceRaw)
   const [open, setOpen] = useState(false)
   const expandElementRef = useRef<HTMLButtonElement | null>(null)
   const popoverElementRef = useRef<HTMLDivElement | null>(null)
@@ -42,44 +43,16 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
 
   const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
 
-  const items = useMemo(() => {
-    const len = rawItems.length
-
-    if (maxLength && len > maxLength) {
-      const beforeLength = Math.ceil(maxLength / 2)
-      const afterLength = Math.floor(maxLength / 2)
-
-      return [
-        ...rawItems.slice(0, beforeLength - 1),
-        <Popover
-          constrainSize
-          content={
-            <Stack as="ol" overflow="auto" padding={space} space={space}>
-              {rawItems.slice(beforeLength - 1, len - afterLength)}
-            </Stack>
-          }
-          key="button"
-          open={open}
-          placement="top"
-          portal
-          ref={popoverElementRef}
-        >
-          <ExpandButton
-            fontSize={1}
-            mode="bleed"
-            onClick={open ? collapse : expand}
-            padding={1}
-            ref={expandElementRef}
-            selected={open}
-            text="…"
-          />
-        </Popover>,
-        ...rawItems.slice(len - afterLength),
-      ]
-    }
-
-    return rawItems
-  }, [collapse, expand, maxLength, open, rawItems, space])
+  const items = useItems({
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    rawItems,
+    space,
+  })
 
   return (
     <StyledBreadcrumbs data-ui="Breadcrumbs" {...restProps} ref={ref}>
@@ -97,3 +70,60 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   )
 })
 Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'
+
+function useItems({
+  collapse,
+  expand,
+  expandElementRef,
+  maxLength,
+  open,
+  popoverElementRef,
+  rawItems,
+  space,
+}: {
+  collapse: () => void
+  expand: () => void
+  expandElementRef: React.RefObject<HTMLButtonElement | null>
+  maxLength: number | undefined
+  open: boolean
+  popoverElementRef: React.RefObject<HTMLDivElement | null>
+  rawItems: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]
+  space: number[]
+}) {
+  const len = rawItems.length
+
+  if (maxLength && len > maxLength) {
+    const beforeLength = Math.ceil(maxLength / 2)
+    const afterLength = Math.floor(maxLength / 2)
+
+    return [
+      ...rawItems.slice(0, beforeLength - 1),
+      <Popover
+        constrainSize
+        content={
+          <Stack as="ol" overflow="auto" padding={space} space={space}>
+            {rawItems.slice(beforeLength - 1, len - afterLength)}
+          </Stack>
+        }
+        key="button"
+        open={open}
+        placement="top"
+        portal
+        ref={popoverElementRef}
+      >
+        <ExpandButton
+          fontSize={1}
+          mode="bleed"
+          onClick={open ? collapse : expand}
+          padding={1}
+          ref={expandElementRef}
+          selected={open}
+          text="…"
+        />
+      </Popover>,
+      ...rawItems.slice(len - afterLength),
+    ]
+  }
+
+  return rawItems
+}

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

@@ -9,14 +9,10 @@ import {
   focusLastDescendant,
   isHTMLElement,
 } from '../../helpers'
-import {
-  useArrayProp,
-  useClickOutsideEvent,
-  useGlobalKeyDown,
-  usePrefersReducedMotion,
-} from '../../hooks'
+import {useClickOutsideEvent, 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'
@@ -172,9 +168,9 @@ const DialogCard = forwardRef(function DialogCard(
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
   const boundaryElement = useBoundaryElement().element
-  const radius = useArrayProp(radiusProp)
-  const shadow = useArrayProp(shadowProp)
-  const width = useArrayProp(widthProp)
+  const radius = _getArrayProp(radiusProp)
+  const shadow = _getArrayProp(shadowProp)
+  const width = _getArrayProp(widthProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const contentRef = useRef<HTMLDivElement | null>(null)
   const layer = useLayer()
@@ -320,11 +316,11 @@ export const Dialog = forwardRef(function Dialog(
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
   const boundaryElement = useBoundaryElement().element
-  const cardRadius = useArrayProp(cardRadiusProp)
-  const padding = useArrayProp(paddingProp)
-  const position = useArrayProp(positionProp)
-  const width = useArrayProp(widthProp)
-  const zOffset = useArrayProp(zOffsetProp)
+  const cardRadius = _getArrayProp(cardRadiusProp)
+  const padding = _getArrayProp(paddingProp)
+  const position = _getArrayProp(positionProp)
+  const width = _getArrayProp(widthProp)
+  const zOffset = _getArrayProp(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,8 +1,8 @@
 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'
 
 /**
@@ -41,7 +41,7 @@ export const Hotkeys = forwardRef(function Hotkeys(
   ref: React.Ref<HTMLElement>,
 ) {
   const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
-  const space = useArrayProp(spaceProp)
+  const space = _getArrayProp(spaceProp)
 
   if (!keys || keys.length === 0) {
     return <></>

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

@@ -2,9 +2,9 @@ import {ChevronRightIcon} from '@sanity/icons'
 import {isValidElement, useCallback, useEffect, 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, MenuProps} from './menu'
@@ -181,7 +181,7 @@ export function MenuGroup(
         aria-pressed={as === 'button' ? withinMenu : undefined}
         data-pressed={as !== 'button' ? withinMenu : undefined}
         data-selected={!withinMenu && active ? '' : undefined}
-        $radius={useArrayProp(radius)}
+        $radius={_getArrayProp(radius)}
         $tone={tone}
         $scheme={scheme}
         onClick={handleClick}

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

@@ -10,7 +10,7 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {useArrayProp} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
@@ -108,7 +108,7 @@ export const MenuItem = forwardRef(function MenuItem(
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
   )
 
-  const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
+  const hotkeysFontSize = getArrayProp(fontSize).map((s) => s - 1)
 
   const setRef = useCallback((el: HTMLDivElement | null) => {
     ref.current = el
@@ -124,8 +124,8 @@ export const MenuItem = forwardRef(function MenuItem(
       data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       forwardedAs={as}
-      $radius={useArrayProp(radius)}
-      $padding={useArrayProp(0)}
+      $radius={getArrayProp(radius)}
+      $padding={getArrayProp(0)}
       $tone={disabled ? 'default' : tone}
       $scheme={scheme}
       disabled={disabled}

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

@@ -1,7 +1,7 @@
 import {forwardRef, useEffect, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 import {Box, BoxProps, ResponsiveRadiusProps} from '../../primitives'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {skeletonStyle} from './styles'
@@ -48,7 +48,7 @@ export const Skeleton = forwardRef(function Skeleton(
     <StyledSkeleton
       {...restProps}
       $animated={animated}
-      $radius={useArrayProp(radius)}
+      $radius={getArrayProp(radius)}
       $visible={visible}
       ref={ref}
     />

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

@@ -2,7 +2,7 @@ import {getTheme_v2, ThemeFontKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 import {_responsive, ThemeProps} from '../../styles'
 import {Skeleton, SkeletonProps} from './skeleton'
 
@@ -68,7 +68,7 @@ export const TextSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = getArrayProp(size)
 
   return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="text" />
 })
@@ -84,7 +84,7 @@ export const LabelSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = getArrayProp(size)
 
   return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="label" />
 })
@@ -100,7 +100,7 @@ export const HeadingSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = getArrayProp(size)
 
   return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="heading" />
 })
@@ -116,7 +116,7 @@ export const CodeSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = getArrayProp(size)
 
   return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="code" />
 })