fix: 解决冲突

Author: IVLIU

.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,
 });

.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'

README.md

@@ -78,7 +78,7 @@ ReactDOM.render(App, container);
           <td>default active key</td>
       </tr>
       <tr>
-          <td>destroyInactivePanel</td>
+          <td>destroyOnHidden</td>
           <td>Boolean</td>
           <th>false</th>
           <td>If destroy the panel which not active, default false. </td>

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 });

now.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/collapse",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "rc-collapse ui component for react",
   "keywords": [
     "react",
@@ -31,11 +31,11 @@
     "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",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
+    "prepublishOnly": "npm run compile && rc-np",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "postpublish": "npm run docs:deploy",
     "start": "dumi dev",
@@ -46,20 +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.3",
+    "@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",
@@ -71,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"
   }
 }

package.json

@@ -20,7 +20,7 @@ function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
 const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {
   const {
     prefixCls = 'rc-collapse',
-    destroyInactivePanel = false,
+    destroyOnHidden = false,
     style,
     accordion,
     className,
@@ -76,7 +76,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     openMotion,
     expandIcon,
     collapsible,
-    destroyInactivePanel,
+    destroyOnHidden,
     onItemClick,
     activeKey,
     classNames: customizeClassNames,

src/Collapse.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, { useMemo } from 'react';
 import type { CollapsePanelProps } from './interface';
@@ -23,7 +23,7 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
     header,
     expandIcon,
     openMotion,
-    destroyInactivePanel,
+    destroyOnHidden,
     children,
     ...resetProps
   } = props;
@@ -104,7 +104,7 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
     options: Partial<{
       motionClassName: string;
       style: React.CSSProperties;
-      motionRef: (node: HTMLDivElement) => void;
+      motionRef: React.Ref<any>;
     }>,
   ) => {
     const { motionClassName, style, motionRef } = options;
@@ -131,7 +131,7 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
       leavedClassName={leavedClassName}
       {...openMotion}
       forceRender={forceRender}
-      removeOnLeave={destroyInactivePanel}
+      removeOnLeave={destroyOnHidden}
     >
       {({ className: motionClassName, style }, motionRef) =>
         createPanelContent({
@@ -147,11 +147,11 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
   if (supportsDetailsContentSelector) {
     if (isActive) {
       detailsChildren = createPanelContent({});
-    } else if (!destroyInactivePanel && leavedClassName) {
+    } else if (!destroyOnHidden && leavedClassName) {
       detailsChildren = createPanelContent({
         motionClassName: leavedClassName,
       });
-    } else if (forceRender || (!destroyInactivePanel && !leavedClassName)) {
+    } else if (forceRender || (!destroyOnHidden && !leavedClassName)) {
       detailsChildren = createPanelContent({
         style: { display: 'none' },
       });

src/Panel.tsx

@@ -4,7 +4,7 @@ import type { CollapsePanelProps } from './interface';
 
 const PanelContent = React.forwardRef<
   HTMLDivElement,
-  CollapsePanelProps & { children: React.ReactNode }
+  React.PropsWithChildren<Readonly<CollapsePanelProps>>
 >((props, ref) => {
   const {
     prefixCls,

src/PanelContent.tsx

@@ -7,7 +7,7 @@ type Props = Pick<
   CollapsePanelProps,
   'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon' | 'classNames' | 'styles'
 > &
-  Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyInactivePanel'> & {
+  Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyOnHidden'> & {
     activeKey: React.Key[];
   };
 
@@ -16,7 +16,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
     prefixCls,
     accordion,
     collapsible,
-    destroyInactivePanel,
+    destroyOnHidden,
     onItemClick,
     activeKey,
     openMotion,
@@ -32,18 +32,20 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
       key: rawKey,
       collapsible: rawCollapsible,
       onItemClick: rawOnItemClick,
-      destroyInactivePanel: rawDestroyInactivePanel,
+      destroyOnHidden: rawDestroyOnHidden,
       ...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 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}
       </CollapsePanel>
@@ -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<CollapsePanelProps>(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<CollapsePanelProps>, index, props),
+  );
 }
 
 export default useItems;