From bd2361490eea49a1957c3215510c731224a941c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= <1844749591@qq.com>
Date: Sat, 4 Jan 2025 22:38:20 +0800
Subject: [PATCH 1/4] feat: retire deprecated api

---
 .gitignore             |   3 +-
 src/Collapse.tsx       |  16 +-
 src/hooks/useItems.tsx |  89 +-----
 src/index.tsx          |   5 -
 tests/index.spec.tsx   | 648 ++++++++++++++++++++++++++---------------
 5 files changed, 414 insertions(+), 347 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2623981..c1840f9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,5 @@ package-lock.json
 .env.local
 src/.umi
 
-bun.lockb
\ No newline at end of file
+bun.lockb
+.vscode/
\ No newline at end of file
diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index 0623138..333e593 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -1,10 +1,8 @@
 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';
-import CollapsePanel from './Panel';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 
 function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
@@ -59,12 +57,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     });
 
   // ======================== Children ========================
-  warning(
-    !children,
-    '[rc-collapse] `children` will be removed in next major version. Please use `items` instead.',
-  );
-
-  const mergedChildren = useItems(items, children, {
+  const mergedChildren = useItems(items, {
     prefixCls,
     accordion,
     openMotion,
@@ -89,9 +82,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/hooks/useItems.tsx b/src/hooks/useItems.tsx
index 2bc5db7..4108fa7 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';
@@ -71,92 +70,8 @@ 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>[] {
-  if (Array.isArray(items)) {
-    return convertItemsToNodes(items, props);
-  }
-
-  return toArray(rawChildren).map((child, index) => getNewChild(child, index, props));
+function useItems(items?: ItemType[], props?: Props): React.ReactElement<CollapsePanelProps>[] {
+  return convertItemsToNodes(items, props);
 }
 
 export default useItems;
diff --git a/src/index.tsx b/src/index.tsx
index 8e963c6..428b33f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,8 +3,3 @@ 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 c08d7ce..dd9f3c5 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -2,7 +2,7 @@ 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 Collapse from '../src/index';
 import type { CollapseProps, ItemType } from '../src/interface';
 
 describe('collapse', () => {
@@ -116,17 +116,30 @@ 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>
+      <Collapse
+        onChange={onChange}
+        expandIcon={expandIcon}
+        items={[
+          {
+            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',
+          },
+        ]}
+      />
     );
 
     runNormalTest(element);
@@ -143,17 +156,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',
+              },
+            ]}
+          />
         );
       };
 
@@ -172,17 +195,30 @@ 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>
+      <Collapse
+        onChange={onChange}
+        expandIcon={expandIcon}
+        items={[
+          {
+            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',
+          },
+        ]}
+      />
     );
 
     runNormalTest(element);
@@ -191,11 +227,17 @@ describe('collapse', () => {
   describe('prop: headerClass', () => {
     it('applies the passed headerClass to the header', () => {
       const element = (
-        <Collapse onChange={onChange}>
-          <Panel header="collapse 1" key="1" headerClass="custom-class">
-            first
-          </Panel>
-        </Collapse>
+        <Collapse
+          onChange={onChange}
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              headerClass: 'custom-class',
+              children: 'first',
+            },
+          ]}
+        />
       );
 
       const { container } = render(element);
@@ -207,11 +249,18 @@ describe('collapse', () => {
 
   it('should 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={[
+          {
+            key: 0,
+            label: 'collapse 0',
+            extra: 0,
+            children: 'zero',
+          },
+        ]}
+      />,
     );
 
     const extraNodes = container.querySelectorAll('.rc-collapse-extra');
@@ -221,17 +270,27 @@ 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={[
+          {
+            key: 0,
+            label: 'collapse 0',
+            children: 'zero',
+          },
+          {
+            key: 1,
+            label: 'collapse 1',
+            children: 'first',
+          },
+          {
+            key: 2,
+            label: 'collapse 2',
+            children: 'second',
+          },
+        ]}
+      />,
     );
 
     // activeKey number 0, should open one item
@@ -240,17 +299,28 @@ 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={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            children: 'first',
+          },
+          {
+            key: '2',
+            label: 'collapse 2',
+            children: 'second',
+          },
+          {
+            key: '3',
+            label: 'collapse 3',
+            className: 'important',
+            children: 'third',
+          },
+        ]}
+      />,
     );
 
     const header = container.querySelectorAll('.rc-collapse-header')?.[1];
