@sanity/ui 2.8.24-canary.2 → 2.8.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.8.24-canary.2",
+  "version": "2.8.25",
   "keywords": [
     "sanity",
     "ui",
@@ -51,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",
+    "prepack": "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 +110,7 @@
     "@sanity/icons": "^3.4.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
-    "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
+    "react-compiler-runtime": "19.0.0-beta-df7b47d-20241124",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -96,24 +122,24 @@
     "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.11.10",
+    "@sanity/pkg-utils": "^6.11.11",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.16",
-    "@storybook/addon-a11y": "^8.4.2",
-    "@storybook/addon-docs": "^8.4.2",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-mdx-gfm": "^8.4.2",
-    "@storybook/addon-storysource": "^8.4.2",
-    "@storybook/addon-themes": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/manager-api": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-vite": "^8.4.2",
-    "@storybook/test": "^8.4.2",
-    "@storybook/theming": "^8.4.2",
+    "@storybook/addon-a11y": "^8.4.5",
+    "@storybook/addon-docs": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/addon-mdx-gfm": "^8.4.5",
+    "@storybook/addon-storysource": "^8.4.5",
+    "@storybook/addon-themes": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@storybook/theming": "^8.4.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
@@ -128,7 +154,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.3",
-    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "commitizen": "^4.3.0",
     "cypress": "^13.13.2",
     "cypress-real-events": "^1.13.0",
@@ -140,7 +166,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-storybook": "^0.11.0",
     "http-server": "^14.1.1",
@@ -159,11 +185,11 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^24.0.0",
     "start-server-and-test": "^2.0.5",
-    "storybook": "^8.4.2",
+    "storybook": "^8.4.5",
     "styled-components": "^6.1.13",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.6.3",
-    "vite": "^5.4.10",
+    "vite": "^5.4.11",
     "vite-tsconfig-paths": "^5.0.1"
   },
   "peerDependencies": {
@@ -172,37 +198,19 @@
     "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@9.12.3",
   "engines": {
     "node": ">=14.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
+  "pnpm": {
+    "overrides": {
+      "conventional-changelog-conventionalcommits": ">= 8.0.0"
+    }
+  },
   "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"
   }
-}
+}

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

@@ -20,7 +20,7 @@ import {
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {
   Box,
   BoxProps,

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

@@ -8,8 +8,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import {useClickOutsideEvent} from '../../hooks'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp, useClickOutsideEvent} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
 import {ExpandButton, Root} from './breadcrumbs.styles'
 

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

@@ -8,8 +8,12 @@ import {
   focusLastDescendant,
   isHTMLElement,
 } from '../../helpers'
-import {useClickOutsideEvent, useGlobalKeyDown, usePrefersReducedMotion} from '../../hooks'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {
+  useArrayProp,
+  useClickOutsideEvent,
+  useGlobalKeyDown,
+  usePrefersReducedMotion,
+} from '../../hooks'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'

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

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'
 import {Radius} from '../../types'
 

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

@@ -1,7 +1,7 @@
 import {ChevronRightIcon} from '@sanity/icons'
 import {isValidElement, useCallback, useEffect, useState} from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {useRootTheme} from '../../theme'

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

@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'

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

@@ -1,6 +1,6 @@
 import {forwardRef, useEffect, useState} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {Box} from '../../primitives'
 import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'

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

@@ -1,7 +1,7 @@
 import {ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {ThemeProps, _responsive} from '../../styles'
 import {Skeleton, SkeletonProps} from './skeleton'
 

package/src/core/hooks/index.ts

@@ -1,4 +1,4 @@
-export * from './useArrayPropLegacy'
+export * from './useArrayProp'
 export * from './useClickOutside'
 export * from './useClickOutsideEvent'
 export * from './useCustomValidity'

package/src/core/hooks/useArrayProp.ts

@@ -10,23 +10,21 @@ export type ArrayPropPrimitive = string | number | boolean | undefined | null
  */
 export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
+  defaultVal?: T[],
 ): T[] {
   const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
-    _getArrayProp(val),
-    JSON.stringify(val),
+    _getArrayProp(val, defaultVal),
+    JSON.stringify(val ?? defaultVal),
   ])
-  let result = cachedVal
 
-  const hash = JSON.stringify(val)
+  const hash = JSON.stringify(val ?? defaultVal)
 
   if (hash !== cachedHash) {
-    const current = _getArrayProp(val)
     // If the cached hash has changed, update the cache right away.
     // Calling setState during render is fine in this case, and preferred over a useEffect loop
     // https://19.react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-    setCache([current, hash])
-    result = current
+    setCache([_getArrayProp(val, defaultVal), hash])
   }
 
-  return result
+  return cachedVal
 }

package/src/core/primitives/avatar/avatar.tsx

@@ -2,7 +2,7 @@ import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {useTheme_v2} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Label} from '../label'

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -2,7 +2,7 @@ import {getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef, useMemo} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {Label} from '../label'

