fix: position of removed notification flick

package.json

@@ -79,7 +79,7 @@
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "2.x",
-    "rc-motion": "^2.8.0",
+    "rc-motion": "^2.9.0",
     "rc-util": "^5.20.1"
   },
   "lint-staged": {

src/NoticeList.tsx

@@ -80,11 +80,17 @@ const NoticeList: FC<NoticeListProps> = (props) => {
         }
       }}
     >
-      {({ config, className: motionClassName, style: motionStyle }, nodeRef) => {
+      {(
+        { config, className: motionClassName, style: motionStyle, index: motionIndex },
+        nodeRef,
+      ) => {
         const { key, times } = config as InnerOpenConfig;
         const { className: configClassName, style: configStyle } = config as NoticeConfig;
+        const dataIndex = keys.findIndex((item) => item.key === key);
 
-        const index = keys.length - 1 - keys.findIndex((item) => item.key === key);
+        // If dataIndex is -1, that means this notice has been removed in data, but still in dom
+        // Should minus (motionIndex - 1) to get the correct index because keys.length is not the same as dom length
+        const index = keys.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1);
         const stackStyle: CSSProperties = {};
         if (stack) {
           if (index > 0) {
@@ -117,7 +123,9 @@ const NoticeList: FC<NoticeListProps> = (props) => {
             <Notice
               {...config}
               ref={(node) => {
-                listRef.current[index] = node;
+                if (dataIndex > -1) {
+                  listRef.current[index] = node;
+                }
               }}
               prefixCls={prefixCls}
               className={clsx(configClassName, ctxCls?.notice)}

tests/hooks.test.tsx

@@ -3,7 +3,6 @@ import { render, fireEvent, act } from '@testing-library/react';
 import { useNotification } from '../src';
 import type { NotificationAPI, NotificationConfig } from '../src';
 import NotificationProvider from '../src/NotificationProvider';
-import { expect } from 'vitest';
 
 require('../assets/index.less');
 
@@ -182,43 +181,4 @@ describe('Notification.Hooks', () => {
     expect(document.querySelector('.rc-notification')).toHaveClass('banana');
     expect(document.querySelector('.custom-notice')).toHaveClass('apple');
   });
-
-  it('support stack', () => {
-    const Demo = () => {
-      const [api, holder] = useNotification({
-        stack: { threshold: 3 },
-      });
-      return (
-        <>
-          <button
-            type="button"
-            onClick={() => {
-              api.open({
-                content: <div className="context-content">Test</div>,
-                duration: null,
-              });
-            }}
-          />
-          {holder}
-        </>
-      );
-    };
-
-    const { container } = render(<Demo />);
-    for (let i = 0; i < 3; i++) {
-      fireEvent.click(container.querySelector('button'));
-    }
-    expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(3);
-    expect(document.querySelector('.rc-notification-stack')).toBeTruthy();
-    expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
-
-    for (let i = 0; i < 2; i++) {
-      fireEvent.click(container.querySelector('button'));
-    }
-    expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(5);
-    expect(document.querySelector('.rc-notification-stack-expanded')).toBeFalsy();
-
-    fireEvent.mouseEnter(document.querySelector('.rc-notification-notice'));
-    expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
-  });
 });

tests/stack.test.tsx

@@ -0,0 +1,46 @@
+import { useNotification } from '../src';
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+
+require('../assets/index.less');
+
+describe('stack', () => {
+  it('support stack', () => {
+    const Demo = () => {
+      const [api, holder] = useNotification({
+        stack: { threshold: 3 },
+      });
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => {
+              api.open({
+                content: <div className="context-content">Test</div>,
+                duration: null,
+              });
+            }}
+          />
+          {holder}
+        </>
+      );
+    };
+
+    const { container } = render(<Demo />);
+    for (let i = 0; i < 3; i++) {
+      fireEvent.click(container.querySelector('button'));
+    }
+    expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(3);
+    expect(document.querySelector('.rc-notification-stack')).toBeTruthy();
+    expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
+
+    for (let i = 0; i < 2; i++) {
+      fireEvent.click(container.querySelector('button'));
+    }
+    expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(5);
+    expect(document.querySelector('.rc-notification-stack-expanded')).toBeFalsy();
+
+    fireEvent.mouseEnter(document.querySelector('.rc-notification-notice'));
+    expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
+  });
+});