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

package/package.json

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

package/src/modules/dx/searchResults/searchResults.css

@@ -310,7 +310,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     bottom: var(--dx-result-inner-gap-y);
     left: var(--dx-result-inner-gap-x);
     right: var(--dx-result-inner-gap-x);
-    background: var(--dx-g-gray-95);
+    background: var(--dx-g-cloud-blue-vibrant-95);
     border-radius: var(--dx-g-spacing-xs);
     pointer-events: none;
     z-index: 0;
@@ -326,7 +326,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     outline: none;
 }
 
-/* Pseudo: 8px from text on sides, more padding top/bottom inside ring (smaller inset y) */
+/* Pseudo: 8px from text; inner ring container/hover (cloud blue 95), outer blue-vibrant-20 */
 .dx-result:focus-within::before {
     content: "";
     position: absolute;
@@ -334,8 +334,10 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     bottom: var(--dx-result-inner-gap-y);
     left: var(--dx-result-inner-gap-x);
     right: var(--dx-result-inner-gap-x);
-    border: 2px solid var(--dx-g-blue-vibrant-50);
+    border: none;
     border-radius: var(--dx-g-spacing-xs);
+    box-shadow: 0 0 0 2px var(--dx-g-cloud-blue-vibrant-95),
+        0 0 0 4px var(--dx-g-blue-vibrant-20);
     pointer-events: none;
     z-index: 2;
 }

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 {
@@ -162,16 +161,18 @@ export default class Sidebar extends SidebarBase {
 
     private onSearchChange(e: CustomEvent) {
         this.requestedFetchMoreResults = false;
+        const isFirstSearchHydration = this.searchValue === null;
+        const hasSelectedResult = (e.detail.results || []).some(
+            (result: SidebarSearchResult) => !!result.selected
+        );
+        if (isFirstSearchHydration && hasSelectedResult) {
+            this.scrollToSelectedSearchResult = true;
+        }
         this.searchResults = e.detail.results;
         this.searchValue = e.detail.value;
     }
 
     private onSearchLoading(e: CustomEvent) {
-        if (!e.detail.loading && this.scrollToSelectedSearchResult) {
-            this.selectedSearchResultIndex = this.searchResults.findIndex(
-                (r) => r.selected
-            );
-        }
         this.isSearchLoading = e.detail;
     }
 
@@ -196,23 +197,37 @@ 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 allResultItems = searchContent?.querySelectorAll(
+            "dx-sidebar-search-result"
+        );
+        const selectedResult =
+            (allResultItems?.[selectedSearchResultIndex] as HTMLElement) ||
+            null;
+        if (!searchContent || !selectedResult) {
+            return;
         }
+
+        window.requestAnimationFrame(() => {
+            selectedResult.scrollIntoView({
+                block: "start",
+                inline: "nearest"
+            });
+            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

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 @import "dxHelpers/commonTreeItem";
 
-/* List item states per spec: Default, Hover (#F7F7F7), Selected (#E6F2FF), Focus (blue outline), Focus+Selected */
+/* List item states: Default, Hover (blue-vibrant-50 text only), Selected (cloud blue bar), Focus */
 a {
     display: flex;
     flex-direction: column;
@@ -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;
@@ -26,32 +25,51 @@ a {
     transition: background-color var(--dx-g-transition-hue-1x, 0.1s ease);
 }
 
-/* Hover: light grey background in box shape only */
-.sidebar-item:not(.sidebar-item-selected):hover .search-result {
-    background: var(--dx-g-gray-95);
+/* Hover: no background; text → blue-vibrant-50 (.title / .description set their own colors) */
+.sidebar-item:not(.sidebar-item-selected):hover .title {
+    color: var(--dx-g-blue-vibrant-50);
 }
 
-/* Selected: light blue background in box shape only */
+.sidebar-item:not(.sidebar-item-selected):hover .description {
+    --dx-g-text-body-color: var(--dx-g-blue-vibrant-50);
+}
+
+/* Selected: full-width cloud blue bar + 4px blue-vibrant-40 left accent; text matches unselected */
 .sidebar-item-selected {
-    box-shadow: none;
-    color: var(--dx-g-blue-vibrant-40) !important;
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    border-radius: 0;
+    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40);
+
+    /* Override commonTreeItem selected text color so .title / .description tokens apply */
+    color: unset !important;
 }
 
 .sidebar-item-selected .search-result {
-    background: var(--dx-g-cloud-blue-vibrant-95);
+    position: relative;
+    z-index: 1;
+    background: transparent;
     color: inherit;
 }
 
-/* Focus: only one box – remove anchor outline (from commonTreeItem), draw single blue outline on .search-result only */
+/* Focus: same ring for selected and unselected (inner .search-result, not full-width bar) */
 .sidebar-item:focus-visible {
     outline: none !important;
 }
 
+/* Override commonTreeItem selected:focus padding/outline so focus matches unselected */
+.sidebar-item-selected:focus-visible {
+    padding-top: 0;
+    padding-bottom: 0;
+    outline: none !important;
+}
+
 .sidebar-item:focus-visible .search-result {
-    outline: 2px solid var(--dx-g-blue-vibrant-50);
-    outline-offset: 0;
+    outline: none;
     border-radius: var(--dx-g-spacing-xs);
     border: none;
+
+    /* White inner ring reads clearly on selected (cloud 95) and hover backgrounds */
+    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--dx-g-blue-vibrant-60);
 }
 
 .search-text {
@@ -63,6 +81,7 @@ a {
 }
 
 .description {
+    line-clamp: 3;
     -webkit-line-clamp: 3;
     overflow-wrap: break-word;
 
@@ -74,6 +93,9 @@ a {
 
 .title {
     color: var(--dx-g-text-heading-color);
+    line-height: 18px;
+    display: block;
+    margin-bottom: 4px;
 }
 
 /* Match full-doc search highlight: light yellow from dx-css-variables */
@@ -81,7 +103,3 @@ a {
     background-color: var(--dx-g-yellow-vibrant-90);
     font-weight: 700;
 }
-
-a > *:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-xs);
-}

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;
     }