@redocly/theme 0.51.0-next.4 → 0.51.0

package/lib/components/Catalog/Catalog.js

@@ -10,12 +10,13 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const H2_1 = require("../../components/Typography/H2");
+const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const CatalogActions_1 = require("../../components/Catalog/CatalogActions");
 const Sidebar_1 = require("../../components/Sidebar/Sidebar");
-const CatalogVirtualizedGroups_1 = require("../../components/Catalog/CatalogVirtualizedGroups");
+const CounterTag_1 = require("../../components/Tags/CounterTag");
 function Catalog(props) {
     const { catalogConfig } = props.pageProps;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
@@ -38,8 +39,25 @@ function Catalog(props) {
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
                         ' ')) : null),
-                react_1.default.createElement(CatalogVirtualizedGroups_1.CatalogVirtualizedGroups, { groups: groups })))));
+                groups.map((group) => (react_1.default.createElement(react_1.default.Fragment, { key: group.title },
+                    react_1.default.createElement(CatalogSeparator, { "data-testid": "catalog-separator" },
+                        react_1.default.createElement(CatalogSeparatorLabel, null, group.title),
+                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, group.items.length)),
+                    react_1.default.createElement(CatalogCards, null, group.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item, key: item.link })))))))))));
 }
+const CatalogSeparator = styled_components_1.default.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_components_1.default.div `
+  margin: var(--catalog-separator-label-margin);
+`;
 exports.CatalogPageContent = styled_components_1.default.main `
   flex: 1;
   width: 90%;
@@ -50,6 +68,12 @@ exports.CatalogPageContent = styled_components_1.default.main `
     padding: var(--catalog-page-padding);
   }
 `;
+const CatalogCards = styled_components_1.default.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);
+`;
 exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);

package/lib/core/hooks/index.d.ts

@@ -33,4 +33,3 @@ export * from '../../core/hooks/code-walkthrough/use-code-walkthrough-steps';
 export * from '../../core/hooks/code-walkthrough/use-code-walkthrough-controls';
 export * from '../../core/hooks/code-walkthrough/use-code-panel';
 export * from '../../core/hooks/code-walkthrough/use-renderable-files';
-export * from '../../core/hooks/use-element-size';

package/lib/core/hooks/index.js

@@ -49,5 +49,4 @@ __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-ste
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-controls"), exports);
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-panel"), exports);
 __exportStar(require("../../core/hooks/code-walkthrough/use-renderable-files"), exports);
-__exportStar(require("../../core/hooks/use-element-size"), exports);
 //# sourceMappingURL=index.js.map

package/lib/index.d.ts

@@ -102,7 +102,6 @@ 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';
@@ -222,8 +221,6 @@ 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,7 +150,6 @@ __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);
@@ -274,8 +273,6 @@ __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/package.json

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

package/src/components/Catalog/Catalog.tsx

@@ -6,12 +6,13 @@ 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 { CatalogVirtualizedGroups } from '@redocly/theme/components/Catalog/CatalogVirtualizedGroups';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 
 export type CatalogProps = {
   pageProps: {
@@ -72,14 +73,40 @@ export default function Catalog(props: CatalogProps): JSX.Element {
               </CatalogDescription>
             ) : null}
           </CatalogPageDescriptionWrapper>
-
-          <CatalogVirtualizedGroups groups={groups} />
+          {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>
+          ))}
         </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%;
@@ -91,6 +118,13 @@ 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/core/hooks/index.ts

@@ -33,4 +33,3 @@ export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-walkthrough-s
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-walkthrough-controls';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-panel';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-renderable-files';
-export * from '@redocly/theme/core/hooks/use-element-size';

package/src/index.ts

@@ -122,7 +122,6 @@ export * from '@redocly/theme/components/Catalog/CatalogCard';
 export * from '@redocly/theme/components/Catalog/CatalogActions';
 export * from '@redocly/theme/components/Catalog/CatalogHighlight';
 export * from '@redocly/theme/components/Catalog/CatalogInfoBlock';
-export * from '@redocly/theme/components/Catalog/CatalogVirtualizedGroups';
 /* Product */
 export * from '@redocly/theme/components/Product/Product';
 export * from '@redocly/theme/components/Product/ProductPicker';
@@ -246,8 +245,6 @@ export * from '@redocly/theme/icons/DraggableIcon/DraggableIcon';
 export * from '@redocly/theme/icons/WarningAltFilledIcon/WarningAltFilledIcon';
 export * from '@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon';
 export * from '@redocly/theme/icons/SettingsCogIcon/SettingsCogIcon';
