@esri/solutions-components 0.8.2 → 0.8.3

package/dist/solutions-components/calcite-action-bar.entry.js

@@ -0,0 +1,252 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { d as debounce } from './lodash-98e4b7d0.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a395417e.js';
+import { s as slotChangeGetAssignedElements, u as slotChangeHasAssignedElement, f as focusFirstTabbable } from './dom-b91aa537.js';
+import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-aea90723.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { c as createObserver } from './observers-5ba39eee.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-b39c5433.js';
+import { t as toggleChildActionText, q as queryActions, g as geActionDimensions, a as getOverflowCount, o as overflowActions, b as overflowActionsDebounceInMs, E as ExpandToggle } from './ExpandToggle-22fd2faa.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+import './key-9a10d862.js';
+import './resources-b0e2b809.js';
+import './resources-20074cb1.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.
+ * v2.4.0
+ */
+const CSS = {
+    actionGroupEnd: "action-group--end",
+};
+const SLOTS = {
+    actionsEnd: "actions-end",
+    bottomActions: "bottom-actions",
+    expandTooltip: "expand-tooltip",
+};
+
+const actionBarCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{pointer-events:auto;display:inline-flex;align-self:stretch;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-color-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-block-end:0;border-inline-end:1px solid var(--calcite-color-border-3)}:host([layout=horizontal][expand-disabled]) ::slotted(calcite-action-group:last-of-type){border-inline-end:0}::slotted(calcite-action-group:last-child){border-block-end:0;border-inline-end:0}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}";
+
+const ActionBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 6);
+        this.mutationObserver = createObserver("mutation", () => {
+            const { el, expanded } = this;
+            toggleChildActionText({ el, expanded });
+            this.overflowActions();
+        });
+        this.resizeObserver = createObserver("resize", (entries) => this.resizeHandlerEntries(entries));
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.actionMenuOpenHandler = (event) => {
+            if (event.target.menuOpen) {
+                const composedPath = event.composedPath();
+                Array.from(this.el.querySelectorAll("calcite-action-group")).forEach((group) => {
+                    if (!composedPath.includes(group)) {
+                        group.menuOpen = false;
+                    }
+                });
+            }
+        };
+        this.resizeHandlerEntries = (entries) => {
+            entries.forEach(this.resizeHandler);
+        };
+        this.resizeHandler = (entry) => {
+            const { width, height } = entry.contentRect;
+            this.resize({ width, height });
+        };
+        this.resize = debounce(({ width, height }) => {
+            const { el, expanded, expandDisabled, layout, overflowActionsDisabled } = this;
+            if (overflowActionsDisabled ||
+                (layout === "vertical" && !height) ||
+                (layout === "horizontal" && !width)) {
+                return;
+            }
+            const actions = queryActions(el);
+            const actionCount = expandDisabled ? actions.length : actions.length + 1;
+            const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
+            this.setGroupLayout(actionGroups);
+            const groupCount = this.hasActionsEnd || this.hasBottomActions || !expandDisabled
+                ? actionGroups.length + 1
+                : actionGroups.length;
+            const { actionHeight, actionWidth } = geActionDimensions(actions);
+            const overflowCount = getOverflowCount({
+                layout,
+                actionCount,
+                actionHeight,
+                actionWidth,
+                height,
+                width,
+                groupCount,
+            });
+            overflowActions({
+                actionGroups,
+                expanded,
+                overflowCount,
+            });
+        }, overflowActionsDebounceInMs);
+        this.toggleExpand = () => {
+            this.expanded = !this.expanded;
+            this.calciteActionBarToggle.emit();
+        };
+        this.setExpandToggleRef = (el) => {
+            this.expandToggleEl = el;
+        };
+        this.handleDefaultSlotChange = (event) => {
+            const groups = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-action-group"));
+            this.setGroupLayout(groups);
+        };
+        this.handleActionsEndSlotChange = (event) => {
+            this.hasActionsEnd = slotChangeHasAssignedElement(event);
+        };
+        this.handleBottomActionsSlotChange = (event) => {
+            this.hasBottomActions = slotChangeHasAssignedElement(event);
+        };
+        this.handleTooltipSlotChange = (event) => {
+            const tooltips = slotChangeGetAssignedElements(event).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+            this.expandTooltip = tooltips[0];
+        };
+        this.actionsEndGroupLabel = undefined;
+        this.expandDisabled = false;
+        this.expanded = false;
+        this.layout = "vertical";
+        this.overflowActionsDisabled = false;
+        this.overlayPositioning = "absolute";
+        this.position = undefined;
+        this.scale = undefined;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.effectiveLocale = undefined;
+        this.hasActionsEnd = false;
+        this.hasBottomActions = false;
+        this.expandTooltip = undefined;
+        this.defaultMessages = undefined;
+    }
+    expandHandler() {
+        this.overflowActions();
+    }
+    expandedHandler() {
+        const { el, expanded } = this;
+        toggleChildActionText({ el, expanded });
+        this.overflowActions();
+    }
+    layoutHandler() {
+        this.updateGroups();
+    }
+    overflowDisabledHandler(overflowActionsDisabled) {
+        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 */
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    componentDidLoad() {
+        const { el, expanded } = this;
+        setComponentLoaded(this);
+        toggleChildActionText({ el, expanded });
+        this.overflowActions();
+    }
+    connectedCallback() {
+        var _a, _b;
+        const { el, expanded } = this;
+        connectLocalized(this);
+        connectMessages(this);
+        toggleChildActionText({ el, expanded });
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
+        if (!this.overflowActionsDisabled) {
+            (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
+        }
+        this.overflowActions();
+        connectConditionalSlotComponent(this);
+    }
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+        await setUpMessages(this);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        disconnectConditionalSlotComponent(this);
+        disconnectLocalized(this);
+        disconnectMessages(this);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Methods
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Overflows actions that won't fit into menus.
+     *
+     * @internal
+     */
+    async overflowActions() {
+        this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
+    }
+    /**
+     * Sets focus on the component's first focusable element.
+     */
+    async setFocus() {
+        await componentFocusable(this);
+        focusFirstTabbable(this.el);
+    }
+    updateGroups() {
+        this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
+    }
+    setGroupLayout(groups) {
+        groups.forEach((group) => (group.layout = this.layout));
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    renderBottomActionGroup() {
+        const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages, actionsEndGroupLabel, overlayPositioning, } = this;
+        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, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), label: actionsEndGroupLabel, layout: layout, overlayPositioning: overlayPositioning, 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()));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "expandDisabled": ["expandHandler"],
+        "expanded": ["expandedHandler"],
+        "layout": ["layoutHandler"],
+        "overflowActionsDisabled": ["overflowDisabledHandler"],
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+ActionBar.style = actionBarCss;
+
+export { ActionBar as calcite_action_bar };

