@redocly/theme 0.60.0 → 0.61.0-next.0

package/lib/components/Catalog/Catalog.js

@@ -36,10 +36,20 @@ function Catalog(props) {
     const { catalogConfig, filters: serverFilters, entitiesTypes, initialEntitiesList, catalogSwitcherItems, initialViewMode, } = props;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { filters, searchQuery, setSearchQuery, filterQuery, sortOption, setSortOption, handleSortClick, isColumnSorted, viewMode, setViewMode, entitiesCounter, setEntitiesCounter, onChangeViewClick, onChangeCollapseSidebarClick, layout, collapsedSidebar, } = useCatalog(catalogConfig, serverFilters, (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0, initialViewMode);
+    const { filters, searchQuery, setSearchQuery, filterQuery, sortOption, setSortOption, handleSortClick, isColumnSorted, viewMode, setViewMode, entitiesCounter, setEntitiesCounter, onChangeViewClick, onChangeCollapseSidebarClick, layout, collapsedSidebar, } = useCatalog({
+        config: catalogConfig,
+        entitiesCounterInitial: (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0,
+        serverFilters,
+        initialViewMode,
+    });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/Catalog" },
-            react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, header: collapsedSidebar ? null : (react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, setSearchQuery: setSearchQuery, setSortOption: setSortOption })), menu: react_1.default.createElement(CatalogFilterContent_1.CatalogFilterContent, { setFilterTerm: setSearchQuery, filters: filters, filterTerm: searchQuery, hideSearch: true, showCounter: true, filterValuesCasing: customCatalogOptionsCasing }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
+            react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, header: collapsedSidebar ? null : (react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, onChange: () => {
+                        setSearchQuery('');
+                        setSortOption(null);
+                    } })), menu: react_1.default.createElement(CatalogFilterContent_1.CatalogFilterContent, { filters: filters, filterTerm: searchQuery, filterValuesCasing: customCatalogOptionsCasing, onClear: () => {
+                        setSearchQuery('');
+                    } }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
             react_1.default.createElement(CatalogPageContent, null,
                 react_1.default.createElement(CatalogPageDescription, null,
                     react_1.default.createElement(CatalogTitleWrapper, null,

package/lib/components/Catalog/CatalogEntities.js

@@ -45,7 +45,11 @@ const CatalogEntitiesEmptyState_1 = require("../../components/Catalog/CatalogEnt
 const LOAD_MORE_THRESHOLD = 10;
 function CatalogEntities(props) {
     const { catalogConfig, excludedEntities, filterQuery, entitiesTypes, sortOption, searchQuery, viewMode, setEntitiesCounter, setSortOption, handleSortClick, isColumnSorted, } = props;
-    const { useFetchCatalogEntities } = (0, hooks_1.useThemeHooks)();
+    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
+        catalogConfig,
+    });
+    const { useTelemetry, useFetchCatalogEntities } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     const { initialFilter } = (0, hooks_1.useCatalogEntities)({
         entitiesTypes,
         excludedEntities,
@@ -58,6 +62,18 @@ function CatalogEntities(props) {
         sort: sortOption || undefined,
         search: searchQuery,
     }, props.initialEntitiesList);
+    const onRowClick = (entity) => {
+        if (searchQuery) {
+            telemetry.sendCatalogEntitiesListSearchResultClickedMessage({
+                id: entity.id,
+                object: 'catalog_entity',
+                uri: getEntityDetailsLink(entity),
+                query: searchQuery,
+                entityKey: entity.key,
+                entityType: entity.type,
+            });
+        }
+    };
     const shouldShowLoadMore = query.hasNextPage ||
         (query.isPlaceholderData && entities && entities.length >= LOAD_MORE_THRESHOLD);
     (0, react_1.useEffect)(() => {
@@ -67,7 +83,7 @@ function CatalogEntities(props) {
         return react_1.default.createElement(CatalogEntitiesEmptyState_1.CatalogEntitiesEmptyState, null);
     }
     return (react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery], "data-component-name": "Catalog/CatalogEntities" },
-        viewMode === 'cards' ? (react_1.default.createElement(CatalogCardView_1.CatalogCardView, { entities: entities, catalogConfig: catalogConfig })) : (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: entities, catalogConfig: catalogConfig, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })),
+        viewMode === 'cards' ? (react_1.default.createElement(CatalogCardView_1.CatalogCardView, { entities: entities, catalogConfig: catalogConfig })) : (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: entities, catalogConfig: catalogConfig, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, onRowClick: onRowClick })),
         shouldShowLoadMore && (react_1.default.createElement(LoadMore_1.LoadMore, { icon: react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { size: "var(--catalog-load-more-icon-size)" }), onClick: query.fetchNextPage, disabled: query.isFetchingNextPage, blinking: query.isFetchingNextPage, label: query.isFetchingNextPage ? 'Loading...' : 'Load More' }))));
 }
 //# sourceMappingURL=CatalogEntities.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntity.js

