@esri/solutions-components 0.6.7 → 0.6.8

package/dist/esm/calcite-action-group_2.entry.js

@@ -3,378 +3,378 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, F as Fragment, g as getElement, c as createEvent } from './index-d298aca9.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-91396dd5.js';
-import { g as getSlotted, t as toAriaBoolean, i as isPrimaryPointerButton, h as focusElement } from './dom-8a9e4ee8.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-08376d90.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-73d0926a.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-745553e0.js';
-import { S as SLOTS$1, C as CSS, I as ICONS$1 } from './resources-01034dfa.js';
-import { S as SLOTS, I as ICONS } from './resources-913009ae.js';
-import { g as getRoundRobinIndex } from './array-4a653f59.js';
-import { g as guid } from './guid-1608fd71.js';
-import { i as isActivationKey } from './key-97b504af.js';
-import './observers-67bdf9e5.js';
-import './resources-f97db74e.js';
+import { r as registerInstance, h, F as Fragment, g as getElement, c as createEvent } from './index-b5d9d795.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-27a0fce0.js';
+import { g as getSlotted, t as toAriaBoolean, i as isPrimaryPointerButton, h as focusElement } from './dom-843e3afd.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-6bca96ad.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-d8561d54.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-76168237.js';
+import { S as SLOTS$1, C as CSS, I as ICONS$1 } from './resources-d6a4d343.js';
+import { S as SLOTS, I as ICONS } from './resources-58d30a0f.js';
+import { g as getRoundRobinIndex } from './array-751a2b87.js';
+import { g as guid } from './guid-2bbb8cd1.js';
+import { i as isActivationKey } from './key-7a525416.js';
+import './observers-9d66685a.js';
+import './resources-94c47e64.js';
 
 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}: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]){flex-direction:row}:host([layout=grid]){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 ActionGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.setMenuOpen = (event) => {
-      this.menuOpen = !!event.target.open;
-    };
-    this.expanded = false;
-    this.layout = "vertical";
-    this.columns = undefined;
-    this.menuOpen = false;
-    this.overlayPositioning = "absolute";
-    this.scale = undefined;
-    this.messages = undefined;
-    this.messageOverrides = undefined;
-    this.effectiveLocale = "";
-    this.defaultMessages = undefined;
-  }
-  expandedHandler() {
-    this.menuOpen = false;
-  }
-  onMessagesChange() {
-    /* wired up by t9n util */
-  }
-  effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  //--------------------------------------------------------------------------
-  /** Sets focus on the component's first focusable element. */
-  async setFocus() {
-    await componentFocusable(this);
-    this.el.focus();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  connectedCallback() {
-    connectLocalized(this);
-    connectMessages(this);
-    connectConditionalSlotComponent(this);
-  }
-  disconnectedCallback() {
-    disconnectLocalized(this);
-    disconnectMessages(this);
-    disconnectConditionalSlotComponent(this);
-  }
-  async componentWillLoad() {
-    setUpLoadableComponent(this);
-    await setUpMessages(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Component Methods
-  //
-  // --------------------------------------------------------------------------
-  renderTooltip() {
-    const { el } = this;
-    const hasTooltip = getSlotted(el, SLOTS.menuTooltip);
-    return hasTooltip ? h("slot", { name: SLOTS.menuTooltip, slot: SLOTS$1.tooltip }) : null;
-  }
-  renderMenu() {
-    const { el, expanded, menuOpen, scale, layout, messages, overlayPositioning } = this;
-    const hasMenuItems = getSlotted(el, SLOTS.menuActions);
-    return hasMenuItems ? (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, h("calcite-action", { icon: ICONS.menu, scale: scale, slot: SLOTS$1.trigger, text: messages.more, textEnabled: expanded }), h("slot", { name: SLOTS.menuActions }), this.renderTooltip())) : null;
-  }
-  render() {
-    return (h(Fragment, null, h("slot", null), this.renderMenu()));
-  }
-  static get delegatesFocus() { return true; }
-  static get assetsDirs() { return ["assets"]; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "expanded": ["expandedHandler"],
-    "messageOverrides": ["onMessagesChange"],
-    "effectiveLocale": ["effectiveLocaleChange"]
-  }; }
-};
+const ActionGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.setMenuOpen = (event) => {
+      this.menuOpen = !!event.target.open;
+    };
+    this.expanded = false;
+    this.layout = "vertical";
+    this.columns = undefined;
+    this.menuOpen = false;
+    this.overlayPositioning = "absolute";
+    this.scale = undefined;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = "";
+    this.defaultMessages = undefined;
+  }
+  expandedHandler() {
+    this.menuOpen = false;
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component's first focusable element. */
+  async setFocus() {
+    await componentFocusable(this);
+    this.el.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectLocalized(this);
+    disconnectMessages(this);
+    disconnectConditionalSlotComponent(this);
+  }
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Component Methods
+  //
+  // --------------------------------------------------------------------------
+  renderTooltip() {
+    const { el } = this;
+    const hasTooltip = getSlotted(el, SLOTS.menuTooltip);
+    return hasTooltip ? h("slot", { name: SLOTS.menuTooltip, slot: SLOTS$1.tooltip }) : null;
+  }
+  renderMenu() {
+    const { el, expanded, menuOpen, scale, layout, messages, overlayPositioning } = this;
+    const hasMenuItems = getSlotted(el, SLOTS.menuActions);
+    return hasMenuItems ? (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, h("calcite-action", { icon: ICONS.menu, scale: scale, slot: SLOTS$1.trigger, text: messages.more, textEnabled: expanded }), h("slot", { name: SLOTS.menuActions }), this.renderTooltip())) : null;
+  }
+  render() {
+    return (h(Fragment, null, h("slot", null), this.renderMenu()));
+  }
+  static get delegatesFocus() { return true; }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "expanded": ["expandedHandler"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+};
 ActionGroup.style = actionGroupCss;
 
 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 SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
