@redocly/theme 0.64.0-next.0 → 0.64.0-next.2

package/lib/components/Banner/Banner.js

@@ -46,11 +46,11 @@ function setBannerHeight(height) {
     document.documentElement.style.setProperty('--banner-height', `${height}px`);
 }
 function Banner({ className }) {
-    const { useBanner, useMarkdownText } = (0, hooks_1.useThemeHooks)();
+    const { useBanner, useMarkdocRenderer } = (0, hooks_1.useThemeHooks)();
     const { banner, dismissBanner } = useBanner();
     const [displayBanner, setDisplayBanner] = (0, react_1.useState)(undefined);
     const [isVisible, setIsVisible] = (0, react_1.useState)(false);
-    const markdownContent = useMarkdownText((displayBanner === null || displayBanner === void 0 ? void 0 : displayBanner.content) || '');
+    const markdownContent = useMarkdocRenderer(displayBanner === null || displayBanner === void 0 ? void 0 : displayBanner.ast);
     const bannerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (banner) {
@@ -117,7 +117,7 @@ function Banner({ className }) {
     return (react_1.default.createElement(BannerWrapper, { ref: bannerRef, "data-component-name": "Banner/Banner", className: className, "$color": bannerColor, "$isVisible": isVisible },
         react_1.default.createElement(BannerContent, null,
             react_1.default.createElement(Markdown_1.Markdown, { compact: true }, markdownContent)),
-        displayBanner.dismissible && (react_1.default.createElement(DismissButton, { variant: "ghost", size: "var(--banner-button-size)", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, { color: `var(--banner-${bannerColor}-icon-color)`, size: "16px" }), onClick: () => dismissBanner(displayBanner.content), "aria-label": "Dismiss banner" }))));
+        displayBanner.dismissible && (react_1.default.createElement(DismissButton, { variant: "ghost", size: "var(--banner-button-size)", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, { color: `var(--banner-${bannerColor}-icon-color)`, size: "16px" }), onClick: () => dismissBanner(displayBanner.hash), "aria-label": "Dismiss banner" }))));
 }
 const BannerContent = styled_components_1.default.div `
   flex: 1;

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

@@ -1,10 +1,10 @@
 import { JSX } from 'react';
-import { SortOption, CatalogViewMode } from '../../core/types';
+import { CatalogViewMode } from '../../core/types';
 export type CatalogActionsRowProps = {
     searchQuery: string;
     setSearchQuery: (updatedTerm: string) => void;
-    sortOption: SortOption | null;
-    setSortOption: (option: SortOption | null) => void;
+    sortOption: string | null;
+    setSortOption: (option: string | null) => void;
     viewMode?: CatalogViewMode;
     onViewModeChange?: (mode: CatalogViewMode) => void;
     isDetailsPage?: boolean;

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

@@ -11,7 +11,7 @@ const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight
 const GraphIcon_1 = require("../../../icons/GraphIcon/GraphIcon");
 const ArrowRightIcon_1 = require("../../../icons/ArrowRightIcon/ArrowRightIcon");
 const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
-const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
+const CatalogTags_1 = require("../../../components/Catalog/CatalogTags");
 const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
 const utils_1 = require("../../../core/utils");
 function CatalogCard({ entity, catalogConfig }) {
@@ -37,7 +37,7 @@ function CatalogCard({ entity, catalogConfig }) {
             react_1.default.createElement(CardMetadataSection, null,
                 react_1.default.createElement(MetadataRow, null,
                     react_1.default.createElement(MetadataLabel, null, translate('catalog.metadata.domains', 'Domains:')),
-                    react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_b = entity.domains) === null || _b === void 0 ? void 0 : _b.map((domain) => domain.title)) || [], showPlaceholder: true, tagProps: {
+                    react_1.default.createElement(CatalogTags_1.CatalogTags, { items: ((_b = entity.domains) === null || _b === void 0 ? void 0 : _b.map((domain) => domain.title)) || [], showPlaceholder: true, tagProps: {
                             style: {
                                 fontSize: 'var(--catalog-card-font-size)',
                                 backgroundColor: 'var(--catalog-card-icon-bg-color)',
@@ -48,19 +48,18 @@ function CatalogCard({ entity, catalogConfig }) {
                         } })),
                 react_1.default.createElement(MetadataRow, null,
                     react_1.default.createElement(MetadataLabel, null, translate('catalog.metadata.owners', 'Owners:')),
-                    react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_c = entity.owners) === null || _c === void 0 ? void 0 : _c.map((owner) => owner.key)) || [], showPlaceholder: true, showAvatars: true, tagProps: {
+                    react_1.default.createElement(CatalogTags_1.CatalogTags, { items: ((_c = entity.owners) === null || _c === void 0 ? void 0 : _c.map((owner) => owner.key)) || [], showPlaceholder: true, showAvatars: true, tagProps: {
                             style: {
                                 fontSize: 'var(--catalog-card-font-size)',
                                 backgroundColor: 'var(--catalog-card-icon-bg-color)',
                                 borderRadius: 'var(--border-radius-xl)',
-                                paddingLeft: 'var(--catalog-card-metadata-owner-tag-left-padding)',
                             },
                             textTransform: 'none',
                             variant: 'outline',
                         } })))),
         react_1.default.createElement(Divider, null),
         react_1.default.createElement(CardFooter, { hasTags: !!((_d = entity.tags) === null || _d === void 0 ? void 0 : _d.length) },
-            react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: entity.tags || [], tagProps: {
+            react_1.default.createElement(CatalogTags_1.CatalogTags, { items: entity.tags || [], tagProps: {
                     style: {
                         fontSize: 'var(--catalog-card-font-size)',
                         borderRadius: 'var(--border-radius)',
@@ -129,7 +128,6 @@ const ArrowCircle = styled_components_1.default.div `
 const CardContent = styled_components_1.default.div `
   min-width: 0;
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
-  height: 100%;
 `;
 const CardFooter = styled_components_1.default.div `
   height: var(--catalog-card-footer-height);

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

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import type { CatalogEntityConfig } from '@redocly/config';
-import { BffCatalogEntityList, SortOption } from '../../core/types';
+import { BffCatalogEntityList } from '../../core/types';
 export type CatalogEntitiesProps = {
     catalogConfig: CatalogEntityConfig;
     excludedEntities?: CatalogEntityConfig['excludes'];
@@ -10,7 +10,7 @@ export type CatalogEntitiesProps = {
     viewMode: string;
     setEntitiesCounter: (counter: number) => void;
     initialEntitiesList?: BffCatalogEntityList;
-    sortOption: SortOption | null;
+    sortOption: string | null;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };

package/lib/components/Catalog/CatalogEntities.js

@@ -59,7 +59,7 @@ function CatalogEntities(props) {
         filter: initialFilter && filterQuery
             ? `(${initialFilter}) AND (${filterQuery})`
             : initialFilter || filterQuery,
-        sort: sortOption || undefined,
+        sort: sortOption || (viewMode === 'table' ? 'updated_at' : 'type,title'),
         search: searchQuery,
     }, props.initialEntitiesList);
     const onRowClick = (entity) => {

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

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

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

@@ -93,7 +93,7 @@ const MetadataWrapper = styled_components_1.default.div `
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
-  margin: var(--spacing-lg) 0;
+  margin-bottom: var(--spacing-base);
 `;
 const Label = styled_components_1.default.span `
   font-weight: var(--font-weight-medium);

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

