fix the timeout issue in notifcations wrapper

packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider/NotificationsProvider.tsx

@@ -51,12 +51,6 @@ export const NotificationsProvider: FC<INotificationsProvider> = ({
     };
 
     setNotifications((v) => [...v, notificationProps]);
-
-    if (!notificationProps.isDismissable) {
-      setTimeout(() => {
-        removeNotification(notificationProps);
-      }, 12000);
-    }
   };
 
   return (

packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationSlot.tsx

@@ -1,11 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 import { useNotifications } from '../LayoutProvider';
-import {
-  Notification,
-  NotificationHeading,
-  Stack,
-} from './../../../../components';
+import { NotificationHeading, Stack } from './../../../../components';
+import { NotificationWrapper } from './NotificationWrapper';
 import { notificationsSlotClass } from './style.css';
 
 export const NotificationSlot: FC = () => {
@@ -14,13 +11,13 @@ export const NotificationSlot: FC = () => {
   console.log(reversedNotifications);
   return (
     <Stack className={notificationsSlotClass}>
-      {reversedNotifications.slice(0, 3).map((props, idx) => {
-        const { label, message, ...rest } = props;
+      {reversedNotifications.map((props) => {
+        const { label, message } = props;
         return (
-          <Notification key={idx} {...rest}>
+          <NotificationWrapper key={props.id} {...props}>
             {label && <NotificationHeading>{label}</NotificationHeading>}
             {message}
-          </Notification>
+          </NotificationWrapper>
         );
       })}
     </Stack>

packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationWrapper.tsx

@@ -0,0 +1,21 @@
+import type { FC, PropsWithChildren } from 'react';
+import React, { useEffect } from 'react';
+import type { INotificationMinimizedProps } from '../LayoutProvider/NotificationsProvider';
+import { useNotifications } from '../LayoutProvider/NotificationsProvider';
+import { Notification } from './../../../../components';
+
+type IProps = PropsWithChildren & INotificationMinimizedProps;
+
+export const NotificationWrapper: FC<IProps> = ({ children, ...props }) => {
+  const { removeNotification } = useNotifications();
+
+  useEffect(() => {
+    if (!props.isDismissable) {
+      setTimeout(() => {
+        removeNotification(props);
+      }, 12000);
+    }
+  }, []);
+
+  return <Notification {...props}>{children}</Notification>;
+};

packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/style.css.ts

@@ -1,3 +1,4 @@
+import { globalStyle } from '@vanilla-extract/css';
 import { atoms, responsiveStyle, style, token } from './../../../../styles';
 
 export const notificationsSlotClass = style([
@@ -19,3 +20,7 @@ export const notificationsSlotClass = style([
     },
   }),
 ]);
+
+globalStyle(`${notificationsSlotClass} > *:nth-child(n+4)`, {
+  display: 'none',
+});