fix: page crashes if Tabs has single Tab child (#972)

e2e/fixtures/tabs-component/doc/index.mdx

@@ -0,0 +1,16 @@
+import { Tabs, Tab } from 'rspress/theme';
+
+# Hello World
+
+## Tab A
+
+<Tabs tabContainerClassName="tabs-a">
+  <Tab label="label1">content1</Tab>
+</Tabs>
+
+## Tab B
+
+<Tabs tabContainerClassName="tabs-b">
+  <Tab label="label2">content2</Tab>
+  <Tab label="label3">content3</Tab>
+</Tabs>

e2e/fixtures/tabs-component/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@rspress-fixture/rspress-tabs-component",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^14"
+  }
+}

e2e/fixtures/tabs-component/rspress.config.ts

@@ -0,0 +1,6 @@
+import * as path from 'path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+});

e2e/tests/tabs-component.test.ts

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test';
+import path from 'path';
+import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+
+const fixtureDir = path.resolve(__dirname, '../fixtures');
+
+test.describe('tabs-component test', async () => {
+  let appPort;
+  let app;
+
+  test.beforeAll(async () => {
+    const appDir = path.join(fixtureDir, 'tabs-component');
+    appPort = await getPort();
+    app = await runDevCommand(appDir, appPort);
+  });
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('Index page', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`);
+
+    // Tab A
+    const tabA = await page.$('.tabs-a');
+    const contentA = await page.$('.tabs-a + div');
+    const tabAText = await page.evaluate(node => node?.innerHTML, tabA);
+    const contentAText = await page.evaluate(node => node?.innerHTML, contentA);
+    expect(tabAText).toContain('label1');
+    expect(contentAText).toContain('content1');
+
+    // Tab B
+    const tabB = await page.$('.tabs-b');
+    const contentB = await page.$('.tabs-b + div');
+    const tabBText = await page.evaluate(node => node?.innerHTML, tabB);
+    const contentBText = await page.evaluate(node => node?.innerHTML, contentB);
+    expect(tabBText).toContain('label2');
+    expect(contentBText).toContain('content2');
+  });
+});

packages/theme-default/src/components/Tabs/index.tsx

@@ -1,12 +1,14 @@
 import {
-  ComponentPropsWithRef,
+  Children,
   ReactElement,
   ReactNode,
   useContext,
   useState,
   forwardRef,
-  type ForwardRefExoticComponent,
   ForwardedRef,
+  isValidElement,
+  ComponentPropsWithRef,
+  type ForwardRefExoticComponent,
 } from 'react';
 import { TabDataContext } from '../../logic/TabDataContext';
 import styles from './index.module.scss';
@@ -52,13 +54,25 @@ export const Tabs: ForwardRefExoticComponent<TabsProps> = forwardRef(
       tabPosition = 'left',
       tabContainerClassName,
     } = props;
+
     let tabValues = values || [];
+
     if (tabValues.length === 0) {
-      tabValues = (children as ReactElement[]).map(child => ({
-        label: child.props?.label,
-        value: child.props?.value || child.props?.label,
-      }));
+      tabValues = Children.map(children, child => {
+        if (isValidElement(child)) {
+          return {
+            label: child.props?.label,
+            value: child.props?.value || child.props?.label,
+          };
+        }
+
+        return {
+          label: undefined,
+          value: undefined,
+        };
+      });
     }
+
     const { tabData, setTabData } = useContext(TabDataContext);
     let defaultIndex = 0;
     const needSync = groupId && tabData[groupId] !== undefined;
@@ -113,7 +127,7 @@ export const Tabs: ForwardRefExoticComponent<TabsProps> = forwardRef(
             </div>
           ) : null}
         </div>
-        <div>{children[activeIndex]}</div>
+        <div>{Children.toArray(children)[activeIndex]}</div>
       </div>
     );
   },