From 79c2636b840dd7b065c7dc8214192bc370e603d2 Mon Sep 17 00:00:00 2001
From: Wanpan <wanpan96@163.com>
Date: Fri, 16 Aug 2024 11:32:05 +0800
Subject: [PATCH 1/6] feat: support classNames and styles

---
 README.md            | 14 +++++++++++++-
 src/Panel.tsx        | 19 ++++++++++++++-----
 src/PanelContent.tsx | 19 +++++++++++++++++--
 src/interface.ts     |  2 ++
 tests/index.spec.tsx | 24 +++++++++++++++++++++++-
 5 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index e126af65..d8456c72 100644
--- a/README.md
+++ b/README.md
@@ -130,7 +130,7 @@ If `accordion` is true, only one panel can be open. Opening another panel will c
     <thead>
     <tr>
         <th style="width: 100px;">name</th>
-        <th style="width: 50px;">type</th>
+        <th style="width: 200px;">type</th>
         <th>default</th>
         <th>description</th>
     </tr>
@@ -160,12 +160,24 @@ If `accordion` is true, only one panel can be open. Opening another panel will c
         <th></th>
         <td>custom className to apply</td>
       </tr>
+      <tr>
+        <td>classNames</td>
+        <td>{ header?: string, content?: string }</td>
+        <th></th>
+        <td>Semantic structure className</td>
+      </tr>
       <tr>
         <td>style</td>
         <td>object</td>
         <th></th>
         <td>custom style</td>
       </tr>
+      <tr>
+        <td>styles</td>
+        <td>{ header?: React.CSSProperties, content?: React.CSSProperties }</td>
+        <th></th>
+        <td>Semantic structure styles</td>
+      </tr>
       <tr>
         <td>openMotion</td>
         <td>object</td>
diff --git a/src/Panel.tsx b/src/Panel.tsx
index 24860d12..d86b647b 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -13,6 +13,8 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     onItemClick,
     forceRender,
     className,
+    classNames: customizeClassNames,
+    styles,
     prefixCls,
     collapsible,
     accordion,
@@ -64,11 +66,15 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     className,
   );
 
-  const headerClassName = classNames(headerClass, {
-    [`${prefixCls}-header`]: true,
-    [`${prefixCls}-header-collapsible-only`]: collapsibleHeader,
-    [`${prefixCls}-icon-collapsible-only`]: collapsibleIcon,
-  });
+  const headerClassName = classNames(
+    headerClass,
+    {
+      [`${prefixCls}-header`]: true,
+      [`${prefixCls}-header-collapsible-only`]: collapsibleHeader,
+      [`${prefixCls}-icon-collapsible-only`]: collapsibleIcon,
+    },
+    customizeClassNames?.header,
+  );
 
   // ======================== HeaderProps ========================
   const headerProps: React.HTMLAttributes<HTMLDivElement> = {
@@ -76,6 +82,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     'aria-expanded': isActive,
     'aria-disabled': disabled,
     onKeyDown: handleKeyDown,
+    style: styles?.header,
   };
 
   if (!collapsibleHeader && !collapsibleIcon) {
@@ -110,7 +117,9 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
               ref={motionRef}
               prefixCls={prefixCls}
               className={motionClassName}
+              classNames={customizeClassNames}
               style={motionStyle}
+              styles={styles}
               isActive={isActive}
               forceRender={forceRender}
               role={accordion ? 'tabpanel' : void 0}
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index ba6d36ed..6ad01e27 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -6,7 +6,17 @@ const PanelContent = React.forwardRef<
   HTMLDivElement,
   CollapsePanelProps & { children: React.ReactNode }
 >((props, ref) => {
-  const { prefixCls, forceRender, className, style, children, isActive, role } = props;
+  const {
+    prefixCls,
+    forceRender,
+    className,
+    style,
+    children,
+    isActive,
+    role,
+    classNames: customizeClassNames,
+    styles,
+  } = props;
 
   const [rendered, setRendered] = React.useState(isActive || forceRender);
 
@@ -34,7 +44,12 @@ const PanelContent = React.forwardRef<
       style={style}
       role={role}
     >
-      <div className={`${prefixCls}-content-box`}>{children}</div>
+      <div
+        className={classnames(`${prefixCls}-content-box`, customizeClassNames?.content)}
+        style={styles?.content}
+      >
+        {children}
+      </div>
     </div>
   );
 });
diff --git a/src/interface.ts b/src/interface.ts
index 7a36bed0..04750397 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -46,7 +46,9 @@ export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement>
   headerClass?: string;
   showArrow?: boolean;
   className?: string;
