@redocly/theme 0.49.0 → 0.49.1

package/lib/components/Search/SearchDialog.js

@@ -46,7 +46,8 @@ const SpinnerLoader_1 = require("../../components/Loaders/SpinnerLoader");
 const SettingsIcon_1 = require("../../icons/SettingsIcon/SettingsIcon");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
 function SearchDialog({ onClose, className }) {
-    const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
     const products = useProducts();
     const currentProduct = useCurrentProduct();
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
@@ -67,7 +68,7 @@ function SearchDialog({ onClose, className }) {
             onClose();
         }
     };
-    const mapItem = (item, index) => {
+    const mapItem = (item, index, results) => {
         var _a;
         let itemProduct;
         if (!product && item.document.product) {
@@ -77,7 +78,15 @@ function SearchDialog({ onClose, className }) {
                 ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
                 : undefined;
         }
-        return react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct });
+        return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, onClick: () => {
+                telemetry.send('search_result_clicked', {
+                    query,
+                    url: item.document.url,
+                    total_results: results.length,
+                    index,
+                    search_engine: mode,
+                });
+            } }));
     };
     const showLoadMore = (groupKey, currentCount = 0) => {
         const groupFacet = facets.find((facet) => facet.field === groupField);

package/lib/components/Search/SearchItem.d.ts

@@ -4,11 +4,12 @@ type ActiveItem<T> = T & {
 };
 export type SearchItemProps = {
     item: ActiveItem<SearchItemData>;
+    onClick?: VoidFunction;
     product?: {
         name: string;
         icon?: string;
     };
     className?: string;
 };
-export declare function SearchItem({ item, className, product }: SearchItemProps): JSX.Element;
+export declare function SearchItem({ onClick, item, className, product }: SearchItemProps): JSX.Element;
 export {};

package/lib/components/Search/SearchItem.js

@@ -35,7 +35,7 @@ const Image_1 = require("../../components/Image/Image");
 const SearchHighlight_1 = require("../../components/Search/SearchHighlight");
 const Badge_1 = require("../../components/Badge/Badge");
 const utils_1 = require("../../core/utils");
-function SearchItem({ item, className, product }) {
+function SearchItem({ onClick, item, className, product }) {
     var _a, _b, _c, _d;
     const ref = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
@@ -47,7 +47,7 @@ function SearchItem({ item, className, product }) {
     const { document, highlight } = item;
     const parameter = highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
     const shouldShowPath = document.path && ((_a = document.path) === null || _a === void 0 ? void 0 : _a.length) > 1;
-    return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+    return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, onClick: onClick, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
         react_1.default.createElement(SearchItemHeader, null,
             product && (react_1.default.createElement(SearchItemProductTag, { "data-testid": "search-item-product-tag" },
                 react_1.default.createElement(Image_1.Image, { src: product.icon }),

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

@@ -121,5 +121,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' | 'feedback_sent' | '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 = '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' | 'feedback_sent' | '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' | 'search_result_clicked';
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.49.0",
+  "version": "0.49.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,7 +87,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.20.2"
+    "@redocly/config": "0.20.3"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Search/SearchDialog.tsx

@@ -27,7 +27,9 @@ export type SearchDialogProps = {
 };
 
 export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Element {
-  const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch } = useThemeHooks();
+  const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } =
+    useThemeHooks();
+  const telemetry = useTelemetry();
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
@@ -69,7 +71,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     }
   };
 
-  const mapItem = (item: SearchItemData, index: number) => {
+  const mapItem = (item: SearchItemData, index: number, results: SearchItemData[]) => {
     let itemProduct;
     if (!product && item.document.product) {
       const folder = item.document.product?.folder;
@@ -80,7 +82,22 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
         ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
         : undefined;
     }
-    return <SearchItem key={`${index}-${item.document.id}`} item={item} product={itemProduct} />;
+    return (
+      <SearchItem
+        key={`${index}-${item.document.id}`}
+        item={item}
+        product={itemProduct}
+        onClick={() => {
+          telemetry.send('search_result_clicked', {
+            query,
+            url: item.document.url,
+            total_results: results.length,
+            index,
+            search_engine: mode,
+          });
+        }}
+      />
+    );
   };
 
   const showLoadMore = (groupKey: string, currentCount: number = 0) => {

package/src/components/Search/SearchItem.tsx

@@ -13,6 +13,7 @@ import { trimText } from '@redocly/theme/core/utils';
 type ActiveItem<T> = T & { active?: boolean };
 export type SearchItemProps = {
   item: ActiveItem<SearchItemData>;
+  onClick?: VoidFunction;
   product?: {
     name: string;
     icon?: string;
@@ -20,7 +21,7 @@ export type SearchItemProps = {
   className?: string;
 };
 
-export function SearchItem({ item, className, product }: SearchItemProps): JSX.Element {
+export function SearchItem({ onClick, item, className, product }: SearchItemProps): JSX.Element {
   const ref = useRef<HTMLAnchorElement>();
 
   useEffect(() => {
@@ -39,6 +40,7 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
     <SearchItemWrapper
       className={className}
       to={document.url}
+      onClick={onClick}
       tabIndex={0}
       innerRef={ref}
       data-component-name="Search/SearchItem"

package/src/core/types/hooks.ts

@@ -173,4 +173,5 @@ type TelemetryEvent =
   | 'mobile_menu_button_open_clicked'
   | 'search_input_reset_button_clicked'
   | 'search_recent_remove_button_clicked'
-  | 'product_picked';
+  | 'product_picked'
+  | 'search_result_clicked';