@redocly/theme 0.54.0-next.6 → 0.54.0

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -9,8 +9,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Breadcrumb_1 = require("../../components/Breadcrumbs/Breadcrumb");
 function Breadcrumbs(props) {
-    const { useBreadcrumbs, useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useBreadcrumbs, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     const breadcrumbs = useBreadcrumbs();
     if (breadcrumbs.length === 0) {
         return null;
@@ -19,10 +19,13 @@ 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('breadcrumb_clicked', {
-                        link: breadcrumb.link,
-                        position: idx + 1,
-                        total_breadcrumbs: breadcrumbs.length,
+                    otelTelemetry.send({
+                        type: 'breadcrumb.clicked',
+                        payload: {
+                            link: breadcrumb.link,
+                            position: idx + 1,
+                            total_breadcrumbs: breadcrumbs.length,
+                        },
                     });
                 } }),
             isLast ? null : react_1.default.createElement("span", null, "/")));

package/lib/components/Buttons/EditPageButton.js

@@ -10,10 +10,10 @@ const hooks_1 = require("../../core/hooks");
 const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
 const Link_1 = require("../../components/Link/Link");
 function EditPageButton({ to }) {
-    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useOtelTelemetry } = (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('edit_page_link_clicked', {}) },
+    const otelTelemetry = useOtelTelemetry();
+    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => otelTelemetry.send({ type: 'edit_page_link.clicked' }) },
         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/CatalogClassic/CatalogClassicActions.js

@@ -45,13 +45,13 @@ function CatalogClassicActions(props) {
             activeFilters++;
         }
     }
-    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     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('catalog_actions_button_clicked', {});
+                otelTelemetry.send({ type: 'catalog_actions_button.clicked' });
             }, "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

@@ -36,18 +36,31 @@ const Link_1 = require("../../components/Link/Link");
 const Tag_1 = require("../../components/Tag/Tag");
 const CatalogClassicHighlight_1 = require("../../components/CatalogClassic/CatalogClassicHighlight");
 const Button_1 = require("../../components/Button/Button");
