@sanity/ui 2.0.2 → 2.0.3

package/package.json

@@ -1,11 +1,25 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.2",
+  "version": "2.0.3",
+  "keywords": [
+    "sanity",
+    "ui",
+    "primitives",
+    "react",
+    "components",
+    "design-system"
+  ],
+  "homepage": "https://www.sanity.io/",
+  "bugs": {
+    "url": "https://github.com/sanity-io/ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sanity-io/ui.git"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
   "sideEffects": false,
-  "types": "./dist/index.d.ts",
-  "source": "./exports/index.ts",
-  "module": "./dist/index.esm.js",
-  "main": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -31,6 +45,10 @@
     },
     "./package.json": "./package.json"
   },
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "source": "./exports/index.ts",
+  "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
       "theme": [
@@ -43,7 +61,6 @@
     "exports",
     "src"
   ],
-  "license": "MIT",
   "scripts": {
     "build": "run-s clean pkg:build pkg:check figma:pkg:build",
     "clean": "rimraf .workshop dist",
@@ -70,62 +87,88 @@
     "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"
+    ]
+  },
+  "lint-staged": {
+    "*": [
+      "prettier --write --cache --ignore-unknown"
+    ]
+  },
+  "release": {
+    "branches": [
+      "+([0-9])?(.{+([0-9]),x}).x",
+      "main",
+      "next",
+      {
+        "name": "beta",
+        "prerelease": true
+      },
+      {
+        "name": "alpha",
+        "prerelease": true
+      }
+    ],
+    "extends": "@sanity/semantic-release-preset"
+  },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.0.4",
+    "@floating-ui/react-dom": "^2.0.8",
     "@sanity/color": "^3.0.0",
-    "@sanity/icons": "^2.7.0",
-    "csstype": "^3.1.2",
-    "framer-motion": "^11.0.3",
+    "@sanity/icons": "^2.10.2",
+    "csstype": "^3.1.3",
+    "framer-motion": "^11.0.5",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@commitlint/cli": "^18.4.3",
-    "@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^3.2.5",
+    "@sanity/pkg-utils": "^4.2.2",
     "@sanity/semantic-release-preset": "^4.1.6",
     "@sanity/ui-workshop": "^2.0.3",
-    "@storybook/addon-a11y": "^7.6.1",
-    "@storybook/addon-docs": "^7.6.1",
-    "@storybook/addon-essentials": "^7.6.1",
-    "@storybook/addon-interactions": "^7.6.1",
-    "@storybook/addon-links": "^7.6.1",
-    "@storybook/addon-storysource": "^7.6.1",
-    "@storybook/addon-themes": "^7.6.1",
-    "@storybook/blocks": "^7.6.1",
+    "@storybook/addon-a11y": "^7.6.16",
+    "@storybook/addon-docs": "^7.6.16",
+    "@storybook/addon-essentials": "^7.6.16",
+    "@storybook/addon-interactions": "^7.6.16",
+    "@storybook/addon-links": "^7.6.16",
+    "@storybook/addon-storysource": "^7.6.16",
+    "@storybook/addon-themes": "^7.6.16",
+    "@storybook/blocks": "^7.6.16",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.6.1",
-    "@storybook/react": "^7.6.1",
-    "@storybook/react-vite": "^7.6.1",
+    "@storybook/manager-api": "^7.6.16",
+    "@storybook/react": "^7.6.16",
+    "@storybook/react-vite": "^7.6.16",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.1",
-    "@testing-library/dom": "^9.3.3",
+    "@storybook/theming": "^7.6.16",
+    "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.10",
+    "@testing-library/react": "^14.2.1",
+    "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.5.9",
-    "@types/react": "^18.2.39",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@types/react-is": "^18.2.4",
     "@types/refractor": "^3.4.0",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "commitizen": "^4.3.0",
-    "cypress": "^13.6.0",
+    "cypress": "^13.6.4",
     "cypress-real-events": "^1.11.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.54.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-boundaries": "^3.4.1",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
@@ -136,21 +179,22 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.1.0",
+    "npm-run-all2": "^5.0.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-packagejson": "^2.4.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.1",
-    "semantic-release": "^22.0.8",
+    "semantic-release": "^22.0.12",
     "start-server-and-test": "^2.0.3",
