@salesforcedevs/dx-components 1.18.8 → 1.18.9-add-scroll

package/package.json

@@ -1,10 +1,11 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.18.8",
+    "version": "1.18.9-add-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": "e9d51d7dab7f574cbbc850c7201d3296ffd7f321"
+        "node": "20.19.0",
+        "yarn": "1.22.19"
+    }
 }

package/src/modules/dx/codeBlock/codeBlock.css

@@ -116,18 +116,9 @@ code[class*="shiki"] {
 
 pre[class*="shiki"] {
     border-radius: 0 0 0.3em 0.3em;
-    padding: 1em;
+    padding: 1em 1.5em;
     margin: 0.5em 0;
     overflow: auto;
-    /* stylelint-disable-next-line */
-    .line {
-        counter-increment: codeblock-line;
-
-        &::before {
-            content: counter(codeblock-line);
-            margin-right: 1.3em;
-        }
-    }
 }
 
 @media screen and (max-width: 640px) {

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

@@ -176,7 +176,7 @@ export default class CodeBlock extends LightningElement {
             const preElement = tempDiv.querySelector("pre");
 
             if (preElement) {
-                preElement.classList.add("codeblock");
+                preElement.classList.add("codeblock", languageForHighlighting);
 
                 // Italicize anything marked as a "variable" by the docs team
                 // eslint-disable-next-line

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

@@ -5,10 +5,13 @@ import { getSidebarSearchParams } from "dxUtils/coveo";
 import { toJson } from "dxUtils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
+import { handleScroll } from 'dxUtils/handleScroll';
 
 const MOBILE_SIZE_MATCH = "768px";
 
 export default class Sidebar extends SidebarBase {
+    handleScroll: (e: any) => void = () => {};
+
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
     @api coveoSearchHub!: string;
@@ -142,6 +145,8 @@ export default class Sidebar extends SidebarBase {
     }
 
     connectedCallback() {
+        this.handleScroll = handleScroll.bind(this);
+
         this.matchMedia = window.matchMedia(
             `(max-width: ${MOBILE_SIZE_MATCH})`
         );

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

@@ -3,7 +3,7 @@
 
 .toc {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: row;
     max-width: 240px;
     min-width: 80px;
     word-break: break-word;
@@ -25,12 +25,32 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
+.toc-content-header {
+    width: 100%;
+}
+
+.toc-content-header[show-shadow="true"] {
+    box-shadow: 0 4px 2px -2px var(--dx-g-gray-90);
+}
+
+.toc-content-header[show-shadow="true"] .toc_title {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.toc-items {
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+    padding-bottom: 100px;
+    padding-right: 10px;
+}
+
 .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,23 @@
 <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>
         </div>
     </div>
     <div>

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

@@ -3,8 +3,13 @@ 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;
+    private scrolling: boolean = false;
+    handleScroll: (e: any) => void = () => {};
+
     @api header!: string;
 
     @api
@@ -38,6 +43,10 @@ export default class Toc extends LightningElement {
 
     @track _options!: Array<ContentElement>;
 
+    connectedCallback() {
+        this.handleScroll = 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

@@ -61,29 +61,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,8 @@
+export function handleScroll(this: any, scrollEvent: any) {
+  console.log('calling')
+  const list = scrollEvent.target;
+  
+  setTimeout(() => {
+    this.showBoxShadow = (list.scrollTop > 0 && list.scrollHeight > list.clientHeight);
+  }, 200);
+}

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

@@ -1,11 +1,13 @@
-import { createHighlighterCore, HighlighterCore } from "shiki/core";
+import * as shiki from "shiki";
+
 import type { BundledLanguage, BundledTheme } from "shiki";
-import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
+import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
+
 interface ShikiSingleton {
-    highlighter: HighlighterCore | null;
+    highlighter: shiki.HighlighterCore | null;
     initialized: boolean;
-    initPromise: Promise<HighlighterCore> | null;
+    initPromise: Promise<shiki.HighlighterCore> | null;
 }
 
 const shikiInstance: ShikiSingleton = {
@@ -50,58 +52,47 @@ const LANGUAGE_MAP: Record<string, BundledLanguage> = {
 
 // Core languages that should be loaded immediately for best performance
 const CORE_LANGUAGES = [
-    // @ts-ignore
-    () => import("@shikijs/langs/apex"),
-    // @ts-ignore
-    () => import("@shikijs/langs/javascript"),
-    // @ts-ignore
-    () => import("@shikijs/langs/html"),
-    // @ts-ignore
-    () => import("@shikijs/langs/css"),
-    // @ts-ignore
-    () => import("@shikijs/langs/json"),
-    // @ts-ignore
-    () => import("@shikijs/langs/sql"),
-    // @ts-ignore
-    () => import("@shikijs/langs/bash"),
-    // @ts-ignore
-    () => import("@shikijs/langs/xml"),
-    // @ts-ignore
-    () => import("@shikijs/langs/graphql"),
-    // @ts-ignore
-    () => import("@shikijs/langs/jsx"),
-    // @ts-ignore
-    () => import("./customLanguages/ampscript.tmLanguage.json")
+    "apex",
+    "javascript",
+    "html",
+    "css",
+    "json",
+    "sql",
+    "bash",
+    "xml",
+    "graphql",
+    "jsx",
+    getCustomLanguageGrammars().ampscript
 ];
 
 // Non-critical languages that can be loaded asynchronously when needed
-const OPTIONAL_LANGUAGES: Record<string, () => Promise<any>> = {
+const OPTIONAL_LANGUAGES: Record<string, any> = {
     // @ts-ignore
-    typescript: () => import("@shikijs/langs/typescript"),
+    typescript: "typescript",
     // @ts-ignore
-    markdown: () => import("@shikijs/langs/markdown"),
+    markdown: "markdown",
     // @ts-ignore
-    python: () => import("@shikijs/langs/python"),
+    python: "python",
     // @ts-ignore
-    java: () => import("@shikijs/langs/java"),
+    java: "java",
     // @ts-ignore
-    yaml: () => import("@shikijs/langs/yaml"),
+    yaml: "yaml",
     // @ts-ignore
-    php: () => import("@shikijs/langs/php"),
+    php: "php",
     // @ts-ignore
-    swift: () => import("@shikijs/langs/swift"),
+    swift: "swift",
     // @ts-ignore
-    kotlin: () => import("@shikijs/langs/kotlin"),
+    kotlin: "kotlin",
     // @ts-ignore
-    handlebars: () => import("@shikijs/langs/handlebars"),
+    handlebars: "handlebars",
     // @ts-ignore
-    dataweave: () => import("./customLanguages/dataweave.tmLanguage.json"),
+    dataweave: getCustomLanguageGrammars().dataweave,
     // @ts-ignore
-    afscript: () => import("./customLanguages/afscript.tmLanguage.json")
+    afscript: getCustomLanguageGrammars().afscript
 };
 
 // Initialize Shiki highlighter with fine-grained modules for better performance
-async function initializeShiki(): Promise<HighlighterCore> {
+async function initializeShiki(): Promise<shiki.HighlighterCore> {
     if (shikiInstance.highlighter) {
         return shikiInstance.highlighter;
     }
@@ -110,15 +101,9 @@ async function initializeShiki(): Promise<HighlighterCore> {
         return shikiInstance.initPromise;
     }
 
-    shikiInstance.initPromise = createHighlighterCore({
-        themes: [
-            // @ts-ignore
-            import("@shikijs/themes/light-plus"),
-            // @ts-ignore
-            import("@shikijs/themes/material-theme-darker")
-        ],
-        langs: CORE_LANGUAGES,
-        engine: createOnigurumaEngine(import("shiki/wasm"))
+    shikiInstance.initPromise = shiki.createHighlighter({
+        themes: ["light-plus", "material-theme-darker"],
+        langs: CORE_LANGUAGES
     });
 
     try {
@@ -134,7 +119,7 @@ async function initializeShiki(): Promise<HighlighterCore> {
 
 // Async function to load additional languages when needed
 async function loadLanguageIfNeeded(
-    highlighter: HighlighterCore,
+    highlighter: shiki.HighlighterCore,
     language: string
 ): Promise<void> {
     const loadedLanguages = highlighter.getLoadedLanguages();
@@ -145,10 +130,7 @@ async function loadLanguageIfNeeded(
 
         if (languageLoader) {
             try {
-                const languageModule = await languageLoader();
-                await highlighter.loadLanguage(
-                    languageModule.default || languageModule
-                );
+                await highlighter.loadLanguage(languageLoader);
             } catch (error) {
                 console.warn(
                     `Failed to load optional language ${language}:`,

package/src/modules/dxUtils/shikiGrammars/shikiGrammars.html

@@ -0,0 +1,3 @@
+<template>
+    <!-- This is a utility module for importing custom language grammars for Shiki -->
+</template>