@redocly/theme 0.58.0-next.1 → 0.58.0-next.10

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

@@ -1,11 +1,11 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig } from '@redocly/config';
-import { BffCatalogEntityList } from '../../core/types';
-import { CatalogSwitcherItem } from '../../core/types/catalog';
+import { BffCatalogEntityList, CatalogSwitcherItem, CatalogViewMode } from '../../core/types';
 export type CatalogProps = {
     catalogConfig: CatalogEntityConfig;
     entitiesTypes: string[];
     initialEntitiesList?: BffCatalogEntityList;
     catalogSwitcherItems: CatalogSwitcherItem[];
+    initialViewMode?: CatalogViewMode;
 };
 export declare function Catalog(props: CatalogProps): JSX.Element;

package/lib/components/Catalog/Catalog.js

@@ -27,15 +27,15 @@ const customCatalogOptionsCasing = (str) => {
         if (index === 0 && word.toLowerCase() === 'api') {
             return 'API';
         }
-        return word[0].toUpperCase() + word.slice(1).toLowerCase();
+        return word[0].toUpperCase() + word.slice(1);
     })
         .join(' ');
 };
 function Catalog(props) {
-    const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems } = props;
+    const { catalogConfig, 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, (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0);
+    const { filters, searchQuery, setSearchQuery, filterQuery, sortOption, setSortOption, handleSortClick, isColumnSorted, viewMode, setViewMode, entitiesCounter, setEntitiesCounter, onChangeViewClick, onChangeCollapseSidebarClick, layout, collapsedSidebar, } = useCatalog(catalogConfig, (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0, 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(FilterContent_1.FilterContent, { setFilterTerm: setSearchQuery, filters: filters, filterTerm: searchQuery, hideSearch: true, showCounter: false, filterValuesCasing: customCatalogOptionsCasing }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
@@ -43,7 +43,9 @@ function Catalog(props) {
                 react_1.default.createElement(CatalogPageDescription, null,
                     react_1.default.createElement(CatalogTitleWrapper, null,
                         react_1.default.createElement(CatalogTitle, { "data-translation-key": catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey },
-                            translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey),
+                            (catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
+                                ? translate(catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.titleTranslationKey)
+                                : catalogConfig === null || catalogConfig === void 0 ? void 0 : catalogConfig.slug,
                             ' '),
                         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))),

package/lib/components/Catalog/CatalogCardView/CatalogCard.js

@@ -14,7 +14,6 @@ const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRight
 const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
 const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
 const utils_1 = require("../../../core/utils");
-const Tooltip_1 = require("../../../components/Tooltip/Tooltip");
 function CatalogCard({ entity, catalogConfig }) {
     var _a, _b, _c;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -26,15 +25,15 @@ function CatalogCard({ entity, catalogConfig }) {
         } },
         react_1.default.createElement(CardContent, null,
             react_1.default.createElement(CardHeader, null,
-                react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: entity.type, placement: "bottom", className: "catalog" },
-                    react_1.default.createElement(HeaderIconWrapper, null,
-                        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type, defaultColor: true }))),
-                react_1.default.createElement(CardTitle, null,
-                    react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title))),
+                react_1.default.createElement(HeaderIconWrapper, null,
+                    react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
+                react_1.default.createElement(HeaderIconText, { entityType: entity.type }, entity.type)),
             react_1.default.createElement(CardDescription, null,
+                react_1.default.createElement(CardTitle, null,
+                    react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, (_a = entity.summary) !== null && _a !== void 0 ? _a : '')),
             react_1.default.createElement(CardMetadataSection, null,
-                react_1.default.createElement(MetadataColumn, null,
+                react_1.default.createElement(MetadataRow, null,
                     react_1.default.createElement(MetadataLabel, null, "Domains:"),
                     react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_b = entity.domains) === null || _b === void 0 ? void 0 : _b.map((domain) => domain.title)) || [], tagProps: {
                             style: {
@@ -44,7 +43,7 @@ function CatalogCard({ entity, catalogConfig }) {
                             icon: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: "var(--color-green-8)" }),
                             textTransform: 'none',
                         } })),
