@esri/solutions-components 0.6.15 → 0.6.16

package/dist/cjs/calcite-tip-manager.cjs.entry.js

@@ -8,19 +8,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const dom = require('./dom-456f9f13.js');
-const locale = require('./locale-79c3d30e.js');
-const observers = require('./observers-9912f013.js');
-const t9n = require('./t9n-58d20225.js');
-const Heading = require('./Heading-0da2a025.js');
-require('./guid-d1123d5e.js');
-require('./resources-993f6faf.js');
-require('./key-8de93212.js');
+const dom = require('./dom-8d00cc3f.js');
+const locale = require('./locale-6479f239.js');
+const observers = require('./observers-62ea89bc.js');
+const t9n = require('./t9n-a3d7ce48.js');
+const Heading = require('./Heading-c02158c2.js');
+require('./guid-c351776c.js');
+require('./resources-2278b321.js');
+require('./key-07312a4b.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
   header: "header",
@@ -203,7 +203,7 @@ const TipManager = class {
       return null;
     }
     return (index.h("section", { "aria-hidden": dom.toAriaBoolean(closed), class: CSS.container, hidden: closed, onKeyDown: this.tipManagerKeyDownHandler, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeContainerRef }, index.h("header", { class: CSS.header }, index.h(Heading.Heading, { class: CSS.heading, level: headingLevel }, groupTitle), index.h("calcite-action", { class: CSS.close, onClick: this.hideTipManager, scale: "m", text: closeLabel }, index.h("calcite-icon", { icon: ICONS.close, scale: "m" }))), index.h("div", { class: {
         [CSS.tipContainer]: true,
         [CSS.tipContainerAdvancing]: !closed && direction === "advancing",

package/dist/cjs/calcite-tip.cjs.entry.js

@@ -8,20 +8,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const conditionalSlot = require('./conditionalSlot-f10611d3.js');
-const dom = require('./dom-456f9f13.js');
-const locale = require('./locale-79c3d30e.js');
-const t9n = require('./t9n-58d20225.js');
-const Heading = require('./Heading-0da2a025.js');
-require('./observers-9912f013.js');
-require('./guid-d1123d5e.js');
-require('./resources-993f6faf.js');
-require('./key-8de93212.js');
+const conditionalSlot = require('./conditionalSlot-c989690a.js');
+const dom = require('./dom-8d00cc3f.js');
+const locale = require('./locale-6479f239.js');
+const t9n = require('./t9n-a3d7ce48.js');
+const Heading = require('./Heading-c02158c2.js');
+require('./observers-62ea89bc.js');
+require('./guid-c351776c.js');
+require('./resources-2278b321.js');
+require('./key-07312a4b.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
   container: "container",

package/dist/cjs/calcite-tree_3.cjs.entry.js

@@ -8,33 +8,35 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const dom = require('./dom-456f9f13.js');
-const conditionalSlot = require('./conditionalSlot-f10611d3.js');
-const interactive = require('./interactive-48299817.js');
-const resources = require('./resources-993f6faf.js');
-require('./guid-d1123d5e.js');
-require('./observers-9912f013.js');
+const dom = require('./dom-8d00cc3f.js');
+const conditionalSlot = require('./conditionalSlot-c989690a.js');
+const interactive = require('./interactive-7837b73d.js');
+const resources = require('./resources-2278b321.js');
+require('./guid-c351776c.js');
+require('./observers-62ea89bc.js');
+require('./browser-596d8e1e.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 function isTreeItem(element) {
-  return element?.matches("calcite-tree-item");
+  return element?.tagName === "CALCITE-TREE-ITEM";
 }
-function getEnabledSiblingItem(el, direction) {
-  const directionProp = direction === "down" ? "nextElementSibling" : "previousElementSibling";
-  let currentEl = el;
-  let enabledEl = null;
-  while (isTreeItem(currentEl)) {
-    if (!currentEl.disabled) {
-      enabledEl = currentEl;
-      break;
-    }
-    currentEl = currentEl[directionProp];
-  }
-  return enabledEl;
+function getTraversableItems(root) {
+  return Array.from(root.querySelectorAll("calcite-tree-item:not([disabled])")).filter((item) => {
+    let currentItem = item;
+    while (currentItem !== root && currentItem !== undefined) {
+      const parent = currentItem.parentElement;
+      const traversable = !isTreeItem(parent) || !parent.hasChildren || parent.expanded;
+      if (!traversable) {
+        return false;
+      }
+      currentItem = currentItem.parentElement;
+    }
+    return true;
+  });
 }
 
 const treeCss = ":host{display:block}:host(:focus){outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
@@ -43,6 +45,80 @@ const Tree = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteTreeSelect = index.createEvent(this, "calciteTreeSelect", 6);
+    this.keyDownHandler = (event) => {
+      if (this.child) {
+        return;
+      }
+      const root = this.el;
+      const target = event.target;
+      const supportedKeys = ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End", "Tab"];
+      if (!(isTreeItem(target) && this.el.contains(target)) || !supportedKeys.includes(event.key)) {
+        return;
+      }
+      const traversableItems = getTraversableItems(root);
+      if (event.key === "Tab") {
+        // root tabindex will be restored when blurred/focused
+        traversableItems.forEach((item) => (item.tabIndex = -1));
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        const currentItemIndex = traversableItems.indexOf(target);
+        const nextItem = traversableItems[currentItemIndex + 1];
+        nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+        event.preventDefault();
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        const currentItemIndex = traversableItems.indexOf(target);
+        const previousItem = traversableItems[currentItemIndex - 1];
+        previousItem === null || previousItem === void 0 ? void 0 : previousItem.focus();
+        event.preventDefault();
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        if (target.hasChildren && target.expanded) {
+          target.expanded = false;
+          event.preventDefault();
+          return;
+        }
+        const rootToItemPath = traversableItems.slice(0, traversableItems.indexOf(target)).reverse();
+        const parentItem = rootToItemPath.find((item) => item.depth === target.depth - 1);
+        parentItem === null || parentItem === void 0 ? void 0 : parentItem.focus();
+        event.preventDefault();
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        if (!target.disabled && target.hasChildren) {
+          if (!target.expanded) {
+            target.expanded = true;
+            event.preventDefault();
+          }
+          else {
+            const currentItemIndex = traversableItems.indexOf(target);
+            const nextItem = traversableItems[currentItemIndex + 1];
+            nextItem === null || nextItem === void 0 ? void 0 : nextItem.focus();
+            event.preventDefault();
+          }
+        }
+        return;
+      }
+      if (event.key === "Home") {
+        const firstNode = traversableItems.shift();
+        if (firstNode) {
+          firstNode.focus();
+          event.preventDefault();
+        }
+        return;
+      }
+      if (event.key === "End") {
+        const lastNode = traversableItems.pop();
+        if (lastNode) {
+          lastNode.focus();
+          event.preventDefault();
+        }
+        return;
+      }
+    };
     this.lines = false;
     this.child = undefined;
     this.scale = "m";
@@ -65,7 +141,7 @@ const Tree = class {
   render() {
     return (index.h(index.Host, { "aria-multiselectable": this.child
         ? undefined
-        : (this.selectionMode === "multiple" || this.selectionMode === "multichildren").toString(), role: !this.child ? "tree" : undefined, tabIndex: this.getRootTabIndex() }, index.h("slot", null)));
+        : (this.selectionMode === "multiple" || this.selectionMode === "multichildren").toString(), onKeyDown: this.keyDownHandler, role: !this.child ? "tree" : undefined, tabIndex: this.getRootTabIndex() }, index.h("slot", null)));
   }
   //--------------------------------------------------------------------------
   //
@@ -179,64 +255,10 @@ const Tree = class {
     this.calciteTreeSelect.emit();
     event.stopPropagation();
   }
-  keyDownHandler(event) {
-    var _a;
-    const root = this.el.closest("calcite-tree:not([child])");
-    const target = event.target;
-    if (!(root === this.el && target.tagName === "CALCITE-TREE-ITEM" && this.el.contains(target))) {
-      return;
-    }
-    if (event.key === "ArrowDown") {
-      const next = getEnabledSiblingItem(target.nextElementSibling, "down");
-      if (next) {
-        next.focus();
-        event.preventDefault();
-      }
-      return;
-    }
-    if (event.key === "ArrowUp") {
-      const previous = getEnabledSiblingItem(target.previousElementSibling, "up");
-      if (previous) {
-        previous.focus();
-        event.preventDefault();
-      }
-    }
-    if (event.key === "ArrowLeft" && !target.disabled) {
-      // When focus is on an open node, closes the node.
-      if (target.hasChildren && target.expanded) {
-        target.expanded = false;
-        event.preventDefault();
-        return;
-      }
-      // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
-      const parentItem = target.parentElement.closest("calcite-tree-item");
-      if (parentItem && (!target.hasChildren || target.expanded === false)) {
-        parentItem.focus();
-        event.preventDefault();
-        return;
-      }
-      // When focus is on a root node that is also either an end node or a closed node, does nothing.
-      return;
-    }
-    if (event.key === "ArrowRight" && !target.disabled) {
-      if (target.hasChildren) {
-        if (target.expanded && dom.getRootNode(this.el).activeElement === target) {
-          // When focus is on an open node, moves focus to the first child node.
-          (_a = getEnabledSiblingItem(target.querySelector("calcite-tree-item"), "down")) === null || _a === void 0 ? void 0 : _a.focus();
-          event.preventDefault();
-        }
-        else {
-          // When focus is on a closed node, opens the node; focus does not move.
-          target.expanded = true;
-          event.preventDefault();
-        }
-      }
-      return;
-    }
-  }
   updateAncestorTree(event) {
     const item = event.target;
-    if (item.disabled) {
+    const updateItem = event.detail.updateItem;
+    if (item.disabled || (item.indeterminate && !updateItem)) {
       return;
     }
     const ancestors = [];
@@ -248,9 +270,13 @@ const Tree = class {
     const childItems = Array.from(item.querySelectorAll("calcite-tree-item:not([disabled])"));
     const childItemsWithNoChildren = childItems.filter((child) => !child.hasChildren);
     const childItemsWithChildren = childItems.filter((child) => child.hasChildren);
-    const futureSelected = item.hasChildren
-      ? !(item.selected || item.indeterminate)
-      : !item.selected;
+    let futureSelected;
+    if (updateItem) {
+      futureSelected = item.hasChildren ? !(item.selected || item.indeterminate) : !item.selected;
+    }
+    else {
+      futureSelected = item.selected;
+    }
     childItemsWithNoChildren.forEach((el) => {
       el.selected = futureSelected;
       el.indeterminate = false;
@@ -265,12 +291,14 @@ const Tree = class {
       const directChildItems = Array.from(el.querySelectorAll(":scope > calcite-tree > calcite-tree-item"));
       updateItemState(directChildItems, el);
     });
-    if (item.hasChildren) {
-      updateItemState(childItems, item);
-    }
-    else {
-      item.selected = futureSelected;
-      item.indeterminate = false;
+    if (updateItem) {
+      if (item.hasChildren) {
+        updateItemState(childItems, item);
+      }
+      else {
+        item.selected = futureSelected;
+        item.indeterminate = false;
+      }
     }
     ancestors.forEach((ancestor) => {
       const descendants = dom.nodeListToArray(ancestor.querySelectorAll("calcite-tree-item"));
@@ -285,7 +313,9 @@ const Tree = class {
       ancestor.selected = !indeterminate;
     });
     this.selectedItems = dom.nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected);
-    this.calciteTreeSelect.emit();
+    if (updateItem) {
+      this.calciteTreeSelect.emit();
+    }
   }
   // --------------------------------------------------------------------------
   //
@@ -302,7 +332,7 @@ Tree.style = treeCss;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
   actionsEnd: "actions-end",
@@ -328,7 +358,7 @@ const ICONS = {
   blank: "blank",
 };
 
-const treeItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-ui-text-3)}.node-actions-container{display:flex;justify-content:space-between}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .node-actions-container{min-block-size:1.5rem}:host([scale=s]) .node-actions-container .node-container .checkbox,:host([scale=s]) .node-actions-container .node-container .chevron,:host([scale=s]) .node-actions-container .node-container .checkmark,:host([scale=s]) .node-actions-container .node-container .bullet-point{margin-inline:0.25rem}:host([scale=s]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .node-actions-container{min-block-size:2rem}:host([scale=m]) .node-actions-container .node-container .checkbox,:host([scale=m]) .node-actions-container .node-container .chevron,:host([scale=m]) .node-actions-container .node-container .checkmark,:host([scale=m]) .node-actions-container .node-container .bullet-point{margin-inline:0.5rem}:host([scale=m]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .node-actions-container{min-block-size:2.75rem}:host([scale=l]) .node-actions-container .node-container .checkbox,:host([scale=l]) .node-actions-container .node-container .chevron,:host([scale=l]) .node-actions-container .node-container .checkmark,:host([scale=l]) .node-actions-container .node-container .bullet-point{margin-inline:0.75rem}:host([scale=l]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-app-z-index);inline-size:1px;transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-ui-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}::slotted(*):hover{text-decoration:none !important}::slotted(a){inline-size:100%;-webkit-text-decoration-line:none;text-decoration-line:none}:host{outline-color:transparent}:host:focus,:host:active{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host(:focus:not([disabled])){outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch}.checkbox{line-height:0}.checkbox-label{pointer-events:none;display:flex;align-items:center}.checkbox:focus{outline:2px solid transparent;outline-offset:2px}.children-container{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;margin-inline-start:1.25rem;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.item--expanded>.children-container{overflow:visible;opacity:1;transform:none;block-size:auto}.node-container{position:relative;display:flex;min-inline-size:0px;align-items:center}.node-container .checkmark,.node-container .bullet-point{opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-ui-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus:not([disabled])) .node-container .checkmark,:host(:focus:not([disabled])) .node-container .bullet-point{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([selected]) .node-container .bullet-point,:host([selected]) .node-container .checkmark,:host([selected]) .node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark{opacity:1;color:var(--calcite-ui-brand)}:host([selection-mode=none]:not([has-children])):host([scale=s]) .node-container{padding-inline-start:0.5rem}:host([selection-mode=none]:not([has-children])):host([scale=m]) .node-container{padding-inline-start:1rem}:host([selection-mode=none]:not([has-children])):host([scale=l]) .node-container{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=s]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.25rem}:host(:not([has-children])):host([scale=m]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=l]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.75rem}:host([has-children]) .node-container[data-selection-mode=ancestors] .checkbox{margin-inline-start:0}:host([has-children]) .node-container .bullet-point,:host([has-children]) .node-container .checkmark{display:none}:host([has-children][expanded]:not([selected]):not([selection-mode=none])) .node-container ::slotted(*){font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([has-children][selected]) .node-container[data-selection-mode=children],:host([has-children][selected]) .node-container[data-selection-mode=multichildren]{color:var(--calcite-ui-brand)}.chevron{position:relative;align-self:center;color:var(--calcite-ui-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;flex:0 0 auto;transform:rotate(0deg)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-ui-brand)}:host([hidden]){display:none}[hidden]{display:none}";
+const treeItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-ui-text-3)}.node-actions-container{display:flex}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .node-actions-container{min-block-size:1.5rem}:host([scale=s]) .node-actions-container .node-container .checkbox,:host([scale=s]) .node-actions-container .node-container .chevron,:host([scale=s]) .node-actions-container .node-container .checkmark,:host([scale=s]) .node-actions-container .node-container .bullet-point{margin-inline:0.25rem}:host([scale=s]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .node-actions-container{min-block-size:2rem}:host([scale=m]) .node-actions-container .node-container .checkbox,:host([scale=m]) .node-actions-container .node-container .chevron,:host([scale=m]) .node-actions-container .node-container .checkmark,:host([scale=m]) .node-actions-container .node-container .bullet-point{margin-inline:0.5rem}:host([scale=m]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .node-actions-container{min-block-size:2.75rem}:host([scale=l]) .node-actions-container .node-container .checkbox,:host([scale=l]) .node-actions-container .node-container .chevron,:host([scale=l]) .node-actions-container .node-container .checkmark,:host([scale=l]) .node-actions-container .node-container .bullet-point{margin-inline:0.75rem}:host([scale=l]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-app-z-index);inline-size:1px;transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-ui-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}::slotted(*):hover{text-decoration:none !important}::slotted(a){inline-size:100%;-webkit-text-decoration-line:none;text-decoration-line:none}:host{outline:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch}.checkbox{line-height:0}.checkbox-label{pointer-events:none;display:flex;align-items:center}.checkbox:focus{outline:2px solid transparent;outline-offset:2px}.children-container{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;margin-inline-start:1.25rem;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.item--expanded>.children-container{overflow:visible;opacity:1;transform:none;block-size:auto}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .checkmark,.node-container .bullet-point{opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-ui-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus:not([disabled])) .node-container .checkmark,:host(:focus:not([disabled])) .node-container .bullet-point{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([selected]) .node-container .bullet-point,:host([selected]) .node-container .checkmark,:host([selected]) .node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark{opacity:1;color:var(--calcite-ui-brand)}:host([selection-mode=none]:not([has-children])):host([scale=s]) .node-container{padding-inline-start:0.5rem}:host([selection-mode=none]:not([has-children])):host([scale=m]) .node-container{padding-inline-start:1rem}:host([selection-mode=none]:not([has-children])):host([scale=l]) .node-container{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=s]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.25rem}:host(:not([has-children])):host([scale=m]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=l]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.75rem}:host([has-children]) .node-container[data-selection-mode=ancestors] .checkbox{margin-inline-start:0}:host([has-children]) .node-container .bullet-point,:host([has-children]) .node-container .checkmark{display:none}:host([has-children][expanded]:not([selected]):not([selection-mode=none])) .node-container ::slotted(*){font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([has-children][selected]) .node-container[data-selection-mode=children],:host([has-children][selected]) .node-container[data-selection-mode=multichildren]{color:var(--calcite-ui-brand)}.chevron{position:relative;align-self:center;color:var(--calcite-ui-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;flex:0 0 auto;transform:rotate(0deg)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-ui-brand)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const TreeItem = class {
   constructor(hostRef) {
@@ -339,6 +369,7 @@ const TreeItem = class {
       this.expanded = !this.expanded;
     };
     this.childrenClickHandler = (event) => event.stopPropagation();
+    this.userChangedValue = false;
     this.updateParentIsExpanded = (el, expanded) => {
       const items = dom.getSlotted(el, SLOTS.children, {
         all: true,
@@ -361,12 +392,24 @@ const TreeItem = class {
     this.scale = undefined;
     this.indeterminate = false;
     this.selectionMode = undefined;
-    this.updateAfterInitialRender = false;
     this.hasEndActions = false;
+    this.updateAfterInitialRender = false;
   }
   expandedHandler(newValue) {
     this.updateParentIsExpanded(this.el, newValue);
   }
+  handleSelectedChange(value) {
+    if (this.selectionMode === "ancestors" && !this.userChangedValue) {
+      if (value) {
+        this.indeterminate = false;
+      }
+      this.calciteInternalTreeItemSelect.emit({
+        modifyCurrentSelection: true,
+        forceToggle: false,
+        updateItem: false,
+      });
+    }
+  }
   getSelectionMode() {
     this.isSelectionMultiLike =
       this.selectionMode === "multiple" || this.selectionMode === "multichildren";
@@ -420,7 +463,8 @@ const TreeItem = class {
     this.updateAncestorTree();
   }
   componentDidRender() {
-    interactive.updateHostInteraction(this, () => this.parentExpanded || this.depth === 1);
+    interactive.updateHostInteraction(this, () => false // programmatically focusable
+    );
   }
   render() {
     const rtl = dom.getElementDir(this.el) === "rtl";
@@ -454,7 +498,7 @@ const TreeItem = class {
         [CSS.nodeContainer]: true,
         [resources.CSS_UTILITY.rtl]: rtl,
       }, "data-selection-mode": this.selectionMode,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), index.h("div", { class: CSS.actionsEnd, hidden: !hasEndActions, ref: (el) => (this.actionSlotWrapper = el) }, slotNode)), index.h("div", { class: {
         [CSS.childrenContainer]: true,
         [resources.CSS_UTILITY.rtl]: rtl,
@@ -479,10 +523,11 @@ const TreeItem = class {
     this.calciteInternalTreeItemSelect.emit({
       modifyCurrentSelection: this.selectionMode === "ancestors" || this.isSelectionMultiLike,
       forceToggle: false,
+      updateItem: true,
     });
+    this.userChangedValue = true;
   }
   keyDownHandler(event) {
-    let root;
     if (this.isActionEndEvent(event)) {
       return;
     }
@@ -491,9 +536,11 @@ const TreeItem = class {
         if (this.selectionMode === "none") {
           return;
         }
+        this.userChangedValue = true;
         this.calciteInternalTreeItemSelect.emit({
           modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: false,
+          updateItem: true,
         });
         event.preventDefault();
         break;
@@ -502,7 +549,8 @@ const TreeItem = class {
           return;
         }
         // activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
-        const link = dom.nodeListToArray(this.el.children).find((el) => el.matches("a"));
+        const link = Array.from(this.el.children).find((el) => el.matches("a"));
+        this.userChangedValue = true;
         if (link) {
           link.click();
           this.selected = true;
@@ -511,25 +559,10 @@ const TreeItem = class {
           this.calciteInternalTreeItemSelect.emit({
             modifyCurrentSelection: this.isSelectionMultiLike,
             forceToggle: false,
+            updateItem: true,
           });
         }
         event.preventDefault();
-        break;
-      case "Home":
-        root = this.el.closest("calcite-tree:not([child])");
-        const firstNode = root.querySelector("calcite-tree-item");
-        firstNode === null || firstNode === void 0 ? void 0 : firstNode.focus();
-        break;
-      case "End":
-        root = this.el.closest("calcite-tree:not([child])");
-        let currentNode = root.children[root.children.length - 1]; // last child
-        let currentTree = dom.nodeListToArray(currentNode.children).find((el) => el.matches("calcite-tree"));
-        while (currentTree) {
-          currentNode = currentTree.children[root.children.length - 1];
-          currentTree = dom.nodeListToArray(currentNode.children).find((el) => el.matches("calcite-tree"));
-        }
-        currentNode === null || currentNode === void 0 ? void 0 : currentNode.focus();
-        break;
     }
   }
   //--------------------------------------------------------------------------
@@ -563,6 +596,11 @@ const TreeItem = class {
       else if (selectedSiblings.length > 0) {
         parentItem.indeterminate = true;
       }
+      const childItems = Array.from(this.el.querySelectorAll("calcite-tree-item:not([disabled])"));
+      childItems.forEach((item) => {
+        item.selected = true;
+        item.indeterminate = false;
+      });
     }
     else if (this.indeterminate) {
       const parentItem = this.parentTreeItem;
@@ -572,6 +610,7 @@ const TreeItem = class {
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "expanded": ["expandedHandler"],
+    "selected": ["handleSelectedChange"],
     "selectionMode": ["getSelectionMode"]
   }; }
 };

package/dist/cjs/card-manager_3.cjs.entry.js

@@ -155,9 +155,11 @@ const LayerTable = class {
     if (this._mapClickHandle) {
       this._mapClickHandle.remove();
     }
-    this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
-      void this._mapClicked(event);
-    });
+    if (this.mapView) {
+      this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
+        void this._mapClicked(event);
+      });
+    }
   }
   /**
    * watch for changes in layer view and verify if it has editing enabled
@@ -285,7 +287,8 @@ const LayerTable = class {
    */
   _getTableControlRow(slot) {
     const featuresSelected = this._selectedIndexes.length > 0;
-    return (index.h("div", { class: "display-flex table-border height-51", slot: slot }, index.h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, index.h("div", { class: "border-end" }, index.h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), this._getAction("filter", this._translations.filters, () => this._filter(), false), this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected)), index.h("calcite-dropdown", { disabled: this._layer === undefined }, index.h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, index.h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), index.h("calcite-dropdown-group", { "selection-mode": "none" }, index.h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), index.h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
+    const id = "more-table-options";
+    return (index.h("div", { class: "display-flex table-border height-51", slot: slot }, index.h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, index.h("div", { class: "border-end" }, index.h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), this._getAction("filter", this._translations.filters, () => this._filter(), false), this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected)), index.h("calcite-dropdown", { disabled: this._layer === undefined }, index.h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, index.h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, index.h("span", null, this._translations.moreOptions)), index.h("calcite-dropdown-group", { "selection-mode": "none" }, index.h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), index.h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
       this._translations.showSelected), index.h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), index.h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), index.h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)))));
   }
   /**
@@ -377,7 +380,8 @@ const LayerTable = class {
       this.featureSelectionChange.emit(this._selectedIndexes);
       if (this._layer) {
         await this._layer.when(() => {
-          const columnTemplates = this._getColumnTemplates(this._layer.id);
+          var _a, _b;
+          const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
           this._table.layer = this._layer;
           this._table.tableTemplate.columnTemplates = columnTemplates;
           this._table.view = this.mapView;
@@ -525,8 +529,9 @@ const LayerTable = class {
    * @returns void
    */
   _clearSelection() {
+    var _a;
     this._selectedIndexes = [];
-    this._table.highlightIds.removeAll();
+    (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
   }
   /**
    * Show the filter options
@@ -616,12 +621,12 @@ const LayerTable = class {
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
-    var _a;
+    var _a, _b, _c;
     const id = evt.detail[0];
     if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
       this._fetchingData = true;
-      const columnTemplates = this._getColumnTemplates(id);
       this._layer = await mapViewUtils.getLayerOrTable(this.mapView, id);
+      const columnTemplates = this._getColumnTemplates(id, (_c = (_b = this._layer) === null || _b === void 0 ? void 0 : _b.popupTemplate) === null || _c === void 0 ? void 0 : _c.fieldInfos);
       this._allIds = await mapViewUtils.queryAllIds(this._layer);
       if (!this._table) {
         await this._getTable(this._tableNode, columnTemplates);
@@ -647,7 +652,7 @@ const LayerTable = class {
    *
    * @returns a list of column templates if they exist
    */
-  _getColumnTemplates(id) {
+  _getColumnTemplates(id, fieldInfos) {
     var _a;
     let layerInfo;
     (_a = this.mapInfo.layerInfos) === null || _a === void 0 ? void 0 : _a.some(li => {
@@ -656,7 +661,25 @@ const LayerTable = class {
         return true;
       }
     });
-    return layerInfo === null || layerInfo === void 0 ? void 0 : layerInfo.columnTemplates;
+    let columnTemplates = layerInfo === null || layerInfo === void 0 ? void 0 : layerInfo.columnTemplates;
+    if (fieldInfos) {
+      columnTemplates = columnTemplates ? columnTemplates.map(columnTemplate => {
+        fieldInfos.some(fieldInfo => {
+          if (fieldInfo.fieldName === columnTemplate.fieldName) {
+            columnTemplate.label = fieldInfo.label;
+            return true;
+          }
+        });
+        return columnTemplate;
+      }) : fieldInfos.map(fieldInfo => {
+        return {
+          type: "field",
+          fieldName: fieldInfo.fieldName,
+          label: fieldInfo.label
+        };
+      });
+    }
+    return columnTemplates;
   }
   /**
    * Fetches the component's translations