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

package/lib/markdoc/components/CodeGroup/CodeGroup.js

@@ -31,42 +31,64 @@ const contexts_1 = require("../../../core/contexts");
 function CodeGroup(props) {
     const mode = props.mode || 'tabs';
     const isTabsMode = mode === 'tabs';
-    const rawSnippets = React.useMemo(() => React.Children.toArray(props.children).map((child, idx) => {
-        const childProps = child;
-        return {
-            name: getTabName(childProps.props, idx),
-            languageName: (0, utils_1.langToName)(childProps.props.lang || 'Default'),
-            lang: childProps.props.lang || '',
-            props: childProps.props,
-        };
-    }), [props.children]);
-    const [activeSnippetName, setActiveSnippetName] = (0, contexts_1.useActiveCodeSnippetName)(mode);
-    const snippets = React.useMemo(() => Object.fromEntries(rawSnippets.map((snippet) => {
-        const getItemName = (snippet) => isTabsMode ? snippet === null || snippet === void 0 ? void 0 : snippet.name : (snippet === null || snippet === void 0 ? void 0 : snippet.languageName) || '';
-        const name = getItemName(snippet);
-        const items = rawSnippets.map((item) => ({
-            name: getItemName(item),
-            lang: item.lang,
-        }));
+    const rawSnippets = React.useMemo(() => parseSnippetsFromChildren(props.children), [props.children]);
+    const groupId = React.useMemo(() => generateGroupId(rawSnippets, mode), [rawSnippets, mode]);
+    const [activeSnippetId, setActiveSnippetId] = (0, contexts_1.useActiveCodeSnippetId)(groupId, rawSnippets);
+    const snippets = React.useMemo(() => {
+        const items = createItemsFromSnippets(rawSnippets, isTabsMode);
         const itemsProps = {
             items,
-            onChange: (name) => {
-                setActiveSnippetName(name);
-            },
-            value: activeSnippetName || getItemName(rawSnippets[0]),
+            onChange: (id) => setActiveSnippetId(id),
+            value: activeSnippetId,
         };
-        const snippetProps = Object.assign(Object.assign(Object.assign({}, snippet.props), { header: Object.assign(Object.assign({}, snippet.props.header), { title: isTabsMode ? undefined : snippet.name }) }), (isTabsMode ? { tabs: itemsProps } : { dropdown: itemsProps }));
-        return [name, snippetProps];
-    })), [rawSnippets, activeSnippetName, isTabsMode, setActiveSnippetName]);
-    const firstName = Object.keys(snippets)[0];
-    const activeSnippet = snippets[activeSnippetName] || snippets[firstName];
+        return Object.fromEntries(rawSnippets.map((snippet) => {
+            const snippetProps = Object.assign(Object.assign(Object.assign({}, snippet.props), { header: Object.assign(Object.assign({}, 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;
     }
     return React.createElement(CodeBlock_1.CodeBlock, Object.assign({}, activeSnippet));
 }
+function generateContentHash(content) {
+    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, mode) {
+    const content = rawSnippets.map((s) => s.id + (s.props.source || '')).join('|') + `|${mode}`;
+    const hash = generateContentHash(content);
+    return `${mode}-${hash}`;
+}
 function getTabName(props, idx) {
     var _a;
-    return String(((_a = props.header) === null || _a === void 0 ? void 0 : _a.title) || props.file || (0, utils_1.langToName)(props.lang || '') || 'Tab ' + String(idx + 1));
+    const fallbackName = `Tab ${idx + 1}`;
+    return String(((_a = props.header) === null || _a === void 0 ? void 0 : _a.title) || props.file || (0, utils_1.langToName)(props.lang || '') || fallbackName);
+}
+function parseSnippetsFromChildren(children) {
+    return React.Children.toArray(children).map((child, idx) => {
+        const childProps = child;
+        const props = childProps.props;
+        return {
+            name: getTabName(props, idx),
+            languageName: String((0, utils_1.langToName)(props.lang || 'Default') || ''),
+            lang: props.lang || '',
+            props,
+            id: `${props.lang || ''}-${idx}`,
+        };
+    });
+}
+function createItemsFromSnippets(snippets, isTabsMode) {
+    return snippets.map((snippet) => ({
+        name: isTabsMode ? snippet.name : snippet.languageName || '',
+        lang: snippet.lang,
+        id: snippet.id,
+    }));
 }
 //# sourceMappingURL=CodeGroup.js.map

package/lib/markdoc/components/Tabs/Tab.js

@@ -11,7 +11,7 @@ const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
 const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
 function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }) {
     return (react_1.default.createElement(TabList_1.TabItem, { "data-component-name": "Markdoc/Tabs/Tab", size: size, tabIndex: 0 },
-        react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick },
+        react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, "data-label": label, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick },
             react_1.default.createElement(LabelWrapper, null,
                 react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: icon, rawContent: iconRawContent }),
                 label))));

package/lib/markdoc/components/Tabs/TabList.d.ts

@@ -4,22 +4,10 @@ import { TabItemProps, TabsSize } from '../../../markdoc/components/Tabs/Tabs';
 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 declare function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, onTabClick, handleKeyboard, getTabId, activeTab, isAnimating, highlightStyle, allTabsHidden, tabsContainerRef, }: TabListProps): JSX.Element;
+export declare function TabList({ childrenArray, size, activeTab, onTabChange, }: TabListProps): JSX.Element;
 export declare const TabListContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const TabItem: import("styled-components").StyledComponent<"li", any, {
     active?: boolean;

package/lib/markdoc/components/Tabs/TabList.js

@@ -22,35 +22,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabButtonLink = exports.TabItem = exports.TabListContainer = void 0;
 exports.TabList = TabList;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const Tab_1 = require("../../../markdoc/components/Tabs/Tab");
 const Dropdown_1 = require("../../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuItem");
 const Button_1 = require("../../../components/Button/Button");
-function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, onTabClick, handleKeyboard, getTabId, activeTab, isAnimating, highlightStyle, allTabsHidden, tabsContainerRef, }) {
-    return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef, "data-animating": isAnimating },
-        react_1.default.createElement(HighlightBar, { size: size, style: { left: highlightStyle.left, width: highlightStyle.width } },
+const hooks_1 = require("../../../core/hooks");
+const utils_1 = require("../../../core/utils");
+function TabList({ childrenArray, size, activeTab, onTabChange, }) {
+    const tabsContainerRef = (0, react_1.useRef)(null);
+    const { allTabsHidden, overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef } = (0, hooks_1.useTabs)({
+        activeTab,
+        onTabChange,
+        containerRef: tabsContainerRef,
+        totalTabs: childrenArray.length,
+    });
+    const { highlightStyle } = useHighlightBarAnimation({
+        activeTab,
+        childrenArray,
+        overflowTabs,
+        tabsContainerRef,
+        visibleTabs,
+    });
+    return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef },
+        react_1.default.createElement(HighlightBar, { size: size, style: highlightStyle },
             react_1.default.createElement("div", null)),
         childrenArray.map((child, index) => {
             if (!visibleTabs.includes(index))
                 return null;
             const { label, icon } = child.props;
-            const tabId = getTabId(label, index);
-            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => {
-                    setTabRef(el, index);
-                    if (el) {
-                        el.setAttribute('data-label', label);
-                        el.setAttribute('data-animating', isAnimating.toString());
-                    }
-                }, onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
+            const tabId = (0, utils_1.getTabId)(label, index);
+            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => setTabRef(el, index), onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
                     var _a, _b;
                     (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
                     onTabClick(label);
@@ -61,12 +68,54 @@ function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, on
                     : undefined }, allTabsHidden ? activeTab : 'More'), alignment: "start", withArrow: true },
             react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
                 const { label } = childrenArray[index].props;
-                const tabId = getTabId(label, index);
+                const tabId = (0, utils_1.getTabId)(label, index);
                 return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
+                        var _a, _b;
+                        (_b = (_a = childrenArray[index].props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
                         onTabClick(index);
                     }, disabled: childrenArray[index].props.disable }, label));
             })))))));
 }
