@spectrum-web-components/menu 0.14.4 → 0.14.5-devmode.0

package/src/Menu.js

@@ -1,582 +1,495 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { __decorate } from "tslib";
-import { html, SpectrumElement, } from '@spectrum-web-components/base';
-import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
-import { MenuItem, } from './MenuItem.js';
-import menuStyles from './menu.css.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import {
+  property,
+  query
+} from "@spectrum-web-components/base/src/decorators.js";
+import { MenuItem } from "./MenuItem.js";
+import menuStyles from "./menu.css.js";
 function elementIsOrContains(el, isOrContains) {
-    return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
+  return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
 }
-/**
- * Spectrum Menu Component
- * @element sp-menu
- *
- * @slot - menu items to be listed in the menu
- * @fires change - Announces that the `value` of the element has changed
- * @attr selects - whether the element has a specific selection algorithm that it applies
- *   to its item descendants. `single` allows only one descendent to be selected at a time.
- *   `multiple` allows many descendants to be selected. `inherit` will be applied dynamically
- *   when an ancestor of this element is actively managing the selection of its descendents.
- *   When the `selects` attribute is not present a `value` will not be maintained and the Menu
- *   Item children of this Menu will not have their `selected` state managed.
- */
 export class Menu extends SpectrumElement {
-    constructor() {
-        super();
-        this.isSubmenu = false;
-        this.label = '';
-        this.value = '';
-        // For the multiple select case, we'll join the value strings together
-        // for the value property with this separator
-        this.valueSeparator = ',';
-        // TODO: which of these to keep?
-        // TODO: allow setting this in the API to change the values
-        this.selected = [];
-        this.selectedItems = [];
-        this.childItemSet = new Set();
-        this.focusedItemIndex = 0;
-        this.focusInItemIndex = 0;
-        this.selectedItemsMap = new Map();
-        this._willUpdateItems = false;
-        this._notFirstUpdated = false;
-        this.cacheUpdated = Promise.resolve();
-        this.addEventListener('sp-menu-item-added-or-updated', this.onSelectableItemAddedOrUpdated);
-        this.addEventListener('sp-menu-item-added-or-updated', this.onFocusableItemAddedOrUpdated, {
-            capture: true,
-        });
-        this.addEventListener('sp-menu-item-removed', this.removeChildItem);
-        this.addEventListener('click', this.onClick);
-        this.addEventListener('focusin', this.handleFocusin);
-    }
-    static get styles() {
-        return [menuStyles];
-    }
-    get childItems() {
-        if (!this.cachedChildItems) {
-            this.cachedChildItems = this.updateCachedMenuItems();
-        }
-        return this.cachedChildItems;
-    }
-    updateCachedMenuItems() {
-        this.cachedChildItems = [];
-        const slotElements = this.menuSlot
-            ? this.menuSlot.assignedElements({ flatten: true })
-            : [];
-        for (const slotElement of slotElements) {
-            const childMenuItems = slotElement instanceof MenuItem
-                ? [slotElement]
-                : [...slotElement.querySelectorAll(`*`)];
-            for (const childMenuItem of childMenuItems) {
-                if (this.childItemSet.has(childMenuItem)) {
-                    this.cachedChildItems.push(childMenuItem);
-                }
-            }
-        }
-        return this.cachedChildItems;
-    }
-    /**
-     * Hide this getter from web-component-analyzer until
-     * https://github.com/runem/web-component-analyzer/issues/131
-     * has been addressed.
-     *
-     * @private
-     */
-    get childRole() {
-        if (this.resolvedRole === 'listbox') {
-            return 'option';
-        }
-        switch (this.resolvedSelects) {
-            case 'single':
-                return 'menuitemradio';
-            case 'multiple':
-                return 'menuitemcheckbox';
-            default:
-                return 'menuitem';
-        }
-    }
-    get ownRole() {
-        return 'menu';
-    }
-    /**
-     * When a descendant `<sp-menu-item>` element is added or updated it will dispatch
-     * this event to announce its presence in the DOM. During the capture phase the first
-     * Menu based element that the event encounters will manage the focus state of the
-     * dispatching `<sp-menu-item>` element.
-     * @param event
-     */
-    onFocusableItemAddedOrUpdated(event) {
-        var _a;
-        if (event.item.menuData.focusRoot) {
-            // Only have one tab stop per Menu tree
-            this.tabIndex = -1;
-        }
-        event.focusRoot = this;
-        this.addChildItem(event.item);
-        if (this.selects === 'inherit') {
-            this.resolvedSelects = 'inherit';
-            this.resolvedRole = (((_a = event.currentAncestorWithSelects) === null || _a === void 0 ? void 0 : _a.getAttribute('role')) ||
-                this.getAttribute('role') ||
-                undefined);
-        }
-        else if (this.selects) {
-            this.resolvedRole = (this.getAttribute('role') ||
-                undefined);
-            this.resolvedSelects = this.selects;
-            event.currentAncestorWithSelects = this;
-        }
-        else {
-            this.resolvedRole = (this.getAttribute('role') ||
-                undefined);
-            this.resolvedSelects =
-                this.resolvedRole === 'none' ? 'ignore' : 'none';
-        }
-    }
-    /**
-     * When a descendant `<sp-menu-item>` element is added or updated it will dispatch
-     * this event to announce its presence in the DOM. During the bubble phase the first
-     * Menu based element that the event encounters that does not inherit selection will
-     * manage the selection state of the dispatching `<sp-menu-item>` element.
-     * @param event
-     */
-    onSelectableItemAddedOrUpdated(event) {
-        const selects = this.resolvedSelects === 'single' ||
-            this.resolvedSelects === 'multiple';
-        if ((selects || (!this.selects && this.resolvedSelects !== 'ignore')) &&
-            !event.item.menuData.selectionRoot) {
-            event.item.setRole(this.childRole);
-            event.selectionRoot = this;
-        }
-    }
-    addChildItem(item) {
-        this.childItemSet.add(item);
-        this.handleItemsChanged();
-    }
-    async removeChildItem(event) {
-        this.childItemSet.delete(event.item);
-        this.cachedChildItems = undefined;
-        if (event.item.focused) {
-            this.handleItemsChanged();
-            await this.updateComplete;
-            this.focus();
-        }
-    }
-    focus({ preventScroll } = {}) {
-        if (!this.childItems.length ||
-            this.childItems.every((childItem) => childItem.disabled)) {
-            return;
-        }
-        if (this.childItems.some((childItem) => childItem.menuData.focusRoot !== this)) {
-            super.focus({ preventScroll });
-            return;
-        }
-        this.focusMenuItemByOffset(0);
-        super.focus({ preventScroll });
-        const selectedItem = this.querySelector('[selected]');
-        if (selectedItem && !preventScroll) {
-            selectedItem.scrollIntoView({ block: 'nearest' });
-        }
-    }
-    onClick(event) {
-        if (event.defaultPrevented) {
-            return;
-        }
-        const path = event.composedPath();
-        const target = path.find((el) => {
-            /* c8 ignore next 3 */
-            if (!(el instanceof Element)) {
-                return false;
-            }
-            return el.getAttribute('role') === this.childRole;
-        });
-        if ((target === null || target === void 0 ? void 0 : target.href) && target.href.length) {
-            return;
-        }
-        else if ((target === null || target === void 0 ? void 0 : target.menuData.selectionRoot) === this &&
-            this.childItems.length) {
-            event.preventDefault();
-            if (target.hasSubmenu || target.open) {
-                return;
-            }
-            this.selectOrToggleItem(target);
-        }
-        else {
-            return;
-        }
-        this.prepareToCleanUp();
-    }
-    handleFocusin(event) {
-        var _a;
-        const isOrContainsRelatedTarget = elementIsOrContains(this, event.relatedTarget);
-        if (isOrContainsRelatedTarget ||
-            this.childItems.some((childItem) => childItem.menuData.focusRoot !== this)) {
-            return;
-        }
-        const activeElement = this.getRootNode().activeElement;
-        const selectionRoot = ((_a = this.childItems[this.focusedItemIndex]) === null || _a === void 0 ? void 0 : _a.menuData.selectionRoot) ||
-            this;
-        if (activeElement !== selectionRoot || !isOrContainsRelatedTarget) {
-            selectionRoot.focus({ preventScroll: true });
-            if (activeElement && this.focusedItemIndex === 0) {
-                const offset = this.childItems.findIndex((childItem) => childItem === activeElement);
-                if (offset > 0) {
-                    this.focusMenuItemByOffset(offset);
-                }
-            }
-        }
-        this.startListeningToKeyboard();
-    }
-    startListeningToKeyboard() {
-        this.addEventListener('keydown', this.handleKeydown);
-        this.addEventListener('focusout', this.handleFocusout);
-    }
-    handleFocusout(event) {
-        if (elementIsOrContains(this, event.relatedTarget)) {
-            event.composedPath()[0].focused = false;
-            return;
-        }
-        this.stopListeningToKeyboard();
-        if (event.target === this &&
-            this.childItems.some((childItem) => childItem.menuData.focusRoot === this)) {
-            const focusedItem = this.childItems[this.focusedItemIndex];
-            if (focusedItem) {
-                focusedItem.focused = false;
-            }
-        }
-        this.removeAttribute('aria-activedescendant');
-    }
-    stopListeningToKeyboard() {
-        this.removeEventListener('keydown', this.handleKeydown);
-        this.removeEventListener('focusout', this.handleFocusout);
-    }
-    async selectOrToggleItem(targetItem) {
-        const resolvedSelects = this.resolvedSelects;
-        const oldSelectedItemsMap = new Map(this.selectedItemsMap);
-        const oldSelected = this.selected.slice();
-        const oldSelectedItems = this.selectedItems.slice();
-        const oldValue = this.value;
-        this.childItems[this.focusedItemIndex].focused = false;
-        this.focusedItemIndex = this.childItems.indexOf(targetItem);
-        this.forwardFocusVisibleToItem(targetItem);
-        if (resolvedSelects === 'multiple') {
-            if (this.selectedItemsMap.has(targetItem)) {
-                this.selectedItemsMap.delete(targetItem);
-            }
-            else {
-                this.selectedItemsMap.set(targetItem, true);
-            }
-            // Match HTML select and set the first selected
-            // item as the value. Also set the selected array
-            // in the order of the menu items.
-            const selected = [];
-            const selectedItems = [];
-            this.childItemSet.forEach((childItem) => {
-                if (childItem.menuData.selectionRoot !== this)
-                    return;
-                if (this.selectedItemsMap.has(childItem)) {
-                    selected.push(childItem.value);
-                    selectedItems.push(childItem);
-                }
-            });
-            this.selected = selected;
-            this.selectedItems = selectedItems;
-            this.value = this.selected.join(this.valueSeparator);
-        }
-        else {
-            this.selectedItemsMap.clear();
-            this.selectedItemsMap.set(targetItem, true);
-            this.value = targetItem.value;
-            this.selected = [targetItem.value];
-            this.selectedItems = [targetItem];
-        }
-        await this.updateComplete;
-        const applyDefault = this.dispatchEvent(new Event('change', {
-            cancelable: true,
-            bubbles: true,
-            composed: true,
-        }));
-        if (!applyDefault) {
-            // Cancel the event & don't apply the selection
-            this.selected = oldSelected;
-            this.selectedItems = oldSelectedItems;
-            this.selectedItemsMap = oldSelectedItemsMap;
-            this.value = oldValue;
-            return;
-        }
-        // Apply the selection changes to the menu items
-        if (resolvedSelects === 'single') {
-            for (const oldItem of oldSelectedItemsMap.keys()) {
-                if (oldItem !== targetItem) {
-                    oldItem.selected = false;
-                }
-            }
-            targetItem.selected = true;
-        }
-        else if (resolvedSelects === 'multiple') {
-            targetItem.selected = !targetItem.selected;
-        }
-    }
-    navigateWithinMenu(event) {
-        const { code } = event;
-        const lastFocusedItem = this.childItems[this.focusedItemIndex];
-        const direction = code === 'ArrowDown' ? 1 : -1;
-        const itemToFocus = this.focusMenuItemByOffset(direction);
-        if (itemToFocus === lastFocusedItem) {
-            return;
-        }
-        event.preventDefault();
-        itemToFocus.scrollIntoView({ block: 'nearest' });
-    }
-    navigateBetweenRelatedMenus(code) {
-        const shouldOpenSubmenu = (this.isLTR && code === 'ArrowRight') ||
-            (!this.isLTR && code === 'ArrowLeft');
-        const shouldCloseSelfAsSubmenu = (this.isLTR && code === 'ArrowLeft') ||
-            (!this.isLTR && code === 'ArrowRight');
-        if (shouldOpenSubmenu) {
-            const lastFocusedItem = this.childItems[this.focusedItemIndex];
-            if (lastFocusedItem.hasSubmenu) {
-                // Remove focus while opening overlay from keyboard or the visible focus
-                // will slip back to the first item in the menu.
-                this.blur();
-                lastFocusedItem.openOverlay();
-            }
-        }
-        else if (shouldCloseSelfAsSubmenu && this.isSubmenu) {
-            this.dispatchEvent(new Event('close', { bubbles: true }));
-        }
-    }
-    handleKeydown(event) {
-        var _a;
-        const { code } = event;
-        if (code === 'Tab') {
-            this.prepareToCleanUp();
-            return;
-        }
-        if (code === 'Space') {
-            const lastFocusedItem = this.childItems[this.focusedItemIndex];
-            if (lastFocusedItem.hasSubmenu) {
-                // Remove focus while opening overlay from keyboard or the visible focus
-                // will slip back to the first item in the menu.
-                this.blur();
-                lastFocusedItem.openOverlay();
-                return;
-            }
-        }
-        if (code === 'Space' || code === 'Enter') {
-            (_a = this.childItems[this.focusedItemIndex]) === null || _a === void 0 ? void 0 : _a.click();
-            return;
-        }
-        if (code === 'ArrowDown' || code === 'ArrowUp') {
-            this.navigateWithinMenu(event);
-            return;
-        }
-        this.navigateBetweenRelatedMenus(code);
-    }
-    focusMenuItemByOffset(offset) {
-        const step = offset || 1;
-        const focusedItem = this.childItems[this.focusedItemIndex];
+  constructor() {
+    super();
+    this.isSubmenu = false;
+    this.label = "";
+    this.value = "";
+    this.valueSeparator = ",";
+    this.selected = [];
+    this.selectedItems = [];
+    this.childItemSet = /* @__PURE__ */ new Set();
+    this.focusedItemIndex = 0;
+    this.focusInItemIndex = 0;
+    this.selectedItemsMap = /* @__PURE__ */ new Map();
+    this._willUpdateItems = false;
+    this._notFirstUpdated = false;
+    this.cacheUpdated = Promise.resolve();
+    this.addEventListener("sp-menu-item-added-or-updated", this.onSelectableItemAddedOrUpdated);
+    this.addEventListener("sp-menu-item-added-or-updated", this.onFocusableItemAddedOrUpdated, {
+      capture: true
+    });
+    this.addEventListener("sp-menu-item-removed", this.removeChildItem);
+    this.addEventListener("click", this.onClick);
+    this.addEventListener("focusin", this.handleFocusin);
+  }
+  static get styles() {
+    return [menuStyles];
+  }
+  get childItems() {
+    if (!this.cachedChildItems) {
+      this.cachedChildItems = this.updateCachedMenuItems();
+    }
+    return this.cachedChildItems;
+  }
+  updateCachedMenuItems() {
+    this.cachedChildItems = [];
+    const slotElements = this.menuSlot ? this.menuSlot.assignedElements({ flatten: true }) : [];
+    for (const slotElement of slotElements) {
+      const childMenuItems = slotElement instanceof MenuItem ? [slotElement] : [...slotElement.querySelectorAll(`*`)];
+      for (const childMenuItem of childMenuItems) {
+        if (this.childItemSet.has(childMenuItem)) {
+          this.cachedChildItems.push(childMenuItem);
+        }
+      }
+    }
+    return this.cachedChildItems;
+  }
+  get childRole() {
+    if (this.resolvedRole === "listbox") {
+      return "option";
+    }
+    switch (this.resolvedSelects) {
+      case "single":
+        return "menuitemradio";
+      case "multiple":
+        return "menuitemcheckbox";
+      default:
+        return "menuitem";
+    }
+  }
+  get ownRole() {
+    return "menu";
+  }
+  onFocusableItemAddedOrUpdated(event) {
+    var _a;
+    if (event.item.menuData.focusRoot) {
+      this.tabIndex = -1;
+    }
+    event.focusRoot = this;
+    this.addChildItem(event.item);
+    if (this.selects === "inherit") {
+      this.resolvedSelects = "inherit";
+      this.resolvedRole = ((_a = event.currentAncestorWithSelects) == null ? void 0 : _a.getAttribute("role")) || this.getAttribute("role") || void 0;
+    } else if (this.selects) {
+      this.resolvedRole = this.getAttribute("role") || void 0;
+      this.resolvedSelects = this.selects;
+      event.currentAncestorWithSelects = this;
+    } else {
+      this.resolvedRole = this.getAttribute("role") || void 0;
+      this.resolvedSelects = this.resolvedRole === "none" ? "ignore" : "none";
+    }
+  }
+  onSelectableItemAddedOrUpdated(event) {
+    const selects = this.resolvedSelects === "single" || this.resolvedSelects === "multiple";
+    if ((selects || !this.selects && this.resolvedSelects !== "ignore") && !event.item.menuData.selectionRoot) {
+      event.item.setRole(this.childRole);
+      event.selectionRoot = this;
+    }
+  }
+  addChildItem(item) {
+    this.childItemSet.add(item);
+    this.handleItemsChanged();
+  }
+  async removeChildItem(event) {
+    this.childItemSet.delete(event.item);
+    this.cachedChildItems = void 0;
+    if (event.item.focused) {
+      this.handleItemsChanged();
+      await this.updateComplete;
+      this.focus();
+    }
+  }
+  focus({ preventScroll } = {}) {
+    if (!this.childItems.length || this.childItems.every((childItem) => childItem.disabled)) {
+      return;
+    }
+    if (this.childItems.some((childItem) => childItem.menuData.focusRoot !== this)) {
+      super.focus({ preventScroll });
+      return;
+    }
+    this.focusMenuItemByOffset(0);
+    super.focus({ preventScroll });
+    const selectedItem = this.querySelector("[selected]");
+    if (selectedItem && !preventScroll) {
+      selectedItem.scrollIntoView({ block: "nearest" });
+    }
+  }
+  onClick(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const path = event.composedPath();
+    const target = path.find((el) => {
+      if (!(el instanceof Element)) {
+        return false;
+      }
+      return el.getAttribute("role") === this.childRole;
+    });
+    if ((target == null ? void 0 : target.href) && target.href.length) {
+      return;
+    } else if ((target == null ? void 0 : target.menuData.selectionRoot) === this && this.childItems.length) {
+      event.preventDefault();
+      if (target.hasSubmenu || target.open) {
+        return;
+      }
+      this.selectOrToggleItem(target);
+    } else {
+      return;
+    }
+    this.prepareToCleanUp();
+  }
+  handleFocusin(event) {
+    var _a;
+    const isOrContainsRelatedTarget = elementIsOrContains(this, event.relatedTarget);
+    if (isOrContainsRelatedTarget || this.childItems.some((childItem) => childItem.menuData.focusRoot !== this)) {
+      return;
+    }
+    const activeElement = this.getRootNode().activeElement;
+    const selectionRoot = ((_a = this.childItems[this.focusedItemIndex]) == null ? void 0 : _a.menuData.selectionRoot) || this;
+    if (activeElement !== selectionRoot || !isOrContainsRelatedTarget) {
+      selectionRoot.focus({ preventScroll: true });
+      if (activeElement && this.focusedItemIndex === 0) {
+        const offset = this.childItems.findIndex((childItem) => childItem === activeElement);
+        if (offset > 0) {
+          this.focusMenuItemByOffset(offset);
+        }
+      }
+    }
+    this.startListeningToKeyboard();
+  }
+  startListeningToKeyboard() {
+    this.addEventListener("keydown", this.handleKeydown);
+    this.addEventListener("focusout", this.handleFocusout);
+  }
+  handleFocusout(event) {
+    if (elementIsOrContains(this, event.relatedTarget)) {
+      event.composedPath()[0].focused = false;
+      return;
+    }
+    this.stopListeningToKeyboard();
+    if (event.target === this && this.childItems.some((childItem) => childItem.menuData.focusRoot === this)) {
+      const focusedItem = this.childItems[this.focusedItemIndex];
+      if (focusedItem) {
         focusedItem.focused = false;
-        this.focusedItemIndex =
-            (this.childItems.length + this.focusedItemIndex + offset) %
-                this.childItems.length;
-        let itemToFocus = this.childItems[this.focusedItemIndex];
-        let availableItems = this.childItems.length;
-        // cycle through the available items in the directions of the offset to find the next non-disabled item
-        while (itemToFocus.disabled && availableItems) {
-            availableItems -= 1;
-            this.focusedItemIndex =
-                (this.childItems.length + this.focusedItemIndex + step) %
-                    this.childItems.length;
-            itemToFocus = this.childItems[this.focusedItemIndex];
-        }
-        // if there are no non-disabled items, skip the work to focus a child
-        if (!(itemToFocus === null || itemToFocus === void 0 ? void 0 : itemToFocus.disabled)) {
-            this.forwardFocusVisibleToItem(itemToFocus);
-        }
-        return itemToFocus;
-    }
-    prepareToCleanUp() {
-        document.addEventListener('focusout', () => {
-            requestAnimationFrame(() => {
-                const focusedItem = this.childItems[this.focusedItemIndex];
-                if (focusedItem) {
-                    focusedItem.focused = false;
-                    this.updateSelectedItemIndex();
-                }
-            });
-        }, { once: true });
-    }
-    updateSelectedItemIndex() {
-        let firstOrFirstSelectedIndex = 0;
-        const selectedItemsMap = new Map();
-        const selected = [];
-        const selectedItems = [];
-        let itemIndex = this.childItems.length;
-        while (itemIndex) {
-            itemIndex -= 1;
-            const childItem = this.childItems[itemIndex];
-            if (childItem.menuData.selectionRoot === this) {
-                if (childItem.selected) {
-                    firstOrFirstSelectedIndex = itemIndex;
-                    selectedItemsMap.set(childItem, true);
-                    selected.unshift(childItem.value);
-                    selectedItems.unshift(childItem);
-                }
-                // Remove "focused" from non-"selected" items ONLY
-                // Preserve "focused" on index===0 when no selection
-                if (itemIndex !== firstOrFirstSelectedIndex) {
-                    childItem.focused = false;
-                }
-            }
-        }
-        selectedItems.map((item, i) => {
-            // When there is more than one "selected" item,
-            // ensure only the first one can be "focused"
-            if (i > 0) {
-                item.focused = false;
-            }
-        });
-        this.selectedItemsMap = selectedItemsMap;
-        this.selected = selected;
-        this.selectedItems = selectedItems;
-        this.value = this.selected.join(this.valueSeparator);
-        this.focusedItemIndex = firstOrFirstSelectedIndex;
-        this.focusInItemIndex = firstOrFirstSelectedIndex;
-    }
-    handleItemsChanged() {
-        this.cachedChildItems = undefined;
-        if (!this._willUpdateItems) {
-            /* c8 ignore next 3 */
-            let resolve = () => {
-                return;
-            };
-            this.cacheUpdated = new Promise((res) => (resolve = res));
-            this._willUpdateItems = true;
-            // Debounce the update so we only update once
-            // if multiple items have changed
-            window.requestAnimationFrame(() => {
-                if (this.cachedChildItems === undefined) {
-                    this.updateSelectedItemIndex();
-                    this.updateItemFocus();
-                }
-                this._willUpdateItems = false;
-                resolve();
-            });
-        }
-    }
-    updateItemFocus() {
-        if (this.childItems.length == 0) {
-            return;
-        }
-        const focusInItem = this.childItems[this.focusInItemIndex];
-        if (this.getRootNode().activeElement ===
-            focusInItem.menuData.focusRoot) {
-            this.forwardFocusVisibleToItem(focusInItem);
-        }
-    }
-    forwardFocusVisibleToItem(item) {
-        if (item.menuData.focusRoot !== this) {
-            return;
-        }
-        item.focused = this.hasVisibleFocusInTree();
-        this.setAttribute('aria-activedescendant', item.id);
-        if (item.menuData.selectionRoot &&
-            item.menuData.selectionRoot !== this) {
-            item.menuData.selectionRoot.focus();
+      }
+    }
+    this.removeAttribute("aria-activedescendant");
+  }
+  stopListeningToKeyboard() {
+    this.removeEventListener("keydown", this.handleKeydown);
+    this.removeEventListener("focusout", this.handleFocusout);
+  }
+  async selectOrToggleItem(targetItem) {
+    const resolvedSelects = this.resolvedSelects;
+    const oldSelectedItemsMap = new Map(this.selectedItemsMap);
+    const oldSelected = this.selected.slice();
+    const oldSelectedItems = this.selectedItems.slice();
+    const oldValue = this.value;
+    this.childItems[this.focusedItemIndex].focused = false;
+    this.focusedItemIndex = this.childItems.indexOf(targetItem);
+    this.forwardFocusVisibleToItem(targetItem);
+    if (resolvedSelects === "multiple") {
+      if (this.selectedItemsMap.has(targetItem)) {
+        this.selectedItemsMap.delete(targetItem);
+      } else {
+        this.selectedItemsMap.set(targetItem, true);
+      }
+      const selected = [];
+      const selectedItems = [];
+      this.childItemSet.forEach((childItem) => {
+        if (childItem.menuData.selectionRoot !== this)
+          return;
+        if (this.selectedItemsMap.has(childItem)) {
+          selected.push(childItem.value);
+          selectedItems.push(childItem);
+        }
+      });
+      this.selected = selected;
+      this.selectedItems = selectedItems;
+      this.value = this.selected.join(this.valueSeparator);
+    } else {
+      this.selectedItemsMap.clear();
+      this.selectedItemsMap.set(targetItem, true);
+      this.value = targetItem.value;
+      this.selected = [targetItem.value];
+      this.selectedItems = [targetItem];
+    }
+    await this.updateComplete;
+    const applyDefault = this.dispatchEvent(new Event("change", {
+      cancelable: true,
+      bubbles: true,
+      composed: true
+    }));
+    if (!applyDefault) {
+      this.selected = oldSelected;
+      this.selectedItems = oldSelectedItems;
+      this.selectedItemsMap = oldSelectedItemsMap;
+      this.value = oldValue;
+      return;
+    }
+    if (resolvedSelects === "single") {
+      for (const oldItem of oldSelectedItemsMap.keys()) {
+        if (oldItem !== targetItem) {
+          oldItem.selected = false;
+        }
+      }
+      targetItem.selected = true;
+    } else if (resolvedSelects === "multiple") {
+      targetItem.selected = !targetItem.selected;
+    }
+  }
+  navigateWithinMenu(event) {
+    const { code } = event;
+    const lastFocusedItem = this.childItems[this.focusedItemIndex];
+    const direction = code === "ArrowDown" ? 1 : -1;
+    const itemToFocus = this.focusMenuItemByOffset(direction);
+    if (itemToFocus === lastFocusedItem) {
+      return;
+    }
+    event.preventDefault();
+    itemToFocus.scrollIntoView({ block: "nearest" });
+  }
+  navigateBetweenRelatedMenus(code) {
+    const shouldOpenSubmenu = this.isLTR && code === "ArrowRight" || !this.isLTR && code === "ArrowLeft";
+    const shouldCloseSelfAsSubmenu = this.isLTR && code === "ArrowLeft" || !this.isLTR && code === "ArrowRight";
+    if (shouldOpenSubmenu) {
+      const lastFocusedItem = this.childItems[this.focusedItemIndex];
+      if (lastFocusedItem.hasSubmenu) {
+        this.blur();
+        lastFocusedItem.openOverlay();
+      }
+    } else if (shouldCloseSelfAsSubmenu && this.isSubmenu) {
+      this.dispatchEvent(new Event("close", { bubbles: true }));
+    }
+  }
+  handleKeydown(event) {
+    var _a;
+    const { code } = event;
+    if (code === "Tab") {
+      this.prepareToCleanUp();
+      return;
+    }
+    if (code === "Space") {
+      const lastFocusedItem = this.childItems[this.focusedItemIndex];
+      if (lastFocusedItem.hasSubmenu) {
+        this.blur();
+        lastFocusedItem.openOverlay();
+        return;
+      }
+    }
+    if (code === "Space" || code === "Enter") {
+      (_a = this.childItems[this.focusedItemIndex]) == null ? void 0 : _a.click();
+      return;
+    }
+    if (code === "ArrowDown" || code === "ArrowUp") {
+      this.navigateWithinMenu(event);
+      return;
+    }
+    this.navigateBetweenRelatedMenus(code);
+  }
+  focusMenuItemByOffset(offset) {
+    const step = offset || 1;
+    const focusedItem = this.childItems[this.focusedItemIndex];
+    focusedItem.focused = false;
+    this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + offset) % this.childItems.length;
+    let itemToFocus = this.childItems[this.focusedItemIndex];
+    let availableItems = this.childItems.length;
+    while (itemToFocus.disabled && availableItems) {
+      availableItems -= 1;
+      this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + step) % this.childItems.length;
+      itemToFocus = this.childItems[this.focusedItemIndex];
+    }
+    if (!(itemToFocus == null ? void 0 : itemToFocus.disabled)) {
+      this.forwardFocusVisibleToItem(itemToFocus);
+    }
+    return itemToFocus;
+  }
+  prepareToCleanUp() {
+    document.addEventListener("focusout", () => {
+      requestAnimationFrame(() => {
+        const focusedItem = this.childItems[this.focusedItemIndex];
+        if (focusedItem) {
+          focusedItem.focused = false;
+          this.updateSelectedItemIndex();
+        }
+      });
+    }, { once: true });
+  }
+  updateSelectedItemIndex() {
+    let firstOrFirstSelectedIndex = 0;
+    const selectedItemsMap = /* @__PURE__ */ new Map();
+    const selected = [];
+    const selectedItems = [];
+    let itemIndex = this.childItems.length;
+    while (itemIndex) {
+      itemIndex -= 1;
+      const childItem = this.childItems[itemIndex];
+      if (childItem.menuData.selectionRoot === this) {
+        if (childItem.selected) {
+          firstOrFirstSelectedIndex = itemIndex;
+          selectedItemsMap.set(childItem, true);
+          selected.unshift(childItem.value);
+          selectedItems.unshift(childItem);
+        }
+        if (itemIndex !== firstOrFirstSelectedIndex) {
+          childItem.focused = false;
+        }
+      }
+    }
+    selectedItems.map((item, i) => {
+      if (i > 0) {
+        item.focused = false;
+      }
+    });
+    this.selectedItemsMap = selectedItemsMap;
+    this.selected = selected;
+    this.selectedItems = selectedItems;
+    this.value = this.selected.join(this.valueSeparator);
+    this.focusedItemIndex = firstOrFirstSelectedIndex;
+    this.focusInItemIndex = firstOrFirstSelectedIndex;
+  }
+  handleItemsChanged() {
+    this.cachedChildItems = void 0;
+    if (!this._willUpdateItems) {
+      let resolve = () => {
+        return;
+      };
+      this.cacheUpdated = new Promise((res) => resolve = res);
+      this._willUpdateItems = true;
+      window.requestAnimationFrame(() => {
+        if (this.cachedChildItems === void 0) {
+          this.updateSelectedItemIndex();
+          this.updateItemFocus();
         }
-    }
-    render() {
-        return html `
+        this._willUpdateItems = false;
+        resolve();
+      });
+    }
+  }
+  updateItemFocus() {
+    if (this.childItems.length == 0) {
+      return;
+    }
+    const focusInItem = this.childItems[this.focusInItemIndex];
+    if (this.getRootNode().activeElement === focusInItem.menuData.focusRoot) {
+      this.forwardFocusVisibleToItem(focusInItem);
+    }
+  }
+  forwardFocusVisibleToItem(item) {
+    if (item.menuData.focusRoot !== this) {
+      return;
+    }
+    item.focused = this.hasVisibleFocusInTree();
+    this.setAttribute("aria-activedescendant", item.id);
+    if (item.menuData.selectionRoot && item.menuData.selectionRoot !== this) {
+      item.menuData.selectionRoot.focus();
+    }
+  }
+  render() {
+    return html`
             <slot></slot>
         `;
-    }
-    firstUpdated(changed) {
-        super.firstUpdated(changed);
-        if (!this.hasAttribute('tabindex')) {
-            const role = this.getAttribute('role');
-            if (role === 'group') {
-                this.tabIndex = -1;
-            }
-            else if (role !== 'none') {
-                this.tabIndex = 0;
-            }
-        }
-        const updates = [
-            new Promise((res) => requestAnimationFrame(() => res(true))),
-        ];
-        [...this.children].forEach((item) => {
-            if (item.localName === 'sp-menu-item') {
-                updates.push(item.updateComplete);
-            }
-        });
-        this.childItemsUpdated = Promise.all(updates);
-    }
-    updated(changes) {
-        super.updated(changes);
-        if (changes.has('selects') && this._notFirstUpdated) {
-            this.selectsChanged();
-        }
-        if (changes.has('label')) {
-            if (this.label) {
-                this.setAttribute('aria-label', this.label);
-            }
-            else {
-                this.removeAttribute('aria-label');
-            }
-        }
-        this._notFirstUpdated = true;
-    }
-    selectsChanged() {
-        const updates = [
-            new Promise((res) => requestAnimationFrame(() => res(true))),
-        ];
-        this.childItemSet.forEach((childItem) => {
-            updates.push(childItem.triggerUpdate());
-        });
-        this.childItemsUpdated = Promise.all(updates);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', this.ownRole);
-        }
-        this.updateComplete.then(() => this.updateItemFocus());
-    }
-    async getUpdateComplete() {
-        const complete = (await super.getUpdateComplete());
-        await this.childItemsUpdated;
-        await this.cacheUpdated;
-        return complete;
-    }
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    if (!this.hasAttribute("tabindex")) {
+      const role = this.getAttribute("role");
+      if (role === "group") {
+        this.tabIndex = -1;
+      } else if (role !== "none") {
+        this.tabIndex = 0;
+      }
+    }
+    const updates = [
+      new Promise((res) => requestAnimationFrame(() => res(true)))
+    ];
+    [...this.children].forEach((item) => {
+      if (item.localName === "sp-menu-item") {
+        updates.push(item.updateComplete);
+      }
+    });
+    this.childItemsUpdated = Promise.all(updates);
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("selects") && this._notFirstUpdated) {
+      this.selectsChanged();
+    }
+    if (changes.has("label")) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
+    this._notFirstUpdated = true;
+  }
+  selectsChanged() {
+    const updates = [
+      new Promise((res) => requestAnimationFrame(() => res(true)))
+    ];
+    this.childItemSet.forEach((childItem) => {
+      updates.push(childItem.triggerUpdate());
+    });
+    this.childItemsUpdated = Promise.all(updates);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", this.ownRole);
+    }
+    this.updateComplete.then(() => this.updateItemFocus());
+  }
+  async getUpdateComplete() {
+    const complete = await super.getUpdateComplete();
+    await this.childItemsUpdated;
+    await this.cacheUpdated;
+    return complete;
+  }
 }
-__decorate([
-    property({ type: String, reflect: true })
-], Menu.prototype, "label", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Menu.prototype, "selects", void 0);
-__decorate([
-    property({ type: String })
-], Menu.prototype, "value", void 0);
-__decorate([
-    property({ type: String, attribute: 'value-separator' })
-], Menu.prototype, "valueSeparator", void 0);
-__decorate([
-    property({ attribute: false })
-], Menu.prototype, "selected", void 0);
-__decorate([
-    property({ attribute: false })
-], Menu.prototype, "selectedItems", void 0);
-__decorate([
-    query('slot:not([name])')
-], Menu.prototype, "menuSlot", void 0);
-//# sourceMappingURL=Menu.js.map
+__decorateClass([
+  property({ type: String, reflect: true })
+], Menu.prototype, "label", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Menu.prototype, "selects", 2);
+__decorateClass([
+  property({ type: String })
+], Menu.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, attribute: "value-separator" })
+], Menu.prototype, "valueSeparator", 2);
+__decorateClass([
+  property({ attribute: false })
+], Menu.prototype, "selected", 2);
+__decorateClass([
+  property({ attribute: false })
+], Menu.prototype, "selectedItems", 2);
+__decorateClass([
+  query("slot:not([name])")
+], Menu.prototype, "menuSlot", 2);
+//# sourceMappingURL=Menu.js.map