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

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -20,13 +20,10 @@ function Breadcrumbs(props) {
         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.send({
-                        type: 'breadcrumb.clicked',
-                        payload: {
-                            link: breadcrumb.link,
-                            position: idx + 1,
-                            totalBreadcrumbs: breadcrumbs.length,
-                        },
+                    telemetry.sendBreadcrumbClickedMessage({
+                        link: breadcrumb.link,
+                        position: idx + 1,
+                        totalBreadcrumbs: breadcrumbs.length,
                     });
                 } }),
             isLast ? null : react_1.default.createElement("span", null, "/")));

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(undefined) },
         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(undefined);
         } },
         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(undefined);
             }, "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(undefined) },
             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

@@ -20,7 +20,8 @@ const CodeBlockDropdown_1 = require("../../components/CodeBlock/CodeBlockDropdow
 function CodeBlockControls({ children, className, title, controls, tabs, dropdown, }) {
     var _a, _b, _c, _d, _e;
     const { codeSnippet } = (0, hooks_1.useThemeConfig)();
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const telemetry = useTelemetry();
     const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.elementFormat) || 'icon';
     const { copy, expand, collapse, select, deselect, report } = controls || {
@@ -37,15 +38,15 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
         react_1.default.createElement(ControlsWrapper, null,
             dropdown && react_1.default.createElement(CodeBlockDropdown_1.CodeBlockDropdown, Object.assign({}, dropdown)),
-            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.report.tooltipText", placement: "top" },
+            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top" },
                 react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
-            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.expand.tooltipText", placement: "top" },
+            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top" },
                 react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all')))) : null,
-            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.collapse.tooltipText", placement: "top" },
+            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.collapse.tooltipText', 'Collapse all'), placement: "top" },
                 react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all')))) : null,
             select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
-            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.copy.tooltipText", placement: "top" },
+            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top" },
                 react_1.default.createElement(StyledCopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
                         var _a;
                         // If there already is a click handler, events should be handled there, cause they pass additional data
@@ -53,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(undefined);
                     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(undefined), "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/LanguagePicker/LanguagePicker.js

@@ -26,10 +26,7 @@ function LanguagePicker(props) {
         onAction: () => {
             setLocale(locale.code);
             props.onChangeLanguage(locale.code);
-            telemetry.send({
-                type: 'language_picker_locale.changed',
-                payload: { locale: locale.code },
-            });
+            telemetry.sendLanguagePickerLocaleChangedMessage({ locale: locale.code });
         },
         active: locale.code === currentLocale.code,
         suffix: locale.code === currentLocale.code && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, 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.send({ type: 'logo.clicked' }) }, 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(undefined) }, image)) : (image)));
 }
 const LogoWrapper = styled_components_1.default.div `
   max-width: var(--logo-max-width);

package/lib/components/Menu/MenuItem.js

@@ -55,12 +55,9 @@ function MenuItem(props) {
     const hasChevron = isNested && !isDrilldown;
     const hasHttpTag = !!item.httpVerb || type === constants_1.MenuItemType.Operation;
     const handleOnClick = () => {
-        telemetry.send({
-            type: 'sidebar.item_clicked',
-            payload: {
-                label: item.label,
-                type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
-            },
+        telemetry.sendSidebarItemClickedMessage({
+            label: item.label,
+            type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
         });
         onClick === null || onClick === void 0 ? void 0 : onClick();
         if (isNested) {

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.send({ type: 'mobile_menu_button_close.clicked' });
+                        telemetry.sendMobileMenuButtonCloseClickedMessage(undefined);
                     }
                     : () => {
                         openMobileMenu();
-                        telemetry.send({ type: 'mobile_menu_button_open.clicked' });
+                        telemetry.sendMobileMenuButtonOpenClickedMessage(undefined);
                     }, 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/Navbar/NavbarItem.js

@@ -27,7 +27,7 @@ function NavbarItem({ navItem, className }) {
     const normalizedPath = (item.link && item.link !== '/' ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
     const isActive = pathname ===
         (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
-    const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } }), external: item.external, target: item.target, to: item.link },
+    const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.sendNavbarMenuItemClickedMessage({ type: item.type }), external: item.external, target: item.target, to: item.link },
         react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
         item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));

package/lib/components/Search/SearchDialog.js

@@ -110,15 +110,12 @@ function SearchDialog({ onClose, className }) {
         }
         return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, innerRef: innerRef, onClick: () => {
                 addSearchHistoryItem(query);
-                telemetry.send({
-                    type: 'search.result.clicked',
-                    payload: {
-                        query,
-                        url: item.document.url,
-                        totalResults: results.length.toString(),
-                        index: index.toString(),
-                        searchEngine: mode,
-                    },
+                telemetry.sendSearchResultClickedMessage({
+                    query,
+                    url: item.document.url,
+                    totalResults: results.length.toString(),
+                    index: index.toString(),
+                    searchEngine: mode,
                 });
                 onClose();
             } }));
@@ -223,12 +220,9 @@ function SearchDialog({ onClose, className }) {
                         translate('search.loading', 'Loading...'))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.noResults" },
                         react_1.default.createElement("b", null, translate('search.noResults.title', 'No results'))))) : (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: (query, index) => {
-                                telemetry.send({
-                                    type: 'search.recent.clicked',
-                                    payload: {
-                                        query,
-                                        index: index.toString(),
-                                    },
+                                telemetry.sendSearchRecentClickedMessage({
+                                    query,
+                                    index: index.toString(),
                                 });
                                 setQuery(query);
                                 focusSearchInput();

package/lib/components/Search/SearchInput.js

@@ -27,7 +27,7 @@ function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton
     const handleOnReset = () => {
         onChange('');
         addSearchHistoryItem(value);
-        telemetry.send({ type: 'search_input_reset_button.clicked' });
+        telemetry.sendSearchInputResetButtonClickedMessage(undefined);
     };
     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.send({ type: 'search_recent_remove_button.clicked' });
+        telemetry.sendSearchRecentRemoveButtonClickedMessage(undefined);
     };
     const handleKeyDown = (e, item, index) => {
         if (e.key === 'Enter') {

package/lib/components/SidebarActions/SidebarActions.js

@@ -21,10 +21,10 @@ const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSi
         !hideCollapseSidebarButton && (react_1.default.createElement(Button_1.Button, { onClick: () => {
                 onChangeCollapseSidebarClick();
                 if (collapsedSidebar) {
-                    telemetry.send({ type: 'sidebar.item_expanded' });
+                    telemetry.sendSidebarItemExpandedMessage(undefined);
                 }
                 else {
-                    telemetry.send({ type: 'sidebar.item_collapsed' });
+                    telemetry.sendSidebarItemCollapsedMessage(undefined);
                 }
             }, title: collapsedSidebar
                 ? translate('sidebar.actions.show', 'Show sidebar')
@@ -32,7 +32,7 @@ const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSi
         isApiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
             react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { collapsedSidebar: collapsedSidebar, layout: layout, onClick: () => {
                     onChangeViewClick();
-                    telemetry.send({ type: 'change_layout_button.clicked' });
+                    telemetry.sendChangeLayoutButtonClickedMessage(undefined);
                 } }))),
         !collapsedSidebar && requestAccessButton));
 };

package/lib/components/Switch/Switch.d.ts

@@ -2,6 +2,9 @@ import type { JSX } from 'react';
 export type SwitchProps = {
     value: boolean;
     onChange: (value: boolean) => void;
+    onFocus?: () => void;
     disabled?: boolean;
+    stopPropagation?: boolean;
+    className?: string;
 };
-export declare function Switch({ value, disabled, onChange }: SwitchProps): JSX.Element;
+export declare function Switch({ value, disabled, onChange, onFocus, stopPropagation, className, }: SwitchProps): JSX.Element;

package/lib/components/Switch/Switch.js

@@ -29,13 +29,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = Switch;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-function Switch({ value = false, disabled = false, onChange }) {
-    const handleClick = () => {
+function Switch({ value = false, disabled = false, onChange, onFocus, stopPropagation = false, className, }) {
+    const handleClick = (event) => {
         if (disabled)
             return;
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
         onChange(!value);
     };
-    return (react_1.default.createElement(SwitchWrapper, { onClick: handleClick, role: "switch", selected: value, disabled: disabled },
+    const handleFocus = (event) => {
+        if (stopPropagation) {
+            event.stopPropagation();
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    };
+    return (react_1.default.createElement(SwitchWrapper, { tabIndex: disabled ? -1 : 0, onFocus: handleFocus, onClick: handleClick, role: "switch", "aria-checked": value, "aria-disabled": disabled, selected: value, disabled: disabled, className: className },
         react_1.default.createElement(Knob, { selected: value, disabled: disabled })));
 }
 const SwitchWrapper = styled_components_1.default.div `

