@sanity/ui - npm Package Compare versions

Comparing version 2.6.7-canary.0 to 2.6.7

dist/theme.d.ts

@@ -578,11 +578,11 @@ import {ColorHueKey} from '@sanity/color'
   '*'?: ThemeColorAvatarHueTokens
-  'gray'?: ThemeColorAvatarHueTokens
-  'blue'?: ThemeColorAvatarHueTokens
-  'purple'?: ThemeColorAvatarHueTokens
-  'magenta'?: ThemeColorAvatarHueTokens
-  'red'?: ThemeColorAvatarHueTokens
-  'orange'?: ThemeColorAvatarHueTokens
-  'yellow'?: ThemeColorAvatarHueTokens
-  'green'?: ThemeColorAvatarHueTokens
-  'cyan'?: ThemeColorAvatarHueTokens
+  gray?: ThemeColorAvatarHueTokens
+  blue?: ThemeColorAvatarHueTokens
+  purple?: ThemeColorAvatarHueTokens
+  magenta?: ThemeColorAvatarHueTokens
+  red?: ThemeColorAvatarHueTokens
+  orange?: ThemeColorAvatarHueTokens
+  yellow?: ThemeColorAvatarHueTokens
+  green?: ThemeColorAvatarHueTokens
+  cyan?: ThemeColorAvatarHueTokens
 }
@@ -613,7 +613,7 @@
   '*'?: ThemeColorBadgeToneTokens
-  'default'?: ThemeColorBadgeToneTokens
-  'primary'?: ThemeColorBadgeToneTokens
-  'positive'?: ThemeColorBadgeToneTokens
-  'caution'?: ThemeColorBadgeToneTokens
-  'critical'?: ThemeColorBadgeToneTokens
+  default?: ThemeColorBadgeToneTokens
+  primary?: ThemeColorBadgeToneTokens
+  positive?: ThemeColorBadgeToneTokens
+  caution?: ThemeColorBadgeToneTokens
+  critical?: ThemeColorBadgeToneTokens
 }
@@ -620,0 +620,0 @@

package.json

 {
   "name": "@sanity/ui",
-  "version": "2.6.7-canary.0",
+  "version": "2.6.7",
   "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": {
@@ -65,3 +91,2 @@ "extends": [
   },
-  "prettier": "@sanity/prettier-config",
   "release": {
@@ -89,4 +114,3 @@ "branches": [
     "framer-motion": "11.0.8",
-    "react-refractor": "^2.2.0",
-    "use-effect-event": "^1.0.2"
+    "react-refractor": "^2.2.0"
   },
@@ -102,21 +126,20 @@ "devDependencies": {
     "@sanity/pkg-utils": "^6.10.3",
-    "@sanity/prettier-config": "^1.0.2",
-    "@sanity/semantic-release-preset": "^5.0.0",
+    "@sanity/semantic-release-preset": "^4.1.8",
     "@sanity/ui-workshop": "^2.0.15",
-    "@storybook/addon-a11y": "^8.2.1",
-    "@storybook/addon-docs": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-interactions": "^8.2.1",
-    "@storybook/addon-links": "^8.2.1",
-    "@storybook/addon-mdx-gfm": "^8.2.1",
-    "@storybook/addon-storysource": "^8.2.1",
-    "@storybook/addon-themes": "^8.2.1",
-    "@storybook/blocks": "^8.2.1",
-    "@storybook/manager-api": "^8.2.1",
-    "@storybook/react": "^8.2.1",
-    "@storybook/react-vite": "^8.2.1",
-    "@storybook/test": "^8.2.1",
-    "@storybook/theming": "^8.2.1",
+    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-docs": "^8.0.8",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-storysource": "^8.0.8",
+    "@storybook/addon-themes": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/manager-api": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-vite": "^8.0.8",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^8.0.8",
     "@testing-library/dom": "^10.3.1",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^16.0.0",
@@ -130,2 +153,3 @@ "@types/jest": "^29.5.12",
     "@types/refractor": "^3.4.1",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
@@ -156,2 +180,3 @@ "@typescript-eslint/parser": "^7.16.0",
     "prettier": "^3.3.2",
+    "prettier-plugin-packagejson": "^2.5.0",
     "react": "^18.3.1",
@@ -164,3 +189,3 @@ "react-dom": "^18.3.1",
     "start-server-and-test": "^2.0.4",
-    "storybook": "^8.2.1",
+    "storybook": "^8.0.8",
     "styled-components": "^6.1.11",
@@ -178,2 +203,3 @@ "tsconfig-paths": "^4.2.0",
   },
+  "packageManager": "pnpm@9.5.0",
   "engines": {
@@ -188,26 +214,7 @@ "node": ">=14.0.0"
   },
-  "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"
+    }
   }
-}
+}

src/core/__workshop__/constants.ts

@@ -47,5 +47,5 @@ import {icons, IconSymbol} from '@sanity/icons'
   '(none)': '',