@@ -26,15 +26,11 @@ const renderFirstColumnEntitySection = (entity) => {
             return react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity });
     }
 };
-const renderDataSchemaSection = (entity, relatedEntity, 
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-RedocSchema, 
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-StoreProvider, GraphqlTypeRenderer) => {
+const renderDataSchemaSection = ({ entity, relatedEntity, catalogConfig, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) => {
     if (entity.type !== 'data-schema') {
         return null;
     }
-    return (react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity, relatedEntity: relatedEntity, RedocSchema: RedocSchema, StoreProvider: StoreProvider, GraphqlTypeRenderer: GraphqlTypeRenderer }));
+    return (react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity, relatedEntity: relatedEntity, catalogConfig: catalogConfig, RedocSchema: RedocSchema, StoreProvider: StoreProvider, GraphqlTypeRenderer: GraphqlTypeRenderer }));
 };
 function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     var _a;
@@ -56,7 +52,14 @@ function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
                         react_1.default.createElement(react_router_dom_1.Route, { index: true, element: react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(CatalogPageDescription_1.CatalogPageDescription, { title: entity.title, description: (_a = entity.summary) !== null && _a !== void 0 ? _a : '', tag: entity.key }),
                                 react_1.default.createElement(CatalogEntityProperties_1.CatalogEntityProperties, { entity: entity }),
-                                renderDataSchemaSection(entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer),
+                                renderDataSchemaSection({
+                                    entity,
+                                    relatedEntity,
+                                    catalogConfig,
+                                    RedocSchema,
+                                    StoreProvider,
+                                    GraphqlTypeRenderer,
+                                }),
                                 react_1.default.createElement(CatalogTwoColumnsSection, null,
                                     renderFirstColumnEntitySection(entity),
                                     react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.d.ts

@@ -23,4 +23,4 @@ export type CatalogEntityRelationsTableProps = {
     shouldShowLoadMore: boolean;
     listType?: ListType;
 };
-export declare function CatalogEntityRelationsTable({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }: CatalogEntityRelationsTableProps): JSX.Element;
+export declare function CatalogEntityRelationsTable({ entity, entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }: CatalogEntityRelationsTableProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.js

@@ -8,11 +8,34 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogActionsRow_1 = require("../../../../components/Catalog/CatalogActionsRow");
 const CatalogEntityRelationsTableContent_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent");
-function CatalogEntityRelationsTable({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }) {
+const hooks_1 = require("../../../../core/hooks");
+const constants_1 = require("../../../../core/constants");
+function CatalogEntityRelationsTable({ entity, entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }) {
+    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
+        catalogConfig,
+        entitiesCatalogConfig,
+    });
+    const onRowClick = (relatedEntity) => {
+        if (searchQuery) {
+            telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage({
+                id: relatedEntity.id,
+                object: 'catalog_entity',
+                uri: getEntityDetailsLink(relatedEntity),
+                query: searchQuery,
+                entityKey: entity.key,
+                entityType: entity.type,
+                relationType: constants_1.reverseRelationMap[relatedEntity.relationType],
+                relatedEntityKey: relatedEntity.key,
+                relatedEntityType: relatedEntity.type,
+            });
+        }
+    };
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable" },
         heading && react_1.default.createElement(Heading, null, heading),
         react_1.default.createElement(CatalogActionsRow_1.CatalogActionsRow, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, style: { marginBottom: '12px' } }),
-        react_1.default.createElement(CatalogEntityRelationsTableContent_1.CatalogEntityRelationsTableContent, { entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, columns: columns, setSortOption: setSortOption, sortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: listType })));
+        react_1.default.createElement(CatalogEntityRelationsTableContent_1.CatalogEntityRelationsTableContent, { entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, columns: columns, setSortOption: setSortOption, sortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: listType, onRowClick: onRowClick })));
 }
 const Heading = styled_components_1.default.h2 `
   margin: var(--spacing-base) 0;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent.d.ts

@@ -19,5 +19,6 @@ export type CatalogEntityRelationsTableContentProps = {
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     shouldShowLoadMore: boolean;
     listType?: ListType;
+    onRowClick: (entity: BffCatalogRelatedEntity) => void;
 };
-export declare function CatalogEntityRelationsTableContent({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }: CatalogEntityRelationsTableContentProps): JSX.Element;
+export declare function CatalogEntityRelationsTableContent({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, onRowClick, }: CatalogEntityRelationsTableContentProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent.js

@@ -10,9 +10,9 @@ const LoadMore_1 = require("../../../../components/LoadMore/LoadMore");
 const CatalogTableView_1 = require("../../../../components/Catalog/CatalogTableView/CatalogTableView");
 const CatalogHighlight_1 = require("../../../../components/Catalog/CatalogHighlight");
 const CatalogEntitiesEmptyState_1 = require("../../../../components/Catalog/CatalogEntitiesEmptyState");
-function CatalogEntityRelationsTableContent({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }) {
+function CatalogEntityRelationsTableContent({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, onRowClick, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent" },
-        react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery] }, relations.length > 0 ? (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: relations, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, style: { marginTop: 0 } })) : (react_1.default.createElement(CatalogEntitiesEmptyState_1.CatalogEntitiesEmptyState, { listType: listType }))),
+        react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery] }, relations.length > 0 ? (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: relations, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, style: { marginTop: 0 }, onRowClick: onRowClick })) : (react_1.default.createElement(CatalogEntitiesEmptyState_1.CatalogEntitiesEmptyState, { listType: listType }))),
         shouldShowLoadMore && (react_1.default.createElement(LoadMore_1.LoadMore, { icon: react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { size: "var(--catalog-load-more-icon-size)" }), onClick: query.fetchNextPage, disabled: query.isFetchingNextPage, blinking: query.isFetchingNextPage, label: query.isFetchingNextPage ? 'Loading...' : 'Load More' }))));
 }
 //# sourceMappingURL=CatalogEntityRelationsTableContent.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
-import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../../core/types';
+import type { CatalogEntityConfig } from '@redocly/config';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '../../../core/types';
 export type CatalogEntitySchemaProps = {
     entity: BffCatalogEntity;
     relatedEntity: BffCatalogRelatedEntity | null;
+    catalogConfig: CatalogEntityConfig;
     RedocSchema: React.ComponentType<any>;
     StoreProvider: React.ComponentType<any>;
     GraphqlTypeRenderer?: React.ComponentType<{
@@ -10,4 +12,4 @@ export type CatalogEntitySchemaProps = {
         typeName: string;
     }>;
 };
-export declare function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer, }: CatalogEntitySchemaProps): React.JSX.Element;
+export declare function CatalogEntitySchema({ entity, relatedEntity, catalogConfig, RedocSchema, StoreProvider, GraphqlTypeRenderer, }: CatalogEntitySchemaProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.js

@@ -44,17 +44,25 @@ const hooks_1 = require("../../../core/hooks");
 const hooks_2 = require("../../../core/hooks");
 const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
 const CopyButton_1 = require("../../../components/Buttons/CopyButton");
-function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
+function CatalogEntitySchema({ entity, relatedEntity, catalogConfig, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     var _a, _b;
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     const { translate } = useTranslate();
     const { definition, parsedSchema, rawSchema } = (0, hooks_2.useCatalogEntitySchema)({ entity, relatedEntity });
     const isGraphql = ((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType) === 'graphql';
     const graphqlSDL = (_b = entity === null || entity === void 0 ? void 0 : entity.metadata) === null || _b === void 0 ? void 0 : _b.sdl;
+    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
+        catalogConfig,
+    });
     return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
         react_1.default.createElement(HeaderWrapper, null,
             react_1.default.createElement(Heading, null, translate('catalog.entity.schema.title')),
-            !isGraphql && (react_1.default.createElement(CopyButton_1.CopyButton, { data: rawSchema, buttonText: "Copy Schema", type: "compound", variant: "secondary", iconPosition: "right", size: "medium" }))),
+            !isGraphql && (react_1.default.createElement(CopyButton_1.CopyButton, { data: rawSchema, buttonText: "Copy Schema", type: "compound", variant: "secondary", iconPosition: "right", size: "medium", onCopyClick: () => telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage({
+                    id: entity.id,
+                    object: 'catalog_entity',
+                    uri: getEntityDetailsLink(entity),
+                }) }))),
         react_1.default.createElement(SplitViewWrapper, null,
             react_1.default.createElement(SchemaContentWrapper, null, isGraphql && graphqlSDL && GraphqlTypeRenderer ? (react_1.default.createElement(GraphqlTypeRenderer, { sdl: graphqlSDL, typeName: entity.title })) : (react_1.default.createElement(StoreProvider, { definition: definition },
                 react_1.default.createElement(RedocSchema, { schema: parsedSchema })))),

package/lib/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.js

@@ -103,7 +103,13 @@ function CatalogFilterCheckboxes({ filter, filterValuesCasing, showCounter = tru
                 const id = 'filter--' + filter.property + '--' + value;
                 return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
                         filter.toggleOption(value);
-                        telemetry.sendFilterCheckboxToggledMessage({ id });
+                        telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage({
+                            id: filter.property + '--' + value,
+                            object: 'checkbox',
+                            uri: window.location.href,
+                            category: filter.property,
+                            value: value,
+                        });
                     } },
                     react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
                             ? filter.selectedOptions.has(value) ||

package/lib/components/Catalog/CatalogFilter/CatalogFilterContent.d.ts

@@ -2,12 +2,11 @@ import type { JSX } from 'react';
 import type { ResolvedFilter } from '../../../core/types';
 import type { RedoclyConfig } from '../../../config';
 export type CatalogFilterContentProps = {
-    setFilterTerm: (value: string) => void;
+    onClear: () => void;
     filters: ResolvedFilter[];
     filterTerm: string;
     filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'] | ((str: string) => string);
-    hideSearch?: boolean;
     showCounter?: boolean;
     className?: string;
 };
-export declare function CatalogFilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, hideSearch, showCounter, className, }: CatalogFilterContentProps): JSX.Element | null;
+export declare function CatalogFilterContent({ onClear, filters, filterTerm, filterValuesCasing, showCounter, className, }: CatalogFilterContentProps): JSX.Element | null;

package/lib/components/Catalog/CatalogFilter/CatalogFilterContent.js

@@ -1,50 +1,16 @@
 "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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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.CatalogFilterContent = CatalogFilterContent;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const FilterInput_1 = require("../../../components/Filter/FilterInput");
+const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
 const Button_1 = require("../../../components/Button/Button");
 const CatalogFilter_1 = require("../../../components/Catalog/CatalogFilter/CatalogFilter");
 const utils_1 = require("../../../core/utils");
-function CatalogFilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, hideSearch, showCounter = true, className, }) {
+function CatalogFilterContent({ onClear, filters, filterTerm, filterValuesCasing, showCounter = true, className, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const hasActiveFilters = filters.some((filter) => {
@@ -61,7 +27,7 @@ function CatalogFilterContent({ setFilterTerm, filters, filterTerm, filterValues
     });
     const handleClearAll = () => {
         filters.forEach((filter) => filter.selectOption(''));
-        setFilterTerm('');
+        onClear();
     };
     if (!filters.length) {
         return null;
@@ -70,8 +36,7 @@ function CatalogFilterContent({ setFilterTerm, filters, filterTerm, filterValues
         react_1.default.createElement(FiltersHeader, null,
             react_1.default.createElement(FiltersTitle, { "data-translation-key": "catalog.filters.title" }, translate('catalog.filters.title', 'Filters')),
             hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", tone: "danger", variant: "ghost", onClick: handleClearAll }, translate('catalog.filters.clearAll', 'Clear filters'))) : null),
-        !hideSearch && (react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) })),
-        react_1.default.createElement(FilterItems, { hideSearch: hideSearch }, filters.map((filter, idx) => (react_1.default.createElement(CatalogFilter_1.CatalogFilter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing, showCounter: showCounter }))))));
+        react_1.default.createElement(FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(CatalogFilter_1.CatalogFilter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing, showCounter: showCounter }))))));
 }
 const CatalogFilterContentWrapper = styled_components_1.default.div `
   padding: 0 0 var(--filter-content-padding-vertical) 0;
