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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.40",
+  "version": "4.0.0-static.41",
   "keywords": [
     "react",
     "ui",

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 {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)