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

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

@@ -9,6 +9,7 @@ type BreadcrumbDropdownProps = {
     })[];
     onItemClick?: (item: BreadcrumbItem, index: number) => void;
     className?: string;
+    withChevron?: boolean;
 };
-export declare function BreadcrumbDropdown({ children, label, items, onItemClick, className }: BreadcrumbDropdownProps): JSX.Element | null;
+export declare function BreadcrumbDropdown({ children, label, items, onItemClick, className, withChevron }: BreadcrumbDropdownProps): JSX.Element | null;
 export {};

package/lib/components/Breadcrumbs/BreadcrumbDropdown.js

@@ -47,19 +47,23 @@ const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 const constants_1 = require("../../core/constants");
 const BreadcrumbIcon_1 = require("../../components/Breadcrumbs/BreadcrumbIcon");
-function BreadcrumbDropdown({ children, label, items, onItemClick, className, }) {
+const utils_1 = require("../../core/utils");
+function BreadcrumbDropdown({ children, label, items, onItemClick, className, withChevron, }) {
     const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { translate } = useTranslate();
+    const [isOpen, setIsOpen] = react_1.default.useState(false);
     if (!items || items.length === 0) {
         return null;
     }
     const isTruncated = label.length > constants_1.BREADCRUMB_MAX_LENGTH;
     const triggerContent = isTruncated ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "bottom" },
         react_1.default.createElement(TriggerContentWrapper, null, children))) : (children);