@@ -37,7 +37,7 @@ const LinksWrapper = styled_components_1.default.div `
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
-  margin: var(--spacing-lg) 0;
+  margin: 0 0 var(--spacing-base) 0;
 `;
 const Label = styled_components_1.default.div `
   display: flex;

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

@@ -65,6 +65,7 @@ const CatalogEntityPropertiesGridWrapper = styled_components_1.default.div `
   display: grid;
   gap: var(--spacing-base);
   grid-template-columns: 1fr;
+  margin-bottom: var(--spacing-lg);
 
   @media screen and (min-width: ${core_1.breakpoints.small}) {
     grid-template-columns: repeat(2, 1fr);

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

@@ -45,11 +45,12 @@ const CardHeader = styled_components_1.default.div `
 const CardContent = styled_components_1.default.div `
   flex: 1;
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   gap: var(--catalog-card-content-gap);
   flex-wrap: wrap;
   color: var(--text-color-primary);
   font-size: var(--font-size-lg);
   line-height: var(--line-height-lg);
+  font-weight: var(--font-weight-semibold);
 `;
 //# sourceMappingURL=CatalogEntityPropertyCard.js.map

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContactProperty = ContactProperty;
 const react_1 = __importDefault(require("react"));
 const SlackIcon_1 = require("../../../../icons/SlackIcon/SlackIcon");
-const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
 const hooks_1 = require("../../../../core/hooks");
+const Button_1 = require("../../../../components/Button/Button");
 function ContactProperty({ entity }) {
     var _a, _b;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
@@ -17,10 +17,6 @@ function ContactProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SlackIcon_1.SlackIcon, null),
-                translate('catalog.contact.label', 'Slack channels')), content: react_1.default.createElement(react_1.default.Fragment, null, channels === null || channels === void 0 ? void 0 : channels.map((channel) => (react_1.default.createElement(Tag_1.Tag, { key: channel.name, textTransform: "none", style: { backgroundColor: 'var(--bg-color)', cursor: 'pointer' }, onClick: () => {
-                    if (channel.url) {
-                        window.open(channel.url, '_blank');
-                    }
-                } }, channel.name)))) })));
+                translate('catalog.contact.label', 'Slack channels')), content: react_1.default.createElement(react_1.default.Fragment, null, channels === null || channels === void 0 ? void 0 : channels.map((channel) => (react_1.default.createElement(Button_1.Button, { key: channel.name, variant: "outlined", size: "small", style: { backgroundColor: 'var(--bg-color)' }, to: channel.url, external: true }, channel.name)))) })));
 }
 //# sourceMappingURL=ContactProperty.js.map

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

@@ -6,18 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DomainsProperty = DomainsProperty;
 const react_1 = __importDefault(require("react"));
 const GraphIcon_1 = require("../../../../icons/GraphIcon/GraphIcon");
-const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
 const hooks_1 = require("../../../../core/hooks");
+const Button_1 = require("../../../../components/Button/Button");
 function DomainsProperty({ entity }) {
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, usePageProps } = (0, hooks_1.useThemeHooks)();
+    const { entitiesCatalogConfig } = usePageProps();
+    const { getEntityLink } = (0, hooks_1.useCatalogEntityLink)(entitiesCatalogConfig);
     const { translate } = useTranslate();
     const { domains = [] } = entity;
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(GraphIcon_1.GraphIcon, null),
-                translate('catalog.domains.label', 'Domains')), content: react_1.default.createElement(react_1.default.Fragment, null, domains === null || domains === void 0 ? void 0 : domains.map((domain) => (react_1.default.createElement(Tag_1.Tag, { key: domain === null || domain === void 0 ? void 0 : domain.id, style: { backgroundColor: 'var(--bg-color)' }, variant: "outline" },
-                react_1.default.createElement(GraphIcon_1.GraphIcon, null), domain === null || domain === void 0 ? void 0 :
-                domain.title)))) })));
+                translate('catalog.domains.label', 'Domains')), content: react_1.default.createElement(react_1.default.Fragment, null, domains === null || domains === void 0 ? void 0 : domains.map((domain) => (react_1.default.createElement(Button_1.Button, { key: domain === null || domain === void 0 ? void 0 : domain.id, variant: "outlined", size: "small", style: { backgroundColor: 'var(--bg-color)' }, to: getEntityLink(domain), icon: react_1.default.createElement(GraphIcon_1.GraphIcon, null), external: true }, domain === null || domain === void 0 ? void 0 : domain.title)))) })));
 }
 //# sourceMappingURL=DomainsProperty.js.map

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

@@ -17,6 +17,6 @@ function FormatProperty({ entity }) {
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(NotesIcon_1.NotesIcon, null),
                 translate('catalog.format.label', 'Format')), content: react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(Tag_1.Tag, { textTransform: "none", key: (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType, style: { backgroundColor: 'var(--bg-color)' } }, (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.specType)), hoverEffect: false })));
+                react_1.default.createElement(Tag_1.Tag, { variant: "outline", textTransform: "none", key: (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType, style: { backgroundColor: 'var(--bg-color)' } }, (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.specType)), hoverEffect: false })));
 }
 //# sourceMappingURL=FormatProperty.js.map

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

@@ -5,20 +5,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OwnersProperty = OwnersProperty;
 const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../../../core/hooks");
 const PeopleIcon_1 = require("../../../../icons/PeopleIcon/PeopleIcon");
-const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
-const hooks_1 = require("../../../../core/hooks");
+const hooks_2 = require("../../../../core/hooks");
+const Button_1 = require("../../../../components/Button/Button");
+const CatalogAvatar_1 = require("../../../../components/Catalog/CatalogAvatar");
 function OwnersProperty({ entity }) {
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, usePageProps } = (0, hooks_2.useThemeHooks)();
     const { translate } = useTranslate();
+    const { entitiesCatalogConfig } = usePageProps();
+    const { getEntityLink } = (0, hooks_1.useCatalogEntityLink)(entitiesCatalogConfig);
     const { owners = [] } = entity;
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(PeopleIcon_1.PeopleIcon, null),
-                translate('catalog.owners.label', 'Owners')), content: react_1.default.createElement(react_1.default.Fragment, null, owners.map((owner) => (react_1.default.createElement(Tag_1.Tag, { key: owner === null || owner === void 0 ? void 0 : owner.id, style: {
-                    backgroundColor: 'var(--bg-color)',
-                    borderRadius: 'var(--border-radius-xl)',
-                }, variant: "outline" }, owner === null || owner === void 0 ? void 0 : owner.title)))) })));
+                translate('catalog.owners.label', 'Owners')), content: react_1.default.createElement(react_1.default.Fragment, null, owners.map((owner) => {
+                const entityLink = getEntityLink(owner);
+                return (react_1.default.createElement(Button_1.Button, { key: owner === null || owner === void 0 ? void 0 : owner.id, variant: "outlined", size: "small", style: {
+                        backgroundColor: 'var(--bg-color)',
+                        borderRadius: 'var(--border-radius-xl)',
+                        paddingLeft: '2px',
+                    }, to: entityLink, icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: owner === null || owner === void 0 ? void 0 : owner.key, size: "small" }), external: true }, owner === null || owner === void 0 ? void 0 : owner.title));
+            })) })));
 }
 //# sourceMappingURL=OwnersProperty.js.map

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagsProperty = TagsProperty;
 const react_1 = __importDefault(require("react"));
 const TagsIcon_1 = require("../../../../icons/TagsIcon/TagsIcon");
-const CatalogTagsWithTooltip_1 = require("../../../../components/Catalog/CatalogTagsWithTooltip");
+const CatalogTags_1 = require("../../../../components/Catalog/CatalogTags");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
 const hooks_1 = require("../../../../core/hooks");
 function TagsProperty({ entity }) {
@@ -15,7 +15,7 @@ function TagsProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(TagsIcon_1.TagsIcon, null),
-                translate('catalog.tags.label', 'Tags')), content: react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { itemsToShow: 8, items: entity.tags || [], tagProps: {
+                translate('catalog.tags.label', 'Tags')), content: react_1.default.createElement(CatalogTags_1.CatalogTags, { itemsToShow: 8, items: entity.tags || [], tagProps: {
                     style: {
                         fontSize: 'var(--font-size-base)',
                         borderRadius: 'var(--border-radius)',

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

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '../../../../core/types';
 export type CatalogEntityApiDescriptionRelationsProps = {
     entity: BffCatalogEntity;
     catalogConfig: CatalogEntityConfig;
@@ -14,8 +14,8 @@ export type CatalogEntityApiDescriptionRelationsProps = {
     searchQuery: string;
     setSearchQuery: (query: string) => void;
     setFilter: (filter?: string) => void;
-    sortOption: SortOption | null;
-    setSortOption: (sortOption: SortOption | null) => void;
+    sortOption: string | null;
+    setSortOption: (sortOption: string | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     shouldShowLoadMore: boolean;

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

@@ -12,7 +12,7 @@ const CatalogEntityDefaultRelations_1 = require("../../../../components/Catalog/
 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" },
+    return (react_1.default.createElement(TabsWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
         react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, 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" })),
@@ -24,4 +24,7 @@ function CatalogEntityApiDescriptionRelations({ entity, relations, query, search
 const TabItem = styled_components_1.default.div `
   padding: var(--spacing-sm);
 `;
+const TabsWrapper = styled_components_1.default.div `
+  --md-tabs-container-margin: none;
+`;
 //# sourceMappingURL=CatalogEntityApiDescriptionRelations.js.map

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

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '../../../../core/types';
-import type { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '../../../../core/types';
 export type CatalogEntityDefaultRelationsProps = {
     entity: BffCatalogEntity;
     entitiesCatalogConfig: EntitiesCatalogConfig;
@@ -13,8 +13,8 @@ export type CatalogEntityDefaultRelationsProps = {
     };
     searchQuery: string;
     setSearchQuery: (query: string) => void;
-    sortOption: SortOption | null;
-    setSortOption: (sortOption: SortOption | null) => void;
+    sortOption: string | null;
+    setSortOption: (sortOption: string | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     shouldShowLoadMore: boolean;

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

@@ -9,6 +9,7 @@ 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 CatalogLastUpdateCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogLastUpdateCell");
 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: getRelationsTableColumns(listType), sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: listType })));
@@ -21,7 +22,7 @@ function getRelationsTableColumns(listType) {
             render: (entity) => react_1.default.createElement(CatalogEntityCell_1.CatalogEntityCell, { entity: entity }),
             sortable: true,
             sortKey: 'title',
-            width: '2.5fr',
+            width: '4fr',
         },
         {
             key: 'type',
@@ -29,13 +30,24 @@ function getRelationsTableColumns(listType) {
             render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
             sortable: true,
             sortKey: 'type',
-            width: '1fr',
+            width: '2fr',
         },
         {
             key: 'relationType',
             title: 'Relations',
             render: (entity) => (react_1.default.createElement(CatalogEntityRelationCell_1.CatalogEntityRelationCell, { relationType: entity.relationType, relationRole: entity.relationRole })),
+            width: '2fr',
+            sortable: true,
+            sortKey: 'relation_type',
+        },
+        {
+            key: 'lastUpdate',
+            title: 'Last update',
+            render: (entity) => react_1.default.createElement(CatalogLastUpdateCell_1.CatalogLastUpdateCell, { lastModified: entity.updatedAt }),
             width: '1fr',
+            minWidth: '112px',
+            sortable: true,
+            sortKey: 'updated_at',
         },
     ];
     if (listType === 'api-operation' || listType === 'data-schema') {

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('title');
+    const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
     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.d.ts

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '../../../../core/types';
-import type { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '../../../../core/types';
 import { CatalogColumn } from '../../../../components/Catalog/CatalogTableView/CatalogTableView';
 export type CatalogEntityRelationsTableProps = {
     entity: BffCatalogEntity;
@@ -16,8 +16,8 @@ export type CatalogEntityRelationsTableProps = {
     setSearchQuery: (query: string) => void;
     heading?: string;
     columns: CatalogColumn<BffCatalogRelatedEntity>[];
-    sortOption: SortOption | null;
-    setSortOption: (sortOption: SortOption | null) => void;
+    sortOption: string | null;
+    setSortOption: (sortOption: string | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     shouldShowLoadMore: boolean;

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

@@ -43,7 +43,7 @@ const CatalogEntityRelationsTableWrapper = styled_components_1.default.div `
   min-width: 0;
 `;
 const Heading = styled_components_1.default.h2 `
-  margin: var(--spacing-base) 0;
+  margin: 0 0 var(--spacing-base) 0;
   font-size: var(--font-size-md);
   color: var(--catalog-metadata-heading-color);
 `;

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

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '../../../../core/types';
-import type { BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import type { BffCatalogRelatedEntity } from '../../../../core/types';
 import { CatalogColumn } from '../../../../components/Catalog/CatalogTableView/CatalogTableView';
 export type CatalogEntityRelationsTableContentProps = {
     entitiesCatalogConfig: EntitiesCatalogConfig;
@@ -13,7 +13,7 @@ export type CatalogEntityRelationsTableContentProps = {
     };
     searchQuery: string;
     columns: CatalogColumn<BffCatalogRelatedEntity>[];
-    sortOption: SortOption | null;
+    sortOption: string | null;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     shouldShowLoadMore: boolean;

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

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '../../../../core/types';
 export type CatalogEntityTeamRelationsProps = {
     entity: BffCatalogEntity;
     catalogConfig: CatalogEntityConfig;
@@ -14,8 +14,8 @@ export type CatalogEntityTeamRelationsProps = {
     searchQuery: string;
     setSearchQuery: (query: string) => void;
     setFilter: (filter: string) => void;
-    sortOption: SortOption | null;
-    setSortOption: (sortOption: SortOption | null) => void;
+    sortOption: string | null;
+    setSortOption: (sortOption: string | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     shouldShowLoadMore: boolean;

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

@@ -13,6 +13,7 @@ const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityRelationsTable_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable");
 const CatalogUserEntityCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogUserEntityCell");
 const CatalogEntityDefaultRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations");
+const CatalogLastUpdateCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogLastUpdateCell");
 const teamColumns = [
     {
         key: 'entity',
@@ -21,12 +22,12 @@ const teamColumns = [
             var _a;
             return (react_1.default.createElement(CatalogUserEntityCell_1.CatalogUserEntityCell, { name: entity.title, email: (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.email }));
         },
-        width: '2fr',
+        width: '3fr',
         sortable: true,
         sortKey: 'title',
     },
     {
-        key: 'metadata',
+        key: 'metadata.role',
         title: 'Role',
         render: (entity) => { var _a, _b; return (((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.role) ? react_1.default.createElement(Tag_1.Tag, null, (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.role) : null); },
         width: '2fr',
@@ -35,7 +36,16 @@ const teamColumns = [
         key: 'description',
         title: 'Description',
         render: (entity) => react_1.default.createElement(EntityDescription, null, entity.summary),
-        width: '3fr',
+        width: '2fr',
+    },
+    {
+        key: 'lastUpdate',
+        title: 'Last update',
+        render: (entity) => react_1.default.createElement(CatalogLastUpdateCell_1.CatalogLastUpdateCell, { lastModified: entity.updatedAt }),
+        width: '1fr',
+        minWidth: '112px',
+        sortable: true,
+        sortKey: 'updated_at',
     },
 ];
 function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {

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

@@ -55,7 +55,7 @@ function CatalogEntitySchema({ entity, relatedEntity, catalogConfig, RedocSchema
     const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
         catalogConfig,
     });
-    return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
+    return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntitySchema" },
         react_1.default.createElement(HeaderWrapper, null,
             react_1.default.createElement(Heading, null, translate('catalog.entity.schema.title')),
             !isGraphql && (react_1.default.createElement(CopyButton_1.CopyButton, { data: rawSchema, buttonText: "Copy Schema", type: "compound", variant: "secondary", iconPosition: "right", size: "medium", onCopyClick: () => telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage([
@@ -76,8 +76,7 @@ const MetadataWrapper = styled_components_1.default.div `
   flex-direction: column;
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
-  margin-top: var(--spacing-base);
-  margin-bottom: var(--spacing-xs);
+  margin-bottom: var(--spacing-lg);
 `;
 const SchemaContentWrapper = styled_components_1.default.div `
   flex: 1;
@@ -94,6 +93,8 @@ const HeaderWrapper = styled_components_1.default.div `
 `;
 const Heading = styled_components_1.default.h2 `
   font-size: var(--catalog-metadata-heading-size);
+  line-height: var(--line-height-lg);
+  margin: 0;
 `;
 const SplitViewWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export type CatalogEntityTypeIconProps = {
     entityType: string;
-    defaultColor?: boolean;
+    defaultColors?: boolean;
+    size?: 'large' | 'medium';
 };
-export declare function CatalogEntityTypeIcon({ entityType, defaultColor, }: CatalogEntityTypeIconProps): React.JSX.Element;
+export declare function CatalogEntityTypeIcon({ entityType, defaultColors, size, }: CatalogEntityTypeIconProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntityTypeIcon.js

@@ -8,19 +8,19 @@ 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 })));
+function CatalogEntityTypeIcon({ entityType, defaultColors = false, size = 'medium', }) {
+    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon", entityType: entityType, defaultColors: defaultColors, size: size },
+        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: false })));
 }
 const IconContainer = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--catalog-table-icon-width);
