@redocly/theme 0.51.0-next.2 → 0.51.0-next.3

package/lib/icons/TaskViewIcon/TaskViewIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const TaskViewIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/TaskViewIcon/TaskViewIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TaskViewIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" }, props),
+    react_1.default.createElement("path", { d: "M9.625 11.375C10.1082 11.375 10.5 10.9832 10.5 10.5C10.5 10.0168 10.1082 9.625 9.625 9.625C9.14175 9.625 8.75 10.0168 8.75 10.5C8.75 10.9832 9.14175 11.375 9.625 11.375Z", fill: "#3B3C45" }),
+    react_1.default.createElement("path", { d: "M13.0274 10.2718C12.757 9.58322 12.2906 8.98906 11.6858 8.563C11.081 8.13695 10.3644 7.89773 9.625 7.875C8.88555 7.89773 8.16903 8.13695 7.56424 8.563C6.95944 8.98906 6.49296 9.58322 6.22261 10.2718L6.125 10.5L6.22261 10.7282C6.49296 11.4168 6.95944 12.0109 7.56424 12.437C8.16903 12.863 8.88555 13.1023 9.625 13.125C10.3644 13.1023 11.081 12.863 11.6858 12.437C12.2906 12.0109 12.757 11.4168 13.0274 10.7282L13.125 10.5L13.0274 10.2718ZM9.625 12.25C9.27888 12.25 8.94054 12.1474 8.65275 11.9551C8.36497 11.7628 8.14066 11.4895 8.00821 11.1697C7.87576 10.8499 7.8411 10.4981 7.90863 10.1586C7.97615 9.81913 8.14282 9.50731 8.38756 9.26256C8.63231 9.01782 8.94413 8.85115 9.28359 8.78363C9.62306 8.7161 9.97493 8.75076 10.2947 8.88321C10.6145 9.01566 10.8878 9.23997 11.0801 9.52775C11.2724 9.81554 11.375 10.1539 11.375 10.5C11.3745 10.964 11.1899 11.4088 10.8619 11.7369C10.5338 12.0649 10.089 12.2495 9.625 12.25Z", fill: "#3B3C45" }),
+    react_1.default.createElement("path", { d: "M5.25 12.25H3.0625V3.0625H4.375V4.375H9.625V3.0625H10.9375V7H11.8125V3.0625C11.8125 2.83044 11.7203 2.60788 11.5562 2.44378C11.3921 2.27969 11.1696 2.1875 10.9375 2.1875H9.625V1.75C9.625 1.51794 9.53281 1.29538 9.36872 1.13128C9.20462 0.967187 8.98206 0.875 8.75 0.875H5.25C5.01794 0.875 4.79538 0.967187 4.63128 1.13128C4.46719 1.29538 4.375 1.51794 4.375 1.75V2.1875H3.0625C2.83044 2.1875 2.60788 2.27969 2.44378 2.44378C2.27969 2.60788 2.1875 2.83044 2.1875 3.0625V12.25C2.1875 12.4821 2.27969 12.7046 2.44378 12.8687C2.60788 13.0328 2.83044 13.125 3.0625 13.125H5.25V12.25ZM5.25 1.75H8.75V3.5H5.25V1.75Z", fill: "#3B3C45" })));
+exports.TaskViewIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/TaskViewIcon/TaskViewIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=TaskViewIcon.js.map