+  classNames?: { header?: string; content?: string };
   style?: object;
+  styles?: { header?: React.CSSProperties; content?: React.CSSProperties };
   isActive?: boolean;
   openMotion?: CSSMotionProps;
   destroyInactivePanel?: boolean;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 5ae23e53..330a8815 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -713,7 +713,7 @@ describe('collapse', () => {
         </Panel>
       </Collapse>,
     );
-    expect(container.querySelector('.rc-collapse-item').style.color).toBe('red');
+    expect(container.querySelector('.rc-collapse-item')).toHaveStyle({ color: 'red' });
   });
 
   describe('props items', () => {
@@ -859,5 +859,27 @@ describe('collapse', () => {
       expect(container.querySelector('.rc-collapse')?.getAttribute('data-testid')).toBe('1234');
       expect(container.querySelector('.rc-collapse')?.getAttribute('aria-label')).toBe('test');
     });
+
+    it('should support styles and classNames', () => {
+      const { container } = render(
+        <Collapse
+          activeKey={['1']}
+          items={[
+            {
+              key: '1',
+              label: 'title',
+              styles: { header: { color: 'red' }, content: { color: 'blue' } },
+              classNames: { header: 'header-class', content: 'content-class' },
+            },
+          ]}
+        />,
+      );
+
+      expect(container.querySelector('.rc-collapse-header')).toHaveClass('header-class');
+      expect(container.querySelector('.rc-collapse-content-box')).toHaveClass('content-class');
+
+      expect(container.querySelector('.rc-collapse-header')).toHaveStyle({ color: 'red' });
+      expect(container.querySelector('.rc-collapse-content-box')).toHaveStyle({ color: 'blue' });
+    });
   });
 });

From ff919516dbbf6ce923754b83df5cfc770cc9e3ff Mon Sep 17 00:00:00 2001
From: Wanpan <wanpan96@163.com>
Date: Fri, 16 Aug 2024 14:11:24 +0800
Subject: [PATCH 2/6] feat: content to body

---
 README.md            | 4 ++--
 src/PanelContent.tsx | 4 ++--
 src/interface.ts     | 4 ++--
 tests/index.spec.tsx | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index d8456c72..1a245990 100644
--- a/README.md
+++ b/README.md
@@ -162,7 +162,7 @@ If `accordion` is true, only one panel can be open. Opening another panel will c
       </tr>
       <tr>
         <td>classNames</td>
-        <td>{ header?: string, content?: string }</td>
+        <td>{ header?: string, body?: string }</td>
         <th></th>
         <td>Semantic structure className</td>
       </tr>
@@ -174,7 +174,7 @@ If `accordion` is true, only one panel can be open. Opening another panel will c
       </tr>
       <tr>
         <td>styles</td>
-        <td>{ header?: React.CSSProperties, content?: React.CSSProperties }</td>
+        <td>{ header?: React.CSSProperties, body?: React.CSSProperties }</td>
         <th></th>
         <td>Semantic structure styles</td>
       </tr>
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index 6ad01e27..37bb0310 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -45,8 +45,8 @@ const PanelContent = React.forwardRef<
       role={role}
     >
       <div
-        className={classnames(`${prefixCls}-content-box`, customizeClassNames?.content)}
-        style={styles?.content}
+        className={classnames(`${prefixCls}-content-box`, customizeClassNames?.body)}
+        style={styles?.body}
       >
         {children}
       </div>
diff --git a/src/interface.ts b/src/interface.ts
index 04750397..57e9d900 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -46,9 +46,9 @@ export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement>
   headerClass?: string;
   showArrow?: boolean;
   className?: string;
-  classNames?: { header?: string; content?: string };
+  classNames?: { header?: string; body?: string };
   style?: object;
-  styles?: { header?: React.CSSProperties; content?: React.CSSProperties };
+  styles?: { header?: React.CSSProperties; body?: React.CSSProperties };
   isActive?: boolean;
   openMotion?: CSSMotionProps;
   destroyInactivePanel?: boolean;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 330a8815..7304b986 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -868,15 +868,15 @@ describe('collapse', () => {
             {
               key: '1',
               label: 'title',
-              styles: { header: { color: 'red' }, content: { color: 'blue' } },
-              classNames: { header: 'header-class', content: 'content-class' },
+              styles: { header: { color: 'red' }, body: { color: 'blue' } },
+              classNames: { header: 'header-class', body: 'body-class' },
             },
           ]}
         />,
       );
 
       expect(container.querySelector('.rc-collapse-header')).toHaveClass('header-class');
