@redocly/theme 0.67.0-next.4 → 0.67.0-next.5

package/lib/components/Breadcrumbs/BreadcrumbDropdown.js

@@ -47,6 +47,7 @@ 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");
+const utils_1 = require("../../core/utils");
 function BreadcrumbDropdown({ children, label, items, onItemClick, className, withChevron, }) {
     const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
@@ -70,12 +71,7 @@ function BreadcrumbDropdown({ children, label, items, onItemClick, className, wi
                 return (react_1.default.createElement(StyledDropdownMenuItem, { key: index, onAction: () => {
                         onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, index);
                         telemetry.sendBreadcrumbClickedMessage([
-                            {
-                                object: 'breadcrumb',
-                                link: item.link,
-                                position: index + 1,
-                                totalBreadcrumbs: items.length,
-                            },
+                            Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('breadcrumbId', 'breadcrumb')), { 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 },

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -46,23 +46,13 @@ function Breadcrumbs(props) {
             ];
             const translatedLabel = translate(breadcrumb.labelTranslationKey, breadcrumb.label);
             return (react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: translatedLabel, items: siblingsWithActive, withChevron: true, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage([
-                    {
-                        object: 'breadcrumb',
-                        link: item.link,
-                        position: itemIdx + 1,
-                        totalBreadcrumbs: siblingsWithActive.length,
-                    },
+                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('breadcrumbId', 'breadcrumb')), { 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)));
         }
         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([
-                {
-                    object: 'breadcrumb',
-                    link: breadcrumb.link,
-                    position: idx + 1,
-                    totalBreadcrumbs: breadcrumbs.length,
-                },
+                Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('breadcrumbId', 'breadcrumb')), { 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 }) => {
@@ -74,12 +64,7 @@ function Breadcrumbs(props) {
                 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([
-                        {
-                            object: 'breadcrumb',
-                            link: item.link,
-                            position: itemIdx + 1,
-                            totalBreadcrumbs: breadcrumbs.length,
-                        },
+                        Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('breadcrumbId', 'breadcrumb')), { link: item.link, position: itemIdx + 1, totalBreadcrumbs: breadcrumbs.length }),
                     ]) }, "..."),
                 react_1.default.createElement(BreadcrumbSeparator, null, "/")));
         }

package/lib/components/Buttons/AIAssistantButton.js

@@ -47,6 +47,7 @@ const ChatIcon_1 = require("../../icons/ChatIcon/ChatIcon");
 const AiStarsGradientIcon_1 = require("../../icons/AiStarsGradientIcon/AiStarsGradientIcon");
 const RedoclyIcon_1 = require("../../icons/RedoclyIcon/RedoclyIcon");
 const contexts_1 = require("../../core/contexts");
+const utils_1 = require("../../core/utils");
 const defaultConfig = {
     hide: false,
     inputType: 'button',
@@ -88,12 +89,7 @@ function AIAssistantButton() {
     const handleOpen = () => {
         setIsOpen(true);
         telemetry.sendSearchAiOpenedMessage([
-            {
-                id: 'aiAssistantTriggerButton',
-                object: 'search',
-                uri: 'urn:redocly:realm:ui:search:aiAssistantTriggerButton',
-                method: 'ai_trigger_button',
-            },
+            Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('aiAssistantTriggerButton', 'search')), { method: 'ai_trigger_button' }),
         ]);
     };
     const handleClose = () => {

package/lib/components/Buttons/EditPageButton.js

@@ -9,12 +9,13 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
 const Button_1 = require("../../components/Button/Button");
+const utils_1 = require("../../core/utils");
 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" },
-        react_1.default.createElement(Button_1.Button, { to: to, external: true, variant: "ghost", size: "small", icon: react_1.default.createElement(EditIcon_1.EditIcon, null), onClick: () => telemetry.sendEditPageLinkClickedMessage(), "data-translation-key": "markdown.editPage.text" }, translate('markdown.editPage.text', 'Edit'))));
+        react_1.default.createElement(Button_1.Button, { to: to, external: true, variant: "ghost", size: "small", icon: react_1.default.createElement(EditIcon_1.EditIcon, null), onClick: () => telemetry.sendPageEditClickedMessage([(0, utils_1.getBaseDataAttributes)('pageEdit', 'button')]), "data-translation-key": "markdown.editPage.text" }, translate('markdown.editPage.text', 'Edit'))));
 }
 const EditPageButtonWrapper = styled_components_1.default.div `
   margin-left: auto;

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

@@ -23,7 +23,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();
+            telemetry.sendCatalogItemClickedMessage([(0, utils_1.getBaseDataAttributes)('catalogItem', 'card')]);
         } },
         react_1.default.createElement(CardContent, null,
             react_1.default.createElement(CardHeader, null,

package/lib/components/CatalogClassic/CatalogClassicActions.js

@@ -61,7 +61,9 @@ 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();
+                telemetry.sendCatalogActionsClickedMessage([
+                    (0, utils_1.getBaseDataAttributes)('catalogActions', 'button'),
+                ]);
             }, "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

@@ -64,7 +64,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() },
+        React.createElement(StyledCard, { "data-component-name": "CatalogClassic/CatalogClassicCard", onClick: () => telemetry.sendCatalogItemClickedMessage([(0, utils_1.getBaseDataAttributes)('catalogItem', 'card')]) },
             React.createElement(CardContent, null,
                 React.createElement(CardTitleWrapper, null,
                     React.createElement(CardTitle, null,

package/lib/components/CatalogClassic/CatalogClassicInfoBlock.js

@@ -10,6 +10,7 @@ const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 const Tag_1 = require("../../components/Tag/Tag");
 const Link_1 = require("../../components/Link/Link");
+const utils_2 = require("../../core/utils");
 function CatalogClassicInfoBlock(props) {
     var _a, _b, _c, _d;
     const scorecardBadge = ((_a = props.metadata) === null || _a === void 0 ? void 0 : _a.scorecardLevel) ? (react_1.default.createElement(ScorecardBadge, { level: props.metadata.scorecardLevel, slug: (_b = props.metadata) === null || _b === void 0 ? void 0 : _b.scoreCardSlug, colorVariable: (0, utils_1.getScorecardColorVariable)(((_c = props.metadata) === null || _c === void 0 ? void 0 : _c.scorecardLevelIdx) || 0, Object.keys(((_d = props.metadata) === null || _d === void 0 ? void 0 : _d.scorecardLevels) || {}).length) })) : null;
@@ -21,7 +22,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.sendScorecardLinkClickedMessage([{ object: 'link', action: 'click' }]), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
+        react_1.default.createElement(Tag_1.Tag, { onClick: () => telemetry.sendScorecardLinkClickedMessage([(0, utils_2.getBaseDataAttributes)('scorecardLink', 'tag')]), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
 }
 const CatalogInfoBlockWrapper = styled_components_1.default.div `
   position: relative;

