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

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

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRelationsNodeContent = CatalogEntityRelationsNodeContent;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogEntityIcon_1 = require("../../../../components/Catalog/CatalogEntityIcon");
+const utils_1 = require("../../../../core/utils");
+function CatalogEntityRelationsNodeContent({ entityType, label, isRoot, }) {
+    const formattedEntityType = (0, utils_1.customCatalogOptionsCasing)(entityType);
+    return (react_1.default.createElement(CatalogEntityRelationsNodeContentWrapper, { isRoot: isRoot, "data-component-name": "Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent" },
+        react_1.default.createElement(CatalogEntityRelationsNodeTypeRow, { isRoot: isRoot },
+            isRoot ? (react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, forceColor: "var(--catalog-entity-relations-node-root-icon-color)" })) : (react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: false })),
+            react_1.default.createElement("span", null, formattedEntityType)),
+        react_1.default.createElement(CatalogEntityRelationsNodeLabelRow, { isRoot: isRoot }, label)));
+}
+const CatalogEntityRelationsNodeTypeRow = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-entity-relations-node-gap);
+  line-height: var(--line-height-sm);
+  font-size: var(--font-size-sm);
+  color: ${({ isRoot }) => isRoot
+    ? 'var(--catalog-entity-relations-node-root-text-color)'
+    : 'var(--text-color-description)'};
+`;
+const CatalogEntityRelationsNodeLabelRow = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-entity-relations-node-gap);
+  line-height: var(--line-height-lg);
+  font-size: var(--font-size-lg);
+  color: ${({ isRoot }) => isRoot ? 'var(--catalog-entity-relations-node-root-text-color)' : 'var(--text-color-primary)'};
+`;
+const CatalogEntityRelationsNodeContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--catalog-entity-relations-node-gap);
+  padding: var(--catalog-entity-relations-node-padding);
+  border-radius: var(--catalog-entity-relations-node-border-radius);
+  font-style: normal;
+  font-weight: var(--catalog-entity-relations-node-font-weight);
+  background: ${({ isRoot }) => isRoot
+    ? 'var(--catalog-entity-relations-node-root-bg-color)'
+    : 'var(--catalog-entity-relations-node-bg-color)'};
+  border: ${({ isRoot }) => isRoot
+    ? 'none'
+    : `var(--catalog-entity-relations-node-border-width) var(--catalog-entity-relations-node-border-style) var(--catalog-entity-relations-node-border-color)`};
+`;
+//# sourceMappingURL=CatalogEntityRelationsNodeContent.js.map

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

@@ -6,25 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityRelationsRootNode = CatalogEntityRelationsRootNode;
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@xyflow/react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const CatalogEntityIcon_1 = require("../../../../components/Catalog/CatalogEntityIcon");
 const catalog_1 = require("../../../../core/constants/catalog");
+const CatalogEntityRelationsNodeContent_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent");
 function CatalogEntityRelationsRootNode({ label, entityType, className, }) {
-    return (react_1.default.createElement(RelationsRootNodeWrapper, { className: className, "data-component-name": "Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode" },
-        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, forceColor: "var(--catalog-entity-relations-node-root-icon-color)" }),
-        react_1.default.createElement("div", null, label),
+    return (react_1.default.createElement("div", { className: className, "data-component-name": "Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode" },
+        react_1.default.createElement(CatalogEntityRelationsNodeContent_1.CatalogEntityRelationsNodeContent, { entityType: entityType, label: label, isRoot: true }),
         react_1.default.createElement(react_2.Handle, { type: catalog_1.GraphHandleType.Source, position: react_2.Position.Bottom, id: catalog_1.GraphHandleType.Source })));
 }
-const RelationsRootNodeWrapper = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  gap: var(--catalog-entity-relations-node-gap);
-  padding: var(--catalog-entity-relations-node-padding);
-  border-radius: var(--catalog-entity-relations-node-border-radius);
-  font-style: normal;
-  font-weight: var(--catalog-entity-relations-node-font-weight-root);
-  background: var(--catalog-entity-relations-node-root-bg-color);
-  color: var(--catalog-entity-relations-node-root-text-color);
-  border: none;
-`;
 //# sourceMappingURL=CatalogEntityRelationsRootNode.js.map

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

