feat(Notifications): add the max amount of notifications to render at… (#213)

Co-authored-by: Sergey Garin <sergey.garin@cube.dev>

Author: tenphi

.changeset/rare-waves-approve.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix that allows notifications to be dismissed correctly when they are off the display limit.

src/components/overlays/NewNotifications/Bar/NotificationsBar.tsx

@@ -1,12 +1,12 @@
-import { Key, useLayoutEffect, useRef, useState } from 'react';
+import { Key, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { TransitionGroup } from 'react-transition-group';
 import { Item } from '@react-stately/collections';
 import { useHover } from '@react-aria/interactions';
-import { useFocusRing, focusSafely } from '@react-aria/focus';
+import { focusSafely, useFocusRing } from '@react-aria/focus';
 
 import { tasty } from '../../../../tasty';
 import { CubeNotifyApiPropsWithID } from '../types';
-import { useNotificationsList, CollectionChildren } from '../hooks';
+import { CollectionChildren, useNotificationsList } from '../hooks';
 import { mergeProps } from '../../../../utils/react';
 import { useChainedCallback, useEvent } from '../../../../_internal';
 
@@ -59,6 +59,7 @@ export function NotificationsBar(props: NotificationsBarProps): JSX.Element {
 
   const ref = useRef<HTMLElement | null>(null);
   const [realLimit, setRealLimit] = useState(limit + 1);
+  const lastShownIdRef = useRef<Key>();
 
   const { listProps, state } = useNotificationsList({ items, children, ref });
   const { hoverProps, isHovered } = useHover({});
@@ -84,9 +85,17 @@ export function NotificationsBar(props: NotificationsBarProps): JSX.Element {
     moveFocus,
   );
 
-  const collection = [...state.collection].reverse();
+  let collection = [...state.collection].reverse();
   const collectionLength = collection.length;
 
+  const lastShownNotificationIndex = collection.findIndex(
+    (notification) => notification.props.id === lastShownIdRef.current,
+  );
+
+  if (lastShownNotificationIndex !== -1) {
+    collection = collection.slice(0, lastShownNotificationIndex);
+  }
+
   /**
    * Handy hack to improve animations if the limit is reached.
    */
@@ -100,12 +109,25 @@ export function NotificationsBar(props: NotificationsBarProps): JSX.Element {
     }
   }, [realLimit]);
 
-  // Auto-dismiss all notifications that are off the limit.
-  collection
-    .slice(realLimit)
-    .forEach((notification) =>
-      chainedOnRemoveNotification(notification.props.id),
-    );
+  // Set the last notification that was gone off the limit
+  collection.slice(realLimit).forEach((notification) => {
+    // It's safe 'cause there is always only a single notification above the limit
+    lastShownIdRef.current = notification.props.id;
+  });
+
+  useEffect(() => {
+    // Auto-dismiss the last shown notification that was off the limit
+    if (lastShownIdRef.current) {
+      onDismissNotification(lastShownIdRef.current);
+      onRemoveNotification(lastShownIdRef.current);
+
+      const lastNotification = collection.find(
+        (notification) => notification.props.id === lastShownIdRef.current,
+      );
+
+      lastNotification?.props.onDismiss?.();
+    }
+  }, [lastShownIdRef.current]);
 
   return (
     <NotificationsContainer

src/components/overlays/NewNotifications/Notifications.stories.tsx

@@ -462,6 +462,6 @@ NotificationsQueue.play = async ({ canvasElement }) => {
 
     const button = getByTestId('ClickMeButton');
     await userEvent.click(button);
-    await wait(random(500, 1000));
+    await wait(random(400, 800));
   }
 };