@redocly/theme 0.58.0-next.9 → 0.59.0-next.0

package/src/markdoc/components/CodeGroup/CodeGroup.tsx

@@ -5,65 +5,55 @@ import {
   type CodeBlockProps,
 } from '@redocly/theme/components/CodeBlock/CodeBlock';
 import { langToName } from '@redocly/theme/core/utils';
-import { useActiveCodeSnippetName } from '@redocly/theme/core/contexts';
+import { useActiveCodeSnippetId } from '@redocly/theme/core/contexts';
+
+type SnippetData = {
+  name: string;
+  languageName: string;
+  lang: string;
+  props: CodeBlockProps;
+  id: string;
+};
 
 export function CodeGroup(props: React.PropsWithChildren<{ mode?: 'tabs' | 'dropdown' }>) {
   const mode = props.mode || 'tabs';
   const isTabsMode = mode === 'tabs';
 
   const rawSnippets = React.useMemo(
-    () =>
-      React.Children.toArray(props.children).map((child, idx) => {
-        const childProps = child as React.ReactElement<CodeBlockProps>;
-        return {
-          name: getTabName(childProps.props, idx),
-          languageName: langToName(childProps.props.lang || 'Default'),
-          lang: childProps.props.lang || '',
-          props: childProps.props,
-        };
-      }),
+    () => parseSnippetsFromChildren(props.children),
     [props.children],
   );
 
-  const [activeSnippetName, setActiveSnippetName] = useActiveCodeSnippetName(mode);
-
-  const snippets: Record<string, CodeBlockProps> = React.useMemo(
-    () =>
-      Object.fromEntries(
-        rawSnippets.map((snippet) => {
-          const getItemName = (snippet: (typeof rawSnippets)[number]) =>
-            isTabsMode ? snippet?.name : snippet?.languageName || '';
-
-          const name = getItemName(snippet);
-
-          const items = rawSnippets.map((item) => ({
-            name: getItemName(item),
-            lang: item.lang,
-          }));
-          const itemsProps = {
-            items,
-            onChange: (name: string | string[]) => {
-              setActiveSnippetName(name as string);
-            },
-            value: activeSnippetName || getItemName(rawSnippets[0]),
-          };
-          const snippetProps = {
-            ...snippet.props,
-            header: {
-              ...snippet.props.header,
-              title: isTabsMode ? undefined : snippet.name,
-            },
-            ...(isTabsMode ? { tabs: itemsProps } : { dropdown: itemsProps }),
-          };
-
-          return [name, snippetProps];
-        }),
-      ),
-    [rawSnippets, activeSnippetName, isTabsMode, setActiveSnippetName],
-  );
+  const groupId = React.useMemo(() => generateGroupId(rawSnippets, mode), [rawSnippets, mode]);
+
+  const [activeSnippetId, setActiveSnippetId] = useActiveCodeSnippetId(groupId, rawSnippets);
+
+  const snippets = React.useMemo(() => {
+    const items = createItemsFromSnippets(rawSnippets, isTabsMode);
 
-  const firstName = Object.keys(snippets)[0];
-  const activeSnippet = snippets[activeSnippetName] || snippets[firstName];
+    const itemsProps = {
+      items,
+      onChange: (id: string | string[]) => setActiveSnippetId(id as string),
+      value: activeSnippetId,
+    };
+
+    return Object.fromEntries(
+      rawSnippets.map((snippet: SnippetData) => {
+        const snippetProps = {
+          ...snippet.props,
+          header: {
+            ...snippet.props.header,
+            title: isTabsMode ? undefined : snippet.name,
+          },
+          ...(isTabsMode ? { tabs: itemsProps } : { dropdown: itemsProps }),
+        };
+
+        return [snippet.id, snippetProps];
+      }),
+    );
+  }, [rawSnippets, activeSnippetId, isTabsMode, setActiveSnippetId]);
+
+  const activeSnippet = snippets[activeSnippetId];
   if (!activeSnippet) {
     return null;
   }
@@ -71,8 +61,47 @@ export function CodeGroup(props: React.PropsWithChildren<{ mode?: 'tabs' | 'drop
   return <CodeBlockComponent {...activeSnippet} />;
 }
 
+function generateContentHash(content: string): number {
+  let hash = 0;
+  for (let i = 0; i < content.length; i++) {
+    hash = content.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash);
+}
+
+// Generate unique group ID for CodeGroup instance
+// Examples: "dropdown-8901234", "tabs-1234567"
+function generateGroupId(rawSnippets: SnippetData[], mode: string): string {
+  const content = rawSnippets.map((s) => s.id + (s.props.source || '')).join('|') + `|${mode}`;
+  const hash = generateContentHash(content);
+
+  return `${mode}-${hash}`;
+}
+
 function getTabName(props: CodeBlockProps, idx: number): string {
-  return String(
-    props.header?.title || props.file || langToName(props.lang || '') || 'Tab ' + String(idx + 1),
-  );
+  const fallbackName = `Tab ${idx + 1}`;
+  return String(props.header?.title || props.file || langToName(props.lang || '') || fallbackName);
+}
+
+function parseSnippetsFromChildren(children: React.ReactNode): SnippetData[] {
+  return React.Children.toArray(children).map((child, idx) => {
+    const childProps = child as React.ReactElement<CodeBlockProps>;
+    const props = childProps.props;
+
+    return {
+      name: getTabName(props, idx),
+      languageName: String(langToName(props.lang || 'Default') || ''),
+      lang: props.lang || '',
+      props,
+      id: `${props.lang || ''}-${idx}`,
+    };
+  });
+}
+
+function createItemsFromSnippets(snippets: SnippetData[], isTabsMode: boolean) {
+  return snippets.map((snippet) => ({
+    name: isTabsMode ? snippet.name : snippet.languageName || '',
+    lang: snippet.lang,
+    id: snippet.id,
+  }));
 }

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

@@ -34,6 +34,7 @@ export function TabComponent({
     <TabItem data-component-name="Markdoc/Tabs/Tab" size={size} tabIndex={0}>
       <TabButtonLink
         id={`tab-${tabId}`}
+        data-label={label}
         role="tab"
         aria-selected="false"
         aria-controls={`panel-${tabId}`}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
@@ -9,41 +9,43 @@ import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { useTabs } from '@redocly/theme/core/hooks';
+import { getTabId } from '@redocly/theme/core/utils';
 
 type TabListProps = {
   childrenArray: React.ReactElement<TabItemProps>[];
   size: TabsSize;
-  overflowTabs: number[];
-  visibleTabs: number[];
-  setTabRef: (element: HTMLButtonElement | null, index: number) => void;
-  onTabClick: (labelOrIndex: string | number) => void;
-  handleKeyboard: (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => void;
-  getTabId: (label: string, index: number) => string;
   activeTab: string;
-  isAnimating: boolean;
-  highlightStyle: { left: number; width: number };
-  allTabsHidden: boolean;
-  tabsContainerRef: React.RefObject<HTMLUListElement | null>;
+  onTabChange: (tab: string) => void;
 };
 
 export function TabList({
   childrenArray,
   size,
-  overflowTabs,
-  visibleTabs,
-  setTabRef,
-  onTabClick,
-  handleKeyboard,
-  getTabId,
   activeTab,
-  isAnimating,
-  highlightStyle,
-  allTabsHidden,
-  tabsContainerRef,
+  onTabChange,
 }: TabListProps): JSX.Element {
+  const tabsContainerRef = useRef<HTMLUListElement>(null);
+
+  const { allTabsHidden, overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef } =
+    useTabs({
+      activeTab,
+      onTabChange,
+      containerRef: tabsContainerRef,
+      totalTabs: childrenArray.length,
+    });
+
+  const { highlightStyle } = useHighlightBarAnimation({
+    activeTab,
+    childrenArray,
+    overflowTabs,
+    tabsContainerRef,
+    visibleTabs,
+  });
+
   return (
-    <TabListContainer role="tablist" ref={tabsContainerRef} data-animating={isAnimating}>
-      <HighlightBar size={size} style={{ left: highlightStyle.left, width: highlightStyle.width }}>
+    <TabListContainer role="tablist" ref={tabsContainerRef}>
+      <HighlightBar size={size} style={highlightStyle}>
         <div />
       </HighlightBar>
       {childrenArray.map((child, index) => {
@@ -58,13 +60,7 @@ export function TabList({
             icon={icon}
             size={size}
             disabled={child.props.disable}
-            setRef={(el: HTMLButtonElement | null) => {
-              setTabRef(el, index);
-              if (el) {
-                el.setAttribute('data-label', label);
-                el.setAttribute('data-animating', isAnimating.toString());
-              }
-            }}
+            setRef={(el: HTMLButtonElement | null) => setTabRef(el, index)}
             onKeyDown={(event) => handleKeyboard(event, index)}
             onClick={() => {
               child.props.onClick?.();
@@ -104,6 +100,7 @@ export function TabList({
                     key={`more-${tabId}`}
                     active={activeTab === label}
                     onAction={() => {
+                      childrenArray[index].props.onClick?.();
                       onTabClick(index);
                     }}
                     disabled={childrenArray[index].props.disable}
@@ -120,6 +117,64 @@ export function TabList({
   );
 }
 
+type UseHighlightBarAnimationProps = {
+  childrenArray: React.ReactElement<TabItemProps>[];
+  activeTab: string;
+  tabsContainerRef: React.RefObject<HTMLElement | null>;
+  visibleTabs: number[];
+  overflowTabs: number[];
+};
+const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
+  const { childrenArray, activeTab, tabsContainerRef, visibleTabs, overflowTabs } = props;
+
+  const [highlightStyle, setHighlightStyle] = React.useState<{ left: number; width: number }>({
+    left: 0,
+    width: 0,
+  });
+
+  useEffect(() => {
+    const activeIndex = childrenArray.findIndex((child) => child.props.label === activeTab);
+    const container = tabsContainerRef.current;
+
+    if (!container || activeIndex === -1) {
+      setHighlightStyle({ left: 0, width: 0 });
+      return;
+    }
+
+    const activeTabElement: HTMLElement | null = container.querySelector(
+      `[data-label="${activeTab}"]`,
+    );
+    if (!activeTabElement) return;
+
+    container.querySelectorAll('[data-label]').forEach((el) => {
+      el.classList.remove('active');
+    });
+
+    const { offsetLeft, offsetWidth } = activeTabElement;
+
+    if (visibleTabs.includes(activeIndex)) {
+      activeTabElement.classList.add('active');
+      setHighlightStyle({ left: offsetLeft, width: offsetWidth });
+      return;
+    }
+
+    if (overflowTabs.includes(activeIndex)) {
+      const moreButton = container.querySelector('button');
+      if (!moreButton) return;
+
+      const moreButtonRect = moreButton.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      setHighlightStyle({
+        left: moreButtonRect.left - containerRect.left,
+        width: moreButtonRect.width,
+      });
+      return;
+    }
+  }, [activeTab, childrenArray, visibleTabs, overflowTabs, tabsContainerRef]);
+
+  return { highlightStyle };
+};
+
 export const TabListContainer = styled.ul`
   position: relative;
   display: flex;

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

@@ -1,10 +1,11 @@
-import React, { useRef, useState, useEffect } from 'react';
-import styled, { css } from 'styled-components';
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import { useTabs } from '@redocly/theme/core/hooks';
+import { useActiveTab } from '@redocly/theme/core/hooks';
 import { TabList } from '@redocly/theme/markdoc/components/Tabs/TabList';
+import { getTabId } from '@redocly/theme/core/utils';
 
 export enum TabsSize {
   SMALL = 'small',
@@ -20,140 +21,38 @@ export type TabItemProps = {
 };
 
 type TabsProps = {
+  id?: string;
   children: React.ReactElement<TabItemProps>[];
   className?: string;
   size: TabsSize;
-  forceReady?: boolean;
   initialTab?: string;
 };
 
 export function Tabs({
+  id,
   children,
   className,
   size,
-  forceReady = false,
   initialTab: propInitialTab,
 }: TabsProps): JSX.Element {
   const [childrenArray, setChildrenArray] = useState<React.ReactElement<TabItemProps>[]>(
     React.Children.toArray(children) as React.ReactElement<TabItemProps>[],
   );
 
+  const initialTab = propInitialTab ?? childrenArray[0]?.props.label ?? '';
+  const { activeTab, setActiveTab } = useActiveTab({ tabsId: id, initialTab });
+
   useEffect(() => {
     setChildrenArray(React.Children.toArray(children) as React.ReactElement<TabItemProps>[]);
   }, [children]);
-  const tabsContainerRef = useRef<HTMLUListElement>(null);
-  const [isAnimating, setIsAnimating] = useState<boolean>(false);
-  const defaultInitialTab = childrenArray[0]?.props.label ?? '';
-  const initialTab = propInitialTab ?? defaultInitialTab;
-  const {
-    activeTab,
-    setTabRef,
-    onTabClick,
-    handleKeyboard,
-    getTabId,
-    visibleTabs,
-    overflowTabs,
-    ready,
-    allTabsHidden,
-  } = useTabs({
-    initialTab,
-    totalTabs: childrenArray.length,
-    containerRef: tabsContainerRef,
-  });
-
-  const [prevTab, setPrevTab] = React.useState(initialTab);
-  const [highlightStyle, setHighlightStyle] = React.useState<{ left: number; width: number }>({
-    left: 0,
-    width: 0,
-  });
-
-  useEffect(() => {
-    setPrevTab(activeTab);
-    setIsAnimating(true);
-
-    const activeIndex = childrenArray.findIndex((child) => child.props.label === activeTab);
-    const container = tabsContainerRef.current;
-
-    if (container) {
-      container.querySelectorAll('[data-label]').forEach((el) => {
-        el.classList.remove('active');
-      });
-
-      container.getBoundingClientRect();
-
-      requestAnimationFrame(() => {
-        if (activeIndex >= 0) {
-          let activeTabElement: HTMLElement | null = null;
-          let startPosition = { left: 0, width: 0 };
-
-          if (visibleTabs.includes(activeIndex)) {
-            activeTabElement = container.querySelector(
-              `[data-label="${activeTab}"]`,
-            ) as HTMLElement;
-          } else if (overflowTabs.includes(activeIndex)) {
-            const moreButton = container.querySelector('button') as HTMLElement;
-            if (moreButton) {
-              const moreButtonRect = moreButton.getBoundingClientRect();
-              const containerRect = container.getBoundingClientRect();
-              startPosition = {
-                left: moreButtonRect.left - containerRect.left,
-                width: moreButtonRect.width,
-              };
-            }
-          }
-
-          if (activeTabElement) {
-            const { offsetLeft, offsetWidth } = activeTabElement;
-
-            if (overflowTabs.includes(activeIndex)) {
-              setHighlightStyle(startPosition);
-              requestAnimationFrame(() => {
-                setHighlightStyle({ left: offsetLeft, width: offsetWidth });
-              });
-            } else {
-              setHighlightStyle({ left: offsetLeft, width: offsetWidth });
-            }
-
-            if (visibleTabs.includes(activeIndex)) {
-              activeTabElement?.classList.add('active');
-            }
-
-            return () => {
-              container.querySelectorAll('[data-label]').forEach((el) => {
-                el.classList.remove('active');
-              });
-            };
-          }
-        }
-        setHighlightStyle({ left: 0, width: 0 });
-        setIsAnimating(false);
-      });
-    } else {
-      setHighlightStyle({ left: 0, width: 0 });
-      setIsAnimating(false);
-    }
-  }, [activeTab, prevTab, childrenArray, visibleTabs, overflowTabs]);
 
   return (
-    <TabsContainer
-      data-component-name="Markdoc/Tabs/Tabs"
-      className={className}
-      isReady={ready || forceReady}
-    >
+    <TabsContainer data-component-name="Markdoc/Tabs/Tabs" className={className} key={id}>
       <TabList
         size={size}
         childrenArray={childrenArray}
-        overflowTabs={overflowTabs}
-        setTabRef={setTabRef}
-        onTabClick={onTabClick}
-        handleKeyboard={handleKeyboard}
-        getTabId={getTabId}
         activeTab={activeTab}
-        isAnimating={isAnimating}
-        highlightStyle={highlightStyle}
-        visibleTabs={visibleTabs}
-        allTabsHidden={allTabsHidden}
-        tabsContainerRef={tabsContainerRef}
+        onTabChange={setActiveTab}
       />
       {childrenArray.map((child, index) => {
         const { label } = child.props;
@@ -173,8 +72,7 @@ export function Tabs({
     </TabsContainer>
   );
 }
-
-const TabsContainer = styled.div<{ isReady: boolean }>`
+const TabsContainer = styled.div`
   position: relative;
   color: var(--md-tabs-container-text-color);
   font-size: var(--md-tabs-container-font-size);
@@ -186,17 +84,6 @@ const TabsContainer = styled.div<{ isReady: boolean }>`
   padding: var(--md-tabs-container-padding);
   border: var(--md-tabs-container-border);
 
-  ${({ isReady }) =>
-    !isReady
-      ? css`
-          visibility: hidden;
-          overflow: hidden;
-        `
-      : css`
-          visibility: visible;
-          overflow: visible;
-        `}
-
   ol[class^='Tabs__TabList'] {
     margin: 0;
     padding: 0;

package/src/markdoc/tags/tabs.ts

@@ -22,6 +22,11 @@ export const tabs: MarkdocSchemaWrapper = {
       return new markdoc.Tag('Tabs', attributes, tabsContent);
     },
     attributes: {
+      /*
+        A unique persistent identifier assigned to a component.
+        This value is used as a key for the query parameter that stores the active tab to enable deep linking.
+      */
+      id: { type: String },
       size: { type: String, matches: ['small', 'medium'], default: 'medium' },
     },
   },