-      expect(container.querySelector('.rc-collapse-content-box')).toHaveClass('content-class');
+      expect(container.querySelector('.rc-collapse-content-box')).toHaveClass('body-class');
 
       expect(container.querySelector('.rc-collapse-header')).toHaveStyle({ color: 'red' });
       expect(container.querySelector('.rc-collapse-content-box')).toHaveStyle({ color: 'blue' });

From 6f1011d4a0e13a98afb03bd728aa918b991934d7 Mon Sep 17 00:00:00 2001
From: Wanpan <wanpan96@163.com>
Date: Thu, 22 Aug 2024 10:47:40 +0800
Subject: [PATCH 3/6] feat: Modifying the DOM structure

---
 assets/index.less    | 10 +++++-----
 src/PanelContent.tsx | 11 ++++-------
 tests/index.spec.tsx | 10 +++++-----
 tsconfig.json        |  9 ++++++++-
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 69f97a8a..a8d42456 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -85,13 +85,13 @@
   &-content {
     overflow: hidden;
     color: @text-color;
-    padding: 0 16px;
+    padding: 16px;
     background-color: #fff;
 
-    & > &-box {
-      margin-top: 16px;
-      margin-bottom: 16px;
-    }
+    // & > &-box {
+    //   margin-top: 16px;
+    //   margin-bottom: 16px;
+    // }
 
     // &-inactive {
     //   display: none;
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index 37bb0310..ce0ed836 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -35,21 +35,18 @@ const PanelContent = React.forwardRef<
       ref={ref}
       className={classnames(
         `${prefixCls}-content`,
+        `${prefixCls}-content-box`,
         {
           [`${prefixCls}-content-active`]: isActive,
           [`${prefixCls}-content-inactive`]: !isActive,
         },
         className,
+        customizeClassNames?.body,
       )}
-      style={style}
+      style={{ ...style, ...styles?.body }}
       role={role}
     >
-      <div
-        className={classnames(`${prefixCls}-content-box`, customizeClassNames?.body)}
-        style={styles?.body}
-      >
-        {children}
-      </div>
+      {children}
     </div>
   );
 });
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 7304b986..7fa0e773 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -86,7 +86,7 @@ describe('collapse', () => {
       fireEvent.click(header);
       jest.runAllTimers();
       expect(collapse.container.querySelector('.rc-collapse-content-inactive')?.innerHTML).toBe(
-        '<div class="rc-collapse-content-box">second</div>',
+        'second',
       );
       expect(collapse.container.querySelectorAll('.rc-collapse-content-active').length).toBeFalsy();
     });
@@ -201,7 +201,7 @@ describe('collapse', () => {
       const { container } = render(element);
       const header = container.querySelector('.rc-collapse-header');
 
-      expect(header.classList.contains('custom-class')).toBeTruthy();
+      expect(header?.classList.contains('custom-class')).toBeTruthy();
     });
   });
 
@@ -778,7 +778,7 @@ describe('collapse', () => {
           ]}
         />,
       );
-      fireEvent.click(container.querySelector('.rc-collapse-header'));
+      fireEvent.click(container.querySelector('.rc-collapse-header')!);
       expect(onItemClick).toHaveBeenCalled();
       expect(onItemClick).lastCalledWith('0');
     });
@@ -800,11 +800,11 @@ describe('collapse', () => {
         />,
       );
 
-      fireEvent.click(container.querySelector('.rc-collapse-header'));
+      fireEvent.click(container.querySelector('.rc-collapse-header')!);
       expect(onItemClick).not.toHaveBeenCalled();
 
       fireEvent.click(
-        container.querySelector('.rc-collapse-item:nth-child(2) .rc-collapse-expand-icon'),
+        container.querySelector('.rc-collapse-item:nth-child(2) .rc-collapse-expand-icon')!,
       );
       expect(onItemClick).toHaveBeenCalled();
       expect(onChangeFn).toBeCalledTimes(1);
diff --git a/tsconfig.json b/tsconfig.json
index bbd8b8b4..bc68db48 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,5 +13,12 @@
       "rc-collapse": ["src/index.tsx"]
     }
   },
-  "include": [".dumirc.ts", "./src/**/*.ts", "./src/**/*.tsx", "./docs/**/*.tsx"]
+  "include": [
+    ".dumirc.ts",
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
+    "./tests/**/*.ts",
+    "./tests/**/*.tsx",
+    "./docs/**/*.tsx"
+  ]
 }