-    const trigger = react_1.default.createElement(StyledDropdownTrigger, null, triggerContent);
+    const trigger = (react_1.default.createElement(StyledDropdownTrigger, null,
+        triggerContent,
+        withChevron && react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: isOpen ? 'chevron-up' : 'chevron-down' })));
     return (react_1.default.createElement(BreadcrumbDropdownWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbDropdown", className: className, "data-testid": "breadcrumb-dropdown" },
-        react_1.default.createElement(Dropdown_1.Dropdown, { trigger: trigger, closeOnClick: true },
+        react_1.default.createElement(Dropdown_1.Dropdown, { trigger: trigger, closeOnClick: true, onOpen: () => setIsOpen(true), onClose: () => setIsOpen(false) },
             react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item, index) => {
                 const isActive = Boolean(item === null || item === void 0 ? void 0 : item.isActive);
                 const hasLink = Boolean(item.link);
@@ -67,12 +71,7 @@ function BreadcrumbDropdown({ children, label, items, onItemClick, className, })
                 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 },
@@ -101,7 +100,7 @@ const StyledDropdownTrigger = styled_components_1.default.button `
     background-color: var(--breadcrumbs-background-color-hover);
   }
 
-  &:focus {
+  &:focus-visible {
     box-shadow: var(--breadcrumbs-box-shadow-focus);
     outline: none;
   }

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -12,7 +12,6 @@ const BreadcrumbDropdown_1 = require("../../components/Breadcrumbs/BreadcrumbDro
 const BreadcrumbIcon_1 = require("../../components/Breadcrumbs/BreadcrumbIcon");
 const utils_1 = require("../../core/utils");
 const constants_1 = require("../../core/constants");
-const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function Breadcrumbs(props) {
     const { useBreadcrumbs, useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { breadcrumbs: fileBreadcrumbs, currentItemSiblings } = useBreadcrumbs();
@@ -46,25 +45,14 @@ function Breadcrumbs(props) {
                 ...currentItemSiblings,
             ];
             const translatedLabel = translate(breadcrumb.labelTranslationKey, breadcrumb.label);
-            return (react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: translatedLabel, items: siblingsWithActive, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage([
-                    {
-                        object: 'breadcrumb',
-                        link: item.link,
-                        position: itemIdx + 1,
-                        totalBreadcrumbs: siblingsWithActive.length,
-                    },
+            return (react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: translatedLabel, items: siblingsWithActive, withChevron: true, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage([
+                    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),
-                react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: "chevron-down" })));
+                (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 }) => {
@@ -76,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/Dropdown/Dropdown.d.ts

@@ -12,6 +12,7 @@ export type DropdownProps = PropsWithChildren<{
     withArrow?: boolean;
     onClick?: (event: React.UIEvent) => void;
     onClose?: () => void;
+    onOpen?: () => void;
 }>;
 export declare const Dropdown: React.ForwardRefExoticComponent<{
     trigger: React.ReactNode;
@@ -25,6 +26,7 @@ export declare const Dropdown: React.ForwardRefExoticComponent<{
     withArrow?: boolean;
     onClick?: (event: React.UIEvent) => void;
     onClose?: () => void;
+    onOpen?: () => void;
 } & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Dropdown/Dropdown.js

@@ -42,11 +42,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
 const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
-exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, onClick, onClose, }, ref) => {
+exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, onClick, onClose, onOpen, }, ref) => {
     const dropdownRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, hooks_1.useControlledState)(false, active);
     const handleOpen = () => {
         setIsOpen(true);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     };
     const handleClose = () => {
         setIsOpen(false);
@@ -58,7 +59,12 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
     const handleToggle = (event) => {
         event.stopPropagation();
         event.preventDefault();
-        setIsOpen(!isOpen);
+        if (isOpen) {
+            handleClose();
+        }
+        else {
+            handleOpen();
+        }
     };
     const handleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {

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/SearchAiMessage.js

@@ -41,6 +41,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const types_1 = require("../../core/types");
 const constants_1 = require("../../core/constants");
+const types_2 = require("../../core/types");
 const Link_1 = require("../../components/Link/Link");
 const Tag_1 = require("../../components/Tag/Tag");
 const constants_2 = require("../../core/constants");
@@ -56,11 +57,28 @@ function MarkdownSegment({ text }) {
     const markdown = useMarkdownText(text);
     return react_1.default.createElement(ResponseText, { as: "div", children: markdown, "data-testid": "response-text" });
 }
-function getToolCallDisplayText(toolName) {
+// The codemode `execute` tool passes a human-readable `description` of what its code
+// does; show that instead of a generic "Executing execute..." label.
+function getExecuteDescription(args) {
+    if (args && typeof args === 'object' && 'description' in args) {
+        const { description } = args;
+        if (typeof description === 'string' && description.trim().length > 0) {
+            return description.trim();
+        }
+    }
+    return undefined;
+}
+function getToolCallDisplayText(toolCall) {
     var _a;
-    return ((_a = constants_1.TOOL_CALL_DISPLAY_TEXT[toolName]) !== null && _a !== void 0 ? _a : {
-        inProgressText: `Executing ${toolName}...`,
-        completedText: `${toolName} executed`,
+    if (toolCall.name === types_2.ToolCallName.Execute) {
+        const description = getExecuteDescription(toolCall.args);
+        if (description) {
+            return { inProgressText: description, completedText: description };
+        }
+    }
+    return ((_a = constants_1.TOOL_CALL_DISPLAY_TEXT[toolCall.name]) !== null && _a !== void 0 ? _a : {
+        inProgressText: `Executing ${toolCall.name}...`,
+        completedText: `${toolCall.name} executed`,
     });
 }
 function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, toolCalls = [], contentSegments = [{ type: 'text', text: content }], }) {
@@ -111,7 +129,7 @@ function SearchAiMessageComponent({ role, content, isThinking, resources, classN
                 contentSegments.map((segment, index) => {
                     if (segment.type === 'tool') {
                         const toolCallCompleted = Boolean(segment.toolCall.result);
-                        const { inProgressText, completedText } = getToolCallDisplayText(segment.toolCall.name);
+                        const { inProgressText, completedText } = getToolCallDisplayText(segment.toolCall);
                         const toolCallDisplayText = toolCallCompleted ? completedText : inProgressText;
                         return (react_1.default.createElement(ToolCallsInfoWrapper, { key: `tool-${index}`, "data-testid": "tool-calls-info" },
                             react_1.default.createElement(ToolCallInfoItem, 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));
 };