@salesforcedevs/dx-components 0.43.3-tree-selected-scroll → 0.43.3-tree-selected-scroll-4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.43.3-tree-selected-scroll",
+    "version": "0.43.3-tree-selected-scroll-4",
     "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

@@ -0,0 +1,31 @@
+import { LightningElement } from "lwc";
+
+export const HEIGHT_OF_SIDEBAR_ITEM = 32;
+
+export class SidebarBase extends LightningElement {
+    _sidebarContent: HTMLElement | null = null;
+    get sidebarContent() {
+        if (!this._sidebarContent) {
+            this._sidebarContent = this.template.querySelector(
+                ".sidebar-content-tree"
+            );
+        }
+        return this._sidebarContent;
+    }
+
+    /*Scroll to selected tree item */
+    private onSelectedItemRendered(event: CustomEvent) {
+        event.stopPropagation();
+        const selectedTreeItem = event.detail.element;
+        if (selectedTreeItem && this.sidebarContent) {
+            const scrollHeight: number =
+                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/dx/sidebar/sidebar.html

@@ -88,6 +88,7 @@
                 tree-root={tree.tree}
                 onselect={onSelect}
                 value={value}
+                onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>
     </div>

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

@@ -1,6 +1,6 @@
 import cx from "classnames";
 import { track as trackAnalytics } from "dx/instrumentation";
-import { LightningElement, api, track } from "lwc";
+import { api, track } from "lwc";
 import {
     TreeNode,
     SidebarGtmAction,
@@ -9,11 +9,12 @@ import {
 import { getSidebarSearchParams } from "utils/coveo";
 import { toJson } from "utils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
+import { SidebarBase } from "base-elements/sidebarBase";
 
 const MOBILE_SIZE_MATCH = "768px";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
-export default class Sidebar extends LightningElement {
+export default class Sidebar extends SidebarBase {
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
     @api coveoSearchHub!: string;

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -49,7 +49,7 @@
                     ></dx-input>
                 </div>
             </div>
-            <div class="sidebar-content" if:true={anyResultMatch}>
+            <div class="sidebar-content sidebar-content-tree" if:true={anyResultMatch}>
                 <dx-tree
                     for:each={filteredTrees}
                     for:item="tree"
@@ -57,6 +57,7 @@
                     tree-root={tree.tree}
                     onselect={onSelect}
                     value={value}
+                    onselecteditemrendered={onSelectedItemRendered}
                 ></dx-tree>
             </div>
             <dx-empty-state

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -1,15 +1,16 @@
 import cx from "classnames";
 import { track } from "dx/instrumentation";
-import { LightningElement, api } from "lwc";
+import { api } from "lwc";
 
 import { TreeNode, SidebarGtmAction } from "typings/custom";
 import { toJson } from "utils/normalizers";
+import { SidebarBase } from "base-elements/sidebarBase";
 
 const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
-export default class Sidebar extends LightningElement {
+export default class Sidebar extends SidebarBase {
     @api header: string = "";
 
     @api

package/src/modules/dx/treeItem/treeItem.css

@@ -4,11 +4,6 @@
     display: block;
 }
 
-/* This is to scroll to some more space in the bottom so that user will see some more available items in the bottom */
-dx-tree-tile {
-    scroll-margin-bottom: 90px;
-}
-
 button {
     width: 100%;
     text-align: left;

package/src/modules/dx/treeItem/treeItem.ts

@@ -2,6 +2,7 @@ import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
 import { track } from "dx/instrumentation";
 import { SidebarGtmAction } from "typings/custom";
+import { isInViewport } from "utils/browser";
 
 const DEFAULT_TARGET = "_self";
 
@@ -62,18 +63,19 @@ export default class TreeItem extends LightningElement {
     }
 
     renderedCallback(): void {
+        this.sendEventToParentIfSelected();
+    }
+
+    private sendEventToParentIfSelected(): void {
         /**
-         * This is to scroll to the selected element in the sidebar if it's not visible in the viewport
-         * Please refer https://stackoverflow.com/a/67433987/5059959 for reason of values given to scrollIntoView props
+         * This is to send selected element reference to parent if it's not visible in the viewport
+         * Parent component will use the elements offsetTop scrollTo that element's position
          */
-
         if (this.isSelected) {
             const element = this.template.querySelector("dx-tree-tile");
-            if (element) {
-                element.scrollIntoView({
-                    block: "nearest",
-                    inline: "nearest",
-                    behavior: "smooth"
+            if (element && !isInViewport(element)) {
+                this.fireEvent("selecteditemrendered", {
+                    element
                 });
             }
         }

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

@@ -0,0 +1,17 @@
+/**
+ * Returns whether given element is in browser viewport or not
+ */
+function isInViewport(element: HTMLElement): boolean {
+    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 };