-const ActionMenu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteActionMenuOpen = createEvent(this, "calciteActionMenuOpen", 6);
-    this.actionElements = [];
-    this.guid = `calcite-action-menu-${guid()}`;
-    this.menuId = `${this.guid}-menu`;
-    this.menuButtonId = `${this.guid}-menu-button`;
-    // --------------------------------------------------------------------------
-    //
-    //  Component Methods
-    //
-    // --------------------------------------------------------------------------
-    this.connectMenuButtonEl = () => {
-      const { menuButtonId, menuId, open, label } = this;
-      const menuButtonEl = this.slottedMenuButtonEl || this.defaultMenuButtonEl;
-      if (this.menuButtonEl === menuButtonEl) {
-        return;
-      }
-      this.disconnectMenuButtonEl();
-      this.menuButtonEl = menuButtonEl;
-      this.setTooltipReferenceElement();
-      if (!menuButtonEl) {
-        return;
-      }
-      menuButtonEl.active = open;
-      menuButtonEl.setAttribute("aria-controls", menuId);
-      menuButtonEl.setAttribute("aria-expanded", toAriaBoolean(open));
-      menuButtonEl.setAttribute("aria-haspopup", "true");
-      if (!menuButtonEl.id) {
-        menuButtonEl.id = menuButtonId;
-      }
-      if (!menuButtonEl.label) {
-        menuButtonEl.label = label;
-      }
-      if (!menuButtonEl.text) {
-        menuButtonEl.text = label;
-      }
-      menuButtonEl.addEventListener("pointerdown", this.menuButtonClick);
-      menuButtonEl.addEventListener("keydown", this.menuButtonKeyDown);
-    };
-    this.disconnectMenuButtonEl = () => {
-      const { menuButtonEl } = this;
-      if (!menuButtonEl) {
-        return;
-      }
-      menuButtonEl.removeEventListener("pointerdown", this.menuButtonClick);
-      menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown);
-    };
-    this.setMenuButtonEl = (event) => {
-      const actions = event.target
-        .assignedElements({
-        flatten: true,
-      })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action"));
-      this.slottedMenuButtonEl = actions[0];
-      this.connectMenuButtonEl();
-    };
-    this.setDefaultMenuButtonEl = (el) => {
-      this.defaultMenuButtonEl = el;
-      this.connectMenuButtonEl();
-    };
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.handleCalciteActionClick = () => {
-      this.open = false;
-      this.setFocus();
-    };
-    this.menuButtonClick = (event) => {
-      if (!isPrimaryPointerButton(event)) {
-        return;
-      }
-      this.toggleOpen();
-    };
-    this.updateTooltip = (event) => {
-      const tooltips = event.target
-        .assignedElements({
-        flatten: true,
-      })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
-      this.tooltipEl = tooltips[0];
-      this.setTooltipReferenceElement();
-    };
-    this.setTooltipReferenceElement = () => {
-      const { tooltipEl, expanded, menuButtonEl, open } = this;
-      if (tooltipEl) {
-        tooltipEl.referenceElement = !expanded && !open ? menuButtonEl : null;
-      }
-    };
-    this.updateAction = (action, index) => {
-      const { guid, activeMenuItemIndex } = this;
-      const id = `${guid}-action-${index}`;
-      action.tabIndex = -1;
-      action.setAttribute("role", "menuitem");
-      if (!action.id) {
-        action.id = id;
-      }
-      action.active = index === activeMenuItemIndex;
-    };
-    this.updateActions = (actions) => {
-      actions === null || actions === void 0 ? void 0 : actions.forEach(this.updateAction);
-    };
-    this.handleDefaultSlotChange = (event) => {
-      const actions = event.target
-        .assignedElements({
-        flatten: true,
-      })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action"));
-      this.actionElements = actions;
-    };
-    this.menuButtonKeyDown = (event) => {
-      const { key } = event;
-      const { actionElements, activeMenuItemIndex, open } = this;
-      if (!actionElements.length) {
-        return;
-      }
-      if (isActivationKey(key)) {
-        event.preventDefault();
-        if (!open) {
-          this.toggleOpen();
-          return;
-        }
-        const action = actionElements[activeMenuItemIndex];
-        action ? action.click() : this.toggleOpen(false);
-      }
-      if (key === "Tab") {
-        this.open = false;
-        return;
-      }
-      if (key === "Escape") {
-        this.toggleOpen(false);
-        event.preventDefault();
-        return;
-      }
-      this.handleActionNavigation(event, key, actionElements);
-    };
-    this.handleActionNavigation = (event, key, actions) => {
-      if (!this.isValidKey(key, SUPPORTED_MENU_NAV_KEYS)) {
-        return;
-      }
-      event.preventDefault();
-      if (!this.open) {
-        this.toggleOpen();
-        if (key === "Home" || key === "ArrowDown") {
-          this.activeMenuItemIndex = 0;
-        }
-        if (key === "End" || key === "ArrowUp") {
-          this.activeMenuItemIndex = actions.length - 1;
-        }
-        return;
-      }
-      if (key === "Home") {
-        this.activeMenuItemIndex = 0;
-      }
-      if (key === "End") {
-        this.activeMenuItemIndex = actions.length - 1;
-      }
-      const currentIndex = this.activeMenuItemIndex;
-      if (key === "ArrowUp") {
-        this.activeMenuItemIndex = getRoundRobinIndex(Math.max(currentIndex - 1, -1), actions.length);
-      }
-      if (key === "ArrowDown") {
-        this.activeMenuItemIndex = getRoundRobinIndex(currentIndex + 1, actions.length);
-      }
-    };
-    this.toggleOpenEnd = () => {
-      this.setFocus();
-      this.el.removeEventListener("calcitePopoverOpen", this.toggleOpenEnd);
-    };
-    this.toggleOpen = (value = !this.open) => {
-      this.el.addEventListener("calcitePopoverOpen", this.toggleOpenEnd);
-      this.open = value;
-    };
-    this.expanded = false;
-    this.flipPlacements = undefined;
-    this.label = undefined;
-    this.open = false;
-    this.overlayPositioning = "absolute";
-    this.placement = "auto";
-    this.scale = undefined;
-    this.menuButtonEl = undefined;
-    this.activeMenuItemIndex = -1;
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  componentWillLoad() {
-    setUpLoadableComponent(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  disconnectedCallback() {
-    this.disconnectMenuButtonEl();
-  }
-  expandedHandler() {
-    this.open = false;
-    this.setTooltipReferenceElement();
-  }
-  openHandler(open) {
-    this.activeMenuItemIndex = this.open ? 0 : -1;
-    if (this.menuButtonEl) {
-      this.menuButtonEl.active = open;
-    }
-    this.calciteActionMenuOpen.emit();
-    this.setTooltipReferenceElement();
-  }
-  closeCalciteActionMenuOnClick(event) {
-    if (!isPrimaryPointerButton(event)) {
-      return;
-    }
-    const composedPath = event.composedPath();
-    if (composedPath.includes(this.el)) {
-      return;
-    }
-    this.open = false;
-  }
-  activeMenuItemIndexHandler() {
-    this.updateActions(this.actionElements);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Methods
-  //
-  // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
-  async setFocus() {
-    await componentFocusable(this);
-    return focusElement(this.menuButtonEl);
-  }
-  renderMenuButton() {
-    const { label, scale, expanded } = this;
-    const menuButtonSlot = (h("slot", { name: SLOTS$1.trigger, onSlotchange: this.setMenuButtonEl }, h("calcite-action", { class: CSS.defaultTrigger, icon: ICONS$1.menu, scale: scale, text: label, textEnabled: expanded,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setDefaultMenuButtonEl })));
-    return menuButtonSlot;
-  }
-  renderMenuItems() {
-    const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements, } = this;
-    const activeAction = actionElements[activeMenuItemIndex];
-    const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
-    return (h("calcite-popover", { flipPlacements: flipPlacements, focusTrapDisabled: true, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, pointerDisabled: true, referenceElement: menuButtonEl }, h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
-  }
-  render() {
-    return (h(Fragment, null, this.renderMenuButton(), this.renderMenuItems(), h("slot", { name: SLOTS$1.tooltip, onSlotchange: this.updateTooltip })));
-  }
-  isValidKey(key, supportedKeys) {
-    return !!supportedKeys.find((k) => k === key);
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "expanded": ["expandedHandler"],
-    "open": ["openHandler"],
-    "activeMenuItemIndex": ["activeMenuItemIndexHandler"]
-  }; }
-};
+const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
+const ActionMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteActionMenuOpen = createEvent(this, "calciteActionMenuOpen", 6);
+    this.actionElements = [];
+    this.guid = `calcite-action-menu-${guid()}`;
+    this.menuId = `${this.guid}-menu`;
+    this.menuButtonId = `${this.guid}-menu-button`;
+    // --------------------------------------------------------------------------
+    //
+    //  Component Methods
+    //
+    // --------------------------------------------------------------------------
+    this.connectMenuButtonEl = () => {
+      const { menuButtonId, menuId, open, label } = this;
+      const menuButtonEl = this.slottedMenuButtonEl || this.defaultMenuButtonEl;
+      if (this.menuButtonEl === menuButtonEl) {
+        return;
+      }
+      this.disconnectMenuButtonEl();
+      this.menuButtonEl = menuButtonEl;
+      this.setTooltipReferenceElement();
+      if (!menuButtonEl) {
+        return;
+      }
+      menuButtonEl.active = open;
+      menuButtonEl.setAttribute("aria-controls", menuId);
+      menuButtonEl.setAttribute("aria-expanded", toAriaBoolean(open));
+      menuButtonEl.setAttribute("aria-haspopup", "true");
+      if (!menuButtonEl.id) {
+        menuButtonEl.id = menuButtonId;
+      }
+      if (!menuButtonEl.label) {
+        menuButtonEl.label = label;
+      }
+      if (!menuButtonEl.text) {
+        menuButtonEl.text = label;
+      }
+      menuButtonEl.addEventListener("pointerdown", this.menuButtonClick);
+      menuButtonEl.addEventListener("keydown", this.menuButtonKeyDown);
+    };
+    this.disconnectMenuButtonEl = () => {
+      const { menuButtonEl } = this;
+      if (!menuButtonEl) {
+        return;
+      }
+      menuButtonEl.removeEventListener("pointerdown", this.menuButtonClick);
+      menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown);
+    };
+    this.setMenuButtonEl = (event) => {
+      const actions = event.target
+        .assignedElements({
+        flatten: true,
+      })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action"));
+      this.slottedMenuButtonEl = actions[0];
+      this.connectMenuButtonEl();
+    };
+    this.setDefaultMenuButtonEl = (el) => {
+      this.defaultMenuButtonEl = el;
+      this.connectMenuButtonEl();
+    };
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleCalciteActionClick = () => {
+      this.open = false;
+      this.setFocus();
+    };
+    this.menuButtonClick = (event) => {
+      if (!isPrimaryPointerButton(event)) {
+        return;
+      }
+      this.toggleOpen();
+    };
+    this.updateTooltip = (event) => {
+      const tooltips = event.target
+        .assignedElements({
+        flatten: true,
+      })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+      this.tooltipEl = tooltips[0];
+      this.setTooltipReferenceElement();
+    };
+    this.setTooltipReferenceElement = () => {
+      const { tooltipEl, expanded, menuButtonEl, open } = this;
+      if (tooltipEl) {
+        tooltipEl.referenceElement = !expanded && !open ? menuButtonEl : null;
+      }
+    };
+    this.updateAction = (action, index) => {
+      const { guid, activeMenuItemIndex } = this;
+      const id = `${guid}-action-${index}`;
+      action.tabIndex = -1;
+      action.setAttribute("role", "menuitem");
+      if (!action.id) {
+        action.id = id;
+      }
+      action.active = index === activeMenuItemIndex;
+    };
+    this.updateActions = (actions) => {
+      actions === null || actions === void 0 ? void 0 : actions.forEach(this.updateAction);
+    };
+    this.handleDefaultSlotChange = (event) => {
+      const actions = event.target
+        .assignedElements({
+        flatten: true,
+      })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action"));
+      this.actionElements = actions;
+    };
+    this.menuButtonKeyDown = (event) => {
+      const { key } = event;
+      const { actionElements, activeMenuItemIndex, open } = this;
+      if (!actionElements.length) {
+        return;
+      }
+      if (isActivationKey(key)) {
+        event.preventDefault();
+        if (!open) {
+          this.toggleOpen();
+          return;
+        }
+        const action = actionElements[activeMenuItemIndex];
+        action ? action.click() : this.toggleOpen(false);
+      }
+      if (key === "Tab") {
+        this.open = false;
+        return;
+      }
+      if (key === "Escape") {
+        this.toggleOpen(false);
+        event.preventDefault();
+        return;
+      }
+      this.handleActionNavigation(event, key, actionElements);
+    };
+    this.handleActionNavigation = (event, key, actions) => {
+      if (!this.isValidKey(key, SUPPORTED_MENU_NAV_KEYS)) {
+        return;
+      }
+      event.preventDefault();
+      if (!this.open) {
+        this.toggleOpen();
+        if (key === "Home" || key === "ArrowDown") {
+          this.activeMenuItemIndex = 0;
+        }
+        if (key === "End" || key === "ArrowUp") {
+          this.activeMenuItemIndex = actions.length - 1;
+        }
+        return;
+      }
+      if (key === "Home") {
+        this.activeMenuItemIndex = 0;
+      }
+      if (key === "End") {
+        this.activeMenuItemIndex = actions.length - 1;
+      }
+      const currentIndex = this.activeMenuItemIndex;
+      if (key === "ArrowUp") {
+        this.activeMenuItemIndex = getRoundRobinIndex(Math.max(currentIndex - 1, -1), actions.length);
+      }
+      if (key === "ArrowDown") {
+        this.activeMenuItemIndex = getRoundRobinIndex(currentIndex + 1, actions.length);
+      }
+    };
+    this.toggleOpenEnd = () => {
+      this.setFocus();
+      this.el.removeEventListener("calcitePopoverOpen", this.toggleOpenEnd);
+    };
+    this.toggleOpen = (value = !this.open) => {
+      this.el.addEventListener("calcitePopoverOpen", this.toggleOpenEnd);
+      this.open = value;
+    };
+    this.expanded = false;
+    this.flipPlacements = undefined;
+    this.label = undefined;
+    this.open = false;
+    this.overlayPositioning = "absolute";
+    this.placement = "auto";
+    this.scale = undefined;
+    this.menuButtonEl = undefined;
+    this.activeMenuItemIndex = -1;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  disconnectedCallback() {
+    this.disconnectMenuButtonEl();
+  }
+  expandedHandler() {
+    this.open = false;
+    this.setTooltipReferenceElement();
+  }
+  openHandler(open) {
+    this.activeMenuItemIndex = this.open ? 0 : -1;
+    if (this.menuButtonEl) {
+      this.menuButtonEl.active = open;
+    }
+    this.calciteActionMenuOpen.emit();
+    this.setTooltipReferenceElement();
+  }
+  closeCalciteActionMenuOnClick(event) {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+    const composedPath = event.composedPath();
+    if (composedPath.includes(this.el)) {
+      return;
+    }
+    this.open = false;
+  }
+  activeMenuItemIndexHandler() {
+    this.updateActions(this.actionElements);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    await componentFocusable(this);
+    return focusElement(this.menuButtonEl);
+  }
+  renderMenuButton() {
+    const { label, scale, expanded } = this;
+    const menuButtonSlot = (h("slot", { name: SLOTS$1.trigger, onSlotchange: this.setMenuButtonEl }, h("calcite-action", { class: CSS.defaultTrigger, icon: ICONS$1.menu, scale: scale, text: label, textEnabled: expanded,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setDefaultMenuButtonEl })));
+    return menuButtonSlot;
+  }
+  renderMenuItems() {
+    const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements, } = this;
+    const activeAction = actionElements[activeMenuItemIndex];
+    const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
+    return (h("calcite-popover", { flipPlacements: flipPlacements, focusTrapDisabled: true, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, pointerDisabled: true, referenceElement: menuButtonEl }, h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+  }
+  render() {
+    return (h(Fragment, null, this.renderMenuButton(), this.renderMenuItems(), h("slot", { name: SLOTS$1.tooltip, onSlotchange: this.updateTooltip })));
+  }
+  isValidKey(key, supportedKeys) {
+    return !!supportedKeys.find((k) => k === key);
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "expanded": ["expandedHandler"],
+    "open": ["openHandler"],
+    "activeMenuItemIndex": ["activeMenuItemIndexHandler"]
+  }; }
+};
 ActionMenu.style = actionMenuCss;
 
 export { ActionGroup as calcite_action_group, ActionMenu as calcite_action_menu };