@redocly/theme 0.64.0-next.1 → 0.64.0-next.3

package/lib/components/Admonition/Admonition.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { JSX } from 'react';
 type AdmonitionTypeProps = {
-    type: 'warning' | 'success' | 'danger' | 'info';
+    type: 'warning' | 'success' | 'danger' | 'info' | 'default';
 };
 export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
     name?: string;

package/lib/components/Admonition/Admonition.js

@@ -43,11 +43,13 @@ const WarningCycleIcon_1 = require("../../icons/WarningCycleIcon/WarningCycleIco
 const CheckmarkOutlineIcon_1 = require("../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
 const ErrorIcon_1 = require("../../icons/ErrorIcon/ErrorIcon");
 const InformationIcon_1 = require("../../icons/InformationIcon/InformationIcon");
+const IdeaIcon_1 = require("../../icons/IdeaIcon/IdeaIcon");
 const IconsMap = {
     warning: WarningCycleIcon_1.WarningCycleIcon,
     success: CheckmarkOutlineIcon_1.CheckmarkOutlineIcon,
     danger: ErrorIcon_1.ErrorIcon,
     info: InformationIcon_1.InformationIcon,
+    default: IdeaIcon_1.IdeaIcon,
 };
 function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
     const Icon = IconsMap[type] || IconsMap['info'];

package/lib/components/Admonition/variables.dark.js

@@ -14,5 +14,8 @@ exports.admonitionDarkMode = (0, styled_components_1.css) `
 
   --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
   --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
+
+  --admonition-default-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
+  --admonition-default-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Admonition/variables.js

@@ -91,6 +91,19 @@ exports.admonition = (0, styled_components_1.css) `
   --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
 
+  /**
+  * @tokens Admonition type primary
+  */
+
+  --admonition-default-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
+  --admonition-default-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-default-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-default-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
+  --admonition-default-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
+  --admonition-default-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-default-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-default-border: var(--admonition-default-border-width) var(--admonition-default-border-style) var(--admonition-default-border-color); // @presenter Border
+  
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

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

@@ -19,8 +19,8 @@ exports.buttonDarkMode = (0, styled_components_1.css) `
   --button-bg-color-secondary-hover: var(--color-warm-grey-5);
   --button-bg-color-secondary-pressed: var(--color-warm-grey-6);
   --button-bg-color-secondary-danger-pressed: var(--color-raspberry-9);
-  --button-bg-color-primary-hover: var(--color-blue-5);
-  --button-bg-color-primary-pressed: var(--color-blue-4);
+  --button-bg-color-primary-hover: var(--color-primary-hover, var(--button-bg-color-primary-hover-legacy));
+  --button-bg-color-primary-pressed: var(--color-primary-active, var(--button-bg-color-primary-pressed-legacy));
   --button-bg-color-primary-danger-hover: var(--color-raspberry-5);
   --button-bg-color-primary-danger-pressed: var(--color-raspberry-4);
   --button-bg-color-disabled: var(--color-warm-grey-3);

package/lib/components/Button/variables.js

@@ -26,9 +26,9 @@ exports.button = (0, styled_components_1.css) `
   --button-content-color-primary-hover: var(--color-blue-7); // @presenter Color
   --button-content-color-primary-pressed: var(--color-blue-8); // @presenter Color
 
-  --button-bg-color-primary: var(--color-blue-6); // @presenter Color
-  --button-bg-color-primary-hover: var(--color-blue-7); // @presenter Color
-  --button-bg-color-primary-pressed: var(--color-blue-8); // @presenter Color
+  --button-bg-color-primary: var(--color-primary-base, var(--button-bg-color-primary-legacy)); // @presenter Color
+  --button-bg-color-primary-hover: var(--color-primary-hover, var(--button-bg-color-primary-hover-legacy)); // @presenter Color
+  --button-bg-color-primary-pressed: var(--color-primary-active, var(--button-bg-color-primary-pressed-legacy)); // @presenter Color
 
   --button-bg-color-primary-danger: var(--color-raspberry-6); // @presenter Color
   --button-bg-color-primary-danger-hover: var(--color-raspberry-7); // @presenter Color

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/CatalogEntityHistory/CatalogEntityVersionItem.js

@@ -130,7 +130,9 @@ const VersionIcon = styled_components_1.default.div `
   height: var(--catalog-history-sidebar-version-icon-size);
   flex-shrink: 0;
   border-radius: 50%;
-  background-color: ${({ $isCurrent }) => $isCurrent ? 'var(--color-primary-base)' : 'var(--catalog-avatar-bg-color)'};
+  background-color: ${({ $isCurrent }) => $isCurrent
+    ? 'var(--color-primary-base, var(--color-blueberry-6))'
+    : 'var(--catalog-avatar-bg-color)'};
   transition: background-color 0.2s ease;
   margin-right: var(--catalog-history-sidebar-version-icon-margin-right);
 

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;