package/lib/icons/WarningAltFilled/WarningAltFilled.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const WarningAltFilled: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/WarningAltFilled/WarningAltFilled.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WarningAltFilled = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M8.001 3.08571H7.999L2.32435 13.9983L2.3253 14H13.6747L13.6757 13.9983L8.001 3.08571ZM7.4375 6.00001H8.5625V10.5H7.4375V6.00001ZM8 13C7.85167 13 7.70666 12.956 7.58333 12.8736C7.45999 12.7912 7.36386 12.6741 7.30709 12.537C7.25033 12.4 7.23548 12.2492 7.26441 12.1037C7.29335 11.9582 7.36478 11.8246 7.46967 11.7197C7.57456 11.6148 7.7082 11.5434 7.85369 11.5144C7.99917 11.4855 8.14997 11.5003 8.28702 11.5571C8.42406 11.6139 8.54119 11.71 8.62361 11.8333C8.70602 11.9567 8.75 12.1017 8.75 12.25C8.75 12.4489 8.67099 12.6397 8.53033 12.7803C8.38968 12.921 8.19892 13 8 13Z" }),
+    react_1.default.createElement("path", { d: "M14.5 15H1.5C1.4141 15 1.32965 14.9779 1.25478 14.9357C1.17992 14.8936 1.11718 14.8329 1.0726 14.7595C1.02802 14.686 1.00311 14.6024 1.00027 14.5165C0.997436 14.4307 1.01677 14.3455 1.0564 14.2693L7.5564 1.76931C7.59862 1.68812 7.66231 1.62008 7.74053 1.5726C7.81875 1.52511 7.9085 1.5 8 1.5C8.09151 1.5 8.18126 1.52511 8.25948 1.5726C8.3377 1.62008 8.40138 1.68812 8.4436 1.76931L14.9436 14.2693C14.9832 14.3455 15.0026 14.4307 14.9997 14.5165C14.9969 14.6024 14.972 14.686 14.9274 14.7595C14.8828 14.8329 14.8201 14.8936 14.7452 14.9357C14.6704 14.9779 14.5859 15 14.5 15ZM2.3253 14H13.6747L13.6757 13.9983L8.001 3.08571H7.999L2.32435 13.9983L2.3253 14Z" })));
+exports.WarningAltFilled = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/WarningAltFilled/WarningAltFilled',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=WarningAltFilled.js.map

package/lib/icons/WarningAltFilledIcon/WarningAltFilledIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const WarningAltFilledIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/WarningAltFilledIcon/WarningAltFilledIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WarningAltFilledIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M8.001 2.83571H7.999L2.32435 13.7483L2.3253 13.75H13.6747L13.6757 13.7483L8.001 2.83571ZM7.4375 5.75001H8.5625V10.25H7.4375V5.75001ZM8 12.75C7.85167 12.75 7.70666 12.706 7.58333 12.6236C7.45999 12.5412 7.36386 12.4241 7.30709 12.287C7.25033 12.15 7.23548 11.9992 7.26441 11.8537C7.29335 11.7082 7.36478 11.5746 7.46967 11.4697C7.57456 11.3648 7.7082 11.2934 7.85369 11.2644C7.99917 11.2355 8.14997 11.2503 8.28702 11.3071C8.42406 11.3639 8.54119 11.46 8.62361 11.5833C8.70602 11.7067 8.75 11.8517 8.75 12C8.75 12.1989 8.67099 12.3897 8.53033 12.5303C8.38968 12.671 8.19892 12.75 8 12.75Z" }),
+    react_1.default.createElement("path", { d: "M14.5 14.75H1.5C1.4141 14.75 1.32965 14.7279 1.25478 14.6857C1.17992 14.6436 1.11718 14.5829 1.0726 14.5095C1.02802 14.436 1.00311 14.3524 1.00027 14.2665C0.997436 14.1807 1.01677 14.0955 1.0564 14.0193L7.5564 1.51931C7.59862 1.43812 7.66231 1.37008 7.74053 1.3226C7.81875 1.27511 7.9085 1.25 8 1.25C8.09151 1.25 8.18126 1.27511 8.25948 1.3226C8.3377 1.37008 8.40138 1.43812 8.4436 1.51931L14.9436 14.0193C14.9832 14.0955 15.0026 14.1807 14.9997 14.2665C14.9969 14.3524 14.972 14.436 14.9274 14.5095C14.8828 14.5829 14.8201 14.6436 14.7452 14.6857C14.6704 14.7279 14.5859 14.75 14.5 14.75ZM2.3253 13.75H13.6747L13.6757 13.7483L8.001 2.83571H7.999L2.32435 13.7483L2.3253 13.75Z" })));
+exports.WarningAltFilledIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/WarningAltFilledIcon/WarningAltFilledIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=WarningAltFilledIcon.js.map

