@salesforcedevs/dx-components 1.19.6 → 1.20.0-rnb-scroll

package/package.json

@@ -1,10 +1,11 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.19.6",
+    "version": "1.20.0-rnb-scroll",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
-        "node": "20.x"
+        "node": "20.x",
+        "yarn": "1.22.19"
     },
     "publishConfig": {
         "access": "public"
@@ -44,7 +45,7 @@
         "luxon": "3.4.4"
     },
     "volta": {
-        "node": "20.19.0"
-    },
-    "gitHead": "693b52f254e6c2316d84b5917ceea3ccd9416549"
+        "node": "20.19.0",
+        "yarn": "1.22.19"
+    }
 }

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -72,7 +72,7 @@ export default class CodeBlock extends LightningElement {
         { label: "GTL", id: "gtl" },
         { label: "LWC", id: "lwc" },
         { label: "SQL Documentation", id: "sql_docs_template" },
-        { label: "Agentforce Script", id: "afscript" }
+        { label: "Agent Script", id: "agentscript" }
     ];
 
     _codeBlock: string = "";

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

@@ -25,12 +25,40 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
+.toc-content-header {
+    width: 100%;
+}
+
+.toc-content-header[show-shadow="true"] {
+    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
+}
+
+.toc-content-header[show-shadow="true"] .toc_title {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.toc-items {
+    overflow-y: auto;
+    padding-bottom: 80px;
+    padding-right: 10px;
+}
+
+.scroll-shadow {
+    position: sticky;
+    bottom: -80px; /* to maintain padding given to toc-items */
+    height: 5px;
+    background: linear-gradient(to bottom, transparent, var(--dx-g-gray-90));
+    transition: opacity 0.3s;
+    opacity: 0;
+}
+
 .dx-text-display-8 {
     padding-top: var(--dx-g-spacing-sm);
     transition: var(--dx-g-transition-hue-1x);
 }
 
 .content-button {
+    display: block;
     line-height: var(--dx-g-text-lg);
     color: var(--dx-g-blue-vibrant-20);
     font-family: var(--dx-g-font-sans);

package/src/modules/dx/toc/toc.html

@@ -1,19 +1,24 @@
 <template>
     <div class="toc" role="navigation">
         <div class="toc toc_content">
-            <h2 class="dx-text-display-8 toc_title">{header}</h2>
-            <template for:each={options} for:item="option">
-                <a
-                    href={option.anchor}
-                    class={option.className}
-                    onclick={onClick}
-                    contentid={option.id}
-                    data-text={option.label}
-                    key={option.id}
-                >
-                    {option.label}
-                </a>
-            </template>
+            <div class="toc-content-header" show-shadow={showBoxShadow}>
+                <h2 class="dx-text-display-8 toc_title">{header}</h2>
+            </div>
+            <div class="toc-items" onscroll={handleScroll}>
+                <template for:each={options} for:item="option">
+                    <a
+                        href={option.anchor}
+                        class={option.className}
+                        onclick={onClick}
+                        contentid={option.id}
+                        data-text={option.label}
+                        key={option.id}
+                    >
+                        {option.label}
+                    </a>
+                </template>
+                <div class="scroll-shadow"></div>
+            </div>
         </div>
     </div>
     <div>

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

@@ -3,8 +3,12 @@ import cx from "classnames";
 import { ContentElement } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { track as sendGtm } from "dxUtils/analytics";
+import { handleScroll } from "dxUtils/handleScroll";
 
 export default class Toc extends LightningElement {
+    showBoxShadow: boolean = false;
+    handleScroll = handleScroll.bind(this);
+
     @api header!: string;
 
     @api

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,17 @@
+export function handleScroll(this: any, scrollEvent: any) {
+    const { scrollTop, scrollHeight, clientHeight } = scrollEvent.target;
+
+    // to show shadow box at bottom of list container
+    const shadow = this.template.querySelector(".scroll-shadow");
+
+    if (shadow) {
+        const isScrollable = scrollHeight > clientHeight;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 75; //subtracting to maintain the padding given to toc-items
+
+        shadow.style.opacity = isScrollable && !isAtBottom ? 1 : 0;
+    }
+
+    setTimeout(() => {
+        this.showBoxShadow = scrollTop > 0 && scrollHeight > clientHeight;
+    }, 200);
+}

package/src/modules/dxUtils/shiki/shiki.ts

@@ -88,7 +88,7 @@ const OPTIONAL_LANGUAGES: Record<string, any> = {
     // @ts-ignore
     dataweave: getCustomLanguageGrammars().dataweave,
     // @ts-ignore
-    afscript: getCustomLanguageGrammars().afscript
+    agentscript: getCustomLanguageGrammars().agentscript
 };
 
 // Initialize Shiki highlighter with fine-grained modules for better performance