@redocly/theme 0.57.0-next.3 → 0.57.0-next.5

package/lib/components/Breadcrumbs/Breadcrumb.d.ts

@@ -4,6 +4,7 @@ type BreadcrumbProps = {
     link?: string;
     isActive: boolean;
     onClick?: () => void;
+    icon?: string;
 };
-export declare function Breadcrumb({ label, link, isActive, onClick }: BreadcrumbProps): JSX.Element;
+export declare function Breadcrumb({ label, link, isActive, onClick, icon }: BreadcrumbProps): JSX.Element;
 export {};

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -1,39 +1,87 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumb = Breadcrumb;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const Link_1 = require("../../components/Link/Link");
-function Breadcrumb({ label, link, isActive, onClick }) {
-    return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive, onClick: onClick }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const BreadcrumbIcon_1 = require("../../components/Breadcrumbs/BreadcrumbIcon");
+const utils_1 = require("../../core/utils");
+const constants_1 = require("../../core/constants");
+function Breadcrumb({ label, link, isActive, onClick, icon }) {
+    const isTruncated = label.length > constants_1.BREADCRUMB_MAX_LENGTH;
+    const displayLabel = (0, utils_1.trimText)(label, constants_1.BREADCRUMB_MAX_LENGTH);
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(BreadcrumbIcon_1.BreadcrumbIcon, { icon: icon }),
+        displayLabel));
+    const breadcrumbContent = link ? (react_1.default.createElement(BreadcrumbLink, { "data-component-name": "Breadcrumbs/BreadcrumbLink", to: link, onClick: onClick, "$isActive": isActive }, content)) : (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbWrapper", "$isActive": isActive, onClick: onClick, tabIndex: -1 }, content));
+    return isTruncated ? (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: label, placement: "bottom", width: "max-content" }, breadcrumbContent)) : (breadcrumbContent);
 }
-const BreadcrumbText = styled_components_1.default.div `
-  cursor: default;
-`;
-const BreadcrumbWrapper = styled_components_1.default.div `
+const baseBreadcrumbStyles = `
+  display: flex;
+  align-items: center;
+  gap: var(--breadcrumbs-gap);
+  padding: var(--breadcrumb-padding);
   border-radius: var(--border-radius);
+  color: var(--breadcrumbs-text-color);
+  text-decoration: none;
 
-  ${(props) => props.isLink &&
-    `
-    &:hover {
-      text-decoration: var(--breadcrumbs-text-decoration-hover);
-    }
-  `}
+  &:hover {
+    background-color: var(--breadcrumbs-background-color-hover);
+  }
 
-  ${(props) => props.isActive &&
-    `
-    color: var(--breadcrumbs-text-color-active);
-  `}
+  &:focus {
+    box-shadow: var(--breadcrumbs-box-shadow-focus);
+    outline: none;
+  }
 `;
-const BreadcrumbLink = (0, styled_components_1.default)(Link_1.Link) `
-  text-decoration: none;
-  color: var(--breadcrumbs-text-color);
+const activeColorStyles = (0, styled_components_1.css) `
+  color: var(--breadcrumbs-text-color-active);
+`;
+const BreadcrumbWrapper = styled_components_1.default.div `
+  ${baseBreadcrumbStyles}
+
+  ${(props) => props.$isActive && activeColorStyles}
+  cursor: default;
+  pointer-events: none;
+
+  &:focus {
+    box-shadow: none;
+    outline: none;
+  }
 
-  &:visited {
-    color: var(--breadcrumbs-text-color);
+  &:hover {
+    background-color: transparent;
   }
 `;
+const BreadcrumbLink = (0, styled_components_1.default)(Link_1.Link) `
+  ${baseBreadcrumbStyles}
+  ${(props) => props.$isActive && activeColorStyles}
+`;
 //# sourceMappingURL=Breadcrumb.js.map

