@sanity/ui 4.0.0-static.40 → 4.0.0-static.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.40",
+  "version": "4.0.0-static.42",
   "keywords": [
     "react",
     "ui",
@@ -119,7 +119,7 @@
     "@sanity/icons": "^3.7.4",
     "@vanilla-extract/dynamic": "^2.1.5",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.24",
+    "motion": "^12.23.24",
     "react-refractor": "^4.0.0",
     "use-effect-event": "^2.0.3"
   },
@@ -132,10 +132,10 @@
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.37.0",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^8.1.19",
+    "@sanity/pkg-utils": "^8.1.24",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "4.0.0-static.11",
+    "@sanity/ui-workshop": "4.0.0-static.12",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",

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

@@ -1,6 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {type RadiusStyleProps, toast} from '@sanity/ui/css'
-import {motion, type Variant, type Variants} from 'framer-motion'
+import {motion, type Variant, type Variants} from 'motion/react'
 import {type ReactNode} from 'react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'

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

@@ -1,6 +1,6 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
-import {AnimatePresence} from 'framer-motion'
-import {startTransition, useMemo, useState} from 'react'
+import {AnimatePresence} from 'motion/react'
+import {startTransition, useMemo, useRef, useState} from 'react'
 
 import {useMounted} from '../../hooks/useMounted'
 import {LayerProvider} from '../../primitives/layer/LayerProvider'
@@ -28,11 +28,20 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
   const [state, setState] = useState<ToastState>([])
   const mounted = useMounted()
 
+  const timeoutIdsRef = useRef<Record<string, NodeJS.Timeout | undefined>>({})
+
   const value: ToastContextValue = useMemo(() => {
     const push = (params: ToastParams) => {
       const id = params.id ?? generateToastId()
       const duration = params.duration ?? 5000
 
+      // If the `id` is reused, clear the previous timeout
+      const existingTimeoutId = timeoutIdsRef.current[id]
+      if (existingTimeoutId) {
+        clearTimeout(existingTimeoutId)
+        timeoutIdsRef.current[id] = undefined
+      }
+
       startTransition(() => {
         setState((prevState): ToastState => {
           /**
@@ -50,18 +59,24 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
            * This function will be passed to the Toast component
            * and called either on close button click or after duration.
            */
-          const dismiss = () => {
+          function dismiss() {
             startTransition(() => {
               if (timeoutId) {
                 clearTimeout(timeoutId)
               }
 
               setState((currentState) => currentState.filter((toast) => toast.id !== id))
+
+              // Clear the timeout id from the ref to prevent memory leaks
+              timeoutIdsRef.current[id] = undefined
             })
           }
 
           const timeoutId = duration === Infinity ? undefined : setTimeout(dismiss, duration)
 
+          // Set the timeout id in the ref
+          timeoutIdsRef.current[id] = timeoutId
+
           /**
            * Create updated state by:
            * 1. Removing any existing toast with the same ID (prevents duplicates)

package/src/core/constants.ts

@@ -1,4 +1,4 @@
-import type {Transition, Variant} from 'framer-motion'
+import type {Transition, Variant} from 'motion/react'
 
 export const EMPTY_ARRAY: never[] = []
 

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

@@ -11,7 +11,7 @@ import {
   useFloating,
 } from '@floating-ui/react-dom'
 import {type MaxWidth, popover as popoverCss, type ResponsiveProp} from '@sanity/ui/css'
-import {AnimatePresence} from 'framer-motion'
+import {AnimatePresence} from 'motion/react'
 import {
   cloneElement,
   type ForwardedRef,

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

@@ -1,6 +1,6 @@
 import type {Strategy} from '@floating-ui/react-dom'
 import {popoverCard} from '@sanity/ui/css'
-import {motion} from 'framer-motion'
+import {motion} from 'motion/react'
 import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'

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

@@ -10,7 +10,7 @@ import {
 } from '@floating-ui/react-dom'
 import {type RadiusStyleProps, type ShadowStyleProps, tooltip} from '@sanity/ui/css'
 import type {CardTone, ColorScheme} from '@sanity/ui/theme'
-import {AnimatePresence} from 'framer-motion'
+import {AnimatePresence} from 'motion/react'
 import {
   cloneElement,
   type FocusEvent,

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

@@ -1,4 +1,4 @@
-import {motion, type MotionStyle} from 'framer-motion'
+import {motion, type MotionStyle} from 'motion/react'
 import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'