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

Author: Josh-Cena

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

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,

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;