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

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.32.1-alpha.4",
+    "version": "1.33.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
-        "node": "20.x"
+        "node": "22.x"
     },
     "publishConfig": {
         "access": "public"
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "e64bce535a62d5e89c1c3bfe226c424e99d28379"
+    "gitHead": "f3e8e2c6ae6c8792b316e41021344648d4a07bec"
 }

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/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];