@salesforcedevs/dx-components 1.3.210-lnb17-alpha → 1.3.210-lnb19-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.210-lnb17-alpha",
+    "version": "1.3.210-lnb19-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -15,9 +15,7 @@ dx-empty-state {
 
 .sidebar-content {
     overflow-y: auto;
-    padding-bottom: var(--dx-g-spacing-md);
-    margin-bottom: var(--dx-g-spacing-2xl);
-    padding-top: var(--dx-g-spacing-sm);
+    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-md);
 }
 
 .loading-skeleton {
@@ -58,7 +56,7 @@ dx-empty-state {
 .results-heading {
     --dx-g-text-body-color: var(--sds-g-gray-14);
 
-    padding-bottom: var(--dx-g-spacing-sm);
+    margin-bottom: var(--dx-g-spacing-sm);
     font-weight: var(--dx-g-font-bold);
 }
 

package/src/modules/dxBaseElements/sidebarBase/sidebarBase.ts

@@ -1,4 +1,4 @@
-import { LightningElement, api, track } from "lwc";
+import { LightningElement, api } from "lwc";
 import type { OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 
@@ -14,6 +14,8 @@ export class SidebarBase extends LightningElement {
     mobile: boolean = true;
     expanded: boolean = true;
     _value?: string = undefined;
+    showBoxShadow: boolean = false;
+    private scrolling: boolean = false;
 
     @api langValuePath: string = "id";
     @api language!: string;
@@ -47,16 +49,26 @@ export class SidebarBase extends LightningElement {
         return this._sidebarContent;
     }
 
-    @track showBoxShadow = false;
-
-    handleScroll(scrollEvent) {
+    /**
+     * This method is to handle the scroll event for LNB and show box shadow
+     * @param scrollEvent
+     */
+    handleScroll(scrollEvent: any) {
         const lnb = scrollEvent.target;
 
-        // Check if lnb is scrolled
-        if (lnb.scrollTop > 0 && lnb.scrollHeight > lnb.clientHeight) {
-            this.showBoxShadow = true;
-        } else {
-            this.showBoxShadow = false;
+        if (!this.scrolling) {
+            this.scrolling = true;
+            // Set a timeout to handle scroll event after a delay
+            setTimeout(() => {
+                // Check if lnb is scrolled
+                if (lnb.scrollTop > 0 && lnb.scrollHeight > lnb.clientHeight) {
+                    this.showBoxShadow = true;
+                } else {
+                    this.showBoxShadow = false;
+                }
+                // Reset scrolling back to false after handling the scroll
+                this.scrolling = false;
+            }, 200);
         }
     }
 

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -27,8 +27,7 @@
 }
 
 .padding-horizontal {
-    padding-left: var(--dx-g-spacing-2xl);
-    padding-right: var(--dx-g-spacing-lg);
+    padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
     border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
@@ -141,6 +140,7 @@
     border-right: 1px solid var(--dx-g-gray-90);
     height: var(--dx-g-spacing-2xl);
     align-items: center;
+    margin-top: var(--dx-g-spacing-2xl);
 }
 
 @media screen and (max-width: 1279px) {

package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css

@@ -18,10 +18,7 @@
 }
 
 .sidebar-item:focus-visible {
-    padding-left: 0;
-    margin-left: var(--dx-g-spacing-2xl);
-    padding-right: 0;
-    margin-right: var(--dx-g-spacing-lg);
+    margin: 0 calc(var(--dx-g-spacing-2xs) + 1px);
     outline: 2px solid var(--dx-g-blue-vibrant-40);
     border-radius: 2px;
 }