@salesforcedevs/dx-components 1.32.0-alpha.1 → 1.32.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.32.0-alpha.1",
+    "version": "1.32.0-alpha.4",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "9f48b66de9a139bcf6cfac4052772726f00f6d8e"
+    "gitHead": "48ef4e10a9004131b3c63b3817d0d62ed1a28b6b"
 }

package/src/modules/dx/searchResults/searchResults.html

@@ -81,6 +81,9 @@
                                     class="dx-result-title"
                                     target={result.openInNewTab}
                                     rel={result.rel}
+                                    data-index={result.resultIndex}
+                                    data-title={result.title}
+                                    onclick={onSearchResultClick}
                                 >
                                     {result.title}
                                 </a>

package/src/modules/dx/searchResults/searchResults.ts

@@ -15,6 +15,7 @@ interface SearchResultDisplay {
     href: string;
     matchedText: string;
     uniqueId: string;
+    resultIndex: number;
     openInNewTab: string | undefined;
     rel: string | undefined;
 }
@@ -129,11 +130,28 @@ export default class SearchResults extends LightningElement {
             href,
             matchedText: item.matchedText ?? "",
             uniqueId: href || `result-${index}`,
+            resultIndex: index + 1,
             openInNewTab: isExternal ? "_blank" : undefined,
             rel: isExternal ? "noopener noreferrer" : undefined
         };
     }
 
