@redocly/theme 0.63.0 → 0.64.0-next.0

package/lib/components/Catalog/Catalog.js

@@ -48,11 +48,10 @@ const CatalogSelector_1 = require("../../components/Catalog/CatalogSelector");
 const SidebarActions_1 = require("../../components/SidebarActions/SidebarActions");
 const CounterTag_1 = require("../../components/Tags/CounterTag");
 const FilterInput_1 = require("../../components/Filter/FilterInput");
-const CatalogViewModeToggle_1 = require("../../components/Catalog/CatalogViewModeToggle");
-const CatalogSortButton_1 = require("../../components/Catalog/CatalogSortButton");
 const CatalogEntities_1 = require("../../components/Catalog/CatalogEntities");
 const CatalogMobileTopBar_1 = require("../../components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar");
 const CatalogMobileFiltersPanelOverlay_1 = require("../../components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay");
+const CatalogActionsRow_1 = require("../../components/Catalog/CatalogActionsRow");
 function getActiveFiltersCount(filters, filterTerm) {
     const filterOptionsCount = filters.reduce((sum, filter) => {
         if (filter.selectedOptions instanceof Set)
@@ -101,29 +100,9 @@ function Catalog(props) {
                                 ' '),
                             react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, entitiesCounter)),
                         react_1.default.createElement(CatalogDescription, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey }, translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.descriptionTranslationKey)),
-                        react_1.default.createElement(CatalogActionsRow, null,
-                            react_1.default.createElement(CatalogSearchInputWrapper, null,
-                                react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm), dataTestId: "catalog-search-input" })),
-                            react_1.default.createElement(CatalogControlsWrapper, null,
-                                react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
-                                react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: setViewMode }))),
-                        react_1.default.createElement(CatalogEntities_1.CatalogEntities, { catalogConfig: catalogConfig, excludedEntities: catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.excludes, filterQuery: filterQuery, entitiesTypes: entitiesTypes, sortOption: sortOption, searchQuery: searchQuery, viewMode: viewMode, setEntitiesCounter: setEntitiesCounter, initialEntitiesList: initialEntitiesList, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))))));
+                        react_1.default.createElement(CatalogActionsRow_1.CatalogActionsRow, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, viewMode: viewMode, onViewModeChange: setViewMode }),
+                        react_1.default.createElement(CatalogEntities_1.CatalogEntities, { catalogConfig: catalogConfig, excludedEntities: catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.excludes, filterQuery: filterQuery, entitiesTypes: entitiesTypes, sortOption: sortOption, searchQuery: searchQuery, viewMode: viewMode, setEntitiesCounter: setEntitiesCounter, initialEntitiesList: initialEntitiesList, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))))));
 }
-const CatalogActionsRow = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--spacing-xl);
-
-  @media screen and (max-width: ${utils_1.breakpoints.medium}) {
-    display: none;
-  }
-`;
-const CatalogControlsWrapper = styled_components_1.default.div `
-  display: var(--catalog-controls-wrapper-display);
-  align-items: var(--catalog-controls-wrapper-align-items);
-  margin-left: var(--catalog-controls-wrapper-margin-left);
-  gap: var(--catalog-controls-wrapper-gap);
-`;
 const CatalogContentWrapper = styled_components_1.default.div `
   flex: 1;
   min-width: 0;
