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

package/src/MenuItem.js

@@ -1,440 +1,424 @@
-/*
-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, } from '@spectrum-web-components/base';
-import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
-import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
-import { openOverlay } from '@spectrum-web-components/overlay/src/loader.js';
-import menuItemStyles from './menu-item.css.js';
-import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
-import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';
-/**
- * Duration during which a pointing device can leave an `<sp-menu-item>` element
- * and return to it or to the submenu opened from it before closing that submenu.
- **/
+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
+} from "@spectrum-web-components/base";
+import {
+  property,
+  query
+} from "@spectrum-web-components/base/src/decorators.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";
+import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
+import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
+import { openOverlay } from "@spectrum-web-components/overlay/src/loader.js";
+import { OverlayCloseEvent } from "@spectrum-web-components/overlay/src/overlay-events.js";
+import menuItemStyles from "./menu-item.css.js";
+import checkmarkStyles from "@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";
+import { reparentChildren } from "@spectrum-web-components/shared/src/reparent-children.js";
+import { MutationController } from "@lit-labs/observers/mutation_controller.js";
 const POINTERLEAVE_TIMEOUT = 100;
 export class MenuItemRemovedEvent extends Event {
-    constructor() {
-        super('sp-menu-item-removed', {
-            bubbles: true,
-            composed: true,
-        });
-        this.focused = false;
-    }
-    get item() {
-        return this._item;
-    }
-    reset(item) {
-        this._item = item;
-    }
+  constructor() {
+    super("sp-menu-item-removed", {
+      bubbles: true,
+      composed: true
+    });
+    this.focused = false;
+  }
+  get item() {
+    return this._item;
+  }
+  reset(item) {
+    this._item = item;
+  }
 }
 export class MenuItemAddedOrUpdatedEvent extends Event {
-    constructor() {
-        super('sp-menu-item-added-or-updated', {
-            bubbles: true,
-            composed: true,
-        });
-    }
-    set focusRoot(root) {
-        this.item.menuData.focusRoot = this.item.menuData.focusRoot || root;
-    }
-    set selectionRoot(root) {
-        this.item.menuData.selectionRoot =
-            this.item.menuData.selectionRoot || root;
-    }
-    get item() {
-        return this._item;
-    }
-    set currentAncestorWithSelects(ancestor) {
-        this._currentAncestorWithSelects = ancestor;
-    }
-    get currentAncestorWithSelects() {
-        return this._currentAncestorWithSelects;
-    }
-    reset(item) {
-        this._item = item;
-        this._currentAncestorWithSelects = undefined;
-        item.menuData = {
-            focusRoot: undefined,
-            selectionRoot: undefined,
-        };
-    }
+  constructor() {
+    super("sp-menu-item-added-or-updated", {
+      bubbles: true,
+      composed: true
+    });
+  }
+  set focusRoot(root) {
+    this.item.menuData.focusRoot = this.item.menuData.focusRoot || root;
+  }
+  set selectionRoot(root) {
+    this.item.menuData.selectionRoot = this.item.menuData.selectionRoot || root;
+  }
+  get item() {
+    return this._item;
+  }
+  set currentAncestorWithSelects(ancestor) {
+    this._currentAncestorWithSelects = ancestor;
+  }
+  get currentAncestorWithSelects() {
+    return this._currentAncestorWithSelects;
+  }
+  reset(item) {
+    this._item = item;
+    this._currentAncestorWithSelects = void 0;
+    item.menuData = {
+      focusRoot: void 0,
+      selectionRoot: void 0
+    };
+  }
 }
 const addOrUpdateEvent = new MenuItemAddedOrUpdatedEvent();
 const removeEvent = new MenuItemRemovedEvent();