package/dist/solutions-components/calcite-action-group.entry.js

@@ -0,0 +1,112 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, g as getElement } from './index-bdfaac50.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a395417e.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-aea90723.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-b39c5433.js';
+import { S as SLOTS } from './resources-20074cb1.js';
+import { I as ICONS, S as SLOTS$1, C as CSS } from './resources-b0e2b809.js';
+import { u as slotChangeHasAssignedElement } from './dom-b91aa537.js';
+import './observers-5ba39eee.js';
+import './key-9a10d862.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+
+const actionGroupCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-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-color-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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.setMenuOpen = (event) => {
+            this.menuOpen = !!event.target.open;
+        };
+        this.handleMenuActionsSlotChange = (event) => {
+            this.hasMenuActions = slotChangeHasAssignedElement(event);
+        };
+        this.expanded = false;
+        this.label = undefined;
+        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;
+        this.hasMenuActions = false;
+    }
+    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
+    //
+    // --------------------------------------------------------------------------
+    renderMenu() {
+        const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } = this;
+        return (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], hidden: !hasMenuActions, 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.trigger, text: messages.more, textEnabled: expanded }), h("slot", { name: SLOTS$1.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), h("slot", { name: SLOTS$1.menuTooltip, slot: SLOTS.tooltip })));
+    }
+    render() {
+        return (h("div", { "aria-label": this.label, class: CSS.container, role: "group" }, 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;
+
+export { ActionGroup as calcite_action_group };

package/dist/solutions-components/calcite-action-menu.entry.js

@@ -0,0 +1,291 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, F as Fragment, g as getElement } from './index-bdfaac50.js';
+import { g as getRoundRobinIndex } from './array-396bdf3c.js';
+import { t as toAriaBoolean, i as isPrimaryPointerButton, e as focusElement } from './dom-b91aa537.js';
+import { g as guid } from './guid-b75a5f7b.js';
+import { i as isActivationKey } from './key-9a10d862.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
+import { a as activeAttr, S as SLOTS, C as CSS, I as ICONS } from './resources-20074cb1.js';
+import './resources-0f8db821.js';
+
+const actionMenuCss = ":host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1);color:var(--calcite-color-text-2)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-color-border-3)}::slotted(calcite-action-group:last-child){border-block-end:0}.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{max-block-size:45vh;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;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;
+            }
+            // 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);
+        };
+        this.handleDefaultSlotChange = (event) => {
+            const actions = event.target
+                .assignedElements({
+                flatten: true,
+            })
+                .reduce((previousValue, currentValue) => {
+                if (currentValue === null || currentValue === void 0 ? void 0 : currentValue.matches("calcite-action")) {
+                    previousValue.push(currentValue);
+                    return previousValue;
+                }
+                if (currentValue === null || currentValue === void 0 ? void 0 : currentValue.matches("calcite-action-group")) {
+                    return previousValue.concat(Array.from(currentValue.querySelectorAll("calcite-action")));
+                }
+                return previousValue;
+            }, []);
+            this.actionElements = actions.filter((action) => !action.disabled && !action.hidden);
+        };
+        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.handlePopoverOpen = () => {
+            this.open = true;
+        };
+        this.handlePopoverClose = () => {
+            this.open = false;
+        };
+        this.appearance = "solid";
+        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
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        this.connectMenuButtonEl();
+    }
+    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();
+    }
+    activeMenuItemIndexHandler() {
+        this.updateActions(this.actionElements);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await componentFocusable(this);
+        return focusElement(this.menuButtonEl);
+    }
+    renderMenuButton() {
+        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;
+    }
+    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", { autoClose: true, flipPlacements: flipPlacements, focusTrapDisabled: true, label: label, offsetDistance: 0, onCalcitePopoverClose: this.handlePopoverClose, onCalcitePopoverOpen: this.handlePopoverOpen, 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.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 { ActionMenu as calcite_action_menu };