fix: 移除rc-motion & 修复用例错误

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,7 +1,6 @@
 import classNames from 'classnames';
-import CSSMotion from 'rc-motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
-import React, { useMemo } from 'react';
+import React from 'react';
 import type { CollapsePanelProps } from './interface';
 import PanelContent from './PanelContent';
 
@@ -23,7 +22,7 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
     header,
     expandIcon,
     openMotion,
-    destroyInactivePanel,
+    destroyOnHidden,
     children,
     ...resetProps
   } = props;
@@ -32,15 +31,6 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
 
   const ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
 
-  // ? 用于判断浏览器是否支持::details-content 否则使用CSSMotion
-  const supportsDetailsContentSelector = useMemo(
-    () =>
-      typeof document !== 'undefined' && typeof document.createElement === 'function'
-        ? CSS.supports('selector(details::details-content)')
-        : false,
-    [],
-  );
-
   const collapsibleProps = {
     onClick: (e: React.MouseEvent) => {
       onItemClick?.(panelKey);
@@ -78,7 +68,7 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
     },
     className,
     // ? 修改为details实现后动画是作用在details元素上 需要将motionName设置在details上
-    supportsDetailsContentSelector && openMotion?.motionName,
+    openMotion?.motionName,
   );
 
   const headerClassName = classNames(
@@ -98,68 +88,6 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
   };
 
   // ======================== Render ========================
-
-  const leavedClassName = `${prefixCls}-panel-hidden`;
-  const createPanelContent = (
-    props: Partial<{
-      className: string;
-      style: React.CSSProperties;
-      motionRef: (node: HTMLDivElement) => void;
-    }>,
-  ) => {
-    const { className, style, motionRef } = props;
-
-    return (
-      <PanelContent
-        ref={motionRef}
-        prefixCls={prefixCls}
-        className={className}
-        classNames={customizeClassNames}
-        style={style}
-        styles={styles}
-        isActive={isActive}
-        forceRender={forceRender}
-        role={accordion ? 'tabpanel' : void 0}
-      >
-        {children}
-      </PanelContent>
-    );
-  };
-  let detailsChildren = (
-    <CSSMotion
-      visible={isActive}
-      leavedClassName={leavedClassName}
-      {...openMotion}
-      forceRender={forceRender}
-      removeOnLeave={destroyInactivePanel}
-    >
-      {({ className, style }, motionRef) =>
-        createPanelContent({
-          className,
-          style,
-          motionRef,
-        })
-      }
-    </CSSMotion>
-  );
-
-  // ? 模拟CSSMotion子元素生命周期管理
-  if (supportsDetailsContentSelector) {
-    if (isActive) {
-      detailsChildren = createPanelContent({});
-    } else if (!destroyInactivePanel && leavedClassName) {
-      detailsChildren = createPanelContent({
-        className: leavedClassName,
-      });
-    } else if (forceRender || (!destroyInactivePanel && !leavedClassName)) {
-      detailsChildren = createPanelContent({
-        style: { display: 'none' },
-      });
-    } else {
-      detailsChildren = null;
-    }
-  }
-
   return (
     <details {...resetProps} ref={ref} className={collapsePanelClassNames} open={isActive}>
       <summary {...headerProps}>
@@ -173,7 +101,16 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
         </span>
         {ifExtraExist && <div className={`${prefixCls}-extra`}>{extra}</div>}
       </summary>
-      {detailsChildren}
+      <PanelContent
+        prefixCls={prefixCls}
+        classNames={customizeClassNames}
+        styles={styles}
+        isActive={isActive}
+        forceRender={forceRender}
+        role={accordion ? 'tabpanel' : undefined}
+      >
+        {children}
+      </PanelContent>
     </details>
   );
 });

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,
@@ -35,7 +35,10 @@ const PanelContent = React.forwardRef<
         },
         className,
       )}
-      style={style}
+      style={{
+        display: isActive ? 'block' : 'none',
+        ...style,
+      }}
       role={role}
     >
       <div