@salesforcedevs/dx-components 1.3.83 → 1.3.84

package/lwc.config.json

@@ -1,11 +1,7 @@
 {
     "modules": [
-        {
-            "dir": "src/modules"
-        },
-        {
-            "npm": "@salesforcedevs/dw-components"
-        }
+        { "dir": "src/modules" },
+        { "npm": "@salesforcedevs/dw-components" }
     ],
     "expose": [
         "dx/audio",
@@ -94,6 +90,7 @@
         "dxHelpers/animations",
         "dxHelpers/button",
         "dxHelpers/card",
+        "dxHelpers/code",
         "dxHelpers/commonHeader",
         "dxHelpers/reset",
         "dxHelpers/scrollbar",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.83",
+    "version": "1.3.84",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -24,7 +24,6 @@
         "lodash.kebabcase": "^4.1.1",
         "microtip": "0.2.2",
         "salesforce-oauth2": "^0.2.0",
-        "shiki": "^0.11.1",
         "throttle-debounce": "^5.0.0",
         "uuid": "^9.0.0"
     },
@@ -41,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "97b96b6a71af7312811bd937293c9da3102ad443"
+    "gitHead": "09b7aafdaf3a75bf49ecf7691fb51378e6a9c332"
 }

package/src/modules/dx/breadcrumbs/breadcrumbs.ts

