@salesforcedevs/dx-components 1.31.0 → 1.32.0-alpha.10

package/src/modules/dx/sidebar/sidebar.css

@@ -13,6 +13,7 @@ dx-empty-state {
     display: none;
 }
 
+/* Scrollable list: when content overflows, last visible item is cut by container to indicate more items (per spec). */
 .sidebar-content {
     overflow-y: auto;
     padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);

package/src/modules/dx/sidebar/sidebar.html

@@ -48,10 +48,6 @@
                 <dx-sidebar-search
                     onchange={onSearchChange}
                     onloading={onSearchLoading}
-                    coveo-organization-id={coveoOrganizationId}
-                    coveo-public-access-token={coveoPublicAccessToken}
-                    coveo-search-hub={coveoSearchHub}
-                    coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ></dx-sidebar-search>
             </div>
             <slot name="version-picker"></slot>
@@ -69,7 +65,7 @@
             <img
                 lwc:if={isSearchLoading}
                 class="loading-skeleton padding-horizontal"
-                src="https://developer.salesforce.com/ns-assets/sidebar-loading.svg"
+                src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-loading.svg"
                 alt="loading"
             />
             <template

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

@@ -1,18 +1,18 @@
 import cx from "classnames";
 import { api, track } from "lwc";
 import { TreeNode, SidebarSearchResult } from "typings/custom";
-import { getSidebarSearchParams } from "dxUtils/coveo";
 import { toJson } from "dxUtils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
 
 const MOBILE_SIZE_MATCH = "768px";
 
+const getSearchQueryParam = (): string | null =>
+    typeof window !== "undefined"
+        ? new URLSearchParams(window.location.search).get("q")
+        : null;
+
 export default class Sidebar extends SidebarBase {
-    @api coveoOrganizationId!: string;
-    @api coveoPublicAccessToken!: string;
-    @api coveoSearchHub!: string;
-    @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
 
     @api
@@ -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 {
@@ -130,7 +129,7 @@ export default class Sidebar extends SidebarBase {
     constructor() {
         super();
 
-        if (getSidebarSearchParams()) {
+        if (getSearchQueryParam()) {
             this.isSearchLoading = true;
             this.scrollToSelectedSearchResult = true;
         }
@@ -162,20 +161,22 @@ 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;
     }
 
-    private onSidebarSearchContentScroll(scrollEvent) {
+    private onSidebarSearchContentScroll(scrollEvent: Event) {
         if (this.isSearchLoading) {
             return;
         }
@@ -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 {