@salesforcedevs/dx-components 1.32.0-alpha.9 → 1.32.0-docs-content-type-1

package/lwc.config.json

@@ -6,6 +6,7 @@
     ],
     "expose": [
         "dx/agenda",
+        "dx/agentMiawUi",
         "dx/alert",
         "dx/audio",
         "dx/banner",
@@ -85,6 +86,7 @@
         "dx/redirectChecker",
         "dx/relativeDateTime",
         "dx/scrollManager",
+        "dx/searchHybrid",
         "dx/searchResults",
         "dx/section",
         "dx/sectionBanner",
@@ -128,7 +130,6 @@
         "dxUtils/analytics",
         "dxUtils/async",
         "dxUtils/constants",
-        "dxUtils/data360Search",
         "dxUtils/contentTypes",
         "dxUtils/coveo",
         "dxUtils/dates",

package/package.json

@@ -1,48 +1,48 @@
 {
-    "name": "@salesforcedevs/dx-components",
-    "version": "1.32.0-alpha.9",
-    "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": "026276367da91550c1d58c2ad0e5aca5e6b49cfa"
-}
+  "name": "@salesforcedevs/dx-components",
+  "version": "1.32.0-docs-content-type-1",
+  "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"
+  },
+  "stableVersion": "1.35.1"
+}

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,253 @@
+/* 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;
+}
+
+function dropCookie(cookieDomain: string) {
+    const { hostname, protocol } = window.location;
+    const onCookieDomain =
+        !!cookieDomain &&
+        (hostname === cookieDomain || hostname.endsWith(`.${cookieDomain}`));
+
+    document.cookie = [
+        "show_agent=true",
+        "Path=/",
+        "Max-Age=2592000",
+        "SameSite=Lax",
+        protocol === "https:" ? "Secure" : null,
+        onCookieDomain ? `Domain=${cookieDomain}` : null
+    ]
+        .filter(Boolean)
+        .join("; ");
+}
+
+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;
+    @api agentforceEnv?: string;
+    private _hideAgentConditionally = false;
+
+    /**
+     * When set, mounting of the agent is gated behind the `showAgent=true` query param
+     * or `show_agent=true` cookie opt-in; otherwise (and by default), gating is off.
+     *
+     * COERCION: this component is consumed as raw, server-rendered HTML on an LWR page —
+     * not inside another LWC's template — so LWC's presence→boolean attribute convention
+     * does NOT apply automatically. Native attribute reflection runs instead, and LWC's
+     * attributeChangedCallback assigns the raw attribute STRING to this property
+     * (`this[prop] = newValue`), so a bare `hide-agent-conditionally` arrives as `""`, not
+     * boolean `true`. This setter restores HTML boolean-attribute semantics by source:
+     *   - boolean (LWC property API / tests): honored as-is, so `false` turns gating off.
+     *   - string (native attribute reflection): PRESENCE means true regardless of value —
+     *     `""`, `"true"`, and even `"false"` all enable gating, exactly like `disabled="false"`
+     *     is still disabled. Only absence (null/undefined, i.e. the attribute removed) is false.
+     */
+    @api
+    get hideAgentConditionally(): boolean {
+        return this._hideAgentConditionally;
+    }
+    set hideAgentConditionally(value: boolean | string | null | undefined) {
+        this._hideAgentConditionally =
+            typeof value === "boolean"
+                ? value
+                : value !== null && value !== undefined;
+    }
+    /**
+     * Apex domain that the opt-in cookie targets (covers subdomains); applied only when the
+     * current host matches it, so local dev / preview hosts fall back to a host-only cookie.
+     */
+    @api cookieDomain?: 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;
+            if (this.shouldMount()) {
+                this.mountMiawHost();
+            }
+        }
+    }
+
+    disconnectedCallback(): void {
+        this.sidebarStateObserver?.disconnect();
+        this.sidebarStateObserver = null;
+    }
+
+    /**
+     * Decide whether the agent should mount. If conditional gating is off, always mount.
+     * If conditional gating of the agent is on, return `true` only when the user has opted in
+     * via the `showAgent=true` query param or the `show_agent=true` cookie. (When only the
+     * param is present, persists a sticky opt-in cookie (~30 days) as a side effect so the
+     * choice carries across pages and subdomains.)
+     *
+     * CROSS-SITE CONTRACT: the param key/value, cookie token, Max-Age, SameSite, Secure and
+     * Domain-scoping logic are MIRRORED in architect-sf, since both serve pages for Architect.
+     * Changing these values requires a coordinated change in all repos.
+     */
+    private shouldMount(): boolean {
+        if (!this.hideAgentConditionally) {
+            return true;
+        }
+
+        // When the agent should be conditionally hidden, we check for special query param or
+        // cookie required for actually mounting/rendering it.
+        const hasParam =
+            new URLSearchParams(window.location.search).get("showAgent") ===
+            "true";
+        const hasCookie = /(?:^|;\s*)show_agent=true(?:;|$)/.test(
+            document.cookie
+        );
+
+        // If the user doesn't have the cookie yet but does have the param, set the cookie
+        if (hasParam && !hasCookie) {
+            dropCookie(this.cookieDomain || "");
+        }
+
+        return hasParam || hasCookie;
+    }
+
+    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);
+            }
+            el.setAttribute("env", this.agentforceEnv || "dev");
+            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/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/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>