@redocly/theme 0.58.0-next.4 → 0.58.0-next.6

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 }) }),

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/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

@@ -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/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/Tooltip/Tooltip.js

@@ -91,15 +91,13 @@ function TooltipComponent({ children, isOpen, tip, withArrow = true, placement =
         }
     }, [isOpened, placement, updateTooltipPosition]);
     (0, react_1.useEffect)(() => {
-        if (isControlled && !disabled) {
-            if (isOpen) {
-                handleOpen();
-            }
-            else {
-                handleClose();
-            }
+        if (isOpen && !disabled) {
+            handleOpen();
+        }
+        else {
+            handleClose();
         }
-    }, [isOpen, isControlled, handleOpen, handleClose, disabled]);
+    }, [isOpen, handleOpen, handleClose, disabled]);
     const controllers = !isControlled &&
         !disabled && {
         onMouseEnter: handleOpen,
@@ -228,7 +226,7 @@ const TooltipBody = styled_components_1.default.span `
   display: inline-block;
 
   padding: var(--tooltip-padding);
-  max-width: var(--tooltip-max-width);
+  max-width: ${({ width }) => width || 'var(--tooltip-max-width)'};
   white-space: normal;
   word-break: normal;
   overflow-wrap: break-word;

package/lib/components/Tooltip/TooltipWrapper.js

@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../core/hooks");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 function TooltipWrapper({ children, tip, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
-    const tooltip = (0, hooks_1.useControl)();
+    const tooltip = (0, hooks_1.useControl)(false);
     const handleMouseEnter = () => {
         if (showOnHover && !disabled) {
             tooltip.handleOpen();

package/lib/core/constants/catalog.d.ts

@@ -1,6 +1,6 @@
 import type { EntityRelationType } from '../types/catalog';
 export declare const CATALOG_TAG_MAX_LENGTH = 15;
-export declare const ENTITY_RELATION_TYPES: readonly ["partOf", "hasParts", "creates", "createdBy", "owns", "ownedBy", "implements", "implementedBy", "dependsOn", "dependencyOf", "uses", "usedBy", "produces", "consumes", "linksTo", "supersedes", "supersededBy", "compatibleWith", "extends", "extendedBy", "relatesTo", "hasMember", "memberOf", "triggers", "triggeredBy"];
+export declare const PREDEFINED_ENTITY_TYPES: string[];
 export declare const reverseRelationMap: Record<EntityRelationType, EntityRelationType>;
 export declare const relationTypeMap: Record<EntityRelationType, string>;
 export declare enum GraphHandleType {

package/lib/core/constants/catalog.js

@@ -1,33 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.relationTypeMap = exports.reverseRelationMap = exports.ENTITY_RELATION_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
+exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.relationTypeMap = exports.reverseRelationMap = exports.PREDEFINED_ENTITY_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
 exports.CATALOG_TAG_MAX_LENGTH = 15;
-exports.ENTITY_RELATION_TYPES = [
-    'partOf',
-    'hasParts',
-    'creates',
-    'createdBy',
-    'owns',
-    'ownedBy',
-    'implements',
-    'implementedBy',
-    'dependsOn',
-    'dependencyOf',
-    'uses',
-    'usedBy',
-    'produces',
-    'consumes',
-    'linksTo',
-    'supersedes',
-    'supersededBy',
-    'compatibleWith',
-    'extends',
-    'extendedBy',
-    'relatesTo',
-    'hasMember',
-    'memberOf',
-    'triggers',
-    'triggeredBy',
+exports.PREDEFINED_ENTITY_TYPES = [
+    'service',
+    'domain',
+    'team',
+    'user',
+    'api-description',
+    'data-schema',
+    'api-operation',
 ];
 exports.reverseRelationMap = {
     partOf: 'hasParts',

package/lib/core/hooks/use-control.js

@@ -2,10 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useControl = void 0;
 const react_1 = require("react");
+const DEFAULT_CONTROL_OPEN_DELAY = 300;
 const useControl = (initialVal = false) => {
     const [isOpened, setIsOpened] = (0, react_1.useState)(initialVal);
-    const handleOpen = (0, react_1.useCallback)(() => setIsOpened(true), []);
-    const handleClose = (0, react_1.useCallback)(() => setIsOpened(false), []);
+    const timeoutRef = (0, react_1.useRef)(null);
+    const clearOpenTimer = (0, react_1.useCallback)(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+    }, []);
+    const handleOpen = (0, react_1.useCallback)(() => {
+        clearOpenTimer();
+        timeoutRef.current = setTimeout(() => {
+            setIsOpened(true);
+        }, DEFAULT_CONTROL_OPEN_DELAY);
+    }, [clearOpenTimer]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        clearOpenTimer();
+        setIsOpened(false);
+    }, [clearOpenTimer]);
     return {
         isOpened,
         handleOpen,

package/lib/core/openapi/index.d.ts

@@ -9,6 +9,7 @@ export { useMount } from '../hooks/use-mount';
 export { GlobalStyle } from '../styles/global';
 export { breakpoints } from '../utils/media-css';
 export { isPrimitive } from '../utils/args-typecheck';
+export { ClipboardService } from '../utils/clipboard-service';
 export { getUserAgent } from '../utils/get-user-agent';
 export { useFocusTrap } from '../hooks/use-focus-trap';
 export { useThemeHooks } from '../hooks/use-theme-hooks';
@@ -20,4 +21,3 @@ export { useDialogHotKeys } from '../hooks/use-dialog-hotkeys';
 export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
-export { ENTITY_RELATION_TYPES } from '../constants/catalog';

package/lib/core/openapi/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ENTITY_RELATION_TYPES = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
+exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 var dom_1 = require("../utils/dom");
 Object.defineProperty(exports, "IS_BROWSER", { enumerable: true, get: function () { return dom_1.IS_BROWSER; } });
 var urls_1 = require("../utils/urls");
@@ -20,6 +20,8 @@ var media_css_1 = require("../utils/media-css");
 Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return media_css_1.breakpoints; } });
 var args_typecheck_1 = require("../utils/args-typecheck");
 Object.defineProperty(exports, "isPrimitive", { enumerable: true, get: function () { return args_typecheck_1.isPrimitive; } });
+var clipboard_service_1 = require("../utils/clipboard-service");
+Object.defineProperty(exports, "ClipboardService", { enumerable: true, get: function () { return clipboard_service_1.ClipboardService; } });
 var get_user_agent_1 = require("../utils/get-user-agent");
 Object.defineProperty(exports, "getUserAgent", { enumerable: true, get: function () { return get_user_agent_1.getUserAgent; } });
 var use_focus_trap_1 = require("../hooks/use-focus-trap");
@@ -45,6 +47,4 @@ Object.defineProperty(exports, "isNotNull", { enumerable: true, get: function ()
 Object.defineProperty(exports, "isObject", { enumerable: true, get: function () { return type_guards_1.isObject; } });
 var ThemeDataContext_1 = require("../contexts/ThemeDataContext");
 Object.defineProperty(exports, "ThemeDataContext", { enumerable: true, get: function () { return ThemeDataContext_1.ThemeDataContext; } });
-var catalog_1 = require("../constants/catalog");
-Object.defineProperty(exports, "ENTITY_RELATION_TYPES", { enumerable: true, get: function () { return catalog_1.ENTITY_RELATION_TYPES; } });
 //# sourceMappingURL=index.js.map

package/lib/core/styles/global.js

@@ -773,6 +773,25 @@ const apiReferenceDocs = (0, styled_components_1.css) `
   --fab-icon-color: var(--navbar-text-color); // @presenter Color
 
   // @tokens End
+
+  /**
+    * @tokens OpenAPI Schema Catalog Link
+   */
+
+  --schema-catalog-link-margin-bottom: var(--spacing-lg);
+  --schema-catalog-link-padding: 2px;
+  --schema-catalog-link-border-radius: var(--border-radius-md);
+  --schema-catalog-link-background-color: var(--layer-color);
+  --schema-catalog-link-color: var(--color-purple-7);
+
+  --schema-catalog-link-share-icon-color: var(--color-purple-7);
+  --schema-catalog-link-share-icon-background-color: var(--color-purple-1);
+  --schema-catalog-link-share-icon-border-radius: var(--border-radius-md);
+  --schema-catalog-link-share-icon-wrapper-size: var(--spacing-xl);
+
+  --schema-catalog-link-text-color: var(--text-color-primary);
+
+  // @tokens End
 `;
 const badges = (0, styled_components_1.css) `
   /**

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

@@ -1,7 +1,7 @@
 import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
 import { CatalogEntityConfig, LayoutVariant } from '@redocly/config';
+import { ENTITY_RELATION_TYPES } from '@redocly/config';
 import type { CatalogFilterConfig } from '../../config';
-import { ENTITY_RELATION_TYPES } from '../constants/catalog';
 export type SortOption = 'title' | '-title' | 'type' | '-type';
 export type UseCatalogResponse = {
     filters: ResolvedFilter[];

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

@@ -4,7 +4,7 @@ import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
-import type { UseCatalogResponse, CatalogApiResults, CatalogApiParams, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse } from './catalog';
+import type { UseCatalogResponse, CatalogApiResults, CatalogApiParams, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, CatalogViewMode } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem } from './search';
@@ -112,7 +112,7 @@ export type ThemeHooks = {
         prevPage?: ResolvedNavItemWithLink;
         nextPage?: ResolvedNavItemWithLink;
     } | undefined;
-    useCatalog: (config?: CatalogEntityConfig, entitiesCounterInitial?: number) => UseCatalogResponse;
+    useCatalog: (config?: CatalogEntityConfig, entitiesCounterInitial?: number, initialViewMode?: CatalogViewMode) => UseCatalogResponse;
     useCatalogSort: () => UseCatalogSortResponse;
     useCatalogSearch: () => UseCatalogSearchResponse;
     useFetchCatalogEntities: (params: CatalogApiParams, initialData?: BffCatalogEntityList) => CatalogApiResults<BffCatalogEntity, BffCatalogEntityList>;