+    private onSearchResultClick(e: MouseEvent) {
+        const anchor = e.currentTarget as HTMLAnchorElement;
+        const index = Number(anchor.dataset.index ?? "0");
+        const title = anchor.dataset.title ?? "";
+        const href = anchor.href ?? "";
+        trackGTM(anchor, "custEv_scopedSearchlinkClick", {
+            click_text: title,
+            click_url: href,
+            element_title: title,
+            element_type: "link",
+            content_category: "documentation",
+            search_term: this.query,
+            search_result_position: index
+        });
+    }
+
     private trackSearchResultsOnce(term: string, resultCount: number) {
         if (this.didTrackThisSearch) {
             return;

package/src/modules/dx/sidebar/sidebar.ts

@@ -51,7 +51,6 @@ export default class Sidebar extends SidebarBase {
     private searchValue: string | null = null;
     private searchResults: SidebarSearchResult[] = [];
     private scrollToSelectedSearchResult: boolean = false;
-    private selectedSearchResultIndex: number = -1;
     private requestedFetchMoreResults: boolean = false;
 
     private get areResultsEmpty(): boolean {
@@ -167,11 +166,6 @@ export default class Sidebar extends SidebarBase {
     }
 
     private onSearchLoading(e: CustomEvent) {
-        if (!e.detail.loading && this.scrollToSelectedSearchResult) {
-            this.selectedSearchResultIndex = this.searchResults.findIndex(
-                (r) => r.selected
-            );
-        }
         this.isSearchLoading = e.detail;
     }
 
@@ -196,23 +190,32 @@ export default class Sidebar extends SidebarBase {
     }
 
     private initializeSearchScrollPosition() {
-        if (
-            this.scrollToSelectedSearchResult &&
-            this.selectedSearchResultIndex >= 0
-        ) {
-            const selectedResult = this.template.querySelector(
-                `dx-sidebar-search-result:nth-child(${
-                    this.selectedSearchResultIndex + 1
-                })`
-            );
-            if (!selectedResult || !selectedResult.parentNode) {
-                return;
-            }
-            (selectedResult.parentNode as HTMLElement).scrollTop =
-                selectedResult.offsetTop -
-                (selectedResult.parentNode as HTMLElement).offsetTop;
-            this.scrollToSelectedSearchResult = false;
+        if (!this.scrollToSelectedSearchResult || this.isSearchLoading) {
+            return;
         }
+
+        const selectedSearchResultIndex = this.searchResults.findIndex(
+            (r) => r.selected
+        );
+        if (selectedSearchResultIndex < 0) {
+            return;
+        }
+
+        const searchContent = this.template.querySelector(
+            ".sidebar-content-search"
+        ) as HTMLElement | null;
+        const selectedResult = searchContent?.querySelector(
+            `dx-sidebar-search-result:nth-child(${
+                selectedSearchResultIndex + 1
+            })`
+        ) as HTMLElement | null;
+        if (!searchContent || !selectedResult) {
+            return;
+        }
+
+        searchContent.scrollTop =
+            selectedResult.offsetTop - searchContent.offsetTop;
+        this.scrollToSelectedSearchResult = false;
     }
 
     private assignValueToLabel(node: TreeNode): void {

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -1,5 +1,6 @@
 import { LightningElement, api } from "lwc";
 import debounce from "debounce";
+import { track as trackGTM } from "dxUtils/analytics";
 import {
     type Data360SearchCacheItem,
     type Data360SearchResultItem,
@@ -85,6 +86,7 @@ export default class SidebarSearch extends LightningElement {
     private value: string = "";
     private didRender = false;
     private data360SearchInitialized: boolean = false;
+    private didTrackThisSearch: boolean = false;
 
     private get isDropdownOpen() {
         return (
@@ -173,11 +175,13 @@ export default class SidebarSearch extends LightningElement {
 
     private async fetchDataCloudSearch(): Promise<void> {
         try {
-            const rawResults = await fetchSearch(this.value.trim());
+            const query = this.value.trim();
+            const rawResults = await fetchSearch(query);
             const results: SidebarSearchResult[] = rawResults.map(
                 this.normalizeDataCloudResult
             );
             this.dispatchChange(results);
+            this.trackSearchResultsOnce(query, results.length);
             const cacheItems: Data360SearchCacheItem[] = results.map((r) => ({
                 title: r.title,
                 titleHighlights: r.titleHighlights,
@@ -198,6 +202,19 @@ export default class SidebarSearch extends LightningElement {
         }
     }
 
+    private trackSearchResultsOnce(term: string, resultCount: number): void {
+        if (this.didTrackThisSearch || !term) {
+            return;
+        }
+        this.didTrackThisSearch = true;
+        trackGTM(this.template.host, "custEv_scopedSearch", {
+            search_term: term,
+            search_category: "",
+            search_type: "site search",
+            search_result_count: resultCount
+        });
+    }
+
     private dispatchChange(results: SidebarSearchResult[]) {
         this.dispatchEvent(
             new CustomEvent("change", {
@@ -279,6 +296,7 @@ export default class SidebarSearch extends LightningElement {
 
     private handleValueChange(isSyncingSearchValue = false) {
         if (this.value) {
+            this.didTrackThisSearch = false;
             this.dispatchOnLoading(true);
             this.submitSearch(isSyncingSearchValue);
         } else {

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -10,8 +10,7 @@ a {
 
 /* Match "Results" heading alignment. Less item padding so total height unchanged when box has more inner padding. */
 .sidebar-item {
-    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-lg)
-        var(--dx-g-spacing-xs) var(--dx-c-sidebar-left-padding);
+    padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-c-sidebar-left-padding);
     background: transparent;
     transition: background-color var(--dx-g-transition-hue-1x, 0.1s ease);
     overflow: visible;
@@ -74,6 +73,7 @@ a {
 
 .title {
     color: var(--dx-g-text-heading-color);
+    line-height: var(--dx-g-spacing-mlg);
 }
 
 /* Match full-doc search highlight: light yellow from dx-css-variables */

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts

@@ -1,5 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
+import { track } from "dxUtils/analytics";
 import { HighlightedSections } from "typings/custom";
 
 const toChunks = (value: string, highlights: HighlightedSections) => {
@@ -72,6 +73,13 @@ export default class SidebarSearchResult extends LightningElement {
 
     private onClick(e: PointerEvent) {
         e.preventDefault();
+        track(e.currentTarget!, "custEv_scopedSearchItemSelected", {
+            click_text: this.header,
+            click_url: this.href,
+            element_title: this.header,
+            element_type: "link",
+            content_category: "documentation"
+        });
         this.select();
         window.location.href = this.href;
     }