-                react_1.default.createElement(MetadataColumn, null,
+                react_1.default.createElement(MetadataRow, null,
                     react_1.default.createElement(MetadataLabel, null, "Owners:"),
                     react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_c = entity.owners) === null || _c === void 0 ? void 0 : _c.map((owner) => owner.key)) || [], tagProps: {
                             style: {
@@ -81,6 +80,9 @@ const HeaderIconWrapper = styled_components_1.default.div `
   border: var(--catalog-card-icon-border-width) solid var(--catalog-card-icon-border-color);
   margin-right: var(--catalog-card-icon-margin-right);
 `;
+const HeaderIconText = styled_components_1.default.div `
+  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+`;
 const CardHeader = styled_components_1.default.div `
   display: flex;
   align-items: center;
@@ -89,20 +91,20 @@ const MetadataLabel = styled_components_1.default.div `
   font-size: var(--catalog-metadata-label-font-size);
   font-weight: var(--catalog-metadata-label-font-weight);
   color: var(--catalog-metadata-label-color);
-  margin-bottom: var(--catalog-metadata-label-margin-bottom);
 `;
 const CardMetadataSection = styled_components_1.default.div `
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   margin-top: var(--catalog-metadata-section-margin-top);
   gap: var(--catalog-metadata-section-gap);
   width: 100%;
 `;
-const MetadataColumn = styled_components_1.default.div `
+const MetadataRow = styled_components_1.default.div `
   display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: calc(50% - var(--catalog-metadata-column-half-gap)); /* 50% minus half the gap */
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--catalog-metadata-row-gap);
 `;
 const ArrowCircle = styled_components_1.default.div `
   width: var(--catalog-arrow-circle-size);
@@ -136,7 +138,6 @@ const Divider = styled_components_1.default.div `
   background-color: var(--catalog-card-divider-color);
 `;
 const CatalogCardWrapper = styled_components_1.default.div `
-  height: var(--catalog-card-height);
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);

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

@@ -2,5 +2,9 @@ import React from 'react';
 export type CatalogEntityProps = {
     RedocSchema: React.ComponentType<any>;
     StoreProvider: React.ComponentType<any>;
+    GraphqlTypeRenderer?: React.ComponentType<{
+        sdl: string;
+        typeName: string;
+    }>;
 };
-export declare function CatalogEntity({ RedocSchema, StoreProvider }: CatalogEntityProps): React.JSX.Element;
+export declare function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }: CatalogEntityProps): React.JSX.Element;

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

@@ -26,13 +26,13 @@ const renderFirstColumnEntitySection = (entity) => {
             return react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity });
     }
 };
-const renderDataSchemaSection = (entity, relatedEntity, RedocSchema, StoreProvider) => {
+const renderDataSchemaSection = (entity, relatedEntity, 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 }));
+    return (react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity, relatedEntity: relatedEntity, RedocSchema: RedocSchema, StoreProvider: StoreProvider, GraphqlTypeRenderer: GraphqlTypeRenderer }));
 };
