diff --git a/.dumirc.ts b/.dumirc.ts
index 2365eec6..95ecbc3d 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -16,7 +16,6 @@ export default defineConfig({
name: 'Collapse',
logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
},
- outputPath: '.doc',
base: basePath,
publicPath,
});
diff --git a/.github/workflows/site-deploy.yml b/.github/workflows/site-deploy.yml
index 19eaa7b2..8f125072 100644
--- a/.github/workflows/site-deploy.yml
+++ b/.github/workflows/site-deploy.yml
@@ -33,7 +33,7 @@ jobs:
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
- publish_dir: ./.doc
+ publish_dir: ./dist
force_orphan: true
user_name: 'github-actions[bot]'
user_email: 'github-actions[bot]@users.noreply.github.com'
diff --git a/.gitignore b/.gitignore
index 2623981b..e1c3a36d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,6 +28,7 @@ coverage
es
yarn.lock
package-lock.json
+pnpm-lock.yaml
.storybook
.doc
diff --git a/README.md b/README.md
index d7900776..96ceda17 100644
--- a/README.md
+++ b/README.md
@@ -78,7 +78,7 @@ ReactDOM.render(App, container);
| default active key |
- | destroyInactivePanel |
+ destroyOnHidden |
Boolean |
false |
If destroy the panel which not active, default false. |
diff --git a/docs/examples/_util/motionUtil.ts b/docs/examples/_util/motionUtil.ts
index 802a022a..7163efed 100644
--- a/docs/examples/_util/motionUtil.ts
+++ b/docs/examples/_util/motionUtil.ts
@@ -1,4 +1,8 @@
-import type { CSSMotionProps, MotionEndEventHandler, MotionEventHandler } from 'rc-motion';
+import type {
+ CSSMotionProps,
+ MotionEndEventHandler,
+ MotionEventHandler,
+} from '@rc-component/motion';
const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
const getRealHeight: MotionEventHandler = (node) => ({ height: node.scrollHeight, opacity: 1 });
diff --git a/now.json b/now.json
deleted file mode 100644
index c502a148..00000000
--- a/now.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "version": 2,
- "name": "rc-collapse",
- "builds": [
- {
- "src": "package.json",
- "use": "@now/static-build",
- "config": { "distDir": ".doc" }
- }
- ]
-}
diff --git a/package.json b/package.json
index b349b405..d5512591 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
"compile": "father build && lessc assets/index.less assets/index.css",
"coverage": "rc-test --coverage",
"docs:build": "dumi build",
- "docs:deploy": "npm run docs:build && gh-pages -d .doc",
+ "docs:deploy": "npm run docs:build && gh-pages -d dist",
"lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
"prepare": "husky",
"now-build": "npm run docs:build",
@@ -46,19 +46,21 @@
},
"dependencies": {
"@babel/runtime": "^7.10.1",
+ "@rc-component/motion": "^1.1.4",
"@rc-component/util": "^1.0.1",
- "classnames": "2.x",
- "rc-motion": "^2.3.4"
+ "classnames": "2.x"
},
"devDependencies": {
"@rc-component/father-plugin": "^2.0.1",
+ "@rc-component/np": "^1.0.4",
"@testing-library/jest-dom": "^6.1.4",
- "@testing-library/react": "^14.1.2",
+ "@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^14.5.2",
"@types/classnames": "^2.2.9",
"@types/jest": "^29.4.0",
- "@types/react": "^18.0.0",
- "@types/react-dom": "^18.0.0",
+ "@types/node": "^22.15.18",
+ "@types/react": "^19.1.4",
+ "@types/react-dom": "^19.1.5",
"@umijs/fabric": "^4.0.0",
"dumi": "^2.1.1",
"eslint": "^8.55.0",
@@ -70,15 +72,14 @@
"jest": "^29.1.2",
"less": "^4.2.0",
"lint-staged": "^15.0.2",
- "np": "^9.1.0",
"prettier": "^3.0.3",
"rc-test": "^7.0.14",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
+ "react": "^19.1.0",
+ "react-dom": "^19.1.0",
"typescript": "^5.0.0"
},
"peerDependencies": {
- "react": ">=16.9.0",
- "react-dom": ">=16.9.0"
+ "react": ">=18.0.0",
+ "react-dom": ">=18.0.0"
}
}
diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index e75ec5f8..1b0b0998 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -20,7 +20,7 @@ function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
const Collapse = React.forwardRef((props, ref) => {
const {
prefixCls = 'rc-collapse',
- destroyInactivePanel = false,
+ destroyOnHidden = false,
style,
accordion,
className,
@@ -72,7 +72,7 @@ const Collapse = React.forwardRef((props, ref) =>
openMotion,
expandIcon,
collapsible,
- destroyInactivePanel,
+ destroyOnHidden,
onItemClick,
activeKey,
classNames: customizeClassNames,
diff --git a/src/Panel.tsx b/src/Panel.tsx
index c4633257..f5e7bb20 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -1,5 +1,5 @@
import classNames from 'classnames';
-import CSSMotion from 'rc-motion';
+import CSSMotion from '@rc-component/motion';
import KeyCode from '@rc-component/util/lib/KeyCode';
import React from 'react';
import type { CollapsePanelProps } from './interface';
@@ -23,7 +23,7 @@ const CollapsePanel = React.forwardRef((prop
header,
expandIcon,
openMotion,
- destroyInactivePanel,
+ destroyOnHidden,
children,
...resetProps
} = props;
@@ -104,7 +104,7 @@ const CollapsePanel = React.forwardRef((prop
leavedClassName={`${prefixCls}-panel-hidden`}
{...openMotion}
forceRender={forceRender}
- removeOnLeave={destroyInactivePanel}
+ removeOnLeave={destroyOnHidden}
>
{({ className: motionClassName, style: motionStyle }, motionRef) => {
return (
@@ -117,7 +117,7 @@ const CollapsePanel = React.forwardRef((prop
styles={styles}
isActive={isActive}
forceRender={forceRender}
- role={accordion ? 'tabpanel' : void 0}
+ role={accordion ? 'tabpanel' : undefined}
>
{children}
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index e5fc2fca..f62bd30b 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -4,7 +4,7 @@ import type { CollapsePanelProps } from './interface';
const PanelContent = React.forwardRef<
HTMLDivElement,
- CollapsePanelProps & { children: React.ReactNode }
+ React.PropsWithChildren>
>((props, ref) => {
const {
prefixCls,
diff --git a/src/hooks/useItems.tsx b/src/hooks/useItems.tsx
index 08317aca..4b937a90 100644
--- a/src/hooks/useItems.tsx
+++ b/src/hooks/useItems.tsx
@@ -7,7 +7,7 @@ type Props = Pick<
CollapsePanelProps,
'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon' | 'classNames' | 'styles'
> &
- Pick & {
+ Pick & {
activeKey: React.Key[];
};
@@ -16,7 +16,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
prefixCls,
accordion,
collapsible,
- destroyInactivePanel,
+ destroyOnHidden,
onItemClick,
activeKey,
openMotion,
@@ -32,7 +32,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
key: rawKey,
collapsible: rawCollapsible,
onItemClick: rawOnItemClick,
- destroyInactivePanel: rawDestroyInactivePanel,
+ destroyOnHidden: rawDestroyOnHidden,
...restProps
} = item;
@@ -40,10 +40,12 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
// 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 mergedDestroyOnHidden = rawDestroyOnHidden ?? destroyOnHidden;
const handleItemClick = (value: React.Key) => {
- if (mergeCollapsible === 'disabled') return;
+ if (mergeCollapsible === 'disabled') {
+ return;
+ }
onItemClick(value);
rawOnItemClick?.(value);
};
@@ -70,7 +72,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
header={label}
collapsible={mergeCollapsible}
onItemClick={handleItemClick}
- destroyInactivePanel={mergeDestroyInactivePanel}
+ destroyOnHidden={mergedDestroyOnHidden}
>
{children}
@@ -86,13 +88,15 @@ const getNewChild = (
index: number,
props: Props,
) => {
- if (!child) return null;
+ if (!child) {
+ return null;
+ }
const {
prefixCls,
accordion,
collapsible,
- destroyInactivePanel,
+ destroyOnHidden,
onItemClick,
activeKey,
openMotion,
@@ -106,7 +110,7 @@ const getNewChild = (
const {
header,
headerClass,
- destroyInactivePanel: childDestroyInactivePanel,
+ destroyOnHidden: childDestroyOnHidden,
collapsible: childCollapsible,
onItemClick: childOnItemClick,
} = child.props;
@@ -121,7 +125,9 @@ const getNewChild = (
const mergeCollapsible = childCollapsible ?? collapsible;
const handleItemClick = (value: React.Key) => {
- if (mergeCollapsible === 'disabled') return;
+ if (mergeCollapsible === 'disabled') {
+ return;
+ }
onItemClick(value);
childOnItemClick?.(value);
};
@@ -135,7 +141,7 @@ const getNewChild = (
styles,
isActive,
prefixCls,
- destroyInactivePanel: childDestroyInactivePanel ?? destroyInactivePanel,
+ destroyOnHidden: childDestroyOnHidden ?? destroyOnHidden,
openMotion,
accordion,
children: child.props.children,
@@ -155,7 +161,7 @@ const getNewChild = (
}
});
- return React.cloneElement(child, childProps);
+ return React.cloneElement(child, childProps);
};
function useItems(
@@ -166,8 +172,9 @@ function useItems(
if (Array.isArray(items)) {
return convertItemsToNodes(items, props);
}
-
- return toArray(rawChildren).map((child, index) => getNewChild(child, index, props));
+ return toArray(rawChildren).map((child, index) =>
+ getNewChild(child as React.ReactElement, index, props),
+ );
}
export default useItems;
diff --git a/src/interface.ts b/src/interface.ts
index 123c7935..b420b7ea 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -1,4 +1,4 @@
-import type { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from '@rc-component/motion';
import type * as React from 'react';
export type CollapsibleType = 'header' | 'icon' | 'disabled';
@@ -28,7 +28,7 @@ export interface CollapseProps {
accordion?: boolean;
className?: string;
style?: object;
- destroyInactivePanel?: boolean;
+ destroyOnHidden?: boolean;
expandIcon?: (props: object) => React.ReactNode;
collapsible?: CollapsibleType;
children?: React.ReactNode;
@@ -42,9 +42,10 @@ export interface CollapseProps {
}
export type SemanticName = 'header' | 'title' | 'body' | 'icon';
+
export interface CollapsePanelProps extends React.DOMAttributes {
id?: string;
- header?: string | React.ReactNode;
+ header?: React.ReactNode;
prefixCls?: string;
headerClass?: string;
showArrow?: boolean;
@@ -54,10 +55,10 @@ export interface CollapsePanelProps extends React.DOMAttributes
styles?: Partial>;
isActive?: boolean;
openMotion?: CSSMotionProps;
- destroyInactivePanel?: boolean;
+ destroyOnHidden?: boolean;
accordion?: boolean;
forceRender?: boolean;
- extra?: string | React.ReactNode;
+ extra?: React.ReactNode;
onItemClick?: (panelKey: React.Key) => void;
expandIcon?: (props: object) => React.ReactNode;
panelKey?: React.Key;
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index ff5f7598..f0d81179 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -1,6 +1,6 @@
import type { RenderResult } from '@testing-library/react';
import { fireEvent, render } from '@testing-library/react';
-import KeyCode from 'rc-util/lib/KeyCode';
+import KeyCode from '@rc-component/util/lib/KeyCode';
import React, { Fragment } from 'react';
import Collapse, { Panel } from '../src/index';
import type { CollapseProps, ItemType } from '../src/interface';
@@ -240,7 +240,7 @@ describe('collapse', () => {
it('click should toggle panel state', () => {
const { container } = render(
-
+
first
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 00000000..cc12e405
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,3 @@
+{
+ "framework": "umijs"
+}