@@ -94,9 +59,5 @@ const FilterItems = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--border-color-secondary);
-  ${({ hideSearch }) => hideSearch &&
-    (0, styled_components_1.css) `
-      border-top: none;
-    `}
 `;
 //# sourceMappingURL=CatalogFilterContent.js.map

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

@@ -1,12 +1,11 @@
 import { JSX } from 'react';
 import { Select } from '../../components/Select/Select';
-import { CatalogSwitcherItem, SortOption } from '../../core/types';
+import { CatalogSwitcherItem } from '../../core/types';
 export type CatalogSelectorProps = {
     catalogSwitcherItems: CatalogSwitcherItem[];
-    setSearchQuery: (query: string) => void;
-    setSortOption: (option: SortOption | null) => void;
+    onChange: () => void;
 };
-export declare function CatalogSelector({ catalogSwitcherItems, setSearchQuery, setSortOption, }: CatalogSelectorProps): JSX.Element;
+export declare function CatalogSelector({ catalogSwitcherItems, onChange, }: CatalogSelectorProps): JSX.Element;
 export declare const CatalogSelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CatalogSelectLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
 export declare const CatalogSelect: import("styled-components").StyledComponent<typeof Select, any, {}, never>;

package/lib/components/Catalog/CatalogSelector.js

@@ -12,7 +12,7 @@ const Select_1 = require("../../components/Select/Select");
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
-function CatalogSelector({ catalogSwitcherItems, setSearchQuery, setSortOption, }) {
+function CatalogSelector({ catalogSwitcherItems, onChange, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const navigate = (0, react_router_dom_1.useNavigate)();
@@ -27,8 +27,7 @@ function CatalogSelector({ catalogSwitcherItems, setSearchQuery, setSortOption,
         react_1.default.createElement(exports.CatalogSelectLabel, null, translate('catalog.catalogs.label', 'Catalogs')),
         react_1.default.createElement(exports.CatalogSelect, { value: selectedCatalogItem === null || selectedCatalogItem === void 0 ? void 0 : selectedCatalogItem.slug, options: options, onChange: (value) => {
                 navigate(`${pathPrefix}/catalogs/${value}`);
-                setSearchQuery('');
-                setSortOption(null);
+                onChange();
             }, icon: react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { color: "var(--catalog-select-icon-color)" }) })));
 }
 exports.CatalogSelectWrapper = styled_components_1.default.div `

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