-function CatalogEntity({ RedocSchema, StoreProvider }) {
+function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     var _a;
     const { useTranslate, useCatalog, usePageProps } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -52,7 +52,7 @@ function CatalogEntity({ RedocSchema, StoreProvider }) {
                         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),
+                                renderDataSchemaSection(entity, relatedEntity, 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/CatalogEntityLinks.js

@@ -26,7 +26,6 @@ function CatalogEntityLinks({ entity }) {
 const LinksWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;

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

@@ -58,7 +58,7 @@ function renderMetadataValue(value) {
 function CatalogEntityMetadata({ entity }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const _a = entity.metadata || {}, { schema } = _a, metadata = __rest(_a, ["schema"]);
+    const _a = entity.metadata || {}, { schema, sdl } = _a, metadata = __rest(_a, ["schema", "sdl"]);
     const metadataToShow = Object.entries(metadata).filter(([key]) => !(entity.type === 'api-description' && key === 'descriptionFile'));
     const [isOn, setIsOn] = (0, react_1.useState)(false);
     const hasMoreItems = metadataToShow.length > MAX_INITIAL_ITEMS;
@@ -82,7 +82,6 @@ const JsonViewerWrapper = (0, styled_components_1.default)(JsonViewer_1.JsonView
 const MetadataWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;

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

@@ -31,7 +31,6 @@ const PathLabel = styled_components_1.default.label `
 const LinksWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;

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

@@ -45,7 +45,7 @@ const CardHeader = styled_components_1.default.div `
 const CardContent = styled_components_1.default.div `
   flex: 1;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   gap: var(--catalog-card-content-gap);
   flex-wrap: wrap;
   color: var(--text-color-primary);

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

@@ -13,7 +13,7 @@ const MoleculesIcon_1 = require("../../../../icons/MoleculesIcon/MoleculesIcon")
 const NetworkIcon_1 = require("../../../../icons/NetworkIcon/NetworkIcon");
 function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "operations-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "api-operation" })),
             react_1.default.createElement(TabItem, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },

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

@@ -5,5 +5,9 @@ export type CatalogEntitySchemaProps = {
     relatedEntity: BffCatalogRelatedEntity | null;
     RedocSchema: React.ComponentType<any>;
     StoreProvider: React.ComponentType<any>;
+    GraphqlTypeRenderer?: React.ComponentType<{
+        sdl: string;
+        typeName: string;
+    }>;
 };
-export declare function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, }: CatalogEntitySchemaProps): React.JSX.Element;
+export declare function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer, }: CatalogEntitySchemaProps): React.JSX.Element;

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

@@ -34,20 +34,22 @@ const hooks_1 = require("../../../core/hooks");
 const useCatalogEntitySchema_1 = require("../../../core/hooks/catalog/useCatalogEntitySchema");
 const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
 const CopyButton_1 = require("../../../components/Buttons/CopyButton");
-function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, }) {
+function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
+    var _a, _b;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { definition, parsedSchema, rawSchema } = (0, useCatalogEntitySchema_1.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;
     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')),
-            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" }))),
         react_1.default.createElement(SplitViewWrapper, null,
-            react_1.default.createElement(SchemaContentWrapper, null,
-                react_1.default.createElement(StoreProvider, { definition: definition },
-                    react_1.default.createElement(RedocSchema, { schema: parsedSchema }))),
-            react_1.default.createElement(SchemaSampleWrapper, null,
-                react_1.default.createElement(JsonViewer_1.JsonViewer, { data: Sampler.sample(Object.assign({}, parsedSchema)), expandLevel: 3, hideHeader: false })))));
+            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 })))),
+            !isGraphql && (react_1.default.createElement(SchemaSampleWrapper, null,
+                react_1.default.createElement(JsonViewer_1.JsonViewer, { data: Sampler.sample(Object.assign({}, parsedSchema)), expandLevel: 3, hideHeader: false }))))));
 }
 const MetadataWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -1,7 +1,9 @@
 import { JSX } from 'react';
+import { UiAccessibleConfig } from '@redocly/config';
 export type CatalogEntityIconProps = {
     entityType: string;
     defaultColor?: boolean;
     forceColor?: string;
+    entitiesCatalogConfig?: UiAccessibleConfig['entitiesCatalog'];
 };
 export declare function CatalogEntityIcon({ entityType, defaultColor, forceColor, }: CatalogEntityIconProps): JSX.Element;

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -9,24 +9,41 @@ const CodeIcon_1 = require("../../icons/CodeIcon/CodeIcon");
 const GraphIcon_1 = require("../../icons/GraphIcon/GraphIcon");
 const PeopleIcon_1 = require("../../icons/PeopleIcon/PeopleIcon");
 const UserIcon_1 = require("../../icons/UserIcon/UserIcon");
-const NetworkIcon_1 = require("../../icons/NetworkIcon/NetworkIcon");
 const MoleculesIcon_1 = require("../../icons/MoleculesIcon/MoleculesIcon");
+const HierarchyIcon_1 = require("../../icons/HierarchyIcon/HierarchyIcon");
+const Image_1 = require("../../components/Image/Image");
+const core_1 = require("../../core");
+const NoteIcon_1 = require("../../icons/NoteIcon/NoteIcon");
 const getIconColor = (entityType) => `var(--catalog-entity-icon-color-${entityType})`;
-const getEntityIcon = ({ entityType, defaultColor, forceColor }) => {
-    const iconColor = forceColor !== null && forceColor !== void 0 ? forceColor : (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType));
-    const entityIconMap = {
-        service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
-        domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
-        team: react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor }),
-        user: react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor }),
-        'api-description': react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
-        'data-schema': react_1.default.createElement(NetworkIcon_1.NetworkIcon, { color: iconColor }),
-        'api-operation': react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, { color: iconColor }),
-    };
-    return entityIconMap[entityType];
+const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogConfig, }) => {
+    var _a, _b;
+    if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        const iconColor = forceColor !== null && forceColor !== void 0 ? forceColor : (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType));
+        const entityIconMap = {
+            service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+            domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
+            team: react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor }),
+            user: react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor }),
+            'api-description': react_1.default.createElement(NoteIcon_1.NoteIcon, { color: iconColor }),
+            'data-schema': react_1.default.createElement(HierarchyIcon_1.HierarchyIcon, { color: iconColor }),
+            'api-operation': react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, { color: iconColor }),
+        };
+        return entityIconMap[entityType];
+    }
+    const iconConfig = (_b = (_a = entitiesCatalogConfig === null || entitiesCatalogConfig === void 0 ? void 0 : entitiesCatalogConfig.entityTypes) === null || _a === void 0 ? void 0 : _a[entityType]) === null || _b === void 0 ? void 0 : _b.icon;
+    if ((iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src) || (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet)) {
+        return (react_1.default.createElement(Image_1.Image, { src: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src, srcSet: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet, alt: `${entityType} icon`, width: "16", height: "16" }));
+    }
+    return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: "var(--catalog-entity-icon-color)" }); // @TODO: add default icon
 };
 function CatalogEntityIcon({ entityType, defaultColor = false, forceColor, }) {
-    const icon = getEntityIcon({ entityType, defaultColor, forceColor });
+    const themeConfig = (0, core_1.useThemeConfig)();
+    const icon = getEntityIcon({
+        entityType,
+        defaultColor,
+        forceColor,
+        entitiesCatalogConfig: themeConfig.entitiesCatalog,
+    });
     if (!icon) {
         throw new Error(`Unhandled entity type: ${entityType}`);
     }

package/lib/components/Catalog/CatalogEntityTypeIcon.js

@@ -7,6 +7,7 @@ exports.CatalogEntityTypeIcon = CatalogEntityTypeIcon;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogEntityIcon_1 = require("../../components/Catalog/CatalogEntityIcon");
+const core_1 = require("../../core");
 function CatalogEntityTypeIcon({ entityType, defaultColor = false, }) {
     return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon", entityType: entityType, defaultColor: defaultColor },
         react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: defaultColor })));
@@ -18,13 +19,25 @@ const IconContainer = styled_components_1.default.div `
   width: var(--catalog-table-icon-width);
   height: var(--catalog-table-icon-height);
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColor, entityType }) => defaultColor
-    ? 'var(--catalog-entity-bg-color)'
-    : `var(--catalog-entity-bg-color-${entityType})`};
+  background-color: ${({ defaultColor, entityType }) => {
+    if (defaultColor) {
+        return 'var(--catalog-entity-bg-color)';
+    }
+    if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        return `var(--catalog-entity-bg-color-${entityType})`;
+    }
+    return 'var(--catalog-entity-bg-color-custom)';
+}};
   flex-shrink: 0;
   border: 1px solid
-    ${({ defaultColor, entityType }) => defaultColor
-    ? 'var(--catalog-entity-border-color)'
-    : `var(--catalog-entity-border-color-${entityType})`};
+    ${({ defaultColor, entityType }) => {
+    if (defaultColor) {
+        return 'var(--catalog-entity-border-color)';
+    }
+    if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        return `var(--catalog-entity-border-color-${entityType})`;
+    }
+    return 'var(--catalog-entity-border-color-custom)';
+}};
 `;
 //# sourceMappingURL=CatalogEntityTypeIcon.js.map

package/lib/components/Catalog/CatalogEntityTypeTag.js

@@ -9,6 +9,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../components/Tag/Tag");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
+const core_1 = require("../../core");
 const entityTagColorMap = {
     service: 'blue',
     domain: 'grass',
@@ -33,8 +34,13 @@ function CatalogEntityTypeTag({ entityType }) {
 const EntityTypeTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
   font-size: var(--font-size-base);
   background-color: transparent;
-  text-transform: lowercase;
-  border: 1px solid ${({ entityType }) => `var(--catalog-entity-border-color-${entityType})`};
-  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+  text-transform: none;
+  border: 1px solid
+    ${({ entityType }) => !core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)
+    ? 'var(--catalog-entity-border-color-custom)'
+    : `var(--catalog-entity-border-color-${entityType})`};
+  color: ${({ entityType }) => !core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)
+    ? 'var(--catalog-entity-icon-color-custom)'
+    : `var(--catalog-entity-icon-color-${entityType})`};
 `;
 //# sourceMappingURL=CatalogEntityTypeTag.js.map

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

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { Select } from '../../components/Select/Select';
-import { CatalogSwitcherItem, SortOption } from '../../core/types/catalog';
+import { CatalogSwitcherItem, SortOption } from '../../core/types';
 export type CatalogSelectorProps = {
     catalogSwitcherItems: CatalogSwitcherItem[];
     setSearchQuery: (query: string) => void;

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

@@ -10,7 +10,7 @@ const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight
 const CatalogEntityTypeIcon_1 = require("../../../components/Catalog/CatalogEntityTypeIcon");
 function CatalogEntityCell({ entity }) {
     return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityCell" },
-        react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type, defaultColor: true }),
+        react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type }),
         react_1.default.createElement(EntityTitleContent, null,
             react_1.default.createElement(EntityTitle, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityTitle" },
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CatalogViewMode } from '../../core/types/catalog';
+import { CatalogViewMode } from '../../core/types';
 export type CatalogViewModeToggleProps = {
     viewMode: CatalogViewMode;
     onViewModeChange: (mode: CatalogViewMode) => void;

package/lib/components/Catalog/variables.js

@@ -132,10 +132,14 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-entity-border-color-api-operation: var(--color-raspberry-3);
   --catalog-entity-bg-color-api-operation: var(--color-raspberry-1);
 
+  --catalog-entity-icon-color-custom: var(--color-persian-green-8);
+  --catalog-entity-border-color-custom: var(--color-persian-green-5);
+  --catalog-entity-bg-color-custom: var(--color-persian-green-1);
+
   /**
     * @tokens Catalog tags
     */
-  --catalog-tags-wrapper-gap: 4px;
+  --catalog-tags-wrapper-gap: var(--spacing-xs) calc(var(--spacing-xs) - 5px);
   --catalog-tags-more-button-font-size: var(--font-size-base);
   --catalog-tags-more-button-margin-left: 4px;
   --catalog-tags-placeholder-bg-color: var(--bg-color);
@@ -195,7 +199,7 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-card-height: 241px;
   --catalog-card-min-width: 400px;
-  --catalog-card-padding-vertical: var(--spacing-md);
+  --catalog-card-padding-vertical: var(--spacing-base);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
   --catalog-card-text-color: var(--text-color-secondary);
@@ -225,12 +229,11 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog metadata
     */
-  --catalog-metadata-section-margin-top: var(--spacing-md);
-  --catalog-metadata-section-gap: var(--spacing-lg);
+  --catalog-metadata-section-margin-top: var(--spacing-base);
+  --catalog-metadata-section-gap: var(--spacing-xs);
   --catalog-metadata-label-font-size: var(--font-size-base);
   --catalog-metadata-label-font-weight: var(--font-weight-medium);
   --catalog-metadata-label-color: var(--text-color-secondary);
-  --catalog-metadata-label-margin-bottom: var(--spacing-unit);
   --catalog-metadata-column-half-gap: var(--spacing-sm);
   --catalog-metadata-heading-size: var(--font-size-md);
 
@@ -265,7 +268,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-description-line-height: var(--line-height-base);
   --catalog-card-description-font-weight: var(--font-weight-regular);
   --catalog-card-description-height: 62px;
-  --catalog-card-description-margin-top: 2px;
+  --catalog-card-description-margin-top: 8px;
 
   --catalog-card-content-gap: var(--spacing-xs);
   --catalog-card-content-gap-vertical: var(--spacing-sm);

package/lib/components/CatalogClassic/CatalogClassic.js

@@ -11,6 +11,7 @@ const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const H2_1 = require("../../components/Typography/H2");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
+const FilterInput_1 = require("../../components/Filter/FilterInput");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 const CatalogClassicHighlight_1 = require("../../components/CatalogClassic/CatalogClassicHighlight");
 const CatalogClassicActions_1 = require("../../components/CatalogClassic/CatalogClassicActions");
@@ -25,7 +26,7 @@ function CatalogClassic(props) {
     (0, hooks_1.useModalScrollLock)(filterPopoverVisible);
     return (react_1.default.createElement(CatalogClassicHighlight_1.HighlightContext.Provider, { value: [filterTerm] },
         react_1.default.createElement(exports.CatalogPageWrapper, { "data-component-name": "CatalogClassic/CatalogClassic", withoutFilters: !filters.length },
-            react_1.default.createElement(FiltersSidebar, { menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: catalogConfig.filterValuesCasing }) }),
+            Boolean(filters.length) && (react_1.default.createElement(FiltersSidebar, { menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: catalogConfig.filterValuesCasing }) })),
             filterPopoverVisible && (react_1.default.createElement(FilterPopover_1.FilterPopover, { onClose: () => setFilterPopoverVisible(false), setFilterTerm: setFilterTerm, filterTerm: filterTerm, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),
             react_1.default.createElement(CatalogClassicActions_1.CatalogClassicActions, { onOpenFilter: () => setFilterPopoverVisible(true), filters: filters, filterTerm: filterTerm }),
             react_1.default.createElement(exports.CatalogPageContent, null,
@@ -37,7 +38,9 @@ function CatalogClassic(props) {
                     catalogConfig.description ? (react_1.default.createElement(exports.CatalogDescription, { "data-translation-key": catalogConfig.descriptionTranslationKey },
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
-                        ' ')) : null),
+                        ' ')) : null,
+                    !filters.length && (react_1.default.createElement(CatalogSearchWrapper, null,
+                        react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) })))),
                 react_1.default.createElement(CatalogClassicVirtualizedGroups_1.CatalogClassicVirtualizedGroups, { groups: groups, filters: filters, filterTerm: filterTerm })))));
 }
 exports.CatalogPageContent = styled_components_1.default.main `
@@ -110,4 +113,8 @@ const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
   }
   --menu-container-padding-top: 0;
 `;
