fix: only mark hovered stacked notifications expanded

Author: zombieJ

src/NotificationList/index.tsx

@@ -76,7 +76,9 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
   const placementMotion = typeof motion === 'function' ? motion(placement) : motion;
   const [stackEnabled, { offset, threshold }] = useStack(stackConfig);
   const [listHovering, setListHovering] = React.useState(false);
+  const stackCollapsed = stackEnabled && keys.length > threshold;
   const expanded = stackEnabled && (listHovering || keys.length <= threshold);
+  const stackExpanded = stackCollapsed && listHovering;
   const stackPosition = React.useMemo<StackConfig | undefined>(() => {
     if (!stackEnabled || expanded) {
       return undefined;
@@ -123,7 +125,7 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
         className,
         {
           [`${prefixCls}-stack`]: stackEnabled,
-          [`${prefixCls}-stack-expanded`]: expanded,
+          [`${prefixCls}-stack-expanded`]: stackExpanded,
         },
       )}
       onMouseEnter={() => {

tests/stack.test.tsx

@@ -33,7 +33,11 @@ describe('stack', () => {
     }
     expect(document.querySelectorAll('.rc-notification-notice')).toHaveLength(3);
     expect(document.querySelector('.rc-notification-stack')).toBeTruthy();
-    expect(document.querySelector('.rc-notification-stack-expanded')).toBeTruthy();
+    expect(document.querySelector('.rc-notification-stack-expanded')).toBeFalsy();
+
+    fireEvent.mouseEnter(document.querySelector('.rc-notification-list'));
+    expect(document.querySelector('.rc-notification-stack-expanded')).toBeFalsy();
+    fireEvent.mouseLeave(document.querySelector('.rc-notification-list'));
 
     for (let i = 0; i < 2; i++) {
       fireEvent.click(container.querySelector('button'));