@redocly/theme 0.58.0-next.8 → 0.58.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/TabList.tsx

@@ -104,6 +104,7 @@ export function TabList({
                     key={`more-${tabId}`}
                     active={activeTab === label}
                     onAction={() => {
+                      childrenArray[index].props.onClick?.();
                       onTabClick(index);
                     }}
                     disabled={childrenArray[index].props.disable}