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

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,25 +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;
-        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.sendBreadcrumbClickedMessage({
-                        link: breadcrumb.link,
-                        position: idx + 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,
-                    });
-                } }),
-            isLast ? null : react_1.default.createElement("span", null, "/")));
+                    }) }, "..."),
+                react_1.default.createElement(BreadcrumbSeparator, null, "/")));
+        }
+        return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
+            renderBreadcrumb(breadcrumb, idx, isLast),
+            isLast ? null : react_1.default.createElement(BreadcrumbSeparator, null, "/")));
     })));
 }
 const BreadcrumbsWrapper = styled_components_1.default.div `
@@ -36,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.sendEditPageLinkClickedMessage(undefined) },
+    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.sendCatalogItemClickedMessage(undefined);
+            telemetry.sendCatalogItemClickedMessage();
         } },
         react_1.default.createElement(CardContent, null,
             react_1.default.createElement(CardHeader, null,

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.sendCatalogActionsButtonClickedMessage(undefined);
+                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.sendCatalogItemClickedMessage(undefined) },
+        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/Feedback/ReportDialog.js

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

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.sendFooterItemClickedMessage(undefined), "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,

package/lib/components/Logo/Logo.js

@@ -28,7 +28,7 @@ function Logo(_a) {
         return null;
     }
     const image = (react_1.default.createElement(Image_1.Image, { className: className, src: config.image, srcSet: config.srcSet, alt: config.altText }));
-    return (react_1.default.createElement(LogoWrapper, Object.assign({ "data-component-name": "Logo/Logo", className: className }, otherProps), config.link ? (react_1.default.createElement(Link_1.Link, { to: config.link, onClick: () => telemetry.sendLogoClickedMessage(undefined) }, image)) : (image)));
+    return (react_1.default.createElement(LogoWrapper, Object.assign({ "data-component-name": "Logo/Logo", className: className }, otherProps), config.link ? (react_1.default.createElement(Link_1.Link, { to: config.link, onClick: () => telemetry.sendLogoClickedMessage() }, image)) : (image)));
 }
 const LogoWrapper = styled_components_1.default.div `
   max-width: var(--logo-max-width);

package/lib/components/Navbar/Navbar.js

@@ -45,11 +45,11 @@ function Navbar({ className }) {
             react_1.default.createElement(MobileMenuButton, { variant: "text", "data-testid": "mobile-menu-button", onClick: isOpen
                     ? () => {
                         closeMobileMenu();
-                        telemetry.sendMobileMenuButtonCloseClickedMessage(undefined);
+                        telemetry.sendMobileMenuButtonCloseClickedMessage();
                     }
                     : () => {
                         openMobileMenu();
-                        telemetry.sendMobileMenuButtonOpenClickedMessage(undefined);
+                        telemetry.sendMobileMenuButtonOpenClickedMessage();
                     }, icon: isOpen ? react_1.default.createElement(CloseIcon_1.CloseIcon, null) : react_1.default.createElement(MenuIcon_1.MenuIcon, null), "aria-label": isOpen ? 'Close menu button' : 'Open menu button' }),
             hideUserMenu ? null : react_1.default.createElement(UserMenu_1.UserMenu, null))));
 }

package/lib/components/Search/SearchInput.js

@@ -27,7 +27,7 @@ function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton
     const handleOnReset = () => {
         onChange('');
         addSearchHistoryItem(value);
-        telemetry.sendSearchInputResetButtonClickedMessage(undefined);
+        telemetry.sendSearchInputResetButtonClickedMessage();
     };
     return (react_1.default.createElement(SearchInputWrapper, { "data-component-name": "Search/SearchInput", className: className },
         showReturnButton ? (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null), onClick: onReturn })) : value && isLoading ? (react_1.default.createElement(Spinner_1.Spinner, { size: "24px", color: "--search-input-icon-color" })) : (react_1.default.createElement(SearchIcon_1.SearchIcon, { size: "24px", color: "--search-input-icon-color" })),

package/lib/components/Search/SearchRecent.js