package/lib/icons/WorkflowAutomationIcon/WorkflowAutomationIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const WorkflowAutomationIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/WorkflowAutomationIcon/WorkflowAutomationIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkflowAutomationIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none" }, props),
+    react_1.default.createElement("path", { d: "M7 11.8125C5.425 11.8125 3.89375 11.025 2.975 9.625H5.25V8.75H1.75V12.25H2.625V10.6312C3.71875 11.9437 5.29375 12.6875 7 12.6875V11.8125Z", fill: "#1A1C21" }),
+    react_1.default.createElement("path", { d: "M13.5625 10.0625V9.1875H12.6438C12.6 8.925 12.4688 8.6625 12.3375 8.4L12.9938 7.74375L12.3812 7.13125L11.725 7.7875C11.5062 7.65625 11.2437 7.525 10.9375 7.48125V6.5625H10.0625V7.48125C9.8 7.525 9.5375 7.65625 9.275 7.7875L8.61875 7.13125L8.00625 7.74375L8.6625 8.4C8.53125 8.61875 8.4 8.88125 8.35625 9.1875H7.4375V10.0625H8.35625C8.4 10.325 8.53125 10.5875 8.6625 10.85L8.00625 11.5062L8.61875 12.1188L9.275 11.4625C9.49375 11.5938 9.75625 11.725 10.0625 11.7688V12.6875H10.9375V11.7688C11.2 11.725 11.4625 11.5938 11.725 11.4625L12.3812 12.1188L12.9938 11.5062L12.3375 10.85C12.4688 10.6312 12.6 10.3687 12.6438 10.0625H13.5625ZM10.5 10.9375C9.75625 10.9375 9.1875 10.3687 9.1875 9.625C9.1875 8.88125 9.75625 8.3125 10.5 8.3125C11.2437 8.3125 11.8125 8.88125 11.8125 9.625C11.8125 10.3687 11.2437 10.9375 10.5 10.9375Z", fill: "#1A1C21" }),
+    react_1.default.createElement("path", { d: "M8.75 4.375H11.025C9.58125 2.14375 6.60625 1.53125 4.375 2.975C3.01875 3.85 2.1875 5.38125 2.1875 7H1.3125C1.3125 3.85 3.85 1.3125 7 1.3125C8.70625 1.3125 10.2812 2.05625 11.375 3.36875V1.75H12.25V5.25H8.75V4.375Z", fill: "#1A1C21" })));
+exports.WorkflowAutomationIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/WorkflowAutomationIcon/WorkflowAutomationIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=WorkflowAutomationIcon.js.map

package/lib/index.d.ts

@@ -102,6 +102,7 @@ export * from './components/Catalog/CatalogCard';
 export * from './components/Catalog/CatalogActions';
 export * from './components/Catalog/CatalogHighlight';
 export * from './components/Catalog/CatalogInfoBlock';
+export * from './components/Catalog/CatalogVirtualizedGroups';
 export * from './components/Product/Product';
 export * from './components/Product/ProductPicker';
 export * from './components/StatusCode/StatusCode';
@@ -212,7 +213,17 @@ export * from './icons/CharacterIcon/CharacterIcon';
 export * from './icons/FileIcon/FileIcon';
 export * from './icons/ExportIcon/ExportIcon';
 export * from './icons/CertificateIcon/CertificateIcon';
+export * from './icons/PlaylistIcon/PlaylistIcon';
+export * from './icons/WorkflowAutomationIcon/WorkflowAutomationIcon';
+export * from './icons/TaskViewIcon/TaskViewIcon';
+export * from './icons/DataRefineryIcon/DataRefineryIcon';
+export * from './icons/FlowIcon/FlowIcon';
+export * from './icons/DraggableIcon/DraggableIcon';
+export * from './icons/WarningAltFilledIcon/WarningAltFilledIcon';
 export * from './icons/ErrorFilledIcon/ErrorFilledIcon';
+export * from './icons/SettingsCogIcon/SettingsCogIcon';
+export * from './icons/CheckboxFilledIcon/CheckboxFilledIcon';
+export * from './icons/WarningAltFilled/WarningAltFilled';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -150,6 +150,7 @@ __exportStar(require("./components/Catalog/CatalogCard"), exports);
 __exportStar(require("./components/Catalog/CatalogActions"), exports);
 __exportStar(require("./components/Catalog/CatalogHighlight"), exports);
 __exportStar(require("./components/Catalog/CatalogInfoBlock"), exports);
+__exportStar(require("./components/Catalog/CatalogVirtualizedGroups"), exports);
 /* Product */
 __exportStar(require("./components/Product/Product"), exports);
 __exportStar(require("./components/Product/ProductPicker"), exports);
@@ -264,7 +265,17 @@ __exportStar(require("./icons/CharacterIcon/CharacterIcon"), exports);
 __exportStar(require("./icons/FileIcon/FileIcon"), exports);
 __exportStar(require("./icons/ExportIcon/ExportIcon"), exports);
 __exportStar(require("./icons/CertificateIcon/CertificateIcon"), exports);