-export * from '@redocly/theme/icons/CheckboxFilledIcon/CheckboxFilledIcon';
-export * from '@redocly/theme/icons/WarningAltFilled/WarningAltFilled';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/lib/components/Catalog/CatalogVirtualizedGroups.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { CatalogItem } from '../../core/types';
-type Group = {
-    title: string;
-    items: CatalogItem[];
-};
-type CatalogVirtualizedGroupsProps = {
-    groups: Group[];
-};
-export declare function CatalogVirtualizedGroups({ groups }: CatalogVirtualizedGroupsProps): React.JSX.Element;
-export {};

package/lib/components/Catalog/CatalogVirtualizedGroups.js

@@ -1,125 +0,0 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogVirtualizedGroups = CatalogVirtualizedGroups;
-const react_1 = __importStar(require("react"));
-const react_virtual_1 = require("@tanstack/react-virtual");
-const styled_components_1 = __importDefault(require("styled-components"));
-const use_element_size_1 = require("../../core/hooks/use-element-size");
-const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
-const CounterTag_1 = require("../../components/Tags/CounterTag");
-const GAP_SIZE = 32;
-const CARD_MIN_WIDTH_VAR = '--api-catalog-card-min-width';
-function CatalogVirtualizedGroups({ groups }) {
-    var _a, _b;
-    const parentRef = (0, react_1.useRef)(null);
-    const [isClient, setIsClient] = (0, react_1.useState)(typeof window !== 'undefined');
-    const { width } = (0, use_element_size_1.useElementSize)(parentRef);
-    (0, react_1.useEffect)(() => {
-        setIsClient(true);
-    }, []);
-    const columnCount = (0, react_1.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 = (0, react_1.useMemo)(() => {
-        const rows = [];
-        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 = (0, react_1.useCallback)((index) => {
-        const row = flatRows[index];
-        return row.type === 'header' ? 50 : 250;
-    }, [flatRows]);
-    const virtualizer = (0, react_virtual_1.useWindowVirtualizer)({
-        count: flatRows.length,
-        estimateSize,
-        overscan: 5,
-        initialOffset: (_b = (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0,
-    });
-    return (react_1.default.createElement("div", { ref: parentRef },
-        react_1.default.createElement("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 (react_1.default.createElement(HeaderRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } },
-                        react_1.default.createElement(CatalogSeparatorLabel, null, rowData.groupTitle),
-                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
-                }
-                return (react_1.default.createElement(VirtualRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } }, rowData.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { key: item.link, item: item })))));
-            }))));
-}
-const VirtualRow = styled_components_1.default.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_components_1.default.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_components_1.default.div `
-  margin: var(--catalog-separator-label-margin);
-`;
-//# sourceMappingURL=CatalogVirtualizedGroups.js.map

package/lib/core/hooks/use-element-size.d.ts

@@ -1,7 +0,0 @@
-import { RefObject } from 'react';
-type Size = {
-    width: number;
-    height: number;
-};
-export declare const useElementSize: <T extends HTMLElement = HTMLElement>(ref?: RefObject<T>, delay?: number) => Size;
-export {};

package/lib/core/hooks/use-element-size.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useElementSize = void 0;
-const react_1 = require("react");
-const getInitialSize = (ref) => {
-    if (ref === null || ref === void 0 ? void 0 : ref.current) {
-        return {
-            width: ref.current.offsetWidth,
-            height: ref.current.offsetHeight,
-        };
-    }
-    return {
-        width: typeof window !== 'undefined' ? window.innerWidth : 0,
-        height: typeof window !== 'undefined' ? window.innerHeight : 0,
-    };
-};
-const useElementSize = (ref, delay = 100) => {
-    const [size, setSize] = (0, react_1.useState)(getInitialSize(ref));
-    const updateSize = (0, react_1.useCallback)((newSize) => {
-        setSize(newSize);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        let timeoutId = null;
-        const triggerUpdateWithThrottling = (newSize) => {
-            if (timeoutId !== null)
-                return;
-            timeoutId = window.setTimeout(() => {
-                updateSize(newSize);
-                timeoutId = null;
-            }, delay);
-        };
-        if ((ref === null || ref === void 0 ? void 0 : ref.current) && typeof ResizeObserver !== 'undefined') {
-            const observer = new ResizeObserver((entries) => {
-                for (const entry of entries) {
-                    const { width, height } = entry.contentRect;
-                    triggerUpdateWithThrottling({ width, height });
-                }
-            });
-            observer.observe(ref.current);
-            return () => {
-                observer.disconnect();
-                if (timeoutId !== null) {
-                    clearTimeout(timeoutId);
-                }
-            };
-        }
-    }, [ref, updateSize, delay]);
-    return size;
-};
-exports.useElementSize = useElementSize;
-//# sourceMappingURL=use-element-size.js.map

package/lib/icons/CheckboxFilledIcon/CheckboxFilledIcon.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { IconProps } from '../../icons/types';
-export declare const CheckboxFilledIcon: 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/CheckboxFilledIcon/CheckboxFilledIcon.js