@@ -216,12 +195,4 @@ const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
     border: none;
   }
 `;
-const CatalogSearchInputWrapper = styled_components_1.default.div `
-  display: none;
-  width: var(--catalog-search-input-wrapper-width);
-
-  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-    display: block;
-  }
-`;
 //# sourceMappingURL=Catalog.js.map

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

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import { JSX } from 'react';
 import { SortOption, CatalogViewMode } from '../../core/types';
 export type CatalogActionsRowProps = {
     searchQuery: string;
@@ -7,9 +7,11 @@ export type CatalogActionsRowProps = {
     setSortOption: (option: SortOption | null) => void;
     viewMode?: CatalogViewMode;
     onViewModeChange?: (mode: CatalogViewMode) => void;
-    style?: React.CSSProperties;
+    isDetailsPage?: boolean;
 };
-export declare function CatalogActionsRow({ searchQuery, setSearchQuery, sortOption, setSortOption, viewMode, onViewModeChange, style, }: CatalogActionsRowProps): JSX.Element;
-export declare const CatalogActionsRowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare function CatalogActionsRow({ searchQuery, setSearchQuery, sortOption, setSortOption, viewMode, onViewModeChange, isDetailsPage, }: CatalogActionsRowProps): JSX.Element;
+export declare const CatalogActionsRowWrapper: import("styled-components").StyledComponent<"div", any, {
+    isDetailsPage: boolean;
+}, never>;
 export declare const CatalogControlsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CatalogSearchInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Catalog/CatalogActionsRow.js

@@ -1,4 +1,37 @@
 "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 };
 };
@@ -6,21 +39,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogSearchInputWrapper = exports.CatalogControlsWrapper = exports.CatalogActionsRowWrapper = void 0;
 exports.CatalogActionsRow = CatalogActionsRow;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const FilterInput_1 = require("../../components/Filter/FilterInput");
 const CatalogSortButton_1 = require("../../components/Catalog/CatalogSortButton");
 const CatalogViewModeToggle_1 = require("../../components/Catalog/CatalogViewModeToggle");
-function CatalogActionsRow({ searchQuery, setSearchQuery, sortOption, setSortOption, viewMode, onViewModeChange, style, }) {
-    return (react_1.default.createElement(exports.CatalogActionsRowWrapper, { style: style },
+const core_1 = require("../../core");
+function CatalogActionsRow({ searchQuery, setSearchQuery, sortOption, setSortOption, viewMode, onViewModeChange, isDetailsPage = false, }) {
+    return (react_1.default.createElement(exports.CatalogActionsRowWrapper, { isDetailsPage: isDetailsPage },
         react_1.default.createElement(exports.CatalogSearchInputWrapper, null,
-            react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm) })),
+            react_1.default.createElement(FilterInput_1.FilterInput, { value: searchQuery, onChange: (updatedTerm) => setSearchQuery(updatedTerm), dataTestId: "catalog-search-input" })),
         react_1.default.createElement(exports.CatalogControlsWrapper, null,
-            react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption }),
+            viewMode === 'cards' && (react_1.default.createElement(CatalogSortButton_1.CatalogSortButton, { onSortChange: setSortOption, currentSort: sortOption })),
             viewMode && onViewModeChange && (react_1.default.createElement(CatalogViewModeToggle_1.CatalogViewModeToggle, { viewMode: viewMode, onViewModeChange: onViewModeChange })))));
 }
 exports.CatalogActionsRowWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
+
+  margin-bottom: ${({ isDetailsPage }) => (isDetailsPage ? 'var(--spacing-sm)' : 'var(--spacing-xl)')};
+  
+
+  ${({ isDetailsPage }) => !isDetailsPage &&
+    (0, styled_components_1.css) `
+    @media screen and (max-width: ${core_1.breakpoints.medium}) {
+      display: none;
+    }
+  `}
 `;
 exports.CatalogControlsWrapper = styled_components_1.default.div `
   display: var(--catalog-controls-wrapper-display);

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

@@ -11,7 +11,6 @@ export type CatalogEntitiesProps = {
     setEntitiesCounter: (counter: number) => void;
     initialEntitiesList?: BffCatalogEntityList;
     sortOption: SortOption | null;
-    setSortOption: (sortOption: SortOption | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };

package/lib/components/Catalog/CatalogEntities.js

@@ -44,7 +44,7 @@ const LoadMore_1 = require("../../components/LoadMore/LoadMore");
 const CatalogEntitiesEmptyState_1 = require("../../components/Catalog/CatalogEntitiesEmptyState");
 const LOAD_MORE_THRESHOLD = 10;
 function CatalogEntities(props) {
-    const { catalogConfig, excludedEntities, filterQuery, entitiesTypes, sortOption, searchQuery, viewMode, setEntitiesCounter, setSortOption, handleSortClick, isColumnSorted, } = props;
+    const { catalogConfig, excludedEntities, filterQuery, entitiesTypes, sortOption, searchQuery, viewMode, setEntitiesCounter, handleSortClick, isColumnSorted, } = props;
     const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
         catalogConfig,
     });
@@ -85,7 +85,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, onRowClick: onRowClick })),
+        viewMode === 'cards' ? (react_1.default.createElement(CatalogCardView_1.CatalogCardView, { entities: entities, catalogConfig: catalogConfig })) : (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: entities, catalogConfig: catalogConfig, 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/CatalogEntityRelations/CatalogEntityDefaultRelations.js

@@ -9,32 +9,38 @@ const CatalogEntityCell_1 = require("../../../../components/Catalog/CatalogTable
 const CatalogEntityRelationsTable_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable");
 const CatalogEntityTypeTag_1 = require("../../../../components/Catalog/CatalogEntityTypeTag");
 const CatalogEntityRelationCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogEntityRelationCell");
-const columns = [
-    {
-        key: 'entity',
-        title: 'Entity',
-        render: (entity) => react_1.default.createElement(CatalogEntityCell_1.CatalogEntityCell, { entity: entity }),
-        sortable: true,
-        sortKey: 'title',
-        width: '2.5fr',
-    },
-    {
-        key: 'type',
-        title: 'Type',
-        render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
-        sortable: true,
-        sortKey: 'type',
-        width: '1fr',
-    },
-    {
-        key: 'relationType',
-        title: 'Relations',
-        render: (entity) => (react_1.default.createElement(CatalogEntityRelationCell_1.CatalogEntityRelationCell, { relationType: entity.relationType, relationRole: entity.relationRole })),
-        width: '1fr',
-    },
-];
 function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, shouldShowHeading = true, listType, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations" },
-        react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, heading: shouldShowHeading ? 'Related entities' : undefined, columns: columns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: listType })));
+        react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, heading: shouldShowHeading ? 'Related entities' : undefined, columns: getRelationsTableColumns(listType), sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: listType })));
+}
+function getRelationsTableColumns(listType) {
+    const columns = [
+        {
+            key: 'entity',
+            title: 'Entity',
+            render: (entity) => react_1.default.createElement(CatalogEntityCell_1.CatalogEntityCell, { entity: entity }),
+            sortable: true,
+            sortKey: 'title',
+            width: '2.5fr',
+        },
+        {
+            key: 'type',
+            title: 'Type',
+            render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
+            sortable: true,
+            sortKey: 'type',
+            width: '1fr',
+        },
+        {
+            key: 'relationType',
+            title: 'Relations',
+            render: (entity) => (react_1.default.createElement(CatalogEntityRelationCell_1.CatalogEntityRelationCell, { relationType: entity.relationType, relationRole: entity.relationRole })),
+            width: '1fr',
+        },
+    ];
+    if (listType === 'api-operation' || listType === 'data-schema') {
+        return columns.filter((column) => column.key !== 'type');
+    }
+    return columns;
 }
 //# sourceMappingURL=CatalogEntityDefaultRelations.js.map

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

@@ -46,7 +46,7 @@ const ENTITY_DEFAULT_FILTERS = {
 };
 function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelations, catalogConfig, searchQuery, setSearchQuery, }) {
     const { useCatalogSort, useFetchCatalogEntitiesRelations } = (0, hooks_1.useThemeHooks)();
-    const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
+    const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort('title');
     const [filter, setFilter] = (0, react_1.useState)(ENTITY_DEFAULT_FILTERS[entity.type]);
     (0, react_1.useEffect)(() => {
         setFilter(ENTITY_DEFAULT_FILTERS[entity.key]);

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

@@ -36,8 +36,8 @@ function CatalogEntityRelationsTable({ entity, entitiesCatalogConfig, catalogCon
     };
     return (react_1.default.createElement(CatalogEntityRelationsTableWrapper, { "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, onRowClick: onRowClick })));
+        react_1.default.createElement(CatalogActionsRow_1.CatalogActionsRow, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, viewMode: "table", isDetailsPage: true }),
+        react_1.default.createElement(CatalogEntityRelationsTableContent_1.CatalogEntityRelationsTableContent, { entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, columns: columns, sortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: listType, onRowClick: onRowClick })));
 }
 const CatalogEntityRelationsTableWrapper = styled_components_1.default.div `
   min-width: 0;

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