+const useHighlightBarAnimation = (props) => {
+    const { childrenArray, activeTab, tabsContainerRef, visibleTabs, overflowTabs } = props;
+    const [highlightStyle, setHighlightStyle] = react_1.default.useState({
+        left: 0,
+        width: 0,
+    });
+    (0, react_1.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 = 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 };
+};
 exports.TabListContainer = styled_components_1.default.ul `
   position: relative;
   display: flex;

package/lib/markdoc/components/Tabs/Tabs.d.ts

@@ -12,12 +12,12 @@ export type TabItemProps = {
     icon?: React.ReactNode | string;
 };
 type TabsProps = {
+    id?: string;
     children: React.ReactElement<TabItemProps>[];
     className?: string;
     size: TabsSize;
-    forceReady?: boolean;
     initialTab?: string;
 };
-export declare function Tabs({ children, className, size, forceReady, initialTab: propInitialTab, }: TabsProps): JSX.Element;
+export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, }: TabsProps): JSX.Element;
 export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/markdoc/components/Tabs/Tabs.js

@@ -22,101 +22,35 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabContent = exports.TabsSize = void 0;
 exports.Tabs = Tabs;
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
+const utils_1 = require("../../../core/utils");
 var TabsSize;
 (function (TabsSize) {
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ children, className, size, forceReady = false, initialTab: propInitialTab, }) {
+function Tabs({ id, children, className, size, initialTab: propInitialTab, }) {
     var _a, _b;
     const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
+    const initialTab = (_b = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
+    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ tabsId: id, initialTab });
     (0, react_1.useEffect)(() => {
         setChildrenArray(react_1.default.Children.toArray(children));
     }, [children]);
-    const tabsContainerRef = (0, react_1.useRef)(null);
-    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
-    const defaultInitialTab = (_b = (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
-    const initialTab = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : defaultInitialTab;
-    const { activeTab, setTabRef, onTabClick, handleKeyboard, getTabId, visibleTabs, overflowTabs, ready, allTabsHidden, } = (0, hooks_1.useTabs)({
-        initialTab,
-        totalTabs: childrenArray.length,
-        containerRef: tabsContainerRef,
-    });
-    const [prevTab, setPrevTab] = react_1.default.useState(initialTab);
-    const [highlightStyle, setHighlightStyle] = react_1.default.useState({
-        left: 0,
-        width: 0,
-    });
-    (0, react_1.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 = null;
-                    let startPosition = { left: 0, width: 0 };
-                    if (visibleTabs.includes(activeIndex)) {
-                        activeTabElement = container.querySelector(`[data-label="${activeTab}"]`);
-                    }
-                    else if (overflowTabs.includes(activeIndex)) {
-                        const moreButton = container.querySelector('button');
-                        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 === null || activeTabElement === void 0 ? void 0 : 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 (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, isReady: ready || forceReady },
-        react_1.default.createElement(TabList_1.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 }),
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id },
+        react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab }),
         childrenArray.map((child, index) => {
             const { label } = child.props;
-            const tabId = getTabId(label, index);
+            const tabId = (0, utils_1.getTabId)(label, index);
             return label === activeTab ? (react_1.default.createElement(exports.TabContent, { key: `content-${tabId}`, id: `panel-${tabId}`, "aria-labelledby": `tab-${tabId}`, tabIndex: 0, role: "tabpanel" }, child.props.children)) : null;
         })));
 }
@@ -132,16 +66,6 @@ const TabsContainer = styled_components_1.default.div `
   padding: var(--md-tabs-container-padding);
   border: var(--md-tabs-container-border);
 
