refactor: 重构collapse为details实现

assets/index.less

@@ -4,6 +4,11 @@
 
 @import './motion.less';
 
+// ::view-transition-old(root), /* 旧视图*/
+// ::view-transition-new(root) { /* 新视图*/
+//   animation-duration: 0.6s;
+// }
+
 #arrow {
   .common() {
     width: 0;
@@ -35,6 +40,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;
     }

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,10 @@
 import classNames from 'classnames';
-import CSSMotion from '@rc-component/motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React 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,
@@ -33,8 +32,10 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
   const ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
 
   const collapsibleProps = {
-    onClick: () => {
+    onClick: (e: React.MouseEvent) => {
       onItemClick?.(panelKey);
+      e.preventDefault();
+      e.stopPropagation();
     },
     onKeyDown: (e: React.KeyboardEvent) => {
       if (e.key === 'Enter' || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) {
@@ -67,6 +68,8 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
       [`${prefixCls}-item-disabled`]: disabled,
     },
     className,
+    // ? 修改为details实现后动画是作用在details元素上 需要将motionName设置在details上
+    openMotion?.motionName,
   );
 
   const headerClassName = classNames(
@@ -79,16 +82,16 @@ 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 ========================
   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 +101,18 @@ 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}
+      </summary>
+      <PanelContent
+        prefixCls={prefixCls}
+        classNames={customizeClassNames}
+        styles={styles}
+        isActive={isActive}
         forceRender={forceRender}
-        removeOnLeave={destroyOnHidden}
+        role={accordion ? 'tabpanel' : undefined}
       >
-        {({ 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' : undefined}
-            >
-              {children}
-            </PanelContent>
-          );
-        }}
-      </CSSMotion>
-    </div>
+        {children}
+      </PanelContent>
+    </details>
   );
 });
 

src/PanelContent.tsx

@@ -18,13 +18,7 @@ const PanelContent = React.forwardRef<
     styles,
   } = props;
 
-  const [rendered, setRendered] = React.useState(isActive || forceRender);
-
-  React.useEffect(() => {
-    if (forceRender || isActive) {
-      setRendered(true);
-    }
-  }, [forceRender, isActive]);
+  const rendered = isActive || forceRender;
 
   if (!rendered) {
     return null;
@@ -41,7 +35,10 @@ const PanelContent = React.forwardRef<
         },
         className,
       )}
-      style={style}
+      style={{
+        display: isActive ? 'block' : 'none',
+        ...style,
+      }}
       role={role}
     >
       <div

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,16 +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?: 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>
 `;

tests/index.spec.tsx

@@ -85,9 +85,7 @@ describe('collapse', () => {
       expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
       fireEvent.click(header);
       jest.runAllTimers();
-      expect(collapse.container.querySelector('.rc-collapse-panel-inactive')?.innerHTML).toBe(
-        '<div class="rc-collapse-body">second</div>',
-      );
+      expect(collapse.container.querySelector('.rc-collapse-panel-inactive')).toBe(null);
       expect(collapse.container.querySelectorAll('.rc-collapse-panel-active').length).toBeFalsy();
     });
 
@@ -433,9 +431,6 @@ describe('collapse', () => {
     jest.runAllTimers();
 
     expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
-    expect(container.querySelector('.rc-collapse-panel')!.className).not.toContain(
-      'rc-collapse-panel-active',
-    );
   });
 
   describe('wrapped in Fragment', () => {
@@ -510,7 +505,6 @@ describe('collapse', () => {
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
     expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
-    expect(container.querySelector('.rc-collapse-panel')).toHaveClass('rc-collapse-panel-inactive');
   });
 
   describe('prop: collapsible', () => {