@@ -43,10 +43,13 @@ const RecentlyViewedIcon_1 = require("../../../../icons/RecentlyViewedIcon/Recen
 const CheckmarkOutlineIcon_1 = require("../../../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
 const hooks_1 = require("../../../../core/hooks");
 const constants_1 = require("../../../../core/constants");
+const Tooltip_1 = require("../../../../components/Tooltip/Tooltip");
+const hooks_2 = require("../../../../core/hooks");
 function CatalogEntityHistoryButton({ version, className, }) {
     const [label, setLabel] = (0, react_1.useState)(version === constants_1.VERSION_NOT_SPECIFIED ? null : version);
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
+    const [labelRef, isLabelTruncated] = (0, hooks_2.useIsTruncated)(label);
     const handleClose = (0, react_1.useCallback)((e) => {
         setLabel(e.detail.version === constants_1.VERSION_NOT_SPECIFIED
             ? e.detail.revision || 'r.1'
@@ -67,12 +70,14 @@ function CatalogEntityHistoryButton({ version, className, }) {
             react_1.default.createElement(HistoryIcon, null),
             react_1.default.createElement(HistoryContent, null,
                 react_1.default.createElement(HistoryText, null, translate('catalog.history.button.label', 'Version history')),
-                label && (react_1.default.createElement(VersionPill, null,
-                    react_1.default.createElement(CheckmarkIcon, null),
-                    react_1.default.createElement("span", null, label)))))));
+                label && (react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "bottom", arrowPosition: "left", disabled: !isLabelTruncated },
+                    react_1.default.createElement(VersionPillWrapper, null,
+                        react_1.default.createElement(VersionPill, null,
+                            react_1.default.createElement(CheckmarkIcon, null),
+                            react_1.default.createElement("span", { ref: labelRef }, label)))))))));
 }
 const CatalogHistoryButtonWrapper = styled_components_1.default.div `
-  width: 100%;
+  width: var(--catalog-history-button-width);
 `;
 const Separator = styled_components_1.default.div `
   width: 100%;
@@ -89,7 +94,7 @@ const HistoryItem = styled_components_1.default.button `
   gap: var(--catalog-history-item-gap);
   padding: var(--catalog-history-item-padding);
   margin-bottom: var(--catalog-history-item-margin-bottom);
-  width: 100%;
+  width: var(--catalog-history-button-item-width);
   border-radius: var(--catalog-history-item-border-radius);
   cursor: pointer;
   transition: background-color 0.2s ease;
@@ -100,18 +105,27 @@ const HistoryItem = styled_components_1.default.button `
 `;
 const HistoryContent = styled_components_1.default.div `
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   flex: 1;
   gap: var(--catalog-history-item-gap);
+  min-width: 0;
+  max-width: var(--catalog-history-content-max-width);
 `;
 const HistoryText = styled_components_1.default.span `
+  flex: 0 0 auto;
   font-family: var(--catalog-history-text-font-family);
   font-size: var(--catalog-history-text-font-size);
   font-weight: var(--catalog-history-text-font-weight);
   line-height: var(--catalog-history-text-line-height);
   color: var(--catalog-history-text-color);
-  flex: 1;
+  white-space: nowrap;
+`;
+const VersionPillWrapper = styled_components_1.default.div `
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: var(--catalog-history-content-max-width);
 `;
 const HistoryIcon = (0, styled_components_1.default)(RecentlyViewedIcon_1.RecentlyViewedIcon) `
   width: var(--catalog-history-icon-size);
@@ -122,23 +136,30 @@ const VersionPill = styled_components_1.default.div `
   display: flex;
   align-items: center;
   gap: var(--catalog-history-pill-gap);
-  padding: var(--catalog-history-pill-padding-vertical)
-    var(--catalog-history-pill-padding-horizontal);
+  padding: var(--catalog-history-pill-padding-vertical) var(--catalog-history-pill-padding-horizontal);
   border: 1px solid var(--catalog-history-pill-border-color);
   border-radius: var(--catalog-history-pill-border-radius);
   background-color: transparent;