-  height: var(--catalog-table-icon-height);
+  width: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-width-large)' : 'var(--catalog-table-icon-width-medium)')};
+  height: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-height-large)' : 'var(--catalog-table-icon-height-medium)')};
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColor, entityType }) => {
-    if (defaultColor) {
+  background-color: ${({ defaultColors, entityType }) => {
+    if (defaultColors) {
         return 'var(--catalog-entity-bg-color)';
     }
     if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
@@ -30,8 +30,8 @@ const IconContainer = styled_components_1.default.div `
 }};
   flex-shrink: 0;
   border: 1px solid
-    ${({ defaultColor, entityType }) => {
-    if (defaultColor) {
+    ${({ defaultColors, entityType }) => {
+    if (defaultColors) {
         return 'var(--catalog-entity-border-color)';
     }
     if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {

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

@@ -1,11 +1,10 @@
 import { JSX } from 'react';
-import { SortOption } from '../../../core';
 import { CatalogViewMode } from '../../../core';
 type CatalogMobileTopBarProps = {
     setMobileFiltersPanelOpen: (open: boolean) => void;
     activeFiltersCount: number;
-    setSortOption: (sortOption: SortOption | null) => void;
-    sortOption: SortOption | null;
+    setSortOption: (sortOption: string | null) => void;
+    sortOption: string | null;
     viewMode: CatalogViewMode;
     setViewMode: (viewMode: CatalogViewMode) => void;
 };