@@ -15,6 +15,7 @@ export type CatalogTableViewProps<T extends BaseEntity> = {
     columns?: CatalogColumn<T>[];
     setSortOption: (sortOption: SortOption | null) => void;
     currentSortOption?: SortOption | null;
+    onRowClick?: (entity: T) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     style?: React.CSSProperties;
@@ -28,4 +29,4 @@ export type CatalogColumn<T> = {
     sortable?: boolean;
     sortKey?: string;
 };
-export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, handleSortClick, isColumnSorted, style, }: CatalogTableViewProps<T>) => React.JSX.Element;
+export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, }: CatalogTableViewProps<T>) => React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogTableView.js

@@ -60,10 +60,10 @@ const baseColumns = [
         minWidth: '120px',
     },
 ];
-const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, setSortOption, currentSortOption, handleSortClick, isColumnSorted, style, }) => {
+const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, }) => {
     return (react_1.default.createElement(CatalogTableWrapper, { "data-component-name": "Catalog/CatalogTableView", style: style },
         react_1.default.createElement(CatalogTableHeader, { columnsWidths: columns.map((column) => column.width || '1fr'), columnsMinWidths: columns.map((column) => column.minWidth || 'auto') }, columns.map((column) => (react_1.default.createElement(CatalogTableHeaderCell_1.CatalogTableHeaderCell, { key: column.key, column: column, setSortOption: setSortOption, currentSortOption: currentSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))),
-        react_1.default.createElement("div", null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns }))))));
+        react_1.default.createElement("div", null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, onRowClick: onRowClick }))))));
 };
 exports.CatalogTableView = CatalogTableView;
 const CatalogTableWrapper = styled_components_1.default.div `

package/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.d.ts

@@ -12,6 +12,7 @@ export type CatalogTableViewRowProps<T extends BaseEntity> = {
     entitiesCatalogConfig?: EntitiesCatalogConfig;
     catalogConfig: CatalogEntityConfig;
     columns?: CatalogColumn<T>[];
+    onRowClick?: (entity: T) => void;
 };
 export type CatalogColumn<T> = {
     key: string;
@@ -22,4 +23,4 @@ export type CatalogColumn<T> = {
     sortable?: boolean;
     sortKey?: string;
 };
-export declare const CatalogTableViewRow: <T extends BaseEntity>({ entity, entitiesCatalogConfig, catalogConfig, columns, }: CatalogTableViewRowProps<T>) => React.JSX.Element;
+export declare const CatalogTableViewRow: <T extends BaseEntity>({ entity, entitiesCatalogConfig, catalogConfig, columns, onRowClick, }: CatalogTableViewRowProps<T>) => React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.js

@@ -60,14 +60,12 @@ const baseColumns = [
         minWidth: '120px',
     },
 ];
-const CatalogTableViewRow = ({ entity, entitiesCatalogConfig, catalogConfig, columns = baseColumns, }) => {
-    const { getEntityDetailsLink } = (0, hooks_1.useCatalogTableViewRow)({
-        entityKey: entity.key,
-        entityType: entity.type,
+const CatalogTableViewRow = ({ entity, entitiesCatalogConfig, catalogConfig, columns = baseColumns, onRowClick = () => { }, }) => {
+    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
         catalogConfig,
         entitiesCatalogConfig,
     });
-    return (react_1.default.createElement(TableRow, { key: entity.id, "$columnsWidths": columns.map((column) => column.width || '1fr'), "$columnsMinWidths": columns.map((column) => column.minWidth || 'auto'), to: getEntityDetailsLink() + '?search=', style: { color: 'var(--catalog-page-wrapper-text-color)' }, "data-component-name": "Catalog/CatalogTableView/CatalogTableViewRow" }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
+    return (react_1.default.createElement(TableRow, { key: entity.id, "$columnsWidths": columns.map((column) => column.width || '1fr'), "$columnsMinWidths": columns.map((column) => column.minWidth || 'auto'), to: getEntityDetailsLink(entity) + '?search=', onClick: () => onRowClick(entity), style: { color: 'var(--catalog-page-wrapper-text-color)' }, "data-component-name": "Catalog/CatalogTableView/CatalogTableViewRow" }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
 };
 exports.CatalogTableViewRow = CatalogTableViewRow;
 const TableRow = (0, styled_components_1.default)(Link_1.Link) `

