@redocly/theme 0.61.1 → 0.62.0-custom.0

package/lib/markdoc/tags/login-button.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loginButton = void 0;
+exports.loginButton = {
+    schema: {
+        render: 'LoginButton',
+        attributes: {
+            variant: {
+                type: String,
+                default: 'primary',
+                matches: ['primary', 'secondary', 'outlined', 'text', 'link', 'ghost'],
+            },
+            size: {
+                type: String,
+                default: 'medium',
+                matches: ['small', 'medium', 'large'],
+            },
+            label: {
+                type: String,
+                description: 'Custom button label text. Overrides translation.',
+            },
+            labelTranslationKey: {
+                type: String,
+                default: 'userMenu.login',
+                description: 'Translation key for the button label.',
+            },
+        },
+        selfClosing: true,
+    },
+    tagName: 'login-button',
+};
+//# sourceMappingURL=login-button.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.61.1",
+  "version": "0.62.0-custom.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -29,9 +29,9 @@
     "@markdoc/markdoc": "0.5.2",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-router-dom": "^6.21.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^6.30.3",
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
   },
   "devDependencies": {
@@ -51,7 +51,7 @@
     "@vitest/coverage-v8": "4.0.10",
     "@vitest/ui": "3.2.4",
     "concurrently": "7.6.0",
-    "react-router-dom": "^6.21.1",
+    "react-router-dom": "^6.30.3",
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.7",
     "styled-components": "5.3.11",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.7.0"
+    "@redocly/realm-asyncapi-sdk": "0.9.0-next.0"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,14 +81,14 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.41.2"
+    "@redocly/config": "0.43.0-custom.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
     "ts:check": "tsc --noEmit --skipLibCheck",
     "clean": "rimraf lib",
     "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build": "npm run clean && npm run compile",
+    "build": "pnpm run clean && pnpm run compile",
     "test": "vitest run",
     "test:update": "vitest run --update",
     "test:watch": "vitest",

package/src/components/AsyncApiDocs/hooks/AfterAsyncApiChannelDescription.tsx

@@ -0,0 +1,10 @@
+// interface AfterAsyncApiChannelDescriptionProps {
+//   channel: any;
+// }
+
+// export function AfterAsyncApiChannelDescription(_props: AfterAsyncApiChannelDescriptionProps) {
+//   return null;
+// }
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export const AfterAsyncApiChannelDescription: any = null;

package/src/components/Badge/Badge.tsx

@@ -3,15 +3,23 @@ import styled, { css } from 'styled-components';
 
 import type { PropsWithChildren, JSX } from 'react';
 
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
+
 export type BadgeProps = PropsWithChildren<{
   deprecated?: boolean;
   color?: string;
   key?: string;
   className?: string;
+  icon?: string;
 }>;
 
-export function Badge(props: BadgeProps): JSX.Element {
-  return <BadgeComponent {...props} data-component-name="Badge/Badge" />;
+export function Badge({ icon, children, ...props }: BadgeProps): JSX.Element {
+  return (
+    <BadgeComponent {...props} data-component-name="Badge/Badge">
+      {icon ? <BadgeIcon icon={icon} /> : null}
+      {children}
+    </BadgeComponent>
+  );
 }
 
 const BadgeComponent = styled.span<BadgeProps>`
@@ -34,3 +42,11 @@ const BadgeComponent = styled.span<BadgeProps>`
       border-radius: var(--badge-deprecated-border-radius);
     `}
 `;
+
+const BadgeIcon = styled(GenericIcon)`
+  --icon-width: var(--font-size-sm);
+  --icon-height: var(--font-size-sm);
+  margin-right: var(--spacing-xxs);
+  flex-shrink: 0;
+  vertical-align: middle;
+`;

package/src/components/Banner/Banner.tsx

@@ -5,10 +5,13 @@ import type { BannerConfig } from '@redocly/config';
 import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { getNavbarElement } from '@redocly/theme/core/utils';
 import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
 
+const ANIMATION_DURATION = 0.4;
+
 type BannerColor = 'info' | 'success' | 'warning' | 'error';
 
 type BannerProps = {
@@ -67,6 +70,25 @@ export function Banner({ className }: BannerProps): JSX.Element | null {
 
     updateHeight();
 
+    if (window.location.hash) {
+      setTimeout(
+        () => {
+          const hash = window.location.hash;
+          const el = document.getElementById(hash.slice(1));
+          if (el) {
+            const navbar = getNavbarElement();
+            const navbarHeight = navbar?.getBoundingClientRect().height ?? 0;
+            const elementTop = el.getBoundingClientRect().top + window.scrollY;
+            const scrollPosition = elementTop - navbarHeight;
+            if (Math.abs(window.scrollY - scrollPosition) > 1) {
+              window.scrollTo({ top: scrollPosition });
+            }
+          }
+        },
+        ANIMATION_DURATION * 1000 + 100,
+      );
+    }
+
     const resizeObserver = new ResizeObserver(updateHeight);
     resizeObserver.observe(bannerElement);
 
@@ -154,7 +176,7 @@ const BannerWrapper = styled.div<{ $color?: BannerColor; $isVisible?: boolean }>
   width: 100%;
   z-index: var(--z-index-overlay);
   transform: ${({ $isVisible }) => ($isVisible ? 'translateY(0)' : 'translateY(-100%)')};
-  transition: transform 0.4s ease-out;
+  transition: transform ${ANIMATION_DURATION}s ease-out;
   ${({ $color }) =>
     $color &&
     css`

package/src/components/Banner/variables.ts

@@ -4,6 +4,7 @@ export const banner = css`
   /**
   * @tokens Banner
   */
+  --banner-height: 0px; /* default 0px so calc formulas work on page load */
   --banner-button-size: 22px;
   --banner-button-padding: 3px; // @presenter Spacing
   --banner-button-font-size: var(--font-size-base);

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import type { JSX } from 'react';
 
 import { Link } from '@redocly/theme/components/Link/Link';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { BreadcrumbIcon } from '@redocly/theme/components/Breadcrumbs/BreadcrumbIcon';
 import { trimText } from '@redocly/theme/core/utils';
 import { BREADCRUMB_MAX_LENGTH } from '@redocly/theme/core/constants';
@@ -48,9 +48,9 @@ export function Breadcrumb({ label, link, isActive, onClick, icon }: BreadcrumbP
   );
 
   return isTruncated ? (
-    <TooltipComponent tip={label} placement="bottom" width="max-content">
+    <Tooltip tip={label} placement="bottom">
       {breadcrumbContent}
-    </TooltipComponent>
+    </Tooltip>
   ) : (
     breadcrumbContent
   );

package/src/components/Breadcrumbs/BreadcrumbDropdown.tsx

@@ -8,7 +8,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 import { BREADCRUMB_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { BreadcrumbIcon } from '@redocly/theme/components/Breadcrumbs/BreadcrumbIcon';
@@ -39,9 +39,9 @@ export function BreadcrumbDropdown({
   const isTruncated = label.length > BREADCRUMB_MAX_LENGTH;
 
   const triggerContent = isTruncated ? (
-    <TooltipComponent tip={label} placement="bottom" width="max-content">
+    <Tooltip tip={label} placement="bottom">
       <TriggerContentWrapper>{children}</TriggerContentWrapper>
-    </TooltipComponent>
+    </Tooltip>
   ) : (
     children
   );
@@ -66,11 +66,14 @@ export function BreadcrumbDropdown({
                 key={index}
                 onAction={() => {
                   onItemClick?.(item, index);
-                  telemetry.sendBreadcrumbClickedMessage({
-                    link: item.link,
-                    position: index + 1,
-                    totalBreadcrumbs: items.length,
-                  });
+                  telemetry.sendBreadcrumbClickedMessage([
+                    {
+                      object: 'breadcrumb',
+                      link: item.link,
+                      position: index + 1,
+                      totalBreadcrumbs: items.length,
+                    },
+                  ]);
                 }}
                 $hasLink={hasLink}
                 to={item.link}

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -66,11 +66,14 @@ export function Breadcrumbs(props: {
           label={translatedLabel}
           items={siblingsWithActive}
           onItemClick={(item, itemIdx) =>
-            telemetry.sendBreadcrumbClickedMessage({
-              link: item.link,
-              position: itemIdx + 1,
-              totalBreadcrumbs: siblingsWithActive.length,
-            })
+            telemetry.sendBreadcrumbClickedMessage([
+              {
+                object: 'breadcrumb',
+                link: item.link,
+                position: itemIdx + 1,
+                totalBreadcrumbs: siblingsWithActive.length,
+              },
+            ])
           }
         >
           <BreadcrumbIcon icon={breadcrumb.icon} />
@@ -87,11 +90,14 @@ export function Breadcrumbs(props: {
         isActive={isActive}
         icon={breadcrumb.icon}
         onClick={() =>
-          telemetry.sendBreadcrumbClickedMessage({
-            link: breadcrumb.link,
-            position: idx + 1,
-            totalBreadcrumbs: breadcrumbs.length,
-          })
+          telemetry.sendBreadcrumbClickedMessage([
+            {
+              object: 'breadcrumb',
+              link: breadcrumb.link,
+              position: idx + 1,
+              totalBreadcrumbs: breadcrumbs.length,
+            },
+          ])
         }
       />
     );
@@ -112,11 +118,14 @@ export function Breadcrumbs(props: {
                 label="..."
                 items={collapsedBreadcrumbs}
                 onItemClick={(item, itemIdx) =>
-                  telemetry.sendBreadcrumbClickedMessage({
-                    link: item.link,
-                    position: itemIdx + 1,
-                    totalBreadcrumbs: breadcrumbs.length,
-                  })
+                  telemetry.sendBreadcrumbClickedMessage([
+                    {
+                      object: 'breadcrumb',
+                      link: item.link,
+                      position: itemIdx + 1,
+                      totalBreadcrumbs: breadcrumbs.length,
+                    },
+                  ])
                 }
               >
                 ...

package/src/components/Buttons/AIAssistantButton.tsx

@@ -77,9 +77,12 @@ export function AIAssistantButton() {
 
   const handleOpen = () => {
     setIsOpen(true);
-    telemetry.sendSearchAiOpenedMessage({
-      method: 'ai_trigger_button',
-    });
+    telemetry.sendSearchAiOpenedMessage([
+      {
+        object: 'search',
+        method: 'ai_trigger_button',
+      },
+    ]);
   };
 
   const handleClose = () => {
@@ -108,7 +111,7 @@ export function AIAssistantButton() {
 const StyledAIAssistantButton = styled(Button)<{ $inputType?: AIAssistantButtonType }>`
   position: fixed;
   bottom: var(--ai-assistant-button-bottom);
-  right: var(--ai-assistant-button-right);
+  right: calc(var(--ai-assistant-button-right) + var(--modal-scrollbar-width, 0px));
   ${({ $inputType }) =>
     $inputType === 'icon'
       ? `

package/src/components/Catalog/CatalogEntities.tsx

@@ -76,14 +76,16 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
 
   const onRowClick = (entity: BffCatalogEntity) => {
     if (searchQuery) {
-      telemetry.sendCatalogEntitiesListSearchResultClickedMessage({
-        id: entity.id,
-        object: 'catalog_entity',
-        uri: getEntityDetailsLink(entity),
-        query: searchQuery,
-        entityKey: entity.key,
-        entityType: entity.type,
-      });
+      telemetry.sendCatalogEntitiesListSearchResultClickedMessage([
+        {
+          id: entity.id,
+          object: 'catalog_entity',
+          uri: getEntityDetailsLink(entity),
+          query: searchQuery,
+          entityKey: entity.key,
+          entityType: entity.type,
+        },
+      ]);
     }
   };
 

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -20,7 +20,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntitySchema } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntitySchema';
 import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath';
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
-import { CatalogEntityHistorySidebar } from '@redocly/theme';
+import { CatalogEntityHistorySidebar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar';
 
 export type CatalogEntityProps = {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -7,8 +7,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
 import { transformRevisionsToVersionHistory } from '@redocly/theme/core/utils';
 import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';
-
-import { CatalogEntityVersionItem } from './CatalogEntityVersionItem';
+import { CatalogEntityVersionItem } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem';
 
 export type CatalogHistorySidebarProps = {
   entityKey: string;

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.tsx

@@ -2,7 +2,7 @@ import React, { JSX } from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
-import { CatalogTagsWithTooltip } from '@redocly/theme';
+import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.tsx

@@ -62,17 +62,19 @@ export function CatalogEntityRelationsTable({
 
   const onRowClick = (relatedEntity: BffCatalogRelatedEntity) => {
     if (searchQuery) {
-      telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage({
-        id: relatedEntity.id,
-        object: 'catalog_entity',
-        uri: getEntityDetailsLink(relatedEntity),
-        query: searchQuery,
-        entityKey: entity.key,
-        entityType: entity.type,
-        relationType: reverseRelationMap[relatedEntity.relationType],
-        relatedEntityKey: relatedEntity.key,
-        relatedEntityType: relatedEntity.type,
-      });
+      telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage([
+        {
+          id: relatedEntity.id,
+          object: 'catalog_entity',
+          uri: getEntityDetailsLink(relatedEntity),
+          query: searchQuery,
+          entityKey: entity.key,
+          entityType: entity.type,
+          relationType: reverseRelationMap[relatedEntity.relationType],
+          relatedEntityKey: relatedEntity.key,
+          relatedEntityType: relatedEntity.type,
+        },
+      ]);
     }
   };
 

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -52,11 +52,13 @@ export function CatalogEntitySchema({
             iconPosition="right"
             size="medium"
             onCopyClick={() =>
-              telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage({
-                id: entity.id,
-                object: 'catalog_entity',
-                uri: getEntityDetailsLink(entity),
-              })
+              telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage([
+                {
+                  id: entity.id,
+                  object: 'catalog_entity',
+                  uri: getEntityDetailsLink(entity),
+                },
+              ])
             }
           ></CopyButton>
         )}

package/src/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.tsx

@@ -102,13 +102,15 @@ export function CatalogFilterCheckboxes({
                 role="link"
                 onClick={() => {
                   filter.toggleOption(value);
-                  telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage({
-                    id: filter.property + '--' + value,
-                    object: 'checkbox',
-                    uri: window.location.href,
-                    category: filter.property,
-                    value: value,
-                  });
+                  telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                    {
+                      id: filter.property + '--' + value,
+                      object: 'checkbox',
+                      uri: window.location.href,
+                      category: filter.property,
+                      value: value,
+                    },
+                  ]);
                 }}
               >
                 <CheckboxIcon

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -10,8 +10,7 @@ import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTabl
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
 import { useCatalogEntityDetails } from '@redocly/theme/core/hooks';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
-
-import { Link } from '../../Link/Link';
+import { Link } from '@redocly/theme/components/Link/Link';
 
 export type BaseEntity = {
   id: string;

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
@@ -27,8 +27,12 @@ export function CatalogTagsWithTooltip({
     if (showPlaceholder) {
       return (
         <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          {/* eslint-disable-next-line theme/require-translate */}
-          <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
+          <Tag
+            variant="outline"
+            style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }}
+            color="grey"
+            // eslint-disable-next-line theme/require-translate
+          >
             N/A
           </Tag>
         </CatalogTagsWrapper>
@@ -53,7 +57,7 @@ export function CatalogTagsWithTooltip({
   const remainingCount = items.length - itemsToShow;
 
   return (
-    <TooltipComponent tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
+    <Tooltip tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
       <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
         {displayedItems.map((item, index) => (
           <Tag
@@ -70,7 +74,7 @@ export function CatalogTagsWithTooltip({
           +{remainingCount} {translate('catalog.tags.more', 'more')}
         </MoreTagsButton>
       </CatalogTagsWrapper>
-    </TooltipComponent>
+    </Tooltip>
   );
 }
 

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -52,7 +52,9 @@ function ScorecardBadge(props: {
   return (
     <Link to={slug}>
       <Tag
-        onClick={() => telemetry.sendScorecardLinkClickedMessage({ action: 'click' })}
+        onClick={() =>
+          telemetry.sendScorecardLinkClickedMessage([{ object: 'link', action: 'click' }])
+        }
         withStatusDot
         statusDotColor={`var(${colorVariable})`}
       >

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -6,7 +6,7 @@ import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlo
 
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
-import { TooltipWrapper } from '@redocly/theme/components/Tooltip/TooltipWrapper';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { DeselectIcon } from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
 import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
@@ -86,9 +86,10 @@ export function CodeBlockControls({
       <ControlsWrapper>
         {dropdown && <CodeBlockDropdown {...dropdown} />}
         {report && !report.hidden && !report?.props?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.report.tooltipText', 'Report a problem')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -99,13 +100,14 @@ export function CodeBlockControls({
             >
               {controlsType != 'icon' && (report.props?.buttonText || 'Report')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.expand.tooltipText', 'Expand all')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -116,13 +118,14 @@ export function CodeBlockControls({
             >
               {controlsType !== 'icon' && (expand?.label || 'Expand all')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {collapse && !codeSnippet?.collapse?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.collapse.tooltipText', 'Collapse all')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -133,7 +136,7 @@ export function CodeBlockControls({
             >
               {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {select ? (
@@ -161,9 +164,10 @@ export function CodeBlockControls({
         ) : null}
 
         {copy && !codeSnippet?.copy?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.copy.tooltipText', 'Copy to clipboard')}
             placement="top"
+            arrowPosition="right"
           >
             <StyledCopyButton
               data={copy.data}
@@ -178,11 +182,13 @@ export function CodeBlockControls({
                 if (copy?.onClick) {
                   copy?.onClick?.();
                 } else {
-                  telemetry.sendCopyCodeSnippetClickedMessage({ snippetType: 'copy' });
+                  telemetry.sendCopyCodeSnippetClickedMessage([
+                    { object: 'code_snippet', snippetType: 'copy' },
+                  ]);
                 }
               }}
             />
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
       </ControlsWrapper>
     </>

package/src/components/Filter/FilterCheckboxes.tsx

@@ -36,7 +36,7 @@ export function FilterCheckboxes({
               role="link"
               onClick={() => {
                 filter.toggleOption(value);
-                telemetry.sendFilterCheckboxToggledMessage({ id });
+                telemetry.sendFilterCheckboxToggledMessage([{ object: 'checkbox', id }]);
               }}
             >
               <CheckboxIcon