refactor: 重构collapse为details实现

.gitignore

@@ -28,6 +28,7 @@ coverage
 es
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 .storybook
 .doc
 

assets/index.less

@@ -35,6 +35,20 @@
 
   & > &-item {
     border-top: @borderStyle;
+    list-style-position: outside;
+    interpolate-size: allow-keywords;
+    overflow: hidden;
+
+    &::details-content {
+      block-size: 0;
+      transition: block-size 0.6s, content-visibility 0.6s;
+      transition-behavior: allow-discrete;
+    }
+
+    &[open]::details-content {
+      block-size: auto;
+    }
+
     &:first-child {
       border-top: none;
     }

package.json

@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",
+    "@rc-component/np": "^1.0.3",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",

src/Collapse.tsx

@@ -46,18 +46,22 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
   });
 
   const onItemClick = (key: React.Key) =>
-    setActiveKey(() => {
-      if (accordion) {
-        return activeKey[0] === key ? [] : [key];
-      }
+    // ? 用于解决react状态与details[open]状态不一致的问题
+    // ? 具体参考issue https://github.com/facebook/react/issues/15486
+    React.startTransition(() => {
+      setActiveKey(() => {
+        if (accordion) {
+          return activeKey[0] === key ? [] : [key];
+        }
 
-      const index = activeKey.indexOf(key);
-      const isActive = index > -1;
-      if (isActive) {
-        return activeKey.filter((item) => item !== key);
-      }
+        const index = activeKey.indexOf(key);
+        const isActive = index > -1;
+        if (isActive) {
+          return activeKey.filter((item) => item !== key);
+        }
 
-      return [...activeKey, key];
+        return [...activeKey, key];
+      });
     });
 
   // ======================== Children ========================

src/Panel.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { CollapsePanelProps } from './interface';
 import PanelContent from './PanelContent';
 
-const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((props, ref) => {
+const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((props, ref) => {
   const {
     showArrow = true,
     headerClass,
@@ -32,9 +32,19 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
 
   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: () => {
+    onClick: (e: React.MouseEvent) => {
       onItemClick?.(panelKey);
+      e.stopPropagation();
     },
     onKeyDown: (e: React.KeyboardEvent) => {
       if (e.key === 'Enter' || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) {
@@ -67,6 +77,8 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
       [`${prefixCls}-item-disabled`]: disabled,
     },
     className,
+    // ? 修改为details实现后动画是作用在details元素上 需要将motionName设置在details上
+    supportsDetailsContentSelector && openMotion?.motionName,
   );
 
   const headerClassName = classNames(
@@ -79,16 +91,78 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
   );
 
   // ======================== HeaderProps ========================
-  const headerProps: React.HTMLAttributes<HTMLDivElement> = {
+  const headerProps: React.HTMLAttributes<HTMLElement> = {
     className: headerClassName,
     style: styles?.header,
     ...(['header', 'icon'].includes(collapsible) ? {} : collapsibleProps),
   };
 
   // ======================== 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 (
-    <div {...resetProps} ref={ref} className={collapsePanelClassNames}>
-      <div {...headerProps}>
+    <details {...resetProps} ref={ref} className={collapsePanelClassNames} open={isActive}>
+      <summary {...headerProps}>
         {showArrow && iconNode}
         <span
           className={classNames(`${prefixCls}-title`, customizeClassNames?.title)}
@@ -98,33 +172,9 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
           {header}
         </span>
         {ifExtraExist && <div className={`${prefixCls}-extra`}>{extra}</div>}
-      </div>
-      <CSSMotion
-        visible={isActive}
-        leavedClassName={`${prefixCls}-panel-hidden`}
-        {...openMotion}
-        forceRender={forceRender}
-        removeOnLeave={destroyInactivePanel}
-      >
-        {({ className: motionClassName, style: motionStyle }, motionRef) => {
-          return (
-            <PanelContent
-              ref={motionRef}
-              prefixCls={prefixCls}
-              className={motionClassName}
-              classNames={customizeClassNames}
-              style={motionStyle}
-              styles={styles}
-              isActive={isActive}
-              forceRender={forceRender}
-              role={accordion ? 'tabpanel' : void 0}
-            >
-              {children}
-            </PanelContent>
-          );
-        }}
-      </CSSMotion>
-    </div>
+      </summary>
+      {detailsChildren}
+    </details>
   );
 });
 

src/interface.ts

@@ -16,7 +16,7 @@ export interface ItemType
   > {
   key?: CollapsePanelProps['panelKey'];
   label?: CollapsePanelProps['header'];
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.RefObject<HTMLDetailsElement>;
 }
 
 export interface CollapseProps {
@@ -42,15 +42,15 @@ export interface CollapseProps {
 }
 
 export type SemanticName = 'header' | 'title' | 'body' | 'icon';
-export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
+export interface CollapsePanelProps extends React.DOMAttributes<HTMLDetailsElement> {
   id?: string;
   header?: string | React.ReactNode;
   prefixCls?: string;
   headerClass?: string;
   showArrow?: boolean;
   className?: string;
   classNames?: Partial<Record<SemanticName, string>>;
-  style?: object;
+  style?: React.CSSProperties;
   styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   isActive?: boolean;
   openMotion?: CSSMotionProps;

tests/__snapshots__/index.spec.tsx.snap

@@ -4,10 +4,10 @@ exports[`collapse props items should work with nested 1`] = `
 <div
   class="rc-collapse"
 >
-  <div
+  <details
     class="rc-collapse-item rc-collapse-item-disabled"
   >
-    <div
+    <summary
       aria-disabled="true"
       aria-expanded="false"
       class="rc-collapse-header rc-collapse-collapsible-disabled"
@@ -26,12 +26,12 @@ exports[`collapse props items should work with nested 1`] = `
       >
         collapse 1
       </span>
-    </div>
-  </div>
-  <div
+    </summary>
+  </details>
+  <details
     class="rc-collapse-item"
   >
-    <div
+    <summary
       aria-disabled="false"
       aria-expanded="false"
       class="rc-collapse-header"
@@ -57,12 +57,12 @@ exports[`collapse props items should work with nested 1`] = `
           ExtraSpan
         </span>
       </div>
-    </div>
-  </div>
-  <div
+    </summary>
+  </details>
+  <details
     class="rc-collapse-item important"
   >
-    <div
+    <summary
       aria-disabled="false"
       aria-expanded="false"
       class="rc-collapse-header"
@@ -81,12 +81,12 @@ exports[`collapse props items should work with nested 1`] = `
       >
         collapse 3
       </span>
-    </div>
-  </div>
-  <div
+    </summary>
+  </details>
+  <details
     class="rc-collapse-item"
   >
-    <div
+    <summary
       aria-disabled="false"
       aria-expanded="false"
       class="rc-collapse-header"
@@ -105,7 +105,7 @@ exports[`collapse props items should work with nested 1`] = `
       >
         title 3
       </span>
-    </div>
-  </div>
+    </summary>
+  </details>
 </div>
 `;