@spectrum-web-components/menu 0.15.1-devmode.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/menu",
-    "version": "0.15.1-devmode.0+1a8b29491",
+    "version": "0.16.0",
     "publishConfig": {
         "access": "public"
     },
@@ -85,13 +85,13 @@
     ],
     "dependencies": {
         "@lit-labs/observers": "^1.0.1",
-        "@spectrum-web-components/action-button": "^0.9.2-devmode.0+1a8b29491",
-        "@spectrum-web-components/base": "^0.6.1-devmode.0+1a8b29491",
-        "@spectrum-web-components/divider": "^0.4.13-devmode.0+1a8b29491",
-        "@spectrum-web-components/icon": "^0.11.13-devmode.0+1a8b29491",
-        "@spectrum-web-components/icons-ui": "^0.8.13-devmode.0+1a8b29491",
-        "@spectrum-web-components/overlay": "^0.17.1-devmode.0+1a8b29491",
-        "@spectrum-web-components/shared": "^0.14.6-devmode.0+1a8b29491",
+        "@spectrum-web-components/action-button": "^0.10.0",
+        "@spectrum-web-components/base": "^0.7.0",
+        "@spectrum-web-components/divider": "^0.5.0",
+        "@spectrum-web-components/icon": "^0.12.0",
+        "@spectrum-web-components/icons-ui": "^0.9.0",
+        "@spectrum-web-components/overlay": "^0.18.0",
+        "@spectrum-web-components/shared": "^0.15.0",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
@@ -103,5 +103,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "1a8b294911ab377fa4f07e16eb016f1e3bf7b517"
+    "gitHead": "05c81318844160db3f8156144106e643507fef97"
 }

package/sp-menu-divider.js

@@ -1,3 +1,2 @@
-import { MenuDivider } from "./src/MenuDivider.js";
-customElements.define("sp-menu-divider", MenuDivider);
+import{MenuDivider as e}from"./src/MenuDivider.js";customElements.define("sp-menu-divider",e);
 //# sourceMappingURL=sp-menu-divider.js.map

package/sp-menu-divider.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["sp-menu-divider.ts"],
   "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { MenuDivider } from './src/MenuDivider.js';\n\ncustomElements.define('sp-menu-divider', MenuDivider);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-menu-divider': MenuDivider;\n    }\n}\n"],
-  "mappings": "AAWA;AAEA,eAAe,OAAO,mBAAmB,WAAW;",
+  "mappings": "AAWA,mDAEA,eAAe,OAAO,kBAAmB,CAAW",
   "names": []
 }

package/sp-menu-group.js

@@ -1,3 +1,2 @@
-import { MenuGroup } from "./src/MenuGroup.js";
-customElements.define("sp-menu-group", MenuGroup);
+import{MenuGroup as e}from"./src/MenuGroup.js";customElements.define("sp-menu-group",e);
 //# sourceMappingURL=sp-menu-group.js.map

package/sp-menu-group.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["sp-menu-group.ts"],
   "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { MenuGroup } from './src/MenuGroup.js';\n\ncustomElements.define('sp-menu-group', MenuGroup);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-menu-group': MenuGroup;\n    }\n}\n"],
-  "mappings": "AAWA;AAEA,eAAe,OAAO,iBAAiB,SAAS;",
+  "mappings": "AAWA,+CAEA,eAAe,OAAO,gBAAiB,CAAS",
   "names": []
 }

package/sp-menu-item.js

@@ -1,3 +1,2 @@
-import { MenuItem } from "./src/MenuItem.js";
-customElements.define("sp-menu-item", MenuItem);
+import{MenuItem as e}from"./src/MenuItem.js";customElements.define("sp-menu-item",e);
 //# sourceMappingURL=sp-menu-item.js.map

package/sp-menu-item.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["sp-menu-item.ts"],
   "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { MenuItem } from './src/MenuItem.js';\n\ncustomElements.define('sp-menu-item', MenuItem);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-menu-item': MenuItem;\n    }\n}\n"],