package/lib/components/Feedback/ReportDialog.js

@@ -19,6 +19,7 @@ const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../core/hooks");
 const Comment_1 = require("../../components/Feedback/Comment");
 const Portal_1 = require("../../components/Portal/Portal");
+const utils_1 = require("../../core/utils");
 function ReportDialog({ location, settings, onSubmit, onCancel, submitFeedback, lang, }) {
     const { label } = settings;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -34,7 +35,9 @@ function ReportDialog({ location, settings, onSubmit, onCancel, submitFeedback,
                         path: pathname,
                         lang,
                     });
-                    telemetry.sendCodeSnippetReportedMessage();
+                    telemetry.sendCodeSnippetReportedMessage([
+                        (0, utils_1.getBaseDataAttributes)('codeSnippet', 'markdocTag'),
+                    ]);
                     onSubmit();
                 }), isDialog: true, onCancel: onCancel }))));
 }

package/lib/components/Filter/FilterCheckboxes.js

@@ -24,7 +24,9 @@ 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.sendFilterCheckboxToggledMessage([{ object: 'checkbox', id }]);
+                    telemetry.sendFilterCheckboxToggledMessage([
+                        (0, utils_1.getBaseDataAttributes)('filterId', 'checkbox'),
+                    ]);
                 } },
                 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.sendFooterItemClickedMessage(), "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([(0, utils_1.getBaseDataAttributes)('footerItem', 'footer')]), "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

