@salesforcedevs/dx-components 1.32.1-alpha.4 → 1.33.0-docs-alpha

package/package.json

@@ -1,48 +1,47 @@
 {
-    "name": "@salesforcedevs/dx-components",
-    "version": "1.32.1-alpha.4",
-    "description": "DX Lightning web components",
-    "license": "MIT",
-    "engines": {
-        "node": "20.x"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "dependencies": {
-        "@coveo/headless": "3.22.2",
-        "@floating-ui/dom": "1.5.1",
-        "@optimizely/optimizely-sdk": "5.3.0",
-        "@shikijs/colorized-brackets": "^3.12.2",
-        "@types/throttle-debounce": "5.0.2",
-        "@vimeo/player": "2.22.0",
-        "classnames": "2.5.1",
-        "composed-offset-position": "0.0.4",
-        "coveo-search-ui": "2.10113.0",
-        "debounce": "1.2.1",
-        "js-cookie": "3.0.5",
-        "lodash.defaults": "4.2.0",
-        "lodash.get": "4.4.2",
-        "lodash.kebabcase": "4.1.1",
-        "memoize-one": "6.0.0",
-        "microtip": "0.2.2",
-        "shiki": "^3.12.2",
-        "throttle-debounce": "5.0.0",
-        "uuid": "9.0.1"
-    },
-    "devDependencies": {
-        "@types/classnames": "2.3.1",
-        "@types/debounce": "1.2.4",
-        "@types/js-cookie": "3.0.6",
-        "@types/lodash.defaults": "4.2.9",
-        "@types/lodash.get": "4.4.9",
-        "@types/lodash.kebabcase": "4.1.9",
-        "@types/luxon": "3.4.2",
-        "@types/uuid": "8.3.4",
-        "@types/vimeo__player": "2.18.3",
-        "eventsourcemock": "2.0.0",
-        "luxon": "3.4.4",
-        "msw": "^2.12.4"
-    },
-    "gitHead": "e64bce535a62d5e89c1c3bfe226c424e99d28379"
-}
+  "name": "@salesforcedevs/dx-components",
+  "version": "1.33.0-docs-alpha",
+  "description": "DX Lightning web components",
+  "license": "MIT",
+  "engines": {
+    "node": "22.x"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@coveo/headless": "3.22.2",
+    "@floating-ui/dom": "1.5.1",
+    "@optimizely/optimizely-sdk": "5.3.0",
+    "@shikijs/colorized-brackets": "^3.12.2",
+    "@types/throttle-debounce": "5.0.2",
+    "@vimeo/player": "2.22.0",
+    "classnames": "2.5.1",
+    "composed-offset-position": "0.0.4",
+    "coveo-search-ui": "2.10113.0",
+    "debounce": "1.2.1",
+    "js-cookie": "3.0.5",
+    "lodash.defaults": "4.2.0",
+    "lodash.get": "4.4.2",
+    "lodash.kebabcase": "4.1.1",
+    "memoize-one": "6.0.0",
+    "microtip": "0.2.2",
+    "shiki": "^3.12.2",
+    "throttle-debounce": "5.0.0",
+    "uuid": "9.0.1"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.3.1",
+    "@types/debounce": "1.2.4",
+    "@types/js-cookie": "3.0.6",
+    "@types/lodash.defaults": "4.2.9",
+    "@types/lodash.get": "4.4.9",
+    "@types/lodash.kebabcase": "4.1.9",
+    "@types/luxon": "3.4.2",
+    "@types/uuid": "8.3.4",
+    "@types/vimeo__player": "2.18.3",
+    "eventsourcemock": "2.0.0",
+    "luxon": "3.4.4",
+    "msw": "^2.12.4"
+  }
+}

package/src/modules/dx/agentMiawUi/agentMiawUi.ts

@@ -23,34 +23,25 @@ async function ensureMiawScriptAndDefinition(): Promise<void> {
         `script[src="${SCRIPT_SRC}"]`
     ) as HTMLScriptElement | null;
 
