@salesforcedevs/dx-components 1.32.0-alpha.8 → 1.32.0

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

@@ -13,7 +13,6 @@ 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,6 +48,10 @@
                 <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>
@@ -65,7 +69,7 @@
             <img
                 lwc:if={isSearchLoading}
                 class="loading-skeleton padding-horizontal"
-                src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-loading.svg"
+                src="https://developer.salesforce.com/ns-assets/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,6 +51,7 @@ 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 {
@@ -129,7 +130,7 @@ export default class Sidebar extends SidebarBase {
     constructor() {
         super();
 
-        if (getSearchQueryParam()) {
+        if (getSidebarSearchParams()) {
             this.isSearchLoading = true;
             this.scrollToSelectedSearchResult = true;
         }
@@ -161,22 +162,20 @@ 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: Event) {
+    private onSidebarSearchContentScroll(scrollEvent) {
         if (this.isSearchLoading) {
             return;
         }
@@ -197,37 +196,23 @@ export default class Sidebar extends SidebarBase {
     }
 
     private initializeSearchScrollPosition() {
-        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"
-            });
+        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;
-        });
+        }
     }
 
     private assignValueToLabel(node: TreeNode): void {