fix(theme-classic): allow rendering single tab item (#8593)

facebook · Feb 2, 2023 · 1bff83c · 1bff83c
1 parent 2f02bee
commit 1bff83c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/__tests__/index.test.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/__tests__/index.test.tsx
@@ -187,4 +187,16 @@ describe('Tabs', () => {
       );
     }).not.toThrow();
   });
+
+  it('accepts a single TabItem', () => {
+    expect(() => {
+      renderer.create(
+        <TestProviders>
+          <Tabs>
+            <TabItem value="val1">Val1</TabItem>
+          </Tabs>
+        </TestProviders>,
+      );
+    }).not.toThrow();
+  });
 });
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -109,6 +109,8 @@ function TabContent({
   children,
   selectedValue,
 }: Props & ReturnType<typeof useTabs>) {
+  // eslint-disable-next-line no-param-reassign
+  children = Array.isArray(children) ? children : [children];
   if (lazy) {
     const selectedTabItem = children.find(
       (tabItem) => tabItem.props.value === selectedValue,

diff --git a/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx b/packages/docusaurus-theme-common/src/utils/tabsUtils.tsx
@@ -32,7 +32,9 @@ export interface TabValue {
 export interface TabsProps {
   readonly lazy?: boolean;
   readonly block?: boolean;
-  readonly children: readonly ReactElement<TabItemProps>[];
+  readonly children:
+    | readonly ReactElement<TabItemProps>[]
+    | ReactElement<TabItemProps>;
   readonly defaultValue?: string | null;
   readonly values?: readonly TabValue[];
   readonly groupId?: string;