-/**
- * @element sp-menu-item
- *
- * @slot - text content to display within the Menu Item
- * @slot icon - icon element to be placed at the start of the Menu Item
- * @slot value - content placed at the end of the Menu Item like values, keyboard shortcuts, etc.
- * @fires sp-menu-item-added - announces the item has been added so a parent menu can take ownerships
- * @fires sp-menu-item-removed - announces when removed from the DOM so the parent menu can remove ownership and update selected state
- */
-export class MenuItem extends LikeAnchor(Focusable) {
-    constructor() {
-        super();
-        this.isInSubmenu = false;
-        this.active = false;
-        this.focused = false;
-        this.selected = false;
-        this._value = '';
-        this.hasSubmenu = false;
-        this.noWrap = false;
-        this.open = false;
-        /**
-         * When there is a `change` event in the submenu for this item
-         * then we "click" this item to cascade the selection up the
-         * menu tree allowing all submenus between the initial selection
-         * and the root of the tree to have their selection changes and
-         * be closed.
-         */
-        this.handleSubmenuChange = () => {
-            var _a;
-            (_a = this.menuData.selectionRoot) === null || _a === void 0 ? void 0 : _a.selectOrToggleItem(this);
-        };
-        this.handleSubmenuPointerenter = () => {
-            if (this.leaveTimeout) {
-                clearTimeout(this.leaveTimeout);
-                delete this.leaveTimeout;
-            }
-        };
-        this.menuData = {
-            focusRoot: undefined,
-            selectionRoot: undefined,
-        };
-        this.proxyFocus = this.proxyFocus.bind(this);
-        this.addEventListener('click', this.handleClickCapture, {
-            capture: true,
-        });
-    }
-    static get styles() {
-        return [menuItemStyles, checkmarkStyles, chevronStyles];
-    }
-    get value() {
-        return this._value || this.itemText;
-    }
-    set value(value) {
-        if (value === this._value) {
-            return;
-        }
-        this._value = value || '';
-        if (this._value) {
-            this.setAttribute('value', this._value);
-        }
-        else {
-            this.removeAttribute('value');
-        }
-    }
-    /**
-     * @private
-     */
-    get itemText() {
-        return this.itemChildren.content.reduce((acc, node) => acc + (node.textContent || '').trim(), '');
-    }
-    get focusElement() {
-        return this;
-    }
-    get itemChildren() {
-        if (this._itemChildren) {
-            return this._itemChildren;
-        }
-        const iconSlot = this.shadowRoot.querySelector('slot[name="icon"]');
-        const icon = !iconSlot
-            ? []
-            : iconSlot.assignedElements().map((element) => {
-                const newElement = element.cloneNode(true);
-                newElement.removeAttribute('slot');
-                newElement.classList.toggle('icon');
-                return newElement;
-            });
-        const contentSlot = this.shadowRoot.querySelector('slot:not([name])');
-        const content = !contentSlot
-            ? []
-            : contentSlot.assignedNodes().map((node) => node.cloneNode(true));
-        this._itemChildren = { icon, content };
-        return this._itemChildren;
-    }
-    click() {
-        if (this.disabled) {
-            return;
-        }
-        if (this.shouldProxyClick()) {
-            return;
-        }
-        super.click();
-    }
-    handleClickCapture(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-            event.stopPropagation();
-            return false;
-        }
-    }
-    proxyFocus() {
-        this.focus();
-    }
-    shouldProxyClick() {
-        let handled = false;
-        if (this.anchorElement) {
-            this.anchorElement.click();
-            handled = true;
-        }
-        return handled;
-    }
-    breakItemChildrenCache() {
-        this._itemChildren = undefined;
-        this.triggerUpdate();
-    }
-    render() {
-        return html `
-            <slot name="icon" @slotchange=${this.breakItemChildrenCache}></slot>
+const _MenuItem = class extends LikeAnchor(Focusable) {
+  constructor() {
+    super();
+    this.isInSubmenu = false;
+    this.active = false;
+    this.focused = false;
+    this.selected = false;
+    this._value = "";
+    this.hasSubmenu = false;
+    this.noWrap = false;
+    this.open = false;
+    this.handleSubmenuChange = () => {
+      var _a;
+      (_a = this.menuData.selectionRoot) == null ? void 0 : _a.selectOrToggleItem(this);
+    };
+    this.handleSubmenuPointerenter = () => {
+      if (this.leaveTimeout) {
+        clearTimeout(this.leaveTimeout);
+        delete this.leaveTimeout;
+      }
+    };
+    this.menuData = {
+      focusRoot: void 0,
+      selectionRoot: void 0
+    };
+    this.proxyFocus = this.proxyFocus.bind(this);
+    this.addEventListener("click", this.handleClickCapture, {
+      capture: true
+    });
+    new MutationController(this, {
+      config: {
+        characterData: true,
+        childList: true,
+        subtree: true
+      },
+      callback: () => {
+        this.breakItemChildrenCache();
+      }
+    });
+  }
+  static get styles() {
+    return [menuItemStyles, checkmarkStyles, chevronStyles];
+  }
+  get value() {
+    return this._value || this.itemText;
+  }
+  set value(value) {
+    if (value === this._value) {
+      return;
+    }
+    this._value = value || "";
+    if (this._value) {
+      this.setAttribute("value", this._value);
+    } else {
+      this.removeAttribute("value");
+    }
+  }
+  get itemText() {
+    return this.itemChildren.content.reduce((acc, node) => acc + (node.textContent || "").trim(), "");
+  }
+  get focusElement() {
+    return this;
+  }
+  get itemChildren() {
+    if (this._itemChildren) {
+      return this._itemChildren;
+    }
+    const iconSlot = this.shadowRoot.querySelector('slot[name="icon"]');
+    const icon = !iconSlot ? [] : iconSlot.assignedElements().map((element) => {
+      const newElement = element.cloneNode(true);
+      newElement.removeAttribute("slot");
+      newElement.classList.toggle("icon");
+      return newElement;
+    });
+    const contentSlot = this.shadowRoot.querySelector("slot:not([name])");
+    const content = !contentSlot ? [] : contentSlot.assignedNodes().map((node) => node.cloneNode(true));
+    this._itemChildren = { icon, content };
+    return this._itemChildren;
+  }
+  click() {
+    if (this.disabled) {
+      return;
+    }
+    if (this.shouldProxyClick()) {
+      return;
+    }
+    super.click();
+  }
+  handleClickCapture(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      return false;
+    }
+  }
+  proxyFocus() {
+    this.focus();
+  }
+  shouldProxyClick() {
+    let handled = false;
+    if (this.anchorElement) {
+      this.anchorElement.click();
+      handled = true;
+    }
+    return handled;
+  }
+  breakItemChildrenCache() {
+    this._itemChildren = void 0;
+    this.triggerUpdate();
+  }
+  render() {
+    return html`
+            <slot name="icon"></slot>
             <div id="label">
-                <slot
-                    id="slot"
-                    @slotchange=${this.breakItemChildrenCache}
-                ></slot>
+                <slot id="slot"></slot>
             </div>
             <slot name="value"></slot>
-            ${this.selected
-            ? html `
+            ${this.selected ? html`
                       <sp-icon-checkmark100
                           id="selected"
                           class="spectrum-UIIcon-Checkmark100 icon checkmark"
                       ></sp-icon-checkmark100>
-                  `
-            : html ``}
-            ${this.href && this.href.length > 0
-            ? super.renderAnchor({
-                id: 'button',
-                ariaHidden: true,
-                className: 'button anchor hidden',
-            })
-            : html ``}
+                  ` : html``}
+            ${this.href && this.href.length > 0 ? super.renderAnchor({
+      id: "button",
+      ariaHidden: true,
+      className: "button anchor hidden"
+    }) : html``}
             <slot
                 hidden
                 name="submenu"
                 @slotchange=${this.manageSubmenu}
             ></slot>
-            ${this.hasSubmenu
-            ? html `
+            ${this.hasSubmenu ? html`
                       <sp-icon-chevron100
                           class="spectrum-UIIcon-ChevronRight100 chevron icon"
                       ></sp-icon-chevron100>
-                  `
-            : html ``}
+                  ` : html``}
         `;
-    }
-    manageSubmenu(event) {
-        const assignedElements = event.target.assignedElements({
-            flatten: true,
-        });
-        this.hasSubmenu = this.open || !!assignedElements.length;
-    }
-    handleRemoveActive(event) {
-        if ((event.type === 'pointerleave' && this.hasSubmenu) ||
-            this.hasSubmenu ||
-            this.open) {
-            return;
-        }
-        this.active = false;
-    }
-    handlePointerdown() {
-        this.active = true;
-    }
-    firstUpdated(changes) {
-        super.firstUpdated(changes);
-        this.setAttribute('tabindex', '-1');
-        this.addEventListener('pointerdown', this.handlePointerdown);
-        if (!this.hasAttribute('id')) {
-            this.id = `sp-menu-item-${MenuItem.instanceCount++}`;
-        }
-    }
-    handleSubmenuClick() {
-        this.openOverlay();
-    }
-    handlePointerenter() {
-        if (this.leaveTimeout) {
-            clearTimeout(this.leaveTimeout);
-            delete this.leaveTimeout;
-            return;
-        }
-        this.openOverlay();
-    }
-    handlePointerleave() {
-        if (this.hasSubmenu && this.open) {
-            this.leaveTimeout = setTimeout(() => {
-                delete this.leaveTimeout;
-                if (this.closeOverlay)
-                    this.closeOverlay(true);
-            }, POINTERLEAVE_TIMEOUT);
-        }
-    }
-    async openOverlay() {
-        if (!this.hasSubmenu || this.open || this.disabled) {
-            return;
-        }
-        this.open = true;
-        this.active = true;
-        const submenu = this.shadowRoot.querySelector('slot[name="submenu"]').assignedElements()[0];
-        submenu.addEventListener('pointerenter', this.handleSubmenuPointerenter);
-        submenu.addEventListener('change', this.handleSubmenuChange);
-        const popover = document.createElement('sp-popover');
-        const returnSubmenu = reparentChildren([submenu], popover, {
-            position: 'beforeend',
-            prepareCallback: (el) => {
-                const slotName = el.slot;
-                el.tabIndex = 0;
-                el.removeAttribute('slot');
-                el.isSubmenu = true;
-                return (el) => {
-                    el.tabIndex = -1;
-                    el.slot = slotName;
-                    el.isSubmenu = false;
-                };
-            },
-        });
-        const closeOverlay = openOverlay(this, 'click', popover, {
-            placement: this.isLTR ? 'right-start' : 'left-start',
-            receivesFocus: 'auto',
-            root: this.menuData.focusRoot,
-        });
-        const closeSubmenu = async () => {
-            delete this.closeOverlay;
-            (await closeOverlay)();
-        };
-        this.closeOverlay = closeSubmenu;
-        const cleanup = (event) => {
-            event.stopPropagation();
-            returnSubmenu();
-            this.open = false;
-            this.active = false;
+  }
+  manageSubmenu(event) {
+    const assignedElements = event.target.assignedElements({
+      flatten: true
+    });
+    this.hasSubmenu = this.open || !!assignedElements.length;
+  }
+  handleRemoveActive(event) {
+    if (event.type === "pointerleave" && this.hasSubmenu || this.hasSubmenu || this.open) {
+      return;
+    }
+    this.active = false;
+  }
+  handlePointerdown() {
+    this.active = true;
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    this.setAttribute("tabindex", "-1");
+    this.addEventListener("pointerdown", this.handlePointerdown);
+    if (!this.hasAttribute("id")) {
+      this.id = `sp-menu-item-${_MenuItem.instanceCount++}`;
+    }
+    this.addEventListener("pointerenter", this.closeOverlaysForRoot);
+  }
+  closeOverlaysForRoot() {
+    if (this.open)
+      return;
+    const overalyCloseEvent = new OverlayCloseEvent({
+      root: this.menuData.focusRoot
+    });
+    this.dispatchEvent(overalyCloseEvent);
+  }
+  handleSubmenuClick() {
+    this.openOverlay();
+  }
+  handlePointerenter() {
+    if (this.leaveTimeout) {
+      clearTimeout(this.leaveTimeout);
+      delete this.leaveTimeout;
+      return;
+    }
+    this.openOverlay();
+  }
+  handlePointerleave() {
+    if (this.hasSubmenu && this.open) {
+      this.leaveTimeout = setTimeout(() => {
+        delete this.leaveTimeout;
+        if (this.closeOverlay)
+          this.closeOverlay();
+      }, POINTERLEAVE_TIMEOUT);
+    }
+  }
+  async openOverlay() {
+    if (!this.hasSubmenu || this.open || this.disabled) {
+      return;
+    }
+    this.open = true;
+    this.active = true;
+    const submenu = this.shadowRoot.querySelector('slot[name="submenu"]').assignedElements()[0];
+    submenu.addEventListener("pointerenter", this.handleSubmenuPointerenter);
+    submenu.addEventListener("change", this.handleSubmenuChange);
+    const popover = document.createElement("sp-popover");
+    const returnSubmenu = reparentChildren([submenu], popover, {
+      position: "beforeend",
+      prepareCallback: (el) => {
+        const slotName = el.slot;
+        el.tabIndex = 0;
+        el.removeAttribute("slot");
+        el.isSubmenu = true;
+        return (el2) => {
+          el2.tabIndex = -1;
+          el2.slot = slotName;
+          el2.isSubmenu = false;
         };
-        this.addEventListener('sp-closed', cleanup, {
-            once: true,
-        });
-        popover.addEventListener('change', closeSubmenu);
-    }
-    updateAriaSelected() {
-        const role = this.getAttribute('role');
-        if (role === 'option') {
-            this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
-        }
-        else if (role === 'menuitemcheckbox' || role === 'menuitemradio') {
-            this.setAttribute('aria-checked', this.selected ? 'true' : 'false');
-        }
-    }
-    setRole(role) {
-        this.setAttribute('role', role);
-        this.updateAriaSelected();
-    }
-    updated(changes) {
-        super.updated(changes);
-        if (changes.has('label')) {
-            this.setAttribute('aria-label', this.label || '');
-        }
-        if (changes.has('active')) {
-            if (this.active) {
-                this.addEventListener('pointerup', this.handleRemoveActive);
-                this.addEventListener('pointerleave', this.handleRemoveActive);
-            }
-            else {
-                this.removeEventListener('pointerup', this.handleRemoveActive);
-                this.removeEventListener('pointerleave', this.handleRemoveActive);
-            }
-        }
-        if (this.anchorElement) {
-            this.anchorElement.addEventListener('focus', this.proxyFocus);
-            this.anchorElement.tabIndex = -1;
-        }
-        if (changes.has('selected')) {
-            this.updateAriaSelected();
-        }
-        if (changes.has('hasSubmenu')) {
-            if (this.hasSubmenu) {
-                this.addEventListener('click', this.handleSubmenuClick);
-                this.addEventListener('pointerenter', this.handlePointerenter);
-                this.addEventListener('pointerleave', this.handlePointerleave);
-            }
-            else if (!this.closeOverlay) {
-                this.removeEventListener('click', this.handleSubmenuClick);
-                this.removeEventListener('pointerenter', this.handlePointerenter);
-                this.removeEventListener('pointerleave', this.handlePointerleave);
-            }
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.isInSubmenu = !!this.closest('[slot="submenu"]');
-        if (this.isInSubmenu) {
-            return;
-        }
-        addOrUpdateEvent.reset(this);
-        this.dispatchEvent(addOrUpdateEvent);
-        this._parentElement = this.parentElement;
-    }
-    disconnectedCallback() {
-        var _a;
-        removeEvent.reset(this);
-        if (!this.isInSubmenu) {
-            (_a = this._parentElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(removeEvent);
-        }
-        this.isInSubmenu = false;
-        super.disconnectedCallback();
-    }
-    async triggerUpdate() {
-        if (this.isInSubmenu) {
-            return;
-        }
-        await new Promise((ready) => requestAnimationFrame(ready));
-        addOrUpdateEvent.reset(this);
-        this.dispatchEvent(addOrUpdateEvent);
-    }
-}
+      }
+    });
+    const closeOverlay = openOverlay(this, "click", popover, {
+      placement: this.isLTR ? "right-start" : "left-start",
+      receivesFocus: "auto",
+      root: this.menuData.focusRoot
+    });
+    const closeSubmenu = async () => {
+      delete this.closeOverlay;
+      (await closeOverlay)();
+    };
+    this.closeOverlay = closeSubmenu;
+    const cleanup = (event) => {
+      event.stopPropagation();
+      delete this.closeOverlay;
+      returnSubmenu();
+      this.open = false;
+      this.active = false;
+    };
+    this.addEventListener("sp-closed", cleanup, {
+      once: true
+    });
+    popover.addEventListener("change", closeSubmenu);
+  }
+  updateAriaSelected() {
+    const role = this.getAttribute("role");
+    if (role === "option") {
+      this.setAttribute("aria-selected", this.selected ? "true" : "false");
+    } else if (role === "menuitemcheckbox" || role === "menuitemradio") {
+      this.setAttribute("aria-checked", this.selected ? "true" : "false");
+    }
+  }
+  setRole(role) {
+    this.setAttribute("role", role);
+    this.updateAriaSelected();
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("label")) {
+      this.setAttribute("aria-label", this.label || "");
+    }
+    if (changes.has("active")) {
+      if (this.active) {
+        this.addEventListener("pointerup", this.handleRemoveActive);
+        this.addEventListener("pointerleave", this.handleRemoveActive);
+      } else {
+        this.removeEventListener("pointerup", this.handleRemoveActive);
+        this.removeEventListener("pointerleave", this.handleRemoveActive);
+      }
+    }
+    if (this.anchorElement) {
+      this.anchorElement.addEventListener("focus", this.proxyFocus);
+      this.anchorElement.tabIndex = -1;
+    }
+    if (changes.has("selected")) {
+      this.updateAriaSelected();
+    }
+    if (changes.has("hasSubmenu")) {
+      if (this.hasSubmenu) {
+        this.addEventListener("click", this.handleSubmenuClick);
+        this.addEventListener("pointerenter", this.handlePointerenter);
+        this.addEventListener("pointerleave", this.handlePointerleave);
+      } else if (!this.closeOverlay) {
+        this.removeEventListener("click", this.handleSubmenuClick);
+        this.removeEventListener("pointerenter", this.handlePointerenter);
+        this.removeEventListener("pointerleave", this.handlePointerleave);
+      }
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.isInSubmenu = !!this.closest('[slot="submenu"]');
+    if (this.isInSubmenu) {
+      return;
+    }
+    addOrUpdateEvent.reset(this);
+    this.dispatchEvent(addOrUpdateEvent);
+    this._parentElement = this.parentElement;
+  }
+  disconnectedCallback() {
+    var _a;
+    removeEvent.reset(this);
+    if (!this.isInSubmenu) {
+      (_a = this._parentElement) == null ? void 0 : _a.dispatchEvent(removeEvent);
+    }
+    this.isInSubmenu = false;
+    super.disconnectedCallback();
+  }
+  async triggerUpdate() {
+    if (this.isInSubmenu) {
+      return;
+    }
+    await new Promise((ready) => requestAnimationFrame(ready));
+    addOrUpdateEvent.reset(this);
+    this.dispatchEvent(addOrUpdateEvent);
+  }
+};
+export let MenuItem = _MenuItem;
 MenuItem.instanceCount = 0;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], MenuItem.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], MenuItem.prototype, "focused", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], MenuItem.prototype, "selected", void 0);
-__decorate([
-    property({ type: String })
-], MenuItem.prototype, "value", null);
-__decorate([
-    property({ type: Boolean })
-], MenuItem.prototype, "hasSubmenu", void 0);
-__decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        attribute: 'no-wrap',
-        hasChanged() {
-            return false;
-        },
-    })
-], MenuItem.prototype, "noWrap", void 0);
-__decorate([
-    query('.anchor')
-], MenuItem.prototype, "anchorElement", void 0);
-__decorate([
-    property({ type: Boolean })
-], MenuItem.prototype, "open", void 0);
-//# sourceMappingURL=MenuItem.js.map
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "focused", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "selected", 2);
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "value", 1);
+__decorateClass([
+  property({ type: Boolean })
+], MenuItem.prototype, "hasSubmenu", 2);
+__decorateClass([
+  property({
+    type: Boolean,
+    reflect: true,
+    attribute: "no-wrap",
+    hasChanged() {
+      return false;
+    }
+  })
+], MenuItem.prototype, "noWrap", 2);
+__decorateClass([
+  query(".anchor")
+], MenuItem.prototype, "anchorElement", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MenuItem.prototype, "open", 2);
+//# sourceMappingURL=MenuItem.js.map