@salesforcedevs/dx-components 1.32.0-alpha.8 → 1.32.0

package/lwc.config.json

@@ -6,6 +6,7 @@
     ],
     "expose": [
         "dx/agenda",
+        "dx/agentMiawUi",
         "dx/alert",
         "dx/audio",
         "dx/banner",
@@ -128,7 +129,6 @@
         "dxUtils/analytics",
         "dxUtils/async",
         "dxUtils/constants",
-        "dxUtils/data360Search",
         "dxUtils/contentTypes",
         "dxUtils/coveo",
         "dxUtils/dates",

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.32.0-alpha.8",
+    "version": "1.32.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": "b97e92aa3483e9eefdba3d60962f20cd68291df2"
+    "gitHead": "0dce435f5845187b50577dc005de80ddc3002b9d"
 }

package/src/modules/dx/agentMiawUi/agentMiawUi.css

@@ -0,0 +1,4 @@
+:host {
+    position: relative;
+    z-index: 2147483000;
+}

package/src/modules/dx/agentMiawUi/agentMiawUi.html

@@ -0,0 +1,3 @@
+<template>
+    <div lwc:dom="manual" class="miaw-host"></div>
+</template>

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

@@ -0,0 +1,167 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import { LightningElement, api } from "lwc";
+import { waitUntilResolved } from "dxUtils/async";
+
+const HOSTED_MIAW_UI_TAG = "page-builder-miaw-ui";
+const SCRIPT_SRC =
+    "https://a.sfdcstatic.com/digital/@sfdc-www-emu/page-builder-miaw-ui/v1-stable/page-builder-miaw-ui.js";
+const DEFINE_TIMEOUT_MS = 60000;
+const WHEN_DEFINED_TIMEOUT_MESSAGE =
+    `MIAW UI embed (${HOSTED_MIAW_UI_TAG}) did not register within ${
+        DEFINE_TIMEOUT_MS / 1000
+    }s. ` +
+    "Confirm the script loads (network tab), your origin is allowed, and CSP permits this script.";
+
+let scriptLoaded: Promise<void> | null = null;
+
+async function ensureMiawScriptAndDefinition(): Promise<void> {
+    if (customElements.get(HOSTED_MIAW_UI_TAG)) {
+        return;
+    }
+
+    let script = document.querySelector(
+        `script[src="${SCRIPT_SRC}"]`
+    ) as HTMLScriptElement | null;
+
+    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!);
+        });
+    }
+    await waitUntilResolved(
+        customElements.whenDefined(HOSTED_MIAW_UI_TAG),
+        DEFINE_TIMEOUT_MS,
+        WHEN_DEFINED_TIMEOUT_MESSAGE
+    );
+}
+
+/** Loads the MIAW UI script if it is not already loaded. This occurs only once per module instance. */
+function loadMiawUiScript(): Promise<void> {
+    if (!scriptLoaded) {
+        scriptLoaded = ensureMiawScriptAndDefinition();
+    }
+    return scriptLoaded;
+}
+
+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.
+     * `["Show me an Agentforce demo","Help me build a business case"]`); forwarded as `prompts` on the embed.
+     */
+    @api prompts?: string;
+    /** When set, forwarded to the embed as `welcome-text` (greeting / headline copy). */
+    @api welcomeText?: 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) {
+            this.hasRendered = true;
+            this.mountMiawHost();
+        }
+    }
+
+    disconnectedCallback(): void {
+        this.sidebarStateObserver?.disconnect();
+        this.sidebarStateObserver = null;
+    }
+
+    private async mountMiawHost(): Promise<void> {
+        try {
+            await loadMiawUiScript();
+            const container = this.template.querySelector(".miaw-host");
+            if (!container) {
+                return;
+            }
+            const el = document.createElement(HOSTED_MIAW_UI_TAG);
+            el.setAttribute("org-id", this.orgId);
+            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", this.isOnDigitalDomain);
+            el.setAttribute(
+                "rich-component-version",
+                this.richComponentVersion
+            );
+            if (this.routingAttributes) {
+                el.setAttribute(
+                    "routing-attributes",
+                    this.routingAttributes
+                );
+            }
+            if (this.prompts) {
+                el.setAttribute("prompts", this.prompts);
+            }
+            if (this.welcomeText) {
+                el.setAttribute("welcome-text", this.welcomeText);
+            }
+            container.appendChild(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/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/dropdownOption/dropdownOption.css

@@ -31,7 +31,14 @@
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
-    background: white;
+}
+
+.option:focus {
+    box-shadow: inset 0 0 0 1px var(--dx-g-blue-vibrant-50);
+}
+
+.option:active {
+    background: var(--dx-g-cloud-blue-vibrant-95) !important;
 }
 
 .option:not(.option-active):hover {
@@ -44,18 +51,6 @@
     background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
-.option:focus {
-    box-shadow: 0 0 0 2px var(--dx-g-blue-vibrant-50);
-}
-
-.option-active:focus {
-    box-shadow: 0 0 0 2px var(--dx-g-blue-vibrant-50);
-}
-
-.option:active {
-    background: var(--dx-g-cloud-blue-vibrant-95) !important;
-}
-
 .option_details {
     display: flex;
     flex-direction: column;

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

@@ -8,7 +8,7 @@ class Footer extends LightningElement {
     private _variant: FooterVariant = "small-signup";
     private isSlotEmpty = true;
     private signupUrl =
-        "https://www.salesforce.com/form/other/role-based-newsletter/?Developer=true";
+        "https://www.salesforce.com/company/newsletter-subscribe/?topics=Developer";
 
     @api
     mfeHomeHref: string = `/${window.location.host}`; // ugly hack: ideally this wouldn't be necessary, but the only way to remove the "See all ways to contact us" link from the footer MFE is to set this to a non-empty value other than "us"; and given the way that the footer works, the non-empty value needs to be something that can be appended to `/` and work correctly
@@ -151,7 +151,10 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
         private buildFooterConfigLookupTables(config: any[]) {
             config.forEach((item: any) => {
                 // attr_title is preferable to title because it is not language-specific
-                this.configItemTitleToItemLookup.set(item.attr_title || item.title, item);
+                this.configItemTitleToItemLookup.set(
+                    item.attr_title || item.title,
+                    item
+                );
                 if (item.menu_item_parent) {
                     const parentId = parseInt(item.menu_item_parent, 10);
                     const children =
@@ -188,26 +191,26 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
                 return;
             }
 
-            this.socialLinks =
-                socialLinksItems.map((child: any) => {
-                    const childTitle: string = child.attr_title || child.title || ""; // attr_title is preferable to title because it is not language-specific
-                    const iconSymbol =
-                        childTitle === "LinkedIn"
-                            ? "linked-in"
-                            : childTitle.toLocaleLowerCase();
-                    const iconUrlHash =
-                        iconSymbol === "twitter"
-                            ? "#twitter-x"
-                            : `#themed-${iconSymbol}`;
-
-                    return {
-                        href: child.url,
-                        iconSprite: "brand",
-                        iconURL: `${baseSocialIconUrl}${iconUrlHash}`,
-                        label: child.title,
-                        iconSymbol
-                    };
-                });
+            this.socialLinks = socialLinksItems.map((child: any) => {
+                const childTitle: string =
+                    child.attr_title || child.title || ""; // attr_title is preferable to title because it is not language-specific
+                const iconSymbol =
+                    childTitle === "LinkedIn"
+                        ? "linked-in"
+                        : childTitle.toLocaleLowerCase();
+                const iconUrlHash =
+                    iconSymbol === "twitter"
+                        ? "#twitter-x"
+                        : `#themed-${iconSymbol}`;
+
+                return {
+                    href: child.url,
+                    iconSprite: "brand",
+                    iconURL: `${baseSocialIconUrl}${iconUrlHash}`,
+                    label: child.title,
+                    iconSymbol
+                };
+            });
         }
 
         private setGeneralLinks() {
@@ -234,10 +237,14 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
 
             const generalLinks: any[] = [];
             generalLinksHeadingsItems.forEach((item: any) => {
-                const childrenItems = this.configItemParentToChildrenLookup.get(item.ID);
+                const childrenItems = this.configItemParentToChildrenLookup.get(
+                    item.ID
+                );
 
                 if (!childrenItems) {
-                    console.error(`General links children items not found for item with title "${item.title}"`);
+                    console.error(
+                        `General links children items not found for item with title "${item.title}"`
+                    );
                     return;
                 }
 
@@ -260,16 +267,24 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
         }
 
         private setLegalFooter() {
-            const copyrightNoticeItem = this.configItemTitleToItemLookup.get("All rights reserved");
+            const copyrightNoticeItem = this.configItemTitleToItemLookup.get(
+                "All rights reserved"
+            );
 
             if (!copyrightNoticeItem) {
-                console.error("All rights reserved item not found in footer config");
+                console.error(
+                    "All rights reserved item not found in footer config"
+                );
                 return;
             }
 
             const { url, description } = copyrightNoticeItem;
-            const copyrightNoticeInnerHtml = description.replace("{{All rights reserved}}", `<a href="${url}">All rights reserved</a>`);
-            const copyrightNoticeEl = this.template.querySelector(".copyright-notice")!;
+            const copyrightNoticeInnerHtml = description.replace(
+                "{{All rights reserved}}",
+                `<a href="${url}">All rights reserved</a>`
+            );
+            const copyrightNoticeEl =
+                this.template.querySelector(".copyright-notice")!;
             copyrightNoticeEl.innerHTML = copyrightNoticeInnerHtml;
             const copyrightLink = copyrightNoticeEl.querySelector("a");
             if (copyrightLink) {
@@ -278,10 +293,14 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
                 );
             }
 
-            const legalLinksItems = this.configItemParentToChildrenLookup.get(copyrightNoticeItem.ID);
+            const legalLinksItems = this.configItemParentToChildrenLookup.get(
+                copyrightNoticeItem.ID
+            );
 
             if (!legalLinksItems) {
-                console.error("Legal links children items not found in footer config");
+                console.error(
+                    "Legal links children items not found in footer config"
+                );
                 return;
             }
 
@@ -298,7 +317,8 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
                     link.href = "#";
                     link.onclick = this.handleCookiePreferencesClick;
                 } else if (itemTitle === "Your Privacy Choices") {
-                    link.img = "https://developer.salesforce.com/ns-assets/privacyoptions.svg";
+                    link.img =
+                        "https://developer.salesforce.com/ns-assets/privacyoptions.svg";
                 }
 
                 return link;
@@ -306,7 +326,10 @@ function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
         }
 
         private openOneTrustInfoDisplay() {
-            if ((window as any).OneTrust && (window as any).OneTrust.ToggleInfoDisplay) {
+            if (
+                (window as any).OneTrust &&
+                (window as any).OneTrust.ToggleInfoDisplay
+            ) {
                 (window as any).OneTrust.ToggleInfoDisplay();
             }
         }

package/src/modules/dx/globalHeader/globalHeader.html

@@ -1,5 +1,5 @@
-<template>
+<template lwc:render-mode="light">
     <div lwc:ref="globalNavContainer" part="container">
         <dx-skip-nav-link></dx-skip-nav-link>
     </div>
-</template>
+</template>

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

@@ -1,31 +1,59 @@
 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 headerSettingsJsonKeys = ['regionSelectorOverride', 'contactLinksOverride'];
+const defaultPropertyTitle = "Developers";
+const headerSettingsJsonKeys = [
+    "regionSelectorOverride",
+    "contactLinksOverride"
+];
 
 export default class DevExNavigation extends LightningElement {
+    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`, {
-                headers: {
-                    "Content-Type": "application/json",
-                },
-            });
+            const headerSettingsResponse = await fetch(
+                `${this.domain}${this.path}/${this.locale}.json`,
+                {
+                    headers: {
+                        "Content-Type": "application/json"
+                    }
+                }
+            );
             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);
         }
     }
 
@@ -55,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/searchResults/searchResults.css

@@ -248,7 +248,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 .coveo-pager-list-item {
     border: none;
-    border-radius: var(--dx-g-spacing-xs);
+    border-radius: 16px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -282,62 +282,13 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     border-right: none;
 }
 
-/* List item states: same padding in all states so text never moves. Ring 8px from text on sides, more on top/bottom. */
 .dx-result {
-    --dx-result-inner-gap-x: var(
-        --dx-g-spacing-sm
-    ); /* 8px between text and ring on sides */
-
-    --dx-result-inner-gap-y: var(
-        --dx-g-spacing-xs
-    ); /* ring closer to card edge so more padding inside box top/bottom */
-
-    position: relative;
     background: white;
-    border-radius: var(--dx-g-spacing-md);
+    border-radius: 16px;
     border: 1px solid rgb(24 24 24 / 4%);
     box-shadow: 0 0 2px 0 rgb(24 24 24 / 8%), 0 2px 4px 1px rgb(24 24 24 / 16%);
-    padding: var(--dx-g-spacing-md);
-    margin-bottom: var(--dx-g-spacing-md);
-    transition: background-color 0.1s ease;
-}
-
-/* Hover: same shape as focus box, more padding top/bottom inside box; space between results unchanged */
-.dx-result:hover::after {
-    content: "";
-    position: absolute;
-    top: var(--dx-result-inner-gap-y);
-    bottom: var(--dx-result-inner-gap-y);
-    left: var(--dx-result-inner-gap-x);
-    right: var(--dx-result-inner-gap-x);
-    background: var(--dx-g-gray-95);
-    border-radius: var(--dx-g-spacing-xs);
-    pointer-events: none;
-    z-index: 0;
-}
-
-.dx-result > * {
-    position: relative;
-    z-index: 1;
-}
-
-/* Focus: ring 8px from text via pseudo-element; no padding/layout change */
-.dx-result:focus-within {
-    outline: none;
-}
-
-/* Pseudo: 8px from text on sides, more padding top/bottom inside ring (smaller inset y) */
-.dx-result:focus-within::before {
-    content: "";
-    position: absolute;
-    top: var(--dx-result-inner-gap-y);
-    bottom: var(--dx-result-inner-gap-y);
-    left: var(--dx-result-inner-gap-x);
-    right: var(--dx-result-inner-gap-x);
-    border: 2px solid var(--dx-g-blue-vibrant-50);
-    border-radius: var(--dx-g-spacing-xs);
-    pointer-events: none;
-    z-index: 2;
+    padding: 20px;
+    margin-bottom: var(--dx-g-spacing-lg);
 }
 
 .dx-result-title {
@@ -371,59 +322,10 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     color: white;
 }
 
-.dx-search-header + .dx-search-main {
+.dx-search-header + .coveo-main-section {
     margin-top: var(--dx-g-spacing-2xl);
 }
 
-.dx-search-results {
-    font-family: var(--dx-g-font-sans);
-    background-color: #fafaf9;
-}
-
-.dx-search-main {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 var(--dx-g-spacing-xl);
-}
-
-.dx-search-box-row {
-    margin-bottom: var(--dx-g-spacing-lg);
-}
-
-.dx-search-box-row .dx-search-box {
-    max-width: 400px;
-}
-
-.dx-search-loading {
-    padding: var(--dx-g-spacing-2xl);
-    text-align: center;
-}
-
-.dx-search-loading-image {
-    max-width: 200px;
-}
-
-.dx-search-no-results {
-    display: flex;
-    justify-content: center;
-    gap: 90px;
-    margin: 50px 34px 90px;
-}
-
-.dx-search-no-results-info {
-    text-align: left;
-}
-
-.dx-search-no-results-info > ul {
-    list-style-type: disc;
-    list-style-position: inside;
-    font-size: var(--dx-g-text-xs);
-}
-
-.dx-search-result-list {
-    padding-bottom: var(--dx-g-spacing-2xl);
-}
-
 .dx-search-header-container {
     margin: 0 auto;
     max-width: 1200px;
@@ -596,8 +498,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 }
 
 @media screen and (max-width: 768px) {
-    .no-results > img,
-    .dx-search-no-results > img {
+    .no-results > img {
         display: none;
     }
 }