-    "storybook": "^7.6.1",
-    "styled-components": "^6.1.1",
+    "storybook": "^7.6.16",
+    "styled-components": "^6.1.8",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.2",
-    "vite-tsconfig-paths": "^4.2.1"
+    "typescript": "^5.3.3",
+    "vite": "^5.1.3",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "peerDependencies": {
     "react": "^18",
@@ -158,55 +202,12 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@8.11.0",
   "engines": {
     "node": ">=14.0.0"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sanity-io/ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/sanity-io/ui/issues"
-  },
-  "keywords": [
-    "sanity",
-    "ui",
-    "primitives",
-    "react",
-    "components",
-    "design-system"
-  ],
-  "author": "Sanity.io <hello@sanity.io>",
-  "homepage": "https://www.sanity.io/",
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "lint-staged": {
-    "*": [
-      "prettier --write --cache --ignore-unknown"
-    ]
-  },
-  "packageManager": "pnpm@8.11.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
-  },
-  "release": {
-    "extends": "@sanity/semantic-release-preset",
-    "branches": [
-      "+([0-9])?(.{+([0-9]),x}).x",
-      "main",
-      "next",
-      {
-        "name": "beta",
-        "prerelease": true
-      },
-      {
-        "name": "alpha",
-        "prerelease": true
-      }
-    ]
   }
 }

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

@@ -8,7 +8,13 @@ import {
   focusLastDescendant,
   isHTMLElement,
 } from '../../helpers'