package/lib/core/hooks/catalog/use-catalog-entity-details.d.ts

@@ -0,0 +1,11 @@
+import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { BffCatalogEntity } from '../../../core/types';
+type Props = {
+    catalogConfig: CatalogEntityConfig;
+    entitiesCatalogConfig?: EntitiesCatalogConfig;
+};
+type BaseEntity = Pick<BffCatalogEntity, 'key' | 'type'>;
+export declare function useCatalogEntityDetails({ catalogConfig, entitiesCatalogConfig }: Props): {
+    getEntityDetailsLink: (entity: BaseEntity) => string;
+};
+export {};

package/lib/core/hooks/catalog/{use-catalog-table-view-row.js → use-catalog-entity-details.js}

@@ -1,26 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCatalogTableViewRow = useCatalogTableViewRow;
+exports.useCatalogEntityDetails = useCatalogEntityDetails;
 const urls_1 = require("../../utils/urls");
-function useCatalogTableViewRow({ entityKey, entityType, catalogConfig, entitiesCatalogConfig, }) {
-    const getCatalogSpecificConfigByEntityTypeIncluded = () => {
+function useCatalogEntityDetails({ catalogConfig, entitiesCatalogConfig }) {
+    const getCatalogSpecificConfigByEntityTypeIncluded = (entity) => {
         var _a;
         if (!entitiesCatalogConfig) {
             return;
         }
         return Object.values((_a = entitiesCatalogConfig.catalogs) !== null && _a !== void 0 ? _a : {}).find((catalog) => {
             var _a;
-            return (_a = catalog === null || catalog === void 0 ? void 0 : catalog.includes) === null || _a === void 0 ? void 0 : _a.some((include) => include.type === entityType);
+            return (_a = catalog === null || catalog === void 0 ? void 0 : catalog.includes) === null || _a === void 0 ? void 0 : _a.some((include) => include.type === entity.type);
         });
     };
-    const getEntityDetailsLink = () => {
+    const getEntityDetailsLink = (entity) => {
         const pathPrefix = (0, urls_1.getPathPrefix)();
-        const catalogSpecificConfig = getCatalogSpecificConfigByEntityTypeIncluded();
+        const catalogSpecificConfig = getCatalogSpecificConfigByEntityTypeIncluded(entity);
         if (!catalogSpecificConfig || !entitiesCatalogConfig) {
-            return `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entityKey}`;
+            return `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`;
         }
-        return `${pathPrefix}/catalogs/${catalogSpecificConfig.slug}/entities/${entityKey}`;
+        return `${pathPrefix}/catalogs/${catalogSpecificConfig.slug}/entities/${entity.key}`;
     };
     return { getEntityDetailsLink };
 }
-//# sourceMappingURL=use-catalog-table-view-row.js.map
+//# sourceMappingURL=use-catalog-entity-details.js.map

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

@@ -45,6 +45,6 @@ export * from './use-user-teams';
 export * from './use-page-actions';
 export * from './use-mcp-config';
 export * from './use-connect-mcp-button';
-export * from './catalog/use-catalog-table-view-row';
+export * from './catalog/use-catalog-entity-details';
 export * from './catalog/use-catalog-entity-schema';
 export * from './catalog/use-catalog-table-header-cell-actions';

package/lib/core/hooks/index.js

@@ -61,7 +61,7 @@ __exportStar(require("./use-user-teams"), exports);
 __exportStar(require("./use-page-actions"), exports);
 __exportStar(require("./use-mcp-config"), exports);
 __exportStar(require("./use-connect-mcp-button"), exports);
-__exportStar(require("./catalog/use-catalog-table-view-row"), exports);
+__exportStar(require("./catalog/use-catalog-entity-details"), exports);
 __exportStar(require("./catalog/use-catalog-entity-schema"), exports);
 __exportStar(require("./catalog/use-catalog-table-header-cell-actions"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/types/catalog.d.ts

@@ -1,8 +1,20 @@
 import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
 import { ENTITY_RELATION_TYPES } from '@redocly/config';
-import type { CatalogEntityConfig, LayoutVariant } from '@redocly/config';
+import type { CatalogEntityConfig, EntitiesCatalogConfig, LayoutVariant } from '@redocly/config';
 import type { CatalogFilterConfig } from '../../config';
 export type SortOption = 'title' | '-title' | 'type' | '-type';
+export type FilterResult = {
+    value: string;
+    count: number;
+};
+export type CatalogFiltersWithCounts = Record<string, FilterResult[]>;
+export type UseCatalogProps = {
+    config?: CatalogEntityConfig;
+    entitiesCatalogConfig?: EntitiesCatalogConfig;
+    serverFilters?: CatalogFiltersWithCounts;
+    entitiesCounterInitial?: number;
+    initialViewMode?: CatalogViewMode;
+};
 export type UseCatalogResponse = {
     filters: ResolvedFilter[];
     filterQuery: string;
@@ -21,6 +33,10 @@ export type UseCatalogResponse = {
     layout: LayoutVariant;
     collapsedSidebar: boolean;
 };
+export type UseCatalogFetchCatalogEntities = (params: CatalogApiParams, initialData?: BffCatalogEntityList) => CatalogApiResults<BffCatalogEntity>;
+export type UseCatalogFetchCatalogEntitiesRelations = (params: CatalogApiParams & {
+    entityKey: string;
+}, initialData?: BffCatalogRelatedEntityList) => CatalogApiResults<BffCatalogRelatedEntity>;
 export type UseCatalogSortResponse = {
     sortOption: SortOption | null;
     setSortOption: (option: SortOption | null) => void;
@@ -83,8 +99,8 @@ export type CatalogItem = {
     [k: string]: unknown;
 };
 export type DefaultCatalogSlug = 'services' | 'users' | 'teams' | 'domains' | 'api-descriptions' | 'all';
-export type CatalogApiResults<T, L> = {
-    query: UseInfiniteQueryResult<InfiniteData<L, unknown>, Error>;
+export type CatalogApiResults<T> = {
+    query: UseInfiniteQueryResult<InfiniteData<BffCatalogList<T>, unknown>, Error>;
     items: T[];
     total: number;
 };
@@ -158,16 +174,13 @@ export type BffCatalogEntity = {
     readonly createdAt: string;
     readonly updatedAt: string;
 };
-export type BffCatalogEntityList = {
-    object: 'list';
-    page: Page;
-    items: Array<BffCatalogEntity>;
-};
-export type BffCatalogRelatedEntityList = {
+export type BffCatalogList<T> = {
     object: 'list';
     page: Page;
-    items: Array<BffCatalogRelatedEntity>;
+    items: Array<T>;
 };
+export type BffCatalogEntityList = BffCatalogList<BffCatalogEntity>;
+export type BffCatalogRelatedEntityList = BffCatalogList<BffCatalogRelatedEntity>;
 export type Page = {
     endCursor: string | null;
     startCursor: string | null;