@@ -27,7 +27,9 @@ function LanguagePicker(props) {
         languageInsensitive: true,
         onAction: () => {
             props.onChangeLanguage(locale.code);
-            telemetry.sendLanguagePickerLocaleChangedMessage([{ object: 'locale', locale: locale.code }]);
+            telemetry.sendLanguagePickerChangedMessage([
+                ...(0, utils_1.generateBeforeAfterContext)('languagePicker', 'dropdown', { locale: currentLocale.code }, { 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

@@ -20,6 +20,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Link_1 = require("../../components/Link/Link");
 const Image_1 = require("../../components/Image/Image");
+const utils_1 = require("../../core/utils");
 function Logo(_a) {
     var { config, className } = _a, otherProps = __rest(_a, ["config", "className"]);
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -28,7 +29,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() }, 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([(0, utils_1.getBaseDataAttributes)('logo', 'navbar')]) }, image)) : (image)));
 }
 const LogoWrapper = styled_components_1.default.div `
   max-width: var(--logo-max-width);

package/lib/components/Menu/MenuContainer.js

@@ -71,6 +71,7 @@ const MenuContainerComponent = styled_components_1.default.div.attrs({
   animation-timing-function: ease;
   position: relative;
   overflow-y: auto;
+  scrollbar-gutter: stable;
   flex-grow: ${({ $growContent }) => ($growContent ? 1 : 0)};
   padding-top: var(--menu-container-padding-top);
   display: ${({ $hidden }) => ($hidden ? 'none' : 'block')};

package/lib/components/Menu/MenuItem.js

@@ -66,11 +66,7 @@ function MenuItem(props) {
     const hasHttpTag = !!item.httpVerb || type === constants_1.MenuItemType.Operation;
     const handleOnClick = () => {
         telemetry.sendSidebarItemClickedMessage([
-            {
-                object: 'sidebar_item',
-                label: item.label,
-                type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
-            },
+            Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('sidebarItem', 'sidebar')), { label: item.label, type: item.type === 'link' || item.type === 'group' ? item.type : undefined }),
         ]);
         onClick === null || onClick === void 0 ? void 0 : onClick();
         if (isNested) {
@@ -95,7 +91,7 @@ function MenuItem(props) {
             react_1.default.createElement(MenuItemLabel, null,
                 (_a = item.badges) === null || _a === void 0 ? void 0 :
                     _a.filter(({ position }) => position === 'before').map(({ name, color, icon }) => (react_1.default.createElement(SidebarTag, { color: isDirectColorValue(color) ? undefined : color, $bgColor: isDirectColorValue(color) ? color : undefined, key: name, icon: icon && react_1.default.createElement(BadgeIcon, { icon: icon }) }, name))),
-                react_1.default.createElement("span", null, translate(item.labelTranslationKey, item.label)),
+                react_1.default.createElement(MenuItemLabelText, { $active: item.active, $isSeparator: isSeparator, "data-text": translate(item.labelTranslationKey, item.label) }, translate(item.labelTranslationKey, item.label)),
                 (_b = item.badges) === null || _b === void 0 ? void 0 :
                     _b.filter(({ position }) => position !== 'before').map(({ name, color, icon }) => (react_1.default.createElement(SidebarTag, { color: isDirectColorValue(color) ? undefined : color, $bgColor: isDirectColorValue(color) ? color : undefined, key: name, icon: icon && react_1.default.createElement(BadgeIcon, { icon: icon }) }, name))),
                 item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "var(--menu-item-external-icon-size)" }) : null),
@@ -214,7 +210,6 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
     (0, styled_components_1.css) `
       color: ${$deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
-      font-weight: var(--menu-item-font-weight-active);
 
       ${ChevronDownIcon_1.ChevronDownIcon} path {
         fill: var(--menu-item-color-active);
@@ -281,6 +276,25 @@ const MenuItemLabel = styled_components_1.default.span `
     margin-right: var(--spacing-xxs);
   }
 `;
+const MenuItemLabelText = styled_components_1.default.span `
+  display: inline-block;
+  max-width: 100%;
+  font-weight: var(--menu-item-font-weight);
+
+  &::before {
+    content: attr(data-text);
+    display: block;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    font-weight: ${({ $isSeparator }) => $isSeparator ? 'var(--menu-item-font-weight)' : 'var(--menu-item-font-weight-active)'};
+  }
+
+  ${({ $active }) => $active &&
+    (0, styled_components_1.css) `
+      font-weight: var(--menu-item-font-weight-active);
+    `}
+`;
 const SidebarTag = (0, styled_components_1.default)(Tag_1.Tag) `
   ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`} /* for backward compatibility */
   margin-left: 0;

package/lib/components/Navbar/Navbar.js

@@ -47,11 +47,15 @@ function Navbar({ className }) {
             react_1.default.createElement(MobileMenuButton, { variant: "text", "data-testid": "mobile-menu-button", onClick: isOpen
                     ? () => {
                         closeMobileMenu();
-                        telemetry.sendMobileMenuButtonCloseClickedMessage();
+                        telemetry.sendMobileMenuClosedMessage([
+                            (0, utils_1.getBaseDataAttributes)('mobileMenuClose', 'button'),
+                        ]);
                     }
                     : () => {
                         openMobileMenu();
-                        telemetry.sendMobileMenuButtonOpenClickedMessage();
+                        telemetry.sendMobileMenuOpenedMessage([
+                            (0, utils_1.getBaseDataAttributes)('mobileMenuOpen', 'button'),
+                        ]);
                     }, 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,9 @@ function NavbarItem({ navItem, className }) {
     const normalizedPath = (item.link ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
     const pathWithPathPrefix = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
     const isActive = (0, utils_1.removeTrailingSlash)(pathname) === (0, utils_1.removeTrailingSlash)(pathWithPathPrefix);
-    const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, $active: isActive, className: className, onClick: () => telemetry.sendNavbarMenuItemClickedMessage([{ object: 'menu_item', 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([
+            Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('navbarItem', 'navbar')), { 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

@@ -141,15 +141,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
         return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, innerRef: innerRef, onClick: () => {
                 addSearchHistoryItem(query);
                 telemetry.sendSearchResultClickedMessage([
-                    {
-                        object: 'search',
-                        query: query,
-                        url: item.document.url,
-                        totalResults: results.length.toString(),
-                        index: index.toString(),
-                        searchEngine: mode,
-                        searchSessionId,
-                    },
+                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchResultItem', 'search', item.document.url)), { query: query, totalResults: results.length.toString(), index: index.toString(), searchEngine: mode, searchSessionId }),
                 ]);
                 onClose();
             } }));
@@ -200,12 +192,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                         aiSearch.askQuestion(query);
                                     }
                                     telemetry.sendSearchAiOpenedMessage([
-                                        {
-                                            id: 'searchAiButton',
-                                            object: 'search',
-                                            uri: 'urn:redocly:realm:ui:search:searchAiButton',
-                                            method: 'ai_search_button',
-                                        },
+                                        Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchAiButton', 'search')), { method: 'ai_search_button' }),
                                     ]);
                                 } }, translate('search.ai.button', 'Search with AI'))) : null,
                             showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle })))))) : (react_1.default.createElement(AiDialogHeaderWrapper, null,
@@ -235,12 +222,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                     aiSearch.askQuestion(query);
                                 }
                                 telemetry.sendSearchAiOpenedMessage([
-                                    {
-                                        id: 'searchAiInput',
-                                        object: 'search',
-                                        uri: 'urn:redocly:realm:ui:search:searchAiInput',
-                                        method: 'ai_search_input',
-                                    },
+                                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchAiInput', 'search')), { method: 'ai_search_input' }),
                                 ]);
                             }, onKeyDown: (e) => {
                                 if (e.key === 'Enter') {
@@ -249,12 +231,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                         aiSearch.askQuestion(query);
                                     }
                                     telemetry.sendSearchAiOpenedMessage([
-                                        {
-                                            id: 'searchAiInput',
-                                            object: 'search',
-                                            uri: 'urn:redocly:realm:ui:search:searchAiInput',
-                                            method: 'ai_search_input',
-                                        },
+                                        Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchAiInput', 'search')), { method: 'ai_search_input' }),
                                     ]);
                                 }
                             }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
