@salesforcedevs/dx-components 1.18.9-rnb-scroll → 1.18.9-rnb-scroll1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.18.9-rnb-scroll",
+    "version": "1.18.9-rnb-scroll1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/toc/toc.css

@@ -25,8 +25,11 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
+.toc-content-header {
+    width: 100%;
+}
+
 .toc-content-header[show-shadow="true"] {
-    width: 132px;
     box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
 }
 
@@ -37,7 +40,8 @@
 .toc-items {
     max-height: calc(100vh - 200px);
     overflow-y: auto;
-    padding-bottom: 80px;
+    padding-bottom: 100px;
+    padding-right: 10px;
 }
 
 .dx-text-display-8 {

package/src/modules/dx/toc/toc.ts

@@ -3,12 +3,11 @@ import cx from "classnames";
 import { ContentElement } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { track as sendGtm } from "dxUtils/analytics";
-import { SidebarBase } from "dxBaseElements/sidebarBase";
+import { handleScroll } from 'dxUtils/handleScroll';
 
 export default class Toc extends LightningElement {
     showBoxShadow: boolean = false;
-    private scrolling: boolean = false;
-    handleScroll: (e: any) => void = () => {};
+    handleScroll = handleScroll.bind(this);
 
     @api header!: string;
 
@@ -43,10 +42,6 @@ export default class Toc extends LightningElement {
 
     @track _options!: Array<ContentElement>;
 
-    connectedCallback() {
-        this.handleScroll = SidebarBase.prototype.handleScroll.bind(this);
-    }
-
     private onClick(e: Event) {
         const target = e.currentTarget as HTMLElement;
         const id = target.getAttribute("contentid");

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

@@ -2,12 +2,14 @@ import { LightningElement, api } from "lwc";
 import type { OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { Brand, DevCenterConfig } from "typings/custom";
+import { handleScroll } from 'dxUtils/handleScroll';
 
 export const HEIGHT_OF_SIDEBAR_ITEM = 32;
 export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
 
 export class SidebarBase extends LightningElement {
     _sidebarContent: HTMLElement | null = null;
+    handleScroll = handleScroll.bind(this);
 
     selectedElement: HTMLElement | null = null;
     timerId: ReturnType<typeof setTimeout> | null = null;
@@ -16,7 +18,6 @@ export class SidebarBase extends LightningElement {
     expanded: boolean = true;
     _value?: string = undefined;
     showBoxShadow: boolean = false;
-    private scrolling: boolean = false;
     _devCenter!: DevCenterConfig;
 
     @api langValuePath: string = "id";
@@ -61,29 +62,6 @@ export class SidebarBase extends LightningElement {
         return this._sidebarContent;
     }
 
-    /**
-     * This method is to handle the scroll event for LNB and show box shadow
-     * @param scrollEvent
-     */
-    handleScroll(scrollEvent: any) {
-        const lnb = scrollEvent.target;
-
-        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);
-        }
-    }
-
     renderedCallback(): void {
         /**
          * Implementing debouncing kind of logic here to scroll to selected element once tree rendering is done

package/src/modules/dxUtils/handleScroll/handleScroll.ts

@@ -0,0 +1,7 @@
+export function handleScroll(this: any, scrollEvent: any) {
+  const list = scrollEvent.target;
+  
+  setTimeout(() => {
+    this.showBoxShadow = (list.scrollTop > 0 && list.scrollHeight > list.clientHeight);
+  }, 200);
+}