+/**
+ * Strips HTML tags from a plain string.
+ */
+function stripHtmlTags(text) {
+    if (!text)
+        return '';
+    // This regex matches:
+    // - Opening tags: <tagname> or <tagname attributes>
+    // - Closing tags: </tagname>
+    // - Self-closing tags: <tagname/> or <tagname attributes/>
+    const htmlTagRegex = /<\/?[a-zA-Z][a-zA-Z0-9]*(?:\s[^>]*)?\/?>|<[a-zA-Z][a-zA-Z0-9]*\/>/g;
+    return text.replace(htmlTagRegex, '').trim();
+}
 function CatalogClassicCard({ item }) {
     var _a, _b;
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     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('catalog_item_clicked', {}) },
+        React.createElement(StyledCard, { "data-component-name": "CatalogClassic/CatalogClassicCard", onClick: () => otelTelemetry.send({ type: 'catalog_item.clicked' }) },
             React.createElement(CardContent, null,
                 React.createElement(CardTitleWrapper, null,
                     React.createElement(CardTitle, null,
                         React.createElement(CatalogClassicHighlight_1.CatalogClassicHighlight, null, item.title))),
                 React.createElement(CardDescription, null,
-                    React.createElement(CatalogClassicHighlight_1.CatalogClassicHighlight, null, (_b = (_a = item.summary) !== null && _a !== void 0 ? _a : item.description) !== null && _b !== void 0 ? _b : ''))),
+                    React.createElement(CatalogClassicHighlight_1.CatalogClassicHighlight, null, stripHtmlTags((_b = (_a = item.summary) !== null && _a !== void 0 ? _a : item.description) !== null && _b !== void 0 ? _b : '')))),
             React.createElement(CardFooter, null,
                 React.createElement(CardTags, null,
                     (item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },

package/lib/components/CatalogClassic/CatalogClassicInfoBlock.js

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

package/lib/components/CatalogClassic/CatalogClassicVirtualizedGroups.js

@@ -38,19 +38,17 @@ const GAP_SIZE = 32;
 const ESTIMATED_HEADER_HEIGHT = 43;
 const ESTIMATED_CARD_HEIGHT = 194 + GAP_SIZE;
 const CARD_MIN_WIDTH_VAR = '--catalog-classic-card-min-width';
+const VIRTUALIZATION_THRESHOLD = 20; // Don't virtualize below this number of items
 function CatalogClassicVirtualizedGroups({ groups, filters, filterTerm, }) {
     const [isClient, setIsClient] = (0, react_1.useState)(false);
     const [size, parentRef] = (0, hooks_1.useElementSize)({ delay: 50, detectSizes: 'width' });
     (0, react_1.useEffect)(() => {
         setIsClient(true);
     }, []);
-    (0, react_1.useEffect)(() => {
-        if (!size.width) {
-            return;
-        }
-        virtualizer.measure();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filters, filterTerm, size.width]);
+    const totalItemCount = (0, react_1.useMemo)(() => {
+        return groups.reduce((total, group) => total + group.items.length, 0);
+    }, [groups]);
+    const shouldVirtualize = totalItemCount >= VIRTUALIZATION_THRESHOLD;
     const columnCount = (0, react_1.useMemo)(() => {
         if (!size.width)
             return 4;
@@ -58,7 +56,7 @@ function CatalogClassicVirtualizedGroups({ groups, filters, filterTerm, }) {
         return Math.max(1, Math.floor((size.width + GAP_SIZE) / (cardMinWidth + GAP_SIZE)));
     }, [size.width]);
     const flatRows = (0, react_1.useMemo)(() => {
-        if (!isClient) {
+        if (!shouldVirtualize || !isClient) {
             return groups.flatMap((group) => [
                 {
                     type: 'header',
@@ -95,7 +93,7 @@ function CatalogClassicVirtualizedGroups({ groups, filters, filterTerm, }) {
             }
         });
         return rows;
-    }, [groups, columnCount, isClient]);
+    }, [groups, columnCount, isClient, shouldVirtualize]);
     const virtualizer = (0, react_virtual_1.useWindowVirtualizer)({
         count: flatRows.length,
         estimateSize: (index) => {
@@ -106,6 +104,13 @@ function CatalogClassicVirtualizedGroups({ groups, filters, filterTerm, }) {
         },
         overscan: 5,
     });
+    (0, react_1.useEffect)(() => {
+        if (!size.width || !shouldVirtualize) {
+            return;
+        }
+        virtualizer.measure();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filters, filterTerm, size.width, shouldVirtualize]);
     if (!isClient) {
         return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "CatalogClassic/CatalogClassicVirtualizedGroups" },
             flatRows.slice(0, 15).map((rowData) => {
@@ -114,8 +119,7 @@ function CatalogClassicVirtualizedGroups({ groups, filters, filterTerm, }) {
                         react_1.default.createElement(CatalogSeparatorLabel, null, rowData.groupTitle),
                         react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
                 }
-                return (react_1.default.createElement(SSRRow, { key: rowData.key }, rowData.items.map((item) => (react_1.default.createElement(CardWrapper, { key: item.link },
-                    react_1.default.createElement(CatalogClassicCard_1.CatalogClassicCard, { item: item }))))));
+                return (react_1.default.createElement(SSRGridRow, { key: rowData.key }, rowData.items.map((item) => (react_1.default.createElement(CatalogClassicCard_1.CatalogClassicCard, { key: item.link, item: item })))));
             }),
             react_1.default.createElement(LoadingWrapper, null,
                 react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { color: "var(--catalog-classic-description-text-color)", size: "20px" }))));
@@ -145,10 +149,10 @@ const SSRHeaderRow = styled_components_1.default.div `
   font-size: var(--catalog-classic-separator-font-size);
   font-weight: var(--catalog-classic-separator-font-weight);
 `;
-const SSRRow = styled_components_1.default.div `
+const SSRGridRow = styled_components_1.default.div `
   width: 100%;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-classic-card-min-width), 1fr));
   gap: var(--catalog-classic-cards-group-gap, 32px);
   padding-bottom: var(--catalog-classic-cards-group-gap, 32px);
 `;
@@ -157,21 +161,11 @@ const HeaderRow = (0, styled_components_1.default)(SSRHeaderRow) `
   left: 0;
   will-change: transform;
 `;
-const GridRow = styled_components_1.default.div `
+const GridRow = (0, styled_components_1.default)(SSRGridRow) `
   position: absolute;
   left: 0;
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-classic-card-min-width), 1fr));
-  gap: var(--catalog-classic-cards-group-gap, 32px);
-  padding-bottom: var(--catalog-classic-cards-group-gap, 32px);
   will-change: transform;
 `;