@@ -14,11 +14,10 @@ export type CatalogEntityRelationsTableContentProps = {
     searchQuery: string;
     columns: CatalogColumn<BffCatalogRelatedEntity>[];
     sortOption: SortOption | null;
-    setSortOption: (sortOption: SortOption | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     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, onRowClick, }: CatalogEntityRelationsTableContentProps): JSX.Element;
+export declare function CatalogEntityRelationsTableContent({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, columns, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, onRowClick, }: CatalogEntityRelationsTableContentProps): JSX.Element;

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

@@ -11,9 +11,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, onRowClick, }) {
+function CatalogEntityRelationsTableContent({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, columns, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, onRowClick, }) {
     return (react_1.default.createElement(TableContentWrapper, { "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 }, onRowClick: onRowClick, contentMinWidth: TABLE_SCROLL_MIN_WIDTH_PX })) : (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, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, style: { marginTop: 0 }, onRowClick: onRowClick, contentMinWidth: TABLE_SCROLL_MIN_WIDTH_PX })) : (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' }))));
 }
 const TABLE_SCROLL_MIN_WIDTH_PX = 608;

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

@@ -3,9 +3,8 @@ import { SortOption } from '../../../core/types';
 import { BaseEntity, CatalogColumn } from '../../../components/Catalog/CatalogTableView/CatalogTableView';
 export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
     column: CatalogColumn<T>;
-    setSortOption: (sortOption: SortOption | null) => void;
     currentSortOption?: SortOption | null;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
-export declare const CatalogTableHeaderCell: <T extends BaseEntity>({ column, handleSortClick, isColumnSorted, setSortOption, }: CatalogTableHeaderCellProps<T>) => React.JSX.Element;
+export declare const CatalogTableHeaderCell: <T extends BaseEntity>({ column, handleSortClick, isColumnSorted, }: CatalogTableHeaderCellProps<T>) => React.JSX.Element;

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

@@ -42,12 +42,11 @@ const styled_components_1 = __importStar(require("styled-components"));
 const CaretDownIcon_1 = require("../../../icons/CaretDownIcon/CaretDownIcon");
 const CaretUpIcon_1 = require("../../../icons/CaretUpIcon/CaretUpIcon");
 const hooks_1 = require("../../../core/hooks");
-const CatalogTableHeaderCell = ({ column, handleSortClick, isColumnSorted, setSortOption, }) => {
+const CatalogTableHeaderCell = ({ column, handleSortClick, isColumnSorted, }) => {
     const { handleCellClick, sortKey, isUpActive, isDownActive } = (0, hooks_1.useCatalogTableHeaderCellActions)({
         column,
         handleSortClick,
         isColumnSorted,
-        setSortOption,
     });
     return (react_1.default.createElement(TableHeaderCellWrapper, { key: column.key, "data-component-name": "Catalog/CatalogTableView/CatalogTableHeaderCell", onClick: handleCellClick, "$sortable": Boolean(column.sortable && sortKey) },
         react_1.default.createElement(HeaderContent, null,

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

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

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

@@ -61,9 +61,9 @@ const baseColumns = [
         minWidth: '120px',
     },
 ];
-const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, setSortOption, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, contentMinWidth, }) => {
+const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, contentMinWidth, }) => {
     const tableContent = (react_1.default.createElement(react_1.default.Fragment, null,
-        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(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, currentSortOption: currentSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted })))),
         react_1.default.createElement(CatalogTableBody, null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, onRowClick: onRowClick }))))));
     return (react_1.default.createElement(CatalogTableWrapper, { "data-component-name": "Catalog/CatalogTableView", style: style }, contentMinWidth != null ? (react_1.default.createElement(CatalogTableContentInner, { "$contentMinWidth": contentMinWidth }, tableContent)) : (react_1.default.createElement(CatalogTableScrollContent, null, tableContent))));
 };

