@salesforcedevs/dx-components 0.10.1-alpha.70 → 0.10.1-alpha.74

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.10.1-alpha.70",
+    "version": "0.10.1-alpha.74",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -64,14 +64,6 @@ dx-tree:not(:last-child) {
     transition: var(--dx-g-transition-transform-2x);
 }
 
-.container.collapsed {
-    width: var(--dx-g-spacing-xl);
-}
-
-.collapsed .header-toggle-button {
-    transform: rotate(180deg);
-}
-
 .container {
     background-color: var(--dx-g-gray-95);
     display: flex;
@@ -101,26 +93,6 @@ dx-tree:not(:last-child) {
     --border-color: transparent;
 }
 
-.collapsed.container .sidebar-header, .collased.container .sidebar-content {
-    display: none;
-}
-
-.search-empty.container dx-empty-state {
-    display: block;
-}
-
-.user-searching.container .sidebar-content-tree {
-    display: none;
-}
-
-.show-tree.container .sidebar-content-search {
-    display: none;
-}
-
-.container:hover .header-toggle-button {
-    --dx-c-button-opacity: 1;
-}
-
 .container.container-border-active {
     --border-color: var(--dx-c-sidebar-button-color);
 }
@@ -178,3 +150,32 @@ dx-tree:not(:last-child) {
 .loading-skeleton {
     margin-top: var(--dx-g-spacing-md);
 }
+
+.collapsed.container .sidebar-header,
+.collased.container .sidebar-content {
+    display: none;
+}
+
+.search-empty.container dx-empty-state {
+    display: block;
+}
+
+.user-searching.container .sidebar-content-tree {
+    display: none;
+}
+
+.show-tree.container .sidebar-content-search {
+    display: none;
+}
+
+.container.collapsed {
+    width: var(--dx-g-spacing-xl);
+}
+
+.collapsed .header-toggle-button {
+    transform: rotate(180deg);
+}
+
+.container:hover .header-toggle-button {
+    --dx-c-button-opacity: 1;
+}

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

@@ -130,7 +130,10 @@ export default class Sidebar extends LightningElement {
     }
 
     renderedCallback() {
-        if (this.scrollToSelectedSearchResult && this.selectedSearchResultIndex >= 0) {
+        if (
+            this.scrollToSelectedSearchResult &&
+            this.selectedSearchResultIndex >= 0
+        ) {
             const selectedResult = this.template.querySelector(
                 `dx-sidebar-search-result:nth-child(${
                     this.selectedSearchResultIndex + 1

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

@@ -21,6 +21,8 @@ const UserRecentSearches = new RecentSearches();
 const normalizeCoveoAdvancedQueryValue = (version: string): string =>
     version.split(".").join("\\.");
 
+const DEFAULT_RESULT_COUNT = 20;
+
 export default class SidebarSearch extends LightningElement {
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
@@ -44,6 +46,7 @@ export default class SidebarSearch extends LightningElement {
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];
     private resultList: ResultList | null = null;
+    private initialResultCount: number = DEFAULT_RESULT_COUNT;
     private searchBox: SearchBox | null = null;
     private value?: string = undefined;
     private engine: SearchEngine | null = null;
@@ -86,6 +89,18 @@ export default class SidebarSearch extends LightningElement {
         if (initialValue && initialValue !== "") {
             this.value = initialValue;
         }
+
+        const stringified = window.sessionStorage.getItem(
+            "dx-sidebar-search-state"
+        );
+        if (!stringified) {
+            return;
+        }
+        const state = JSON.parse(stringified);
+        console.log(state);
+        if (state.value === this.value) {
+            this.initialResultCount = state.resultCount;
+        }
     }
 
     renderedCallback() {
@@ -115,20 +130,21 @@ export default class SidebarSearch extends LightningElement {
             searchHub: this.coveoSearchHub
         });
 
-        if (this.engine) {
-            this.resultList = buildResultList(this.engine, {
-                options: { fieldsToInclude: ["sfhtml_url__c"] }
-            });
-            buildResultsPerPage(this.engine, {
-                initialState: {
-                    numberOfResults: 20
-                }
-            });
-            this.searchBox = buildSearchBox(this.engine, { options });
-            this.setAdvancedFilters(this.engine);
+        if (!this.engine) {
+            return;
         }
 
-        // create resultlist onchange callback
+        this.resultList = buildResultList(this.engine, {
+            options: { fieldsToInclude: ["sfhtml_url__c"] }
+        });
+        const ResultsPerPage = buildResultsPerPage(this.engine, {
+            initialState: {
+                numberOfResults: this.initialResultCount
+            }
+        });
+        this.searchBox = buildSearchBox(this.engine, { options });
+        this.setAdvancedFilters(this.engine);
+
         this.resultList?.subscribe(this.onResultListChange);
 
         if (!this.isValueEmpty) {
@@ -137,6 +153,8 @@ export default class SidebarSearch extends LightningElement {
         } else {
             this.dispatchOnLoading(false);
         }
+
+        ResultsPerPage.set(DEFAULT_RESULT_COUNT);
     }
 
     private onResultListChange = () => {
@@ -203,6 +221,13 @@ export default class SidebarSearch extends LightningElement {
     };
 
     private dispatchOnChangeEvent(results: Result[]) {
+        window.sessionStorage.setItem(
+            "dx-sidebar-search-state",
+            JSON.stringify({
+                value: this.value,
+                resultCount: results.length
+            })
+        );
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {