@salesforcedevs/dx-components 1.3.72 → 1.3.73-alpha.1

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

@@ -1,4 +1,3 @@
-@import "dxHelpers/code";
 @import "dxHelpers/text";
 @import "./darkTheme.css";
 @import "./lightTheme.css";
@@ -102,7 +101,7 @@ div.code-block-content {
     background: var(--dx-g-gray-95);
 }
 
-code[class*="language-"] {
+code[class*="shiki"] {
     margin-left: -11px;
 }
 
@@ -110,19 +109,36 @@ code[class*="language-"] {
     margin-right: var(--dx-g-spacing-xs);
 }
 
-pre[class*="language-"] {
+.italic {
+    font-style: italic;
+}
+
+pre[class*="shiki"] {
+    font-size: 14px;
     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,25 +7,6 @@
                         { 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, CodeBlockLanguage } from "typings/custom";
+import { CodeBlockTheme } from "typings/custom";
 import cx from "classnames";
-import Prism from "dxUtils/prismjs";
+import { Shiki } from "dxUtils/shiki";
 import {
     getLocalStorageData,
     setLocalStorageData
@@ -24,39 +24,6 @@ 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;
@@ -66,11 +33,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();
     }
 
@@ -78,12 +45,16 @@ 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,
@@ -104,7 +75,7 @@ export default class CodeBlock extends LightningElement {
         return cx(`dx-theme-${this.theme}`);
     }
 
-    formatCodeBlock() {
+    async formatCodeBlock() {
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
 
@@ -117,17 +88,13 @@ export default class CodeBlock extends LightningElement {
             "vvvvv$1vvvvv"
         );
 
-        if (
-            !this.isEncoded &&
-            this.markupLangs.includes(this.selectedLanguage.id || "")
-        ) {
-            // Temporarily replace HTML comment characters, which Prism would also strip
-            cleanCodeBlock = `<!--${cleanCodeBlock.replace(
+        if (!this.isEncoded && Shiki.isMarkupLanguage(this.language)) {
+            cleanCodeBlock = `${cleanCodeBlock.replace(
                 /<!--(.*?)-->/gs,
                 "@@$1##"
-            )}-->`;
+            )}`;
         } else {
-            // If this is a non-encoded markup language, encode angle brackets that Prism would strip
+            // If this is a non-encoded markup language, encode angle brackets
             cleanCodeBlock = this.isEncoded
                 ? cleanCodeBlock
                 : cleanCodeBlock.replace(/</g, "&lt").replace(/>/g, "&gt");
@@ -136,42 +103,53 @@ export default class CodeBlock extends LightningElement {
         // eslint-disable-next-line
         templateEl.innerHTML = `<pre class='codeblock'>${cleanCodeBlock}</pre>`;
 
-        const codeBlockEls = templateEl.content.querySelectorAll("pre");
-        codeBlockEls.forEach((codeBlockEl) => {
-            // eslint-disable-next-line
-            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
+        const codeBlockEls = Array.from(
+            templateEl.content.querySelectorAll("pre")
+        );
+
+        const promisesForHighlighted = codeBlockEls.map((codeBlockEl) =>
             // eslint-disable-next-line
-            codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
-                /vvvvv(.+?)vvvvv/g,
-                "<span class='token italic'>$1</span>"
-            );
-        });
+            Shiki.codeToHtml(codeBlockEl.innerHTML, {
+                lang: this.language
+            })
+                .then((highlightedCode) => {
+                    // for custom markup content, it is a workaround to be refactored later.
+                    const codeTemplate = document.createElement("template");
+                    // eslint-disable-next-line
+                    this.language !== "text"
+                        ? // eslint-disable-next-line
+                          (codeTemplate.innerHTML = highlightedCode)
+                        : (codeTemplate.textContent = this._codeBlock.trim());
+                    // eslint-disable-next-line
+                    codeBlockEl.innerHTML = "";
+                    codeBlockEl.appendChild(codeTemplate.content);
+
+                    // 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);
 
         if (divEl) {
             // eslint-disable-next-line
             divEl.innerHTML = "";
             divEl.append(templateEl.content);
-            if (this.markupLangs.includes(this.selectedLanguage.id || "")) {
+
+            if (Shiki.isMarkupLanguage(this.language)) {
                 const res = this.template.querySelector(`code.language-markup`);
                 if (res) {
                     // Restore any temporarily replaced HTML comment characters
@@ -185,25 +163,6 @@ 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
@@ -217,9 +176,8 @@ 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
@@ -236,6 +194,9 @@ 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", {
@@ -247,16 +208,6 @@ 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,9 +172,8 @@ 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,7 +62,10 @@
                                             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"
@@ -85,7 +88,9 @@
                                                 {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,9 +80,10 @@ 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,8 +81,7 @@ 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"
@@ -159,8 +158,7 @@ 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,6 +67,8 @@ 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/header/header.html

@@ -24,7 +24,10 @@
                     class="header-tbid-login"
                     onclick={closeMobileNavMenu}
                 >
-                    <dw-tbid-login-menu></dw-tbid-login-menu>
+                    <dw-tbid-login-menu
+                        tbid-api-base-url={tbidApiBaseUrl}
+                        tbid-base-url={tbidBaseUrl}
+                    ></dw-tbid-login-menu>
                 </div>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button

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

@@ -17,9 +17,7 @@ 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,9 +79,8 @@ 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,9 +51,11 @@ 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;
@@ -213,9 +215,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,11 +247,8 @@ 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/headerBase/headerBase.ts

@@ -38,6 +38,8 @@ export abstract class HeaderBase extends LightningElement {
     @api signupLink?: string | null = null;
     @api href = null;
     @api subtitle!: string;
+    @api tbidApiBaseUrl: string | null = null;
+    @api tbidBaseUrl: string | null = null;
     @api title: string = "Salesforce";
     @api version?: string | null = null;
     @api bannerMarkup =

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

@@ -19,10 +19,8 @@ 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;