refactor: move reverse logic to useListPosition hook

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

src/NotificationList.tsx

@@ -63,17 +63,18 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
   const { classNames: contextClassNames } = React.useContext(NotificationContext);
 
   // ========================== Data ==========================
-  const mergedConfigList = React.useMemo(() => configList.slice().reverse(), [configList]);
-
   const keys = React.useMemo(
     () =>
-      mergedConfigList.map((config) => ({
+      configList.map((config) => ({
         config,
         key: String(config.key),
       })),
-    [mergedConfigList],
+    [configList],
+  );
+  const keyList = React.useMemo(
+    () => configList.map((config) => String(config.key)).reverse(),
+    [configList],
   );
-  const keyList = React.useMemo(() => keys.map(({ key }) => key), [keys]);
 
   // ========================= Motion =========================
   const placementMotion = typeof motion === 'function' ? motion(placement) : motion;
@@ -91,7 +92,7 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
     };
   }, [expanded, offset, stackEnabled, threshold]);
 
-  const [notificationPosition, setNodeSize] = useListPosition(mergedConfigList, stackPosition);
+  const [notificationPosition, setNodeSize] = useListPosition(configList, stackPosition);
   const { contentRef, onWheel, scrollOffset, viewportRef } = useListScroll(
     keyList,
     notificationPosition,
@@ -145,7 +146,7 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
           }}
         >
           {({ config, className: motionClassName, style: motionStyle }, nodeRef) => {
-            const { key, placement: itemPlacement, ...notificationConfig } = config;
+            const { key, placement: _placement, ...notificationConfig } = config;
             const strKey = String(key);
 
             return (

src/hooks/useListPosition/index.ts

@@ -14,17 +14,19 @@ export default function useListPosition(configList: { key: React.Key }[], stack?
     let offsetY = 0;
     const nextNotificationPosition = new Map<string, NodePosition>();
 
-    configList.forEach((config) => {
-      const key = String(config.key);
-      const nodePosition = {
-        x: 0,
-        y: offsetY,
-      };
+    configList
+      .slice()
+      .reverse()
+      .forEach((config) => {
+        const key = String(config.key);
+        const nodePosition = {
+          x: 0,
+          y: offsetY,
+        };
 
-      nextNotificationPosition.set(key, nodePosition);
-      // offsetY += (sizeMap[key]?.height ?? 0) + (stack?.offset ?? 0);
-      offsetY += (stack ? stack.offset : sizeMap[key]?.height) ?? 0;
-    });
+        nextNotificationPosition.set(key, nodePosition);
+        offsetY += (stack ? stack.offset : sizeMap[key]?.height) ?? 0;
+      });
 
     return nextNotificationPosition;
   }, [configList, sizeMap, stack]);

tests/stack.test.tsx

@@ -87,6 +87,7 @@ describe('stack', () => {
 
   it('passes stack offset to list position when collapsed', () => {
     const Demo = () => {
+      const countRef = React.useRef(0);
       const [api, holder] = useNotification({
         stack: { threshold: 1, offset: 12 },
       });
@@ -96,8 +97,11 @@ describe('stack', () => {
           <button
             type="button"
             onClick={() => {
+              const index = countRef.current;
+              countRef.current += 1;
+
               api.open({
-                content: <div className="context-content">Test</div>,
+                content: <div className={`context-content-${index}`}>Test {index}</div>,
                 duration: false,
               });
             }}
@@ -116,8 +120,9 @@ describe('stack', () => {
     const notices = Array.from(document.querySelectorAll<HTMLElement>('.rc-notification-notice'));
     const offsetList = notices.map((notice) => notice.style.getPropertyValue('--notification-y'));
 
-    expect(offsetList).toContain('0px');
-    expect(offsetList).toContain('12px');
+    expect(notices[0].querySelector('.context-content-0')).toBeTruthy();
+    expect(notices[1].querySelector('.context-content-1')).toBeTruthy();
+    expect(offsetList).toEqual(['12px', '0px']);
 
     fireEvent.mouseEnter(document.querySelector('.rc-notification-list'));