@@ -44,7 +44,7 @@ function SearchRecent({ onSelect, className }) {
     const handleOnRemove = (e, item) => {
         e.stopPropagation();
         removeSearchHistoryItem(item);
-        telemetry.sendSearchRecentRemoveButtonClickedMessage(undefined);
+        telemetry.sendSearchRecentRemoveButtonClickedMessage();
     };
     const handleKeyDown = (e, item, index) => {
         if (e.key === 'Enter') {

package/lib/components/SidebarActions/ChangeViewButton.js

@@ -8,15 +8,21 @@ const react_1 = __importDefault(require("react"));
 const HorizontalViewIcon_1 = require("../../icons/HorizontalViewIcon/HorizontalViewIcon");
 const VerticalViewIcon_1 = require("../../icons/VerticalViewIcon/VerticalViewIcon");
 const SidebarActions_1 = require("../../components/SidebarActions/SidebarActions");
-const styled_1 = require("../../components/SidebarActions/styled");
 const hooks_1 = require("../../core/hooks");
+const styled_1 = require("../../components/SidebarActions/styled");
 const ChangeViewButton = ({ layout, onClick, collapsedSidebar, }) => {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    return (react_1.default.createElement(styled_1.StyledChangeViewButton, { title: translate('sidebar.actions.changeLayout', 'Change layout'), onClick: onClick, collapsedSidebar: collapsedSidebar },
-        react_1.default.createElement(styled_1.StyledChangeViewButtonWrap, { active: layout === SidebarActions_1.LayoutVariant.STACKED },
+    const isStacked = layout === SidebarActions_1.LayoutVariant.STACKED;
+    const isThreePanel = layout === SidebarActions_1.LayoutVariant.THREE_PANEL;
+    return (react_1.default.createElement(styled_1.StyledChangeViewButton, { onClick: onClick, collapsedSidebar: collapsedSidebar },
+        react_1.default.createElement(styled_1.StyledChangeViewButtonWrap, { placement: collapsedSidebar ? 'right' : 'top', arrowPosition: collapsedSidebar ? 'center' : 'right', active: isStacked, tip: isStacked
+                ? translate('sidebar.actions.singleColumn', 'Single column')
+                : translate('sidebar.actions.changeToSingleColumn', 'Switch to single column') },
             react_1.default.createElement(HorizontalViewIcon_1.HorizontalViewIcon, { size: "14px", color: "--segmented-buttons-content-color" })),
-        react_1.default.createElement(styled_1.StyledChangeViewButtonWrap, { active: layout === SidebarActions_1.LayoutVariant.THREE_PANEL },
+        react_1.default.createElement(styled_1.StyledChangeViewButtonWrap, { active: isThreePanel, placement: collapsedSidebar ? 'right' : 'top', arrowPosition: collapsedSidebar ? 'center' : 'right', tip: isThreePanel
+                ? translate('sidebar.actions.twoColumns', 'Two columns')
+                : translate('sidebar.actions.changeToTwoColumns', 'Switch to two columns') },
             react_1.default.createElement(VerticalViewIcon_1.VerticalViewIcon, { size: "14px", color: "--segmented-buttons-content-color" }))));
 };
 exports.ChangeViewButton = ChangeViewButton;

package/lib/components/SidebarActions/SidebarActions.js

@@ -13,26 +13,28 @@ const Button_1 = require("../../components/Button/Button");
 const SidePanelCloseIcon_1 = require("../../icons/SidePanelCloseIcon/SidePanelCloseIcon");
 const SidePanelOpenIcon_1 = require("../../icons/SidePanelOpenIcon/SidePanelOpenIcon");
 const styled_1 = require("../../components/SidebarActions/styled");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSidebar, isApiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
     const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
     return (react_1.default.createElement(styled_1.ControlsWrap, { className: className, isCollapsed: collapsedSidebar, "data-component-name": "Sidebar/SidebarActions" },
-        !hideCollapseSidebarButton && (react_1.default.createElement(Button_1.Button, { onClick: () => {
-                onChangeCollapseSidebarClick();
-                if (collapsedSidebar) {
-                    telemetry.sendSidebarItemExpandedMessage(undefined);
-                }
-                else {
-                    telemetry.sendSidebarItemCollapsedMessage(undefined);
-                }
-            }, title: collapsedSidebar
+        !hideCollapseSidebarButton && (react_1.default.createElement(Tooltip_1.Tooltip, { placement: collapsedSidebar ? 'right' : 'top', tip: collapsedSidebar
                 ? translate('sidebar.actions.show', 'Show sidebar')
-                : translate('sidebar.actions.hide', 'Hide sidebar'), size: "small", variant: "outlined", icon: collapsedSidebar ? react_1.default.createElement(SidePanelOpenIcon_1.SidePanelOpenIcon, null) : react_1.default.createElement(SidePanelCloseIcon_1.SidePanelCloseIcon, null) })),
+                : translate('sidebar.actions.hide', 'Hide sidebar') },
+            react_1.default.createElement(Button_1.Button, { onClick: () => {
+                    onChangeCollapseSidebarClick();
+                    if (collapsedSidebar) {
+                        telemetry.sendSidebarItemExpandedMessage();
+                    }
+                    else {
+                        telemetry.sendSidebarItemCollapsedMessage();
+                    }
+                }, size: "small", variant: "outlined", icon: collapsedSidebar ? react_1.default.createElement(SidePanelOpenIcon_1.SidePanelOpenIcon, null) : react_1.default.createElement(SidePanelCloseIcon_1.SidePanelCloseIcon, null) }))),
         isApiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
             react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { collapsedSidebar: collapsedSidebar, layout: layout, onClick: () => {
                     onChangeViewClick();
-                    telemetry.sendChangeLayoutButtonClickedMessage(undefined);
+                    telemetry.sendChangeLayoutButtonClickedMessage();
                 } }))),
         !collapsedSidebar && requestAccessButton));
 };