package/lib/components/Breadcrumbs/BreadcrumbDropdown.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BreadcrumbItem } from '@redocly/config';
+import type { JSX } from 'react';
+type BreadcrumbDropdownProps = {
+    children?: React.ReactNode;
+    label: string;
+    items: (BreadcrumbItem & {
+        isActive?: boolean;
+    })[];
+    onItemClick?: (item: BreadcrumbItem, index: number) => void;
+    className?: string;
+};
+export declare function BreadcrumbDropdown({ children, label, items, onItemClick, className, }: BreadcrumbDropdownProps): JSX.Element | null;
+export {};

package/lib/components/Breadcrumbs/BreadcrumbDropdown.js

@@ -0,0 +1,138 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreadcrumbDropdown = BreadcrumbDropdown;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const hooks_1 = require("../../core/hooks");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
+const constants_1 = require("../../core/constants");
+const BreadcrumbIcon_1 = require("../../components/Breadcrumbs/BreadcrumbIcon");
+function BreadcrumbDropdown({ children, label, items, onItemClick, className, }) {
+    const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    const { translate } = useTranslate();
+    if (!items || items.length === 0) {
+        return null;
+    }
+    const isTruncated = label.length > constants_1.BREADCRUMB_MAX_LENGTH;
+    const triggerContent = isTruncated ? (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: label, placement: "bottom", width: "max-content" },
+        react_1.default.createElement(TriggerContentWrapper, null, children))) : (children);
+    const trigger = react_1.default.createElement(StyledDropdownTrigger, null, triggerContent);
+    return (react_1.default.createElement(BreadcrumbDropdownWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbDropdown", className: className, "data-testid": "breadcrumb-dropdown" },
+        react_1.default.createElement(Dropdown_1.Dropdown, { trigger: trigger, closeOnClick: true },
+            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item, index) => {
+                const isActive = Boolean(item === null || item === void 0 ? void 0 : item.isActive);
+                const hasLink = Boolean(item.link);
+                const translatedLabel = translate(item.labelTranslationKey, item.label);
+                return (react_1.default.createElement(StyledDropdownMenuItem, { key: index, onAction: () => {
+                        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, index);
+                        telemetry.sendBreadcrumbClickedMessage({
+                            link: item.link,
+                            position: index + 1,
+                            totalBreadcrumbs: items.length,
+                        });
+                    }, "$hasLink": hasLink, to: item.link, dataAttributes: !hasLink ? { 'aria-disabled': 'true' } : {} },
+                    react_1.default.createElement(DropdownContent, { "$isActive": isActive },
+                        react_1.default.createElement(BreadcrumbIcon_1.BreadcrumbIcon, { icon: item.icon }),
+                        react_1.default.createElement(DropdownLabel, null, translatedLabel),
+                        isActive && (react_1.default.createElement(ActiveIcon, null,
+                            react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: "check" }))))));
+            })))));
+}
+const BreadcrumbDropdownWrapper = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: center;
+`;
+const StyledDropdownTrigger = styled_components_1.default.button `
+  display: flex;
+  align-items: center;
+  gap: var(--breadcrumbs-gap);
+  border: none;
+  background: none;
+  border-radius: var(--breadcrumbs-border-radius);
+  color: var(--breadcrumbs-text-color);
+  cursor: pointer;
+  font-size: var(--breadcrumbs-font-size);
+
+  &:hover {
+    background-color: var(--breadcrumbs-background-color-hover);
+  }
+
+  &:focus {
+    box-shadow: var(--breadcrumbs-box-shadow-focus);
+    outline: none;
+  }
+`;
+const StyledDropdownMenuItem = (0, styled_components_1.default)(DropdownMenuItem_1.DropdownMenuItem) `
+  cursor: ${(props) => (props.$hasLink ? 'pointer' : 'default')};
+
+  ${(props) => !props.$hasLink &&
+    (0, styled_components_1.css) `
+      &:focus,
+      &:focus-visible {
+        outline: none;
+        box-shadow: none;
+      }
+
+      &:hover {
+        background-color: transparent;
+        color: inherit;
+      }
+    `}
+`;
+const TriggerContentWrapper = styled_components_1.default.span `
+  display: flex;
+  align-items: center;
+  gap: var(--breadcrumbs-gap);
+`;
+const DropdownContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--breadcrumbs-gap);
+  padding: var(--breadcrumb-padding);
+  color: ${(props) => (props.$isActive ? 'var(--breadcrumbs-text-color-active)' : 'inherit')};
+  font-weight: ${(props) => props.$isActive ? 'var(--breadcrumbs-font-weight-active)' : 'inherit'};
+`;
+const DropdownLabel = styled_components_1.default.span `
+  color: inherit;
+`;
+const ActiveIcon = styled_components_1.default.span `
+  position: absolute;
+  left: var(--breadcrumb-dropdown-active-icon-position);
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+  width: var(--breadcrumbs-icon-size);
+  height: var(--breadcrumbs-icon-size);
+`;
+//# sourceMappingURL=BreadcrumbDropdown.js.map