package/lib/components/TableOfContent/TableOfContent.js

@@ -55,7 +55,7 @@ function TableOfContent(props) {
                 const href = '#' + heading.id;
                 return (React.createElement(TableOfContentMenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeading === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-testid": `toc-${heading.value}`, onClick: (e) => {
                         e.preventDefault();
-                        telemetry.send({ type: 'toc_item.clicked' });
+                        telemetry.sendTocItemClickedMessage(undefined);
                         handleHeadingClick(heading.id);
                     } }));
             }))));

package/lib/components/Tooltip/TooltipWrapper.d.ts

@@ -2,11 +2,11 @@ import type { JSX, ReactElement } from 'react';
 import type { TooltipProps } from '../../components/Tooltip/Tooltip';
 export type TooltipWrapperProps = {
     children: ReactElement;
-    tooltipTranslationKey: string;
+    tip: string;
     placement?: TooltipProps['placement'];
     width?: string;
     className?: string;
     showOnHover?: boolean;
     disabled?: boolean;
 };
-export declare function TooltipWrapper({ children, tooltipTranslationKey, placement, width, className, showOnHover, disabled, }: TooltipWrapperProps): JSX.Element;
+export declare function TooltipWrapper({ children, tip, placement, width, className, showOnHover, disabled, }: TooltipWrapperProps): JSX.Element;

