Initial fix logic (#1085)

Author: Pratheek555

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

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;

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]
   );

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>
   );
 };