+__exportStar(require("./icons/PlaylistIcon/PlaylistIcon"), exports);
+__exportStar(require("./icons/WorkflowAutomationIcon/WorkflowAutomationIcon"), exports);
+__exportStar(require("./icons/TaskViewIcon/TaskViewIcon"), exports);
+__exportStar(require("./icons/DataRefineryIcon/DataRefineryIcon"), exports);
+__exportStar(require("./icons/FlowIcon/FlowIcon"), exports);
+__exportStar(require("./icons/DraggableIcon/DraggableIcon"), exports);
+__exportStar(require("./icons/WarningAltFilledIcon/WarningAltFilledIcon"), exports);
 __exportStar(require("./icons/ErrorFilledIcon/ErrorFilledIcon"), exports);
+__exportStar(require("./icons/SettingsCogIcon/SettingsCogIcon"), exports);
+__exportStar(require("./icons/CheckboxFilledIcon/CheckboxFilledIcon"), exports);
+__exportStar(require("./icons/WarningAltFilled/WarningAltFilled"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -38,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeWalkthrough = CodeWalkthrough;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const contexts_1 = require("../../../core/contexts");
 const CodePanel_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanel");
@@ -46,10 +23,7 @@ const hooks_1 = require("../../../core/hooks");
 const CodeFilters_1 = require("../../../markdoc/components/CodeWalkthrough/CodeFilters");
 function CodeWalkthrough(_a) {
     var { children, steps, preview } = _a, attributes = __rest(_a, ["children", "steps", "preview"]);
-    // Steps are being modified causing the observer to be recreated in the useCodeWalkthrough hook
-    // This is a workaround to prevent the observer from being recreated
-    const [initialSteps] = (0, react_1.useState)([...steps]);
-    const { controlsState, stepsState, files, downloadAssociatedFiles } = (0, hooks_1.useCodeWalkthrough)(initialSteps, attributes);
+    const { controlsState, stepsState, files, downloadAssociatedFiles } = (0, hooks_1.useCodeWalkthrough)(steps, attributes);
     const { activeFilters, getControlState, changeControlState } = controlsState;
     const { filtersElementRef } = stepsState;
     return (react_1.default.createElement(contexts_1.CodeWalkthroughStepsContext.Provider, { value: stepsState },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.51.0-next.2",
+  "version": "0.51.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,6 +87,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
+    "@tanstack/react-virtual": "3.13.0",
     "@redocly/config": "0.21.0"
   },
   "scripts": {

package/src/components/Catalog/Catalog.tsx

@@ -6,13 +6,12 @@ import type { CatalogConfig } from '@redocly/theme/config';
 import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks, useModalScrollLock } from '@redocly/theme/core/hooks';
 import { H2 } from '@redocly/theme/components/Typography/H2';
-import { CatalogCard } from '@redocly/theme/components/Catalog/CatalogCard';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
 import { FilterPopover } from '@redocly/theme/components/Filter/FilterPopover';
 import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { CatalogActions } from '@redocly/theme/components/Catalog/CatalogActions';
 import { Sidebar } from '@redocly/theme/components/Sidebar/Sidebar';
-import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { CatalogVirtualizedGroups } from '@redocly/theme/components/Catalog/CatalogVirtualizedGroups';
 
 export type CatalogProps = {
   pageProps: {
@@ -73,40 +72,14 @@ export default function Catalog(props: CatalogProps): JSX.Element {
               </CatalogDescription>
             ) : null}
           </CatalogPageDescriptionWrapper>
-          {groups.map((group) => (
-            <React.Fragment key={group.title}>
-              <CatalogSeparator data-testid="catalog-separator">
-                <CatalogSeparatorLabel>{group.title}</CatalogSeparatorLabel>
-                <CounterTag borderless>{group.items.length}</CounterTag>
-              </CatalogSeparator>
-              <CatalogCards>
-                {group.items.map((item) => (
-                  <CatalogCard item={item} key={item.link} />
-                ))}
-              </CatalogCards>
-            </React.Fragment>
-          ))}
+
+          <CatalogVirtualizedGroups groups={groups} />
         </CatalogPageContent>
       </CatalogPageWrapper>
     </HighlightContext.Provider>
   );
 }
 
-const CatalogSeparator = styled.div`
-  display: flex;
-  align-items: center;
-  color: var(--catalog-separator-color);
-  font-size: var(--catalog-separator-font-size);
-  font-weight: var(--catalog-separator-font-weight);
-  border-top: 1px solid var(--catalog-separator-border-color);
-  margin: var(--catalog-separator-margin);
-  padding: var(--catalog-separator-padding);
-`;
-
-const CatalogSeparatorLabel = styled.div`
-  margin: var(--catalog-separator-label-margin);
-`;
-
 export const CatalogPageContent = styled.main`
   flex: 1;
   width: 90%;
@@ -118,13 +91,6 @@ export const CatalogPageContent = styled.main`
   }
 `;
 
-const CatalogCards = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
-  gap: 32px;
-  margin: var(--catalog-cards-group-margin);
-`;
-
 export const CatalogTitle = styled(H2)`
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);

package/src/components/Catalog/CatalogVirtualizedGroups.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { useWindowVirtualizer } from '@tanstack/react-virtual';
+import styled from 'styled-components';
+
+import { CatalogItem } from '@redocly/theme/core/types';
+import { useElementSize } from '@redocly/theme/core/hooks/use-element-size';
+import { CatalogCard } from '@redocly/theme/components/Catalog/CatalogCard';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+
+const GAP_SIZE = 32;
+const CARD_MIN_WIDTH_VAR = '--api-catalog-card-min-width';
+
+type Group = {
+  title: string;
+  items: CatalogItem[];
+};
+
+type VirtualRowData =
+  | { type: 'header'; groupTitle: string; groupCount: number; key: string }
+  | { type: 'cardRow'; groupTitle: string; items: CatalogItem[]; key: string };
+
+type CatalogVirtualizedGroupsProps = {
+  groups: Group[];
+};
+
+export function CatalogVirtualizedGroups({ groups }: CatalogVirtualizedGroupsProps) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const [isClient, setIsClient] = useState(typeof window !== 'undefined');
+  const { width } = useElementSize(parentRef);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const columnCount = useMemo(() => {
+    if (!isClient) return 1;
+    const cardMinWidth = parseInt(
+      getComputedStyle(document.documentElement).getPropertyValue(CARD_MIN_WIDTH_VAR),
+      10,
+    );
+    return Math.max(1, Math.floor((width + GAP_SIZE) / (cardMinWidth + GAP_SIZE)));
+  }, [width, isClient]);
+
+  const flatRows: VirtualRowData[] = useMemo(() => {
+    const rows: VirtualRowData[] = [];
+    groups.forEach((group) => {
+      rows.push({
+        type: 'header',
+        groupTitle: group.title,
+        groupCount: group.items.length,
+        key: `header-${group.title}`,
+      });
+      const numRows = Math.ceil(group.items.length / columnCount);
+      for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
+        const startIndex = rowIndex * columnCount;
+        const rowItems = group.items.slice(startIndex, startIndex + columnCount);
+        rows.push({
+          type: 'cardRow',
+          groupTitle: group.title,
+          items: rowItems,
+          key: `${group.title}-row-${rowIndex}`,
+        });
+      }
+    });
+    return rows;
+  }, [groups, columnCount]);
+
+  const estimateSize = useCallback(
+    (index: number) => {
+      const row = flatRows[index];
+      return row.type === 'header' ? 50 : 250;
+    },
+    [flatRows],
+  );
+
+  const virtualizer = useWindowVirtualizer({
+    count: flatRows.length,
+    estimateSize,
+    overscan: 5,
+    initialOffset: parentRef.current?.offsetTop ?? 0,
+  });
+
+  return (
+    <div ref={parentRef}>
+      <div
+        style={{
+          position: 'relative',
+          height: isClient ? `${virtualizer.getTotalSize()}px` : 'auto',
+        }}
+      >
+        {isClient &&
+          virtualizer.getVirtualItems().map((virtualRow) => {
+            const rowData = flatRows[virtualRow.index];
+            if (rowData.type === 'header') {
+              return (
+                <HeaderRow
+                  key={rowData.key}
+                  ref={virtualizer.measureElement}
+                  data-index={virtualRow.index}
+                  style={{ transform: `translateY(${virtualRow.start}px)` }}
+                >
+                  <CatalogSeparatorLabel>{rowData.groupTitle}</CatalogSeparatorLabel>
+                  <CounterTag borderless>{rowData.groupCount}</CounterTag>
+                </HeaderRow>
+              );
+            }
+
+            return (
+              <VirtualRow
+                key={rowData.key}
+                ref={virtualizer.measureElement}
+                data-index={virtualRow.index}
+                style={{ transform: `translateY(${virtualRow.start}px)` }}
+              >
+                {rowData.items.map((item) => (
+                  <CatalogCard key={item.link} item={item} />
+                ))}
+              </VirtualRow>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+const VirtualRow = styled.div`
+  position: absolute;
+  left: 0;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(${CARD_MIN_WIDTH_VAR}), 1fr));
+  gap: ${GAP_SIZE}px;
+  padding-bottom: 32px;
+`;
+
+const HeaderRow = styled.div`
+  position: absolute;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: var(--catalog-separator-padding);
+  border-top: 1px solid var(--catalog-separator-border-color);
+  padding-bottom: calc(4px * 4);
+  color: var(--catalog-separator-color);
+  font-size: var(--catalog-separator-font-size);
+  font-weight: var(--catalog-separator-font-weight);
+`;
+
+const CatalogSeparatorLabel = styled.div`
+  margin: var(--catalog-separator-label-margin);
+`;

package/src/core/hooks/code-walkthrough/use-code-walkthrough-controls.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import type {
@@ -52,11 +52,15 @@ export function useCodeWalkthroughControls(
   const navigate = useNavigate();
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
 
-  const [controlsState, setControlsState] = useState(() => {
-    const initialState: CodeWalkthroughControlsState = {};
+  const filtersRef = useRef(filters);
+  const inputsRef = useRef(inputs);
+  const togglesRef = useRef(toggles);
+
+  const getInitialState = () => {
+    const state: CodeWalkthroughControlsState = {};
 
     for (const [id, toggle] of Object.entries(toggles)) {
-      initialState[id] = {
+      state[id] = {
         ...toggle,
         render: true,
         type: 'toggle',
@@ -65,7 +69,7 @@ export function useCodeWalkthroughControls(
     }
 
     for (const [id, input] of Object.entries(inputs)) {
-      initialState[id] = {
+      state[id] = {
         ...input,
         render: true,
         type: 'input',
@@ -75,7 +79,7 @@ export function useCodeWalkthroughControls(
 
     for (const [id, filter] of Object.entries(filters)) {
       const defaultValue = filter?.items?.[0]?.value || '';
-      initialState[id] = {
+      state[id] = {
         ...filter,
         render: true,
         type: 'filter',
@@ -83,8 +87,43 @@ export function useCodeWalkthroughControls(
       };
     }
 
-    return initialState;
-  });
+    return state;
+  };
+
+  const [controlsState, setControlsState] = useState(getInitialState);
+
+  useEffect(() => {
+    const sameProps = [
+      JSON.stringify(filters) === JSON.stringify(filtersRef.current),
+      JSON.stringify(inputs) === JSON.stringify(inputsRef.current),
+      JSON.stringify(toggles) === JSON.stringify(togglesRef.current),
+    ];
+
+    if (sameProps.every(Boolean)) {
+      return;
+    }
+
+    filtersRef.current = filters;
+    inputsRef.current = inputs;
+    togglesRef.current = toggles;
+
+    const newState = getInitialState();
+
+    // Preserve existing values where control type hasn't changed
+    Object.entries(newState).forEach(([id, control]) => {
+      const existingControl = controlsState[id];
+      if (existingControl && existingControl.type === control.type) {
+        // @ts-ignore
+        newState[id] = {
+          ...control,
+          value: existingControl.value,
+        };
+      }
+    });
+
+    setControlsState(newState);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters, inputs, toggles, enableDeepLink]);
 
   const changeControlState = (id: string, value: string | boolean) => {
     setControlsState((prev) => {
@@ -220,7 +259,8 @@ export function useCodeWalkthroughControls(
       getFileText,
       populateInputsWithValue,
     };
-  }, [filters, controlsState]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controlsState]);
 
   /**
    * Update the URL search params with the current state of the filters and inputs
@@ -245,7 +285,7 @@ export function useCodeWalkthroughControls(
     navigate({ search: newSearch });
     // Ignore searchParams in dependency array to avoid infinite re-renders
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filters, controlsState, navigate, location]);
+  }, [controlsState, navigate, location]);
 
   return {
     changeControlState,