From 4531fa19fed9aa235bdd646e7eba446344804b87 Mon Sep 17 00:00:00 2001
From: Wanpan <wanpan96@163.com>
Date: Thu, 22 Aug 2024 13:39:28 +0800
Subject: [PATCH 4/6] feat: add default value

---
 src/Panel.tsx        | 8 ++++----
 src/PanelContent.tsx | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Panel.tsx b/src/Panel.tsx
index d86b647b..5fbca549 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -13,8 +13,8 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     onItemClick,
     forceRender,
     className,
-    classNames: customizeClassNames,
-    styles,
+    classNames: customizeClassNames = {},
+    styles = {},
     prefixCls,
     collapsible,
     accordion,
@@ -73,7 +73,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
       [`${prefixCls}-header-collapsible-only`]: collapsibleHeader,
       [`${prefixCls}-icon-collapsible-only`]: collapsibleIcon,
     },
-    customizeClassNames?.header,
+    customizeClassNames.header,
   );
 
   // ======================== HeaderProps ========================
@@ -82,7 +82,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     'aria-expanded': isActive,
     'aria-disabled': disabled,
     onKeyDown: handleKeyDown,
-    style: styles?.header,
+    style: styles.header,
   };
 
   if (!collapsibleHeader && !collapsibleIcon) {
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index ce0ed836..bbac1d75 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -41,9 +41,9 @@ const PanelContent = React.forwardRef<
           [`${prefixCls}-content-inactive`]: !isActive,
         },
         className,
-        customizeClassNames?.body,
+        customizeClassNames.body,
       )}
-      style={{ ...style, ...styles?.body }}
+      style={{ ...style, ...styles.body }}
       role={role}
     >
       {children}

From 2aba557bdf0088869de51ee69373948841aa7d7c Mon Sep 17 00:00:00 2001
From: Wanpan <wanpan96@163.com>
Date: Fri, 23 Aug 2024 11:09:58 +0800
Subject: [PATCH 5/6] fix: Animation does not meet expectations

---
 assets/index.less    | 10 +++++-----
 src/PanelContent.tsx | 10 +++++++---
 tests/index.spec.tsx |  2 +-
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index a8d42456..69f97a8a 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -85,13 +85,13 @@
   &-content {
     overflow: hidden;
     color: @text-color;
-    padding: 16px;
+    padding: 0 16px;
     background-color: #fff;
 
-    // & > &-box {
-    //   margin-top: 16px;
-    //   margin-bottom: 16px;
-    // }
+    & > &-box {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
 
     // &-inactive {
     //   display: none;
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index bbac1d75..1782f0bb 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -35,7 +35,6 @@ const PanelContent = React.forwardRef<
       ref={ref}
       className={classnames(
         `${prefixCls}-content`,
-        `${prefixCls}-content-box`,
         {
           [`${prefixCls}-content-active`]: isActive,
           [`${prefixCls}-content-inactive`]: !isActive,
@@ -43,10 +42,15 @@ const PanelContent = React.forwardRef<
         className,
         customizeClassNames.body,
       )}
-      style={{ ...style, ...styles.body }}
+      style={style}
       role={role}
     >
-      {children}
+      <div
+        className={classnames(`${prefixCls}-content-box`, customizeClassNames?.body)}
+        style={styles?.body}
+      >
+        {children}
+      </div>
     </div>
   );
 });
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 7fa0e773..c08d7ced 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -86,7 +86,7 @@ describe('collapse', () => {
       fireEvent.click(header);
       jest.runAllTimers();
       expect(collapse.container.querySelector('.rc-collapse-content-inactive')?.innerHTML).toBe(
-        'second',
+        '<div class="rc-collapse-content-box">second</div>',
       );
       expect(collapse.container.querySelectorAll('.rc-collapse-content-active').length).toBeFalsy();
     });

From d6b07570247e1619d8ed08d6faef98c281e65338 Mon Sep 17 00:00:00 2001
From: Wanpan <wanpan96@163.com>
Date: Fri, 23 Aug 2024 14:12:09 +0800
Subject: [PATCH 6/6] fix: update

---
 src/PanelContent.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index 1782f0bb..37bb0310 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -40,7 +40,6 @@ const PanelContent = React.forwardRef<
           [`${prefixCls}-content-inactive`]: !isActive,
         },
         className,
-        customizeClassNames.body,
       )}
       style={style}
       role={role}