package/lib/components/Breadcrumbs/BreadcrumbIcon.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+type BreadcrumbIconProps = {
+    icon?: string;
+    className?: string;
+};
+export declare function BreadcrumbIcon({ icon, className }: BreadcrumbIconProps): JSX.Element | null;
+export {};

package/lib/components/Breadcrumbs/BreadcrumbIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreadcrumbIcon = BreadcrumbIcon;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
+function BreadcrumbIcon({ icon, className }) {
+    if (!icon) {
+        return null;
+    }
+    return (react_1.default.createElement(BreadcrumbIconWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbIcon", className: className },
+        react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: icon, size: "var(--breadcrumbs-icon-size)" })));
+}
+const BreadcrumbIconWrapper = styled_components_1.default.span `
+  display: inline-flex;
+  align-items: center;
+  width: var(--breadcrumbs-icon-size);
+  justify-content: center;
+`;
+//# sourceMappingURL=BreadcrumbIcon.js.map

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -8,28 +8,77 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Breadcrumb_1 = require("../../components/Breadcrumbs/Breadcrumb");
+const BreadcrumbDropdown_1 = require("../../components/Breadcrumbs/BreadcrumbDropdown");
+const BreadcrumbIcon_1 = require("../../components/Breadcrumbs/BreadcrumbIcon");
+const utils_1 = require("../../core/utils");
+const constants_1 = require("../../core/constants");
+const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function Breadcrumbs(props) {
-    const { useBreadcrumbs, useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const fileBreadcrumbs = useBreadcrumbs();
-    const breadcrumbs = [...fileBreadcrumbs, ...(props.additionalBreadcrumbs || [])];
+    const { useBreadcrumbs, useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { breadcrumbs: fileBreadcrumbs, currentItemSiblings } = useBreadcrumbs();
     const telemetry = useTelemetry();
+    const { translate } = useTranslate();
+    const breadcrumbs = react_1.default.useMemo(() => {
+        var _a;
+        const extra = (_a = props.additionalBreadcrumbs) !== null && _a !== void 0 ? _a : [];
+        return [...(fileBreadcrumbs || []), ...extra];
+    }, [fileBreadcrumbs, props.additionalBreadcrumbs]);
+    const shouldCollapse = breadcrumbs.length > 4;
+    const isInDropdown = (index, total, collapsed) => collapsed && index > 0 && index < total - 2;
+    const items = react_1.default.useMemo(() => {
+        const total = breadcrumbs.length;
+        return breadcrumbs.map((b, i) => ({
+            breadcrumb: b,
+            idx: i,
+            isLast: i === total - 1,
+            inDropdown: isInDropdown(i, total, shouldCollapse),
+        }));
+    }, [breadcrumbs, shouldCollapse]);
     if (breadcrumbs.length === 0) {
         return null;
     }
-    return (react_1.default.createElement(BreadcrumbsWrapper, { "data-component-name": "Breadcrumbs/Breadcrumbs", className: props.className }, breadcrumbs.map((breadcrumb, idx) => {
-        const isLast = idx === breadcrumbs.length - 1;
+    const renderBreadcrumb = (breadcrumb, idx, isActive) => {
+        const isParentOfActive = idx === breadcrumbs.length - 2 && currentItemSiblings && currentItemSiblings.length > 0;
+        if (isParentOfActive) {
+            const currentActiveBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
+            const siblingsWithActive = [
+                Object.assign(Object.assign({}, currentActiveBreadcrumb), { isActive: true }),
+                ...currentItemSiblings,
+            ];
+            const translatedLabel = translate(breadcrumb.labelTranslationKey, breadcrumb.label);
+            return (react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: translatedLabel, items: siblingsWithActive, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage({
+                    link: item.link,
+                    position: itemIdx + 1,
+                    totalBreadcrumbs: siblingsWithActive.length,
+                }) },
+                react_1.default.createElement(BreadcrumbIcon_1.BreadcrumbIcon, { icon: breadcrumb.icon }),
+                (0, utils_1.trimText)(translatedLabel, constants_1.BREADCRUMB_MAX_LENGTH),
+                react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: "chevron-down" })));
+        }
+        return (react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: translate(breadcrumb.labelTranslationKey, breadcrumb.label), isActive: isActive, icon: breadcrumb.icon, onClick: () => telemetry.sendBreadcrumbClickedMessage({
+                link: breadcrumb.link,
+                position: idx + 1,
+                totalBreadcrumbs: breadcrumbs.length,
+            }) }));
+    };
+    return (react_1.default.createElement(BreadcrumbsWrapper, { "data-component-name": "Breadcrumbs/Breadcrumbs", className: props.className }, items.map(({ breadcrumb, idx, isLast, inDropdown }) => {
+        if (inDropdown)
+            return null;
+        if (shouldCollapse && idx === 0) {
+            const collapsedBreadcrumbs = breadcrumbs.slice(1, -2);
+            return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
+                renderBreadcrumb(breadcrumb, idx, isLast),
+                react_1.default.createElement(BreadcrumbSeparator, null, "/"),
+                react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: "...", items: collapsedBreadcrumbs, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage({
+                        link: item.link,
+                        position: itemIdx + 1,
+                        totalBreadcrumbs: breadcrumbs.length,
+                    }) }, "..."),
+                react_1.default.createElement(BreadcrumbSeparator, null, "/")));
+        }
         return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
-            react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast, onClick: () => {
-                    telemetry.send({
-                        type: 'breadcrumb.clicked',
-                        payload: {
-                            link: breadcrumb.link,
-                            position: idx + 1,
-                            totalBreadcrumbs: breadcrumbs.length,
-                        },
-                    });
-                } }),
-            isLast ? null : react_1.default.createElement("span", null, "/")));
+            renderBreadcrumb(breadcrumb, idx, isLast),
+            isLast ? null : react_1.default.createElement(BreadcrumbSeparator, null, "/")));
     })));
 }
 const BreadcrumbsWrapper = styled_components_1.default.div `
@@ -39,17 +88,8 @@ const BreadcrumbsWrapper = styled_components_1.default.div `
   color: var(--breadcrumbs-text-color);
   font-size: var(--breadcrumbs-font-size);
   flex-wrap: wrap;