-  flex-shrink: 0;
+  min-width: 0;
+  max-width: 100%;
 
   span {
     font-family: var(--catalog-history-pill-font-family);
     font-size: var(--catalog-history-pill-font-size);
     line-height: var(--catalog-history-pill-line-height);
     color: var(--catalog-history-pill-text-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
   }
 `;
 const CheckmarkIcon = (0, styled_components_1.default)(CheckmarkOutlineIcon_1.CheckmarkOutlineIcon) `
   width: var(--catalog-history-pill-icon-size);
   height: var(--catalog-history-pill-icon-size);
+  min-width: var(--catalog-history-pill-icon-size);
+  min-height: var(--catalog-history-pill-icon-size);
+  flex-shrink: 0;
   color: var(--catalog-history-pill-icon-color);
 `;
 //# sourceMappingURL=CatalogEntityHistoryButton.js.map

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

@@ -46,6 +46,7 @@ const MenuContainer_1 = require("../../../../components/Menu/MenuContainer");
 const utils_1 = require("../../../../core/utils");
 const constants_1 = require("../../../../core/constants");
 const CatalogEntityVersionItem_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem");
+const RecentlyViewedIcon_1 = require("../../../../icons/RecentlyViewedIcon/RecentlyViewedIcon");
 function CatalogEntityHistorySidebar({ entityKey, revision, version, className, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const location = (0, react_router_dom_1.useLocation)();
@@ -103,7 +104,9 @@ function CatalogEntityHistorySidebar({ entityKey, revision, version, className,
     }
     return (react_1.default.createElement(SidebarOverlay, { className: className, "data-component-name": "Catalog/CatalogHistorySidebar" },
         react_1.default.createElement(SidebarHeader, null,
-            react_1.default.createElement(HeaderTitle, null, translate('catalog.history.sidebar.title', 'Version history')),
+            react_1.default.createElement(HeaderWrapper, null,
+                react_1.default.createElement(HistoryIcon, null),
+                react_1.default.createElement(HeaderTitle, null, translate('catalog.history.sidebar.title', 'Version history'))),
             react_1.default.createElement(CloseButton, { onClick: handleClose, "aria-label": translate('catalog.history.sidebar.close', 'Close version history') },
                 react_1.default.createElement(CloseIcon_1.CloseIcon, { size: "20px", color: "--catalog-history-sidebar-close-icon-color" }))),
         react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: true },
@@ -111,10 +114,10 @@ function CatalogEntityHistorySidebar({ entityKey, revision, version, className,
 }
 const SidebarOverlay = styled_components_1.default.div `
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height, 0));
+  top: calc(var(--navbar-height) + var(--banner-height));
   left: 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height) - var(--banner-height, 0));
+  height: calc(100vh - var(--navbar-height) - var(--banner-height));
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);
   display: flex;
@@ -160,4 +163,14 @@ const VersionList = styled_components_1.default.ul `
   padding: var(--catalog-history-sidebar-content-padding);
   margin-top: var(--catalog-history-sidebar-content-margin-top);
 `;