@@ -293,12 +270,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                             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.sendSearchRecentClickedMessage([
-                                        {
-                                            object: 'search',
-                                            query,
-                                            index: index.toString(),
-                                            searchSessionId,
-                                        },
+                                        Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchRecentItem', 'search')), { query, index: index.toString(), searchSessionId }),
                                     ]);
                                     setQuery(query);
                                     focusSearchInput();

package/lib/components/Search/SearchInput.js

@@ -12,6 +12,7 @@ const Button_1 = require("../../components/Button/Button");
 const hooks_1 = require("../../core/hooks");
 const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
 const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
+const utils_1 = require("../../core/utils");
 function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton, inputRef, onReturn, onSubmit, className, }) {
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
@@ -27,7 +28,9 @@ function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton
     const handleOnReset = () => {
         onChange('');
         addSearchHistoryItem(value);
-        telemetry.sendSearchInputResetButtonClickedMessage();
+        telemetry.sendSearchInputResetClickedMessage([
+            (0, utils_1.getBaseDataAttributes)('searchInputReset', 'search'),
+        ]);
     };
     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

@@ -54,7 +54,9 @@ function SearchRecent({ onSelect, className }) {
     const handleOnRemove = (e, item) => {
         e.stopPropagation();
         removeSearchHistoryItem(item);
-        telemetry.sendSearchRecentRemoveButtonClickedMessage();
+        telemetry.sendSearchRecentRemoveClickedMessage([
+            (0, utils_1.getBaseDataAttributes)('searchRecentRemove', 'search'),
+        ]);
     };
     const handleKeyDown = (e, item, index) => {
         if (e.key === 'Enter') {

package/lib/components/SidebarActions/SidebarActions.js

@@ -14,6 +14,7 @@ const SidePanelCloseIcon_1 = require("../../icons/SidePanelCloseIcon/SidePanelCl
 const SidePanelOpenIcon_1 = require("../../icons/SidePanelOpenIcon/SidePanelOpenIcon");
 const styled_1 = require("../../components/SidebarActions/styled");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const utils_1 = require("../../core/utils");
 const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSidebar, isApiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
     const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -24,16 +25,22 @@ const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSi
                 : translate('sidebar.actions.hide', 'Hide sidebar') }, react_1.default.createElement(Button_1.Button, { onClick: () => {
                 onChangeCollapseSidebarClick();
                 if (collapsedSidebar) {
-                    telemetry.sendSidebarItemExpandedMessage();
+                    telemetry.sendSidebarExpandedMessage([
+                        (0, utils_1.getBaseDataAttributes)('sidebarExpand', 'button'),
+                    ]);
                 }
                 else {
-                    telemetry.sendSidebarItemCollapsedMessage();
+                    telemetry.sendSidebarCollapsedMessage([
+                        (0, utils_1.getBaseDataAttributes)('sidebarCollapse', 'button'),
+                    ]);
                 }
             }, size: "small", variant: "outlined", "aria-label": collapsedSidebar ? 'Show sidebar' : 'Hide sidebar', 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();
+                    telemetry.sendChangeLayoutClickedMessage([
+                        (0, utils_1.getBaseDataAttributes)('changeLayout', 'button'),
+                    ]);
                 } }))),
         !collapsedSidebar && requestAccessButton));
 };