-  "mappings": "AAWA;AAEA,eAAe,OAAO,gBAAgB,QAAQ;",
+  "mappings": "AAWA,6CAEA,eAAe,OAAO,eAAgB,CAAQ",
   "names": []
 }

package/sp-menu.js

@@ -1,3 +1,2 @@
-import { Menu } from "./src/Menu.js";
-customElements.define("sp-menu", Menu);
+import{Menu as e}from"./src/Menu.js";customElements.define("sp-menu",e);
 //# sourceMappingURL=sp-menu.js.map

package/sp-menu.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["sp-menu.ts"],
   "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Menu } from './src/Menu.js';\n\ncustomElements.define('sp-menu', Menu);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-menu': Menu;\n    }\n}\n"],
-  "mappings": "AAWA;AAEA,eAAe,OAAO,WAAW,IAAI;",
+  "mappings": "AAWA,qCAEA,eAAe,OAAO,UAAW,CAAI",
   "names": []
 }

package/src/Menu.js

@@ -1,495 +1,4 @@
-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));
-}
-export class Menu extends SpectrumElement {
-  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.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();
-        }
-        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`
+var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=(n,e,t,s)=>{for(var i=s>1?void 0:s?f(e,t):e,o=n.length-1,d;o>=0;o--)(d=n[o])&&(i=(s?d(e,t,i):d(i))||i);return s&&i&&p(e,t,i),i};import{html as I,SpectrumElement as v}from"@spectrum-web-components/base";import{property as c,query as b}from"@spectrum-web-components/base/src/decorators.js";import{MenuItem as S}from"./MenuItem.js";import g from"./menu.css.js";function m(n,e){return!!e&&(n===e||n.contains(e))}export class Menu extends v{constructor(){super();this.isSubmenu=!1;this.label="";this.value="";this.valueSeparator=",";this.selected=[];this.selectedItems=[];this.childItemSet=new Set;this.focusedItemIndex=0;this.focusInItemIndex=0;this.selectedItemsMap=new Map;this._willUpdateItems=!1;this._notFirstUpdated=!1;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:!0}),this.addEventListener("sp-menu-item-removed",this.removeChildItem),this.addEventListener("click",this.onClick),this.addEventListener("focusin",this.handleFocusin)}static get styles(){return[g]}get childItems(){return this.cachedChildItems||(this.cachedChildItems=this.updateCachedMenuItems()),this.cachedChildItems}updateCachedMenuItems(){this.cachedChildItems=[];const e=this.menuSlot?this.menuSlot.assignedElements({flatten:!0}):[];for(const t of e){const s=t instanceof S?[t]:[...t.querySelectorAll("*")];for(const i of s)this.childItemSet.has(i)&&this.cachedChildItems.push(i)}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(e){var t;e.item.menuData.focusRoot&&(this.tabIndex=-1),e.focusRoot=this,this.addChildItem(e.item),this.selects==="inherit"?(this.resolvedSelects="inherit",this.resolvedRole=((t=e.currentAncestorWithSelects)==null?void 0:t.getAttribute("role"))||this.getAttribute("role")||void 0):this.selects?(this.resolvedRole=this.getAttribute("role")||void 0,this.resolvedSelects=this.selects,e.currentAncestorWithSelects=this):(this.resolvedRole=this.getAttribute("role")||void 0,this.resolvedSelects=this.resolvedRole==="none"?"ignore":"none")}onSelectableItemAddedOrUpdated(e){(this.resolvedSelects==="single"||this.resolvedSelects==="multiple"||!this.selects&&this.resolvedSelects!=="ignore")&&!e.item.menuData.selectionRoot&&(e.item.setRole(this.childRole),e.selectionRoot=this)}addChildItem(e){this.childItemSet.add(e),this.handleItemsChanged()}async removeChildItem(e){this.childItemSet.delete(e.item),this.cachedChildItems=void 0,e.item.focused&&(this.handleItemsChanged(),await this.updateComplete,this.focus())}focus({preventScroll:e}={}){if(!this.childItems.length||this.childItems.every(s=>s.disabled))return;if(this.childItems.some(s=>s.menuData.focusRoot!==this)){super.focus({preventScroll:e});return}this.focusMenuItemByOffset(0),super.focus({preventScroll:e});const t=this.querySelector("[selected]");t&&!e&&t.scrollIntoView({block:"nearest"})}onClick(e){if(e.defaultPrevented)return;const s=e.composedPath().find(i=>i instanceof Element?i.getAttribute("role")===this.childRole:!1);if(!((s==null?void 0:s.href)&&s.href.length)){if((s==null?void 0:s.menuData.selectionRoot)===this&&this.childItems.length){if(e.preventDefault(),s.hasSubmenu||s.open)return;this.selectOrToggleItem(s)}else return;this.prepareToCleanUp()}}handleFocusin(e){var o;const t=m(this,e.relatedTarget);if(t||this.childItems.some(d=>d.menuData.focusRoot!==this))return;const s=this.getRootNode().activeElement,i=((o=this.childItems[this.focusedItemIndex])==null?void 0:o.menuData.selectionRoot)||this;if((s!==i||!t)&&(i.focus({preventScroll:!0}),s&&this.focusedItemIndex===0)){const d=this.childItems.findIndex(u=>u===s);d>0&&this.focusMenuItemByOffset(d)}this.startListeningToKeyboard()}startListeningToKeyboard(){this.addEventListener("keydown",this.handleKeydown),this.addEventListener("focusout",this.handleFocusout)}handleFocusout(e){if(m(this,e.relatedTarget)){e.composedPath()[0].focused=!1;return}if(this.stopListeningToKeyboard(),e.target===this&&this.childItems.some(t=>t.menuData.focusRoot===this)){const t=this.childItems[this.focusedItemIndex];t&&(t.focused=!1)}this.removeAttribute("aria-activedescendant")}stopListeningToKeyboard(){this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusout",this.handleFocusout)}async selectOrToggleItem(e){const t=this.resolvedSelects,s=new Map(this.selectedItemsMap),i=this.selected.slice(),o=this.selectedItems.slice(),d=this.value;if(this.childItems[this.focusedItemIndex].focused=!1,this.focusedItemIndex=this.childItems.indexOf(e),this.forwardFocusVisibleToItem(e),t==="multiple"){this.selectedItemsMap.has(e)?this.selectedItemsMap.delete(e):this.selectedItemsMap.set(e,!0);const a=[],r=[];this.childItemSet.forEach(h=>{h.menuData.selectionRoot===this&&this.selectedItemsMap.has(h)&&(a.push(h.value),r.push(h))}),this.selected=a,this.selectedItems=r,this.value=this.selected.join(this.valueSeparator)}else this.selectedItemsMap.clear(),this.selectedItemsMap.set(e,!0),this.value=e.value,this.selected=[e.value],this.selectedItems=[e];if(await this.updateComplete,!this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))){this.selected=i,this.selectedItems=o,this.selectedItemsMap=s,this.value=d;return}if(t==="single"){for(const a of s.keys())a!==e&&(a.selected=!1);e.selected=!0}else t==="multiple"&&(e.selected=!e.selected)}navigateWithinMenu(e){const{code:t}=e,s=this.childItems[this.focusedItemIndex],i=t==="ArrowDown"?1:-1,o=this.focusMenuItemByOffset(i);o!==s&&(e.preventDefault(),o.scrollIntoView({block:"nearest"}))}navigateBetweenRelatedMenus(e){const t=this.isLTR&&e==="ArrowRight"||!this.isLTR&&e==="ArrowLeft",s=this.isLTR&&e==="ArrowLeft"||!this.isLTR&&e==="ArrowRight";if(t){const i=this.childItems[this.focusedItemIndex];i.hasSubmenu&&(this.blur(),i.openOverlay())}else s&&this.isSubmenu&&this.dispatchEvent(new Event("close",{bubbles:!0}))}handleKeydown(e){var s;const{code:t}=e;if(t==="Tab"){this.prepareToCleanUp();return}if(t==="Space"){const i=this.childItems[this.focusedItemIndex];if(i.hasSubmenu){this.blur(),i.openOverlay();return}}if(t==="Space"||t==="Enter"){(s=this.childItems[this.focusedItemIndex])==null||s.click();return}if(t==="ArrowDown"||t==="ArrowUp"){this.navigateWithinMenu(e);return}this.navigateBetweenRelatedMenus(t)}focusMenuItemByOffset(e){const t=e||1,s=this.childItems[this.focusedItemIndex];s.focused=!1,this.focusedItemIndex=(this.childItems.length+this.focusedItemIndex+e)%this.childItems.length;let i=this.childItems[this.focusedItemIndex],o=this.childItems.length;for(;i.disabled&&o;)o-=1,this.focusedItemIndex=(this.childItems.length+this.focusedItemIndex+t)%this.childItems.length,i=this.childItems[this.focusedItemIndex];return i!=null&&i.disabled||this.forwardFocusVisibleToItem(i),i}prepareToCleanUp(){document.addEventListener("focusout",()=>{requestAnimationFrame(()=>{const e=this.childItems[this.focusedItemIndex];e&&(e.focused=!1,this.updateSelectedItemIndex())})},{once:!0})}updateSelectedItemIndex(){let e=0;const t=new Map,s=[],i=[];let o=this.childItems.length;for(;o;){o-=1;const d=this.childItems[o];d.menuData.selectionRoot===this&&(d.selected&&(e=o,t.set(d,!0),s.unshift(d.value),i.unshift(d)),o!==e&&(d.focused=!1))}i.map((d,u)=>{u>0&&(d.focused=!1)}),this.selectedItemsMap=t,this.selected=s,this.selectedItems=i,this.value=this.selected.join(this.valueSeparator),this.focusedItemIndex=e,this.focusInItemIndex=e}handleItemsChanged(){if(this.cachedChildItems=void 0,!this._willUpdateItems){let e=()=>{};this.cacheUpdated=new Promise(t=>e=t),this._willUpdateItems=!0,window.requestAnimationFrame(()=>{this.cachedChildItems===void 0&&(this.updateSelectedItemIndex(),this.updateItemFocus()),this._willUpdateItems=!1,e()})}}updateItemFocus(){if(this.childItems.length==0)return;const e=this.childItems[this.focusInItemIndex];this.getRootNode().activeElement===e.menuData.focusRoot&&this.forwardFocusVisibleToItem(e)}forwardFocusVisibleToItem(e){e.menuData.focusRoot===this&&(e.focused=this.hasVisibleFocusInTree(),this.setAttribute("aria-activedescendant",e.id),e.menuData.selectionRoot&&e.menuData.selectionRoot!==this&&e.menuData.selectionRoot.focus())}render(){return I`
             <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;
