refactor: colocate stack config and add list content semantics

Author: zombieJ

src/NotificationList/index.tsx

@@ -4,26 +4,33 @@ import { useComposeRef } from '@rc-component/util/lib/ref';
 import { clsx } from 'clsx';
 import * as React from 'react';
 import useListPosition from '../hooks/useListPosition';
-import useStack from '../hooks/useStack';
-import type { StackConfig } from '../interface';
+import useStack, { type StackConfig } from '../hooks/useStack';
 import Notification, {
   type ComponentsType,
-  type NotificationClassNames,
+  type NotificationClassNames as NoticeClassNames,
   type NotificationProps,
-  type NotificationStyles,
+  type NotificationStyles as NoticeStyles,
 } from '../Notification';
 import { NotificationContext, type NotificationContextProps } from '../NotificationProvider';
 import Content from './Content';
 
 export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
-export type { StackConfig } from '../interface';
+export type { StackConfig } from '../hooks/useStack';
 
 export interface NotificationListConfig extends Omit<NotificationProps, 'prefixCls'> {
   key: React.Key;
   placement?: Placement;
   times?: number;
 }
 
+export interface NotificationClassNames extends NoticeClassNames {
+  listContent?: string;
+}
+
+export interface NotificationStyles extends NoticeStyles {
+  listContent?: React.CSSProperties;
+}
+
 export interface NotificationListProps {
   configList?: NotificationListConfig[];
   prefixCls?: string;
@@ -244,7 +251,13 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
       }}
       style={style}
     >
-      <Content listPrefixCls={listPrefixCls} height={totalHeight} ref={contentRef}>
+      <Content
+        listPrefixCls={listPrefixCls}
+        height={totalHeight}
+        className={classNames?.listContent}
+        style={styles?.listContent}
+        ref={contentRef}
+      >
         <CSSMotionList
           component={false}
           keys={keys}
@@ -292,4 +305,3 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
 };
 
 export default NotificationList;
-export type { NotificationClassNames, NotificationStyles } from '../Notification';

src/hooks/useListPosition/index.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { StackConfig } from '../../interface';
+import type { StackConfig } from '../useStack';
 import useSizes from './useSizes';
 
 /**

src/hooks/useStack.ts

@@ -1,4 +1,7 @@
-import type { StackConfig } from '../interface';
+export interface StackConfig {
+  threshold?: number;
+  offset?: number;
+}
 
 const DEFAULT_OFFSET = 8;
 const DEFAULT_THRESHOLD = 3;

src/interface.ts

@@ -653,6 +653,28 @@ describe('Notification.Basic', () => {
     expect(document.querySelector('.bamboo-topRight')).toBeTruthy();
   });
 
+  it('should listContent styles and classNames work', () => {
+    const { instance } = renderDemo({
+      classNames: {
+        listContent: 'bamboo',
+      },
+      styles: {
+        listContent: {
+          content: 'little',
+        },
+      },
+    });
+
+    act(() => {
+      instance.open({});
+    });
+
+    expect(document.querySelector('.rc-notification-list-content')).toHaveStyle({
+      content: 'little',
+    });
+    expect(document.querySelector('.rc-notification-list-content')).toHaveClass('bamboo');
+  });
+
   it('placement', () => {
     const { instance } = renderDemo();