@redocly/theme 0.58.0-next.1 → 0.58.0-next.10

package/src/core/types/search.ts

@@ -15,7 +15,8 @@ export type OperationParameter = {
   enum: string[] | undefined;
 };
 
-export type SearchDocument = {
+// TODO: review SearchHit type as it might contain properties that are not in the search results
+export type SearchHit = {
   id: string;
   url: string;
   title: string | string[];
@@ -26,7 +27,6 @@ export type SearchDocument = {
   deprecated?: boolean;
   security?: string[];
   parameters?: OperationParameter[];
-  metadata?: Record<string, any>;
   version?: string;
   versionFolderId?: string;
   isDefaultVersion?: boolean;
@@ -47,7 +47,7 @@ export type ParameterHighlight = {
 };
 
 export type SearchItemData = {
-  document: SearchDocument;
+  document: SearchHit;
   highlight: Record<string, string> & { parameters?: ParameterHighlight[]; path?: string[] };
 };
 

package/src/core/utils/urls.ts

@@ -54,8 +54,9 @@ export function addLeadingSlash(url: string): string {
 }
 
 export function removeTrailingSlash(url: string): string {
-  return url.endsWith('/') ? url.substring(0, url.length - 1) : url;
+  return url.endsWith('/') && url !== '/' ? url.substring(0, url.length - 1) : url;
 }
+
 export function removeLeadingSlash(url: string): string {
   return url.startsWith('/') ? url.substring(1) : url;
 }

package/src/ext/useConfigureReplay.ts

@@ -4,7 +4,7 @@ import type {
   ConfigureRequestValues,
   ConfigureServerRequestValues,
 } from '@redocly/theme/ext/configure';
-import type { UserClaims, OpenAPIServer } from '@redocly/theme/core/types';
+import type { UserClaims, OpenAPIServer, OpenAPIInfo } from '@redocly/theme/core/types';
 
 type ContextProps = {
   operation: {
@@ -14,6 +14,7 @@ type ContextProps = {
     href: string;
     method: string;
   };
+  info: OpenAPIInfo;
   servers: OpenAPIServer[];
   userClaims: UserClaims;
 };

package/src/icons/HierarchyIcon/HierarchyIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.0625 7.3125H15.1875C15.4858 7.31216 15.7717 7.19352 15.9826 6.98262C16.1935 6.77171 16.3122 6.48576 16.3125 6.1875V2.8125C16.3122 2.51424 16.1935 2.22829 15.9826 2.01738C15.7717 1.80648 15.4858 1.68784 15.1875 1.6875H2.8125C2.51424 1.68784 2.22829 1.80648 2.01738 2.01738C1.80648 2.22829 1.68784 2.51424 1.6875 2.8125V6.1875C1.68784 6.48576 1.80648 6.77171 2.01738 6.98262C2.22829 7.19352 2.51424 7.31216 2.8125 7.3125H3.9375H5.0625ZM15.1875 2.8125H2.8125V6.1875H15.1875V2.8125Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.1875 10.6875H9.5625C9.26424 10.6878 8.97829 10.8065 8.76738 11.0174C8.55648 11.2283 8.43784 11.5142 8.4375 11.8125V12.9375H5.0625V10.4546V9.5625V7.3125H3.9375V10.4546V12.9375C3.93784 13.2358 4.05648 13.5217 4.26738 13.7326C4.47829 13.9435 4.76424 14.0622 5.0625 14.0625H8.4375V15.1875C8.43784 15.4858 8.55648 15.7717 8.76738 15.9826C8.97829 16.1935 9.26424 16.3122 9.5625 16.3125H15.1875C15.4858 16.3122 15.7717 16.1935 15.9826 15.9826C16.1935 15.7717 16.3122 15.4858 16.3125 15.1875V11.8125C16.3122 11.5142 16.1935 11.2283 15.9826 11.0174C15.7717 10.8065 15.4858 10.6878 15.1875 10.6875ZM9.5625 11.8125V15.1875H15.1875V11.8125H9.5625Z"
+    />
+  </svg>
+);
+
+export const HierarchyIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/HierarchyIcon/HierarchyIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/NoteIcon/NoteIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="8"
+    height="12"
+    viewBox="0 0 8 12"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M7.6375 3.4875L5.0125 0.8625C4.9375 0.7875 4.8625 0.75 4.75 0.75H1C0.5875 0.75 0.25 1.0875 0.25 1.5V10.5C0.25 10.9125 0.5875 11.25 1 11.25H7C7.4125 11.25 7.75 10.9125 7.75 10.5V3.75C7.75 3.6375 7.7125 3.5625 7.6375 3.4875ZM4.75 1.65L6.85 3.75H4.75V1.65ZM7 10.5H1V1.5H4V3.75C4 4.1625 4.3375 4.5 4.75 4.5H7V10.5Z"
+      fill="currentColor"
+    />
+    <path d="M6.25 8.25H1.75V9H6.25V8.25Z" fill="currentColor" />
+    <path d="M6.25 6H1.75V6.75H6.25V6Z" fill="currentColor" />
+  </svg>
+);
+
+export const NoteIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/NoteIcon/NoteIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ShareIcon/ShareIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11.5 10.0001C11.1257 10.002 10.7566 10.0879 10.42 10.2514C10.0834 10.415 9.78776 10.652 9.55497 10.9451L5.89997 8.6601C6.03318 8.23018 6.03318 7.77002 5.89997 7.3401L9.55497 5.0551C9.92594 5.51446 10.4475 5.82769 11.0273 5.93931C11.6071 6.05092 12.2077 5.95372 12.7227 5.66491C13.2377 5.37611 13.6339 4.91435 13.841 4.36143C14.0482 3.8085 14.0529 3.20011 13.8544 2.64402C13.656 2.08793 13.2671 1.62003 12.7567 1.32322C12.2462 1.0264 11.6472 0.919827 11.0657 1.02237C10.4843 1.12491 9.95785 1.42996 9.57975 1.88346C9.20164 2.33697 8.99626 2.90966 8.99997 3.5001C9.00233 3.72369 9.03599 3.94585 9.09997 4.1601L5.44497 6.4451C5.12229 6.03889 4.68124 5.74313 4.18295 5.5988C3.68465 5.45447 3.1538 5.46873 2.66398 5.63961C2.17415 5.81048 1.74961 6.1295 1.44921 6.55245C1.14881 6.9754 0.987427 7.48133 0.987427 8.0001C0.987427 8.51888 1.14881 9.0248 1.44921 9.44775C1.74961 9.8707 2.17415 10.1897 2.66398 10.3606C3.1538 10.5315 3.68465 10.5457 4.18295 10.4014C4.68124 10.2571 5.12229 9.96131 5.44497 9.5551L9.09997 11.8401C9.03599 12.0544 9.00233 12.2765 8.99997 12.5001C8.99997 12.9946 9.14659 13.4779 9.4213 13.889C9.696 14.3002 10.0864 14.6206 10.5433 14.8098C11.0001 14.999 11.5027 15.0485 11.9877 14.9521C12.4726 14.8556 12.9181 14.6175 13.2677 14.2679C13.6174 13.9182 13.8555 13.4728 13.9519 12.9878C14.0484 12.5029 13.9989 12.0002 13.8097 11.5434C13.6204 11.0866 13.3 10.6961 12.8889 10.4214C12.4778 10.1467 11.9944 10.0001 11.5 10.0001ZM11.5 2.0001C11.7966 2.0001 12.0867 2.08808 12.3333 2.2529C12.58 2.41772 12.7723 2.65199 12.8858 2.92608C12.9993 3.20017 13.029 3.50177 12.9711 3.79274C12.9133 4.08371 12.7704 4.35098 12.5606 4.56076C12.3509 4.77054 12.0836 4.9134 11.7926 4.97128C11.5016 5.02916 11.2 4.99945 10.9259 4.88592C10.6519 4.77239 10.4176 4.58013 10.2528 4.33346C10.0879 4.08678 9.99997 3.79677 9.99997 3.5001C9.99997 3.10228 10.158 2.72075 10.4393 2.43944C10.7206 2.15814 11.1021 2.0001 11.5 2.0001ZM3.49997 9.5001C3.2033 9.5001 2.91329 9.41213 2.66661 9.24731C2.41994 9.08248 2.22768 8.84822 2.11415 8.57413C2.00062 8.30004 1.97091 7.99844 2.02879 7.70747C2.08667 7.4165 2.22953 7.14922 2.43931 6.93944C2.64909 6.72966 2.91636 6.5868 3.20733 6.52892C3.49831 6.47105 3.79991 6.50075 4.074 6.61428C4.34808 6.72781 4.58235 6.92007 4.74717 7.16675C4.912 7.41342 4.99997 7.70343 4.99997 8.0001C4.99997 8.39793 4.84193 8.77946 4.56063 9.06076C4.27933 9.34207 3.89779 9.5001 3.49997 9.5001ZM11.5 14.0001C11.2033 14.0001 10.9133 13.9121 10.6666 13.7473C10.4199 13.5825 10.2277 13.3482 10.1142 13.0741C10.0006 12.8 9.97091 12.4984 10.0288 12.2075C10.0867 11.9165 10.2295 11.6492 10.4393 11.4394C10.6491 11.2297 10.9164 11.0868 11.2073 11.0289C11.4983 10.971 11.7999 11.0008 12.074 11.1143C12.3481 11.2278 12.5824 11.4201 12.7472 11.6667C12.912 11.9134 13 12.2034 13 12.5001C13 12.8979 12.8419 13.2795 12.5606 13.5608C12.2793 13.8421 11.8978 14.0001 11.5 14.0001Z" />
+  </svg>
+);
+
+export const ShareIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ShareIcon/ShareIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -245,6 +245,7 @@ export * from '@redocly/theme/icons/MarkdownFullIcon/MarkdownFullIcon';
 export * from '@redocly/theme/icons/DocumentBlankIcon/DocumentBlankIcon';
 export * from '@redocly/theme/icons/WarningSquareIcon/WarningSquareIcon';
 export * from '@redocly/theme/icons/MenuIcon/MenuIcon';
+export * from '@redocly/theme/icons/NoteIcon/NoteIcon';
 export * from '@redocly/theme/icons/GlobalOutlinedIcon/GlobalOutlinedIcon';
 export * from '@redocly/theme/icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon';
 export * from '@redocly/theme/icons/FaceNeutralIcon/FaceNeutralIcon';
@@ -283,6 +284,7 @@ export * from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 export * from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
 export * from '@redocly/theme/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
+export * from '@redocly/theme/icons/ShareIcon/ShareIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/layouts/DocumentationLayout.tsx

@@ -9,12 +9,7 @@ import { breakpoints } from '@redocly/theme/core/utils';
 import { PageNavigation } from '@redocly/theme/components/PageNavigation/PageNavigation';
 import { LastUpdated } from '@redocly/theme/components/LastUpdated/LastUpdated';
 import { Breadcrumbs as ThemeBreadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
-
-import {
-  CodeSnippetContext,
-  CODE_GROUP_SNIPPET_NAME_KEY,
-} from '../core/contexts/CodeSnippetContext';
-import { useLocalState } from '../core/hooks/use-local-state';
+import { CodeSnippetProvider } from '@redocly/theme/core/contexts/CodeSnippetContext';
 
 type DocumentationLayoutProps = {
   tableOfContent: React.ReactNode;
@@ -44,10 +39,8 @@ export function DocumentationLayout({
   const { editPage: themeEditPage } = config || {};
   const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
 
-  const [activeSnippetName, setActiveSnippetName] = useLocalState(CODE_GROUP_SNIPPET_NAME_KEY, '');
-
   return (
-    <CodeSnippetContext.Provider value={{ activeSnippetName, setActiveSnippetName }}>
+    <CodeSnippetProvider>
       <LayoutWrapper data-component-name="Layout/DocumentationLayout" className={className}>
         <ContentWrapper withToc={!config?.toc?.hide}>
           <Breadcrumbs />
@@ -61,7 +54,7 @@ export function DocumentationLayout({
         </ContentWrapper>
         {tableOfContent}
       </LayoutWrapper>
-    </CodeSnippetContext.Provider>
+    </CodeSnippetProvider>
   );
 }
 

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/Tabs.tsx

@@ -24,9 +24,16 @@ type TabsProps = {
   className?: string;
   size: TabsSize;
   forceReady?: boolean;
+  initialTab?: string;
 };
 
-export function Tabs({ children, className, size, forceReady = false }: TabsProps): JSX.Element {
+export function Tabs({
+  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>[],
   );
@@ -36,7 +43,8 @@ export function Tabs({ children, className, size, forceReady = false }: TabsProp
   }, [children]);
   const tabsContainerRef = useRef<HTMLUListElement>(null);
   const [isAnimating, setIsAnimating] = useState<boolean>(false);
-  const initialTab = childrenArray[0]?.props.label ?? '';
+  const defaultInitialTab = childrenArray[0]?.props.label ?? '';
+  const initialTab = propInitialTab ?? defaultInitialTab;
   const {
     activeTab,
     setTabRef,