+const HistoryIcon = (0, styled_components_1.default)(RecentlyViewedIcon_1.RecentlyViewedIcon) `
+  width: var(--catalog-history-icon-size);
+  height: var(--catalog-history-icon-size);
+  flex-shrink: 0;
+`;
+const HeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+`;
 //# sourceMappingURL=CatalogEntityHistorySidebar.js.map

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

@@ -71,17 +71,18 @@ function CatalogEntityVersionItem({ group, basePath, isExpanded, onToggle, }) {
     const isNotSpecifiedVersion = group.version === constants_1.VERSION_NOT_SPECIFIED;
     const singleRevisionLink = (0, utils_1.buildRevisionUrl)(basePath, group.singleRevisionDate, group.version);
     const versionTitle = isNotSpecifiedVersion
-        ? `${translate('catalog.history.version.label', 'Version')}: ${translate('catalog.history.version.notSpecified', 'not specified')}`
-        : `${translate('catalog.history.version.label', 'Version')}: ${group.version}`;
+        ? `${translate('catalog.history.version.label', 'Version')}:\u00a0${translate('catalog.history.version.notSpecified', 'not specified')}`
+        : `${translate('catalog.history.version.label', 'Version')}:\u00a0${group.version}`;
     const versionButton = (react_1.default.createElement(VersionButton, { type: "button", onClick: () => hasRevisions && onToggle(group.version), "$isCurrent": group.isCurrent },
         react_1.default.createElement(VersionIcon, { "$isCurrent": group.isCurrent }, group.isCurrent ? (react_1.default.createElement(CheckmarkOutlineIcon_1.CheckmarkOutlineIcon, { size: "16px", color: "--catalog-history-sidebar-version-icon-color-current" })) : (react_1.default.createElement(NavaidMilitaryIcon_1.NavaidMilitaryIcon, { size: "16px", color: "--catalog-history-sidebar-version-icon-color" }))),
         react_1.default.createElement(VersionInfo, null,
             react_1.default.createElement(VersionTitleRow, null,
                 react_1.default.createElement(VersionTitle, null, versionTitle),
-                group.isDefaultVersion && (react_1.default.createElement(Tag_1.Tag, { color: "grey", borderless: true, textTransform: "none", style: {
+                group.isDefaultVersion && (react_1.default.createElement(Tag_1.Tag, { color: "grey", borderless: true, textTransform: "lowercase", style: {
                         fontSize: 'var(--font-size-xs)',
                         borderRadius: 'var(--catalog-history-sidebar-version-tag-border-radius)',
                         flexShrink: 0,
+                        marginLeft: 'var(--spacing-xxs)',
                     } }, translate('catalog.history.version.default', 'default')))),
             !isNotSpecifiedVersion && react_1.default.createElement(VersionDate, null, group.date)),
         hasRevisions && (react_1.default.createElement(ChevronIcon, null, isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "16px", color: "--catalog-history-sidebar-chevron-icon-color" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "16px", color: "--catalog-history-sidebar-chevron-icon-color" }))))));
@@ -156,6 +157,8 @@ const VersionTitle = styled_components_1.default.span `
   color: var(--catalog-history-sidebar-version-title-color);
   flex-shrink: 1;
   min-width: 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
 `;
 const VersionDate = styled_components_1.default.span `
   font-family: var(--catalog-history-sidebar-version-date-font-family);
@@ -176,6 +179,7 @@ const RevisionsList = styled_components_1.default.ul `
   margin: 0;
   padding: 0;
   padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  padding-bottom: var(--catalog-history-sidebar-revisions-padding-bottom);
   position: relative;
 
   &::before {
@@ -183,7 +187,7 @@ const RevisionsList = styled_components_1.default.ul `
     position: absolute;
     left: 22px;
     top: 0;
-    bottom: 0;
+    bottom: var(--catalog-history-sidebar-revisions-padding-bottom);
     width: 1px;
     background-color: var(
       --catalog-history-sidebar-revision-line-color,

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

@@ -14,6 +14,7 @@ const DomainsProperty_1 = require("../../../../components/Catalog/CatalogEntity/
 const OwnersProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty");
 const ContactProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty");
 const FormatProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty");
+const core_1 = require("../../../../core");
 const propertyRenderers = [
     {
         key: 'type',
@@ -58,14 +59,19 @@ const propertyRenderers = [
 ];
 function CatalogEntityProperties({ entity }) {
     const renderers = propertyRenderers.filter((renderer) => renderer.condition(entity));
-    const gridTemplateColumns = [1, 2, 4].includes(renderers.length)
-        ? 'repeat(2, 1fr)'
-        : 'repeat(3, 1fr)';
-    return (react_1.default.createElement(CatalogEntityPropertiesGridWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties", gridTemplateColumns: gridTemplateColumns }, renderers.map((renderer) => (react_1.default.createElement(renderer.component, { key: renderer.key + entity.id, entity: entity })))));
+    return (react_1.default.createElement(CatalogEntityPropertiesGridWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties" }, renderers.map((renderer) => (react_1.default.createElement(renderer.component, { key: renderer.key + entity.id, entity: entity })))));
 }
 const CatalogEntityPropertiesGridWrapper = styled_components_1.default.div `
   display: grid;
-  grid-template-columns: ${({ gridTemplateColumns }) => gridTemplateColumns};
   gap: var(--spacing-base);
+  grid-template-columns: 1fr;
+
+  @media screen and (min-width: ${core_1.breakpoints.small}) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (min-width: ${core_1.breakpoints.max}) {
+    grid-template-columns: repeat(3, 1fr);
+  }
 `;
 //# sourceMappingURL=CatalogEntityProperties.js.map

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

@@ -16,7 +16,7 @@ function DomainsProperty({ 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)' } },
+                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)))) })));
 }

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

