@sanity/ui 2.8.23 → 2.8.24-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.8.23",
+  "version": "2.8.24-canary.1",
   "keywords": [
     "sanity",
     "ui",
@@ -51,32 +51,6 @@
     "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"
@@ -122,7 +96,7 @@
     "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.11.9",
+    "@sanity/pkg-utils": "^6.11.10",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.16",
@@ -198,19 +172,37 @@
     "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/hooks/useArrayProp.ts

@@ -10,21 +10,23 @@ 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, defaultVal),
-    JSON.stringify(val ?? defaultVal),
+    _getArrayProp(val),
+    JSON.stringify(val),
   ])
+  let result = cachedVal
 
-  const hash = JSON.stringify(val ?? defaultVal)
+  const hash = JSON.stringify(val)
 
   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([_getArrayProp(val, defaultVal), hash])
+    setCache([current, hash])
+    result = current
   }
 
-  return cachedVal
+  return result
 }

package/src/core/styles/helpers.ts

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

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

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