-
-  > div {
-    padding: var(--breadcrumbs-padding);
-  }
-
-  > span {
-    padding: var(--breadcrumbs-gap);
-  }
-
-  @media print {
-    display: none;
-  }
+`;
+const BreadcrumbSeparator = styled_components_1.default.span `
+  padding: var(--breadcrumbs-padding);
 `;
 //# sourceMappingURL=Breadcrumbs.js.map

package/lib/components/Breadcrumbs/variables.js

@@ -8,12 +8,24 @@ exports.breadcrumbs = (0, styled_components_1.css) `
    */
 
   --breadcrumbs-text-color: var(--text-color-description); // @presenter Color
-  --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
   --breadcrumbs-text-color-active: var(--text-color-primary); // @presenter Color
-  --breadcrumbs-text-decoration-hover: underline; // @presenter TextDecoration
-  --breadcrumbs-padding: 0; // @presenter Spacing
-  --breadcrumbs-gap: var(--spacing-xs);
+  --breadcrumbs-text-color-border-hover: var(--color-info-border-hover); // @presenter Color
+
+  --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
+  --breadcrumbs-icon-size: var(--font-size-base); // @presenter FontSize
+  --breadcrumbs-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
+
+  --breadcrumbs-border-radius: var(--border-radius); // @presenter BorderRadius
+  --breadcrumbs-gap: var(--spacing-xxs); // @presenter Spacing
+
+  --breadcrumbs-padding: 2px var(--spacing-xs); // @presenter Spacing
   --breadcrumbs-margin-bottom: var(--spacing-lg); // @presenter Spacing
