From 9c6b70bc55aa793dd849972672bd423c74705356 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Wed, 8 Jan 2025 10:42:04 +0800
Subject: [PATCH 1/3] feat: add content for Semantic

---
 src/PanelContent.tsx | 3 ++-
 src/interface.ts     | 2 +-
 tests/index.spec.tsx | 5 +++++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index dac6aa9..d4f7b8d 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -35,13 +35,14 @@ const PanelContent = React.forwardRef<
       ref={ref}
       className={classnames(
         `${prefixCls}-content`,
+        customizeClassNames?.content,
         {
           [`${prefixCls}-content-active`]: isActive,
           [`${prefixCls}-content-inactive`]: !isActive,
         },
         className,
       )}
-      style={style}
+      style={{ ...style, ...styles?.content }}
       role={role}
     >
       <div
diff --git a/src/interface.ts b/src/interface.ts
index f6ca109..baf9b7d 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -39,7 +39,7 @@ export interface CollapseProps {
   items?: ItemType[];
 }
 
-export type SemanticName = 'header' | 'title' | 'body' | 'icon';
+export type SemanticName = 'header' | 'title' | 'body' | 'icon' | 'content';
 export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
   id?: string;
   header?: string | React.ReactNode;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 3b23a22..bc8686e 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -866,12 +866,14 @@ describe('collapse', () => {
         body: { color: 'blue' },
         title: { color: 'green' },
         icon: { color: 'yellow' },
+        content: { color: 'purple' },
       };
       const customClassnames = {
         header: 'custom-header',
         body: 'custom-body',
         title: 'custom-title',
         icon: 'custom-icon',
+        content: 'custom-content',
       };
 
       const { container } = render(
@@ -889,18 +891,21 @@ describe('collapse', () => {
       );
       const headerElement = container.querySelector('.rc-collapse-header') as HTMLElement;
       const bodyElement = container.querySelector('.rc-collapse-body') as HTMLElement;
+      const contentElement = container.querySelector('.rc-collapse-content') as HTMLElement;
       const titleElement = container.querySelector('.rc-collapse-title') as HTMLElement;
       const iconElement = container.querySelector('.rc-collapse-expand-icon') as HTMLElement;
 
       // check classNames
       expect(headerElement.classList).toContain('custom-header');
       expect(bodyElement.classList).toContain('custom-body');
+      expect(contentElement.classList).toContain('custom-content');
       expect(titleElement.classList).toContain('custom-title');
       expect(iconElement.classList).toContain('custom-icon');
 
       // check styles
       expect(headerElement.style.color).toBe('red');
       expect(bodyElement.style.color).toBe('blue');
+      expect(contentElement.style.color).toBe('purple');
       expect(titleElement.style.color).toBe('green');
       expect(iconElement.style.color).toBe('yellow');
     });

From f60e0cb444a6a66d8ca5b2273883d92fc9f6603c Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Wed, 8 Jan 2025 11:42:25 +0800
Subject: [PATCH 2/3] fix

---
 src/PanelContent.tsx | 5 ++---
 src/interface.ts     | 2 +-
 tests/index.spec.tsx | 5 -----
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index d4f7b8d..4608631 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -34,15 +34,14 @@ const PanelContent = React.forwardRef<
     <div
       ref={ref}
       className={classnames(
-        `${prefixCls}-content`,
-        customizeClassNames?.content,
+        `${prefixCls}-panel`,
         {
           [`${prefixCls}-content-active`]: isActive,
           [`${prefixCls}-content-inactive`]: !isActive,
         },
         className,
       )}
-      style={{ ...style, ...styles?.content }}
+      style={style}
       role={role}
     >
       <div
diff --git a/src/interface.ts b/src/interface.ts
index baf9b7d..f6ca109 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -39,7 +39,7 @@ export interface CollapseProps {
   items?: ItemType[];
 }
 
-export type SemanticName = 'header' | 'title' | 'body' | 'icon' | 'content';
+export type SemanticName = 'header' | 'title' | 'body' | 'icon';
 export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
   id?: string;
   header?: string | React.ReactNode;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index bc8686e..3b23a22 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -866,14 +866,12 @@ describe('collapse', () => {
         body: { color: 'blue' },
         title: { color: 'green' },
         icon: { color: 'yellow' },
-        content: { color: 'purple' },
       };
       const customClassnames = {
         header: 'custom-header',
         body: 'custom-body',
         title: 'custom-title',
         icon: 'custom-icon',
-        content: 'custom-content',
       };
 
       const { container } = render(
@@ -891,21 +889,18 @@ describe('collapse', () => {
       );
       const headerElement = container.querySelector('.rc-collapse-header') as HTMLElement;
       const bodyElement = container.querySelector('.rc-collapse-body') as HTMLElement;
-      const contentElement = container.querySelector('.rc-collapse-content') as HTMLElement;
       const titleElement = container.querySelector('.rc-collapse-title') as HTMLElement;
       const iconElement = container.querySelector('.rc-collapse-expand-icon') as HTMLElement;
 
       // check classNames
       expect(headerElement.classList).toContain('custom-header');
       expect(bodyElement.classList).toContain('custom-body');
-      expect(contentElement.classList).toContain('custom-content');
       expect(titleElement.classList).toContain('custom-title');
       expect(iconElement.classList).toContain('custom-icon');
 
       // check styles
       expect(headerElement.style.color).toBe('red');
       expect(bodyElement.style.color).toBe('blue');
-      expect(contentElement.style.color).toBe('purple');
       expect(titleElement.style.color).toBe('green');
       expect(iconElement.style.color).toBe('yellow');
     });

From 4c499a1a56e5969c643573d1e9643d0f6a406a7d Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Wed, 8 Jan 2025 15:41:39 +0800
Subject: [PATCH 3/3] update

---
 assets/index.less                 |  4 +-
 assets/motion.less                |  2 +-
 docs/examples/_util/motionUtil.ts |  2 +-
 src/Panel.tsx                     |  2 +-
 src/PanelContent.tsx              |  4 +-
 tests/index.spec.tsx              | 68 ++++++++++++++-----------------
 6 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 9000017..4093e0f 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -82,7 +82,7 @@
     background-color: #f3f3f3;
   }
 
-  &-content {
+  &-panel {
     overflow: hidden;
     color: @text-color;
     padding: 0 16px;
@@ -99,7 +99,7 @@
   }
 
   &-item:last-child {
-    > .@{prefixCls}-content {
+    > .@{prefixCls}-panel {
       border-radius: 0 0 3px 3px;
     }
   }
diff --git a/assets/motion.less b/assets/motion.less
index a011851..e85e1a6 100644
--- a/assets/motion.less
+++ b/assets/motion.less
@@ -5,7 +5,7 @@
     transition: height 0.3s, opacity 0.3s;
   }
 
-  &-content-hidden {
+  &-panel-hidden {
     display: none;
   }
 }
diff --git a/docs/examples/_util/motionUtil.ts b/docs/examples/_util/motionUtil.ts
index c822ca9..802a022 100644
--- a/docs/examples/_util/motionUtil.ts
+++ b/docs/examples/_util/motionUtil.ts
@@ -15,7 +15,7 @@ const collapseMotion: CSSMotionProps = {
   onEnterEnd: skipOpacityTransition,
   onLeaveEnd: skipOpacityTransition,
   motionDeadline: 500,
-  leavedClassName: 'rc-collapse-content-hidden',
+  leavedClassName: 'rc-collapse-panel-hidden',
 };
 
 export default collapseMotion;
diff --git a/src/Panel.tsx b/src/Panel.tsx
index 6254899..613719f 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -101,7 +101,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
       </div>
       <CSSMotion
         visible={isActive}
-        leavedClassName={`${prefixCls}-content-hidden`}
+        leavedClassName={`${prefixCls}-panel-hidden`}
         {...openMotion}
         forceRender={forceRender}
         removeOnLeave={destroyInactivePanel}
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index 4608631..e5fc2fc 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -36,8 +36,8 @@ const PanelContent = React.forwardRef<
       className={classnames(
         `${prefixCls}-panel`,
         {
-          [`${prefixCls}-content-active`]: isActive,
-          [`${prefixCls}-content-inactive`]: !isActive,
+          [`${prefixCls}-panel-active`]: isActive,
+          [`${prefixCls}-panel-inactive`]: !isActive,
         },
         className,
       )}
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 3b23a22..1a078e2 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -52,7 +52,7 @@ describe('collapse', () => {
 
     it('panel works', () => {
       expect(collapse.container.querySelectorAll('.rc-collapse-item')).toHaveLength(3);
-      expect(collapse.container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel')).toHaveLength(0);
     });
 
     it('should render custom arrow icon correctly', () => {
@@ -82,13 +82,13 @@ describe('collapse', () => {
       const header = collapse.container.querySelectorAll('.rc-collapse-header')?.[1];
       fireEvent.click(header);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
       fireEvent.click(header);
       jest.runAllTimers();
-      expect(collapse.container.querySelector('.rc-collapse-content-inactive')?.innerHTML).toBe(
+      expect(collapse.container.querySelector('.rc-collapse-panel-inactive')?.innerHTML).toBe(
         '<div class="rc-collapse-body">second</div>',
       );
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active').length).toBeFalsy();
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active').length).toBeFalsy();
     });
 
     it('click should not toggle disabled panel state', () => {
@@ -96,7 +96,7 @@ describe('collapse', () => {
       expect(header).toBeTruthy();
       fireEvent.click(header!);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active').length).toBeFalsy();
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active').length).toBeFalsy();
     });
 
     it('should not have role', () => {
@@ -159,12 +159,12 @@ describe('collapse', () => {
 
       const { container } = render(<ControlledCollapse />);
 
-      expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+      expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
       const header = container.querySelector('.rc-collapse-header');
       expect(header).toBeTruthy();
       fireEvent.click(header!);
       jest.runAllTimers();
-      expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(2);
+      expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(2);
       expect(onChangeSpy).toBeCalledWith(['2', '1']);
     });
   });
@@ -235,7 +235,7 @@ describe('collapse', () => {
     );
 
     // activeKey number 0, should open one item
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
   });
 
   it('click should toggle panel state', () => {
@@ -255,9 +255,9 @@ describe('collapse', () => {
 
     const header = container.querySelectorAll('.rc-collapse-header')?.[1];
     fireEvent.click(header);
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
     fireEvent.click(header);
-    expect(container.querySelectorAll('.rc-collapse-content-inactive').length).toBeFalsy();
+    expect(container.querySelectorAll('.rc-collapse-panel-inactive').length).toBeFalsy();
   });
 
   function runAccordionTest(element: React.ReactElement) {
@@ -272,7 +272,7 @@ describe('collapse', () => {
     });
 
     it('accordion content, should default open zero item', () => {
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
     });
 
     it('accordion item, should default open zero item', () => {
@@ -283,12 +283,12 @@ describe('collapse', () => {
       let header = collapse.container.querySelectorAll('.rc-collapse-header')?.[1];
       fireEvent.click(header);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
       expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
       header = collapse.container.querySelectorAll('.rc-collapse-header')?.[1];
       fireEvent.click(header);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
       expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(0);
     });
 
@@ -297,12 +297,12 @@ describe('collapse', () => {
       expect(header).toBeTruthy();
       fireEvent.click(header!);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
       expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
       header = collapse.container.querySelectorAll('.rc-collapse-header')?.[2];
       fireEvent.click(header);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
       expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
     });
 
@@ -322,7 +322,7 @@ describe('collapse', () => {
       const header = collapse.container.querySelector('.rc-collapse-header');
       expect(header).toBeTruthy();
       fireEvent.click(header!);
-      const item = collapse.container.querySelector('.rc-collapse-content');
+      const item = collapse.container.querySelector('.rc-collapse-panel');
       expect(item).toBeTruthy();
       expect(item!.getAttribute('role')).toBe('tabpanel');
     });
@@ -356,7 +356,7 @@ describe('collapse', () => {
           </Panel>
         </Collapse>,
       );
-      expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
+      expect(container.querySelectorAll('.rc-collapse-panel')).toHaveLength(0);
     });
 
     it('when forceRender is FALSE it should lazy render the panel content', () => {
@@ -370,7 +370,7 @@ describe('collapse', () => {
           </Panel>
         </Collapse>,
       );
-      expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
+      expect(container.querySelectorAll('.rc-collapse-panel')).toHaveLength(0);
     });
 
     it('when forceRender is TRUE then it should render all the panel content to the DOM', () => {
@@ -387,9 +387,9 @@ describe('collapse', () => {
 
       jest.runAllTimers();
 
-      expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(1);
-      expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
-      const inactiveDom = container.querySelector('div.rc-collapse-content-inactive');
+      expect(container.querySelectorAll('.rc-collapse-panel')).toHaveLength(1);
+      expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
+      const inactiveDom = container.querySelector('div.rc-collapse-panel-inactive');
       expect(inactiveDom).not.toBeFalsy();
       expect(getComputedStyle(inactiveDom!)).toHaveProperty('display', 'none');
     });
@@ -420,23 +420,21 @@ describe('collapse', () => {
 
     fireEvent.keyDown(container.querySelectorAll('.rc-collapse-header')?.[2], myKeyEvent);
     jest.runAllTimers();
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
 
     fireEvent.keyDown(container.querySelector('.rc-collapse-header')!, myKeyEvent);
     jest.runAllTimers();
 
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
 
-    expect(container.querySelector('.rc-collapse-content')).toHaveClass(
-      'rc-collapse-content-active',
-    );
+    expect(container.querySelector('.rc-collapse-panel')).toHaveClass('rc-collapse-panel-active');
 
     fireEvent.keyDown(container.querySelector('.rc-collapse-header')!, myKeyEvent);
     jest.runAllTimers();
 
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
-    expect(container.querySelector('.rc-collapse-content')!.className).not.toContain(
-      'rc-collapse-content-active',
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
+    expect(container.querySelector('.rc-collapse-panel')!.className).not.toContain(
+      'rc-collapse-panel-active',
     );
   });
 
@@ -504,19 +502,15 @@ describe('collapse', () => {
       </Collapse>,
     );
 
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
-    expect(container.querySelector('.rc-collapse-content')).toHaveClass(
-      'rc-collapse-content-active',
-    );
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
+    expect(container.querySelector('.rc-collapse-panel')).toHaveClass('rc-collapse-panel-active');
     expect(container.querySelector('.rc-collapse-header')?.textContent).toBe('collapse 1');
     expect(container.querySelector('.rc-collapse-header')?.querySelectorAll('.arrow')).toHaveLength(
       1,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
-    expect(container.querySelector('.rc-collapse-content')).toHaveClass(
-      'rc-collapse-content-inactive',
-    );
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
+    expect(container.querySelector('.rc-collapse-panel')).toHaveClass('rc-collapse-panel-inactive');
   });
 
   describe('prop: collapsible', () => {