@redocly/theme 0.67.0-next.0 → 0.67.0-next.2

package/src/markdoc/components/Image/Image.tsx

@@ -9,7 +9,7 @@ type MarkdocImageProps = React.PropsWithChildren<ImageProps> & {
 export function Image(props: MarkdocImageProps) {
   const { align, ...rest } = props;
   return align ? (
-    <ImageWrapper align={align}>
+    <ImageWrapper $align={align}>
       <ImageComponent {...rest} />
     </ImageWrapper>
   ) : (
@@ -17,13 +17,13 @@ export function Image(props: MarkdocImageProps) {
   );
 }
 
-const ImageWrapper = styled.div<{ align?: MarkdocImageProps['align'] }>`
-  text-align: ${(props) => props.align || 'initial'};
+const ImageWrapper = styled.div<{ $align?: MarkdocImageProps['align'] }>`
+  text-align: ${(props) => props.$align || 'initial'};
 
   img {
     display: block;
     ${(props) => {
-      switch (props.align) {
+      switch (props.$align) {
         case 'left':
           return 'margin-right: auto; margin-left: 0;';
         case 'right':

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import type { JSX, PropsWithChildren } from 'react';
+
+// Below props are used by the TabList component to render tab labels
+export type TabItemProps = PropsWithChildren<{
+  label: string;
+  disable?: boolean;
+  onClick?: () => void;
+  icon?: React.ReactNode | string;
+}>;
+
+export function TabItemFragment({ children }: TabItemProps): JSX.Element {
+  return <div>{children}</div>;
+}

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

@@ -2,9 +2,10 @@ import React, { useState, useRef, useEffect, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
+import type { TabItemProps } from '@redocly/theme/markdoc/components/Tabs/TabItemFragment';
 
 import { Tab } from '@redocly/theme/markdoc/components/Tabs/Tab';
-import { TabItemProps, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
+import { TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
@@ -198,7 +199,7 @@ export function TabList({
 
   return (
     <TabListContainer role="tablist" ref={containerRef}>
-      <HighlightBar size={size} style={highlightStyle}>
+      <HighlightBar $size={size} style={highlightStyle}>
         <div />
       </HighlightBar>
 
@@ -359,7 +360,9 @@ export const TabListContainer = styled.ul`
   }
 `;
 
-export const TabItem = styled.li<{ active?: boolean; size: TabsSize; tabIndex?: number }>`
+export const TabItem = styled.li.withConfig({
+  shouldForwardProp: (prop) => !['active', 'size'].includes(prop),
+})<{ tabIndex?: number; className?: string; active?: boolean; size: TabsSize }>`
   display: inline-flex;
   list-style: none;
   cursor: pointer;
@@ -449,12 +452,12 @@ const FixedPositionDropdown = styled(Dropdown)`
   }
 `;
 
-const HighlightBar = styled.div<{ size: TabsSize }>`
+const HighlightBar = styled.div<{ $size: TabsSize }>`
   position: absolute;
   top: 0;
   bottom: 0;
   border: solid var(--md-tabs-active-tab-border-color);
-  border-width: var(--md-tabs-${({ size }) => size}-active-tab-border-width);
+  border-width: var(--md-tabs-${({ $size }) => $size}-active-tab-border-width);
   transition:
     left 300ms ease-in-out,
     width 300ms ease-in-out;
@@ -465,7 +468,7 @@ const HighlightBar = styled.div<{ size: TabsSize }>`
     width: 100%;
     height: 100%;
     background-color: var(--md-tabs-active-tab-bg-color);
-    border-radius: var(--md-tabs-${({ size }) => size}-active-tab-border-radius);
+    border-radius: var(--md-tabs-${({ $size }) => $size}-active-tab-border-radius);
   }
 `;
 

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