-const CardWrapper = styled_components_1.default.div `
-  flex: 1 0 var(--catalog-classic-card-min-width);
-  max-width: 100%;
-  min-width: var(--catalog-classic-card-min-width);
-`;
 const CatalogSeparatorLabel = styled_components_1.default.div `
   margin: var(--catalog-classic-separator-label-margin);
 `;

package/lib/components/Feedback/ReportDialog.js

@@ -21,9 +21,9 @@ const Comment_1 = require("../../components/Feedback/Comment");
 const Portal_1 = require("../../components/Portal/Portal");
 function ReportDialog({ location, settings, onSubmit, onCancel, submitFeedback, lang, }) {
     const { label } = settings;
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     return (react_1.default.createElement(Portal_1.Portal, null,
         react_1.default.createElement(ReportDialogWrapper, { className: "scroll-lock", "data-component-name": "Feedback/ReportDialog" },
             react_1.default.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => __awaiter(this, void 0, void 0, function* () {
@@ -34,7 +34,7 @@ function ReportDialog({ location, settings, onSubmit, onCancel, submitFeedback,
                         path: pathname,
                         lang,
                     });
-                    telemetry.send('code_snippet_reported', {});
+                    otelTelemetry.send({ type: 'code_snippet.reported' });
                     onSubmit();
                 }), isDialog: true, onCancel: onCancel }))));
 }

package/lib/components/Filter/FilterCheckboxes.js