-  }
-}
-__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);
+        `}firstUpdated(e){if(super.firstUpdated(e),!this.hasAttribute("tabindex")){const s=this.getAttribute("role");s==="group"?this.tabIndex=-1:s!=="none"&&(this.tabIndex=0)}const t=[new Promise(s=>requestAnimationFrame(()=>s(!0)))];[...this.children].forEach(s=>{s.localName==="sp-menu-item"&&t.push(s.updateComplete)}),this.childItemsUpdated=Promise.all(t)}updated(e){super.updated(e),e.has("selects")&&this._notFirstUpdated&&this.selectsChanged(),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")),this._notFirstUpdated=!0}selectsChanged(){const e=[new Promise(t=>requestAnimationFrame(()=>t(!0)))];this.childItemSet.forEach(t=>{e.push(t.triggerUpdate())}),this.childItemsUpdated=Promise.all(e)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role",this.ownRole),this.updateComplete.then(()=>this.updateItemFocus())}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.childItemsUpdated,await this.cacheUpdated,e}}l([c({type:String,reflect:!0})],Menu.prototype,"label",2),l([c({type:String,reflect:!0})],Menu.prototype,"selects",2),l([c({type:String})],Menu.prototype,"value",2),l([c({type:String,attribute:"value-separator"})],Menu.prototype,"valueSeparator",2),l([c({attribute:!1})],Menu.prototype,"selected",2),l([c({attribute:!1})],Menu.prototype,"selectedItems",2),l([b("slot:not([name])")],Menu.prototype,"menuSlot",2);
 //# sourceMappingURL=Menu.js.map