@salesforcedevs/dx-components 0.43.3-tree-selected-scroll-2 → 0.43.3-tree-selected-scroll-5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.43.3-tree-selected-scroll-2",
+    "version": "0.43.3-tree-selected-scroll-5",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/assets/icons/salesforcebrand-sprite/svg/symbols.svg

@@ -254,4 +254,21 @@
             </g>
         </g>
     </symbol>
+    <symbol viewBox="0 0 56 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="revenue">
+        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="Sales-Revenue-Cloud-Icon-Square-2Color-RGB" fill-rule="nonzero">
+                <path d="M46.6,29.8 C46,29.2 45.8,28.2 46.3,27.4 C46.8,26.5 47.2,25.5 47.5,24.5 C47.7,23.6 48.5,23 49.4,23 L52,23 L52,19 L49.4,19 C48.5,19 47.7,18.4 47.5,17.5 C47.2,16.5 46.8,15.5 46.3,14.6 C45.9,13.8 46,12.8 46.6,12.2 L48.4,10.4 L45.6,7.6 L43.8,9.4 C43.2,10 42.2,10.2 41.4,9.7 C40.5,9.2 39.5,8.8 38.5,8.5 C37.6,8.3 37,7.5 37,6.6 L37,4 L33,4 L33,6.6 C33,7.5 32.4,8.3 31.5,8.5 C30.5,8.8 29.5,9.2 28.6,9.7 C27.8,10.1 26.8,10 26.2,9.4 L24.4,7.6 L21.6,10.4 L23.4,12.2 C24,12.8 24.2,13.8 23.7,14.6 C23.2,15.5 22.8,16.5 22.5,17.5 C22.3,18.4 21.5,19 20.6,19 L18,19 L18,23 L26.2,23 C26.1,22.4 26,21.7 26,21 C26,16 30,12 35,12 C40,12 44,16 44,21 C44,26 40,30 35,30 C34.3,30 33.7,29.9 33,29.8 L33,38.1 L37,38.1 L37,35.5 C37,34.6 37.6,33.8 38.5,33.6 C39.5,33.3 40.5,32.9 41.4,32.4 C42.2,32 43.2,32.1 43.8,32.7 L45.6,34.5 L48.4,31.7 L46.6,29.8 Z" id="Path" fill="#04E1CB"></path>
+                <path d="M39,0 C40.1,0 41,0.9 41,2 L41,2 L41,5.1 C41.3,5.2 41.7,5.4 42,5.5 L42,5.5 L44.2,3.3 C45,2.5 46.2,2.5 47,3.3 L47,3.3 L52.7,9 C53.1,9.4 53.3,9.9 53.3,10.4 C53.3,10.9 53.1,11.4 52.7,11.8 L52.7,11.8 L50.5,14 C50.6,14.3 50.8,14.7 50.9,15 L50.9,15 L54,15 C55.1,15 56,15.9 56,17 L56,17 L56,25 C56,25.5 55.8,26 55.4,26.4 C55,26.8 54.5,27 54,27 L54,27 L50.9,27 C50.8,27.3 50.6,27.7 50.5,28 L50.5,28 L52.7,30.2 C53.1,30.6 53.3,31.1 53.3,31.6 C53.3,32.1 53.1,32.6 52.7,33 L52.7,33 L47,38.7 C46.2,39.5 45,39.5 44.2,38.7 L44.2,38.7 L42,36.5 C41.7,36.6 41.3,36.8 41,36.9 L41,36.9 L41,40 C41,41.1 40.1,42 39,42 L39,42 L33,42 L33,43 C33,44.1 32.1,45 31,45 L31,45 L2,45 C0.9,45 0,44.1 0,43 L0,43 L0,25 C0,23.9 0.9,23 2,23 L2,23 L14,23 L14,17 C14,15.9 14.9,15 16,15 L16,15 L19.1,15 C19.2,14.7 19.4,14.3 19.5,14 L19.5,14 L17.3,11.8 C16.5,11 16.5,9.8 17.3,9 L17.3,9 L23,3.3 C23.8,2.5 25,2.5 25.8,3.3 L25.8,3.3 L28,5.5 C28.3,5.4 28.7,5.2 29,5.1 L29,5.1 L29,2 C29,0.9 29.9,0 31,0 L31,0 Z M35,16 C32.2385763,16 30,18.2385763 30,21 C30,23.7614237 32.2385763,26 35,26 C37.7614237,26 40,23.7614237 40,21 C40,18.2385763 37.7614237,16 35,16 Z" id="Combined-Shape" fill="#0B827C"></path>
+                <path d="M43.8,32.6 C43.2,32 42.2,31.8 41.4,32.3 C40.5,32.8 39.5,33.2 38.5,33.5 C37.6,33.7 37,34.5 37,35.4 L37,38 L33,38 L33,29.7 C33.6,29.8 34.3,29.9 35,29.9 C40,29.9 44,25.9 44,20.9 C44,15.9 40,11.9 35,11.9 C30,11.9 26,15.9 26,20.9 C26,21.6 26.1,22.3 26.2,22.9 L18,22.9 L18,18.9 L20.6,18.9 C21.5,18.9 22.3,18.3 22.5,17.4 C22.8,16.4 23.2,15.4 23.7,14.5 C24.1,13.7 24,12.7 23.4,12.1 L21.6,10.3 L24.4,7.5 L26.2,9.3 C26.8,9.9 27.8,10.1 28.6,9.6 C29.5,9.1 30.5,8.7 31.5,8.4 C32.4,8.2 33,7.4 33,6.5 L33,3.9 L37,3.9 L37,6.5 C37,7.4 37.6,8.2 38.5,8.4 C39.5,8.7 40.5,9.1 41.4,9.6 C42.2,10 43.2,9.9 43.8,9.3 L45.6,7.5 L48.4,10.3 L46.6,12.1 C46,12.7 45.8,13.7 46.3,14.5 C46.8,15.4 47.2,16.4 47.5,17.4 C47.7,18.3 48.5,18.9 49.4,18.9 L52,18.9 L52,22.9 L49.4,22.9 C48.5,22.9 47.7,23.5 47.5,24.4 C47.2,25.4 46.8,26.4 46.3,27.3 C45.9,28.1 46,29.1 46.6,29.7 L48.4,31.5 L45.6,34.5 L43.8,32.6 Z" id="Path" fill="#04E1CB"></path>
+                <polygon id="Path" fill="#0B827C" points="4 27 15.8 27 21.3 27 23.5 27 28.3 27 29 27 29 27.7 29 32.5 29 34.7 29 40.2 29 41 4 41"></polygon>
+                <polygon id="Path" fill="#04E1CB" points="29 40.2 29 34.7 29 32.5 29 27.7 29 27 28.3 27 23.5 27 21.3 27 15.8 27 4 27 4 41 29 41"></polygon>
+                <path d="M25.8,33.1 C25.9,33.4 26,33.7 26,34 C26,35.1 25.1,36 24,36 C22.9,36 22,35.1 22,34 C22,33.5 22.2,33 22.5,32.6 C22.9,32.2 23.4,32 24,32 C24.8,32 25.4,32.4 25.8,33.1 Z" id="Path" fill="#04E1CB"></path>
+                <circle id="Oval" fill="#04E1CB" cx="9" cy="34" r="2"></circle>
+                <path d="M16.5,36.5 C15.1,36.5 14,35.4 14,34 C14,32.6 15.1,31.5 16.5,31.5 C16.6,31.5 16.6,31.5 16.7,31.5 C18,31.6 19,32.7 19,34 C19,34.2 19,34.4 18.9,34.7 C18.6,35.7 17.7,36.5 16.5,36.5 Z" id="Path" fill="#04E1CB"></path>
+                <path d="M22,34 C22,35.1 22.9,36 24,36 C25.1,36 26,35.1 26,34 C26,33.7 25.9,33.3 25.8,33.1 C25.5,32.5 24.8,32 24,32 C23.4,32 22.9,32.2 22.5,32.6 C22.2,33 22,33.5 22,34 Z" id="Path" fill="#0B827C"></path>
+                <circle id="Oval" fill="#0B827C" cx="9" cy="34" r="2"></circle>
+                <path d="M16.7,31.5 C16.6,31.5 16.6,31.5 16.5,31.5 C15.1,31.5 14,32.6 14,34 C14,35.4 15.1,36.5 16.5,36.5 C17.6,36.5 18.6,35.7 18.9,34.7 C19,34.5 19,34.3 19,34 C19,32.7 18,31.6 16.7,31.5 Z" id="Path" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </symbol>
 </svg>