+  --breadcrumbs-background-color-hover: var(--color-hover-base); // @presenter Color
+  --breadcrumbs-background-color-focus: var(--color-info-border-hover); // @presenter Color
+  --breadcrumbs-box-shadow-focus: 0 0 0 1px var(--breadcrumbs-background-color-focus); // @presenter Color
+
+  --breadcrumb-padding: var(--spacing-xxs); // @presenter Spacing
+  --breadcrumb-dropdown-active-icon-position: var(--spacing-xs); // @presenter Spacing
 
   // @tokens End
 `;

package/lib/components/Buttons/EditPageButton.js

@@ -13,7 +13,7 @@ function EditPageButton({ to }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
-    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => telemetry.send({ type: 'edit_page_link.clicked' }) },
+    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => telemetry.sendEditPageLinkClickedMessage() },
         react_1.default.createElement(ButtonIcon, null),
         react_1.default.createElement(ButtonText, { "data-translation-key": "markdown.editPage.text" }, translate('markdown.editPage.text', 'Edit'))));
 }

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

@@ -22,7 +22,7 @@ function CatalogCard({ entity, catalogConfig }) {
     const pathPrefix = (0, utils_1.getPathPrefix)();
     return (react_1.default.createElement(CatalogCardWrapper, { "data-component-name": "Catalog/CatalogCardView/CatalogCard", onClick: () => {
             window.location.assign(`${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`);
-            telemetry.send({ type: 'catalog_item.clicked' });
+            telemetry.sendCatalogItemClickedMessage();
         } },
         react_1.default.createElement(CardContent, null,
             react_1.default.createElement(CardHeader, null,

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

@@ -8,18 +8,13 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
 const utils_1 = require("../../../core/utils");
-const ArrowLeftIcon_1 = require("../../../icons/ArrowLeftIcon/ArrowLeftIcon");
 const CatalogPageDescription_1 = require("../../../components/Catalog/CatalogPageDescription");
 const CatalogEntityProperties_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties");
 const CatalogEntityMetadata_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMetadata");
 const CatalogEntityLinks_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityLinks");
 const Breadcrumbs_1 = require("../../../components/Breadcrumbs/Breadcrumbs");
-const Sidebar_1 = require("../../../components/Sidebar/Sidebar");
-const Menu_1 = require("../../../components/Menu/Menu");
-const Button_1 = require("../../../components/Button/Button");
 const CatalogEntityRelations_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations");
 const hooks_1 = require("../../../core/hooks");
-const SidebarActions_1 = require("../../../components/SidebarActions/SidebarActions");
 const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
 const CatalogEntityMethodAndPath_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMethodAndPath");
 const CatalogEntityRelationsGraph_lazy_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy");
@@ -39,22 +34,8 @@ function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRe
     const { translate } = useTranslate();
     const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
     const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
-    const { layout, collapsedSidebar, onChangeViewClick, onChangeCollapseSidebarClick, searchQuery, setSearchQuery, } = useCatalog();
-    const { pathname } = (0, react_router_dom_1.useLocation)();
-    const linkBase = `${linkToMainCatalog}/entities/${entity.key}`;
-    const menuItemDefs = [
-        { label: 'Overview', path: linkBase, end: true },
-        { label: 'Relations Graph', path: `${linkBase}/relations-graph`, end: true },
-    ];
-    const sidebarMenuItems = menuItemDefs.map(({ label, path, end }) => ({
-        label,
-        link: path,
-        active: Boolean((0, react_router_dom_1.matchPath)({ path: `/${path}`, end }, pathname)),
-        items: [],
-        hasActiveSubItem: false,
-    }));
+    const { searchQuery, setSearchQuery } = useCatalog();
     return (react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntity" },
-        react_1.default.createElement(CatalogSidebar, { collapsed: collapsedSidebar, header: react_1.default.createElement(BackLink, { icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), iconPosition: "left", variant: "ghost", size: "medium", "data-component-name": "Sidebar/BackButton", to: linkToMainCatalog }, collapsedSidebar ? ('') : (react_1.default.createElement("div", { "data-translation-key": "sidebar.menu.backLabel" }, translate('sidebar.menu.backLabel')))), menu: react_1.default.createElement(Menu_1.Menu, { items: sidebarMenuItems }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
         react_1.default.createElement(CatalogPageContent, null,
             react_1.default.createElement(Breadcrumbs_1.Breadcrumbs, { additionalBreadcrumbs: [
                     { label: linkToMainCatalogLabel, link: linkToMainCatalog },
@@ -113,14 +94,6 @@ const CatalogPageContent = styled_components_1.default.main `
     padding: var(--catalog-page-padding);
   }
 `;
-const CatalogSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
-  display: none;
-
-  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
-    display: flex;
-  }
-  --menu-container-padding-top: 0;
-`;
 const CatalogEntityPageWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
@@ -138,11 +111,4 @@ const CatalogTwoColumnsSection = styled_components_1.default.section `
   gap: 24px;
   align-items: start;
 `;
-const BackLink = (0, styled_components_1.default)(Button_1.Button) `
-  padding: var(--spacing-unit) 0;
-  height: calc(var(--line-height-base) + var(--spacing-unit) * 2);
-  justify-content: flex-start;
-  width: 100%;
-  margin-bottom: 0px;
-`;
 //# sourceMappingURL=CatalogEntity.js.map

package/lib/components/CatalogClassic/CatalogClassicActions.js

@@ -51,7 +51,7 @@ function CatalogClassicActions(props) {
     return (React.createElement(CatalogActionsWrapper, { "data-component-name": "CatalogClassic/CatalogClassicActions" },
         React.createElement(Button_1.Button, { variant: "ghost", size: "small", icon: React.createElement(FilterIcon_1.FilterIcon, null), iconPosition: "left", onClick: () => {
                 onOpenFilter();
-                telemetry.send({ type: 'catalog_actions_button.clicked' });
+                telemetry.sendCatalogActionsButtonClickedMessage();
             }, "data-translation-key": "catalog.filters.title" }, translate('catalog.filters.title', 'Filters')),
         activeFilters > 0 ? React.createElement(CounterTag_1.CounterTag, { borderless: true }, activeFilters) : null));
 }

package/lib/components/CatalogClassic/CatalogClassicCard.js

@@ -54,7 +54,7 @@ function CatalogClassicCard({ item }) {
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
-        React.createElement(StyledCard, { "data-component-name": "CatalogClassic/CatalogClassicCard", onClick: () => telemetry.send({ type: 'catalog_item.clicked' }) },
+        React.createElement(StyledCard, { "data-component-name": "CatalogClassic/CatalogClassicCard", onClick: () => telemetry.sendCatalogItemClickedMessage() },
             React.createElement(CardContent, null,
                 React.createElement(CardTitleWrapper, null,
                     React.createElement(CardTitle, null,

package/lib/components/CatalogClassic/CatalogClassicInfoBlock.js

@@ -21,7 +21,7 @@ function ScorecardBadge(props) {
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     return (react_1.default.createElement(Link_1.Link, { to: slug },
-        react_1.default.createElement(Tag_1.Tag, { onClick: () => telemetry.send({ type: 'scorecard_link.clicked', payload: { action: 'click' } }), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
+        react_1.default.createElement(Tag_1.Tag, { onClick: () => telemetry.sendScorecardLinkClickedMessage({ action: 'click' }), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
 }
 const CatalogInfoBlockWrapper = styled_components_1.default.div `
   position: relative;

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -54,10 +54,7 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
                             (_a = copy === null || copy === void 0 ? void 0 : copy.onClick) === null || _a === void 0 ? void 0 : _a.call(copy);
                         }
                         else {
-                            telemetry.send({
-                                type: 'openapi_docs.copy_code_snippet.clicked',
-                                payload: { snippetType: 'copy' },
-                            });
+                            telemetry.sendCopyCodeSnippetClickedMessage({ snippetType: 'copy' });
                         }
                     } }))) : null))) : null;
     return children || controls ? (react_1.default.createElement(ContainerWrapper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className, "$isEmptyTitle": isEmptyTitle }, children ? children : defaultControls)) : null;

package/lib/components/Feedback/Feedback.js

@@ -64,7 +64,7 @@ function Feedback(props) {
         return (React.createElement(FeedbackWrapper, { "data-component-name": "Feedback/Feedback" },
             React.createElement(FeedbackComponent, { settings: settings, onSubmit: (values) => {
                     submitFeedback({ type, values, path });
-                    telemetry.send({ type: 'feedback.sent', payload: { feedbackType: type } });
+                    telemetry.sendFeedbackMessage({ feedbackType: type });
                 } })));
     };
     return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());

package/lib/components/Feedback/ReportDialog.js

@@ -34,7 +34,7 @@ function ReportDialog({ location, settings, onSubmit, onCancel, submitFeedback,
                         path: pathname,
                         lang,
                     });
-                    telemetry.send({ type: 'code_snippet.reported' });
+                    telemetry.sendCodeSnippetReportedMessage();
                     onSubmit();
                 }), isDialog: true, onCancel: onCancel }))));
 }

package/lib/components/Filter/FilterCheckboxes.js

@@ -24,7 +24,7 @@ function FilterCheckboxes({ filter, filterValuesCasing, showCounter = true, }) {
             const id = 'filter--' + filter.property + '--' + value;
             return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
                     filter.toggleOption(value);
-                    telemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
+                    telemetry.sendFilterCheckboxToggledMessage({ id });
                 } },
                 react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions instanceof Set
                         ? filter.selectedOptions.has(value) ||

package/lib/components/Footer/FooterItem.js

@@ -20,7 +20,7 @@ function FooterItem({ item, iconsOnly, className }) {
     }
     const hasIcon = Boolean(item.icon || item.srcSet);
     const iconWithoutLabel = Boolean(item.label === item.link && hasIcon);
-    return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.send({ type: 'footer_item.clicked' }), "data-translation-key": item.labelTranslationKey },
+    return (react_1.default.createElement(FooterItemWrapper, { className: className, "data-component-name": "Footer/FooterItem", iconsOnly: iconsOnly, item: item }, item.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label))) : (react_1.default.createElement(FooterLink, { to: item.link, external: item.external, target: item.target, "data-testid": item.label, onClick: () => telemetry.sendFooterItemClickedMessage(), "data-translation-key": item.labelTranslationKey },
         hasIcon ? (react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly },
             react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: item.icon, srcSet: item.srcSet }))) : null,
         !iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null,