@esri/solutions-components 0.8.3 → 0.8.4

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

@@ -1,252 +0,0 @@
-/*!
- * 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

@@ -1,112 +0,0 @@
-/*!
- * 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

@@ -1,291 +0,0 @@
-/*!
- * 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 };