package/lib/components/Tooltip/TooltipWrapper.js

@@ -8,10 +8,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../core/hooks");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-function TooltipWrapper({ children, tooltipTranslationKey, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+function TooltipWrapper({ children, tip, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
     const tooltip = (0, hooks_1.useControl)();
-    const { translate } = useTranslate();
     const handleMouseEnter = () => {
         if (showOnHover && !disabled) {
             tooltip.handleOpen();
@@ -27,7 +25,7 @@ function TooltipWrapper({ children, tooltipTranslationKey, placement = 'top', wi
             tooltip.handleClose();
         }
     };
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: className, tip: translate(tooltipTranslationKey), isOpen: tooltip.isOpened, placement: placement, width: width },
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: className, tip: tip, isOpen: tooltip.isOpened, placement: placement, width: width },
         react_1.default.createElement(TooltipEventWrapper, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick }, children)));
 }
 const TooltipEventWrapper = styled_components_1.default.div `

package/lib/components/UserMenu/LoginButton.js

@@ -12,6 +12,6 @@ function LoginButton({ href, className }) {
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
     return (react_1.default.createElement("div", { "data-component-name": "UserMenu/LoginButton", className: className },
-        react_1.default.createElement(Button_1.Button, { "data-translation-key": "userMenu.login", to: href, onClick: () => telemetry.send({ type: 'login_button.clicked' }), "data-testid": "login-btn", extraClass: className, variant: "primary", size: "medium" }, translate('userMenu.login', 'Login'))));
+        react_1.default.createElement(Button_1.Button, { "data-translation-key": "userMenu.login", to: href, onClick: () => telemetry.sendLoginButtonClickedMessage(undefined), "data-testid": "login-btn", extraClass: className, variant: "primary", size: "medium" }, translate('userMenu.login', 'Login'))));
 }
 //# sourceMappingURL=LoginButton.js.map

package/lib/components/UserMenu/LogoutMenuItem.js

@@ -14,7 +14,7 @@ function LogoutMenuItem({ iconOnly, className }) {
     const telemetry = useTelemetry();
     const { translate } = useTranslate();
     const handleClick = () => {
-        telemetry.send({ type: 'logout_menu_item.clicked' });
+        telemetry.sendLogoutMenuItemClickedMessage(undefined);
         handleLogout();
     };
     return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { className: className, dangerous: true, "data-component-name": "UserMenu/LogoutMenuItem", onAction: handleClick, "data-translation-key": "userMenu.logout", prefix: react_1.default.createElement(LogoutIcon_1.LogoutIcon, null), style: { width: iconOnly ? 'fit-content' : '100%' } }, iconOnly ? null : translate('userMenu.logout', 'Log out')));

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -4,6 +4,7 @@ export declare const useThemeHooks: import("vitest").Mock<() => {
     }>;
     useTelemetry: import("vitest").Mock<() => {
         send: import("vitest").Mock<(...args: any[]) => any>;
+        sendCodeSnippetReportedMessage: import("vitest").Mock<(...args: any[]) => any>;
     }>;
     useBreadcrumbs: import("vitest").Mock<(...args: any[]) => any>;
     usePageSharedData: import("vitest").Mock<(...args: any[]) => any>;

package/lib/core/hooks/__mocks__/use-theme-hooks.js

@@ -12,6 +12,7 @@ exports.useThemeHooks = vitest_1.vi.fn(() => ({
     })),
     useTelemetry: vitest_1.vi.fn(() => ({
         send: vitest_1.vi.fn(),
+        sendCodeSnippetReportedMessage: vitest_1.vi.fn(),
     })),
     useBreadcrumbs: vitest_1.vi.fn().mockReturnValue([]),
     usePageSharedData: vitest_1.vi.fn().mockReturnValue({}),

package/lib/core/hooks/search/use-search-dialog.js

@@ -22,7 +22,7 @@ function useSearchDialog() {
         if (hotKeys) {
             (0, hotkeys_js_1.default)(hotKeys, (ev) => {
                 setIsOpen(true);
-                telemetry.send({ type: 'search.opened', payload: { method: 'shortcut' } });
+                telemetry.sendSearchOpenedMessage({ method: 'shortcut' });
                 ev.preventDefault();
             });
             return () => hotkeys_js_1.default.unbind(hotKeys);
@@ -30,7 +30,7 @@ function useSearchDialog() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hotKeys]);
     const onOpen = (0, react_1.useCallback)(function () {
-        telemetry.send({ type: 'search.opened', payload: { method: 'click' } });
+        telemetry.sendSearchOpenedMessage({ method: 'click' });
         setIsOpen(true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

package/lib/core/hooks/use-color-switcher.js

@@ -28,10 +28,7 @@ const useColorSwitcher = () => {
         window.requestAnimationFrame(() => {
             document.documentElement.classList.remove('notransition');
         });
-        telemetry.send({
-            type: 'color_mode.switched',
-            payload: { from: activeColorMode, to: newMode },
-        });
+        telemetry.sendColorModeSwitchedMessage({ from: activeColorMode, to: newMode });
         setActiveColorMode(newMode);
     };
     return {

package/lib/core/hooks/use-product-picker.js

@@ -13,7 +13,7 @@ function useProductPicker() {
     function setProduct(product) {
         if (!product)
             return;
-        telemetry.send({ type: 'product.picked', payload: { product: product.slug } });
+        telemetry.sendProductPickedMessage({ product: product.slug });
         loadAndNavigate({ navigate, to: product.link });
     }
     return {