-  'Left': 'left',
-  'Right': 'right',
-  'Center': 'center',
+  Left: 'left',
+  Right: 'right',
+  Center: 'center',
 }
@@ -65,7 +65,7 @@
   'DIV (default)': 'div',
-  'BUTTON': 'button',
-  'SPAN': 'span',
-  'OL': 'ol',
-  'PRE': 'pre',
-  'UL': 'ul',
+  BUTTON: 'button',
+  SPAN: 'span',
+  OL: 'ol',
+  PRE: 'pre',
+  UL: 'ul',
 }
@@ -97,3 +97,3 @@
   '5': 5,
-  'auto': 'auto',
+  auto: 'auto',
 }
@@ -112,11 +112,11 @@
 export const WORKSHOP_FLEX_ALIGN_OPTIONS: Record<FlexAlign, FlexAlign> = {
-  'baseline': 'baseline',
-  'center': 'center',
+  baseline: 'baseline',
+  center: 'center',
   'flex-end': 'flex-end',
   'flex-start': 'flex-start',
-  'stretch': 'stretch',
+  stretch: 'stretch',
 }
 
 export const WORKSHOP_FLEX_JUSTIFY_OPTIONS: Record<FlexJustify, FlexJustify> = {
-  'center': 'center',
+  center: 'center',
   'flex-end': 'flex-end',
@@ -164,12 +164,12 @@ 'flex-start': 'flex-start',
 export const WORKSHOP_PLACEMENT_OPTIONS: Record<Placement, Placement> = {
-  'top': 'top',
+  top: 'top',
   'top-start': 'top-start',
   'top-end': 'top-end',
-  'right': 'right',
+  right: 'right',
   'right-start': 'right-start',
   'right-end': 'right-end',
-  'left': 'left',
+  left: 'left',
   'left-start': 'left-start',
   'left-end': 'left-end',
-  'bottom': 'bottom',
+  bottom: 'bottom',
   'bottom-start': 'bottom-start',
@@ -225,7 +225,7 @@ 'bottom-end': 'bottom-end',
   '(none)': '',
-  'Initial': 'initial',
-  'Left': 'left',
-  'Right': 'right',
-  'Center': 'center',
-  'Justify': 'justify',
+  Initial: 'initial',
+  Left: 'left',
+  Right: 'right',
+  Center: 'center',
+  Justify: 'justify',
 }
@@ -242,13 +242,13 @@
 export const WORKSHOP_TEXT_INPUT_TYPE_OPTIONS: {[key: string]: TextInputType} = {
-  'date': 'date',
+  date: 'date',
   'datetime-local': 'datetime-local',
-  'email': 'email',
-  'month': 'month',
-  'number': 'number',
-  'password': 'password',
-  'tel': 'tel',
-  'time': 'time',
-  'text': 'text',
-  'week': 'week',
-  'color': 'color',
+  email: 'email',
+  month: 'month',
+  number: 'number',
+  password: 'password',
+  tel: 'tel',
+  time: 'time',
+  text: 'text',
+  week: 'week',
+  color: 'color',
 }
@@ -271,5 +271,5 @@
   'Regular (default)': '',
-  'Medium': 'medium',
-  'Semibold': 'semibold',
-  'Bold': 'bold',
+  Medium: 'medium',
+  Semibold: 'semibold',
+  Bold: 'bold',
 }
@@ -297,3 +297,3 @@
 export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
-  'Auto': 'auto',
+  Auto: 'auto',
   '0': 0,
@@ -300,0 +300,0 @@ '1': 1,

src/core/components/dialog/styles.ts

@@ -21,10 +21,10 @@ import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 
-    'top': 0,
-    'left': 0,
-    'right': 0,
-    'bottom': 0,
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'outline': 'none',
-    'background': color.backdrop,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    outline: 'none',
+    background: color.backdrop,
   }
@@ -31,0 +31,0 @@ }

src/core/components/menu/menuContext.ts

@@ -8,3 +8,3 @@ import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
-  onClickOutside?: (event: MouseEvent | TouchEvent) => void
+  onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
@@ -11,0 +11,0 @@ onItemClick?: () => void

src/core/components/menu/useMenuController.ts

@@ -1,2 +0,2 @@
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {_getFocusableElements, _sortElements} from './helpers'
@@ -14,2 +14,4 @@
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
+  rootElement: HTMLDivElement | null
+  setRootElement: (el: HTMLDivElement | null) => void
 }
@@ -26,10 +28,10 @@
   shouldFocus: 'first' | 'last' | null