package/lib/components/TableOfContent/TableOfContent.js

@@ -65,7 +65,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.sendTocItemClickedMessage();
+                        telemetry.sendTocItemClickedMessage([(0, utils_1.getBaseDataAttributes)('tocItem', 'toc')]);
                         handleHeadingClick(heading.id);
                     } }));
             }))));

package/lib/components/UserMenu/LoginButton.js

@@ -7,12 +7,13 @@ exports.LoginButton = LoginButton;
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
+const utils_1 = require("../../core/utils");
 function LoginButton({ href, className, variant = 'primary', size = 'medium', label, labelTranslationKey = 'userMenu.login', 'data-component-name': componentName = 'UserMenu/LoginButton', }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
     const buttonLabel = label || translate(labelTranslationKey, 'Login');
     return (react_1.default.createElement("span", { "data-component-name": componentName, className: className },
-        react_1.default.createElement(Button_1.Button, { "data-translation-key": label ? undefined : labelTranslationKey, to: href, languageInsensitive: true, onClick: () => telemetry.sendLoginButtonClickedMessage(), "data-testid": "login-btn", extraClass: className, variant: variant, size: size }, buttonLabel)));
+        react_1.default.createElement(Button_1.Button, { "data-translation-key": label ? undefined : labelTranslationKey, to: href, languageInsensitive: true, onClick: () => telemetry.sendLoginClickedMessage([(0, utils_1.getBaseDataAttributes)('login', 'button')]), "data-testid": "login-btn", extraClass: className, variant: variant, size: size }, buttonLabel)));
 }
 //# sourceMappingURL=LoginButton.js.map