-    if (script) {
-        await waitUntilResolved(
-            customElements.whenDefined(HOSTED_MIAW_UI_TAG),
-            DEFINE_TIMEOUT_MS,
-            WHEN_DEFINED_TIMEOUT_MESSAGE
-        );
-        return;
+    if (!script) {
+        script = document.createElement("script");
+        script.type = "module";
+        script.src = SCRIPT_SRC;
+        await new Promise<void>((resolve, reject) => {
+            script!.addEventListener("load", () => resolve(), { once: true });
+            script!.addEventListener(
+                "error",
+                () =>
+                    reject(
+                        new Error(
+                            `Failed to load MIAW UI embed script (${SCRIPT_SRC}). Check status code and referrer rules.`
+                        )
+                    ),
+                { once: true }
+            );
+            document.head.appendChild(script!);
+        });
     }
-
-    script = document.createElement("script");
-    script.type = "module";
-    script.src = SCRIPT_SRC;
-
-    await new Promise<void>((resolve, reject) => {
-        script!.addEventListener("load", () => resolve(), { once: true });
-        script!.addEventListener(
-            "error",
-            () =>
-                reject(
-                    new Error(
-                        `Failed to load MIAW UI embed script (${SCRIPT_SRC}). Check status code and referrer rules.`
-                    )
-                ),
-            { once: true }
-        );
-        document.head.appendChild(script!);
-    });
-
     await waitUntilResolved(
         customElements.whenDefined(HOSTED_MIAW_UI_TAG),
         DEFINE_TIMEOUT_MS,
@@ -67,12 +58,17 @@ function loadMiawUiScript(): Promise<void> {
 }
 
 export default class AgentMiawUi extends LightningElement {
+    private static readonly SIDEBAR_OPEN_ATTR = "data-xsf-agent-sidebar-open";
+    private static readonly AGENT_ROOT_SELECTOR = '[data-testid="agent-root"]';
+    private static readonly SIDEBAR_OPEN_CLASS = "view-sidebar";
+
     /** Salesforce org id (15- or 18-character Id). */
     @api orgId!: string;
     /** Messaging endpoint host URL (e.g. https://org62.my.salesforce-scrt.com). */
     @api messagingUrl!: string;
     @api deploymentDevName = "page_builder_miaw_ui";
     @api richComponentVersion = "v1-stable";
+    @api isOnDigitalDomain = "true";
     @api routingAttributes?: string;
     /**
      * JSON array of suggested prompt strings for the MIAW UI (e.g.
@@ -81,18 +77,11 @@ export default class AgentMiawUi extends LightningElement {
     @api prompts?: string;
     /** When set, forwarded to the embed as `welcome-text` (greeting / headline copy). */
     @api welcomeText?: string;
-    /**
-     * When set, bar gradient start (CSS color); sets `--wes-color-af-bar-gradient-from` on the
-     * hosted `page-builder-miaw-ui` element when it exists.
-     */
-    @api gradientFrom?: string;
-    /**
-     * When set, bar gradient end (CSS color); sets `--wes-color-af-bar-gradient-to` on that element.
-     */
-    @api gradientTo?: string;
 
     /** After first mount attempt is scheduled, we do not run it again for this instance. */
     private hasRendered = false;
+    private sidebarStateObserver: MutationObserver | null = null;
+    private sidebarStateTargetSelector = "#main-content";
 
     renderedCallback(): void {
         if (!this.hasRendered) {
@@ -101,19 +90,9 @@ export default class AgentMiawUi extends LightningElement {
         }
     }
 
-    private setGradientColors(element: HTMLElement | null): void {
-        const from = this.gradientFrom?.trim();
-        const to = this.gradientTo?.trim();
-
-        if (from) {
-            element?.style?.setProperty(
-                "--wes-color-af-bar-gradient-from",
-                from!
-            );
-        }
-        if (to) {
-            element?.style?.setProperty("--wes-color-af-bar-gradient-to", to!);
-        }
+    disconnectedCallback(): void {
+        this.sidebarStateObserver?.disconnect();
+        this.sidebarStateObserver = null;
     }
 
     private async mountMiawHost(): Promise<void> {
@@ -128,7 +107,7 @@ export default class AgentMiawUi extends LightningElement {
             el.setAttribute("messaging-url", this.messagingUrl);
             el.setAttribute("deployment-dev-name", this.deploymentDevName);
             el.setAttribute("input-variant", "mini-sidebar");
-            el.setAttribute("is-on-digital-domain", "false");
+            el.setAttribute("is-on-digital-domain", this.isOnDigitalDomain);
             el.setAttribute(
                 "rich-component-version",
                 this.richComponentVersion
@@ -146,9 +125,43 @@ export default class AgentMiawUi extends LightningElement {
                 el.setAttribute("welcome-text", this.welcomeText);
             }
             container.appendChild(el);
-            this.setGradientColors(el);
+            this.bridgeSidebarState(el);
         } catch (e) {
             console.error(e);
         }
     }
+
+    private setSidebarOpenState(isOpen: boolean): void {
+        const targets = document.querySelectorAll(this.sidebarStateTargetSelector);
+        targets.forEach((target) => {
+            target.setAttribute(
+                AgentMiawUi.SIDEBAR_OPEN_ATTR,
+                isOpen ? "true" : "false"
+            );
+        });
+    }
+
+    private bridgeSidebarState(el: Element): void {
+        const host = el as HTMLElement;
+        const root = host.shadowRoot?.querySelector(
+            AgentMiawUi.AGENT_ROOT_SELECTOR
+        ) as HTMLElement | null;
+        if (!root) {
+            window.requestAnimationFrame(() => this.bridgeSidebarState(el));
+            return;
+        }
+
+        const isOpen = () =>
+            root.classList.contains(AgentMiawUi.SIDEBAR_OPEN_CLASS);
+        this.setSidebarOpenState(isOpen());
+
+        this.sidebarStateObserver?.disconnect();
+        this.sidebarStateObserver = new MutationObserver(() => {
+            this.setSidebarOpenState(isOpen());
+        });
+        this.sidebarStateObserver.observe(root, {
+            attributes: true,
+            attributeFilter: ["class"]
+        });
+    }
 }

package/src/modules/dx/button/button.css

@@ -17,6 +17,8 @@
     --dx-c-button-opacity: 1;
     --dx-c-button-font-size: var(--dx-g-text-sm);
     --dx-c-button-font-weight: var(--dx-g-font-normal);
+    --dx-c-button-line-height: inherit;
+    --dx-c-button-letter-spacing: inherit;
     --dx-c-button-display: flex;
 }
 
@@ -35,6 +37,8 @@
         var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
     border-radius: var(--dx-g-spacing-xs);
     font-weight: var(--dx-c-button-font-weight);
+    line-height: var(--dx-c-button-line-height);
+    letter-spacing: var(--dx-c-button-letter-spacing);
 }
 
 .button:focus {
@@ -63,6 +67,7 @@
 .button.variant_inline-inherit dx-icon,
 .button.variant_icon-only dx-icon {
     display: inline-block;
+    vertical-align: var(--dx-c-button-icon-vertical-align, 0.1em);
 }
 
 .button > span {

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

@@ -143,6 +143,13 @@ code[class*="shiki"] {
     padding: 0 var(--dx-g-spacing-md) 0 var(--dx-g-spacing-sm);
     text-align: right;
     user-select: none;
+}
+
+.dx-theme-light .code-line-number {
+    color: var(--dx-g-gray-40);
+}
+
+.dx-theme-dark .code-line-number {
     color: var(--dx-g-gray-60);
 }
 

package/src/modules/dx/globalHeader/globalHeader.ts

@@ -1,22 +1,43 @@
 import kebabCase from "lodash.kebabcase";
 import { LightningElement, api } from "lwc";
 
-const defaultDomain = "https://developer.salesforce.com";
+const defaultDomain = ""; // empty domain means the header settings will be loaded from the same domain as the current page
 const defaultLocale = "en-us";
 const defaultHeaderSettingsBasePath = "/c/public/header-settings";
+const defaultPropertyTitle = "Developers";
 const headerSettingsJsonKeys = [
     "regionSelectorOverride",
     "contactLinksOverride"
 ];
 
 export default class DevExNavigation extends LightningElement {
-    static renderMode = "light";
+    static renderMode = "light"; // Light DOM currently required due to other elements reading from this element's DOM; we should fix that and use existing nav CSS variables in those other elements (TODO)
 
     @api locale: string = defaultLocale;
     @api path: string = defaultHeaderSettingsBasePath;
     @api domain: string = defaultDomain;
+    @api propertyTitle: string = defaultPropertyTitle; // used only as a fallback in the "barebones" nav
+
+    // Fallback basic nav config used when the header settings are not available
+    private get barebonesNavConfig() {
+        return {
+            headerSettings: {
+                origin: "",
+                contextNavEnabled: "true"
+            },
+            navItems: {
+                variation: "static",
+                propertyTitle: {
+                    label: this.propertyTitle,
+                    url: "/"
+                },
+                menuGroup: {}
+            }
+        };
+    }
 
     async connectedCallback(): Promise<void> {
+        let navConfig = null;
         try {
             const headerSettingsResponse = await fetch(
                 `${this.domain}${this.path}/${this.locale}.json`,
@@ -27,13 +48,12 @@ export default class DevExNavigation extends LightningElement {
                 }
             );
             if (headerSettingsResponse.ok) {
-                this.createFullNav(await headerSettingsResponse.json());
-            } else {
-                this.createBarebonesNav();
+                navConfig = await headerSettingsResponse.json();
             }
         } catch (ex) {
-            console.error(`Navigation error: ${ex}`);
-            this.createBarebonesNav();
+            console.error(`Header settings error: ${ex}`);
+        } finally {
+            this.createFullNav(navConfig || this.barebonesNavConfig);
         }
     }
 
@@ -63,22 +83,4 @@ export default class DevExNavigation extends LightningElement {
         containerEl.appendChild(hgfNav);
         containerEl.appendChild(hgfNavContext);
     }
-
-    private createBarebonesNav(): void {
-        const hgfNav = this.createGlobalNav({
-            origin: "",
-            contextNavEnabled: "true"
-        });
-        const hgfNavContext = this.createContextNav({
-            variation: "static",
-            propertyTitle: {
-                label: "Developers",
-                url: "/"
-            },
-            menuGroup: {}
-        });
-        const containerEl = this.refs.globalNavContainer as Element;
-        containerEl.appendChild(hgfNav);
-        containerEl.appendChild(hgfNavContext);
-    }
 }

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -30,7 +30,6 @@
                     <div class="header-wrapper">
                         <div lwc:if={devCenter} class="link-row">
                             <a href={devCenter.link}>
-                                <dx-icon symbol="back"></dx-icon>
                                 <dx-icon
                                     class="brand-icon"
                                     lwc:if={devCenter.icon}

package/src/modules/dx/tree/treeHandler.ts

@@ -64,7 +64,8 @@ export class TreeHandler {
             isExpanded: node.isExpanded || false,
             isChildrenLoading: node.isChildrenLoading || false,
             link: node.link,
-            method: node.method
+            method: node.method,
+            showForwardArrow: node.showForwardArrow
         };
 
         const mapItem = { node: convertedNode, parent };

package/src/modules/dx/treeTile/treeTile.css

@@ -58,6 +58,10 @@
     margin-left: var(--dx-g-spacing-xs);
 }
 
+.tile-forward-arrow {
+    margin-left: auto;
+}
+
 .whitespace-nowrap {
     white-space: nowrap;
 }

package/src/modules/dx/treeTile/treeTile.html

@@ -37,6 +37,16 @@
                 value={methodText}
                 color={metadataBadgeColor}
             ></dx-metadata-badge>
+            <div
+                class="flex tile-icon tile-forward-arrow"
+                if:true={showForwardArrow}
+            >
+                <dx-icon
+                    sprite="utility"
+                    symbol="forward"
+                    size={iconSize}
+                ></dx-icon>
+            </div>
         </div>
     </a>
 </template>

package/src/modules/dx/treeTile/treeTile.ts

@@ -52,6 +52,10 @@ export default class TreeTile extends LightningElement {
         return this.treeNode.method && !this.hasChildren;
     }
 
+    private get showForwardArrow() {
+        return this.treeNode.showForwardArrow;
+    }
+
     private get methodText() {
         if (this.treeNode.method && this.treeNode.method in methodTextMap) {
             return methodTextMap[this.treeNode.method];

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.