refactor: flatten tab panel content structure

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

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>

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

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', () => {

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