package/src/modules/base-elements/headerBase/headerBase.ts

@@ -14,6 +14,7 @@ const VALID_BRANDS = [
     "marketing",
     "partners",
     "platform",
+    "revenue",
     "sales",
     "service",
     "success"

package/src/modules/base-elements/sidebarBase/sidebarBase.ts

@@ -1,25 +1,49 @@
 import { LightningElement } from "lwc";
 
-const HEIGHT_OF_SIDEBAR_ITEM = 32;
+export const HEIGHT_OF_SIDEBAR_ITEM = 32;
+export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
 
 export class SidebarBase extends LightningElement {
-    /*Scroll to selected tree item */
-    private onSelectedItemRendered(event: CustomEvent) {
-        event.preventDefault();
-        const selectedTreeItem = event.detail.element;
-        if (selectedTreeItem) {
-            const sidebarContent = this.template.querySelector(
+    _sidebarContent: HTMLElement | null = null;
+    selectedTreeItem: HTMLElement | null = null;
+
+    timerId: ReturnType<typeof setTimeout> | null = null;
+
+    get sidebarContent() {
+        if (!this._sidebarContent) {
+            this._sidebarContent = this.template.querySelector(
                 ".sidebar-content-tree"
             );
-            if (sidebarContent) {
-                sidebarContent.scrollTo({
-                    top:
-                        selectedTreeItem.offsetTop +
-                        HEIGHT_OF_SIDEBAR_ITEM + // add height of sidebar item
-                        HEIGHT_OF_SIDEBAR_ITEM * 2, // add height of 2 more items so that user can see at least two more items after selected item
-                    behavior: "smooth"
-                });
-            }
+        }
+        return this._sidebarContent;
+    }
+
+    private onSelectedItemRendered(event: CustomEvent) {
+        event.stopPropagation();
+        this.selectedTreeItem = event.detail.element;
+
+        // Implementing debouncing kind of logic here, So that multiple scrolls won't be triggered during multiple renders of selected item
+
+        if (this.timerId) {
+            clearTimeout(this.timerId);
+        }
+        this.timerId = setTimeout(
+            () => this.scrollToSelectedTreeItem(),
+            WAIT_TIME_BEFORE_SCROLL_IN_MS
+        );
+    }
+
+    /*Scroll to selected tree item */
+    private scrollToSelectedTreeItem() {
+        if (this.selectedTreeItem && this.sidebarContent) {
+            const scrollHeight: number =
+                this.selectedTreeItem.getBoundingClientRect().bottom -
+                this.sidebarContent.getBoundingClientRect().bottom + // We need to remove parent bottom
+                HEIGHT_OF_SIDEBAR_ITEM * 3; // add height of 3 more items so that user can see at least three more items after selected item
+            this.sidebarContent.scrollTo({
+                top: scrollHeight,
+                behavior: "smooth"
+            });
         }
     }
 }

package/src/modules/dx/headerSearch/headerSearch.html

@@ -56,7 +56,6 @@
                     shortcut-key="k"
                     size="small"
                     type="search"
-                    value={searchBox.value}
                 ></dx-input>
             </dx-dropdown>
         </template>

package/src/modules/utils/browser/browser.ts

@@ -2,18 +2,16 @@
  * Returns whether given element is in browser viewport or not
  */
 function isInViewport(element: HTMLElement): boolean {
-    if (element) {
-        const rect = element.getBoundingClientRect();
-        return (
-            rect.top >= 0 &&
-            rect.left >= 0 &&
-            rect.bottom <=
-                (window.innerHeight || document.documentElement.clientHeight) &&
-            rect.right <=
-                (window.innerWidth || document.documentElement.clientWidth)
-        );
-    }
-    return false;
+    const rect = element?.getBoundingClientRect();
+    return (
+        rect &&
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <=
+            (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <=
+            (window.innerWidth || document.documentElement.clientWidth)
+    );
 }
 
 export { isInViewport };