+const CatalogSearchWrapper = styled_components_1.default.div `
+  margin-top: var(--spacing-base);
+  max-width: 300px;
+`;
 //# sourceMappingURL=CatalogClassic.js.map

package/lib/components/CodeBlock/CodeBlock.d.ts

@@ -8,8 +8,8 @@ export type CodeBlockProps = {
     header?: CodeBlockControlsProps;
     dataTestId?: string;
     className?: string;
-    tabs?: CodeBlockTabItems;
-    dropdown?: CodeBlockDropdownItems;
+    tabs?: CodeBlockItems;
+    dropdown?: CodeBlockItems;
     withLineNumbers?: boolean;
     startLineNumber?: number;
     highlightedHtml?: string;
@@ -25,20 +25,13 @@ type UnstableExternalCodeSample = {
     label?: string;
     get: (source: ExternalSource) => string;
 };
-export type CodeBlockTabItems = {
+export type CodeBlockItems = {
     items: {
         name: string;
         lang?: string;
+        id: string;
     }[];
-    onChange: (name: string) => void;
-    value: string;
-};
-export type CodeBlockDropdownItems = {
-    items: {
-        name: string;
-        lang?: string;
-    }[];
-    onChange: (name: string | string[]) => void;
+    onChange: (id: string) => void;
     value: string;
 };
 type ExternalSource = {

package/lib/components/CodeBlock/CodeBlockControls.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { JSX } from 'react';
-import type { CodeBlockDropdownItems, CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockControlsProps = {
     children?: React.ReactNode;
     className?: string;
     title?: React.ReactNode | string;
     controls?: ControlItems | false;
-    tabs?: CodeBlockTabItems;
-    dropdown?: CodeBlockDropdownItems;
+    tabs?: CodeBlockItems;
+    dropdown?: CodeBlockItems;
 };
 type ControlItems = {
     copy?: CopyControlProps;

package/lib/components/CodeBlock/CodeBlockDropdown.d.ts

@@ -1,3 +1,3 @@
 import { type JSX } from 'react';
-import type { CodeBlockDropdownItems } from '../../components/CodeBlock/CodeBlock';
-export declare function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownItems): JSX.Element;
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
+export declare function CodeBlockDropdown({ items, onChange, value }: CodeBlockItems): JSX.Element;

package/lib/components/CodeBlock/CodeBlockDropdown.js

@@ -5,31 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlockDropdown = CodeBlockDropdown;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const Button_1 = require("../../components/Button/Button");
-const ChevronSortIcon_1 = require("../../icons/ChevronSortIcon/ChevronSortIcon");
 const NoneIcon_1 = require("../../icons/NoneIcon/NoneIcon");
 const utils_1 = require("../../core/utils");
 function CodeBlockDropdown({ items, onChange, value }) {
-    const activeItem = items.find((item) => item.name === value) || items[0];
+    const activeItem = items.find((item) => item.id === value) || items[0];
     const icon = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) ? (0, utils_1.getFileIconByLanguage)(activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) : null;
-    return (react_1.default.createElement(StyledDropdown, { alignment: "end", trigger: react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(ChevronSortIcon_1.ChevronSortIcon, null), iconPosition: "right", variant: "text", size: "small" },
+    return (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, alignment: "end", trigger: react_1.default.createElement(Button_1.Button, { iconPosition: "right", variant: "ghost", size: "small" },
             icon,
             activeItem.name) },
         react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item) => {
             const icon = (0, utils_1.getFileIconByLanguage)(item.lang || '');
-            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.lang, onAction: () => onChange(item.name), active: item.name === activeItem.name, prefix: item.lang ? icon : react_1.default.createElement(NoneIcon_1.NoneIcon, { size: "var(--icon-size)" }) }, item.name));
+            const isActive = item.id === value;
+            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.id, onAction: () => onChange(item.id), active: isActive, prefix: item.lang ? icon : react_1.default.createElement(NoneIcon_1.NoneIcon, { size: "var(--icon-size)" }) }, item.name));
         }))));
 }
-const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
-  margin-left: auto;
-  --icon-size: 18px;
-  --button-color: var(--text-color-secondary);
-  button.button-size-small {
-    --button-icon-size: 18px;
-  }
-`;
 //# sourceMappingURL=CodeBlockDropdown.js.map