@salesforcedevs/dx-components 1.32.0-alpha.2 → 1.32.0-alpha.5

package/package.json

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

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,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/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

@@ -73,7 +73,7 @@ export default class SidebarSearchResult extends LightningElement {
 
     private onClick(e: PointerEvent) {
         e.preventDefault();
-        track(e.currentTarget!, "custEv_linkClick", {
+        track(e.currentTarget!, "custEv_scopedSearchItemSelected", {
             click_text: this.header,
             click_url: this.href,
             element_title: this.header,