package/lib/core/hooks/catalog/use-catalog-table-header-cell-actions.d.ts

@@ -1,12 +1,10 @@
 import { BaseEntity, CatalogColumn } from '../../../components/Catalog/CatalogTableView/CatalogTableView';
-import { SortOption } from '../../types';
 type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
     column: CatalogColumn<T>;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
-    setSortOption: (sortOption: SortOption | null) => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
-export declare function useCatalogTableHeaderCellActions<T extends BaseEntity>({ column, handleSortClick, setSortOption, isColumnSorted, }: CatalogTableHeaderCellActionsProps<T>): {
+export declare function useCatalogTableHeaderCellActions<T extends BaseEntity>({ column, handleSortClick, isColumnSorted, }: CatalogTableHeaderCellActionsProps<T>): {
     handleCellClick: () => void;
     sortKey: string | undefined;
     isUpActive: boolean;

package/lib/core/hooks/catalog/use-catalog-table-header-cell-actions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCatalogTableHeaderCellActions = useCatalogTableHeaderCellActions;
-function useCatalogTableHeaderCellActions({ column, handleSortClick, setSortOption, isColumnSorted, }) {
+function useCatalogTableHeaderCellActions({ column, handleSortClick, isColumnSorted, }) {
     const sortKey = column.sortKey;
     const isUpActive = sortKey ? isColumnSorted(sortKey, 'desc') : false;
     const isDownActive = sortKey ? isColumnSorted(sortKey, 'asc') : false;
@@ -11,9 +11,6 @@ function useCatalogTableHeaderCellActions({ column, handleSortClick, setSortOpti
         if (isDownActive) {
             handleSortClick(sortKey, 'desc');
         }
-        else if (isUpActive) {
-            setSortOption(null);
-        }
         else {
             handleSortClick(sortKey, 'asc');
         }

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

@@ -5,7 +5,7 @@ import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { UseQueryResult } from '@tanstack/react-query';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
-import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults } from './catalog';
+import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults, SortOption } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem, ToolCallName, ContentSegment } from './search';
@@ -137,7 +137,7 @@ export type ThemeHooks = {
         nextPage?: ResolvedNavItemWithLink;
     } | undefined;
     useCatalog: (props?: UseCatalogProps) => UseCatalogResponse;
-    useCatalogSort: () => UseCatalogSortResponse;
+    useCatalogSort: (defaultSortOption?: SortOption | null) => UseCatalogSortResponse;
     useCatalogSearch: () => UseCatalogSearchResponse;
     useFetchCatalogEntities: (params: CatalogApiParams, initialData?: BffCatalogEntityList) => CatalogApiResults<BffCatalogEntity>;
     useFetchCatalogEntitiesRelations: (params: CatalogApiParams & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.63.0",
+  "version": "0.64.0-next.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.9.0"
+    "@redocly/realm-asyncapi-sdk": "0.10.0-next.0"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",

package/src/components/Catalog/Catalog.tsx

@@ -22,11 +22,10 @@ import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelect
 import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
-import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
-import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
 import { CatalogMobileTopBar } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar';
 import { CatalogMobileFiltersPanelOverlay } from '@redocly/theme/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay';
+import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
 
 type CatalogFiltersWithCounts = Record<string, { value: string; count: number }[]>;
 
@@ -173,20 +172,14 @@ export function Catalog(props: CatalogProps): JSX.Element {
                 {translate(catalogConfig?.descriptionTranslationKey)}
               </CatalogDescription>
 
-              <CatalogActionsRow>
-                <CatalogSearchInputWrapper>
-                  <FilterInput
-                    value={searchQuery}
-                    onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
-                    dataTestId="catalog-search-input"
-                  />
-                </CatalogSearchInputWrapper>
-
-                <CatalogControlsWrapper>
-                  <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
-                  <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
-                </CatalogControlsWrapper>
-              </CatalogActionsRow>
+              <CatalogActionsRow
+                searchQuery={searchQuery}
+                setSearchQuery={setSearchQuery}
+                sortOption={sortOption}
+                setSortOption={setSortOption}
+                viewMode={viewMode}
+                onViewModeChange={setViewMode}
+              />
 
               <CatalogEntities
                 catalogConfig={catalogConfig}
@@ -198,7 +191,6 @@ export function Catalog(props: CatalogProps): JSX.Element {
                 viewMode={viewMode}
                 setEntitiesCounter={setEntitiesCounter}
                 initialEntitiesList={initialEntitiesList}
-                setSortOption={setSortOption}
                 handleSortClick={handleSortClick}
                 isColumnSorted={isColumnSorted}
               />
@@ -210,23 +202,6 @@ export function Catalog(props: CatalogProps): JSX.Element {
   );
 }
 
-const CatalogActionsRow = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--spacing-xl);
-
-  @media screen and (max-width: ${breakpoints.medium}) {
-    display: none;
-  }
-`;
-
-const CatalogControlsWrapper = styled.div`
-  display: var(--catalog-controls-wrapper-display);
-  align-items: var(--catalog-controls-wrapper-align-items);
-  margin-left: var(--catalog-controls-wrapper-margin-left);
-  gap: var(--catalog-controls-wrapper-gap);
-`;
-
 const CatalogContentWrapper = styled.div`
   flex: 1;
   min-width: 0;
@@ -326,12 +301,3 @@ const FiltersSidebar = styled(Sidebar)`
     border: none;
   }
 `;
-
-const CatalogSearchInputWrapper = styled.div`
-  display: none;
-  width: var(--catalog-search-input-wrapper-width);
-
-  @media screen and (min-width: ${breakpoints.medium}) {
-    display: block;
-  }
-`;

package/src/components/Catalog/CatalogActionsRow.tsx

@@ -1,10 +1,11 @@
 import React, { JSX } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { SortOption, CatalogViewMode } from '@redocly/theme/core/types';
 import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
+import { breakpoints } from '@redocly/theme/core';
 
 export type CatalogActionsRowProps = {
   searchQuery: string;
@@ -13,7 +14,7 @@ export type CatalogActionsRowProps = {
   setSortOption: (option: SortOption | null) => void;
   viewMode?: CatalogViewMode;
   onViewModeChange?: (mode: CatalogViewMode) => void;
-  style?: React.CSSProperties;
+  isDetailsPage?: boolean;
 };
 
 export function CatalogActionsRow({
@@ -23,16 +24,22 @@ export function CatalogActionsRow({
   setSortOption,
   viewMode,
   onViewModeChange,
-  style,
+  isDetailsPage = false,
 }: CatalogActionsRowProps): JSX.Element {
   return (
-    <CatalogActionsRowWrapper style={style}>
+    <CatalogActionsRowWrapper isDetailsPage={isDetailsPage}>
       <CatalogSearchInputWrapper>
-        <FilterInput value={searchQuery} onChange={(updatedTerm) => setSearchQuery(updatedTerm)} />
+        <FilterInput
+          value={searchQuery}
+          onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
+          dataTestId="catalog-search-input"
+        />
       </CatalogSearchInputWrapper>
 
       <CatalogControlsWrapper>
-        <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+        {viewMode === 'cards' && (
+          <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+        )}
         {viewMode && onViewModeChange && (
           <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />
         )}
@@ -41,9 +48,20 @@ export function CatalogActionsRow({
   );
 }
 
-export const CatalogActionsRowWrapper = styled.div`
+export const CatalogActionsRowWrapper = styled.div<{ isDetailsPage: boolean }>`
   display: flex;
   align-items: center;
+
+  margin-bottom: ${({ isDetailsPage }) => (isDetailsPage ? 'var(--spacing-sm)' : 'var(--spacing-xl)')};
+  
+
+  ${({ isDetailsPage }) =>
+    !isDetailsPage &&
+    css`
+    @media screen and (max-width: ${breakpoints.medium}) {
+      display: none;
+    }
+  `}
 `;
 
 export const CatalogControlsWrapper = styled.div`

package/src/components/Catalog/CatalogEntities.tsx

@@ -25,7 +25,6 @@ export type CatalogEntitiesProps = {
   setEntitiesCounter: (counter: number) => void;
   initialEntitiesList?: BffCatalogEntityList;
   sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
@@ -42,7 +41,6 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
     searchQuery,
     viewMode,
     setEntitiesCounter,
-    setSortOption,
     handleSortClick,
     isColumnSorted,
   } = props;
@@ -109,7 +107,6 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
         <CatalogTableView<BffCatalogEntity>
           entities={entities}
           catalogConfig={catalogConfig}
-          setSortOption={setSortOption}
           currentSortOption={sortOption}
           handleSortClick={handleSortClick}
           isColumnSorted={isColumnSorted}

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

@@ -14,36 +14,6 @@ import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/C
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 import { CatalogEntityRelationCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityRelationCell';
 
-const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
-  {
-    key: 'entity',
-    title: 'Entity',
-    render: (entity) => <CatalogEntityCell entity={entity} />,
-    sortable: true,
-    sortKey: 'title',
-    width: '2.5fr',
-  },
-  {
-    key: 'type',
-    title: 'Type',
-    render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
-    sortable: true,
-    sortKey: 'type',
-    width: '1fr',
-  },
-  {
-    key: 'relationType',
-    title: 'Relations',
-    render: (entity) => (
-      <CatalogEntityRelationCell
-        relationType={entity.relationType}
-        relationRole={entity.relationRole}
-      />
-    ),
-    width: '1fr',
-  },
-];
-
 export type CatalogEntityDefaultRelationsProps = {
   entity: BffCatalogEntity;
   entitiesCatalogConfig: EntitiesCatalogConfig;
@@ -91,7 +61,7 @@ export function CatalogEntityDefaultRelations({
         searchQuery={searchQuery}
         setSearchQuery={setSearchQuery}
         heading={shouldShowHeading ? 'Related entities' : undefined}
-        columns={columns}
+        columns={getRelationsTableColumns(listType)}
         sortOption={sortOption}
         setSortOption={setSortOption}
         handleSortClick={handleSortClick}
@@ -102,3 +72,41 @@ export function CatalogEntityDefaultRelations({
     </div>
   );
 }
+
+function getRelationsTableColumns(listType?: ListType): CatalogColumn<BffCatalogRelatedEntity>[] {
+  const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
+    {
+      key: 'entity',
+      title: 'Entity',
+      render: (entity) => <CatalogEntityCell entity={entity} />,
+      sortable: true,
+      sortKey: 'title',
+      width: '2.5fr',
+    },
+    {
+      key: 'type',
+      title: 'Type',
+      render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
+      sortable: true,
+      sortKey: 'type',
+      width: '1fr',
+    },
+    {
+      key: 'relationType',
+      title: 'Relations',
+      render: (entity) => (
+        <CatalogEntityRelationCell
+          relationType={entity.relationType}
+          relationRole={entity.relationRole}
+        />
+      ),
+      width: '1fr',
+    },
+  ];
+
+  if (listType === 'api-operation' || listType === 'data-schema') {
+    return columns.filter((column) => column.key !== 'type');
+  }
+
+  return columns;
+}

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

@@ -32,7 +32,7 @@ export function CatalogEntityRelations({
   setSearchQuery,
 }: CatalogEntityRelationsProps): JSX.Element | null {
   const { useCatalogSort, useFetchCatalogEntitiesRelations } = useThemeHooks();
-  const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
+  const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort('title');
 
   const [filter, setFilter] = useState<string | undefined>(ENTITY_DEFAULT_FILTERS[entity.type]);
 

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

@@ -86,7 +86,8 @@ export function CatalogEntityRelationsTable({
         setSearchQuery={setSearchQuery}
         sortOption={sortOption}
         setSortOption={setSortOption}
-        style={{ marginBottom: '12px' }}
+        viewMode="table"
+        isDetailsPage={true}
       />
       <CatalogEntityRelationsTableContent
         entitiesCatalogConfig={entitiesCatalogConfig}
@@ -95,7 +96,6 @@ export function CatalogEntityRelationsTable({
         query={query}
         searchQuery={searchQuery}
         columns={columns}
-        setSortOption={setSortOption}
         sortOption={sortOption}
         handleSortClick={handleSortClick}
         isColumnSorted={isColumnSorted}

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

@@ -25,7 +25,6 @@ export type CatalogEntityRelationsTableContentProps = {
   searchQuery: string;
   columns: CatalogColumn<BffCatalogRelatedEntity>[];
   sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;
@@ -40,7 +39,6 @@ export function CatalogEntityRelationsTableContent({
   query,
   searchQuery,
   columns,
-  setSortOption,
   sortOption,
   handleSortClick,
   isColumnSorted,
@@ -57,7 +55,6 @@ export function CatalogEntityRelationsTableContent({
             entitiesCatalogConfig={entitiesCatalogConfig}
             catalogConfig={catalogConfig}
             columns={columns}
-            setSortOption={setSortOption}
             currentSortOption={sortOption}
             handleSortClick={handleSortClick}
             isColumnSorted={isColumnSorted}

package/src/components/Catalog/CatalogTableView/CatalogTableHeaderCell.tsx

@@ -12,7 +12,6 @@ import {
 
 export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
   column: CatalogColumn<T>;
-  setSortOption: (sortOption: SortOption | null) => void;
   currentSortOption?: SortOption | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
@@ -22,13 +21,11 @@ export const CatalogTableHeaderCell = <T extends BaseEntity>({
   column,
   handleSortClick,
   isColumnSorted,
-  setSortOption,
 }: CatalogTableHeaderCellProps<T>) => {
   const { handleCellClick, sortKey, isUpActive, isDownActive } = useCatalogTableHeaderCellActions({
     column,
     handleSortClick,
     isColumnSorted,
-    setSortOption,
   });
 
   return (

package/src/components/Catalog/CatalogTableView/CatalogTableView.tsx

@@ -26,7 +26,6 @@ export type CatalogTableViewProps<T extends BaseEntity> = {
   entitiesCatalogConfig?: EntitiesCatalogConfig;
   catalogConfig: CatalogEntityConfig;
   columns?: CatalogColumn<T>[];
-  setSortOption: (sortOption: SortOption | null) => void;
   currentSortOption?: SortOption | null;
   onRowClick?: (entity: T) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
@@ -96,7 +95,6 @@ export const CatalogTableView = <T extends BaseEntity>({
   entitiesCatalogConfig,
   catalogConfig,
   columns = baseColumns as CatalogColumn<BaseEntity>[],
-  setSortOption,
   currentSortOption,
   onRowClick,
   handleSortClick,
@@ -114,7 +112,6 @@ export const CatalogTableView = <T extends BaseEntity>({
           <CatalogTableHeaderCell<T>
             key={column.key}
             column={column}
-            setSortOption={setSortOption}
             currentSortOption={currentSortOption}
             handleSortClick={handleSortClick}
             isColumnSorted={isColumnSorted}

package/src/core/hooks/catalog/use-catalog-table-header-cell-actions.ts

@@ -3,19 +3,15 @@ import {
   CatalogColumn,
 } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 
-import { SortOption } from '../../types';
-
 type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
   column: CatalogColumn<T>;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
-  setSortOption: (sortOption: SortOption | null) => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
 
 export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
   column,
   handleSortClick,
-  setSortOption,
   isColumnSorted,
 }: CatalogTableHeaderCellActionsProps<T>) {
   const sortKey = column.sortKey;
@@ -27,8 +23,6 @@ export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
 
     if (isDownActive) {
       handleSortClick(sortKey, 'desc');
-    } else if (isUpActive) {
-      setSortOption(null);
     } else {
       handleSortClick(sortKey, 'asc');
     }

package/src/core/types/hooks.ts

@@ -19,6 +19,7 @@ import type {
   UseCatalogProps,
   CatalogApiParams,
   CatalogApiResults,
+  SortOption,
 } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
@@ -164,7 +165,7 @@ export type ThemeHooks = {
       }
     | undefined;
   useCatalog: (props?: UseCatalogProps) => UseCatalogResponse;
-  useCatalogSort: () => UseCatalogSortResponse;
+  useCatalogSort: (defaultSortOption?: SortOption | null) => UseCatalogSortResponse;
   useCatalogSearch: () => UseCatalogSearchResponse;
   useFetchCatalogEntities: (
     params: CatalogApiParams,