@@ -19,6 +19,6 @@ function OwnersProperty({ entity }) {
                 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)',
-                } }, owner === null || owner === void 0 ? void 0 : owner.title)))) })));
+                }, variant: "outline" }, owner === null || owner === void 0 ? void 0 : owner.title)))) })));
 }
 //# sourceMappingURL=OwnersProperty.js.map

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

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

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

@@ -34,11 +34,14 @@ function CatalogEntityRelationsTable({ entity, entitiesCatalogConfig, catalogCon
             ]);
         }
     };
-    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable" },
+    return (react_1.default.createElement(CatalogEntityRelationsTableWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable" },
         heading && react_1.default.createElement(Heading, null, heading),
         react_1.default.createElement(CatalogActionsRow_1.CatalogActionsRow, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, style: { marginBottom: '12px' } }),
         react_1.default.createElement(CatalogEntityRelationsTableContent_1.CatalogEntityRelationsTableContent, { entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, columns: columns, setSortOption: setSortOption, sortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: listType, onRowClick: onRowClick })));
 }
+const CatalogEntityRelationsTableWrapper = styled_components_1.default.div `
+  min-width: 0;
+`;
 const Heading = styled_components_1.default.h2 `
   margin: var(--spacing-base) 0;
   font-size: var(--font-size-md);

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

@@ -5,14 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityRelationsTableContent = CatalogEntityRelationsTableContent;
 const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const ArrowDownIcon_1 = require("../../../../icons/ArrowDownIcon/ArrowDownIcon");
 const LoadMore_1 = require("../../../../components/LoadMore/LoadMore");
 const CatalogTableView_1 = require("../../../../components/Catalog/CatalogTableView/CatalogTableView");
 const CatalogHighlight_1 = require("../../../../components/Catalog/CatalogHighlight");
 const CatalogEntitiesEmptyState_1 = require("../../../../components/Catalog/CatalogEntitiesEmptyState");
 function CatalogEntityRelationsTableContent({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, onRowClick, }) {
-    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent" },
-        react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery] }, relations.length > 0 ? (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: relations, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, style: { marginTop: 0 }, onRowClick: onRowClick })) : (react_1.default.createElement(CatalogEntitiesEmptyState_1.CatalogEntitiesEmptyState, { listType: listType }))),
+    return (react_1.default.createElement(TableContentWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent" },
+        react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery] }, relations.length > 0 ? (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: relations, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, style: { marginTop: 0 }, onRowClick: onRowClick, contentMinWidth: TABLE_SCROLL_MIN_WIDTH_PX })) : (react_1.default.createElement(CatalogEntitiesEmptyState_1.CatalogEntitiesEmptyState, { listType: listType }))),
         shouldShowLoadMore && (react_1.default.createElement(LoadMore_1.LoadMore, { icon: react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { size: "var(--catalog-load-more-icon-size)" }), onClick: query.fetchNextPage, disabled: query.isFetchingNextPage, blinking: query.isFetchingNextPage, label: query.isFetchingNextPage ? 'Loading...' : 'Load More' }))));
 }
+const TABLE_SCROLL_MIN_WIDTH_PX = 608;
+const TableContentWrapper = styled_components_1.default.div `
+  min-width: 0; /* Constrain width so table overflow-x scroll works inside tabs */
+`;
 //# sourceMappingURL=CatalogEntityRelationsTableContent.js.map

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

@@ -40,7 +40,7 @@ const teamColumns = [
 ];
 function CatalogEntityTeamRelations({ 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/CatalogEntityTeamRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
                 react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: "members-table", entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
             react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },

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

@@ -104,7 +104,7 @@ const SplitViewWrapper = styled_components_1.default.div `
 const SchemaSampleWrapper = styled_components_1.default.div `
   flex: 1;
   position: sticky;
-  top: calc(var(--navbar-height) + var(--spacing-md));
+  top: calc(var(--navbar-height) + var(--banner-height) + var(--spacing-md));
   align-self: flex-start;
   padding-top: var(--spacing-sm);
 `;

