@redocly/theme 0.54.0-next.6 → 0.54.0

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

@@ -4,16 +4,16 @@ exports.useProductPicker = useProductPicker;
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../core/hooks");
 function useProductPicker() {
-    const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = (0, hooks_1.useThemeHooks)();
+    const { useCurrentProduct, useProducts, useOtelTelemetry, useLoadAndNavigate } = (0, hooks_1.useThemeHooks)();
     const currentProduct = useCurrentProduct();
     const products = useProducts();
-    const telemetry = useTelemetry();
+    const otelTelemetry = useOtelTelemetry();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const loadAndNavigate = useLoadAndNavigate();
     function setProduct(product) {
         if (!product)
             return;
-        telemetry.send('product_picked', { product: product.slug });
+        otelTelemetry.send({ type: 'product.picked', payload: { product: product.slug } });
         loadAndNavigate({ navigate, to: product.link });
     }
     return {

package/lib/core/types/hooks.d.ts

@@ -131,5 +131,5 @@ export type L10nConfig = {
         name: string;
     }[];
 };
-type TelemetryEvent = 'search_opened' | 'client_error_caught' | 'breadcrumb_clicked' | 'color_mode_switched' | 'sidebar_item_clicked' | 'sidebar_item_expanded' | 'sidebar_item_collapsed' | 'edit_page_link_clicked' | 'code_snippet_copied' | 'code_snippet_reported' | 'navbar_menu_item_clicked' | 'login_button_clicked' | 'login_provider_button_clicked' | 'logout_menu_item_clicked' | 'logo_clicked' | 'toc_item_clicked' | 'version_switched' | 'catalog_filter_changed' | 'catalog_item_clicked' | 'scorecard_link_clicked' | 'markdown_anchor_link_clicked' | 'back_to_catalog_button_clicked' | 'sidebar_drilldown_back_button_clicked' | 'footer_item_clicked' | 'request_api_access_button_clicked' | 'sidebar_samples_button_clicked' | 'change_layout_button_clicked' | 'version_picker_selection_change' | 'openapi_docs' | 'replay' | 'catalog_actions_button_clicked' | 'catalog_item_clicked' | 'filter_checkbox_toggled' | 'language_picker_locale_changed' | 'mobile_menu_button_close_clicked' | 'mobile_menu_button_open_clicked' | 'search_input_reset_button_clicked' | 'search_recent_remove_button_clicked' | 'product_picked';
+type TelemetryEvent = unknown;
 export {};

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewDetails' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description';
 export type Locale = {
     code: string;
     name: string;

package/lib/core/types/search.d.ts

@@ -5,8 +5,13 @@ export type OperationParameter = {
     name: string | string[];
     description: string | string[];
     place: string;
+    mediaType: string | undefined;
     path?: string[];
     deepLink?: string;
+    type: string;
+    required: boolean;
+    example: string | undefined;
+    enum: string[] | undefined;
 };
 export type SearchDocument = {
     id: string;
@@ -17,6 +22,7 @@ export type SearchDocument = {
     httpMethod?: string;
     httpPath?: string | string[];
     deprecated?: boolean;
+    security?: string[];
     parameters?: OperationParameter[];
     metadata?: Record<string, any>;
     version?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.54.0-next.6",
+  "version": "0.54.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -88,8 +88,8 @@
     "nprogress": "0.2.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.25.0",
-    "@redocly/realm-asyncapi-sdk": "0.0.1"
+    "@redocly/realm-asyncapi-sdk": "0.0.1",
+    "@redocly/config": "0.26.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -7,8 +7,8 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Breadcrumb } from '@redocly/theme/components/Breadcrumbs/Breadcrumb';
 
 export function Breadcrumbs(props: { className?: string }): JSX.Element | null {
-  const { useBreadcrumbs, useTelemetry } = useThemeHooks();
-  const telemetry = useTelemetry();
+  const { useBreadcrumbs, useOtelTelemetry } = useThemeHooks();
+  const otelTelemetry = useOtelTelemetry();
   const breadcrumbs = useBreadcrumbs();
 
   if (breadcrumbs.length === 0) {
@@ -26,10 +26,13 @@ export function Breadcrumbs(props: { className?: string }): JSX.Element | null {
               label={breadcrumb.label}
               isActive={isLast}
               onClick={() => {
-                telemetry.send('breadcrumb_clicked', {
-                  link: breadcrumb.link,
-                  position: idx + 1,
-                  total_breadcrumbs: breadcrumbs.length,
+                otelTelemetry.send({
+                  type: 'breadcrumb.clicked',
+                  payload: {
+                    link: breadcrumb.link,
+                    position: idx + 1,
+                    total_breadcrumbs: breadcrumbs.length,
+                  },
                 });
               }}
             />

package/src/components/Buttons/EditPageButton.tsx

@@ -12,16 +12,16 @@ export type EditPageButtonProps = {
 };
 
 export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
-  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { useTranslate, useOtelTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
 
   return (
     <EditPageButtonWrapper
       data-component-name="Buttons/EditPageButton"
       target="_blank"
       to={to}
-      onClick={() => telemetry.send('edit_page_link_clicked', {})}
+      onClick={() => otelTelemetry.send({ type: 'edit_page_link.clicked' })}
     >
       <ButtonIcon />
       <ButtonText data-translation-key="markdown.editPage.text">

package/src/components/CatalogClassic/CatalogClassicActions.tsx

@@ -29,9 +29,9 @@ export function CatalogClassicActions(props: CatalogClassicActionsProps): JSX.El
     }
   }
 
-  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { useTranslate, useOtelTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
 
   return (
     <CatalogActionsWrapper data-component-name="CatalogClassic/CatalogClassicActions">
@@ -42,7 +42,7 @@ export function CatalogClassicActions(props: CatalogClassicActionsProps): JSX.El
         iconPosition="left"
         onClick={() => {
           onOpenFilter();
-          telemetry.send('catalog_actions_button_clicked', {});
+          otelTelemetry.send({ type: 'catalog_actions_button.clicked' });
         }}
         data-translation-key="catalog.filters.title"
       >

package/src/components/CatalogClassic/CatalogClassicCard.tsx

@@ -16,14 +16,29 @@ export type CatalogClassicCardProps = {
   item: CatalogItem;
 };
 
+/**
+ * Strips HTML tags from a plain string.
+ */
+function stripHtmlTags(text: string): string {
+  if (!text) return '';
+
+  // This regex matches:
+  // - Opening tags: <tagname> or <tagname attributes>
+  // - Closing tags: </tagname>
+  // - Self-closing tags: <tagname/> or <tagname attributes/>
+  const htmlTagRegex = /<\/?[a-zA-Z][a-zA-Z0-9]*(?:\s[^>]*)?\/?>|<[a-zA-Z][a-zA-Z0-9]*\/>/g;
+
+  return text.replace(htmlTagRegex, '').trim();
+}
+
 export function CatalogClassicCard({ item }: CatalogClassicCardProps): JSX.Element {
-  const { useTelemetry } = useThemeHooks();
-  const telemetry = useTelemetry();
+  const { useOtelTelemetry } = useThemeHooks();
+  const otelTelemetry = useOtelTelemetry();
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard
         data-component-name="CatalogClassic/CatalogClassicCard"
-        onClick={() => telemetry.send('catalog_item_clicked', {})}
+        onClick={() => otelTelemetry.send({ type: 'catalog_item.clicked' })}
       >
         <CardContent>
           <CardTitleWrapper>
@@ -33,7 +48,7 @@ export function CatalogClassicCard({ item }: CatalogClassicCardProps): JSX.Eleme
           </CardTitleWrapper>
           <CardDescription>
             <CatalogClassicHighlight>
-              {item.summary ?? item.description ?? ''}
+              {stripHtmlTags(item.summary ?? item.description ?? '')}
             </CatalogClassicHighlight>
           </CardDescription>
         </CardContent>

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -46,12 +46,14 @@ function ScorecardBadge(props: {
   colorVariable: string;
 }): JSX.Element {
   const { level, slug, colorVariable } = props;
-  const { useTelemetry } = useThemeHooks();
-  const telemetry = useTelemetry();
+  const { useOtelTelemetry } = useThemeHooks();
+  const otelTelemetry = useOtelTelemetry();
   return (
     <Link to={slug}>
       <Tag
-        onClick={() => telemetry.send('scorecard_link_clicked', { action: 'click' })}
+        onClick={() =>
+          otelTelemetry.send({ type: 'scorecard_link.clicked', payload: { action: 'click' } })
+        }
         withStatusDot
         statusDotColor={`var(${colorVariable})`}
       >

package/src/components/CatalogClassic/CatalogClassicVirtualizedGroups.tsx

@@ -12,6 +12,7 @@ const GAP_SIZE = 32;
 const ESTIMATED_HEADER_HEIGHT = 43;
 const ESTIMATED_CARD_HEIGHT = 194 + GAP_SIZE;
 const CARD_MIN_WIDTH_VAR = '--catalog-classic-card-min-width';
+const VIRTUALIZATION_THRESHOLD = 20; // Don't virtualize below this number of items
 
 export type Group = {
   title: string;
@@ -40,14 +41,11 @@ export function CatalogClassicVirtualizedGroups({
     setIsClient(true);
   }, []);
 
-  useEffect(() => {
-    if (!size.width) {
-      return;
-    }
+  const totalItemCount = useMemo(() => {
+    return groups.reduce((total, group) => total + group.items.length, 0);
+  }, [groups]);
 
-    virtualizer.measure();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filters, filterTerm, size.width]);
+  const shouldVirtualize = totalItemCount >= VIRTUALIZATION_THRESHOLD;
 
   const columnCount = useMemo(() => {
     if (!size.width) return 4;
@@ -60,7 +58,7 @@ export function CatalogClassicVirtualizedGroups({
   }, [size.width]);
 
   const flatRows: VirtualRowData[] = useMemo(() => {
-    if (!isClient) {
+    if (!shouldVirtualize || !isClient) {
       return groups.flatMap((group) => [
         {
           type: 'header',
@@ -98,7 +96,7 @@ export function CatalogClassicVirtualizedGroups({
       }
     });
     return rows;
-  }, [groups, columnCount, isClient]);
+  }, [groups, columnCount, isClient, shouldVirtualize]);
 
   const virtualizer = useWindowVirtualizer({
     count: flatRows.length,
@@ -110,6 +108,15 @@ export function CatalogClassicVirtualizedGroups({
     overscan: 5,
   });
 
+  useEffect(() => {
+    if (!size.width || !shouldVirtualize) {
+      return;
+    }
+
+    virtualizer.measure();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters, filterTerm, size.width, shouldVirtualize]);
+
   if (!isClient) {
     return (
       <div ref={parentRef} data-component-name="CatalogClassic/CatalogClassicVirtualizedGroups">
@@ -124,13 +131,11 @@ export function CatalogClassicVirtualizedGroups({
           }
 
           return (
-            <SSRRow key={rowData.key}>
+            <SSRGridRow key={rowData.key}>
               {rowData.items.map((item) => (
-                <CardWrapper key={item.link}>
-                  <CatalogClassicCard item={item} />
-                </CardWrapper>
+                <CatalogClassicCard key={item.link} item={item} />
               ))}
-            </SSRRow>
+            </SSRGridRow>
           );
         })}
         <LoadingWrapper>
@@ -194,10 +199,10 @@ const SSRHeaderRow = styled.div`
   font-weight: var(--catalog-classic-separator-font-weight);
 `;
 
-const SSRRow = styled.div`
+const SSRGridRow = styled.div`
   width: 100%;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-classic-card-min-width), 1fr));
   gap: var(--catalog-classic-cards-group-gap, 32px);
   padding-bottom: var(--catalog-classic-cards-group-gap, 32px);
 `;
@@ -208,23 +213,12 @@ const HeaderRow = styled(SSRHeaderRow)`
   will-change: transform;
 `;
 
-const GridRow = styled.div`
+const GridRow = styled(SSRGridRow)`
   position: absolute;
   left: 0;
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-classic-card-min-width), 1fr));
-  gap: var(--catalog-classic-cards-group-gap, 32px);
-  padding-bottom: var(--catalog-classic-cards-group-gap, 32px);
   will-change: transform;
 `;
 
-const CardWrapper = styled.div`
-  flex: 1 0 var(--catalog-classic-card-min-width);
-  max-width: 100%;
-  min-width: var(--catalog-classic-card-min-width);
-`;
-
 const CatalogSeparatorLabel = styled.div`
   margin: var(--catalog-classic-separator-label-margin);
 `;

package/src/components/Feedback/ReportDialog.tsx

@@ -30,9 +30,9 @@ export function ReportDialog({
   lang,
 }: ReportDialogProps): JSX.Element {
   const { label } = settings;
-  const { useTelemetry } = useThemeHooks();
+  const { useOtelTelemetry } = useThemeHooks();
   const { pathname } = useLocation();
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
 
   return (
     <Portal>
@@ -47,7 +47,7 @@ export function ReportDialog({
               path: pathname,
               lang,
             });
-            telemetry.send('code_snippet_reported', {});
+            otelTelemetry.send({ type: 'code_snippet.reported' });
             onSubmit();
           }}
           isDialog={true}

package/src/components/Filter/FilterCheckboxes.tsx

@@ -14,9 +14,9 @@ import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 import { changeTextCasing } from '@redocly/theme/core/utils';
 
 export function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): JSX.Element {
-  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { useTranslate, useOtelTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
 
   return (
     <FilterCheckboxesWrapper data-component-name="Filter/FilterCheckboxes">
@@ -32,7 +32,7 @@ export function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): J
               role="link"
               onClick={() => {
                 filter.toggleOption(value);
-                telemetry.send('filter_checkbox_toggled', { id });
+                otelTelemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
               }}
             >
               <CheckboxIcon checked={filter.selectedOptions.has(value)} />

package/src/components/Footer/FooterItem.tsx

@@ -17,8 +17,8 @@ export type FooterItemProps = {
 };
 
 export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX.Element | null {
-  const { useTranslate, useTelemetry } = useThemeHooks();
-  const telemetry = useTelemetry();
+  const { useTranslate, useOtelTelemetry } = useThemeHooks();
+  const otelTelemetry = useOtelTelemetry();
   const { translate } = useTranslate();
 
   if (item.type === 'error') {
@@ -43,7 +43,7 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
           external={item.external}
           target={item.target}
           data-testid={item.label}
-          onClick={() => telemetry.send('footer_item_clicked', {})}
+          onClick={() => otelTelemetry.send({ type: 'footer_item.clicked' })}
           data-translation-key={item.labelTranslationKey}
         >
           {hasIcon ? (

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -20,8 +20,8 @@ export type LanguagePickerProps = {
 
 export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
   const { currentLocale, locales, setLocale } = useLanguagePicker();
-  const { useTelemetry } = useThemeHooks();
-  const telemetry = useTelemetry();
+  const { useOtelTelemetry } = useThemeHooks();
+  const otelTelemetry = useOtelTelemetry();
 
   if (locales.length < 2 || !currentLocale) {
     return null;
@@ -40,7 +40,10 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
     onAction: () => {
       setLocale(locale.code);
       props.onChangeLanguage(locale.code);
-      telemetry.send('language_picker_locale_changed', { locale: locale.code });
+      otelTelemetry.send({
+        type: 'language_picker_locale.changed',
+        payload: { locale: locale.code },
+      });
     },
     active: locale.code === currentLocale.code,
     suffix: locale.code === currentLocale.code && <CheckmarkIcon />,

package/src/components/Logo/Logo.tsx

@@ -14,8 +14,8 @@ export type LogoProps = {
 };
 
 export function Logo({ config, className, ...otherProps }: LogoProps): JSX.Element | null {
-  const { useTelemetry } = useThemeHooks();
-  const telemetry = useTelemetry();
+  const { useOtelTelemetry } = useThemeHooks();
+  const otelTelemetry = useOtelTelemetry();
 
   if (!config?.image && !config?.srcSet) {
     return null;
@@ -27,7 +27,7 @@ export function Logo({ config, className, ...otherProps }: LogoProps): JSX.Eleme
   return (
     <LogoWrapper data-component-name="Logo/Logo" className={className} {...otherProps}>
       {config.link ? (
-        <Link to={config.link} onClick={() => telemetry.send('logo_clicked', {})}>
+        <Link to={config.link} onClick={() => otelTelemetry.send({ type: 'logo.clicked' })}>
           {image}
         </Link>
       ) : (

package/src/components/Menu/MenuItem.tsx

@@ -17,7 +17,7 @@ import { Badge } from '@redocly/theme/components/Badge/Badge';
 
 export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   const { item, depth, className, onClick } = props;
-  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { useTranslate, useOtelTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const type = getMenuItemType(item);
   const nestedMenuRef = useRef<HTMLDivElement>(null);
@@ -28,7 +28,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
     labelRef,
     nestedMenuRef,
   });
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
   const isDrilldown = type === MenuItemType.DrillDown;
   const isSeparator = type === MenuItemType.Separator;
   const isNested = type === MenuItemType.Group;
@@ -36,7 +36,13 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   const hasHttpTag = !!item.httpVerb || type === MenuItemType.Operation;
 
   const handleOnClick = () => {
-    telemetry.send?.('sidebar_item_clicked', { label: item.label, type: item.type });
+    otelTelemetry.send({
+      type: 'sidebar.item_clicked',
+      payload: {
+        label: item.label,
+        type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
+      },
+    });
     onClick?.();
     if (isNested) {
       handleExpand();

package/src/components/Navbar/Navbar.tsx

@@ -23,11 +23,11 @@ export type NavbarProps = {
 };
 
 export function Navbar({ className }: NavbarProps): JSX.Element | null {
-  const { isOpen, openMobileMenu, closeMobileMenu } = useMobileMenu(false);
+  const { isOpen, closeMobileMenu, openMobileMenu } = useMobileMenu(false);
   const themeConfig = useThemeConfig();
-  const { useL10n, useTelemetry } = useThemeHooks();
+  const { useL10n, useOtelTelemetry } = useThemeHooks();
   const { changeLanguage } = useL10n();
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
 
   const menu = themeConfig.navbar?.items;
 
@@ -58,11 +58,11 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
             isOpen
               ? () => {
                   closeMobileMenu();
-                  telemetry.send('mobile_menu_button_close_clicked', {});
+                  otelTelemetry.send({ type: 'mobile_menu_button_close.clicked' });
                 }
               : () => {
                   openMobileMenu();
-                  telemetry.send('mobile_menu_button_open_clicked', {});
+                  otelTelemetry.send({ type: 'mobile_menu_button_open.clicked' });
                 }
           }
           icon={isOpen ? <CloseIcon /> : <MenuIcon />}

package/src/components/Navbar/NavbarItem.tsx

@@ -25,10 +25,10 @@ export type NavbarItemProps = {
 
 export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null {
   const { pathname } = useLocation();
-  const { useTranslate, useL10nConfig, useTelemetry } = useThemeHooks();
+  const { useTranslate, useL10nConfig, useOtelTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const { defaultLocale, currentLocale, locales } = useL10nConfig();
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
 
   if (navItem.type !== 'link' && !navItem.items) return null;
 
@@ -45,7 +45,9 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
       as={item.link ? Link : undefined}
       active={isActive}
       className={className}
-      onClick={() => telemetry.send('navbar_menu_item_clicked', { type: item.type })}
+      onClick={() =>
+        otelTelemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } })
+      }
       external={item.external}
       target={item.target}
       to={item.link}

package/src/components/Search/SearchInput.tsx

@@ -33,9 +33,9 @@ export function SearchInput({
   onSubmit,
   className,
 }: SearchInputProps): JSX.Element {
-  const { useTelemetry } = useThemeHooks();
+  const { useOtelTelemetry } = useThemeHooks();
   const { addSearchHistoryItem } = useRecentSearches();
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
 
   const { onKeyDown } = useInputKeyCommands({
     onEnter: (event) => onSubmit?.(event),
@@ -51,7 +51,7 @@ export function SearchInput({
   const handleOnReset = () => {
     onChange('');
     addSearchHistoryItem(value);
-    telemetry.send('search_input_reset_button_clicked', {});
+    otelTelemetry.send({ type: 'search_input_reset_button.clicked' });
   };
 
   return (

package/src/components/Search/SearchRecent.tsx

@@ -16,16 +16,16 @@ export type SearchRecentProps = {
 
 export function SearchRecent({ onSelect, className }: SearchRecentProps): JSX.Element | null {
   const { items, removeSearchHistoryItem } = useRecentSearches();
-  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { useTranslate, useOtelTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
 
   if (!items || !items.length) return null;
 
   const handleOnRemove = (e: React.MouseEvent<SVGSVGElement, MouseEvent>, item: string) => {
     e.stopPropagation();
     removeSearchHistoryItem(item);
-    telemetry.send('search_recent_remove_button_clicked', {});
+    otelTelemetry.send({ type: 'search_recent_remove_button.clicked' });
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, item: string, index: number) => {

package/src/components/SidebarActions/SidebarActions.tsx

@@ -34,9 +34,9 @@ export const SidebarActions = ({
   requestAccessButton,
   className,
 }: SidebarActionsProps) => {
-  const { useTelemetry, useTranslate } = useThemeHooks();
+  const { useOtelTelemetry, useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
   return (
     <ControlsWrap
       className={className}
@@ -48,9 +48,9 @@ export const SidebarActions = ({
           onClick={() => {
             onChangeCollapseSidebarClick();
             if (collapsedSidebar) {
-              telemetry.send?.('sidebar_item_expanded', {});
+              otelTelemetry.send({ type: 'sidebar.item_expanded' });
             } else {
-              telemetry.send?.('sidebar_item_collapsed', {});
+              otelTelemetry.send({ type: 'sidebar.item_collapsed' });
             }
           }}
           title={
@@ -70,7 +70,7 @@ export const SidebarActions = ({
             layout={layout}
             onClick={() => {
               onChangeViewClick();
-              telemetry.send?.('change_layout_button_clicked', {});
+              otelTelemetry.send({ type: 'change_layout_button.clicked' });
             }}
           />
         </ControlsWrapChangeLayoutButtons>