@sanity/ui 2.1.15-canary.6 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.1.15-canary.6",
+  "version": "2.3.0",
   "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",
+    "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"
@@ -93,9 +119,9 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "6.8.20-canary.0",
-    "@sanity/semantic-release-preset": "^4.1.7",
-    "@sanity/ui-workshop": "^2.0.13",
+    "@sanity/pkg-utils": "^6.8.19",
+    "@sanity/semantic-release-preset": "^4.1.8",
+    "@sanity/ui-workshop": "^2.0.15",
     "@storybook/addon-a11y": "^8.0.8",
     "@storybook/addon-docs": "^8.0.8",
     "@storybook/addon-essentials": "^8.0.8",
@@ -112,7 +138,7 @@
     "@storybook/theming": "^8.0.8",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
@@ -121,9 +147,8 @@
     "@types/react-is": "^18.3.0",
     "@types/refractor": "^3.4.1",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
-    "babel-plugin-react-compiler": "0.0.0-experimental-938cd9a-20240601",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
     "commitizen": "^4.3.0",
     "cypress": "^13.10.0",
     "cypress-real-events": "^1.12.0",
@@ -146,14 +171,14 @@
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.0",
     "prettier-plugin-packagejson": "^2.5.0",
-    "react": "19.0.0-rc-6d3110b4d9-20240531",
-    "react-dom": "19.0.0-rc-6d3110b4d9-20240531",
-    "react-is": "19.0.0-rc-6d3110b4d9-20240531",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.5",
-    "semantic-release": "^23.1.1",
+    "semantic-release": "^24.0.0",
     "start-server-and-test": "^2.0.3",
     "storybook": "^8.0.8",
     "styled-components": "^6.1.11",
@@ -163,11 +188,12 @@
     "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
-    "react": ">=19.0.0-rc",
-    "react-dom": ">=19.0.0-rc",
-    "react-is": ">=19.0.0-rc",
-    "styled-components": "^6.1"
+    "react": "^18",
+    "react-dom": "^18",
+    "react-is": "^18",
+    "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@9.1.3",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -177,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/hooks/useArrayProp.ts

@@ -12,5 +12,14 @@ export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[],
 ): T[] {
-  return useMemo(() => _getArrayProp(val, defaultVal), [defaultVal, val])
+  // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
+  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val])
+
+  return useMemo(
+    () => _getArrayProp(val, defaultVal),
+
+    // Improve performance: Keep object identify for a given hash of the value
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [__perf_hash__],
+  )
 }

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

@@ -12,6 +12,7 @@ export default function PropsStory() {
   const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div', 'Props')
   const border = useBoolean('Border', false, 'Props')
   const checkered = useBoolean('Checkered', false, 'Props')
+  const muted = useBoolean('Muted', false, 'Props')
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
   const selected = useBoolean('Selected', false, 'Props')
@@ -24,6 +25,7 @@ export default function PropsStory() {
         __unstable_checkered={checkered}
         as={as}
         border={border}
+        muted={muted}
         onClick={useAction('onClick')}
         padding={padding}
         radius={radius}

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

@@ -36,6 +36,7 @@ export interface CardProps
    * @beta
    */
   __unstable_focusRing?: boolean
+  muted?: boolean
   pressed?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: CardTone
@@ -67,6 +68,7 @@ export const Card = forwardRef(function Card(
     borderRight,
     borderBottom,
     borderLeft,
+    muted,
     pressed,
     radius = 0,
     scheme,
@@ -96,6 +98,7 @@ export const Card = forwardRef(function Card(
         $borderLeft={useArrayProp(borderLeft)}
         $checkered={checkered}
         $focusRing={focusRing}
+        $muted={muted}
         $radius={useArrayProp(radius)}
         $shadow={useArrayProp(shadow)}
         $tone={tone}

package/src/core/primitives/card/styles.ts

@@ -49,7 +49,7 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
 }
 
 export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, $focusRing} = props
+  const {$checkered, $focusRing, $muted} = props
   const {card, color, style} = getTheme_v2(props.theme)
   const border = {width: card.border.width, color: 'var(--card-border-color)'}
 
@@ -58,7 +58,7 @@ export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<t
 
     ${_cardColorStyle(color, color, $checkered)}
 
-    background-color: var(--card-bg-color);
+    background-color: ${$muted ? 'var(--card-muted-bg-color)' : 'var(--card-bg-color)'};
     color: var(--card-fg-color);
 
     /* &:is(button) */

package/src/core/primitives/card/types.ts

@@ -6,5 +6,6 @@ import {ThemeColorToneKey} from '@sanity/ui/theme'
 export interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
+  $muted: boolean
   $tone: ThemeColorToneKey
 }