@@ -85,14 +85,16 @@ export default class Breadcrumbs extends LightningElement {
         breadcrumbs: Breadcrumb[]
     ): NormalizedBreadcrumb[] {
         const { length } = breadcrumbs;
-        return breadcrumbs.map((breadcrumb, i): NormalizedBreadcrumb => {
-            const last = i === length - 1;
-            return {
-                ...breadcrumb,
-                asLink: this.hideCurrentLocation || !last,
-                last
-            };
-        });
+        return breadcrumbs.map(
+            (breadcrumb, i): NormalizedBreadcrumb => {
+                const last = i === length - 1;
+                return {
+                    ...breadcrumb,
+                    asLink: this.hideCurrentLocation || !last,
+                    last
+                };
+            }
+        );
     }
 
     private get breadcrumbDropdownOptions() {

package/src/modules/dx/cardContent/cardContent.html

@@ -21,10 +21,7 @@
             />
         </a>
         <div
-            class="
-                dx-card-base_section-vertical dx-card-base_column
-                card_section-text
-            "
+            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
             <span if:true={label} part="label" class="label dx-text-label-3">
                 {label}

package/src/modules/dx/cardDocs/cardDocs.html

@@ -7,10 +7,7 @@
             class="image dx-card-base_image"
         />
         <div
-            class="
-                dx-card-base_section-vertical dx-card-base_column
-                card_section-text
-            "
+            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
             <span class="dx-text-label-3">{label}</span>
             <dx-card-title

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

@@ -1,3 +1,4 @@
+@import "dxHelpers/code";
 @import "dxHelpers/text";
 @import "./darkTheme.css";
 @import "./lightTheme.css";
@@ -101,7 +102,7 @@ div.code-block-content {
     background: var(--dx-g-gray-95);
 }
 
-code[class*="shiki"] {
+code[class*="language-"] {
     margin-left: -11px;
 }
 
@@ -109,36 +110,19 @@ code[class*="shiki"] {
     margin-right: var(--dx-g-spacing-xs);
 }
 
-.italic {
-    font-style: italic;
-}
-
-pre[class*="shiki"] {
-    font-size: 14px;
+pre[class*="language-"] {
     border-radius: 0 0 0.3em 0.3em;
     padding-bottom: var(--dx-g-spacing-smd);
     background-color: unset;
     padding-top: var(--dx-g-spacing-sm);
 }
 
+pre[class*="language-"].line-numbers {
+    padding-left: 56px;
+}
+
 @media screen and (max-width: 640px) {
     .dx-code-block-heading {
         display: none;
     }
 }
-
-/* Adding line numbers via CSS counters */
-code {
-    counter-reset: step;
-    counter-increment: step 0;
-}
-
-code .line::before {
-    content: counter(step);
-    counter-increment: step;
-    width: 1rem;
-    margin-right: 1.5rem;
-    display: inline-block;
-    text-align: right;
-    color: rgba(115, 138, 148, 0.4);
-}

package/src/modules/dx/codeBlock/codeBlock.html

@@ -7,6 +7,25 @@
                         { title }
                     </div>
                 </div>
+                <template if:true={showLanguageDropdown}>
+                    <div class="toolbar-item">
+                        <dx-dropdown
+                            small="true"
+                            options={allLanguages}
+                            value={selectedLanguageId}
+                            onchange={onLanguageChange}
+                        >
+                            <dx-button
+                                icon-symbol="chevrondown"
+                                class="btn language-btn"
+                                variant="custom"
+                            >
+                                { selectedLanguageLabel }
+                            </dx-button>
+                        </dx-dropdown>
+                    </div>
+                    <div class="divider"></div>
+                </template>
                 <template if:true={showCodeSourceBtn}>
                     <div class="toolbar-item">
                         <dx-tooltip

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

@@ -1,7 +1,7 @@
 import { LightningElement, api, wire, track } from "lwc";
-import { CodeBlockTheme } from "typings/custom";
+import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
-import { Shiki } from "dxUtils/shiki";
+import Prism from "dxUtils/prismjs";
 import {
     getLocalStorageData,
     setLocalStorageData
@@ -24,6 +24,39 @@ export default class CodeBlock extends LightningElement {
     // if it is true, it renders code as is coming instead of wrapping it into html/xml comments tags.
     @api isEncoded = false;
 
+    private markupLangs = ["visualforce", "html", "xml"];
+    private _codeBlockRendered: boolean = false;
+    private componentLoaded: boolean = false;
+    private showLanguageDropdown: boolean = false;
+    private copyBtnText: string = "Click to copy";
+    private selectedLanguageLabel: string = "";
+    private selectedLanguageId: string = "";
+    private selectedLanguage: CodeBlockLanguage = { label: "Language", id: "" };
+    private allLanguages: CodeBlockLanguage[] = [
+        { label: "Language", id: "" },
+        { label: "Apex", id: "apex" },
+        { label: "Java", id: "java" },
+        { label: "Javascript", id: "javascript" },
+        { label: "CSS", id: "css" },
+        { label: "Visualforce", id: "visualforce" },
+        { label: "Html", id: "html" },
+        { label: "xml", id: "xml" },
+        { label: "TypeScript", id: "typescript" },
+        { label: "PHP", id: "php" },
+        { label: "JSON", id: "json" },
+        { label: "Swift", id: "swift" },
+        { label: "Kotlin", id: "kotlin" },
+        { label: "Python", id: "python" },
+        { label: "Bash", id: "bash" },
+        { label: "Shell", id: "shell" },
+        { label: "Shell", id: "sh" },
+        { label: "SQL", id: "sql" },
+        { label: "YAML", id: "yaml" },
+        { label: "Markdown", id: "markdown" },
+        { label: "Markdown", id: "md" },
+        { label: "JSX", id: "jsx" }
+    ];
+
     connectedCallback() {
         if (!this.theme) {
             this.theme = this.defaultTheme;
@@ -33,11 +66,11 @@ export default class CodeBlock extends LightningElement {
     _codeBlock: string = "";
     @api
     set codeBlock(value: string) {
+        this._codeBlockRendered = false;
         let match;
-        this._codeBlock = (
-            (match = preTagRegexp.exec(value.trim())) === null
-                ? value.trim()
-                : match[1]
+        this._codeBlock = ((match = preTagRegexp.exec(value.trim())) === null
+            ? value.trim()
+            : match[1]
         ).trim();
     }
 
@@ -45,16 +78,12 @@ export default class CodeBlock extends LightningElement {
         return this._codeBlock;
     }
 
-    private copyBtnText = "Click to copy";
     @track private theme: CodeBlockTheme | null = null;
 
     @wire(getLocalStorageData, { key: "dx-codeblock-theme" })
     updateThemeForCodeblock(value: any) {
         if (themes.includes(value)) {
             this.theme = value;
-            // As styles computation is static the code needs to be reformatted after a theme change
-            Shiki.setTheme(this.theme!);
-            this.formatCodeBlock();
         } else {
             setLocalStorageData(
                 LOCAL_STORAGE_KEY,
@@ -75,7 +104,7 @@ export default class CodeBlock extends LightningElement {
         return cx(`dx-theme-${this.theme}`);
     }
 
-    async formatCodeBlock() {
+    formatCodeBlock() {
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
 
@@ -88,13 +117,17 @@ export default class CodeBlock extends LightningElement {
             "vvvvv$1vvvvv"
         );
 
-        if (!this.isEncoded && Shiki.isMarkupLanguage(this.language)) {
-            cleanCodeBlock = `${cleanCodeBlock.replace(
+        if (
+            !this.isEncoded &&
+            this.markupLangs.includes(this.selectedLanguage.id || "")
+        ) {
+            // Temporarily replace HTML comment characters, which Prism would also strip
+            cleanCodeBlock = `<!--${cleanCodeBlock.replace(
                 /<!--(.*?)-->/gs,
                 "@@$1##"
-            )}`;
+            )}-->`;
         } else {
-            // If this is a non-encoded markup language, encode angle brackets
+            // If this is a non-encoded markup language, encode angle brackets that Prism would strip
             cleanCodeBlock = this.isEncoded
                 ? cleanCodeBlock
                 : cleanCodeBlock.replace(/</g, "&lt").replace(/>/g, "&gt");
@@ -103,62 +136,42 @@ export default class CodeBlock extends LightningElement {
         // eslint-disable-next-line
         templateEl.innerHTML = `<pre class='codeblock'>${cleanCodeBlock}</pre>`;
 
-        const codeBlockEls = Array.from(
-            templateEl.content.querySelectorAll("pre")
-        );
-
-        // temporary hack to avoid prismjs tokens from showing up in markup languages
-        const isDocs = window.location.href.includes("/docs/");
-
-        const promisesForHighlighted = codeBlockEls.map((codeBlockEl) =>
+        const codeBlockEls = templateEl.content.querySelectorAll("pre");
+        codeBlockEls.forEach((codeBlockEl) => {
             // eslint-disable-next-line
-            Shiki.codeToHtml(
-                Shiki.isMarkupLanguage(this.language) && !isDocs
-                    ? codeBlockEl.innerHTML
-                    : codeBlockEl.textContent,
-                {
-                    lang: this.language
-                }
-            )
-                .then((highlightedCode) => {
-                    codeBlockEl.classList.add("line-numbers");
-                    // for custom markup content, it is a workaround to be refactored later.
-                    const codeEl = document.createElement("code");
-                    // eslint-disable-next-line
-                    this.language !== "text"
-                        ? // eslint-disable-next-line
-                          (codeEl.innerHTML = highlightedCode)
-                        : (codeEl.textContent = highlightedCode.trim());
-                    // eslint-disable-next-line
-                    codeBlockEl.innerHTML = "";
-                    codeBlockEl.appendChild(codeEl);
-
-                    // Italicize anything marked as a "variable" by the docs team
-                    // eslint-disable-next-line
-                    codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
-                        /vvvvv(.+?)vvvvv/g,
-                        "<span class='token italic'>$1</span>"
-                    );
-                })
-                .catch((error) => {
-                    console.error(error);
-                    // Italicize anything marked as a "variable" by the docs team
-                    // eslint-disable-next-line
-                    codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
-                        /vvvvv(.+?)vvvvv/g,
-                        "<span class='token italic'>$1</span>"
-                    );
-                })
-        );
-
-        await Promise.all(promisesForHighlighted);
+            const codeHTML = codeBlockEl.innerHTML;
+            codeBlockEl.classList.add("line-numbers");
+            const codeEl = document.createElement("code");
+            codeEl.classList.add(
+                `language-${
+                    this.markupLangs.includes(this.selectedLanguage.id || "")
+                        ? "markup"
+                        : this.selectedLanguage.id
+                }`
+            );
+            // for custom markup content, it is a workaround to be refactored later.
+            // eslint-disable-next-line
+            this.language !== "text"
+                ? // eslint-disable-next-line
+                  (codeEl.innerHTML = codeHTML)
+                : (codeEl.textContent = this._codeBlock.trim());
+            // eslint-disable-next-line
+            codeBlockEl.innerHTML = "";
+            codeBlockEl.appendChild(codeEl);
+            Prism.highlightAllUnder(codeBlockEl);
+            // Italicize anything marked as a "variable" by the docs team
+            // eslint-disable-next-line
+            codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
+                /vvvvv(.+?)vvvvv/g,
+                "<span class='token italic'>$1</span>"
+            );
+        });
 
         if (divEl) {
             // eslint-disable-next-line
             divEl.innerHTML = "";
             divEl.append(templateEl.content);
-
-            if (Shiki.isMarkupLanguage(this.language)) {
+            if (this.markupLangs.includes(this.selectedLanguage.id || "")) {
                 const res = this.template.querySelector(`code.language-markup`);
                 if (res) {
                     // Restore any temporarily replaced HTML comment characters
@@ -172,6 +185,25 @@ export default class CodeBlock extends LightningElement {
         }
     }
 
+    onLanguageChange(newLang: any) {
+        this.selectedLanguage =
+            this.allLanguages.find(
+                (lang: CodeBlockLanguage) => lang.id === newLang.detail
+            ) || this.allLanguages[0];
+        this.selectedLanguageLabel = this.selectedLanguage.label;
+        this.selectedLanguageId = this.selectedLanguage.id;
+        this.formatCodeBlock();
+
+        gtmTrack(newLang, "custEv_ctaLinkClick", {
+            event: "custEv_ctaLinkClick",
+            click_text: newLang.detail,
+            element_title: "dx-dropdown",
+            click_url: this.selectedLanguageId,
+            element_type: "link",
+            content_category: "code block"
+        });
+    }
+
     /**
      * Note: There is a known issue in storybook@6.1.13 where some apis are not available if you access Storybook through IP address.
      * https://github.com/storybookjs/storybook/issues/13529
@@ -185,8 +217,9 @@ export default class CodeBlock extends LightningElement {
         });
 
         try {
-            const snippetContainer: HTMLElement | null =
-                this.template.querySelector(".code-block-content");
+            const snippetContainer: HTMLElement | null = this.template.querySelector(
+                ".code-block-content"
+            );
             if (snippetContainer && snippetContainer.textContent) {
                 await navigator.clipboard.writeText(
                     snippetContainer.textContent
@@ -203,9 +236,6 @@ export default class CodeBlock extends LightningElement {
 
     updateTheme(event: any) {
         this.theme = this.theme === DARK ? LIGHT : DARK;
-        // As styles computation is static the code needs to be reformatted after a theme change
-        Shiki.setTheme(this.theme);
-        this.formatCodeBlock();
         setLocalStorageData(LOCAL_STORAGE_KEY, this.theme);
 
         gtmTrack(event.target, "custEv_iconClick", {
@@ -217,6 +247,16 @@ export default class CodeBlock extends LightningElement {
     }
 
     renderedCallback() {
+        if (this._codeBlockRendered) {
+            return;
+        }
+        this.selectedLanguage =
+            this.allLanguages.find(
+                (l: CodeBlockLanguage) => l.id === this.language
+            ) || this.allLanguages[0];
+        this.selectedLanguageLabel = this.selectedLanguage.label;
+        this.selectedLanguageId = this.selectedLanguage.id;
         this.formatCodeBlock();
+        this._codeBlockRendered = true;
     }
 }

package/src/modules/dx/dropdown/dropdown.ts

@@ -172,8 +172,9 @@ export default class Dropdown extends LightningElement {
             ? this.findOptionElementIndex(this.value)
             : 0;
 
-        const optionToFocus: any =
-            this.optionsElements[defaultIndex < 0 ? 0 : defaultIndex];
+        const optionToFocus: any = this.optionsElements[
+            defaultIndex < 0 ? 0 : defaultIndex
+        ];
         if (optionToFocus) {
             optionToFocus.focus();
             this._focusedValue = optionToFocus.option.id;

package/src/modules/dx/filterMenu/filterMenu.html

@@ -62,10 +62,7 @@
                                             stroke-width="2"
                                             stroke-linecap="round"
                                             stroke-linejoin="round"
-                                            class="
-                                                feather feather-chevron-down
-                                                year-caret
-                                            "
+                                            class="feather feather-chevron-down year-caret"
                                         >
                                             <polyline
                                                 points="6 9 12 15 18 9"
@@ -88,9 +85,7 @@
                                                 {month.id}&nbsp;
                                                 <span
                                                     if:true={filtersDatesLoading}
-                                                    class="
-                                                        filters-dates-loading
-                                                    "
+                                                    class="filters-dates-loading"
                                                 ></span>
                                                 <span
                                                     if:false={filtersDatesLoading}

package/src/modules/dx/filterMenu/filterMenu.ts

@@ -80,10 +80,9 @@ export default class FilterMenu extends LightningElement {
 
     private setIntedeterminateStatus(checkbox: any, value: boolean) {
         if ("isYear" in checkbox.value && !checkbox.value.isYear) {
-            const yearCheckBox: any =
-                checkbox.parentElement.parentElement.parentElement.querySelector(
-                    ".checkbox-year"
-                );
+            const yearCheckBox: any = checkbox.parentElement.parentElement.parentElement.querySelector(
+                ".checkbox-year"
+            );
             yearCheckBox.indeterminate = value;
         }
     }

package/src/modules/dx/footer/links.ts

@@ -81,7 +81,8 @@ export const generalLinksRaw: OptionWithRequiredNested[] = [
         options: [
             {
                 link: {
-                    href: "https://trailhead.salesforce.com/trailblazer-community/feed"
+                    href:
+                        "https://trailhead.salesforce.com/trailblazer-community/feed"
                 },
                 label: "Trailblazer Community",
                 id: "Trailblazer Community"
@@ -158,7 +159,8 @@ export const termsLinks = [
         label: "Legal"
     },
     {
-        href: "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
+        href:
+            "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
         label: "Use of Cookies"
     },
     { href: "https://trust.salesforce.com/en/", label: "Trust" },

package/src/modules/dx/grid/grid.ts

@@ -67,8 +67,6 @@ export default class Grid extends LightningElement {
     }
 
     onSlotChange(e: Event) {
-        this._itemCount = (
-            e.target as LightningSlotElement
-        ).assignedElements().length;
+        this._itemCount = (e.target as LightningSlotElement).assignedElements().length;
     }
 }

package/src/modules/dx/popover/popover.ts

@@ -246,9 +246,9 @@ export default class Popover extends LightningElement {
         const elements = slot.assignedElements();
         const slotted = elements.length === 0 ? null : elements[0];
         // allows dropdown/select to compose popover
-        const slotElement = (
-            slotted?.tagName === "SLOT" ? slotted.firstChild : slotted
-        ) as HTMLElement | null;
+        const slotElement = (slotted?.tagName === "SLOT"
+            ? slotted.firstChild
+            : slotted) as HTMLElement | null;
         const isWorkToDo =
             slotElement &&
             (!this.control || !slotElement.isSameNode(this.control));

package/src/modules/dx/searchResults/searchResults.ts

@@ -19,7 +19,9 @@ interface CoveoSearch {
 
 declare const Coveo: CoveoSearch;
 
-function getPaginationState(event: CoveoSDK.IQuerySuccessEventArgs): {
+function getPaginationState(
+    event: CoveoSDK.IQuerySuccessEventArgs
+): {
     numberOfPages: number;
     currentPage: number;
 } {

package/src/modules/dx/select/select.ts

@@ -79,8 +79,9 @@ export default class Select extends LightningElement {
 
     get selectElement() {
         if (!this._selectElement) {
-            this._selectElement =
-                this.template.querySelector<HTMLSelectElement>("select");
+            this._selectElement = this.template.querySelector<HTMLSelectElement>(
+                "select"
+            );
         }
         return this._selectElement;
     }

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

@@ -51,11 +51,9 @@ export default class Sidebar extends SidebarBase {
 
     @api
     setInputValue(searchTerm: string) {
-        (
-            this.template.querySelector(
-                "dx-sidebar-search"
-            ) as unknown as SidebarSearch
-        )?.setInputValue(searchTerm);
+        ((this.template.querySelector(
+            "dx-sidebar-search"
+        ) as unknown) as SidebarSearch)?.setInputValue(searchTerm);
     }
 
     private expanded: boolean = true;
@@ -215,9 +213,9 @@ export default class Sidebar extends SidebarBase {
             return;
         }
 
-        const search = this.template.querySelector(
+        const search = (this.template.querySelector(
             "dx-sidebar-search"
-        ) as unknown as SidebarSearch;
+        ) as unknown) as SidebarSearch;
 
         if (
             this.isNearBottomOfSearchResults &&

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -247,8 +247,11 @@ export default class SidebarSearch extends LightningElement {
             return;
         }
 
-        const { isLoading, firstSearchExecuted, results } =
-            this.resultList.state;
+        const {
+            isLoading,
+            firstSearchExecuted,
+            results
+        } = this.resultList.state;
 
         if ((!firstSearchExecuted && !isLoading) || !this.value) {
             // coveo search is firing off some unwanted payloads on startup

package/src/modules/dx/tabPanelList/tabPanelList.ts

@@ -123,8 +123,8 @@ export default class TabPanelList extends LightningElement {
             "dx-tab-panel-item:not(.more-btn-container)"
         );
         const moreBtn = this.template.querySelector(".more-btn-container")!;
-        const containerWidth =
-            this.template.querySelector(".tablist")!.offsetWidth;
+        const containerWidth = this.template.querySelector(".tablist")!
+            .offsetWidth;
         let stopWidth = this.template.querySelector(
             "dx-tab-panel-item.more-btn-container"
         )!.offsetWidth;

package/src/modules/dxBaseElements/matchMediaElement/matchMediaElement.ts

@@ -19,8 +19,10 @@ const breakpointConfigs = [
 ];
 
 export abstract class MatchMediaElement extends LightningElement {
-    private deviceType: DEVICE_MOBILE | DEVICE_TABLET | DEVICE_DESKTOP =
-        DEVICE_DESKTOP;
+    private deviceType:
+        | DEVICE_MOBILE
+        | DEVICE_TABLET
+        | DEVICE_DESKTOP = DEVICE_DESKTOP;
     private matches: {
         match: MediaQueryList;
         callback: (e: MediaQueryListEvent | MediaQueryList) => void;