-  rootElementRef: React.MutableRefObject<HTMLDivElement | null>
 }): MenuController {
-  const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
+  const {onKeyDown, originElement, shouldFocus} = props
   const elementsRef = useRef<HTMLElement[]>([])
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const [activeIndex, _setActiveIndex] = useState(-1)
   const activeIndexRef = useRef(activeIndex)
-  const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
-  const mounted = Boolean(rootElementRef.current)
+  const activeElement = elementsRef.current[activeIndex] || null
+  const mounted = Boolean(rootElement)
 
@@ -47,3 +49,3 @@ const setActiveIndex = useCallback((nextActiveIndex: number) => {
         elementsRef.current.push(element)
-        _sortElements(rootElementRef.current, elementsRef.current)
+        _sortElements(rootElement, elementsRef.current)
       }
@@ -65,3 +67,3 @@
     },
-    [rootElementRef, setActiveIndex],
+    [rootElement, setActiveIndex],
   )
@@ -184,4 +186,4 @@
     setActiveIndex(-2)
-    rootElementRef.current?.focus()
-  }, [rootElementRef, setActiveIndex])
+    rootElement?.focus()
+  }, [setActiveIndex, rootElement])
 
@@ -193,3 +195,5 @@ // Set focus on the currently active element
     const rafId = window.requestAnimationFrame(() => {
-      if (activeIndex === -1) {
+      const _activeIndex = activeIndexRef.current
+
+      if (_activeIndex === -1) {
         if (shouldFocus === 'first') {
@@ -222,3 +226,3 @@ const focusableElements = _getFocusableElements(elementsRef.current)
 
-      const element = elementsRef.current[activeIndex] || null
+      const element = elementsRef.current[_activeIndex] || null
 
@@ -240,3 +244,5 @@ element?.focus()
     mount,
+    rootElement,
+    setRootElement,
   }
 }

src/core/components/toast/styles.ts

@@ -17,3 +17,3 @@ import {styled, keyframes, css} from 'styled-components'
     width: 100%;
-  }
+  } 
 `
@@ -23,3 +23,2 @@
 
-// @TODO get rid of $duration modifier, set data attribute instead and use stable selector
 export function rootStyles(
@@ -26,0 +25,0 @@ props: {$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps,

src/core/components/toast/useToast.ts

@@ -16,3 +16,2 @@ import {useContext} from 'react'
 
-  // @TODO context and hooks doesn't really work like this, there will never be a mismatch between the provider and the consumer, we can remove these version specifiers
   // NOTE: This check is for future-compatiblity
@@ -19,0 +18,0 @@ // - If the value is not an object, it’s not compatible with the current version

src/core/helpers/focus.ts

@@ -18,3 +18,2 @@ import {
 export function _hasFocus(element: HTMLElement): boolean {
-  // @TODO verify this is not called during render
   return Boolean(document.activeElement) && element.contains(document.activeElement)
@@ -21,0 +20,0 @@ }

src/core/helpers/scroll.ts

@@ -7,3 +7,2 @@ /**
 
-  // @TODO check if this is called during render
   const style = window.getComputedStyle(el)
@@ -10,0 +9,0 @@

src/core/hooks/index.ts

 export * from './useArrayProp'
 export * from './useClickOutside'
-export * from './useCustomValidity'
 export * from './useElementRect'
 export * from './useElementSize'
-export * from './useForwardedRef'
 export * from './useGlobalKeyDown'
-export * from './useMatchMedia'
 export * from './useMediaIndex'
 export * from './usePrefersDark'
 export * from './usePrefersReducedMotion'
+export * from './useForwardedRef'
+export * from './useCustomValidity'

src/core/hooks/useClickOutside.ts

@@ -1,3 +0,2 @@
-import {useEffect} from 'react'
-import {useEffectEvent} from 'use-effect-event'
+import {useEffect, useRef, useState} from 'react'
 import {EMPTY_ARRAY} from '../constants'
@@ -8,12 +7,22 @@
  */
-export type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
+export type ClickOutsideListener = (event: MouseEvent) => void
 
+function _getElements(
+  element: HTMLElement | null,
+  elementsArg: Array<HTMLElement | HTMLElement[] | null>,
+): HTMLElement[] {
+  const ret = [element]
+
+  for (const el of elementsArg) {
+    if (Array.isArray(el)) {
+      ret.push(...el)
+    } else {
+      ret.push(el)
+    }
+  }
+
+  return ret.filter(Boolean) as HTMLElement[]
+}
+
 /**
- * Use the callback version of `elementsArg` if you're using `useRef` to handle elements:
- * ```tsx
- * useClickOutside(
- *   () => {},
- *   () => [ref.current],
- * )
- *
  * @public
@@ -23,45 +32,70 @@ */
   listener: ClickOutsideListener,
-  elementsArg:
-    | Array<HTMLElement | HTMLElement[] | null>
-    | (() => Array<HTMLElement | HTMLElement[] | null>) = EMPTY_ARRAY,
+  elementsArg: Array<HTMLElement | HTMLElement[] | null> = EMPTY_ARRAY,
   boundaryElement?: HTMLElement | null,
-): void {
-  /**
-   * The `useEffectEvent` hook allow us to always see the latest value of `listener`, `elementsArg` and `boundaryElement` without needing to
-   * juggle `useState`, `useRef` and `useState` to make sure the `mousedown` event listener isn't constantly being added and removed.
-   */
-  const eventHandler = useEffectEvent((evt: MouseEvent | TouchEvent) => {
-    const target = evt.target
+): (el: HTMLElement | null) => void {
+  const [element, setElement] = useState<HTMLElement | null>(null)
+  const [elements, setElements] = useState(() => _getElements(element, elementsArg))
+  const elementsRef = useRef(elements)
 
-    if (!(target instanceof Node)) {
+  useEffect(() => {
+    const prevElements = elementsRef.current
+    const nextElements = _getElements(element, elementsArg)
+
+    if (prevElements.length !== nextElements.length) {
+      setElements(nextElements)
+      elementsRef.current = nextElements
+
       return
     }
 
-    if (boundaryElement && !boundaryElement.contains(target)) {
-      return
+    for (const el of prevElements) {
+      if (!nextElements.includes(el)) {
+        setElements(nextElements)
+        elementsRef.current = nextElements
+
+        return
+      }
     }
 
-    const resolvedElements = Array.isArray(elementsArg) ? elementsArg : elementsArg()
-    const elements = resolvedElements.flat()
+    for (const el of nextElements) {
+      if (!prevElements.includes(el)) {
+        setElements(nextElements)
+        elementsRef.current = nextElements
 
-    for (const el of elements) {
-      if (!el) continue
+        return
+      }
+    }
+  }, [element, elementsArg])
 
-      if (target === el || el.contains(target)) {
+  useEffect(() => {
+    if (!listener) return undefined
+
+    const handleWindowMouseDown = (evt: MouseEvent) => {
+      const target = evt.target
+
+      if (!(target instanceof Node)) {
         return
       }
+
+      if (boundaryElement && !boundaryElement.contains(target)) {
+        return
+      }
+
+      for (const el of elements) {
+        if (target === el || el.contains(target)) {
+          return
+        }
+      }
+
+      listener(evt)
     }
 
-    listener(evt)
-  })
+    window.addEventListener('mousedown', handleWindowMouseDown)
 
-  useEffect(() => {
-    document.addEventListener('mousedown', eventHandler)
-    document.addEventListener('touchstart', eventHandler)
-
     return () => {
-      document.removeEventListener('mousedown', eventHandler)
-      document.removeEventListener('touchstart', eventHandler)
+      window.removeEventListener('mousedown', handleWindowMouseDown)
     }
-  }, [eventHandler])
+  }, [boundaryElement, listener, elements])
+
+  return setElement
 }

src/core/hooks/useElementSize.ts

@@ -9,3 +9,2 @@ import {useEffect, useState} from 'react'
 export function useElementSize(element: HTMLElement | null): ElementSize | null {
-  // @TODO we can probably use something in framer-motion or @floating-ui instead of rolling our own
   const [size, setSize] = useState<ElementSize | null>(null)
@@ -12,0 +11,0 @@

src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,2 +0,2 @@
-import {useMemo, useSyncExternalStore} from 'react'
+import {useSyncExternalStore} from 'react'
 import {useTheme_v2} from '../../theme'
@@ -12,2 +12,4 @@
 
+const MEDIA_STORE_CACHE = new WeakMap<number[], _MediaStore>()
+
 type MediaQueryMinWidth = `(min-width: ${number}px)`
@@ -99,5 +101,11 @@ type MediaQueryMaxWidth = `(max-width: ${number}px)`
   const {media} = useTheme_v2()
-  const store = useMemo(() => _createMediaStore(media), [media])
 
+  let store = MEDIA_STORE_CACHE.get(media)
+
+  if (!store) {
+    store = _createMediaStore(media)
+    MEDIA_STORE_CACHE.set(media, store)
+  }
+
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
 }

src/core/hooks/usePrefersDark.ts

@@ -1,16 +0,61 @@
-import {useMatchMedia} from './useMatchMedia'
+import {useSyncExternalStore} from 'react'
 
+let MEDIA_QUERY_CACHE: MediaQueryList | undefined
+
 /**
- * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
+ * Lazy init the matchMedia instance
+ */
+function getMatchMedia(): MediaQueryList {
+  if (!MEDIA_QUERY_CACHE) {
+    // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
+    // the `window` global is available and we're in a browser environment
+    MEDIA_QUERY_CACHE = window.matchMedia('(prefers-color-scheme: dark)')
+  }
+
+  return MEDIA_QUERY_CACHE
+}
+
+/**
+ * As the query is the same for all instances of this hook, we can cache the matchMedia instance
+ * and have cheap `change` event listeners, while getSnapshot always reads from the same
+ * matchMedia instance and we don't get any tearing.
+ * Tearing in this context means the bad edge case in React concurrent render mdoe
+ * where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
+ * during the same render.
+ * By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
+ * what React.memo boundaries there might be between the layers..
+ */
+function subscribe(onStoreChange: () => void): () => void {
+  const matchMedia = getMatchMedia()
+
+  matchMedia.addEventListener('change', onStoreChange)
+
+  return () => matchMedia.removeEventListener('change', onStoreChange)
+}
+
+/**
+ * Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
+ * It's important that this function does not create new objects or arrays when called:
+ * https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
+ */
+function getSnapshot() {
+  return getMatchMedia().matches
+}
+
+/**
+ * Only called during server-side rendering, and hydration if using hydrateRoot
+ * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
+ * and we assume `(prefers-color-scheme: light)` since it's the most common scheme
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
- * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
- *
+ * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
+ */
+function getServerSnapshot() {
+  return false
+}
+
+/**
  * @public
  */
-export function usePrefersDark(getServerSnapshot = () => false): boolean {
-  return useMatchMedia('(prefers-color-scheme: dark)', getServerSnapshot)
+export function usePrefersDark(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }

src/core/hooks/usePrefersReducedMotion.ts

@@ -1,16 +0,62 @@
-import {useMatchMedia} from './useMatchMedia'
+import {useSyncExternalStore} from 'react'
 
+let MEDIA_QUERY_CACHE: MediaQueryList | undefined
+
 /**
+ * Lazy init the matchMedia instance
+ */
+function getMatchMedia(): MediaQueryList {
+  if (!MEDIA_QUERY_CACHE) {
+    // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
+    // the `window` global is available and we're in a browser environment
+    MEDIA_QUERY_CACHE = window.matchMedia('(prefers-reduced-motion: reduce)')
+  }
+
+  return MEDIA_QUERY_CACHE
+}
+
+/**
+ * As the query is the same for all instances of this hook, we can cache the matchMedia instance
+ * and have cheap `change` event listeners, while getSnapshot always reads from the same
+ * matchMedia instance and we don't get any tearing.
+ * Tearing in this context means the bad edge case in React concurrent render mdoe
+ * where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
+ * during the same render.
+ * By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
+ * what React.memo boundaries there might be between the layers..
+ */
+function subscribe(onStoreChange: () => void): () => void {
+  const matchMedia = getMatchMedia()
+
+  matchMedia.addEventListener('change', onStoreChange)
+
+  return () => matchMedia.removeEventListener('change', onStoreChange)
+}
+
+/**
+ * Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
+ * It's important that this function does not create new objects or arrays when called:
+ * https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
+ */
+function getSnapshot() {
+  return getMatchMedia().matches
+}
+
+/**
+ * Only called during server-side rendering, and hydration if using hydrateRoot
+ * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
+ * and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme
+ *
+ * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
+ */
+function getServerSnapshot() {
+  return false
+}
+
+/**
  * Returns true if motion should be reduced
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
- * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
- *
  * @public
  */
-export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
-  return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
+export function usePrefersReducedMotion(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }

src/core/primitives/avatar/styles.ts

@@ -17,20 +17,20 @@ import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
   return {
-    'position': 'absolute',
-    'boxSizing': 'border-box',
-    'zIndex': 0,
-    'opacity': 0,
-    'transition': 'all 0.2s linear',
-    'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
-    'left': 0,
-    'right': 0,
-    'top': 0,
-    'bottom': 0,
+    position: 'absolute',
+    boxSizing: 'border-box',
+    zIndex: 0,
+    opacity: 0,
+    transition: 'all 0.2s linear',
+    transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
 
     '& > svg': {
-      'width': '11px',
-      'height': '7px',
-      'position': 'absolute',
-      'top': '-5px',
-      'left': '50%',
-      'transform': 'translateX(-6px)',
+      width: '11px',
+      height: '7px',
+      position: 'absolute',
+      top: '-5px',
+      left: '50%',
+      transform: 'translateX(-6px)',
 
@@ -67,7 +67,7 @@ '&:not([hidden])': {
 
-    'backgroundColor': 'var(--avatar-bg-color)',
-    'position': 'relative',
-    'boxSizing': 'border-box',
-    'userSelect': 'none',
-    'boxShadow': '0 0 0 1px var(--card-bg-color)',
+    backgroundColor: 'var(--avatar-bg-color)',
+    position: 'relative',
+    boxSizing: 'border-box',
+    userSelect: 'none',
+    boxShadow: '0 0 0 1px var(--card-bg-color)',
 
@@ -86,10 +86,10 @@ '&[data-status="inactive"]': {
     '&[data-as="button"]': {
-      'WebkitFontSmoothing': 'inherit',
-      'appearance': 'none',
-      'margin': 0,
-      'padding': 0,
-      'border': 0,
-      'font': 'inherit',
-      'color': 'inherit',
-      'outline': 'none',
+      WebkitFontSmoothing: 'inherit',
+      appearance: 'none',
+      margin: 0,
+      padding: 0,
+      border: 0,
+      font: 'inherit',
+      color: 'inherit',
+      outline: 'none',
 
@@ -116,5 +116,5 @@ '&:focus': {
     return {
-      'width': rem(avatarSize.size),
-      'height': rem(avatarSize.size),
-      'borderRadius': rem(avatarSize.size / 2),
+      width: rem(avatarSize.size),
+      height: rem(avatarSize.size),
+      borderRadius: rem(avatarSize.size / 2),
 
@@ -138,10 +138,10 @@ '&>svg': {
   return {
-    'width': '100%',
-    'height': '100%',
-    'color': 'var(--avatar-fg-color)',
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'textTransform': 'uppercase',
-    'textAlign': 'center',
-    'borderRadius': '50%',
+    width: '100%',
+    height: '100%',
+    color: 'var(--avatar-fg-color)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textTransform: 'uppercase',
+    textAlign: 'center',
+    borderRadius: '50%',
 
@@ -163,4 +163,4 @@ '&:not([hidden])': {
   return {
-    'strokeWidth': '2px',
-    'stroke': 'var(--avatar-bg-color)',
+    strokeWidth: '2px',
+    stroke: 'var(--avatar-bg-color)',
 
@@ -167,0 +167,0 @@ '[data-status="editing"] &': {

src/core/primitives/badge/styles.ts

@@ -11,4 +11,4 @@ import {CSSObject} from '@sanity/ui/theme'
 
-    'backgroundColor': 'var(--card-bg-color)',
-    'cursor': 'default',
+    backgroundColor: 'var(--card-bg-color)',
+    cursor: 'default',
 
@@ -15,0 +15,0 @@ '&:not([hidden])': {

src/core/primitives/button/styles.ts

@@ -84,8 +84,8 @@ import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
     {
-      'backgroundColor': 'var(--card-bg-color)',
-      'color': 'var(--card-fg-color)',
-      'boxShadow': focusRingBorderStyle(border),
+      backgroundColor: 'var(--card-bg-color)',
+      color: 'var(--card-fg-color)',
+      boxShadow: focusRingBorderStyle(border),
       '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
       "&:not([data-disabled='true'])": {
-        'boxShadow': combineBoxShadow(
+        boxShadow: combineBoxShadow(
           focusRingBorderStyle(border),
@@ -92,0 +92,0 @@ shadow ? defaultBoxShadow : undefined,

src/core/primitives/inline/styles.ts

@@ -7,3 +7,3 @@ import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
   return {
-    'lineHeight': 0,
+    lineHeight: 0,
 
@@ -28,3 +28,3 @@ '&&:not([hidden])': {
     return {
-      'margin': `-${_space} 0 0 -${_space}`,
+      margin: `-${_space} 0 0 -${_space}`,
       '& > div': {padding: `${_space} 0 0 ${_space}`},
@@ -31,0 +31,0 @@ }

src/core/primitives/popover/constants.ts

@@ -10,14 +10,14 @@ import {Placement, PopoverMargins} from '../../types'
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  'top': ['bottom', 'left', 'right'],
+  top: ['bottom', 'left', 'right'],
   'top-start': ['bottom-start', 'left-start', 'right-start'],
   'top-end': ['bottom-end', 'left-end', 'right-end'],
-  'bottom': ['top', 'left', 'right'],
+  bottom: ['top', 'left', 'right'],
   'bottom-start': ['top-start', 'left-start', 'right-start'],
   'bottom-end': ['top-end', 'left-end', 'right-end'],
-  'left': ['right', 'top', 'bottom'],
+  left: ['right', 'top', 'bottom'],
   'left-start': ['right-start', 'top-start', 'bottom-start'],
   'left-end': ['right-end', 'top-end', 'bottom-end'],
-  'right': ['left', 'top', 'bottom'],
+  right: ['left', 'top', 'bottom'],
   'right-start': ['left-start', 'top-start', 'bottom-start'],
   'right-end': ['left-end', 'top-end', 'bottom-end'],
 }

src/core/primitives/stack/styles.ts

@@ -15,4 +15,4 @@ import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
   },
-  'gridTemplateColumns': 'minmax(0, 1fr)',
-  'gridAutoRows': 'min-content',
+  gridTemplateColumns: 'minmax(0, 1fr)',
+  gridAutoRows: 'min-content',
 }
@@ -19,0 +19,0 @@

src/core/primitives/tooltip/constants.ts

@@ -11,14 +11,14 @@ import {Placement} from '@floating-ui/react-dom'
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  'top': ['top-end', 'top-start', 'bottom', 'left', 'right'],
+  top: ['top-end', 'top-start', 'bottom', 'left', 'right'],
   'top-start': ['top', 'top-end', 'bottom-start', 'left-start', 'right-start'],
   'top-end': ['top', 'top-start', 'bottom-end', 'left-end', 'right-end'],
-  'bottom': ['bottom-end', 'bottom-start', 'top', 'left', 'right'],
+  bottom: ['bottom-end', 'bottom-start', 'top', 'left', 'right'],
   'bottom-start': ['bottom', 'bottom-end', 'top-start', 'left-start', 'right-start'],
   'bottom-end': ['bottom', 'bottom-start', 'top-end', 'left-end', 'right-end'],
-  'left': ['left-end', 'left-start', 'right', 'top', 'bottom'],
+  left: ['left-end', 'left-start', 'right', 'top', 'bottom'],
   'left-start': ['left', 'left-end', 'right-start', 'top-start', 'bottom-start'],
   'left-end': ['left', 'left-start', 'right-end', 'top-end', 'bottom-end'],
-  'right': ['right-end', 'right-start', 'left', 'top', 'bottom'],
+  right: ['right-end', 'right-start', 'left', 'top', 'bottom'],
   'right-start': ['right', 'right-end', 'left-start', 'top-start', 'bottom-start'],
   'right-end': ['right', 'right-start', 'left-end', 'top-end', 'bottom-end'],
 }

src/core/styles/font/responsiveFont.ts

@@ -24,7 +24,7 @@ import {ThemeFontSize, ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
   const base: CSSObject = {
-    'position': 'relative',
-    'fontFamily': family,
+    position: 'relative',
+    fontFamily: family,
     fontWeight,
-    'padding': '1px 0',
-    'margin': 0,
+    padding: '1px 0',
+    margin: 0,
 
@@ -79,6 +79,6 @@ '&:before': {
   return {
-    'fontSize': rem(fontSize),
-    'lineHeight': `calc(${lineHeight} / ${fontSize})`,
-    'letterSpacing': rem(letterSpacing),
-    'transform': `translateY(${rem(descenderHeight)})`,
+    fontSize: rem(fontSize),
+    lineHeight: `calc(${lineHeight} / ${fontSize})`,
+    letterSpacing: rem(letterSpacing),
+    transform: `translateY(${rem(descenderHeight)})`,
 
@@ -85,0 +85,0 @@ '&:before': {

src/theme/build/buildColorTheme.test.ts

@@ -12,19 +12,19 @@ import {ThemeColorTokens} from '../config'
         },
-        'transparent': {
+        transparent: {
           bg: ['50', 'black'],
         },
-        'default': {
+        default: {
           bg: ['white', '950'],
           fg: ['black', '200'],
         },
-        'primary': {
+        primary: {
           _hue: 'purple',
         },
-        'positive': {
+        positive: {
           _hue: 'cyan',
         },
-        'caution': {
+        caution: {
           _hue: 'yellow',
         },
-        'critical': {
+        critical: {
           _hue: 'red',
@@ -104,19 +104,19 @@ },
       },
-      'transparent': {
+      transparent: {
         bg: ['50', 'black'],
       },
-      'default': {
+      default: {
         bg: ['white', '950'],
         fg: ['black', '200'],
       },
-      'primary': {
+      primary: {
         _hue: 'purple',
       },
-      'positive': {
+      positive: {
         _hue: 'cyan',
       },
-      'caution': {
+      caution: {
         _hue: 'yellow',
       },
-      'critical': {
+      critical: {
         _hue: 'red',
@@ -132,3 +132,3 @@ },
           },
-          'hovered': {
+          hovered: {
             bg: ['600', '300'],
@@ -135,0 +135,0 @@ },

src/theme/config/tokens/color/types.ts

@@ -24,11 +24,11 @@ import {ColorHueKey} from '@sanity/color'
   '*'?: ThemeColorAvatarHueTokens
-  'gray'?: ThemeColorAvatarHueTokens
-  'blue'?: ThemeColorAvatarHueTokens
-  'purple'?: ThemeColorAvatarHueTokens
-  'magenta'?: ThemeColorAvatarHueTokens
-  'red'?: ThemeColorAvatarHueTokens
-  'orange'?: ThemeColorAvatarHueTokens
-  'yellow'?: ThemeColorAvatarHueTokens
-  'green'?: ThemeColorAvatarHueTokens
-  'cyan'?: ThemeColorAvatarHueTokens
+  gray?: ThemeColorAvatarHueTokens
+  blue?: ThemeColorAvatarHueTokens
+  purple?: ThemeColorAvatarHueTokens
+  magenta?: ThemeColorAvatarHueTokens
+  red?: ThemeColorAvatarHueTokens
+  orange?: ThemeColorAvatarHueTokens
+  yellow?: ThemeColorAvatarHueTokens
+  green?: ThemeColorAvatarHueTokens
+  cyan?: ThemeColorAvatarHueTokens
 }
@@ -70,7 +70,7 @@
   '*'?: ThemeColorBadgeToneTokens
-  'default'?: ThemeColorBadgeToneTokens
-  'primary'?: ThemeColorBadgeToneTokens
-  'positive'?: ThemeColorBadgeToneTokens
-  'caution'?: ThemeColorBadgeToneTokens
-  'critical'?: ThemeColorBadgeToneTokens
+  default?: ThemeColorBadgeToneTokens
+  primary?: ThemeColorBadgeToneTokens
+  positive?: ThemeColorBadgeToneTokens
+  caution?: ThemeColorBadgeToneTokens
+  critical?: ThemeColorBadgeToneTokens
 }
@@ -77,0 +77,0 @@

src/theme/defaults/colorTokens.ts

@@ -25,7 +25,7 @@ import {ThemeColorTokens} from '../config'
         },
-        'positive': {
+        positive: {
           bg: ['200 50%', '900'],
           fg: ['600', '500'],
         },
-        'caution': {
+        caution: {
           bg: ['200 50%', '900'],
@@ -67,6 +67,6 @@ fg: ['600', '500'],
     },
-    'transparent': {
+    transparent: {
       bg: ['50', 'black'],
     },
-    'default': {
+    default: {
       bg: ['white', '950'],
@@ -78,12 +78,12 @@ fg: ['800', '200'],
     },
-    'primary': {_hue: 'blue'},
-    'positive': {
+    primary: {_hue: 'blue'},
+    positive: {
       _hue: 'green',
       shadow: {outline: ['500/0.4', '500/0.4']},
     },
-    'caution': {
+    caution: {
       _hue: 'yellow',
       shadow: {outline: ['600/0.3', '500/0.4']},
     },
-    'critical': {_hue: 'red'},
+    critical: {_hue: 'red'},
   },
@@ -138,13 +138,13 @@ button: {
         },
-        'hovered': {
+        hovered: {
           bg: ['700', '300'],
           border: ['700/0', '300/0'],
         },
-        'pressed': {
+        pressed: {
           bg: ['700', '300'],
         },
-        'selected': {
+        selected: {
           bg: ['700', '300'],
         },
-        'disabled': {
+        disabled: {
           _hue: 'gray',
@@ -189,3 +189,3 @@ accent: {
       },
-      'default': {
+      default: {
         '*': {
@@ -205,9 +205,9 @@ avatar: {
         },
-        'hovered': {
+        hovered: {
           bg: ['900', '100'],
         },
-        'pressed': {
+        pressed: {
           bg: ['black', 'white'],
         },
-        'selected': {
+        selected: {
           bg: ['black', 'white'],
@@ -264,15 +264,15 @@ },
         },
-        'hovered': {
+        hovered: {
           bg: ['100', '900'],
           fg: ['700', '300'],
         },
-        'pressed': {
+        pressed: {
           bg: ['100', '900'],
           fg: ['800', '200'],
         },
-        'selected': {
+        selected: {
           bg: ['100', '900'],
           fg: ['800', '200'],
         },
-        'disabled': {
+        disabled: {
           _hue: 'gray',
@@ -318,3 +318,3 @@ accent: {
       },
-      'positive': {
+      positive: {
         '*': {
@@ -324,3 +324,3 @@ border: ['600 20%', '800'],
       },
-      'caution': {
+      caution: {
         '*': {
@@ -378,7 +378,7 @@ border: ['600 20%', '800'],
         },
-        'hovered': {
+        hovered: {
           bg: ['50', '950'],
           icon: ['700 70%', '400 70%'],
         },
-        'pressed': {
+        pressed: {
           bg: ['100', '900'],
@@ -388,3 +388,3 @@ fg: ['800', '200'],
         },
-        'selected': {
+        selected: {
           bg: ['100', '900'],
@@ -394,3 +394,3 @@ fg: ['800', '200'],
         },
-        'disabled': {
+        disabled: {
           _hue: 'gray',
@@ -449,6 +449,6 @@ accent: {
       },
-      'hovered': {
+      hovered: {
         border: ['300', '700'],
       },
-      'readOnly': {
+      readOnly: {
         bg: ['50', '950'],
@@ -458,3 +458,3 @@ border: ['200', '800'],
       },
-      'disabled': {
+      disabled: {
         fg: ['400', '600'],
@@ -465,3 +465,3 @@ border: ['100', '900'],
     },
-    'invalid': {
+    invalid: {
       '*': {
@@ -520,9 +520,9 @@ _hue: 'red',
       },
-      'hovered': {
+      hovered: {
         bg: ['50', '950'],
       },
-      'pressed': {
+      pressed: {
         bg: ['100', '900'],
       },
-      'selected': {
+      selected: {
         _blend: ['screen', 'multiply'],
@@ -572,3 +572,3 @@ accent: {
       },
-      'disabled': {
+      disabled: {
         _hue: 'gray',
@@ -615,3 +615,3 @@ accent: {
     },
-    'default': {
+    default: {
       selected: {
@@ -621,3 +621,3 @@ _hue: 'blue',
     },
-    'critical': {
+    critical: {
       disabled: {
@@ -624,0 +624,0 @@ bg: ['50 50%', '950 50%'],

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

Total package byte prevSize

4515526

increased by0.23%

Dependency count

10

decreased by-9.09%

Number of package files

649

increased by0.15%

Lines of code

62984

increased by0.36%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

74

increased by1.37%

Dependency changes

• - Removeduse-effect-event@^1.0.2

• - Removeduse-effect-event@1.0.2(transitive)