@esri/solutions-components 0.6.23 → 0.6.25

package/dist/collection/components/layer-table/layer-table.js

@@ -22,7 +22,7 @@ import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
-import { queryFeaturesByID, queryAllIds } from "../../utils/queryUtils";
+import { queryAllIds } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 export class LayerTable {
   constructor() {
@@ -46,13 +46,14 @@ export class LayerTable {
       this._tableNode = node;
     };
     this.enableAutoRefresh = undefined;
+    this.enableCSV = undefined;
     this.enableInlineEdit = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
     this.onlyShowUpdatableLayers = undefined;
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
-    this._alertOpen = false;
+    this._confirmDelete = false;
     this._fetchingData = false;
     this._isDeleting = false;
     this._layer = undefined;
@@ -95,20 +96,6 @@ export class LayerTable {
       await this._sortTable();
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Get the selected graphics
-   *
-   * @returns Promise that resolves when the operation is complete
-   */
-  async getSelectedGraphics() {
-    return this._selectedIndexes.length > 0 ?
-      await this._getGraphics(this._selectedIndexes) : [];
-  }
   /**
    * Scroll and zoom to the selected feature from the Features widget.
    *
@@ -174,7 +161,7 @@ export class LayerTable {
     const selected = this._selectedIndexes.length.toString();
     return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), h("div", { class: "bottom-left background text-color" }, this._translations.recordsSelected
       .replace("{{total}}", total)
-      .replace("{{selected}}", selected))), this._getEditDisabledWarning()), this._deleteMessage()));
+      .replace("{{selected}}", selected)))), this._deleteMessage()));
   }
   //--------------------------------------------------------------------------
   //
@@ -207,7 +194,8 @@ export class LayerTable {
     var _a;
     const featuresSelected = this._selectedIndexes.length > 0;
     const id = "more-table-options";
-    return (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV))), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
+    return (h("div", { class: "display-flex border-bottom height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), this.enableCSV ?
+      (h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)) : undefined)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
   }
   /**
    * Get an action and tooltip
@@ -267,7 +255,8 @@ export class LayerTable {
       this._checkEditEnabled();
       await this._table.when(() => {
         this._table.highlightIds.on("change", () => {
-          this._selectedIndexes = this._table.highlightIds.toArray();
+          // https://github.com/Esri/solutions-components/issues/365
+          this._selectedIndexes = this._table.highlightIds.toArray().reverse();
           if (this._showOnlySelected) {
             if (this._selectedIndexes.length > 0) {
               this._table.filterBySelection();
@@ -345,21 +334,13 @@ export class LayerTable {
       }
     }
   }
-  /**
-   * Show warning when editing is disabled
-   *
-   * @returns node with warning message
-   */
-  _getEditDisabledWarning() {
-    return (h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen && !this._confirmDelete, placement: "top" }, h("div", { slot: "title" }, this._translations.deleteDisabled), h("div", { slot: "message" }, this._translations.enableEditing)));
-  }
   /**
    * Show delete confirmation message
    *
    * @returns node to confirm or deny the delete operation
    */
   _deleteMessage() {
-    return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "danger", open: this._confirmDelete }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, h("calcite-icon", { "aria-hidden": "true", class: "padding-end-1 danger-color", icon: "exclamation-mark-triangle", scale: "m" }), this._translations.deleteFeature), h("div", { slot: "content" }, this._translations.confirm), h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._alertClosed(), slot: "secondary", width: "full" }, this._translations.cancel), h("calcite-button", { kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations.delete)));
+    return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "danger", onCalciteModalClose: () => this._deleteClosed(), open: this._confirmDelete }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, h("calcite-icon", { "aria-hidden": "true", class: "padding-end-1 danger-color", icon: "exclamation-mark-triangle", scale: "m" }), this._translations.deleteFeature), h("div", { slot: "content" }, this._translations.confirm), h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._deleteClosed(), slot: "secondary", width: "full" }, this._translations.cancel), h("calcite-button", { kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations.delete)));
   }
   /**
    * Delete the currently selected features
@@ -377,7 +358,7 @@ export class LayerTable {
     await this._table.refresh();
     this._allIds = await queryAllIds(this._layer);
     this._isDeleting = false;
-    this._alertClosed();
+    this._deleteClosed();
   }
   /**
    * Handle map click events to keep table and map click selection in sync
@@ -413,8 +394,7 @@ export class LayerTable {
    *
    * @returns void
    */
