From 72465fa897ac134f757a0612deb441636ccff793 Mon Sep 17 00:00:00 2001
From: pratheek555 <pratheekravikumar55@gmail.com>
Date: Sun, 18 Jan 2026 04:15:24 +0000
Subject: [PATCH] Initial fix logic

---
 .../src/components/ToastBar/ToastBar.js       | 12 +++++++--
 .../components/ToastBar/ToastBar.styles.js    |  4 ++-
 .../components/ToastBar/ToastBarProvider.js   |  6 ++++-
 .../src/components/ToastBar/ToastContainer.js | 27 ++++++++++++-------
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/packages/ui-elements/src/components/ToastBar/ToastBar.js b/packages/ui-elements/src/components/ToastBar/ToastBar.js
index 71ea53a9d8..dcec7d6f5f 100644
--- a/packages/ui-elements/src/components/ToastBar/ToastBar.js
+++ b/packages/ui-elements/src/components/ToastBar/ToastBar.js
@@ -11,6 +11,7 @@ import useTheme from '../../hooks/useTheme';
 const ToastBar = ({ toast, onClose }) => {
   const { type, message, time = 2000 } = toast;
   const toastRef = useRef();
+  const latestOnClose = useRef(onClose);
   const { theme } = useTheme();
 
   const { classNames, styleOverrides } = useComponentOverrides('ToastBar');
@@ -42,8 +43,15 @@ const ToastBar = ({ toast, onClose }) => {
   }, [theme.colors, type]);
 
   useEffect(() => {
-    setTimeout(onClose, time);
-  }, [onClose, time]);
+    latestOnClose.current = onClose;
+  }, [onClose]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      latestOnClose.current?.();
+    }, time);
+    return () => clearTimeout(timer);
+  }, [time]);
 
   return (
     <Box
diff --git a/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js b/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js
index cff7dba271..b648ca821e 100644
--- a/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js
+++ b/packages/ui-elements/src/components/ToastBar/ToastBar.styles.js
@@ -43,7 +43,9 @@ export const getToastBarContainerStyles = (theme) => {
       position: absolute;
       z-index: ${theme.zIndex?.toastbar || 1600};
       border-radius: ${theme.radius};
-      animation: ${animation} ${2000}ms ease-in-out forwards;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
     `,
   };
   return styles;
diff --git a/packages/ui-elements/src/components/ToastBar/ToastBarProvider.js b/packages/ui-elements/src/components/ToastBar/ToastBarProvider.js
index c3507ad61a..1455351ee9 100644
--- a/packages/ui-elements/src/components/ToastBar/ToastBarProvider.js
+++ b/packages/ui-elements/src/components/ToastBar/ToastBarProvider.js
@@ -6,7 +6,11 @@ const ToastBarProvider = ({ position = 'bottom right', children }) => {
   const [toasts, setToasts] = useState([]);
   const dispatchToast = useCallback(
     (toast) => {
-      setToasts((prevToasts) => [toast, ...prevToasts]);
+      const withId = {
+        id: toast.id || `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+        ...toast,
+      };
+      setToasts((prevToasts) => [withId, ...prevToasts]);
     },
     [setToasts]
   );
diff --git a/packages/ui-elements/src/components/ToastBar/ToastContainer.js b/packages/ui-elements/src/components/ToastBar/ToastContainer.js
index d417b6d67f..a382444a39 100644
--- a/packages/ui-elements/src/components/ToastBar/ToastContainer.js
+++ b/packages/ui-elements/src/components/ToastBar/ToastContainer.js
@@ -9,6 +9,7 @@ const ToastContainer = () => {
   const { theme } = useTheme();
   const styles = getToastBarContainerStyles(theme);
   const { position, toasts, setToasts } = useContext(ToastContext);
+
   const positionStyle = useMemo(() => {
     const positions = position.split(/\s+/);
     const styleAnchor = {};
@@ -17,21 +18,29 @@ const ToastContainer = () => {
     });
     return styleAnchor;
   }, [position]);
-  const currentToast = useMemo(() => {
-    const toast = toasts[toasts.length - 1];
-    return toast;
-  }, [toasts]);
 
-  const onClose = useCallback(() => {
-    setToasts(toasts.slice(0, toasts.length - 1));
-  }, [setToasts, toasts]);
-  if (!currentToast) {
+  const stackedToasts = useMemo(() => [...toasts].reverse(), [toasts]);
+
+  const handleClose = useCallback(
+    (id) => {
+      setToasts((prevItems) => prevItems.filter((toast) => toast.id !== id));
+    },
+    [setToasts]
+  );
+
+  if (!stackedToasts.length) {
     return null;
   }
 
   return (
     <Box css={styles.container} style={positionStyle}>
-      <ToastBar toast={currentToast} onClose={onClose} />
+      {stackedToasts.map((toast) => (
+        <ToastBar
+          key={toast.id}
+          toast={toast}
+          onClose={() => handleClose(toast.id)}
+        />
+      ))}
     </Box>
   );
 };