@salesforcedevs/dx-components 1.40.4-style-fix-alpha → 1.40.4-style-fix-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/dx-components",
-  "version": "1.40.4-style-fix-alpha",
+  "version": "1.40.4-style-fix-alpha3",
   "description": "DX Lightning web components",
   "license": "MIT",
   "engines": {

package/src/modules/dx/dropdown/dropdown.css

@@ -40,6 +40,34 @@
     );
 }
 
+/* Nested fit-content menus (content action toolbar). Flat fit-content menus,
+   including the version picker, keep the option rules above. */
+.menu-fit-content.menu-nested {
+    --dx-c-popover-width: max-content;
+    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
+}
+
+.menu-fit-content.menu-nested .menu_list {
+    width: 100%;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+}
+
+.menu-fit-content.menu-nested .menu_option:not(:first-child) {
+    border-top: var(--border);
+    margin-top: 0;
+    padding-top: var(--dx-g-spacing-sm);
+}
+
+.menu-fit-content .menu_heading {
+    margin: 0;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    font-family: var(--dx-g-font-sans);
+    line-height: var(--dx-g-spacing-mlg);
+    text-transform: none;
+    color: var(--dx-g-gray-10);
+}
+
 @media screen and (max-width: 1000px) {
     .menu-nested .menu_option:not(:first-child) {
         border-top: var(--border);

package/src/modules/dx/popover/popover.ts

@@ -89,7 +89,15 @@ export default class Popover extends LightningElement {
 
             this.dispatchEvent(new CustomEvent("open"));
 
-            setTimeout(() => {
+            this.clearOpenListenersTimer();
+            // Defer so the opening click is not treated as an outside click.
+            // Drop the callback if the popover closes before it runs, or the
+            // document listeners attach with nothing left to remove them.
+            this.openListenersTimer = setTimeout(() => {
+                this.openListenersTimer = undefined;
+                if (!this._open) {
+                    return;
+                }
                 this.setPosition();
                 this.attachListenersTopopover();
             });
@@ -98,6 +106,7 @@ export default class Popover extends LightningElement {
 
     @api
     closePopover(focusControl: boolean = false) {
+        this.clearOpenListenersTimer();
         if (!this._open) {
             return;
         }
@@ -134,6 +143,7 @@ export default class Popover extends LightningElement {
 
     private controlled: boolean = false;
     private pointerOpened: boolean = false;
+    private openListenersTimer?: ReturnType<typeof setTimeout>;
     private _open: boolean = false;
     private _rendered: boolean = isPrerender();
     private _role: string | null = null;
@@ -146,6 +156,7 @@ export default class Popover extends LightningElement {
     // LIFECYCLE METHODS
 
     disconnectedCallback() {
+        this.clearOpenListenersTimer();
         document.removeEventListener(
             "click",
             this.interactOutsideListener,
@@ -262,13 +273,42 @@ export default class Popover extends LightningElement {
 
     // Capture on document: click-open leaves focus on the trigger, and slotted
     // menu options live outside this shadow tree, so the panel's onkeydown
-    // never sees Escape.
+    // never sees Escape. Only the innermost popover in the event path handles
+    // it, so Escape in another control does not close this menu or cancel that
+    // control's own Escape behavior.
     private onDocumentKeydown = (e: KeyboardEvent) => {
-        if (e.key === "Escape" || e.key === "Esc") {
-            this.closeOnEscape(e);
+        if ((e.key !== "Escape" && e.key !== "Esc") || !this.handlesEscape(e)) {
+            return;
         }
+        this.closeOnEscape(e);
     };
 
+    private handlesEscape(e: KeyboardEvent): boolean {
+        if (!this._open || e.defaultPrevented) {
+            return false;
+        }
+        const host = this.template.host;
+        const path = e.composedPath();
+        for (const node of path) {
+            if (node instanceof Element && node.localName === "dx-popover") {
+                return node === host;
+            }
+        }
+        // A non-composed event fired in this shadow or on the trigger does
+        // not list the host. The panel and control listeners still apply.
+        return (
+            (this.popover !== null && path.includes(this.popover)) ||
+            (this.control !== null && path.includes(this.control))
+        );
+    }
+
+    private clearOpenListenersTimer() {
+        if (this.openListenersTimer !== undefined) {
+            clearTimeout(this.openListenersTimer);
+            this.openListenersTimer = undefined;
+        }
+    }
+
     private closeOnEscape(e: KeyboardEvent) {
         if (!this.open) {
             return;
@@ -300,7 +340,7 @@ export default class Popover extends LightningElement {
         }
     }
 
-    private onControlClick = () => {
+    private onControlClick = (e: MouseEvent) => {
         if (this.controlled && this.open) {
             this.dispatchRequestCloseEvent("click-control");
             return;
@@ -321,7 +361,10 @@ export default class Popover extends LightningElement {
             return;
         }
 
-        this.pointerOpened = true;
+        // Enter/Space on a button synthesizes a click with detail 0. Only a
+        // pointer click should blur the trigger on Escape; keyboard activation
+        // must leave focus on the control.
+        this.pointerOpened = e.detail > 0;
         this.openPopover();
     };
 

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

@@ -110,6 +110,7 @@ export class TreeHandler {
             link,
             method: node.method,
             showForwardArrow: node.showForwardArrow,
+            redirectToChild: node.redirectToChild,
             versions: node.versions
         };
 
@@ -122,7 +123,11 @@ export class TreeHandler {
 
         this._nodeMap[convertedNode.key] = mapItem;
         this.indexName(convertedNode.name, convertedNode.key);
-        this.indexName(convertedNode.link?.href, convertedNode.key);
+        // A redirect parent can carry a child's href. This index runs after
+        // the child, so recording it would make the parent win selection.
+        if (!convertedNode.redirectToChild) {
+            this.indexName(convertedNode.link?.href, convertedNode.key);
+        }
         // Index this topic's own versioned URLs only. Parent-only switching
         // URLs point at a child with content and must not steal that child's
         // selection.

package/src/modules/dx/treeItem/treeItem.ts

@@ -236,10 +236,14 @@ export default class TreeItem extends LightningElement {
                 this.sendGtm(event);
                 return;
             }
-            const isSelectAction = false;
-            this.doExpand(isSelectAction);
-            this.sendGtm(event);
-            return;
+            // No copied destination. A markdown descendant is selected below.
+            // A chain with no content page only expands.
+            if (!firstContentNode(this._treeNode)?.link?.href) {
+                const isSelectAction = false;
+                this.doExpand(isSelectAction);
+                this.sendGtm(event);
+                return;
+            }
         }
 
         if (this.isParent) {

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

@@ -45,18 +45,21 @@ export default class TreeTile extends LightningElement {
      * screen reader users (WCAG 2.4.4)
      */
     get linkAriaLabel(): string | null {
-        if (!this.treeNode.redirectToChild || !this.treeNode.link?.href) {
+        if (!this.treeNode.redirectToChild) {
             return null;
         }
         /**
          * The redirect can target a deep descendant, so walk the first-child
          * chain to the node that owns the destination link and name it.
+         * The destination href may live on this anchor (parent-only topics do
+         * not copy it onto the parent node).
          */
         let destination = this.treeNode.children?.[0];
         while (destination?.redirectToChild) {
             destination = destination.children?.[0];
         }
-        return destination?.link?.href === this.treeNode.link.href
+        const triggerHref = this.href || this.treeNode.link?.href;
+        return destination?.link?.href && destination.link.href === triggerHref
             ? `${this.treeNode.label}, opens ${destination.label}`
             : null;
     }