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

package/package.json

@@ -1,10 +1,11 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.19.6",
+    "version": "1.20.0-rnb-scroll-2",
     "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

@@ -1,6 +1,10 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/text";
 
+:host {
+    --dx-c-toc-padding-bottom: 80px;
+}
+
 .toc {
     display: flex;
     flex-direction: row;
@@ -25,12 +29,35 @@
     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: var(--dx-c-toc-padding-bottom);
+    padding-right: var(--dx-g-spacing-smd);
+}
+
+.toc-items[show-bottom-shadow="true"] {
+    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
+}
+
 .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,27 @@
 <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"
+                show-bottom-shadow={showBoxShadowBottom}
+                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>
         </div>
     </div>
     <div>

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

@@ -3,8 +3,15 @@ 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;
+    showBoxShadowBottom: boolean = false;
+    private scrolling: boolean = false;
+    private scrollToBottom: boolean = false;
+    handleScroll = handleScroll.bind(this);
+
     @api header!: string;
 
     @api
@@ -38,6 +45,37 @@ export default class Toc extends LightningElement {
 
     @track _options!: Array<ContentElement>;
 
+    // to show shadow box at bottom of list container
+    private showShadowAtBottom = (event: any) => {
+        const list = event.target;
+
+        if (!this.scrollToBottom) {
+            this.scrollToBottom = true;
+            // Set a timeout to handle scroll event after a delay
+            setTimeout(() => {
+                const isScrollable = list.scrollHeight > list.clientHeight;
+                const isAtBottom =
+                    list.scrollTop + list.clientHeight >=
+                    list.scrollHeight - 75;
+
+                this.showBoxShadowBottom = isScrollable && !isAtBottom;
+
+                // Reset scrolling back to false after handling the scroll
+                this.scrollToBottom = false;
+            }, 100);
+        }
+    };
+
+    renderedCallback(): void {
+        const list = this.template.querySelector(".toc-items");
+        list?.addEventListener("scroll", this.showShadowAtBottom);
+    }
+
+    disconnectedCallback(): void {
+        const list = this.template.querySelector(".toc-items");
+        list?.removeEventListener("scroll", this.showShadowAtBottom);
+    }
+
     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;
@@ -61,29 +63,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,20 @@
+/**
+ * This generic method is to handle the scroll event and show box shadow below header
+ * @param scrollEvent
+ */
+export function handleScroll(this: any, scrollEvent: any) {
+    const listContainer = scrollEvent.target;
+
+    if (!this.scrolling) {
+        this.scrolling = true;
+        // Set a timeout to handle scroll event after a delay
+        setTimeout(() => {
+            // Check if scrolled
+            this.showBoxShadow =
+                listContainer.scrollTop > 0 &&
+                listContainer.scrollHeight > listContainer.clientHeight;
+            // Reset scrolling back to false after handling the scroll
+            this.scrolling = false;
+        }, 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