-import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
+import {
+  useArrayProp,
+  useClickOutside,
+  useForwardedRef,
+  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'
@@ -317,9 +323,11 @@ export const Dialog = forwardRef(function Dialog(
     scheme,
     width: widthProp = 0,
     zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
-    animate = false,
+    animate: _animate = false,
     ...restProps
   } = props
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
   const boundaryElement = useBoundaryElement().element

package/src/core/components/toast/toastProvider.tsx

@@ -1,8 +1,9 @@
-import {AnimatePresence, motion} from 'framer-motion'
-import {useCallback, useEffect, useMemo, useRef, useState, startTransition} from 'react'
+import {AnimatePresence, motion, type Variants} from 'framer-motion'
+import {useMemo, useRef, useState, startTransition, useEffect} from 'react'
 import styled from 'styled-components'
 import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {useMounted} from '../../hooks/useMounted'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {Box} from '../../primitives'
 import {Layer} from '../../utils'
 import {Toast} from './toast'
@@ -52,59 +53,88 @@ let toastId = 0
 export function ToastProvider(props: ToastProviderProps): React.ReactElement {
   const {children, padding = 4, paddingX, paddingY, zOffset} = props
   const [state, _setState] = useState<ToastState>([])
-
   const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
+  const mounted = useMounted()
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const variants = useMemo<Variants>(
+    () => ({
+      initial: {
+        opacity: 0,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+        y: 32,
+        scale: 0.25,
+        willChange: 'transform',
+      },
+      animate: {
+        opacity: [0, 1, 1],
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
+        y: 0,
+        scale: 1,
+      },
+      exit: {
+        opacity: [1, 1, 0],
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
+        scale: 0.5,
+        transition: prefersReducedMotion ? {duration: 0} : {duration: 0.2},
+      },
+    }),
+    [prefersReducedMotion],
+  )
 
-  const push = useCallback((params: ToastParams) => {
-    // Wrap setState in startTransition to allow React to give input state updates higher priority
-    const setState: typeof _setState = (state) => startTransition(() => _setState(state))
+  const value: ToastContextValue = useMemo(() => {
+    const push = (params: ToastParams) => {
+      // Wrap setState in startTransition to allow React to give input state updates higher priority
+      const setState: typeof _setState = (state) => startTransition(() => _setState(state))
 
-    const id = params.id || String(toastId++)
-    const duration = params.duration || 5000
+      const id = params.id || String(toastId++)
+      const duration = params.duration || 5000
 
-    const dismiss = () => {
-      const timeoutId = toastsRef.current[id]?.timeoutId
+      const dismiss = () => {
+        const timeoutId = toastsRef.current[id]?.timeoutId
 
-      setState((prevState): ToastState => {
-        const idx = prevState.findIndex((t) => t.id === id)
+        setState((prevState): ToastState => {
+          const idx = prevState.findIndex((t) => t.id === id)
 
-        if (idx > -1) {
-          const toasts = prevState.slice(0)
+          if (idx > -1) {
+            const toasts = prevState.slice(0)
 
-          toasts.splice(idx, 1)
+            toasts.splice(idx, 1)
 
-          return toasts
+            return toasts
+          }
+
+          return prevState
+        })
+
+        if (timeoutId !== undefined) {
+          clearTimeout(timeoutId)
+          delete toastsRef.current[id]
         }
+      }
 
+      setState((prevState): ToastState => {
         return prevState
+          .filter((t) => t.id !== id)
+          .concat([
+            {
+              dismiss,
+              id,
+              params: {...params, duration},
+            },
+          ])
       })
 
-      if (timeoutId !== undefined) {
-        clearTimeout(timeoutId)
+      if (toastsRef.current[id]) {
+        clearTimeout(toastsRef.current[id].timeoutId)
         delete toastsRef.current[id]
       }
-    }
 
-    setState((prevState): ToastState => {
-      return prevState
-        .filter((t) => t.id !== id)
-        .concat([
-          {
-            dismiss,
-            id,
-            params: {...params, duration},
-          },
-        ])
-    })
-
-    if (toastsRef.current[id]) {
-      clearTimeout(toastsRef.current[id].timeoutId)
-      delete toastsRef.current[id]
-    }
+      toastsRef.current[id] = {timeoutId: setTimeout(dismiss, duration)}
 
-    toastsRef.current[id] = {timeoutId: setTimeout(dismiss, duration)}
+      return id
+    }
 
-    return id
+    return {version: 0.0, push}
   }, [])
 
   // clear timeouts on unmount
@@ -119,13 +149,9 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
     [],
   )
 
-  const value: ToastContextValue = useMemo(() => ({version: 0.0, push}), [push])
-  const mounted = useMounted()
-
   return (
     <ToastContext.Provider value={value}>
       {children}
-
       {mounted && (
         <Root data-ui="ToastProvider" zOffset={zOffset}>
           <ToastContainer>
@@ -133,28 +159,17 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
               <AnimatePresence initial={false}>
                 {state.map(({dismiss, id, params}) => (
                   <motion.div
-                    animate={{
-                      opacity: [0, 1, 1],
-                      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
-                      y: 0,
-                      scale: 1,
-                    }}
-                    exit={{
-                      opacity: [1, 1, 0],
-                      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
-                      scale: 0.5,
-                      transition: {duration: 0.2},
-                    }}
-                    initial={{
-                      opacity: 0,
-                      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
-                      y: 32,
-                      scale: 0.25,
-                      willChange: 'transform',
-                    }}
                     key={id}
                     layout="position"
-                    transition={{type: 'spring', damping: 30, stiffness: 400}}
+                    initial="initial"
+                    animate="animate"
+                    exit="exit"
+                    variants={variants}
+                    transition={
+                      prefersReducedMotion
+                        ? {duration: 0}
+                        : {type: 'spring', damping: 30, stiffness: 400}
+                    }
                   >
                     <Toast
                       closable={params.closable}

package/src/core/hooks/useMounted.ts

@@ -1,14 +1,15 @@
-import {useEffect, useReducer} from 'react'
+import {useSyncExternalStore} from 'react'
 
 /**
  * Some components should only render after mounting to the DOM, and not be rendered at all during SSR renderToString or equivalent.
  * @public
  */
 export function useMounted(): boolean {
-  // Use useReducer instead of useState as it's more low-level and creates the least amount of functions for the garbage collector to clean up
-  const [mounted, mount] = useReducer(() => true, false)
-
-  useEffect(mount, [mount])
-
-  return mounted
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false,
+  )
 }
+
+const subscribe = () => () => {}

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

@@ -33,7 +33,6 @@ function avatarArrowStyle(): CSSObject {
       left: '50%',
       transform: 'translateX(-6px)',
 
-      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       '&:not([hidden])': {
         display: 'block',
       },
@@ -75,7 +74,6 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
     },
 
     '&>svg': {
-      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       '&:not([hidden])': {
         display: 'block',
       },
@@ -92,7 +90,6 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
       color: 'inherit',
       outline: 'none',
 
-      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       '&:focus': {
         boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
       },

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

@@ -22,7 +22,13 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import {useForwardedRef, useArrayProp, useElementSize, useMediaIndex} from '../../hooks'
+import {
+  useForwardedRef,
+  useArrayProp,
+  useElementSize,
+  useMediaIndex,
+  usePrefersReducedMotion,
+} from '../../hooks'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
@@ -128,7 +134,7 @@ export const Popover = memo(
 
     const {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-      animate = false,
+      animate: _animate = false,
       arrow: arrowProp = false,
       boundaryElement = boundaryElementContext.element,
       children: childProp,
@@ -158,6 +164,8 @@ export const Popover = memo(
       updateRef,
       ...restProps
     } = props
+    const prefersReducedMotion = usePrefersReducedMotion()
+    const animate = prefersReducedMotion ? false : _animate
     const boundarySize = useElementSize(boundaryElement)?.border
     const padding = useArrayProp(paddingProp)
     const radius = useArrayProp(radiusProp)

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

@@ -23,7 +23,7 @@ import {
   useId,
 } from 'react'
 import styled from 'styled-components'
-import {useArrayProp, useForwardedRef} from '../../hooks'
+import {useArrayProp, useForwardedRef, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
@@ -101,7 +101,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const boundaryElementContext = useBoundaryElement()
   const {layer} = useTheme_v2()
   const {
-    animate = false,
+    animate: _animate = false,
     arrow: arrowProp = false,
     boundaryElement = boundaryElementContext?.element,
     children: childProp,
@@ -119,6 +119,8 @@ export const Tooltip = forwardRef(function Tooltip(
     delay,
     ...restProps
   } = props
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const animate = prefersReducedMotion ? false : _animate
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const forwardedRef = useForwardedRef(ref)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)