From 827ffc213130743df110bb9606e5c0a9b12e9352 Mon Sep 17 00:00:00 2001
From: wuxh <wxh1220@gmail.com>
Date: Wed, 29 Mar 2023 21:14:22 +0800
Subject: [PATCH 1/5] docs: update docs

(cherry picked from commit c7a37b97d2881d31f7ba31b39a2639a7b2ffb93f)
---
 docs/demo/fragment.md         |  8 ----
 docs/examples/custom-icon.tsx | 77 +++++++++++++++++++-----------
 docs/examples/fragment.tsx    | 23 ---------
 docs/examples/simple.tsx      | 90 ++++++++++++++++++++++-------------
 4 files changed, 106 insertions(+), 92 deletions(-)
 delete mode 100644 docs/demo/fragment.md
 delete mode 100644 docs/examples/fragment.tsx

diff --git a/docs/demo/fragment.md b/docs/demo/fragment.md
deleted file mode 100644
index de859a41..00000000
--- a/docs/demo/fragment.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: fragment
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/fragment.tsx"></code>
diff --git a/docs/examples/custom-icon.tsx b/docs/examples/custom-icon.tsx
index ea3df8ea..96b24f73 100644
--- a/docs/examples/custom-icon.tsx
+++ b/docs/examples/custom-icon.tsx
@@ -1,6 +1,7 @@
-import Collapse, { Panel } from 'rc-collapse';
+import Collapse from 'rc-collapse';
 import * as React from 'react';
 import '../../assets/index.less';
+import type { ItemType } from '../../src/interface';
 import motion from './_util/motionUtil';
 
 const initLength = 3;
