From 1019581c4986d09c37d83e4fcd39ba7ee718d1a9 Mon Sep 17 00:00:00 2001
From: ZhouWei <1244620067@qq.com>
Date: Mon, 1 Jun 2026 13:52:52 +0800
Subject: [PATCH] refactor: flatten tab panel content structure

Remove the extra content wrapper inside TabPanelList and move the
content-related classes onto each TabPane. This keeps the tab panel DOM
shallower while preserving existing content className, style, position,
and motion class merging behavior.

Update snapshots to reflect the new DOM structure, and switch test act
imports to use @testing-library/react.
---
 src/TabPanelList/index.tsx              | 85 +++++++++++++------------
 tests/__snapshots__/index.test.tsx.snap | 36 ++++-------
 tests/mobile.test.tsx                   |  3 +-
 tests/operation-overflow.test.tsx       |  3 +-
 tests/rtl.test.tsx                      |  3 +-
 5 files changed, 61 insertions(+), 69 deletions(-)

diff --git a/src/TabPanelList/index.tsx b/src/TabPanelList/index.tsx
index 22263540..07f1355a 100644
--- a/src/TabPanelList/index.tsx
+++ b/src/TabPanelList/index.tsx
@@ -25,47 +25,50 @@ const TabPanelList: React.FC<TabPanelListProps> = props => {
 
   return (
     <div className={clsx(`${prefixCls}-content-holder`)}>
-      <div
-        className={clsx(`${prefixCls}-content`, `${prefixCls}-content-${tabPosition}`, {
-          [`${prefixCls}-content-animated`]: tabPaneAnimated,
-        })}
-      >
-        {tabs.map(item => {
-          const {
-            key,
-            forceRender,
-            style: paneStyle,
-            className: paneClassName,
-            destroyOnHidden: itemDestroyOnHidden,
-            ...restTabProps
-          } = item;
-          const active = key === activeKey;
-          return (
-            <CSSMotion
-              key={key}
-              visible={active}
-              forceRender={forceRender}
-              removeOnLeave={!!(destroyOnHidden ?? itemDestroyOnHidden)}
-              leavedClassName={`${tabPanePrefixCls}-hidden`}
-              {...animated.tabPaneMotion}
-            >
-              {({ style: motionStyle, className: motionClassName }, ref) => (
-                <TabPane
-                  {...restTabProps}
-                  prefixCls={tabPanePrefixCls}
-                  id={id}
-                  tabKey={key}
-                  animated={tabPaneAnimated}
-                  active={active}
-                  style={{ ...contentStyle, ...paneStyle, ...motionStyle }}
-                  className={clsx(contentClassName, paneClassName, motionClassName)}
-                  ref={ref}
-                />
-              )}
-            </CSSMotion>
-          );
-        })}
-      </div>
+      {tabs.map(item => {
+        const {
+          key,
+          forceRender,
+          style: paneStyle,
+          className: paneClassName,
+          destroyOnHidden: itemDestroyOnHidden,
+          ...restTabProps
+        } = item;
+        const active = key === activeKey;
+        return (
+          <CSSMotion
+            key={key}
+            visible={active}
+            forceRender={forceRender}
+            removeOnLeave={!!(destroyOnHidden ?? itemDestroyOnHidden)}
+            leavedClassName={`${tabPanePrefixCls}-hidden`}
+            {...animated.tabPaneMotion}
+          >
+            {({ style: motionStyle, className: motionClassName }, ref) => (
+              <TabPane
+                {...restTabProps}
+                prefixCls={tabPanePrefixCls}
+                id={id}
+                tabKey={key}
+                animated={tabPaneAnimated}
+                active={active}
+                style={{ ...contentStyle, ...paneStyle, ...motionStyle }}
+                className={clsx(
+                  `${prefixCls}-content`,
+                  `${prefixCls}-content-${tabPosition}`,
+                  {
+                    [`${prefixCls}-content-animated`]: tabPaneAnimated,
+                  },
+                  contentClassName,
+                  paneClassName,
+                  motionClassName,
+                )}
+                ref={ref}
+              />
+            )}
+          </CSSMotion>
+        );
+      })}
     </div>
   );
 };
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index c4500f4e..b089ce3f 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -86,18 +86,14 @@ exports[`Tabs.Basic Normal 1`] = `
     class="rc-tabs-content-holder"
   >
     <div
-      class="rc-tabs-content rc-tabs-content-top"
+      aria-hidden="false"
+      aria-labelledby="rc-tabs-test-tab-bamboo"
+      class="rc-tabs-tabpane rc-tabs-tabpane-active rc-tabs-content rc-tabs-content-top"
+      id="rc-tabs-test-panel-bamboo"
+      role="tabpanel"
+      tabindex="0"
     >
-      <div
-        aria-hidden="false"
-        aria-labelledby="rc-tabs-test-tab-bamboo"
-        class="rc-tabs-tabpane rc-tabs-tabpane-active"
-        id="rc-tabs-test-panel-bamboo"
-        role="tabpanel"
-        tabindex="0"
-      >
-        Bamboo
-      </div>
+      Bamboo
     </div>
   </div>
 </div>
@@ -159,18 +155,14 @@ exports[`Tabs.Basic Skip invalidate children 1`] = `
     class="rc-tabs-content-holder"
   >
     <div
-      class="rc-tabs-content rc-tabs-content-top"
+      aria-hidden="false"
+      aria-labelledby="rc-tabs-test-tab-light"
+      class="rc-tabs-tabpane rc-tabs-tabpane-active rc-tabs-content rc-tabs-content-top"
+      id="rc-tabs-test-panel-light"
+      role="tabpanel"
+      tabindex="0"
     >
-      <div
-        aria-hidden="false"
-        aria-labelledby="rc-tabs-test-tab-light"
-        class="rc-tabs-tabpane rc-tabs-tabpane-active"
-        id="rc-tabs-test-panel-light"
-        role="tabpanel"
-        tabindex="0"
-      >
-        Light
-      </div>
+      Light
     </div>
   </div>
 </div>
diff --git a/tests/mobile.test.tsx b/tests/mobile.test.tsx
index d8f4a4ef..9f3257cc 100644
--- a/tests/mobile.test.tsx
+++ b/tests/mobile.test.tsx
@@ -1,7 +1,6 @@
-import { render } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 import { spyElementPrototypes } from '@rc-component/util';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import type { TabsProps } from '../src';
 import Tabs from '../src';
 import { btnOffsetPosition, getOffsetSizeFunc, getTransformX } from './common/util';
diff --git a/tests/operation-overflow.test.tsx b/tests/operation-overflow.test.tsx
index e508fd43..2adab3d6 100644
--- a/tests/operation-overflow.test.tsx
+++ b/tests/operation-overflow.test.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-invalid-this */
-import { render } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 import { spyElementPrototypes } from '@rc-component/util';
-import { act } from 'react-dom/test-utils';
 import { getOffsetSizeFunc, getTabs, triggerResize } from './common/util';
 
 describe('Tabs.Operation-Overflow', () => {
diff --git a/tests/rtl.test.tsx b/tests/rtl.test.tsx
index d372055e..044bb95f 100644
--- a/tests/rtl.test.tsx
+++ b/tests/rtl.test.tsx
@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 import { spyElementPrototypes } from '@rc-component/util';
-import { act } from 'react-dom/test-utils';
 import { getOffsetSizeFunc, getTabs, getTransformX, triggerResize } from './common/util';
 
 // Same as `overflow.test.tsx` but use in RTL