@sanity/ui - npm Package Compare versions

Comparing version 2.1.15-canary.6 to 2.2.0

dist/index.d.ts

@@ -589,2 +589,3 @@ /// <reference types="react" />
   __unstable_focusRing?: boolean
+  muted?: boolean
   pressed?: boolean
@@ -601,2 +602,3 @@ scheme?: ThemeColorSchemeKey_2
   $focusRing: boolean
+  $muted: boolean
   $tone: ThemeColorToneKey
@@ -2689,9 +2691,2 @@ }
  * @beta
- * @deprecated use `useImperativeHandle` instead
- * @example
- * ```diff
- * -const ref = useForwardedRef(forwardedRef)
- * +const ref = useRef(null)
- * +useImperativeHandle(forwardedRef, () => ref.current)
- * ```
  */
@@ -2698,0 +2693,0 @@ export declare function useForwardedRef<T>(

package.json

 {
   "name": "@sanity/ui",
-  "version": "2.1.15-canary.6",
+  "version": "2.2.0",
   "keywords": [
@@ -54,2 +54,28 @@ "sanity",
   ],
+  "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": {
@@ -97,3 +123,3 @@ "extends": [
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "6.8.20-canary.0",
+    "@sanity/pkg-utils": "^6.8.18",
     "@sanity/semantic-release-preset": "^4.1.7",
@@ -128,3 +154,2 @@ "@sanity/ui-workshop": "^2.0.13",
     "@typescript-eslint/parser": "^7.11.0",
-    "babel-plugin-react-compiler": "0.0.0-experimental-938cd9a-20240601",
     "commitizen": "^4.3.0",
@@ -141,3 +166,3 @@ "cypress": "^13.10.0",
     "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-a97cca1-20240529",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-c8b3f72-20240517",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -153,7 +178,7 @@ "eslint-plugin-storybook": "^0.8.0",
     "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",
@@ -171,7 +196,8 @@ "rimraf": "^5.0.5",
   "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": {
@@ -185,27 +211,3 @@ "node": ">=14.0.0"
     "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"
   }
-}
+}

src/core/hooks/useArrayProp.ts

@@ -15,3 +15,12 @@ import {useMemo} from 'react'
 ): 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__],
+  )
 }

src/core/hooks/useForwardedRef.ts

@@ -1,12 +0,6 @@
-import {useImperativeHandle, useRef} from 'react'
+import {useRef} from 'react'
+import {useIsomorphicEffect} from './useIsomorphicEffect'
 
 /**
  * @beta
- * @deprecated use `useImperativeHandle` instead
- * @example
- * ```diff
- * -const ref = useForwardedRef(forwardedRef)
- * +const ref = useRef(null)
- * +useImperativeHandle(forwardedRef, () => ref.current)
- * ```
  */
@@ -16,5 +10,13 @@ export function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRefObject<T | null> {
 
-  useImperativeHandle(ref, () => innerRef.current!)
+  useIsomorphicEffect(() => {
+    if (!ref) return
 
+    if (typeof ref === 'function') {
+      ref(innerRef.current)
+    } else {
+      ref.current = innerRef.current
+    }
+  })
+
   return innerRef
 }

src/core/hooks/useIsomorphicEffect.ts

@@ -5,4 +5,3 @@ import {useEffect, useLayoutEffect} from 'react'
  * @beta
- * @deprecated use `useLayoutEffect` instead, or `useEffect` if possible
  */
 export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

src/core/primitives/card/styles.ts

@@ -52,3 +52,3 @@ import {getTheme_v2} from '@sanity/ui/theme'
 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)
@@ -62,3 +62,3 @@ const border = {width: card.border.width, color: 'var(--card-border-color)'}
 
-    background-color: var(--card-bg-color);
+    background-color: ${$muted ? 'var(--card-muted-bg-color)' : 'var(--card-bg-color)'};
     color: var(--card-fg-color);
@@ -65,0 +65,0 @@

src/core/primitives/card/types.ts

@@ -9,3 +9,4 @@ import {ThemeColorToneKey} from '@sanity/ui/theme'
   $focusRing: boolean
+  $muted: boolean
   $tone: ThemeColorToneKey
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

74

decreased by-1.33%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

4490348

decreased by-11.05%

Lines of code

62691

decreased by-4.24%

No dependency changes