package/lib/components/UserMenu/LogoutMenuItem.js

@@ -8,13 +8,14 @@ const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../core/hooks");
 const LogoutIcon_1 = require("../../icons/LogoutIcon/LogoutIcon");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const utils_1 = require("../../core/utils");
 function LogoutMenuItem({ iconOnly, className }) {
     const { useTranslate, useTelemetry, useUserMenu } = (0, hooks_1.useThemeHooks)();
     const { handleLogout } = useUserMenu();
     const telemetry = useTelemetry();
     const { translate } = useTranslate();
     const handleClick = () => {
-        telemetry.sendLogoutMenuItemClickedMessage();
+        telemetry.sendLogoutClickedMessage([(0, utils_1.getBaseDataAttributes)('logoutItem', 'userMenu')]);
         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

@@ -10,6 +10,7 @@ const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
 const use_theme_hooks_1 = require("../use-theme-hooks");
 const use_theme_config_1 = require("../use-theme-config");
 const contexts_1 = require("../../contexts");
+const utils_1 = require("../../utils");
 function useSearchDialog() {
     var _a;
     var _b;
@@ -25,7 +26,9 @@ function useSearchDialog() {
         if (hotKeys) {
             (0, hotkeys_js_1.default)(hotKeys, (ev) => {
                 setIsOpen(true);
-                telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'shortcut' }]);
+                telemetry.sendSearchOpenedMessage([
+                    Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchDialogId', 'search')), { method: 'shortcut' }),
+                ]);
                 ev.preventDefault();
             });
             return () => hotkeys_js_1.default.unbind(hotKeys);
@@ -33,7 +36,9 @@ function useSearchDialog() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hotKeys]);
     const onOpen = (0, react_1.useCallback)(function () {
-        telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'click' }]);
+        telemetry.sendSearchOpenedMessage([
+            Object.assign(Object.assign({}, (0, utils_1.getBaseDataAttributes)('searchDialogId', 'search')), { method: 'click' }),
+        ]);
         setIsOpen(true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

package/lib/core/hooks/use-banner-telemetry.js

@@ -14,6 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBannerTelemetry = useBannerTelemetry;
 const react_1 = require("react");
 const use_theme_hooks_1 = require("./use-theme-hooks");
+const get_base_data_attributes_1 = require("../utils/telemetry/get-base-data-attributes");
 const noop = () => { };
 const noopLink = (_href) => { };
 function useBannerTelemetry(displayBanner) {
@@ -27,17 +28,7 @@ function useBannerTelemetry(displayBanner) {
                 sendBannerLinkClickedMessage: noopLink,
             };
         }
-        const bannerUri = 'urn:redocly:realm:ui:banner:banner-id';
-        const payload = {
-            id: 'banner-id',
-            object: 'banner',
-            uri: bannerUri,
-            trackingId: displayBanner.trackingId,
-            hash: displayBanner.hash,
-            color: displayBanner.color,
-            target: displayBanner.target,
-            dismissible: displayBanner.dismissible,
-        };
+        const payload = Object.assign(Object.assign({}, (0, get_base_data_attributes_1.getBaseDataAttributes)('bannerId', 'banner')), { trackingId: displayBanner.trackingId, hash: displayBanner.hash, color: displayBanner.color, target: displayBanner.target, dismissible: displayBanner.dismissible });
         return {
             sendBannerViewedMessage: () => {
                 telemetry.sendBannerViewedMessage([payload]);

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

@@ -7,6 +7,7 @@ const use_theme_config_1 = require("./use-theme-config");
 const use_theme_hooks_1 = require("./use-theme-hooks");
 const use_store_1 = require("./use-store");
 const constants_1 = require("../constants");
+const utils_1 = require("../utils");
 const COLOR_MODE_KEY = 'colorSchema';
 const colorModeStore = (0, use_store_1.createStore)({
     storageKey: COLOR_MODE_KEY,
@@ -36,7 +37,7 @@ const useColorSwitcher = () => {
             root.classList.remove('notransition');
         });
         telemetry.sendColorModeSwitchedMessage([
-            { object: 'color_mode', from: activeColorMode, to: newMode },
+            ...(0, utils_1.generateBeforeAfterContext)('colorMode', 'button', { mode: activeColorMode }, { mode: newMode }),
         ]);
         setActiveColorMode(newMode);
     };