@@ -330,59 +400,92 @@ 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',
+              children: 'first',
+            },
+            {
+              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',
+              children: 'first',
+            },
+            {
+              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',
+              children: 'first',
+            },
+            {
+              key: '2',
+              label: 'collapse 2',
+              children: 'second',
+            },
+          ]}
+        />,
       );
 
       jest.runAllTimers();
@@ -405,17 +508,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">
-          third
-        </Panel>
-      </Collapse>,
+      <Collapse
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            children: 'first',
+          },
+          {
+            key: '2',
+            label: 'collapse 2',
+            children: 'second',
+          },
+          {
+            key: '3',
+            label: 'collapse 3',
+            collapsible: 'disabled',
+            children: 'third',
+          },
+        ]}
+      />,
     );
 
     fireEvent.keyDown(container.querySelectorAll('.rc-collapse-header')?.[2], myKeyEvent);
@@ -443,21 +555,30 @@ 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>
+      <Collapse
+        onChange={onChange}
+        expandIcon={expandIcon}
+        items={[
+          {
+            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',
+          },
+        ]}
+      />
     );
 
     runNormalTest(element);
@@ -465,43 +586,40 @@ describe('collapse', () => {
 
   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', () => {
-    const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
-        <a className="custom-child">custom-child</a>
-      </Collapse>,
-    );
-    expect(container.querySelector('.custom-child')?.innerHTML).toBe('custom-child');
-  });
-
   // 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>,
+      <Collapse
+        defaultActiveKey="1"
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            children: <p>test</p>,
+          },
+          {
+            key: '2',
+            label: 'collapse 2',
+            children: 'second',
+          },
+        ]}
+      />,
     );
 
     expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
@@ -522,23 +640,33 @@ describe('collapse', () => {
   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')!);
       expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
     });
+
     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')!);
@@ -546,13 +674,19 @@ describe('collapse', () => {
       fireEvent.click(container.querySelector('.rc-collapse-header-text')!);
       expect(container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
     });
+
     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')!);
@@ -563,11 +697,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);
@@ -577,11 +716,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();
 
@@ -593,11 +738,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')!);
@@ -606,11 +756,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')!);
@@ -620,11 +775,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);
@@ -633,46 +793,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',
+            children: <div className="target">Click this</div>,
+            onClick: clickHandler,
+          },
+        ]}
+      />,
     );
 
     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',
+            label: 'collapse 1',
+            children: 'first',
+            ref: panelRef,
+          },
+        ]}
+      />,
     );
     expect(ref.current).toBe(container.firstChild);
     expect(panelRef.current).toBe(container.querySelector('.rc-collapse-item'));
@@ -682,11 +834,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',
+            children: 'first',
+            onItemClick,
+          },
+        ]}
+      />,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
     expect(onItemClick).toHaveBeenCalled();
@@ -695,11 +852,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',
+            children: 'first',
+            onItemClick,
+          },
+        ]}
+      />,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
     expect(onItemClick).not.toHaveBeenCalled();
@@ -707,11 +870,16 @@ 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',
+            label: 'collapse 1',
+            children: 'first',
+            style: { color: 'red' },
+          },
+        ]}
+      />,
     );
     expect(container.querySelector('.rc-collapse-item')).toHaveStyle({ color: 'red' });
   });

From 2e300a53b6cc54436acdd7807355e25c37cadc87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= <1844749591@qq.com>
Date: Sat, 4 Jan 2025 22:46:33 +0800
Subject: [PATCH 2/4] fix: lint fix

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

diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index 333e593..6d2e2f3 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -22,7 +22,6 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     style,
     accordion,
     className,
-    children,
     collapsible,
     openMotion,
     expandIcon,

From 3fa129b22f088c91a18a9a146d0c298907b65085 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= <1844749591@qq.com>
Date: Sat, 4 Jan 2025 22:55:44 +0800
Subject: [PATCH 3/4] chore: update demo

---
 docs/examples/custom-icon.tsx | 83 +++++++++++++++++++-----------
 docs/examples/fragment.tsx    | 23 ---------
 docs/examples/simple.tsx      | 96 +++++++++++++++++++++--------------
 3 files changed, 112 insertions(+), 90 deletions(-)
 delete mode 100644 docs/examples/fragment.tsx

