@redocly/theme 0.63.0 → 0.64.0-next.1

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/components/SvgViewer/variables.dark.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.svgViewerDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.svgViewerDarkMode = (0, styled_components_1.css) `
-  --svg-viewer-bg-color: var(--color-warm-grey-9);
+  --svg-viewer-bg-color: var(--color-warm-grey-3);
 `;
 //# sourceMappingURL=variables.dark.js.map

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/styles/dark.js

@@ -4,21 +4,22 @@ exports.darkMode = void 0;
 const styled_components_1 = require("styled-components");
 const variables_dark_1 = require("../../components/Scorecard/variables.dark");
 const variables_dark_2 = require("../../markdoc/components/Mermaid/variables.dark");
-const variables_dark_3 = require("../../components/Menu/variables.dark");
-const variables_dark_4 = require("../../components/Button/variables.dark");
-const variables_dark_5 = require("../../components/Buttons/variables.dark");
-const variables_dark_6 = require("../../components/Segmented/variables.dark");
-const variables_dark_7 = require("../../icons/CheckboxIcon/variables.dark");
-const variables_dark_8 = require("../../components/Tag/variables.dark");
-const variables_dark_9 = require("../../components/StatusCode/variables.dark");
-const variables_dark_10 = require("../../components/Switch/variables.dark");
-const variables_dark_11 = require("../../markdoc/components/Cards/variables.dark");
-const variables_dark_12 = require("../../components/Catalog/variables.dark");
-const variables_dark_13 = require("../../components/PageActions/variables.dark");
-const variables_dark_14 = require("../../components/Tooltip/variables.dark");
-const variables_dark_15 = require("../../components/Banner/variables.dark");
-const variables_dark_16 = require("../../components/Admonition/variables.dark");
-const variables_dark_17 = require("../../components/SvgViewer/variables.dark");
+const variables_dark_3 = require("../../markdoc/components/ExcalidrawDiagram/variables.dark");
+const variables_dark_4 = require("../../components/Menu/variables.dark");
+const variables_dark_5 = require("../../components/Button/variables.dark");
+const variables_dark_6 = require("../../components/Buttons/variables.dark");
+const variables_dark_7 = require("../../components/Segmented/variables.dark");
+const variables_dark_8 = require("../../icons/CheckboxIcon/variables.dark");
+const variables_dark_9 = require("../../components/Tag/variables.dark");
+const variables_dark_10 = require("../../components/StatusCode/variables.dark");
+const variables_dark_11 = require("../../components/Switch/variables.dark");
+const variables_dark_12 = require("../../markdoc/components/Cards/variables.dark");
+const variables_dark_13 = require("../../components/Catalog/variables.dark");
+const variables_dark_14 = require("../../components/PageActions/variables.dark");
+const variables_dark_15 = require("../../components/Tooltip/variables.dark");
+const variables_dark_16 = require("../../components/Banner/variables.dark");
+const variables_dark_17 = require("../../components/Admonition/variables.dark");
+const variables_dark_18 = require("../../components/SvgViewer/variables.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -44,6 +45,8 @@ const replayDarkMode = (0, styled_components_1.css) `
   --replay-runtime-expression-bg-color: rgba(147, 166, 249, 0.16); // @presenter Color
   --replay-operators-color: rgba(168, 143, 88, 1); // @presenter Color
 
+  --replay-ai-user-message-gradient: linear-gradient(73.52deg, rgba(113, 94, 254, 0.16) 10.13%, rgba(255, 92, 220, 0.16) 87.29%);
+
   // @tokens End
 `;
 const badgesDarkMode = (0, styled_components_1.css) `
@@ -325,24 +328,25 @@ exports.darkMode = (0, styled_components_1.css) `
   --plus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H4.6875V6.79687C4.6875 6.83984 4.72266 6.875 4.76562 6.875H5.23438C5.27734 6.875 5.3125 6.83984 5.3125 6.79687V5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H5.3125V3.20312C5.3125 3.16016 5.27734 3.125 5.23438 3.125H4.76562C4.72266 3.125 4.6875 3.16016 4.6875 3.20312V4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
   --minus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
 
-  ${variables_dark_6.segmentedButtonsDarkMode}
-  ${variables_dark_4.buttonDarkMode}
-  ${variables_dark_5.aiAssistantButtonDarkMode}
-  ${variables_dark_7.checkboxDarkMode}
-  ${variables_dark_8.tagDarkMode}
-  ${variables_dark_9.statusCodeDarkMode}
-  ${variables_dark_3.menuDarkMode}
+  ${variables_dark_7.segmentedButtonsDarkMode}
+  ${variables_dark_5.buttonDarkMode}
+  ${variables_dark_6.aiAssistantButtonDarkMode}
+  ${variables_dark_8.checkboxDarkMode}
+  ${variables_dark_9.tagDarkMode}
+  ${variables_dark_10.statusCodeDarkMode}
+  ${variables_dark_4.menuDarkMode}
   ${variables_dark_2.mermaidDarkMode}
+  ${variables_dark_3.excalidrawDarkMode}
   ${variables_dark_1.scorecardDarkMode}
   ${replayDarkMode}
-  ${variables_dark_10.switcherDarkMode}
-  ${variables_dark_11.cardsDarkMode}
-  ${variables_dark_12.catalogDarkMode}
-  ${variables_dark_13.pageActionsDarkMode}
-  ${variables_dark_14.tooltipDarkMode}
-  ${variables_dark_15.bannerDarkMode}
-  ${variables_dark_16.admonitionDarkMode}
-  ${variables_dark_17.svgViewerDarkMode}
+  ${variables_dark_11.switcherDarkMode}
+  ${variables_dark_12.cardsDarkMode}
+  ${variables_dark_13.catalogDarkMode}
+  ${variables_dark_14.pageActionsDarkMode}
+  ${variables_dark_15.tooltipDarkMode}
+  ${variables_dark_16.bannerDarkMode}
+  ${variables_dark_17.admonitionDarkMode}
+  ${variables_dark_18.svgViewerDarkMode}
   ${badgesDarkMode}
 
   /**