@@ -1,22 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxFilledIcon = 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 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-    react_1.default.createElement("path", { d: "M13 2.51172H3C2.73478 2.51172 2.48043 2.61708 2.29289 2.80461C2.10536 2.99215 2 3.2465 2 3.51172V13.5117C2 13.7769 2.10536 14.0313 2.29289 14.2188C2.48043 14.4064 2.73478 14.5117 3 14.5117H13C13.2652 14.5117 13.5196 14.4064 13.7071 14.2188C13.8946 14.0313 14 13.7769 14 13.5117V3.51172C14 3.2465 13.8946 2.99215 13.7071 2.80461C13.5196 2.61708 13.2652 2.51172 13 2.51172ZM7 11.2617L4.5 8.78307L5.2954 8.01172L7 9.68452L10.7044 6.01172L11.5002 6.80032L7 11.2617Z" })));
-exports.CheckboxFilledIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
-    'data-component-name': 'icons/CheckboxFilledIcon/CheckboxFilledIcon',
-})) `
-  path {
-    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
-  }
-
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
-`;
-//# sourceMappingURL=CheckboxFilledIcon.js.map

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

@@ -1,9 +0,0 @@
-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

@@ -1,23 +0,0 @@
-"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/src/components/Catalog/CatalogVirtualizedGroups.tsx

@@ -1,152 +0,0 @@
-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/use-element-size.ts

@@ -1,61 +0,0 @@
-import { useState, useEffect, useCallback, RefObject } from 'react';
-
-type Size = {
-  width: number;
-  height: number;
-};
-
-const getInitialSize = (ref?: RefObject<HTMLElement>): Size => {
-  if (ref?.current) {
-    return {
-      width: ref.current.offsetWidth,
-      height: ref.current.offsetHeight,
-    };
-  }
-  return {
-    width: typeof window !== 'undefined' ? window.innerWidth : 0,
-    height: typeof window !== 'undefined' ? window.innerHeight : 0,
-  };
-};
-
-export const useElementSize = <T extends HTMLElement = HTMLElement>(
-  ref?: RefObject<T>,
-  delay: number = 100,
-): Size => {
-  const [size, setSize] = useState<Size>(getInitialSize(ref));
-
-  const updateSize = useCallback((newSize: Size) => {
-    setSize(newSize);
-  }, []);
-
-  useEffect(() => {
-    let timeoutId: number | null = null;
-
-    const triggerUpdateWithThrottling = (newSize: Size) => {
-      if (timeoutId !== null) return;
-      timeoutId = window.setTimeout(() => {
-        updateSize(newSize);
-        timeoutId = null;
-      }, delay);
-    };
-
-    if (ref?.current && typeof ResizeObserver !== 'undefined') {
-      const observer = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          const { width, height } = entry.contentRect;
-          triggerUpdateWithThrottling({ width, height });
-        }
-      });
-      observer.observe(ref.current);
-
-      return () => {
-        observer.disconnect();
-        if (timeoutId !== null) {
-          clearTimeout(timeoutId);
-        }
-      };
-    }
-  }, [ref, updateSize, delay]);
-
-  return size;
-};

package/src/icons/CheckboxFilledIcon/CheckboxFilledIcon.tsx

@@ -1,23 +0,0 @@
-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 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M13 2.51172H3C2.73478 2.51172 2.48043 2.61708 2.29289 2.80461C2.10536 2.99215 2 3.2465 2 3.51172V13.5117C2 13.7769 2.10536 14.0313 2.29289 14.2188C2.48043 14.4064 2.73478 14.5117 3 14.5117H13C13.2652 14.5117 13.5196 14.4064 13.7071 14.2188C13.8946 14.0313 14 13.7769 14 13.5117V3.51172C14 3.2465 13.8946 2.99215 13.7071 2.80461C13.5196 2.61708 13.2652 2.51172 13 2.51172ZM7 11.2617L4.5 8.78307L5.2954 8.01172L7 9.68452L10.7044 6.01172L11.5002 6.80032L7 11.2617Z" />
-  </svg>
-);
-
-export const CheckboxFilledIcon = styled(Icon).attrs(() => ({
-  'data-component-name': 'icons/CheckboxFilledIcon/CheckboxFilledIcon',
-}))<IconProps>`
-  path {
-    fill: ${({ color }) => getCssColorVariable(color)};
-  }
-
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
-`;

package/src/icons/WarningAltFilled/WarningAltFilled.tsx

@@ -1,24 +0,0 @@
-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="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" />
-    <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" />
-  </svg>
-);
-
-export const WarningAltFilled = styled(Icon).attrs(() => ({
-  'data-component-name': 'icons/WarningAltFilled/WarningAltFilled',
-}))<IconProps>`
-  path {
-    fill: ${({ color }) => getCssColorVariable(color)};
-  }
-
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
-`;