diff --git a/docs/examples/custom-icon.tsx b/docs/examples/custom-icon.tsx
index ea3df8e..9cbb557 100644
--- a/docs/examples/custom-icon.tsx
+++ b/docs/examples/custom-icon.tsx
@@ -1,4 +1,4 @@
-import Collapse, { Panel } from 'rc-collapse';
+import Collapse from 'rc-collapse';
 import * as React from 'react';
 import '../../assets/index.less';
 import motion from './_util/motionUtil';
@@ -48,32 +48,56 @@ const App: React.FC = () => {
 
   const time = random();
 
-  const panelItems = Array.from<object, React.ReactNode>({ length: initLength }, (_, i) => {
-    const key = i + 1;
-    return (
-      <Panel header={`This is panel header ${key}`} key={key}>
-        <p>{text.repeat(time)}</p>
-      </Panel>
-    );
-  }).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>,
-  );
+  const items = [
+    ...Array.from({ length: initLength }, (_, i) => {
+      const key = i + 1;
+      return {
+        key,
+        label: `This is panel header ${key}`,
+        children: <p>{text.repeat(time)}</p>,
+      };
+    }),
+    {
+      key: initLength + 1,
+      label: `This is panel header ${initLength + 1}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          expandIcon={expandIcon}
+          items={[
+            {
+              key: '1',
+              label: 'This is panel nest panel',
+              id: 'header-test',
+              children: <p>{text}</p>,
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      key: initLength + 2,
+      label: `This is panel header ${initLength + 2}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          items={[
+            {
+              key: '1',
+              label: '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={items}
+      />
     </>
   );
 };
diff --git a/docs/examples/fragment.tsx b/docs/examples/fragment.tsx
deleted file mode 100644
index bb38c5b..0000000
--- 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 5353415..411dbd4 100644
--- a/docs/examples/simple.tsx
+++ b/docs/examples/simple.tsx
@@ -1,5 +1,5 @@
 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 motion from './_util/motionUtil';
@@ -50,39 +50,62 @@ const App: React.FC = () => {
 
   const time = random();
 
-  const panelItems = Array.from<object, React.ReactNode>({ length: initLength }, (_, i) => {
-    const key = i + 1;
-    return (
-      <Panel header={`This is panel header ${key}`} key={key}>
-        <p>{text.repeat(time)}</p>
-      </Panel>
-    );
-  }).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>,
-  );
+  const items: CollapseProps['items'] = [
+    ...Array.from({ length: initLength }, (_, i) => {
+      const key = i + 1;
+      return {
+        key,
+        label: `This is panel header ${key}`,
+        children: <p>{text.repeat(time)}</p>,
+      };
+    }),
+    {
+      key: initLength + 1,
+      label: `This is panel header ${initLength + 1}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          expandIcon={expandIcon}
+          items={[
+            {
+              key: '1',
+              label: 'This is panel nest panel',
+              id: 'header-test',
+              children: <p>{text}</p>,
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      key: initLength + 2,
+      label: `This is panel header ${initLength + 2}`,
+      children: (
+        <Collapse
+          defaultActiveKey="1"
+          items={[
+            {
+              key: '1',
+              label: '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,
+      label: `This is panel header ${initLength + 3}`,
+      extra: <span>Extra Node</span>,
+      children: <p>Panel with extra</p>,
+    },
+  ];
 
   const handleCollapsibleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const values = [undefined, 'header', 'icon', 'disabled'];
@@ -129,9 +152,8 @@ const App: React.FC = () => {
         expandIcon={expandIcon}
         openMotion={motion}
         collapsible={collapsible}
-      >
-        {panelItems}
-      </Collapse>
+        items={items}
+      />
     </>
   );
 };

From 53ad35976ddb43536a27388b2686c7a69ae12e3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=B1=AA?= <1844749591@qq.com>
Date: Sat, 4 Jan 2025 22:57:20 +0800
Subject: [PATCH 4/4] chore: update demo

---
 docs/demo/fragment.md | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 docs/demo/fragment.md

diff --git a/docs/demo/fragment.md b/docs/demo/fragment.md
deleted file mode 100644
index de859a4..0000000
--- a/docs/demo/fragment.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: fragment
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/fragment.tsx"></code>