@@ -15,16 +15,16 @@ const CheckboxIcon_1 = require("../../icons/CheckboxIcon/CheckboxIcon");
 const CounterTag_1 = require("../../components/Tags/CounterTag");
 const utils_1 = require("../../core/utils");
 function FilterCheckboxes({ filter, filterValuesCasing }) {
-    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     return (react_1.default.createElement(FilterCheckboxesWrapper, { "data-component-name": "Filter/FilterCheckboxes" },
         react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
         react_1.default.createElement(FilterOptions_1.FilterOptions, null, filter.filteredOptions.map(({ value, count }) => {
             const id = 'filter--' + filter.property + '--' + value;
             return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
                     filter.toggleOption(value);
-                    telemetry.send('filter_checkbox_toggled', { id });
+                    otelTelemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
                 } },
                 react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions.has(value) }),
                 react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),

package/lib/components/Footer/FooterItem.js

@@ -12,15 +12,15 @@ const Link_1 = require("../../components/Link/Link");
 const Image_1 = require("../../components/Image/Image");
 const utils_1 = require("../../core/utils");
 function FooterItem({ item, iconsOnly, className }) {
-    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     const { translate } = useTranslate();
     if (item.type === 'error') {
         return null;
     }
     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('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: () => otelTelemetry.send({ type: 'footer_item.clicked' }), "data-translation-key": item.labelTranslationKey },
         hasIcon ? (react_1.default.createElement(FooterLinkIcon, { iconsOnly: iconsOnly },
             react_1.default.createElement(Image_1.Image, { src: item.icon, srcSet: item.srcSet }))) : null,
         !iconWithoutLabel ? translate(item.labelTranslationKey, item.label) : null,

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -15,8 +15,8 @@ const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
 function LanguagePicker(props) {
     const { currentLocale, locales, setLocale } = (0, hooks_1.useLanguagePicker)();
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     if (locales.length < 2 || !currentLocale) {
         return null;
     }
@@ -26,7 +26,10 @@ function LanguagePicker(props) {
         onAction: () => {
             setLocale(locale.code);
             props.onChangeLanguage(locale.code);
-            telemetry.send('language_picker_locale_changed', { locale: locale.code });
+            otelTelemetry.send({
+                type: 'language_picker_locale.changed',
+                payload: { 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

@@ -22,13 +22,13 @@ const Link_1 = require("../../components/Link/Link");
 const Image_1 = require("../../components/Image/Image");
 function Logo(_a) {
     var { config, className } = _a, otherProps = __rest(_a, ["config", "className"]);
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     if (!(config === null || config === void 0 ? void 0 : config.image) && !(config === null || config === void 0 ? void 0 : config.srcSet)) {
         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('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: () => otelTelemetry.send({ type: 'logo.clicked' }) }, image)) : (image)));
 }
 const LogoWrapper = styled_components_1.default.div `
   max-width: var(--logo-max-width);

package/lib/components/Menu/MenuItem.js

@@ -39,7 +39,7 @@ const Badge_1 = require("../../components/Badge/Badge");
 function MenuItem(props) {
     var _a;
     const { item, depth, className, onClick } = props;
-    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const type = (0, utils_1.getMenuItemType)(item);
     const nestedMenuRef = (0, react_1.useRef)(null);
@@ -47,15 +47,20 @@ function MenuItem(props) {
     const { isExpanded, canUnmount, style, handleExpand } = (0, hooks_1.useNestedMenu)(Object.assign(Object.assign({}, props), { type,
         labelRef,
         nestedMenuRef }));
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     const isDrilldown = type === constants_1.MenuItemType.DrillDown;
     const isSeparator = type === constants_1.MenuItemType.Separator;
     const isNested = type === constants_1.MenuItemType.Group;
     const hasChevron = isNested && !isDrilldown;
     const hasHttpTag = !!item.httpVerb || type === constants_1.MenuItemType.Operation;
     const handleOnClick = () => {
-        var _a;
-        (_a = telemetry.send) === null || _a === void 0 ? void 0 : _a.call(telemetry, 'sidebar_item_clicked', { label: item.label, type: item.type });
+        otelTelemetry.send({
+            type: 'sidebar.item_clicked',
+            payload: {
+                label: item.label,
+                type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
+            },
+        });
         onClick === null || onClick === void 0 ? void 0 : onClick();
         if (isNested) {
             handleExpand();

package/lib/components/Navbar/Navbar.js

@@ -21,11 +21,11 @@ const MenuIcon_1 = require("../../icons/MenuIcon/MenuIcon");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 function Navbar({ className }) {
     var _a;
-    const { isOpen, openMobileMenu, closeMobileMenu } = (0, hooks_1.useMobileMenu)(false);
+    const { isOpen, closeMobileMenu, openMobileMenu } = (0, hooks_1.useMobileMenu)(false);
     const themeConfig = (0, hooks_1.useThemeConfig)();
-    const { useL10n, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useL10n, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { changeLanguage } = useL10n();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     const menu = (_a = themeConfig.navbar) === null || _a === void 0 ? void 0 : _a.items;
     const { search: searchSettings, navbar, userMenu: userMenuSettings, logo } = themeConfig;
     if (navbar === null || navbar === void 0 ? void 0 : navbar.hide) {
@@ -45,11 +45,11 @@ function Navbar({ className }) {
             react_1.default.createElement(MobileMenuButton, { variant: "text", "data-testid": "mobile-menu-button", onClick: isOpen
                     ? () => {
                         closeMobileMenu();
-                        telemetry.send('mobile_menu_button_close_clicked', {});
+                        otelTelemetry.send({ type: 'mobile_menu_button_close.clicked' });
                     }
                     : () => {
                         openMobileMenu();
-                        telemetry.send('mobile_menu_button_open_clicked', {});
+                        otelTelemetry.send({ type: 'mobile_menu_button_open.clicked' });
                     }, icon: isOpen ? react_1.default.createElement(CloseIcon_1.CloseIcon, null) : react_1.default.createElement(MenuIcon_1.MenuIcon, null) }),
             hideUserMenu ? null : react_1.default.createElement(UserMenu_1.UserMenu, null))));
 }

package/lib/components/Navbar/NavbarItem.js

@@ -39,17 +39,17 @@ const Link_1 = require("../../components/Link/Link");
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    const { useTranslate, useL10nConfig, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useL10nConfig, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { defaultLocale, currentLocale, locales } = useL10nConfig();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     if (navItem.type !== 'link' && !navItem.items)
         return null;
     const item = navItem;
     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('navbar_menu_item_clicked', { 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: () => otelTelemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } }), external: item.external, target: item.target, to: item.link },
         react_1.default.createElement(NavbarIcon, { url: item.icon }),
         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/SearchInput.js

@@ -13,9 +13,9 @@ const hooks_1 = require("../../core/hooks");
 const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
 const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
 function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton, inputRef, onReturn, onSubmit, className, }) {
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     const { onKeyDown } = (0, hooks_1.useInputKeyCommands)({
         onEnter: (event) => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event),
         onClear: () => addSearchHistoryItem(value),
@@ -27,7 +27,7 @@ function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton
     const handleOnReset = () => {
         onChange('');
         addSearchHistoryItem(value);
-        telemetry.send('search_input_reset_button_clicked', {});
+        otelTelemetry.send({ type: 'search_input_reset_button.clicked' });
     };
     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

@@ -36,15 +36,15 @@ const RecentlyViewedIcon_1 = require("../../icons/RecentlyViewedIcon/RecentlyVie
 const Button_1 = require("../../components/Button/Button");
 function SearchRecent({ onSelect, className }) {
     const { items, removeSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
-    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     if (!items || !items.length)
         return null;
     const handleOnRemove = (e, item) => {
         e.stopPropagation();
         removeSearchHistoryItem(item);
-        telemetry.send('search_recent_remove_button_clicked', {});
+        otelTelemetry.send({ type: 'search_recent_remove_button.clicked' });
     };
     const handleKeyDown = (e, item, index) => {
         if (e.key === 'Enter') {

package/lib/components/SidebarActions/SidebarActions.js

@@ -14,27 +14,25 @@ const SidePanelCloseIcon_1 = require("../../icons/SidePanelCloseIcon/SidePanelCl
 const SidePanelOpenIcon_1 = require("../../icons/SidePanelOpenIcon/SidePanelOpenIcon");
 const styled_1 = require("../../components/SidebarActions/styled");
 const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSidebar, isApiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
-    const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { useOtelTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     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: () => {
-                var _a, _b;
                 onChangeCollapseSidebarClick();
                 if (collapsedSidebar) {
-                    (_a = telemetry.send) === null || _a === void 0 ? void 0 : _a.call(telemetry, 'sidebar_item_expanded', {});
+                    otelTelemetry.send({ type: 'sidebar.item_expanded' });
                 }
                 else {
-                    (_b = telemetry.send) === null || _b === void 0 ? void 0 : _b.call(telemetry, 'sidebar_item_collapsed', {});
+                    otelTelemetry.send({ type: 'sidebar.item_collapsed' });
                 }
             }, title: 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) })),
         isApiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
             react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { collapsedSidebar: collapsedSidebar, layout: layout, onClick: () => {
-                    var _a;
                     onChangeViewClick();
-                    (_a = telemetry.send) === null || _a === void 0 ? void 0 : _a.call(telemetry, 'change_layout_button_clicked', {});
+                    otelTelemetry.send({ type: 'change_layout_button.clicked' });
                 } }))),
         !collapsedSidebar && requestAccessButton));
 };

package/lib/components/TableOfContent/TableOfContent.js

@@ -33,9 +33,9 @@ const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 function TableOfContent(props) {
     const { headings, contentWrapper, className } = props;
-    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     const sidebar = React.useRef(null);
     (0, hooks_1.useFullHeight)(sidebar);
     const { markdown: { toc = {} } = {} } = (0, hooks_1.useThemeConfig)();
@@ -54,7 +54,7 @@ function TableOfContent(props) {
                         return null;
                     }
                     const href = '#' + heading.id;
-                    return (React.createElement(TableOfContentMenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-testid": `toc-${heading.value}`, onClick: () => telemetry.send('toc_item_clicked', {}) }));
+                    return (React.createElement(TableOfContentMenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-testid": `toc-${heading.value}`, onClick: () => otelTelemetry.send({ type: 'toc_item.clicked' }) }));
                 })))));
 }
 const TableOfContentMenu = styled_components_1.default.aside `

package/lib/components/UserMenu/LoginButton.js

@@ -8,10 +8,10 @@ const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 function LoginButton({ href, className }) {
-    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     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('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: () => otelTelemetry.send({ type: 'login_button.clicked' }), "data-testid": "login-btn", extraClass: className, variant: "primary", size: "medium" }, translate('userMenu.login', 'Login'))));
 }
 //# sourceMappingURL=LoginButton.js.map

package/lib/components/UserMenu/LogoutMenuItem.js

@@ -9,12 +9,12 @@ const hooks_1 = require("../../core/hooks");
 const LogoutIcon_1 = require("../../icons/LogoutIcon/LogoutIcon");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 function LogoutMenuItem({ iconOnly, className }) {
-    const { useTranslate, useTelemetry, useUserMenu } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useOtelTelemetry, useUserMenu } = (0, hooks_1.useThemeHooks)();
     const { handleLogout } = useUserMenu();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     const { translate } = useTranslate();
     const handleClick = () => {
-        telemetry.send('logout_menu_item_clicked', {});
+        otelTelemetry.send({ type: 'logout_menu_item.clicked' });
         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/search/use-search-dialog.js

@@ -13,15 +13,15 @@ function useSearchDialog() {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const themeSettings = (0, hooks_1.useThemeConfig)();
     const location = (0, react_router_dom_1.useLocation)();
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'];
     const hotKeys = keyShortcuts === null || keyShortcuts === void 0 ? void 0 : keyShortcuts.join(',');
     (0, react_1.useEffect)(() => {
         if (hotKeys) {
             (0, hotkeys_js_1.default)(hotKeys, (ev) => {
                 setIsOpen(true);
-                telemetry.send('search_opened', { method: 'shortcut' });
+                otelTelemetry.send({ type: 'search.opened', payload: { method: 'shortcut' } });
                 ev.preventDefault();
             });
             return () => hotkeys_js_1.default.unbind(hotKeys);
@@ -29,7 +29,7 @@ function useSearchDialog() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hotKeys]);
     const onOpen = (0, react_1.useCallback)(function () {
-        telemetry.send('search_opened', { method: 'click' });
+        otelTelemetry.send({ type: 'search.opened', payload: { method: 'click' } });
         setIsOpen(true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

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

@@ -5,8 +5,8 @@ const react_1 = require("react");
 const hooks_1 = require("../../core/hooks");
 const useColorSwitcher = () => {
     const themeSettings = (0, hooks_1.useThemeConfig)();
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     const colorMode = themeSettings.colorMode;
     const modes = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || ['light', 'dark'];
     const defaultColor = modes[0] || 'light';
@@ -27,7 +27,10 @@ const useColorSwitcher = () => {
         window.requestAnimationFrame(() => {
             document.documentElement.classList.remove('notransition');
         });
-        telemetry.send('color_mode_switched', { from: activeColorMode, to: newMode });
+        otelTelemetry.send({
+            type: 'color_mode.switched',
+            payload: { from: activeColorMode, to: newMode },
+        });
         setActiveColorMode(newMode);
     };
     return {