@@ -48,31 +49,54 @@ const App: React.FC = () => {
 
   const time = random();
 
-  const panelItems = Array.from<object, React.ReactNode>({ length: initLength }, (_, i) => {
+  const panelItems = Array.from<object, ItemType>({ length: initLength }, (_, i) => {
     const key = i + 1;
-    return (
-      <Panel header={`This is panel header ${key}`} key={key}>
-        <p>{text.repeat(time)}</p>
-      </Panel>
-    );
+    return {
+      key,
+      header: `This is panel header ${key}`,
+      children: <p>{text.repeat(time)}</p>,
+    };
   }).concat(
-    <Panel header={`This is panel header ${initLength + 1}`} key={initLength + 1}>
-      <Collapse defaultActiveKey="1" expandIcon={expandIcon}>
-        <Panel header="This is panel nest panel" key="1" id="header-test">
-          <p>{text}</p>
-        </Panel>
-      </Collapse>
-    </Panel>,
-    <Panel header={`This is panel header ${initLength + 2}`} key={initLength + 2}>
-      <Collapse defaultActiveKey="1">
-        <Panel header="This is panel nest panel" key="1" id="another-test">
-          <form>
-            <label htmlFor="test">Name:&nbsp;</label>
-            <input type="text" id="test" />
-          </form>
-        </Panel>
-      </Collapse>
-    </Panel>,
+    {
+      key: initLength + 1,
+      header: `This is panel header ${initLength + 1}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          expandIcon={expandIcon}
+          items={[
+            {
+              key: '1',
+              header: 'This is panel nest panel',
+              id: 'header-test',
+              children: <p>{text}</p>,
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      key: initLength + 2,
+      header: `This is panel header ${initLength + 2}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          items={[
+            {
+              key: '1',
+              header: 'This is panel nest panel',
+              id: 'another-test',
+              children: (
+                <form>
+                  <label htmlFor="test">Name:&nbsp;</label>
+                  <input type="text" id="test" />
+                </form>
+              ),
+            },
+          ]}
+        />
+      ),
+    },
   );
 
   const tools = (
@@ -104,9 +128,8 @@ const App: React.FC = () => {
         activeKey={activeKey}
         expandIcon={expandIcon}
         openMotion={motion}
-      >
-        {panelItems}
-      </Collapse>
+        items={panelItems}
+      />
     </>
   );
 };
diff --git a/docs/examples/fragment.tsx b/docs/examples/fragment.tsx
deleted file mode 100644
index bb38c5bd..00000000
--- a/docs/examples/fragment.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Collapse, { Panel } from 'rc-collapse';
-import * as React from 'react';
-import { Fragment } from 'react';
-import '../../assets/index.less';
-
-const App = () => (
-  <Collapse>
-    <Panel header="title">content</Panel>
-    <Panel header="title">content</Panel>
-    <Fragment>
-      <Panel header="title">content</Panel>
-      <Panel header="title">content</Panel>
-    </Fragment>
-    <Fragment>
-      <Fragment>
-        <Panel header="title">content</Panel>
-        <Panel header="title">content</Panel>
-      </Fragment>
-    </Fragment>
-  </Collapse>
-);
-
-export default App;
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
index 53534150..2201d43b 100644
--- a/docs/examples/simple.tsx
+++ b/docs/examples/simple.tsx
@@ -1,7 +1,8 @@
 import type { CollapseProps } from 'rc-collapse';
-import Collapse, { Panel } from 'rc-collapse';
+import Collapse from 'rc-collapse';
 import * as React from 'react';
 import '../../assets/index.less';
+import type { ItemType } from '../../src/interface';
 import motion from './_util/motionUtil';
 
 const initLength = 3;
@@ -50,38 +51,60 @@ const App: React.FC = () => {
 
   const time = random();
 
-  const panelItems = Array.from<object, React.ReactNode>({ length: initLength }, (_, i) => {
+  const panelItems = Array.from<object, ItemType>({ length: initLength }, (_, i) => {
     const key = i + 1;
-    return (
-      <Panel header={`This is panel header ${key}`} key={key}>
-        <p>{text.repeat(time)}</p>
-      </Panel>
-    );
+    return {
+      key,
+      header: `This is panel header ${key}`,
+      children: <p>{text.repeat(time)}</p>,
+    };
   }).concat(
-    <Panel header={`This is panel header ${initLength + 1}`} key={initLength + 1}>
-      <Collapse defaultActiveKey="1" expandIcon={expandIcon}>
-        <Panel header="This is panel nest panel" key="1" id="header-test">
-          <p>{text}</p>
-        </Panel>
-      </Collapse>
-    </Panel>,
-    <Panel header={`This is panel header ${initLength + 2}`} key={initLength + 2}>
-      <Collapse defaultActiveKey="1">
-        <Panel header="This is panel nest panel" key="1" id="another-test">
-          <form>
-            <label htmlFor="test">Name:&nbsp;</label>
-            <input type="text" id="test" />
-          </form>
-        </Panel>
-      </Collapse>
-    </Panel>,
-    <Panel
-      header={`This is panel header ${initLength + 3}`}
-      key={initLength + 3}
-      extra={<span>Extra Node</span>}
-    >
-      <p>Panel with extra</p>
-    </Panel>,
+    {
+      key: initLength + 1,
+      header: `This is panel header ${initLength + 1}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          expandIcon={expandIcon}
+          items={[
+            {
+              key: '1',
+              header: 'This is panel nest panel',
+              id: 'header-test',
+              children: <p>{text}</p>,
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      key: initLength + 2,
+      header: `This is panel header ${initLength + 2}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          items={[
+            {
+              key: '1',
+              header: 'This is panel nest panel',
+              id: 'another-test',
+              children: (
+                <form>
+                  <label htmlFor="test">Name:&nbsp;</label>
+                  <input type="text" id="test" />
+                </form>
+              ),
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      key: initLength + 3,
+      header: `This is panel header ${initLength + 3}`,
+      extra: <span>Extra Node</span>,
+      children: <p>Panel with extra</p>,
+    },
   );
 
   const handleCollapsibleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -129,9 +152,8 @@ const App: React.FC = () => {
         expandIcon={expandIcon}
         openMotion={motion}
         collapsible={collapsible}
-      >
-        {panelItems}
-      </Collapse>
+        items={panelItems}
+      />
     </>
   );
 };

From aecd0c96da27fe96527b9b630431f98e270f2d48 Mon Sep 17 00:00:00 2001
From: wuxh <wxh1220@gmail.com>
Date: Fri, 14 Apr 2023 17:45:56 +0800
Subject: [PATCH 2/5] test: remove `<Panel />` because deprecated

(cherry picked from commit 3ed317517ea3ee52ed65cb7f99cb3f38ad93d688)

# Conflicts:
#	src/Collapse.tsx
#	tests/index.spec.tsx
---
 src/Collapse.tsx     |  60 +++-
 src/index.tsx        |  10 +-
 tests/index.spec.tsx | 643 ++++++++++++++++++++++++-------------------
 3 files changed, 411 insertions(+), 302 deletions(-)

diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index 36267d29..fd21619b 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import warning from 'rc-util/lib/warning';
 import React from 'react';
 import useItems from './hooks/useItems';
 import type { CollapseProps } from './interface';
@@ -23,7 +22,6 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     style,
     accordion,
     className,
-    children,
     collapsible,
     openMotion,
     expandIcon,
@@ -74,6 +72,57 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     activeKey,
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const convertItemsToNodes = (items: ItemType[]) =>
+    items.map((item, index) => {
+      const {
+        children,
+        key: rawKey,
+        collapsible: rawCollapsible,
+        onItemClick: rawOnItemClick,
+        destroyInactivePanel: rawDestroyInactivePanel,
+        expandIcon: rawExpandIcon = expandIcon,
+        ...restProps
+      } = item;
+
+      // You may be puzzled why you want to convert them all into strings, me too.
+      // Maybe: https://github.com/react-component/collapse/blob/aac303a8b6ff30e35060b4f8fecde6f4556fcbe2/src/Collapse.tsx#L15
+      const key = String(rawKey ?? index);
+      const mergeCollapsible = rawCollapsible ?? collapsible;
+      const mergeDestroyInactivePanel = rawDestroyInactivePanel ?? destroyInactivePanel;
+
+      const handleItemClick = (value: React.Key) => {
+        if (mergeCollapsible === 'disabled') return;
+        onClickItem(value);
+        rawOnItemClick?.(value);
+      };
+
+      let isActive = false;
+      if (accordion) {
+        isActive = activeKey[0] === key;
+      } else {
+        isActive = activeKey.indexOf(key) > -1;
+      }
+
+      return (
+        <CollapsePanel
+          prefixCls={prefixCls}
+          key={key}
+          panelKey={key}
+          isActive={isActive}
+          accordion={accordion}
+          openMotion={openMotion}
+          collapsible={mergeCollapsible}
+          onItemClick={handleItemClick}
+          destroyInactivePanel={mergeDestroyInactivePanel}
+          expandIcon={rawExpandIcon}
+          {...restProps}
+        >
+          {children}
+        </CollapsePanel>
+      );
+    });
+
   // ======================== Render ========================
   return (
     <div
@@ -87,9 +136,4 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
   );
 });
 
-export default Object.assign(Collapse, {
-  /**
-   * @deprecated use `items` instead, will be removed in `v4.0.0`
-   */
-  Panel: CollapsePanel,
-});
+export default Collapse;
diff --git a/src/index.tsx b/src/index.tsx
index 8e963c68..87e21e7e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,2 @@
-import Collapse from './Collapse';
-
+export { default } from './Collapse';
 export type { CollapsePanelProps, CollapseProps } from './interface';
-
-export default Collapse;
-
-/**
- * @deprecated use `items` instead, will be removed in `v4.0.0`
- */
-export const { Panel } = Collapse;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 533df08b..6ca2c0ef 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -1,8 +1,8 @@
 import type { RenderResult } from '@testing-library/react';
 import { fireEvent, render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
-import React, { Fragment } from 'react';
-import Collapse, { Panel } from '../src/index';
+import React from 'react';
+import Collapse from '../src/index';
 import type { CollapseProps, ItemType } from '../src/interface';
 
 describe('collapse', () => {
@@ -24,6 +24,27 @@ describe('collapse', () => {
     }
   }
 
+  const items: ItemType[] = [
+    {
+      key: '1',
+      header: 'collapse 1',
+      collapsible: 'disabled',
+      children: 'first',
+    },
+    {
+      key: '2',
+      header: 'collapse 2',
+      extra: <span>ExtraSpan</span>,
+      children: 'second',
+    },
+    {
+      key: '3',
+      header: 'collapse 3',
+      className: 'important',
+      children: 'third',
+    },
+  ];
+
   function runNormalTest(element: any) {
     let collapse: RenderResult;
 
@@ -115,21 +136,7 @@ describe('collapse', () => {
   describe('collapse', () => {
     const expandIcon = () => <span>test{'>'}</span>;
 
-    const element = (
-      <Collapse onChange={onChange} expandIcon={expandIcon}>
-        <Panel header="collapse 1" key="1" collapsible="disabled">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3" className="important">
-          third
-        </Panel>
-      </Collapse>
-    );
-
-    runNormalTest(element);
+    runNormalTest(<Collapse onChange={onChange} expandIcon={expandIcon} items={items} />);
 
     it('controlled', () => {
       const onChangeSpy = jest.fn();
@@ -143,17 +150,27 @@ describe('collapse', () => {
         };
 
         return (
-          <Collapse onChange={handleChange} activeKey={activeKey}>
-            <Panel header="collapse 1" key="1">
-              first
-            </Panel>
-            <Panel header="collapse 2" key="2">
-              second
-            </Panel>
-            <Panel header="collapse 3" key="3">
-              third
-            </Panel>
-          </Collapse>
+          <Collapse
+            onChange={handleChange}
+            activeKey={activeKey}
+            items={[
+              {
+                key: '1',
+                header: 'collapse 1',
+                children: 'first',
+              },
+              {
+                key: '2',
+                header: 'collapse 2',
+                children: 'second',
+              },
+              {
+                key: '3',
+                header: 'collapse 3',
+                children: 'third',
+              },
+            ]}
+          />
         );
       };
 
@@ -170,31 +187,32 @@ describe('collapse', () => {
   });
 
   describe('it should support number key', () => {
-    const expandIcon = () => <span>test{'>'}</span>;
-    const element = (
-      <Collapse onChange={onChange} expandIcon={expandIcon}>
-        <Panel header="collapse 1" key={1} collapsible="disabled">
-          first
-        </Panel>
-        <Panel header="collapse 2" key={2} extra={<span>ExtraSpan</span>}>
-          second
-        </Panel>
-        <Panel header="collapse 3" key={3} className="important">
-          third
-        </Panel>
-      </Collapse>
+    runNormalTest(
+      <Collapse
+        onChange={onChange}
+        expandIcon={() => <span>test{'>'}</span>}
+        items={items.map((item) => ({
+          ...item,
+          key: Number(item.key),
+        }))}
+      />,
     );
-
-    runNormalTest(element);
   });
 
   it('shoule support extra whit number 0', () => {
     const { container } = render(
-      <Collapse onChange={onChange} activeKey={0}>
-        <Panel header="collapse 0" key={0} extra={0}>
-          zero
-        </Panel>
-      </Collapse>,
+      <Collapse
+        onChange={onChange}
+        activeKey={0}
+        items={[
+          {
+            header: 'collapse 0',
+            key: 0,
+            extra: 0,
+            children: 'zero',
+          },
+        ]}
+      />,
     );
 
     const extraNodes = container.querySelectorAll('.rc-collapse-extra');
@@ -204,17 +222,14 @@ describe('collapse', () => {
 
   it('should support activeKey number 0', () => {
     const { container } = render(
-      <Collapse onChange={onChange} activeKey={0}>
-        <Panel header="collapse 0" key={0}>
-          zero
-        </Panel>
-        <Panel header="collapse 1" key={1}>
-          first
-        </Panel>
-        <Panel header="collapse 2" key={2}>
-          second
-        </Panel>
-      </Collapse>,
+      <Collapse
+        onChange={onChange}
+        activeKey={0}
+        items={items.map((item, index) => ({
+          ...item,
+          key: index,
+        }))}
+      />,
     );
 
     // activeKey number 0, should open one item
@@ -223,17 +238,7 @@ describe('collapse', () => {
 
   it('click should toggle panel state', () => {
     const { container } = render(
-      <Collapse onChange={onChange} destroyInactivePanel>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3" className="important">
-          third
-        </Panel>
-      </Collapse>,
+      <Collapse onChange={onChange} destroyInactivePanel items={items} />,
     );
 
     const header = container.querySelectorAll('.rc-collapse-header')?.[1];
@@ -247,11 +252,29 @@ describe('collapse', () => {
     let collapse: RenderResult;
 
     beforeEach(() => {
-      collapse = render(element);
-    });
-
-    afterEach(() => {
-      collapse.unmount();
+      collapse = render(
+        <Collapse
+          onChange={onChange}
+          accordion
+          items={[
+            {
+              key: '1',
+              header: 'collapse 1',
+              children: 'first',
+            },
+            {
+              key: '2',
+              header: 'collapse 2',
+              children: 'second',
+            },
+            {
+              key: '3',
+              header: 'collapse 3',
+              children: 'third',
+            },
+          ]}
+        />,
+      );
     });
 
     it('accordion content, should default open zero item', () => {
@@ -309,22 +332,6 @@ describe('collapse', () => {
       expect(item).toBeTruthy();
       expect(item!.getAttribute('role')).toBe('tabpanel');
     });
-  }
-
-  describe('prop: accordion', () => {
-    runAccordionTest(
-      <Collapse onChange={onChange} accordion>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3">
-          third
-        </Panel>
-      </Collapse>,
-    );
   });
 
   describe('forceRender', () => {
@@ -344,28 +351,42 @@ describe('collapse', () => {
 
     it('when forceRender is FALSE it should lazy render the panel content', () => {
       const { container } = render(
-        <Collapse>
-          <Panel header="collapse 1" key="1" forceRender={false} collapsible="disabled">
-            first
-          </Panel>
-          <Panel header="collapse 2" key="2">
-            second
-          </Panel>
-        </Collapse>,
+        <Collapse
+          items={[
+            {
+              key: '1',
+              header: 'collapse 1',
+              forceRender: false,
+              collapsible: 'disabled',
+            },
+            {
+              key: '2',
+              header: 'collapse 2',
+              children: 'second',
+            },
+          ]}
+        />,
       );
       expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
     });
 
     it('when forceRender is TRUE then it should render all the panel content to the DOM', () => {
       const { container } = render(
-        <Collapse>
-          <Panel header="collapse 1" key="1" forceRender collapsible="disabled">
-            first
-          </Panel>
-          <Panel header="collapse 2" key="2">
-            second
-          </Panel>
-        </Collapse>,
+        <Collapse
+          items={[
+            {
+              key: '1',
+              header: 'collapse 1',
+              forceRender: true,
+              collapsible: 'disabled',
+            },
+            {
+              key: '2',
+              header: 'collapse 2',
+              children: 'second',
+            },
+          ]}
+        />,
       );
 
       jest.runAllTimers();
@@ -388,17 +409,26 @@ describe('collapse', () => {
     };
 
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3" collapsible="disabled">
-          second
-        </Panel>
-      </Collapse>,
+      <Collapse
+        items={[
+          {
+            key: '1',
+            header: 'collapse 1',
+            children: 'first',
+          },
+          {
+            key: '2',
+            header: 'collapse 2',
+            children: 'second',
+          },
+          {
+            key: '3',
+            header: 'collapse 3',
+            children: 'second',
+            collapsible: 'disabled',
+          },
+        ]}
+      />,
     );
 
     fireEvent.keyPress(container.querySelectorAll('.rc-collapse-header')?.[2], myKeyEvent);
@@ -423,46 +453,57 @@ describe('collapse', () => {
     );
   });
 
-  describe('wrapped in Fragment', () => {
-    const expandIcon = () => <span>test{'>'}</span>;
-    const element = (
-      <Collapse onChange={onChange} expandIcon={expandIcon}>
-        <Fragment>
-          <Panel header="collapse 1" key="1" collapsible="disabled">
-            first
-          </Panel>
-          <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
-            second
-          </Panel>
-          <Fragment>
-            <Panel header="collapse 3" key="3" className="important">
-              third
-            </Panel>
-          </Fragment>
-        </Fragment>
-      </Collapse>
-    );
-
-    runNormalTest(element);
-  });
+  // TODO: 移除 Panel 后需要在 Ant Design 里面测试，待 Ant Design 稳定后再移除 by @Wxh16144
+  // describe.skip('wrapped in Fragment', () => {
+  //   const expandIcon = () => <span>test{'>'}</span>;
+  //   const element = (
+  //     <Collapse onChange={onChange} expandIcon={expandIcon}>
+  //       <Fragment>
+  //         <Panel header="collapse 1" key="1" collapsible="disabled">
+  //           first
+  //         </Panel>
+  //         <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
+  //           second
+  //         </Panel>
+  //         <Fragment>
+  //           <Panel header="collapse 3" key="3" className="important">
+  //             third
+  //           </Panel>
+  //         </Fragment>
+  //       </Fragment>
+  //     </Collapse>
+  //   );
+
+  //   runNormalTest(element);
+  // });
 
   it('should support return null icon', () => {
     const { container } = render(
-      <Collapse expandIcon={() => null}>
-        <Panel header="title" key="1">
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        expandIcon={() => null}
+        items={[
+          {
+            key: '1',
+            header: 'title',
+            children: 'first',
+          },
+        ]}
+      />,
     );
     expect(container.querySelector('.rc-collapse-header')?.childNodes).toHaveLength(1);
   });
 
   it('should support custom child', () => {
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
+      <Collapse
+        items={[
+          {
+            key: '1',
+            header: 'collapse 1',
+            children: 'first',
+          },
+        ]}
+      >
         <a className="custom-child">custom-child</a>
       </Collapse>,
     );
@@ -472,44 +513,49 @@ describe('collapse', () => {
   // https://github.com/ant-design/ant-design/issues/36327
   // https://github.com/ant-design/ant-design/issues/6179
   // https://github.com/react-component/collapse/issues/73#issuecomment-323626120
-  it('should support custom component', () => {
-    const PanelElement = (props) => (
-      <Panel header="collapse 1" {...props}>
-        <p>test</p>
-      </Panel>
-    );
-    const { container } = render(
-      <Collapse defaultActiveKey="1">
-        <PanelElement key="1" />
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-      </Collapse>,
-    );
-
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
-    expect(container.querySelector('.rc-collapse-content')).toHaveClass(
-      'rc-collapse-content-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',
-    );
-  });
+  //  TODO: 移除 Panel 后需要在 Ant Design 里面测试，待 Ant Design 稳定后再移除 by @Wxh16144
+  // it.skip('should support custom component', () => {
+  //   const PanelElement = (props) => (
+  //     <Panel header="collapse 1" {...props}>
+  //       <p>test</p>
+  //     </Panel>
+  //   );
+  //   const { container } = render(
+  //     <Collapse defaultActiveKey="1">
+  //       <PanelElement key="1" />
+  //       <Panel header="collapse 2" key="2">
+  //         second
+  //       </Panel>
+  //     </Collapse>,
+  //   );
+
+  //   expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+  //   expect(container.querySelector('.rc-collapse-content')).toHaveClass(
+  //     'rc-collapse-content-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',
+  //   );
+  // });
 
   describe('prop: collapsible', () => {
     it('default', () => {
       const { container } = render(
-        <Collapse>
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          items={[
+            {
+              key: '1',
+              header: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -517,11 +563,16 @@ describe('collapse', () => {
     });
     it('should work when value is header', () => {
       const { container } = render(
-        <Collapse collapsible="header">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="header"
+          items={[
+            {
+              key: '1',
+              header: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -531,11 +582,16 @@ describe('collapse', () => {
     });
     it('should work when value is icon', () => {
       const { container } = render(
-        <Collapse collapsible="icon">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="icon"
+          items={[
+            {
+              key: '1',
+              header: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-expand-icon')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -546,11 +602,16 @@ describe('collapse', () => {
 
     it('should disabled when value is disabled', () => {
       const { container } = render(
-        <Collapse collapsible="disabled">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="disabled"
+          items={[
+            {
+              key: '1',
+              header: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       expect(container.querySelectorAll('.rc-collapse-item-disabled')).toHaveLength(1);
@@ -560,11 +621,17 @@ describe('collapse', () => {
 
     it('the value of panel should be read first', () => {
       const { container } = render(
-        <Collapse collapsible="header">
-          <Panel collapsible="disabled" header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="header"
+          items={[
+            {
+              key: '1',
+              header: 'collapse 1',
+              children: 'first',
+              collapsible: 'disabled',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
 
@@ -576,11 +643,16 @@ describe('collapse', () => {
 
     it('icon trigger when collapsible equal header', () => {
       const { container } = render(
-        <Collapse collapsible="header">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="header"
+          items={[
+            {
+              key: '1',
+              header: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
 
       fireEvent.click(container.querySelector('.rc-collapse-header .arrow')!);
@@ -589,11 +661,16 @@ describe('collapse', () => {
 
     it('header not trigger when collapsible equal icon', () => {
       const { container } = render(
-        <Collapse collapsible="icon">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="icon"
+          items={[
+            {
+              key: '1',
+              header: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
 
       fireEvent.click(container.querySelector('.rc-collapse-header-text')!);
@@ -603,11 +680,16 @@ describe('collapse', () => {
 
   it('!showArrow', () => {
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1" showArrow={false}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        items={[
+          {
+            key: '1',
+            header: 'collapse 1',
+            children: 'first',
+            showArrow: false,
+          },
+        ]}
+      />,
     );
 
     expect(container.querySelectorAll('.rc-collapse-expand-icon')).toHaveLength(0);
@@ -616,46 +698,38 @@ describe('collapse', () => {
   it('Panel container dom can set event handler', () => {
     const clickHandler = jest.fn();
     const { container } = render(
-      <Collapse defaultActiveKey="1">
-        <Panel header="collapse 1" key="1" onClick={clickHandler}>
-          <div className="target">Click this</div>
-        </Panel>
-      </Collapse>,
+      <Collapse
+        defaultActiveKey="1"
+        items={[
+          {
+            key: '1',
+            header: 'collapse 1',
+            onClick: clickHandler,
+            children: <div className="target">Click this</div>,
+          },
+        ]}
+      />,
     );
 
     fireEvent.click(container.querySelector('.target')!);
     expect(clickHandler).toHaveBeenCalled();
   });
 
-  it('falsy Panel', () => {
-    const { container } = render(
-      <Collapse>
-        {null}
-        <Panel header="collapse 1" key="1">
-          <p>Panel 1 content</p>
-        </Panel>
-        {0}
-        <Panel header="collapse 2" key="2">
-          <p>Panel 2 content</p>
-        </Panel>
-        {undefined}
-        {false}
-        {true}
-      </Collapse>,
-    );
-
-    expect(container.querySelectorAll('.rc-collapse-item')).toHaveLength(2);
-  });
-
   it('ref should work', () => {
     const ref = React.createRef<any>();
     const panelRef = React.createRef<any>();
     const { container } = render(
-      <Collapse ref={ref}>
-        <Panel header="collapse 1" key="1" ref={panelRef}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        ref={ref}
+        items={[
+          {
+            key: '1',
+            ref: panelRef,
+            header: 'collapse 1',
+            children: 'first',
+          },
+        ]}
+      />,
     );
     expect(ref.current).toBe(container.firstChild);
     expect(panelRef.current).toBe(container.querySelector('.rc-collapse-item'));
@@ -665,11 +739,16 @@ describe('collapse', () => {
   it('onItemClick should work', () => {
     const onItemClick = jest.fn();
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1" onItemClick={onItemClick}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        items={[
+          {
+            key: '1',
+            header: 'collapse 1',
+            onItemClick,
+            children: 'first',
+          },
+        ]}
+      />,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
     expect(onItemClick).toHaveBeenCalled();
@@ -678,11 +757,17 @@ describe('collapse', () => {
   it('onItemClick should not work when collapsible is disabled', () => {
     const onItemClick = jest.fn();
     const { container } = render(
-      <Collapse collapsible="disabled">
-        <Panel header="collapse 1" key="1" onItemClick={onItemClick}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        collapsible="disabled"
+        items={[
+          {
+            key: '1',
+            header: 'collapse 1',
+            onItemClick,
+            children: 'first',
+          },
+        ]}
+      />,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
     expect(onItemClick).not.toHaveBeenCalled();
@@ -690,37 +775,25 @@ describe('collapse', () => {
 
   it('panel style should work', () => {
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1" style={{ color: 'red' }}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        items={[
+          {
+            key: '1',
+            header: 'collapse 1',
+            style: { color: 'red' },
+            children: 'first',
+          },
+        ]}
+      />,
+    );
+
+    expect(window.getComputedStyle(container.querySelector('.rc-collapse-item'))).toHaveProperty(
+      'color',
+      'red',
     );
-    expect(container.querySelector('.rc-collapse-item').style.color).toBe('red');
   });
 
   describe('props items', () => {
-    const items: ItemType[] = [
-      {
-        key: '1',
-        label: 'collapse 1',
-        children: 'first',
-        collapsible: 'disabled',
-      },
-      {
-        key: '2',
-        label: 'collapse 2',
-        children: 'second',
-        extra: <span>ExtraSpan</span>,
-      },
-      {
-        key: '3',
-        label: 'collapse 3',
-        className: 'important',
-        children: 'third',
-      },
-    ];
-
     runNormalTest(
       <Collapse onChange={onChange} expandIcon={() => <span>test{'>'}</span>} items={items} />,
     );

From e3025c4f79f3101889628e10c0cafa8cee59f44b Mon Sep 17 00:00:00 2001
From: wuxh <wxh1220@gmail.com>
Date: Fri, 14 Apr 2023 17:46:30 +0800
Subject: [PATCH 3/5] Revert "test: remove `<Panel />` because deprecated"

This reverts commit aecd0c96da27fe96527b9b630431f98e270f2d48.
---
 src/Collapse.tsx     |  60 +---
 src/index.tsx        |  10 +-
 tests/index.spec.tsx | 643 +++++++++++++++++++------------------------
 3 files changed, 302 insertions(+), 411 deletions(-)

diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index fd21619b..36267d29 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import warning from 'rc-util/lib/warning';
 import React from 'react';
 import useItems from './hooks/useItems';
 import type { CollapseProps } from './interface';
@@ -22,6 +23,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     style,
     accordion,
     className,
+    children,
     collapsible,
     openMotion,
     expandIcon,
@@ -72,57 +74,6 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     activeKey,
   });
 
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  const convertItemsToNodes = (items: ItemType[]) =>
-    items.map((item, index) => {
-      const {
-        children,
-        key: rawKey,
-        collapsible: rawCollapsible,
-        onItemClick: rawOnItemClick,
-        destroyInactivePanel: rawDestroyInactivePanel,
-        expandIcon: rawExpandIcon = expandIcon,
-        ...restProps
-      } = item;
-
-      // You may be puzzled why you want to convert them all into strings, me too.
-      // Maybe: https://github.com/react-component/collapse/blob/aac303a8b6ff30e35060b4f8fecde6f4556fcbe2/src/Collapse.tsx#L15
-      const key = String(rawKey ?? index);
-      const mergeCollapsible = rawCollapsible ?? collapsible;
-      const mergeDestroyInactivePanel = rawDestroyInactivePanel ?? destroyInactivePanel;
-
-      const handleItemClick = (value: React.Key) => {
-        if (mergeCollapsible === 'disabled') return;
-        onClickItem(value);
-        rawOnItemClick?.(value);
-      };
-
-      let isActive = false;
-      if (accordion) {
-        isActive = activeKey[0] === key;
-      } else {
-        isActive = activeKey.indexOf(key) > -1;
-      }
-
-      return (
-        <CollapsePanel
-          prefixCls={prefixCls}
-          key={key}
-          panelKey={key}
-          isActive={isActive}
-          accordion={accordion}
-          openMotion={openMotion}
-          collapsible={mergeCollapsible}
-          onItemClick={handleItemClick}
-          destroyInactivePanel={mergeDestroyInactivePanel}
-          expandIcon={rawExpandIcon}
-          {...restProps}
-        >
-          {children}
-        </CollapsePanel>
-      );
-    });
-
   // ======================== Render ========================
   return (
     <div
@@ -136,4 +87,9 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
   );
 });
 
-export default Collapse;
+export default Object.assign(Collapse, {
+  /**
+   * @deprecated use `items` instead, will be removed in `v4.0.0`
+   */
+  Panel: CollapsePanel,
+});
diff --git a/src/index.tsx b/src/index.tsx
index 87e21e7e..8e963c68 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,2 +1,10 @@
-export { default } from './Collapse';
+import Collapse from './Collapse';
+
 export type { CollapsePanelProps, CollapseProps } from './interface';
+
+export default Collapse;
+
+/**
+ * @deprecated use `items` instead, will be removed in `v4.0.0`
+ */
+export const { Panel } = Collapse;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 6ca2c0ef..533df08b 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -1,8 +1,8 @@
 import type { RenderResult } from '@testing-library/react';
 import { fireEvent, render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
-import React from 'react';
-import Collapse from '../src/index';
+import React, { Fragment } from 'react';
+import Collapse, { Panel } from '../src/index';
 import type { CollapseProps, ItemType } from '../src/interface';
 
 describe('collapse', () => {
@@ -24,27 +24,6 @@ describe('collapse', () => {
     }
   }
 
-  const items: ItemType[] = [
-    {
-      key: '1',
-      header: 'collapse 1',
-      collapsible: 'disabled',
-      children: 'first',
-    },
-    {
-      key: '2',
-      header: 'collapse 2',
-      extra: <span>ExtraSpan</span>,
-      children: 'second',
-    },
-    {
-      key: '3',
-      header: 'collapse 3',
-      className: 'important',
-      children: 'third',
-    },
-  ];
-
   function runNormalTest(element: any) {
     let collapse: RenderResult;
 
@@ -136,7 +115,21 @@ describe('collapse', () => {
   describe('collapse', () => {
     const expandIcon = () => <span>test{'>'}</span>;
 
-    runNormalTest(<Collapse onChange={onChange} expandIcon={expandIcon} items={items} />);
+    const element = (
+      <Collapse onChange={onChange} expandIcon={expandIcon}>
+        <Panel header="collapse 1" key="1" collapsible="disabled">
+          first
+        </Panel>
+        <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
+          second
+        </Panel>
+        <Panel header="collapse 3" key="3" className="important">
+          third
+        </Panel>
+      </Collapse>
+    );
+
+    runNormalTest(element);
 
     it('controlled', () => {
       const onChangeSpy = jest.fn();
@@ -150,27 +143,17 @@ describe('collapse', () => {
         };
 
         return (
-          <Collapse
-            onChange={handleChange}
-            activeKey={activeKey}
-            items={[
-              {
-                key: '1',
-                header: 'collapse 1',
-                children: 'first',
-              },
-              {
-                key: '2',
-                header: 'collapse 2',
-                children: 'second',
-              },
-              {
-                key: '3',
-                header: 'collapse 3',
-                children: 'third',
-              },
-            ]}
-          />
+          <Collapse onChange={handleChange} activeKey={activeKey}>
+            <Panel header="collapse 1" key="1">
+              first
+            </Panel>
+            <Panel header="collapse 2" key="2">
+              second
+            </Panel>
+            <Panel header="collapse 3" key="3">
+              third
+            </Panel>
+          </Collapse>
         );
       };
 
@@ -187,32 +170,31 @@ describe('collapse', () => {
   });
 
   describe('it should support number key', () => {
-    runNormalTest(
-      <Collapse
-        onChange={onChange}
-        expandIcon={() => <span>test{'>'}</span>}
-        items={items.map((item) => ({
-          ...item,
-          key: Number(item.key),
-        }))}
-      />,
+    const expandIcon = () => <span>test{'>'}</span>;
+    const element = (
+      <Collapse onChange={onChange} expandIcon={expandIcon}>
+        <Panel header="collapse 1" key={1} collapsible="disabled">
+          first
+        </Panel>
+        <Panel header="collapse 2" key={2} extra={<span>ExtraSpan</span>}>
+          second
+        </Panel>
+        <Panel header="collapse 3" key={3} className="important">
+          third
+        </Panel>
+      </Collapse>
     );
+
+    runNormalTest(element);
   });
 
   it('shoule support extra whit number 0', () => {
     const { container } = render(
-      <Collapse
-        onChange={onChange}
-        activeKey={0}
-        items={[
-          {
-            header: 'collapse 0',
-            key: 0,
-            extra: 0,
-            children: 'zero',
-          },
-        ]}
-      />,
+      <Collapse onChange={onChange} activeKey={0}>
+        <Panel header="collapse 0" key={0} extra={0}>
+          zero
+        </Panel>
+      </Collapse>,
     );
 
     const extraNodes = container.querySelectorAll('.rc-collapse-extra');
@@ -222,14 +204,17 @@ describe('collapse', () => {
 
   it('should support activeKey number 0', () => {
     const { container } = render(
-      <Collapse
-        onChange={onChange}
-        activeKey={0}
-        items={items.map((item, index) => ({
-          ...item,
-          key: index,
-        }))}
-      />,
+      <Collapse onChange={onChange} activeKey={0}>
+        <Panel header="collapse 0" key={0}>
+          zero
+        </Panel>
+        <Panel header="collapse 1" key={1}>
+          first
+        </Panel>
+        <Panel header="collapse 2" key={2}>
+          second
+        </Panel>
+      </Collapse>,
     );
 
     // activeKey number 0, should open one item
@@ -238,7 +223,17 @@ describe('collapse', () => {
 
   it('click should toggle panel state', () => {
     const { container } = render(
-      <Collapse onChange={onChange} destroyInactivePanel items={items} />,
+      <Collapse onChange={onChange} destroyInactivePanel>
+        <Panel header="collapse 1" key="1">
+          first
+        </Panel>
+        <Panel header="collapse 2" key="2">
+          second
+        </Panel>
+        <Panel header="collapse 3" key="3" className="important">
+          third
+        </Panel>
+      </Collapse>,
     );
 
     const header = container.querySelectorAll('.rc-collapse-header')?.[1];
@@ -252,29 +247,11 @@ describe('collapse', () => {
     let collapse: RenderResult;
 
     beforeEach(() => {
-      collapse = render(
-        <Collapse
-          onChange={onChange}
-          accordion
-          items={[
-            {
-              key: '1',
-              header: 'collapse 1',
-              children: 'first',
-            },
-            {
-              key: '2',
-              header: 'collapse 2',
-              children: 'second',
-            },
-            {
-              key: '3',
-              header: 'collapse 3',
-              children: 'third',
-            },
-          ]}
-        />,
-      );
+      collapse = render(element);
+    });
+
+    afterEach(() => {
+      collapse.unmount();
     });
 
     it('accordion content, should default open zero item', () => {
@@ -332,6 +309,22 @@ describe('collapse', () => {
       expect(item).toBeTruthy();
       expect(item!.getAttribute('role')).toBe('tabpanel');
     });
+  }
+
+  describe('prop: accordion', () => {
+    runAccordionTest(
+      <Collapse onChange={onChange} accordion>
+        <Panel header="collapse 1" key="1">
+          first
+        </Panel>
+        <Panel header="collapse 2" key="2">
+          second
+        </Panel>
+        <Panel header="collapse 3" key="3">
+          third
+        </Panel>
+      </Collapse>,
+    );
   });
 
   describe('forceRender', () => {
@@ -351,42 +344,28 @@ describe('collapse', () => {
 
     it('when forceRender is FALSE it should lazy render the panel content', () => {
       const { container } = render(
-        <Collapse
-          items={[
-            {
-              key: '1',
-              header: 'collapse 1',
-              forceRender: false,
-              collapsible: 'disabled',
-            },
-            {
-              key: '2',
-              header: 'collapse 2',
-              children: 'second',
-            },
-          ]}
-        />,
+        <Collapse>
+          <Panel header="collapse 1" key="1" forceRender={false} collapsible="disabled">
+            first
+          </Panel>
+          <Panel header="collapse 2" key="2">
+            second
+          </Panel>
+        </Collapse>,
       );
       expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
     });
 
     it('when forceRender is TRUE then it should render all the panel content to the DOM', () => {
       const { container } = render(
-        <Collapse
-          items={[
-            {
-              key: '1',
-              header: 'collapse 1',
-              forceRender: true,
-              collapsible: 'disabled',
-            },
-            {
-              key: '2',
-              header: 'collapse 2',
-              children: 'second',
-            },
-          ]}
-        />,
+        <Collapse>
+          <Panel header="collapse 1" key="1" forceRender collapsible="disabled">
+            first
+          </Panel>
+          <Panel header="collapse 2" key="2">
+            second
+          </Panel>
+        </Collapse>,
       );
 
       jest.runAllTimers();
@@ -409,26 +388,17 @@ describe('collapse', () => {
     };
 
     const { container } = render(
-      <Collapse
-        items={[
-          {
-            key: '1',
-            header: 'collapse 1',
-            children: 'first',
-          },
-          {
-            key: '2',
-            header: 'collapse 2',
-            children: 'second',
-          },
-          {
-            key: '3',
-            header: 'collapse 3',
-            children: 'second',
-            collapsible: 'disabled',
-          },
-        ]}
-      />,
+      <Collapse>
+        <Panel header="collapse 1" key="1">
+          first
+        </Panel>
+        <Panel header="collapse 2" key="2">
+          second
+        </Panel>
+        <Panel header="collapse 3" key="3" collapsible="disabled">
+          second
+        </Panel>
+      </Collapse>,
     );
 
     fireEvent.keyPress(container.querySelectorAll('.rc-collapse-header')?.[2], myKeyEvent);
@@ -453,57 +423,46 @@ describe('collapse', () => {
     );
   });
 
-  // TODO: 移除 Panel 后需要在 Ant Design 里面测试，待 Ant Design 稳定后再移除 by @Wxh16144
-  // describe.skip('wrapped in Fragment', () => {
-  //   const expandIcon = () => <span>test{'>'}</span>;
-  //   const element = (
-  //     <Collapse onChange={onChange} expandIcon={expandIcon}>
-  //       <Fragment>
-  //         <Panel header="collapse 1" key="1" collapsible="disabled">
-  //           first
-  //         </Panel>
-  //         <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
-  //           second
-  //         </Panel>
-  //         <Fragment>
-  //           <Panel header="collapse 3" key="3" className="important">
-  //             third
-  //           </Panel>
-  //         </Fragment>
-  //       </Fragment>
-  //     </Collapse>
-  //   );
-
-  //   runNormalTest(element);
-  // });
+  describe('wrapped in Fragment', () => {
+    const expandIcon = () => <span>test{'>'}</span>;
+    const element = (
+      <Collapse onChange={onChange} expandIcon={expandIcon}>
+        <Fragment>
+          <Panel header="collapse 1" key="1" collapsible="disabled">
+            first
+          </Panel>
+          <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
+            second
+          </Panel>
+          <Fragment>
+            <Panel header="collapse 3" key="3" className="important">
+              third
+            </Panel>
+          </Fragment>
+        </Fragment>
+      </Collapse>
+    );
+
+    runNormalTest(element);
+  });
 
   it('should support return null icon', () => {
     const { container } = render(
-      <Collapse
-        expandIcon={() => null}
-        items={[
-          {
-            key: '1',
-            header: 'title',
-            children: 'first',
-          },
-        ]}
-      />,
+      <Collapse expandIcon={() => null}>
+        <Panel header="title" key="1">
+          first
+        </Panel>
+      </Collapse>,
     );
     expect(container.querySelector('.rc-collapse-header')?.childNodes).toHaveLength(1);
   });
 
   it('should support custom child', () => {
     const { container } = render(
-      <Collapse
-        items={[
-          {
-            key: '1',
-            header: 'collapse 1',
-            children: 'first',
-          },
-        ]}
-      >
+      <Collapse>
+        <Panel header="collapse 1" key="1">
+          first
+        </Panel>
         <a className="custom-child">custom-child</a>
       </Collapse>,
     );
@@ -513,49 +472,44 @@ describe('collapse', () => {
   // https://github.com/ant-design/ant-design/issues/36327
   // https://github.com/ant-design/ant-design/issues/6179
   // https://github.com/react-component/collapse/issues/73#issuecomment-323626120
-  //  TODO: 移除 Panel 后需要在 Ant Design 里面测试，待 Ant Design 稳定后再移除 by @Wxh16144
-  // it.skip('should support custom component', () => {
-  //   const PanelElement = (props) => (
-  //     <Panel header="collapse 1" {...props}>
-  //       <p>test</p>
-  //     </Panel>
-  //   );
-  //   const { container } = render(
-  //     <Collapse defaultActiveKey="1">
-  //       <PanelElement key="1" />
-  //       <Panel header="collapse 2" key="2">
-  //         second
-  //       </Panel>
-  //     </Collapse>,
-  //   );
-
-  //   expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
-  //   expect(container.querySelector('.rc-collapse-content')).toHaveClass(
-  //     'rc-collapse-content-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',
-  //   );
-  // });
+  it('should support custom component', () => {
+    const PanelElement = (props) => (
+      <Panel header="collapse 1" {...props}>
+        <p>test</p>
+      </Panel>
+    );
+    const { container } = render(
+      <Collapse defaultActiveKey="1">
+        <PanelElement key="1" />
+        <Panel header="collapse 2" key="2">
+          second
+        </Panel>
+      </Collapse>,
+    );
+
+    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+    expect(container.querySelector('.rc-collapse-content')).toHaveClass(
+      'rc-collapse-content-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',
+    );
+  });
 
   describe('prop: collapsible', () => {
     it('default', () => {
       const { container } = render(
-        <Collapse
-          items={[
-            {
-              key: '1',
-              header: 'collapse 1',
-              children: 'first',
-            },
-          ]}
-        />,
+        <Collapse>
+          <Panel header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -563,16 +517,11 @@ describe('collapse', () => {
     });
     it('should work when value is header', () => {
       const { container } = render(
-        <Collapse
-          collapsible="header"
-          items={[
-            {
-              key: '1',
-              header: 'collapse 1',
-              children: 'first',
-            },
-          ]}
-        />,
+        <Collapse collapsible="header">
+          <Panel header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -582,16 +531,11 @@ describe('collapse', () => {
     });
     it('should work when value is icon', () => {
       const { container } = render(
-        <Collapse
-          collapsible="icon"
-          items={[
-            {
-              key: '1',
-              header: 'collapse 1',
-              children: 'first',
-            },
-          ]}
-        />,
+        <Collapse collapsible="icon">
+          <Panel header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
       );
       expect(container.querySelector('.rc-collapse-expand-icon')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -602,16 +546,11 @@ describe('collapse', () => {
 
     it('should disabled when value is disabled', () => {
       const { container } = render(
-        <Collapse
-          collapsible="disabled"
-          items={[
-            {
-              key: '1',
-              header: 'collapse 1',
-              children: 'first',
-            },
-          ]}
-        />,
+        <Collapse collapsible="disabled">
+          <Panel header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       expect(container.querySelectorAll('.rc-collapse-item-disabled')).toHaveLength(1);
@@ -621,17 +560,11 @@ describe('collapse', () => {
 
     it('the value of panel should be read first', () => {
       const { container } = render(
-        <Collapse
-          collapsible="header"
-          items={[
-            {
-              key: '1',
-              header: 'collapse 1',
-              children: 'first',
-              collapsible: 'disabled',
-            },
-          ]}
-        />,
+        <Collapse collapsible="header">
+          <Panel collapsible="disabled" header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
 
@@ -643,16 +576,11 @@ describe('collapse', () => {
 
     it('icon trigger when collapsible equal header', () => {
       const { container } = render(
-        <Collapse
-          collapsible="header"
-          items={[
-            {
-              key: '1',
-              header: 'collapse 1',
-              children: 'first',
-            },
-          ]}
-        />,
+        <Collapse collapsible="header">
+          <Panel header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
       );
 
       fireEvent.click(container.querySelector('.rc-collapse-header .arrow')!);
@@ -661,16 +589,11 @@ describe('collapse', () => {
 
     it('header not trigger when collapsible equal icon', () => {
       const { container } = render(
-        <Collapse
-          collapsible="icon"
-          items={[
-            {
-              key: '1',
-              header: 'collapse 1',
-              children: 'first',
-            },
-          ]}
-        />,
+        <Collapse collapsible="icon">
+          <Panel header="collapse 1" key="1">
+            first
+          </Panel>
+        </Collapse>,
       );
 
       fireEvent.click(container.querySelector('.rc-collapse-header-text')!);
@@ -680,16 +603,11 @@ describe('collapse', () => {
 
   it('!showArrow', () => {
     const { container } = render(
-      <Collapse
-        items={[
-          {
-            key: '1',
-            header: 'collapse 1',
-            children: 'first',
-            showArrow: false,
-          },
-        ]}
-      />,
+      <Collapse>
+        <Panel header="collapse 1" key="1" showArrow={false}>
+          first
+        </Panel>
+      </Collapse>,
     );
 
     expect(container.querySelectorAll('.rc-collapse-expand-icon')).toHaveLength(0);
@@ -698,38 +616,46 @@ describe('collapse', () => {
   it('Panel container dom can set event handler', () => {
     const clickHandler = jest.fn();
     const { container } = render(
-      <Collapse
-        defaultActiveKey="1"
-        items={[
-          {
-            key: '1',
-            header: 'collapse 1',
-            onClick: clickHandler,
-            children: <div className="target">Click this</div>,
-          },
-        ]}
-      />,
+      <Collapse defaultActiveKey="1">
+        <Panel header="collapse 1" key="1" onClick={clickHandler}>
+          <div className="target">Click this</div>
+        </Panel>
+      </Collapse>,
     );
 
     fireEvent.click(container.querySelector('.target')!);
     expect(clickHandler).toHaveBeenCalled();
   });
 
+  it('falsy Panel', () => {
+    const { container } = render(
+      <Collapse>
+        {null}
+        <Panel header="collapse 1" key="1">
+          <p>Panel 1 content</p>
+        </Panel>
+        {0}
+        <Panel header="collapse 2" key="2">
+          <p>Panel 2 content</p>
+        </Panel>
+        {undefined}
+        {false}
+        {true}
+      </Collapse>,
+    );
+
+    expect(container.querySelectorAll('.rc-collapse-item')).toHaveLength(2);
+  });
+
   it('ref should work', () => {
     const ref = React.createRef<any>();
     const panelRef = React.createRef<any>();
     const { container } = render(
-      <Collapse
-        ref={ref}
-        items={[
-          {
-            key: '1',
-            ref: panelRef,
-            header: 'collapse 1',
-            children: 'first',
-          },
-        ]}
-      />,
+      <Collapse ref={ref}>
+        <Panel header="collapse 1" key="1" ref={panelRef}>
+          first
+        </Panel>
+      </Collapse>,
     );
     expect(ref.current).toBe(container.firstChild);
     expect(panelRef.current).toBe(container.querySelector('.rc-collapse-item'));
@@ -739,16 +665,11 @@ describe('collapse', () => {
   it('onItemClick should work', () => {
     const onItemClick = jest.fn();
     const { container } = render(
-      <Collapse
-        items={[
-          {
-            key: '1',
-            header: 'collapse 1',
-            onItemClick,
-            children: 'first',
-          },
-        ]}
-      />,
+      <Collapse>
+        <Panel header="collapse 1" key="1" onItemClick={onItemClick}>
+          first
+        </Panel>
+      </Collapse>,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
     expect(onItemClick).toHaveBeenCalled();
@@ -757,17 +678,11 @@ describe('collapse', () => {
   it('onItemClick should not work when collapsible is disabled', () => {
     const onItemClick = jest.fn();
     const { container } = render(
-      <Collapse
-        collapsible="disabled"
-        items={[
-          {
-            key: '1',
-            header: 'collapse 1',
-            onItemClick,
-            children: 'first',
-          },
-        ]}
-      />,
+      <Collapse collapsible="disabled">
+        <Panel header="collapse 1" key="1" onItemClick={onItemClick}>
+          first
+        </Panel>
+      </Collapse>,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
     expect(onItemClick).not.toHaveBeenCalled();
@@ -775,25 +690,37 @@ describe('collapse', () => {
 
   it('panel style should work', () => {
     const { container } = render(
-      <Collapse
-        items={[
-          {
-            key: '1',
-            header: 'collapse 1',
-            style: { color: 'red' },
-            children: 'first',
-          },
-        ]}
-      />,
-    );
-
-    expect(window.getComputedStyle(container.querySelector('.rc-collapse-item'))).toHaveProperty(
-      'color',
-      'red',
+      <Collapse>
+        <Panel header="collapse 1" key="1" style={{ color: 'red' }}>
+          first
+        </Panel>
+      </Collapse>,
     );
+    expect(container.querySelector('.rc-collapse-item').style.color).toBe('red');
   });
 
   describe('props items', () => {
+    const items: ItemType[] = [
+      {
+        key: '1',
+        label: 'collapse 1',
+        children: 'first',
+        collapsible: 'disabled',
+      },
+      {
+        key: '2',
+        label: 'collapse 2',
+        children: 'second',
+        extra: <span>ExtraSpan</span>,
+      },
+      {
+        key: '3',
+        label: 'collapse 3',
+        className: 'important',
+        children: 'third',
+      },
+    ];
+
     runNormalTest(
       <Collapse onChange={onChange} expandIcon={() => <span>test{'>'}</span>} items={items} />,
     );

From fb3888aa9262e26ff09b26e3f7b24be56c15f79c Mon Sep 17 00:00:00 2001
From: wuxh <wxh1220@gmail.com>
Date: Fri, 14 Apr 2023 17:50:07 +0800
Subject: [PATCH 4/5] refactor: remove deprecated

---
 src/Collapse.tsx       |  9 +----
 src/hooks/useItems.tsx | 87 +-----------------------------------------
 src/index.tsx          | 10 +----
 3 files changed, 4 insertions(+), 102 deletions(-)

diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index 36267d29..52519ef9 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import warning from 'rc-util/lib/warning';
 import React from 'react';
 import useItems from './hooks/useItems';
 import type { CollapseProps } from './interface';
@@ -23,7 +22,6 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     style,
     accordion,
     className,
-    children,
     collapsible,
     openMotion,
     expandIcon,
@@ -58,12 +56,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     });
 
   // ======================== Children ========================
-  warning(
-    !children,
-    '`children` will be removed in next major version. Please use `items` instead.',
-  );
-
-  const mergedChildren = useItems(items, children, {
+  const mergedChildren = useItems(items, {
     prefixCls,
     accordion,
     openMotion,
diff --git a/src/hooks/useItems.tsx b/src/hooks/useItems.tsx
index 2bc5db7b..cc39737b 100644
--- a/src/hooks/useItems.tsx
+++ b/src/hooks/useItems.tsx
@@ -1,4 +1,3 @@
-import toArray from 'rc-util/lib/Children/toArray';
 import React from 'react';
 import type { CollapsePanelProps, CollapseProps, ItemType } from '../interface';
 import CollapsePanel from '../Panel';
@@ -31,8 +30,6 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
       ...restProps
     } = item;
 
-    // You may be puzzled why you want to convert them all into strings, me too.
-    // Maybe: https://github.com/react-component/collapse/blob/aac303a8b6ff30e35060b4f8fecde6f4556fcbe2/src/Collapse.tsx#L15
     const key = String(rawKey ?? index);
     const mergeCollapsible = rawCollapsible ?? collapsible;
     const mergeDestroyInactivePanel = rawDestroyInactivePanel ?? destroyInactivePanel;
@@ -71,92 +68,12 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
   });
 };
 
-/**
- * @deprecated The next major version will be removed
- */
-const getNewChild = (
-  child: React.ReactElement<CollapsePanelProps>,
-  index: number,
-  props: Props,
-) => {
-  if (!child) return null;
-
-  const {
-    prefixCls,
-    accordion,
-    collapsible,
-    destroyInactivePanel,
-    onItemClick,
-    activeKey,
-    openMotion,
-    expandIcon,
-  } = props;
-
-  const key = child.key || String(index);
-
-  const {
-    header,
-    headerClass,
-    destroyInactivePanel: childDestroyInactivePanel,
-    collapsible: childCollapsible,
-    onItemClick: childOnItemClick,
-  } = child.props;
-
-  let isActive = false;
-  if (accordion) {
-    isActive = activeKey[0] === key;
-  } else {
-    isActive = activeKey.indexOf(key) > -1;
-  }
-
-  const mergeCollapsible = childCollapsible ?? collapsible;
-
-  const handleItemClick = (value: React.Key) => {
-    if (mergeCollapsible === 'disabled') return;
-    onItemClick(value);
-    childOnItemClick?.(value);
-  };
-
-  const childProps = {
-    key,
-    panelKey: key,
-    header,
-    headerClass,
-    isActive,
-    prefixCls,
-    destroyInactivePanel: childDestroyInactivePanel ?? destroyInactivePanel,
-    openMotion,
-    accordion,
-    children: child.props.children,
-    onItemClick: handleItemClick,
-    expandIcon,
-    collapsible: mergeCollapsible,
-  };
-
-  // https://github.com/ant-design/ant-design/issues/20479
-  if (typeof child.type === 'string') {
-    return child;
-  }
-
-  Object.keys(childProps).forEach((propName) => {
-    if (typeof childProps[propName] === 'undefined') {
-      delete childProps[propName];
-    }
-  });
-
-  return React.cloneElement(child, childProps);
-};
-
-function useItems(
-  items?: ItemType[],
-  rawChildren?: React.ReactNode,
-  props?: Props,
-): React.ReactElement<CollapsePanelProps>[] {
+function useItems(items?: ItemType[], props?: Props) {
   if (Array.isArray(items)) {
     return convertItemsToNodes(items, props);
   }
 
-  return toArray(rawChildren).map((child, index) => getNewChild(child, index, props));
+  return null;
 }
 
 export default useItems;
diff --git a/src/index.tsx b/src/index.tsx
index 8e963c68..87e21e7e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,2 @@
-import Collapse from './Collapse';
-
+export { default } from './Collapse';
 export type { CollapsePanelProps, CollapseProps } from './interface';
-
-export default Collapse;
-
-/**
- * @deprecated use `items` instead, will be removed in `v4.0.0`
- */
-export const { Panel } = Collapse;

From 2664cb0b7fbc408d502d50e731501e21ed764d71 Mon Sep 17 00:00:00 2001
From: wuxh <wxh1220@gmail.com>
Date: Fri, 14 Apr 2023 18:08:49 +0800
Subject: [PATCH 5/5] test: update test

---
 tests/index.spec.tsx | 670 +++++++++++++++++++++++--------------------
 1 file changed, 365 insertions(+), 305 deletions(-)

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 533df08b..cd2a5097 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -1,8 +1,8 @@
 import type { RenderResult } from '@testing-library/react';
 import { fireEvent, render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
-import React, { Fragment } from 'react';
-import Collapse, { Panel } from '../src/index';
+import React from 'react';
+import Collapse from '../src/index';
 import type { CollapseProps, ItemType } from '../src/interface';
 
 describe('collapse', () => {
@@ -24,6 +24,27 @@ describe('collapse', () => {
     }
   }
 
+  const items: ItemType[] = [
+    {
+      key: '1',
+      label: 'collapse 1',
+      collapsible: 'disabled',
+      children: 'first',
+    },
+    {
+      key: '2',
+      label: 'collapse 2',
+      extra: <span>ExtraSpan</span>,
+      children: 'second',
+    },
+    {
+      key: '3',
+      label: 'collapse 3',
+      className: 'important',
+      children: 'third',
+    },
+  ];
+
   function runNormalTest(element: any) {
     let collapse: RenderResult;
 
@@ -115,21 +136,7 @@ describe('collapse', () => {
   describe('collapse', () => {
     const expandIcon = () => <span>test{'>'}</span>;
 
-    const element = (
-      <Collapse onChange={onChange} expandIcon={expandIcon}>
-        <Panel header="collapse 1" key="1" collapsible="disabled">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3" className="important">
-          third
-        </Panel>
-      </Collapse>
-    );
-
-    runNormalTest(element);
+    runNormalTest(<Collapse onChange={onChange} expandIcon={expandIcon} items={items} />);
 
     it('controlled', () => {
       const onChangeSpy = jest.fn();
@@ -143,17 +150,27 @@ describe('collapse', () => {
         };
 
         return (
-          <Collapse onChange={handleChange} activeKey={activeKey}>
-            <Panel header="collapse 1" key="1">
-              first
-            </Panel>
-            <Panel header="collapse 2" key="2">
-              second
-            </Panel>
-            <Panel header="collapse 3" key="3">
-              third
-            </Panel>
-          </Collapse>
+          <Collapse
+            onChange={handleChange}
+            activeKey={activeKey}
+            items={[
+              {
+                key: '1',
+                label: 'collapse 1',
+                children: 'first',
+              },
+              {
+                key: '2',
+                label: 'collapse 2',
+                children: 'second',
+              },
+              {
+                key: '3',
+                label: 'collapse 3',
+                children: 'third',
+              },
+            ]}
+          />
         );
       };
 
@@ -170,31 +187,32 @@ describe('collapse', () => {
   });
 
   describe('it should support number key', () => {
-    const expandIcon = () => <span>test{'>'}</span>;
-    const element = (
-      <Collapse onChange={onChange} expandIcon={expandIcon}>
-        <Panel header="collapse 1" key={1} collapsible="disabled">
-          first
-        </Panel>
-        <Panel header="collapse 2" key={2} extra={<span>ExtraSpan</span>}>
-          second
-        </Panel>
-        <Panel header="collapse 3" key={3} className="important">
-          third
-        </Panel>
-      </Collapse>
+    runNormalTest(
+      <Collapse
+        onChange={onChange}
+        expandIcon={() => <span>test{'>'}</span>}
+        items={items.map((item) => ({
+          ...item,
+          key: Number(item.key),
+        }))}
+      />,
     );
-
-    runNormalTest(element);
   });
 
   it('shoule support extra whit number 0', () => {
     const { container } = render(
-      <Collapse onChange={onChange} activeKey={0}>
-        <Panel header="collapse 0" key={0} extra={0}>
-          zero
-        </Panel>
-      </Collapse>,
+      <Collapse
+        onChange={onChange}
+        activeKey={0}
+        items={[
+          {
+            label: 'collapse 0',
+            key: 0,
+            extra: 0,
+            children: 'zero',
+          },
+        ]}
+      />,
     );
 
     const extraNodes = container.querySelectorAll('.rc-collapse-extra');
@@ -204,17 +222,14 @@ describe('collapse', () => {
 
   it('should support activeKey number 0', () => {
     const { container } = render(
-      <Collapse onChange={onChange} activeKey={0}>
-        <Panel header="collapse 0" key={0}>
-          zero
-        </Panel>
-        <Panel header="collapse 1" key={1}>
-          first
-        </Panel>
-        <Panel header="collapse 2" key={2}>
-          second
-        </Panel>
-      </Collapse>,
+      <Collapse
+        onChange={onChange}
+        activeKey={0}
+        items={items.map((item, index) => ({
+          ...item,
+          key: index,
+        }))}
+      />,
     );
 
     // activeKey number 0, should open one item
@@ -223,17 +238,7 @@ describe('collapse', () => {
 
   it('click should toggle panel state', () => {
     const { container } = render(
-      <Collapse onChange={onChange} destroyInactivePanel>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3" className="important">
-          third
-        </Panel>
-      </Collapse>,
+      <Collapse onChange={onChange} destroyInactivePanel items={items} />,
     );
 
     const header = container.querySelectorAll('.rc-collapse-header')?.[1];
@@ -313,59 +318,89 @@ describe('collapse', () => {
 
   describe('prop: accordion', () => {
     runAccordionTest(
-      <Collapse onChange={onChange} accordion>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3">
-          third
-        </Panel>
-      </Collapse>,
+      <Collapse
+        onChange={onChange}
+        accordion
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            children: 'first',
+          },
+          {
+            key: '2',
+            label: 'collapse 2',
+            children: 'second',
+          },
+          {
+            key: '3',
+            label: 'collapse 3',
+            children: 'third',
+          },
+        ]}
+      />,
     );
   });
 
   describe('forceRender', () => {
     it('when forceRender is not supplied it should lazy render the panel content', () => {
       const { container } = render(
-        <Collapse>
-          <Panel header="collapse 1" key="1" collapsible="disabled">
-            first
-          </Panel>
-          <Panel header="collapse 2" key="2">
-            second
-          </Panel>
-        </Collapse>,
+        <Collapse
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              collapsible: 'disabled',
+            },
+            {
+              key: '2',
+              label: 'collapse 2',
+              children: 'second',
+            },
+          ]}
+        />,
       );
       expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
     });
 
     it('when forceRender is FALSE it should lazy render the panel content', () => {
       const { container } = render(
-        <Collapse>
-          <Panel header="collapse 1" key="1" forceRender={false} collapsible="disabled">
-            first
-          </Panel>
-          <Panel header="collapse 2" key="2">
-            second
-          </Panel>
-        </Collapse>,
+        <Collapse
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              forceRender: false,
+              collapsible: 'disabled',
+            },
+            {
+              key: '2',
+              label: 'collapse 2',
+              children: 'second',
+            },
+          ]}
+        />,
       );
       expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
     });
 
     it('when forceRender is TRUE then it should render all the panel content to the DOM', () => {
       const { container } = render(
-        <Collapse>
-          <Panel header="collapse 1" key="1" forceRender collapsible="disabled">
-            first
-          </Panel>
-          <Panel header="collapse 2" key="2">
-            second
-          </Panel>
-        </Collapse>,
+        <Collapse
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              forceRender: true,
+              collapsible: 'disabled',
+            },
+            {
+              key: '2',
+              label: 'collapse 2',
+              children: 'second',
+            },
+          ]}
+        />,
       );
 
       jest.runAllTimers();
@@ -388,17 +423,26 @@ describe('collapse', () => {
     };
 
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3" collapsible="disabled">
-          second
-        </Panel>
-      </Collapse>,
+      <Collapse
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            children: 'first',
+          },
+          {
+            key: '2',
+            label: 'collapse 2',
+            children: 'second',
+          },
+          {
+            key: '3',
+            label: 'collapse 3',
+            children: 'second',
+            collapsible: 'disabled',
+          },
+        ]}
+      />,
     );
 
     fireEvent.keyPress(container.querySelectorAll('.rc-collapse-header')?.[2], myKeyEvent);
@@ -423,46 +467,59 @@ describe('collapse', () => {
     );
   });
 
-  describe('wrapped in Fragment', () => {
-    const expandIcon = () => <span>test{'>'}</span>;
-    const element = (
-      <Collapse onChange={onChange} expandIcon={expandIcon}>
-        <Fragment>
-          <Panel header="collapse 1" key="1" collapsible="disabled">
-            first
-          </Panel>
-          <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
-            second
-          </Panel>
-          <Fragment>
-            <Panel header="collapse 3" key="3" className="important">
-              third
-            </Panel>
-          </Fragment>
-        </Fragment>
-      </Collapse>
-    );
-
-    runNormalTest(element);
-  });
+  // TODO: 移除 Panel 后需要在 Ant Design 里面测试，待 Ant Design 稳定后再移除 assignee: @wxh16144
+  // describe('wrapped in Fragment', () => {
+  //   const expandIcon = () => <span>test{'>'}</span>;
+  //   const element = (
+  //     <Collapse onChange={onChange} expandIcon={expandIcon}>
+  //       <Fragment>
+  //         <Panel header="collapse 1" key="1" collapsible="disabled">
+  //           first
+  //         </Panel>
+  //         <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
+  //           second
+  //         </Panel>
+  //         <Fragment>
+  //           <Panel header="collapse 3" key="3" className="important">
+  //             third
+  //           </Panel>
+  //         </Fragment>
+  //       </Fragment>
+  //     </Collapse>
+  //   );
+
+  //   runNormalTest(element);
+  // });
 
   it('should support return null icon', () => {
     const { container } = render(
-      <Collapse expandIcon={() => null}>
-        <Panel header="title" key="1">
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        expandIcon={() => null}
+        items={[
+          {
+            key: '1',
+            label: 'title',
+            children: 'first',
+          },
+        ]}
+      />,
     );
     expect(container.querySelector('.rc-collapse-header')?.childNodes).toHaveLength(1);
   });
 
-  it('should support custom child', () => {
+  // TODO: 需要在 Ant Design 里面测试，待 Ant Design 稳定后再移除 assignee: @wxh16144
+  // 按理说我们不允许用户这样用，但是为了兼容性，我们还是保留这个测试
+  it.skip('should support custom child', () => {
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
+      <Collapse
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            children: 'first',
+          },
+        ]}
+      >
         <a className="custom-child">custom-child</a>
       </Collapse>,
     );
@@ -472,44 +529,49 @@ describe('collapse', () => {
   // https://github.com/ant-design/ant-design/issues/36327
   // https://github.com/ant-design/ant-design/issues/6179
   // https://github.com/react-component/collapse/issues/73#issuecomment-323626120
-  it('should support custom component', () => {
-    const PanelElement = (props) => (
-      <Panel header="collapse 1" {...props}>
-        <p>test</p>
-      </Panel>
-    );
-    const { container } = render(
-      <Collapse defaultActiveKey="1">
-        <PanelElement key="1" />
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-      </Collapse>,
-    );
-
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
-    expect(container.querySelector('.rc-collapse-content')).toHaveClass(
-      'rc-collapse-content-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',
-    );
-  });
+  // TODO: 需要在 Ant Design 里面测试，待 Ant Design 稳定后再移除 assignee: @wxh16144
+  // it('should support custom component', () => {
+  //   const PanelElement = (props) => (
+  //     <Panel header="collapse 1" {...props}>
+  //       <p>test</p>
+  //     </Panel>
+  //   );
+  //   const { container } = render(
+  //     <Collapse defaultActiveKey="1">
+  //       <PanelElement key="1" />
+  //       <Panel header="collapse 2" key="2">
+  //         second
+  //       </Panel>
+  //     </Collapse>,
+  //   );
+
+  //   expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+  //   expect(container.querySelector('.rc-collapse-content')).toHaveClass(
+  //     'rc-collapse-content-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',
+  //   );
+  // });
 
   describe('prop: collapsible', () => {
     it('default', () => {
       const { container } = render(
-        <Collapse>
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -517,11 +579,16 @@ describe('collapse', () => {
     });
     it('should work when value is header', () => {
       const { container } = render(
-        <Collapse collapsible="header">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="header"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -531,11 +598,16 @@ describe('collapse', () => {
     });
     it('should work when value is icon', () => {
       const { container } = render(
-        <Collapse collapsible="icon">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="icon"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-expand-icon')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -546,11 +618,16 @@ describe('collapse', () => {
 
     it('should disabled when value is disabled', () => {
       const { container } = render(
-        <Collapse collapsible="disabled">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="disabled"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       expect(container.querySelectorAll('.rc-collapse-item-disabled')).toHaveLength(1);
@@ -560,11 +637,17 @@ describe('collapse', () => {
 
     it('the value of panel should be read first', () => {
       const { container } = render(
-        <Collapse collapsible="header">
-          <Panel collapsible="disabled" header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="header"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+              collapsible: 'disabled',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
 
@@ -576,11 +659,16 @@ describe('collapse', () => {
 
     it('icon trigger when collapsible equal header', () => {
       const { container } = render(
-        <Collapse collapsible="header">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="header"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
 
       fireEvent.click(container.querySelector('.rc-collapse-header .arrow')!);
@@ -589,11 +677,16 @@ describe('collapse', () => {
 
     it('header not trigger when collapsible equal icon', () => {
       const { container } = render(
-        <Collapse collapsible="icon">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="icon"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
 
       fireEvent.click(container.querySelector('.rc-collapse-header-text')!);
@@ -603,11 +696,16 @@ describe('collapse', () => {
 
   it('!showArrow', () => {
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1" showArrow={false}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            children: 'first',
+            showArrow: false,
+          },
+        ]}
+      />,
     );
 
     expect(container.querySelectorAll('.rc-collapse-expand-icon')).toHaveLength(0);
@@ -616,46 +714,38 @@ describe('collapse', () => {
   it('Panel container dom can set event handler', () => {
     const clickHandler = jest.fn();
     const { container } = render(
-      <Collapse defaultActiveKey="1">
-        <Panel header="collapse 1" key="1" onClick={clickHandler}>
-          <div className="target">Click this</div>
-        </Panel>
-      </Collapse>,
+      <Collapse
+        defaultActiveKey="1"
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            onClick: clickHandler,
+            children: <div className="target">Click this</div>,
+          },
+        ]}
+      />,
     );
 
     fireEvent.click(container.querySelector('.target')!);
     expect(clickHandler).toHaveBeenCalled();
   });
 
-  it('falsy Panel', () => {
-    const { container } = render(
-      <Collapse>
-        {null}
-        <Panel header="collapse 1" key="1">
-          <p>Panel 1 content</p>
-        </Panel>
-        {0}
-        <Panel header="collapse 2" key="2">
-          <p>Panel 2 content</p>
-        </Panel>
-        {undefined}
-        {false}
-        {true}
-      </Collapse>,
-    );
-
-    expect(container.querySelectorAll('.rc-collapse-item')).toHaveLength(2);
-  });
-
   it('ref should work', () => {
     const ref = React.createRef<any>();
     const panelRef = React.createRef<any>();
     const { container } = render(
-      <Collapse ref={ref}>
-        <Panel header="collapse 1" key="1" ref={panelRef}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        ref={ref}
+        items={[
+          {
+            key: '1',
+            ref: panelRef,
+            label: 'collapse 1',
+            children: 'first',
+          },
+        ]}
+      />,
     );
     expect(ref.current).toBe(container.firstChild);
     expect(panelRef.current).toBe(container.querySelector('.rc-collapse-item'));
@@ -665,11 +755,16 @@ describe('collapse', () => {
   it('onItemClick should work', () => {
     const onItemClick = jest.fn();
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1" onItemClick={onItemClick}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            onItemClick,
+            children: 'first',
+          },
+        ]}
+      />,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
     expect(onItemClick).toHaveBeenCalled();
@@ -678,11 +773,17 @@ describe('collapse', () => {
   it('onItemClick should not work when collapsible is disabled', () => {
     const onItemClick = jest.fn();
     const { container } = render(
-      <Collapse collapsible="disabled">
-        <Panel header="collapse 1" key="1" onItemClick={onItemClick}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        collapsible="disabled"
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            onItemClick,
+            children: 'first',
+          },
+        ]}
+      />,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
     expect(onItemClick).not.toHaveBeenCalled();
@@ -690,65 +791,24 @@ describe('collapse', () => {
 
   it('panel style should work', () => {
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1" style={{ color: 'red' }}>
-          first
-        </Panel>
-      </Collapse>,
-    );
-    expect(container.querySelector('.rc-collapse-item').style.color).toBe('red');
-  });
-
-  describe('props items', () => {
-    const items: ItemType[] = [
-      {
-        key: '1',
-        label: 'collapse 1',
-        children: 'first',
-        collapsible: 'disabled',
-      },
-      {
-        key: '2',
-        label: 'collapse 2',
-        children: 'second',
-        extra: <span>ExtraSpan</span>,
-      },
-      {
-        key: '3',
-        label: 'collapse 3',
-        className: 'important',
-        children: 'third',
-      },
-    ];
-
-    runNormalTest(
-      <Collapse onChange={onChange} expandIcon={() => <span>test{'>'}</span>} items={items} />,
-    );
-
-    runAccordionTest(
       <Collapse
-        onChange={onChange}
-        accordion
         items={[
           {
             key: '1',
             label: 'collapse 1',
+            style: { color: 'red' },
             children: 'first',
           },
-          {
-            key: '2',
-            label: 'collapse 2',
-            children: 'second',
-          },
-          {
-            key: '3',
-            label: 'collapse 3',
-            children: 'third',
-          },
         ]}
       />,
     );
+    expect(window.getComputedStyle(container.querySelector('.rc-collapse-item'))).toHaveProperty(
+      'color',
+      'red',
+    );
+  });
 
+  describe('props items', () => {
     it('should work with onItemClick', () => {
       const onItemClick = jest.fn();
       const { container } = render(