@moises.ai/design-system 3.10.12 → 3.10.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.10.12",
+  "version": "3.10.13",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/ToastProvider/ToastProvider.jsx

@@ -1,4 +1,12 @@
-import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { Toast } from 'radix-ui'
 import { Callout } from '../Callout/Callout'
 import styles from './ToastProvider.module.css'
@@ -30,9 +38,31 @@ export const ToastProvider = ({
     return 'neutral'
   }, [])
 
+  const getCalloutStyle = useCallback((variant) => {
+    if (variant === 'success') {
+      return {
+        backgroundColor: '#113B29',
+        color: '#BBFFD7',
+      }
+    }
+    if (variant === 'error') {
+      return {
+        backgroundColor: '#201314',
+        color: '#FF9592',
+      }
+    }
+    return undefined
+  }, [])
+
   const [toasts, setToasts] = useState([])
+  const timeoutIdsRef = useRef(new Map())
 
   const dismiss = useCallback((id) => {
+    const timeoutId = timeoutIdsRef.current.get(id)
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+      timeoutIdsRef.current.delete(id)
+    }
     setToasts((prev) => prev.filter((toastItem) => toastItem.id !== id))
   }, [])
 
@@ -43,10 +73,32 @@ export const ToastProvider = ({
         ...normalized,
         id: `${Date.now()}-${toastId++}`,
       }
-      setToasts((prev) => [...prev.slice(-(maxToasts - 1)), nextToast])
+
+      const toastDuration = nextToast.duration ?? duration
+      const timeoutId = setTimeout(() => {
+        dismiss(nextToast.id)
+      }, toastDuration)
+
+      timeoutIdsRef.current.set(nextToast.id, timeoutId)
+      setToasts((prev) => {
+        const nextToasts = [...prev.slice(-(maxToasts - 1)), nextToast]
+        const nextToastIds = new Set(nextToasts.map((toastItem) => toastItem.id))
+
+        prev.forEach((toastItem) => {
+          if (!nextToastIds.has(toastItem.id)) {
+            const staleTimeoutId = timeoutIdsRef.current.get(toastItem.id)
+            if (staleTimeoutId) {
+              clearTimeout(staleTimeoutId)
+              timeoutIdsRef.current.delete(toastItem.id)
+            }
+          }
+        })
+
+        return nextToasts
+      })
       return nextToast.id
     },
-    [maxToasts],
+    [dismiss, duration, maxToasts],
   )
 
   const success = useCallback(
@@ -73,6 +125,13 @@ export const ToastProvider = ({
     [show, success, error, dismiss],
   )
 
+  useEffect(() => {
+    return () => {
+      timeoutIdsRef.current.forEach((timeoutId) => clearTimeout(timeoutId))
+      timeoutIdsRef.current.clear()
+    }
+  }, [])
+
   return (
     <ToastContext.Provider value={value}>
       <Toast.Provider
@@ -98,6 +157,7 @@ export const ToastProvider = ({
                   title={toastItem.title}
                   text={toastItem.description}
                   className={styles.toastCallout}
+                  style={getCalloutStyle(toastItem.variant)}
                 />
               </div>
             </Toast.Description>