package/lib/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.js

@@ -155,6 +155,6 @@ const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.Fil
   padding-left: var(--filter-option-checkbox-padding-left);
 `;
 const FilterSearchWrapper = styled_components_1.default.div `
-  padding: var(--filter-content-search-padding);
+  padding-bottom: var(--spacing-xs);
 `;
 //# sourceMappingURL=CatalogFilterCheckboxes.js.map

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

@@ -1,4 +1,4 @@
-import type { JSX } from 'react';
+import type { JSX, ReactNode } from 'react';
 import type { ResolvedFilter } from '../../../core/types';
 import type { RedoclyConfig } from '../../../config';
 export type CatalogFilterContentProps = {
@@ -7,6 +7,8 @@ export type CatalogFilterContentProps = {
     filterTerm: string;
     filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'] | ((str: string) => string);
     showCounter?: boolean;
+    catalogSelector?: ReactNode;
+    searchInput?: ReactNode;
     className?: string;
 };
-export declare function CatalogFilterContent({ onClear, filters, filterTerm, filterValuesCasing, showCounter, className, }: CatalogFilterContentProps): JSX.Element | null;
+export declare function CatalogFilterContent({ onClear, filters, filterTerm, filterValuesCasing, showCounter, catalogSelector, searchInput, className, }: CatalogFilterContentProps): JSX.Element | null;

package/lib/components/Catalog/CatalogFilter/CatalogFilterContent.js

@@ -10,7 +10,8 @@ const hooks_1 = require("../../../core/hooks");
 const Button_1 = require("../../../components/Button/Button");
 const CatalogFilter_1 = require("../../../components/Catalog/CatalogFilter/CatalogFilter");
 const utils_1 = require("../../../core/utils");
-function CatalogFilterContent({ onClear, filters, filterTerm, filterValuesCasing, showCounter = true, className, }) {
+const utils_2 = require("../../../core/utils");
+function CatalogFilterContent({ onClear, filters, filterTerm, filterValuesCasing, showCounter = true, catalogSelector, searchInput, className, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const hasActiveFilters = filters.some((filter) => {
@@ -19,7 +20,7 @@ function CatalogFilterContent({ onClear, filters, filterTerm, filterValuesCasing
         if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
             return filter.selectedOptions.size;
         }
-        else if ((0, utils_1.isFromToSelectedOptions)(filter.selectedOptions) &&
+        else if ((0, utils_2.isFromToSelectedOptions)(filter.selectedOptions) &&
             filter.selectedOptions.from &&
             filter.selectedOptions.to) {
             return true;
@@ -29,14 +30,17 @@ function CatalogFilterContent({ onClear, filters, filterTerm, filterValuesCasing
         filters.forEach((filter) => filter.selectOption(''));
         onClear();
     };
-    if (!filters.length) {
+    if (!filters.length && !catalogSelector) {
         return null;
     }
     return (react_1.default.createElement(CatalogFilterContentWrapper, { className: className, "data-component-name": "Catalog/CatalogFilterContent" },
         react_1.default.createElement(FiltersHeader, null,
             react_1.default.createElement(FiltersTitle, { "data-translation-key": "catalog.filters.title" }, translate('catalog.filters.title', 'Filters')),
-            hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", tone: "danger", variant: "ghost", onClick: handleClearAll }, translate('catalog.filters.clearAll', 'Clear filters'))) : null),
-        react_1.default.createElement(FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(CatalogFilter_1.CatalogFilter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing, showCounter: showCounter }))))));
+            hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", variant: "ghost", onClick: handleClearAll }, translate('catalog.filters.clearAll', 'Clear filters'))) : null),
+        searchInput ? react_1.default.createElement(FiltersSearchWrapper, null, searchInput) : null,
+        react_1.default.createElement(FilterItems, null,
+            catalogSelector ? (react_1.default.createElement(CatalogSelectorItemWrapper, null, catalogSelector)) : null,
+            filters.map((filter, idx) => (react_1.default.createElement(CatalogFilter_1.CatalogFilter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing, showCounter: showCounter }))))));
 }
 const CatalogFilterContentWrapper = styled_components_1.default.div `
   padding: 0 0 var(--filter-content-padding-vertical) 0;