-  ${({ isReady }) => !isReady
-    ? (0, styled_components_1.css) `
-          visibility: hidden;
-          overflow: hidden;
-        `
-    : (0, styled_components_1.css) `
-          visibility: visible;
-          overflow: visible;
-        `}
-
   ol[class^='Tabs__TabList'] {
     margin: 0;
     padding: 0;

package/lib/markdoc/tags/tabs.js

@@ -22,6 +22,11 @@ exports.tabs = {
             return new markdoc_1.default.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' },
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.58.0-next.9",
+  "version": "0.59.0-next.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -32,7 +32,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^6.21.1",
-    "styled-components": "^4.1.1 || ^5.3.11",
+    "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
@@ -87,8 +87,8 @@
     "openapi-sampler": "1.6.1",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.35.0",
-    "@redocly/realm-asyncapi-sdk": "0.4.0-next.4"
+    "@redocly/config": "0.35.1",
+    "@redocly/realm-asyncapi-sdk": "0.5.0-next.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -24,6 +24,7 @@ import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/C
 export type CatalogEntityProps = {
   RedocSchema: React.ComponentType<any>;
   StoreProvider: React.ComponentType<any>;
+  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
 };
 
 type CatalogEntityPageProps = {
@@ -50,6 +51,7 @@ const renderDataSchemaSection = (
   relatedEntity: BffCatalogRelatedEntity | null,
   RedocSchema: React.ComponentType<any>,
   StoreProvider: React.ComponentType<any>,
+  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>,
 ): React.ReactElement | null => {
   if (entity.type !== 'data-schema') {
     return null;
@@ -61,11 +63,16 @@ const renderDataSchemaSection = (
       relatedEntity={relatedEntity}
       RedocSchema={RedocSchema}
       StoreProvider={StoreProvider}
+      GraphqlTypeRenderer={GraphqlTypeRenderer}
     />
   );
 };
 
-export function CatalogEntity({ RedocSchema, StoreProvider }: CatalogEntityProps) {
+export function CatalogEntity({
+  RedocSchema,
+  StoreProvider,
+  GraphqlTypeRenderer,
+}: CatalogEntityProps) {
   const { useTranslate, useCatalog, usePageProps } = useThemeHooks();
   const { translate } = useTranslate();
   const { entity, relations, catalogConfig, entitiesCatalogConfig, relatedEntity } =
@@ -98,7 +105,13 @@ export function CatalogEntity({ RedocSchema, StoreProvider }: CatalogEntityProps
                       tag={entity.key}
                     />
                     <CatalogEntityProperties entity={entity} />
-                    {renderDataSchemaSection(entity, relatedEntity, RedocSchema, StoreProvider)}
+                    {renderDataSchemaSection(
+                      entity,
+                      relatedEntity,
+                      RedocSchema,
+                      StoreProvider,
+                      GraphqlTypeRenderer,
+                    )}
                     <CatalogTwoColumnsSection>
                       {renderFirstColumnEntitySection(entity)}
                       <CatalogEntityLinks entity={entity} />

package/src/components/Catalog/CatalogEntity/CatalogEntityMetadata.tsx

@@ -16,7 +16,7 @@ export type CatalogEntityMetadataProps = {
 
 function renderMetadataValue(value: any): React.JSX.Element {
   if (isPlainObject(value)) {
-    return <JsonViewerWrapper data={value} expandLevel={3} hideHeader={true} />;
+    return <JsonViewerWrapper data={value} expandLevel={3} controls={false} />;
   }
 
   if (Array.isArray(value)) {
@@ -25,7 +25,7 @@ function renderMetadataValue(value: any): React.JSX.Element {
         {value.map((item, index) => (
           <div key={index}>
             {isPlainObject(item) ? (
-              <JsonViewerWrapper data={item} expandLevel={3} hideHeader={true} />
+              <JsonViewerWrapper data={item} expandLevel={3} controls={false} />
             ) : (
               <span>{String(item)}</span>
             )}
@@ -41,7 +41,7 @@ function renderMetadataValue(value: any): React.JSX.Element {
 export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
-  const { schema, ...metadata } = entity.metadata || {};
+  const { schema, sdl, ...metadata } = entity.metadata || {};
   const metadataToShow = Object.entries(metadata).filter(
     ([key]) => !(entity.type === 'api-description' && key === 'descriptionFile'),
   );

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx

@@ -46,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -74,7 +74,7 @@ export function CatalogEntityTeamRelations({
 }: CatalogEntityTeamRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
-      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
+      <Tabs size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
             key="members-table"

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -13,6 +13,7 @@ export type CatalogEntitySchemaProps = {
   relatedEntity: BffCatalogRelatedEntity | null;
   RedocSchema: React.ComponentType<any>;
   StoreProvider: React.ComponentType<any>;
+  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
 };
 
 export function CatalogEntitySchema({
@@ -20,37 +21,45 @@ export function CatalogEntitySchema({
   relatedEntity,
   RedocSchema,
   StoreProvider,
+  GraphqlTypeRenderer,
 }: CatalogEntitySchemaProps) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { definition, parsedSchema, rawSchema } = useCatalogEntitySchema({ entity, relatedEntity });
+  const isGraphql = entity.metadata?.specType === 'graphql';
+  const graphqlSDL = entity?.metadata?.sdl;
 
   return (
     <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
       <HeaderWrapper>
         <Heading>{translate('catalog.entity.schema.title')}</Heading>
-        <CopyButton
-          data={rawSchema}
-          buttonText="Copy Schema"
-          type="compound"
-          variant="secondary"
-          iconPosition="right"
-          size="medium"
-        ></CopyButton>
+        {!isGraphql && (
+          <CopyButton
+            data={rawSchema}
+            buttonText="Copy Schema"
+            type="compound"
+            variant="secondary"
+            iconPosition="right"
+            size="medium"
+          ></CopyButton>
+        )}
       </HeaderWrapper>
       <SplitViewWrapper>
         <SchemaContentWrapper>
-          <StoreProvider definition={definition}>
-            <RedocSchema schema={parsedSchema} />
-          </StoreProvider>
+          {isGraphql && graphqlSDL && GraphqlTypeRenderer ? (
+            <GraphqlTypeRenderer sdl={graphqlSDL} typeName={entity.title} />
+          ) : (
+            <StoreProvider definition={definition}>
+              <RedocSchema schema={parsedSchema} />
+            </StoreProvider>
+          )}
         </SchemaContentWrapper>
-        <SchemaSampleWrapper>
-          <JsonViewer
-            data={Sampler.sample({ ...parsedSchema })}
-            expandLevel={3}
-            hideHeader={false}
-          />
-        </SchemaSampleWrapper>
+
+        {!isGraphql && (
+          <SchemaSampleWrapper>
+            <JsonViewer data={Sampler.sample({ ...parsedSchema })} expandLevel={3} />
+          </SchemaSampleWrapper>
+        )}
       </SplitViewWrapper>
     </MetadataWrapper>
   );

package/src/components/CodeBlock/CodeBlock.tsx

@@ -18,8 +18,8 @@ export type CodeBlockProps = {
   header?: CodeBlockControlsProps;
   dataTestId?: string;
   className?: string;
-  tabs?: CodeBlockTabItems;
-  dropdown?: CodeBlockDropdownItems;
+  tabs?: CodeBlockItems;
+  dropdown?: CodeBlockItems;
   withLineNumbers?: boolean;
   startLineNumber?: number;
   highlightedHtml?: string;
@@ -37,15 +37,9 @@ type UnstableExternalCodeSample = {
   get: (source: ExternalSource) => string;
 };
 
-export type CodeBlockTabItems = {
-  items: { name: string; lang?: string }[];
-  onChange: (name: string) => void;
-  value: string;
-};
-
-export type CodeBlockDropdownItems = {
-  items: { name: string; lang?: string }[];
-  onChange: (name: string | string[]) => void;
+export type CodeBlockItems = {
+  items: { name: string; lang?: string; id: string }[];
+  onChange: (id: string) => void;
   value: string;
 };