-  _alertClosed() {
-    this._alertOpen = false;
+  _deleteClosed() {
     this._confirmDelete = false;
   }
   /**
@@ -517,20 +497,7 @@ export class LayerTable {
    * @returns a promise that will resolve when the operation is complete
    */
   _delete() {
-    if (this._editEnabled) {
-      this._confirmDelete = true;
-    }
-    this._alertOpen = true;
-  }
-  /**
-   * Get the graphics for all selected indexes
-   *
-   * @param ids the ids for the graphics to fetch
-   *
-   * @returns An array of selected graphics
-   */
-  async _getGraphics(ids) {
-    return ids.length > 0 ? queryFeaturesByID(ids, this._table.layer, [], false, this.mapView.spatialReference) : [];
+    this._confirmDelete = true;
   }
   /**
    * Handles layer selection change to show new table
@@ -640,6 +607,23 @@ export class LayerTable {
         "attribute": "enable-auto-refresh",
         "reflect": false
       },
+      "enableCSV": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the export to csv button will be available"
+        },
+        "attribute": "enable-c-s-v",
+        "reflect": false
+      },
       "enableInlineEdit": {
         "type": "boolean",
         "mutable": false,
@@ -753,7 +737,7 @@ export class LayerTable {
   }
   static get states() {
     return {
-      "_alertOpen": {},
+      "_confirmDelete": {},
       "_fetchingData": {},
       "_isDeleting": {},
       "_layer": {},
@@ -796,34 +780,6 @@ export class LayerTable {
         }
       }];
   }
-  static get methods() {
-    return {
-      "getSelectedGraphics": {
-        "complexType": {
-          "signature": "() => Promise<__esri.Graphic[]>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "___esri": {
-              "location": "global",
-              "id": "global::___esri"
-            }
-          },
-          "return": "Promise<Graphic[]>"
-        },
-        "docs": {
-          "text": "Get the selected graphics",
-          "tags": [{
-              "name": "returns",
-              "text": "Promise that resolves when the operation is complete"
-            }]
-        }
-      }
-    };
-  }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{

package/dist/collection/utils/interfaces.ts

@@ -476,4 +476,5 @@ export interface IExportInfo {
 
 export interface IBasemapConfig {
   basemapIdsToFilter: string[];
+  basemapGroupId: string;
 }

package/dist/components/ExpandToggle.js

@@ -11,16 +11,17 @@ import { S as SLOTS } from './action-menu.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.8.0
+ * v1.9.0
  */
 const overflowActionsDebounceInMs = 150;
 const groupBufferPx = 2;
 const getAverage = (arr) => arr.reduce((p, c) => p + c, 0) / arr.length;
 const geActionDimensions = (actions) => {
-  const actionLen = actions?.length;
+  const actionsNotSlotted = actions.filter((action) => action.slot !== SLOTS$1.menuActions);
+  const actionLen = actionsNotSlotted?.length;
   return {
-    actionWidth: actionLen ? getAverage(actions.map((action) => action.clientWidth || 0)) : 0,
-    actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0,
+    actionWidth: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientWidth || 0)) : 0,
+    actionHeight: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientHeight || 0)) : 0,
   };
 };
 const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount, }) => {
@@ -66,7 +67,7 @@ const overflowActions = ({ actionGroups, expanded, overflowCount, }) => {
 /*!
  * 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.8.0
+ * v1.9.0
  */
 const ICONS = {
   chevronsLeft: "chevrons-left",

package/dist/components/FloatingArrow.js

@@ -8,7 +8,7 @@ import { h } from '@stencil/core/internal/client';
 /*!
  * 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.8.0
+ * v1.9.0
  */
 const CSS = {
   arrow: "calcite-floating-ui-arrow",

package/dist/components/Heading.js

@@ -8,7 +8,7 @@ import { h } from '@stencil/core/internal/client';
 /*!
  * 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.8.0
+ * v1.9.0
  */
 function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/components/action-bar.js

@@ -22,7 +22,7 @@ import { d as debounce } from './debounce.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.8.0
+ * v1.9.0
  */
 const CSS = {
   actionGroupEnd: "action-group--end",
@@ -147,9 +147,13 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class ActionBar extends HTMLE
     this.updateGroups();
   }
   overflowDisabledHandler(overflowActionsDisabled) {
-    overflowActionsDisabled
-      ? this.resizeObserver.disconnect()
-      : this.resizeObserver.observe(this.el);
+    var _a, _b;
+    if (overflowActionsDisabled) {
+      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      return;
+    }
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.el);
+    this.overflowActions();
   }
   onMessagesChange() {
     /* wired up by t9n util */
@@ -229,7 +233,7 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class ActionBar extends HTMLE
     const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip,
       // 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.setExpandToggleRef })) : null;
-    return (h("calcite-action-group", { class: CSS.actionGroupEnd, label: actionsEndGroupLabel, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), layout: layout, scale: scale }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), h("slot", { name: SLOTS.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
+    return (h("calcite-action-group", { class: CSS.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), label: actionsEndGroupLabel, layout: layout, scale: scale }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), h("slot", { name: SLOTS.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
   }
   render() {
     return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));

package/dist/components/action-group.js

@@ -18,7 +18,7 @@ import { d as defineCustomElement$1 } from './popover.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.8.0
+ * v1.9.0
  */
 const SLOTS = {
   menuActions: "menu-actions",
@@ -31,7 +31,7 @@ const CSS = {
   container: "container",
 };
 
-const actionGroupCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}:host([hidden]){display:none}[hidden]{display:none}";
+const actionGroupCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3;--calcite-action-group-gap:1px;--calcite-action-group-padding:1px}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:var(--calcite-ui-background);gap:var(--calcite-action-group-gap);padding:var(--calcite-action-group-gap);grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const ActionGroup = /*@__PURE__*/ proxyCustomElement(class ActionGroup extends HTMLElement {
   constructor() {

package/dist/components/action-menu.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$1 } from './popover.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.8.0
+ * v1.9.0
  */
 const CSS = {
   menu: "menu",
@@ -30,8 +30,9 @@ const SLOTS = {
 const ICONS = {
   menu: "ellipsis",
 };
+const activeAttr = "data-active";
 
-const actionMenuCss = ":host{box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}.menu ::slotted(calcite-action){margin:0.125rem;display:flex;outline-color:transparent}.menu ::slotted(calcite-action[active]){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          );outline-offset:0px}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{flex-direction:column;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
+const actionMenuCss = ":host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}.menu ::slotted(calcite-action){margin:0.125rem;display:flex;outline-color:transparent}.menu ::slotted(calcite-action[data-active]){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          );outline-offset:0px}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{flex-direction:column;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
 
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 const ActionMenu = /*@__PURE__*/ proxyCustomElement(class ActionMenu extends HTMLElement {
@@ -136,7 +137,8 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class ActionMenu extends HTM
       if (!action.id) {
         action.id = id;
       }
-      action.active = index === activeMenuItemIndex;
+      // data attribute is used to style the "activeMenuItemIndex" action using token focus styling.
+      action.toggleAttribute(activeAttr, index === activeMenuItemIndex);
     };
     this.updateActions = (actions) => {
       actions === null || actions === void 0 ? void 0 : actions.forEach(this.updateAction);
@@ -212,6 +214,7 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class ActionMenu extends HTM
       this.el.addEventListener("calcitePopoverOpen", this.toggleOpenEnd);
       this.open = value;
     };
+    this.appearance = "solid";
     this.expanded = false;
     this.flipPlacements = undefined;
     this.label = undefined;
@@ -272,8 +275,8 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class ActionMenu extends HTM
     return focusElement(this.menuButtonEl);
   }
   renderMenuButton() {
-    const { label, scale, expanded } = this;
-    const menuButtonSlot = (h("slot", { name: SLOTS.trigger, onSlotchange: this.setMenuButtonEl }, h("calcite-action", { class: CSS.defaultTrigger, icon: ICONS.menu, scale: scale, text: label, textEnabled: expanded,
+    const { appearance, label, scale, expanded } = this;
+    const menuButtonSlot = (h("slot", { name: SLOTS.trigger, onSlotchange: this.setMenuButtonEl }, h("calcite-action", { appearance: appearance, class: CSS.defaultTrigger, icon: ICONS.menu, scale: scale, text: label, textEnabled: expanded,
       // 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.setDefaultMenuButtonEl })));
     return menuButtonSlot;
@@ -298,6 +301,7 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class ActionMenu extends HTM
   }; }
   static get style() { return actionMenuCss; }
 }, [1, "calcite-action-menu", {
+    "appearance": [513],
     "expanded": [516],
     "flipPlacements": [16],
     "label": [1],

package/dist/components/action.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$1 } from './loader.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.8.0
+ * v1.9.0
  */
 const CSS = {
   button: "button",