package/src/core/primitives/avatar/avatarStack.tsx

@@ -2,7 +2,7 @@ import {getTheme_v2} from '@sanity/ui/theme'
 import {Children, cloneElement, forwardRef, isValidElement} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {AvatarCounter} from './avatarCounter'

package/src/core/primitives/badge/badge.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'

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

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {
   boxStyle,
   flexItemStyle,

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

@@ -1,7 +1,7 @@
 import {forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'

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

@@ -2,7 +2,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,

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

@@ -2,7 +2,7 @@
 import {forwardRef} from 'react'
 import Refractor from 'react-refractor'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'
 

package/src/core/primitives/container/container.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {ResponsiveWidthProps} from '../types'
 import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'

package/src/core/primitives/flex/flex.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {
   flexItemStyle,
   FlexItemStyleProps,

package/src/core/primitives/grid/grid.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 import {ResponsiveGridProps} from '../types'

package/src/core/primitives/heading/heading.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,

package/src/core/primitives/inline/inline.tsx

@@ -1,6 +1,6 @@
 import {forwardRef, useMemo, Children} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'

package/src/core/primitives/kbd/kbd.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled, css} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Radius} from '../../types'
 import {Box} from '../box'

package/src/core/primitives/label/label.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'

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

@@ -24,8 +24,7 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import {useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
-import {useArrayProp} 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'

package/src/core/primitives/select/select.tsx

@@ -1,8 +1,7 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity} from '../../hooks'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useCustomValidity, useArrayProp} from '../../hooks'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'

package/src/core/primitives/stack/stack.tsx

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
 

package/src/core/primitives/text/text.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveTextAlignStyle,

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

@@ -1,8 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity} from '../../hooks'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useCustomValidity, useArrayProp} from '../../hooks'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,

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

@@ -4,8 +4,7 @@ import {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, u
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useCustomValidity} from '../../hooks'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp, useCustomValidity} from '../../hooks'
 import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,

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

@@ -25,8 +25,7 @@ import {
 } from 'react'
 import {styled} from 'styled-components'
 import {useEffectEvent} from 'use-effect-event'
-import {usePrefersReducedMotion} from '../../hooks'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'

package/src/core/styles/helpers.ts

@@ -42,8 +42,8 @@ export function _responsive<T>(
 /**
  * @internal
  */
-export function _getArrayProp<T = number>(val: T | T[] | undefined): T[] {
-  if (val === undefined) return EMPTY_ARRAY
+export function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
+  if (val === undefined) return defaultVal || EMPTY_ARRAY
 
   return Array.isArray(val) ? val : [val]
 }

package/src/core/utils/layer/layerProvider.tsx

@@ -1,6 +1,5 @@
 import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import {useMediaIndex} from '../../hooks'
-import {useArrayProp} from '../../hooks/useArrayProp'
+import {useMediaIndex, useArrayProp} from '../../hooks'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'

package/src/core/utils/portal/portalProvider.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useState, useSyncExternalStore} from 'react'
+import {useMemo, useRef, useSyncExternalStore} from 'react'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
@@ -22,8 +22,8 @@ export interface PortalProviderProps {
  * @public
  */
 export function PortalProvider(props: PortalProviderProps): React.ReactElement {
-  const {boundaryElement, children, element} = props
-  const elements = useUnique(props.__unstable_elements)
+  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
+  const elements = useUnique(elementsProp)
   const fallbackElement = useSyncExternalStore(
     emptySubscribe,
     () => document.body,
@@ -51,18 +51,16 @@ const emptySubscribe = () => () => {}
  * equality comparison (eg by identity), and only goes one level deep.
  */
 function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
-  const [cachedValue, setCachedValue] = useState(value)
-  let result = cachedValue
+  const valueRef = useRef<ValueType>(value)
 
-  if (!isEqual(cachedValue, value)) {
-    setCachedValue(value)
-    result = value
+  if (!_isEqual(valueRef.current, value)) {
+    valueRef.current = value
   }
 
-  return result
+  return valueRef.current
 }
 
-function isEqual(objA: Comparable, objB: Comparable): boolean {
+function _isEqual(objA: Comparable, objB: Comparable): boolean {
   if (!objA || !objB) {
     return objA === objB
   }

package/src/core/hooks/useArrayPropLegacy.ts

@@ -1,30 +0,0 @@
-import {useArrayProp as useArrayPropHook, type ArrayPropPrimitive} from './useArrayProp'
-
-export type {ArrayPropPrimitive}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
-  val: T | T[] | undefined,
-): T[]
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- * @deprecated - use `useArrayProp(value ?? defaultValue)` instead of `useArrayProp(value, defaultValue)`
- */
-export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
-  val: T | T[] | undefined,
-  defaultVal: T[],
-): T[]
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
-  val: T | T[] | undefined,
-  defaultVal?: T[],
-): T[] {
-  return useArrayPropHook(val ?? defaultVal)
-}