@salesforcedevs/dx-components 1.40.5-topic-alpha.5 → 1.40.5-topic-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.40.5-topic-alpha.5",
+    "version": "1.40.5-topic-alpha.7",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -240,6 +240,16 @@ export default class Popover extends LightningElement {
                 this.dispatchEvent(new CustomEvent("controlarrowdown"));
                 break;
             }
+            // A mouse-opened menu leaves focus on the control, so Escape lands
+            // here, not in the popover's own key handler.
+            case "Esc":
+            case "Escape": {
+                if (this.open) {
+                    this.dispatchRequestCloseEvent("keypress-escape");
+                    this.closePopover(true);
+                }
+                break;
+            }
             default:
         }
     };

package/src/modules/dx/treeItem/treeItem.css

@@ -10,16 +10,21 @@
     z-index: 2;
 }
 
-/* The tile's keyboard focus layers fill this row, picker included. isolate
-   keeps the fill above the row's background and below its content. */
 .tree-item-row {
-    position: relative;
-    isolation: isolate;
     display: flex;
     align-items: center;
     min-width: 0;
 }
 
+/* The tile's keyboard focus layers fill this row, picker included. isolate
+   keeps the fill above the row's background and below its content. Only while
+   focus is inside: a row that is always isolated traps its picker's menu, and
+   later rows cover the menu while it fades out after a click outside. */
+.tree-item-row:focus-within {
+    position: relative;
+    isolation: isolate;
+}
+
 .tree-item-row dx-tree-tile {
     flex: 1;
     min-width: 0;

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

@@ -255,3 +255,13 @@ a:link.tile-root {
     box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-60),
         inset 0 0 0 4px white;
 }
+
+/* A selected item keeps its left bar when it also has keyboard focus. */
+:host
+    .sidebar-item:is(
+        .sidebar-item-selected,
+        .sidebar-item-selected-text
+    ):focus-visible::after {
+    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40),
+        inset 0 0 0 2px var(--dx-g-blue-vibrant-60), inset 0 0 0 4px white;
+}