@@ -45,8 +49,7 @@ const CatalogFilterContentWrapper = styled_components_1.default.div `
 `;
 const FiltersHeader = styled_components_1.default.div `
   display: flex;
-  padding: var(--filter-content-header-padding-vertical)
-    var(--filter-content-header-padding-horizontal);
+  padding: var(--catalog-filter-content-header-padding);
 `;
 const FiltersTitle = styled_components_1.default.div `
   margin-right: auto;
@@ -54,10 +57,24 @@ const FiltersTitle = styled_components_1.default.div `
   font-weight: var(--filter-content-title-font-weight);
   line-height: var(--filter-content-title-line-height);
 `;
+const CatalogSelectorItemWrapper = styled_components_1.default.div `
+  padding: var(--filter-group-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-group-gap);
+  border-bottom: 1px solid var(--catalog-table-border-color);
+`;
+const FiltersSearchWrapper = styled_components_1.default.div `
+  padding: 0 var(--spacing-base) var(--spacing-base) var(--spacing-base);
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    display: none;
+  }
+`;
 const FilterItems = styled_components_1.default.div `
   height: 100%;
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--border-color-secondary);
+  border-top: 1px solid var(--catalog-table-border-color);
 `;
 //# sourceMappingURL=CatalogFilterContent.js.map

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

@@ -0,0 +1,7 @@
+import React, { JSX } from 'react';
+type CatalogMobileFiltersPanelProps = {
+    setMobileFiltersPanelOpen: (open: boolean) => void;
+    filterContent: React.ReactNode;
+};
+export declare function CatalogMobileFiltersPanel({ setMobileFiltersPanelOpen, filterContent, }: CatalogMobileFiltersPanelProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileFiltersPanel = CatalogMobileFiltersPanel;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogMobileFiltersPanelHeader_1 = require("../../../components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelHeader");
+function CatalogMobileFiltersPanel({ setMobileFiltersPanelOpen, filterContent, }) {
+    return (react_1.default.createElement(CatalogMobileFiltersPanelWrapper, null,
+        react_1.default.createElement(CatalogMobileFiltersPanelHeader_1.CatalogMobileFiltersPanelHeader, { setMobileFiltersPanelOpen: setMobileFiltersPanelOpen }),
+        filterContent));
+}
+const CatalogMobileFiltersPanelWrapper = styled_components_1.default.div `
+  width: 100%;
+  max-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  overflow-y: auto;
+  background: var(--sidebar-bg-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+//# sourceMappingURL=CatalogMobileFiltersPanel.js.map

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

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+type CatalogMobileFiltersPanelHeaderProps = {
+    setMobileFiltersPanelOpen: (open: boolean) => void;
+};
+export declare function CatalogMobileFiltersPanelHeader({ setMobileFiltersPanelOpen, }: CatalogMobileFiltersPanelHeaderProps): JSX.Element;
+export {};

package/lib/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelHeader.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogMobileFiltersPanelHeader = CatalogMobileFiltersPanelHeader;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../../components/Button/Button");
+const core_1 = require("../../../core");
+function CatalogMobileFiltersPanelHeader({ setMobileFiltersPanelOpen, }) {
+    const { useTranslate } = (0, core_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(CatalogMobileFiltersPanelHeaderWrapper, null,
+        react_1.default.createElement("span", null),
+        react_1.default.createElement(Button_1.Button, { variant: "ghost", size: "medium", onClick: () => setMobileFiltersPanelOpen(false) }, translate('catalog.filters.close', 'Close'))));
+}
+const CatalogMobileFiltersPanelHeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--catalog-filter-content-header-padding);
+  border-bottom: 1px solid var(--border-color-secondary);
+  flex-shrink: 0;
+`;
+//# sourceMappingURL=CatalogMobileFiltersPanelHeader.js.map

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

@@ -0,0 +1,7 @@
+import React, { JSX } from 'react';
+type CatalogMobileFiltersPanelOverlayProps = {
+    setMobileFiltersPanelOpen: (open: boolean) => void;
+    filterContent: React.ReactNode;
+};
+export declare function CatalogMobileFiltersPanelOverlay({ setMobileFiltersPanelOpen, filterContent, }: CatalogMobileFiltersPanelOverlayProps): JSX.Element;
+export {};