@redocly/theme 0.66.0 → 0.67.0-next.1

package/src/markdoc/components/Tabs/Tabs.tsx

@@ -1,26 +1,24 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { isValidElement, useEffect, useRef, useState } from 'react';
 import { useInRouterContext } from 'react-router-dom';
 import styled from 'styled-components';
 
-import type { JSX } from 'react';
+import type { JSX, ReactElement, ReactNode } from 'react';
 
 import { useActiveTab } from '@redocly/theme/core/hooks';
+import {
+  TabItemFragment,
+  type TabItemProps,
+} from '@redocly/theme/markdoc/components/Tabs/TabItemFragment';
 import { TabList } from '@redocly/theme/markdoc/components/Tabs/TabList';
 import { getTabId } from '@redocly/theme/core/utils';
 
+export type { TabItemProps } from '@redocly/theme/markdoc/components/Tabs/TabItemFragment';
+
 export enum TabsSize {
   SMALL = 'small',
   MEDIUM = 'medium',
 }
 
-export type TabItemProps = {
-  label: string;
-  disable?: boolean;
-  onClick?: () => void;
-  children: React.ReactNode;
-  icon?: React.ReactNode | string;
-};
-
 type TabsProps = {
   id?: string;
   children: React.ReactElement<TabItemProps>[];
@@ -55,14 +53,17 @@ export function Tabs({
   size,
   initialTab: propInitialTab,
   activeTab: controlledActiveTab,
-}: TabsProps): JSX.Element {
-  const childrenArray = React.Children.toArray(children) as React.ReactElement<TabItemProps>[];
+}: TabsProps): JSX.Element | null {
+  const inRouter = useInRouterContext();
+  const childrenArray = React.Children.toArray(children).filter(isTabItemFragment);
   const containerRef = useRef<HTMLUListElement | null>(null);
 
-  const initialTab = propInitialTab ?? childrenArray[0]?.props.label ?? '';
-  const labelsHash = childrenArray.map((c) => c.props.label).join('|');
+  if (childrenArray.length === 0) {
+    return null;
+  }
 
-  const inRouter = useInRouterContext();
+  const initialTab = propInitialTab ?? childrenArray[0].props.label;
+  const labelsHash = childrenArray.map((c) => c.props.label).join('|');
 
   return (
     <TabsView
@@ -127,6 +128,11 @@ function TabsView({
   );
 }
 
+function isTabItemFragment(node: ReactNode): node is ReactElement<TabItemProps> {
+  if (!isValidElement(node)) return false;
+  return node.type === TabItemFragment;
+}
+
 /**
  * Validates that the active tab exists in children and resets to initial tab if not found.
  * Ensures tab state remains consistent when tab structure changes.

package/src/markdoc/components/default.ts

@@ -4,6 +4,7 @@ export * from '@redocly/theme/markdoc/components/MarkdocExample/MarkdocExample';
 export * from '@redocly/theme/markdoc/components/Heading/Heading';
 export * from '@redocly/theme/markdoc/components/Diagram/Diagram';
 export * from '@redocly/theme/markdoc/components/HtmlBlock/HtmlBlock';
+export * from '@redocly/theme/markdoc/components/Tabs/TabItemFragment';
 export * from '@redocly/theme/markdoc/components/Tabs/Tab';
 export * from '@redocly/theme/markdoc/components/Tabs/TabList';
 export * from '@redocly/theme/markdoc/components/Tabs/Tabs';

package/src/markdoc/tags/tab.ts

@@ -7,7 +7,7 @@ export const tab: MarkdocSchemaWrapper = {
       disable: { type: Boolean, default: false },
       icon: { type: String, resolver: 'relativeOrCdnIcon' },
     },
-    render: 'div',
+    render: 'TabItemFragment',
   },
   tagName: 'tab',
 };

package/src/markdoc/tags/tabs.ts

@@ -14,7 +14,7 @@ export const tabs: MarkdocSchemaWrapper = {
         if (isTag(child) && child?.name === 'CodeBlock') {
           const key = child.attributes['data-language'] || 'default';
           const label = child.attributes['data-label'] || key;
-          return new markdoc.Tag('div', { label, key }, [child]);
+          return new markdoc.Tag('TabItemFragment', { label, key }, [child]);
         }
         return child;
       });