@spectrum-web-components/menu 0.36.0 → 0.37.0

package/src/MenuItem.dev.js

@@ -26,85 +26,39 @@ 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;
-  }
-}
 export class MenuItemAddedOrUpdatedEvent extends Event {
-  constructor() {
+  constructor(item) {
     super("sp-menu-item-added-or-updated", {
       bubbles: true,
       composed: true
     });
+    this.menuCascade = /* @__PURE__ */ new WeakMap();
+    this.clear(item);
   }
-  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) {
+  clear(item) {
     this._item = item;
-    this._currentAncestorWithSelects = void 0;
+    this.currentAncestorWithSelects = void 0;
     item.menuData = {
+      cleanupSteps: [],
       focusRoot: void 0,
-      selectionRoot: void 0
+      selectionRoot: void 0,
+      parentMenu: void 0
     };
+    this.menuCascade = /* @__PURE__ */ new WeakMap();
   }
-}
-let addOrUpdateEvent = new MenuItemAddedOrUpdatedEvent();
-let removeEvent = new MenuItemRemovedEvent();
-let addOrUpdateEventRafId = 0;
-function resetAddOrUpdateEvent() {
-  if (addOrUpdateEventRafId === 0) {
-    addOrUpdateEventRafId = requestAnimationFrame(() => {
-      addOrUpdateEvent = new MenuItemAddedOrUpdatedEvent();
-      addOrUpdateEventRafId = 0;
-    });
-  }
-}
-let removeEventEventtRafId = 0;
-function resetRemoveEvent() {
-  if (removeEventEventtRafId === 0) {
-    removeEventEventtRafId = requestAnimationFrame(() => {
-      removeEvent = new MenuItemRemovedEvent();
-      removeEventEventtRafId = 0;
-    });
+  get item() {
+    return this._item;
   }
 }
-const _MenuItem = class _MenuItem extends LikeAnchor(
+export class MenuItem extends LikeAnchor(
   ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]'))
 ) {
   constructor() {
     super();
-    this.isInSubmenu = false;
     this.active = false;
     this.focused = false;
     this.selected = false;
@@ -112,28 +66,27 @@ const _MenuItem = class _MenuItem extends LikeAnchor(
     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 ? void 0 : _a.selectOrToggleItem(this);
+    this.proxyFocus = () => {
+      this.focus();
     };
-    this.handleSubmenuPointerenter = () => {
-      if (this.leaveTimeout) {
-        clearTimeout(this.leaveTimeout);
-        delete this.leaveTimeout;
+    this.handleBeforetoggle = (event) => {
+      if (event.newState === "closed") {
+        this.open = true;
+        this.overlayElement.manuallyKeepOpen();
+        this.overlayElement.removeEventListener(
+          "beforetoggle",
+          this.handleBeforetoggle
+        );
       }
     };
+    this.recentlyLeftChild = false;
+    this.willDispatchUpdate = false;
     this.menuData = {
       focusRoot: void 0,
-      selectionRoot: void 0
+      parentMenu: void 0,
+      selectionRoot: void 0,
+      cleanupSteps: []
     };
-    this.proxyFocus = this.proxyFocus.bind(this);
     this.addEventListener("click", this.handleClickCapture, {
       capture: true
     });
@@ -181,23 +134,16 @@ const _MenuItem = class _MenuItem extends LikeAnchor(
     return this.slotContentIsPresent;
   }
   get itemChildren() {
-    var _a, _b;
     if (this._itemChildren) {
       return this._itemChildren;
     }
-    const iconSlot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
-      'slot[name="icon"]'
-    );
-    const icon = !iconSlot ? [] : iconSlot.assignedElements().map((element) => {
+    const icon = this.iconSlot.assignedElements().map((element) => {
       const newElement = element.cloneNode(true);
       newElement.removeAttribute("slot");
       newElement.classList.toggle("icon");
       return newElement;
     });
-    const contentSlot = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector(
-      "slot:not([name])"
-    );
-    const content = !contentSlot ? [] : contentSlot.assignedNodes().map((node) => node.cloneNode(true));
+    const content = this.contentSlot.assignedNodes().map((node) => node.cloneNode(true));
     this._itemChildren = { icon, content };
     return this._itemChildren;
   }
@@ -218,9 +164,6 @@ const _MenuItem = class _MenuItem extends LikeAnchor(
       return false;
     }
   }
-  proxyFocus() {
-    this.focus();
-  }
   shouldProxyClick() {
     let handled = false;
     if (this.anchorElement) {
@@ -233,6 +176,52 @@ const _MenuItem = class _MenuItem extends LikeAnchor(
     this._itemChildren = void 0;
     this.triggerUpdate();
   }
+  renderSubmenu() {
+    const slot = html`
+            <slot
+                name="submenu"
+                @slotchange=${this.manageSubmenu}
+                @sp-menu-item-added-or-updated=${{
+      handleEvent: (event) => {
+        event.clear(event.item);
+      },
+      capture: true
+    }}
+                @focusin=${(event) => event.stopPropagation()}
+            ></slot>
+        `;
+    if (!this.hasSubmenu) {
+      return slot;
+    }
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+    import("@spectrum-web-components/popover/sp-popover.js");
+    return html`
+            <sp-overlay
+                .triggerElement=${this}
+                ?disabled=${!this.hasSubmenu}
+                ?open=${this.hasSubmenu && this.open}
+                .placement=${this.isLTR ? "right-start" : "left-start"}
+                .offset=${[-10, -4]}
+                .type=${"auto"}
+                @close=${(event) => event.stopPropagation()}
+            >
+                <sp-popover
+                    @change=${(event) => {
+      this.handleSubmenuChange(event);
+      this.open = false;
+    }}
+                    @pointerenter=${this.handleSubmenuPointerenter}
+                    @pointerleave=${this.handleSubmenuPointerleave}
+                    @sp-menu-item-added-or-updated=${(event) => event.stopPropagation()}
+                >
+                    ${slot}
+                </sp-popover>
+            </sp-overlay>
+            <sp-icon-chevron100
+                class="spectrum-UIIcon-ChevronRight100 chevron icon"
+            ></sp-icon-chevron100>
+        `;
+  }
   render() {
     return html`
             ${this.selected ? html`
@@ -254,59 +243,62 @@ const _MenuItem = class _MenuItem extends LikeAnchor(
       ariaHidden: true,
       className: "button anchor hidden"
     }) : html``}
-
-            <slot
-                hidden
-                name="submenu"
-                @slotchange=${this.manageSubmenu}
-            ></slot>
-            ${this.hasSubmenu ? html`
-                      <sp-icon-chevron100
-                          class="spectrum-UIIcon-ChevronRight100
-                        chevron
-                        icon"
-                      ></sp-icon-chevron100>
-                  ` : html``}
+            ${this.renderSubmenu()}
         `;
   }
   manageSubmenu(event) {
     const assignedElements = event.target.assignedElements({
       flatten: true
     });
-    this.hasSubmenu = this.open || !!assignedElements;
+    this.hasSubmenu = !!assignedElements.length;
     if (this.hasSubmenu) {
       this.setAttribute("aria-haspopup", "true");
     }
   }
-  handleRemoveActive(event) {
-    if (event.type === "pointerleave" && this.hasSubmenu || this.hasSubmenu || this.open) {
+  handleRemoveActive() {
+    if (this.open) {
       return;
     }
     this.active = false;
   }
-  handlePointerdown() {
+  handlePointerdown(event) {
     this.active = true;
+    if (event.target === this && this.hasSubmenu && this.open) {
+      this.addEventListener("focus", this.handleSubmenuFocus, {
+        once: true
+      });
+      this.overlayElement.addEventListener(
+        "beforetoggle",
+        this.handleBeforetoggle
+      );
+    }
   }
   firstUpdated(changes) {
     super.firstUpdated(changes);
     this.setAttribute("tabindex", "-1");
     this.addEventListener("pointerdown", this.handlePointerdown);
+    this.addEventListener("pointerenter", this.closeOverlaysForRoot);
     if (!this.hasAttribute("id")) {
-      this.id = `sp-menu-item-${_MenuItem.instanceCount++}`;
+      this.id = `sp-menu-item-${crypto.randomUUID().slice(0, 8)}`;
     }
-    this.addEventListener("pointerenter", this.closeOverlaysForRoot);
   }
   closeOverlaysForRoot() {
+    var _a;
     if (this.open)
       return;
-    const overalyCloseEvent = new OverlayCloseEvent({
-      root: this.menuData.focusRoot
-    });
-    this.dispatchEvent(overalyCloseEvent);
+    (_a = this.menuData.parentMenu) == null ? void 0 : _a.closeDescendentOverlays();
   }
-  handleSubmenuClick() {
+  handleSubmenuClick(event) {
+    if (event.composedPath().includes(this.overlayElement)) {
+      return;
+    }
     this.openOverlay();
   }
+  handleSubmenuFocus() {
+    requestAnimationFrame(() => {
+      this.overlayElement.open = this.open;
+    });
+  }
   handlePointerenter() {
     if (this.leaveTimeout) {
       clearTimeout(this.leaveTimeout);
@@ -316,14 +308,44 @@ const _MenuItem = class _MenuItem extends LikeAnchor(
     this.openOverlay();
   }
   handlePointerleave() {
-    if (this.hasSubmenu && this.open) {
+    if (this.open && !this.recentlyLeftChild) {
       this.leaveTimeout = setTimeout(() => {
         delete this.leaveTimeout;
-        if (this.closeOverlay)
-          this.closeOverlay();
+        this.open = false;
       }, POINTERLEAVE_TIMEOUT);
     }
   }
+  /**
+   * 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.
+   */
+  handleSubmenuChange(event) {
+    var _a;
+    event.stopPropagation();
+    (_a = this.menuData.selectionRoot) == null ? void 0 : _a.selectOrToggleItem(this);
+  }
+  handleSubmenuPointerenter() {
+    this.recentlyLeftChild = true;
+  }
+  async handleSubmenuPointerleave() {
+    requestAnimationFrame(() => {
+      this.recentlyLeftChild = false;
+    });
+  }
+  handleSubmenuOpen(event) {
+    this.focused = false;
+    const parentOverlay = event.composedPath().find((el) => {
+      return el !== this.overlayElement && el.localName === "sp-overlay";
+    });
+    this.overlayElement.parentOverlayToForceClose = parentOverlay;
+  }
+  cleanup() {
+    this.open = false;
+    this.active = false;
+  }
   async openOverlay() {
     if (!this.hasSubmenu || this.open || this.disabled) {
       return;
@@ -331,55 +353,9 @@ const _MenuItem = class _MenuItem extends LikeAnchor(
     this.open = true;
     this.active = true;
     this.setAttribute("aria-expanded", "true");
-    const submenu = this.shadowRoot.querySelector(
-      'slot[name="submenu"]'
-    ).assignedElements()[0];
-    submenu.addEventListener(
-      "pointerenter",
-      this.handleSubmenuPointerenter
-    );
-    submenu.addEventListener("change", this.handleSubmenuChange);
-    if (!submenu.id) {
-      submenu.setAttribute("id", `${this.id}-submenu`);
-    }
-    this.setAttribute("aria-controls", submenu.id);
-    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;
-        };
-      }
-    });
-    const closeOverlay = openOverlay(this, "click", popover, {
-      placement: this.isLTR ? "right-start" : "left-start",
-      receivesFocus: "auto",
-      root: this.menuData.focusRoot
-    });
-    const closeSubmenu = async () => {
-      this.setAttribute("aria-expanded", "false");
-      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, {
+    this.addEventListener("sp-closed", this.cleanup, {
       once: true
     });
-    popover.addEventListener("change", closeSubmenu);
   }
   updateAriaSelected() {
     const role = this.getAttribute("role");
@@ -397,25 +373,33 @@ const _MenuItem = class _MenuItem extends LikeAnchor(
     this.updateAriaSelected();
   }
   updated(changes) {
+    var _a, _b, _c;
     super.updated(changes);
-    if (changes.has("label")) {
+    if (changes.has("label") && (this.label || typeof changes.get("label") !== "undefined")) {
       this.setAttribute("aria-label", this.label || "");
     }
-    if (changes.has("active")) {
+    if (changes.has("active") && (this.active || typeof changes.get("active") !== "undefined")) {
       if (this.active) {
-        this.addEventListener("pointerup", this.handleRemoveActive);
-        this.addEventListener("pointerleave", this.handleRemoveActive);
-        this.addEventListener("pointercancel", this.handleRemoveActive);
-      } else {
-        this.removeEventListener("pointerup", this.handleRemoveActive);
-        this.removeEventListener(
+        (_a = this.menuData.selectionRoot) == null ? void 0 : _a.closeDescendentOverlays();
+        this.abortControllerPointer = new AbortController();
+        const options = { signal: this.abortControllerPointer.signal };
+        this.addEventListener(
+          "pointerup",
+          this.handleRemoveActive,
+          options
+        );
+        this.addEventListener(
           "pointerleave",
-          this.handleRemoveActive
+          this.handleRemoveActive,
+          options
         );
-        this.removeEventListener(
+        this.addEventListener(
           "pointercancel",
-          this.handleRemoveActive
+          this.handleRemoveActive,
+          options
         );
+      } else {
+        (_b = this.abortControllerPointer) == null ? void 0 : _b.abort();
       }
     }
     if (this.anchorElement) {
@@ -425,71 +409,77 @@ const _MenuItem = class _MenuItem extends LikeAnchor(
     if (changes.has("selected")) {
       this.updateAriaSelected();
     }
-    if (changes.has("hasSubmenu")) {
+    if (changes.has("hasSubmenu") && (this.hasSubmenu || typeof changes.get("hasSubmenu") !== "undefined")) {
       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(
+        this.abortControllerSubmenu = new AbortController();
+        const options = { signal: this.abortControllerSubmenu.signal };
+        this.addEventListener(
+          "click",
+          this.handleSubmenuClick,
+          options
+        );
+        this.addEventListener(
           "pointerenter",
-          this.handlePointerenter
+          this.handlePointerenter,
+          options
         );
-        this.removeEventListener(
+        this.addEventListener(
           "pointerleave",
-          this.handlePointerleave
+          this.handlePointerleave,
+          options
+        );
+        this.addEventListener(
+          "sp-opened",
+          this.handleSubmenuOpen,
+          options
         );
+      } else {
+        (_c = this.abortControllerSubmenu) == null ? void 0 : _c.abort();
       }
     }
   }
   connectedCallback() {
     super.connectedCallback();
-    this.isInSubmenu = !!this.closest('[slot="submenu"]');
-    if (this.isInSubmenu) {
-      return;
-    }
-    addOrUpdateEvent.reset(this);
-    this.dispatchEvent(addOrUpdateEvent);
-    resetAddOrUpdateEvent();
-    this._parentElement = this.parentElement;
+    this.triggerUpdate();
   }
   disconnectedCallback() {
-    if (!this.isInSubmenu && this._parentElement) {
-      removeEvent.reset(this);
-      this._parentElement.dispatchEvent(removeEvent);
-      resetRemoveEvent();
-    }
-    this.isInSubmenu = false;
-    this._itemChildren = void 0;
+    this.menuData.cleanupSteps.forEach((removal) => removal(this));
     super.disconnectedCallback();
   }
   async triggerUpdate() {
-    if (this.isInSubmenu) {
+    if (this.willDispatchUpdate) {
       return;
     }
+    this.willDispatchUpdate = true;
     await new Promise((ready) => requestAnimationFrame(ready));
-    addOrUpdateEvent.reset(this);
-    this.dispatchEvent(addOrUpdateEvent);
-    resetAddOrUpdateEvent();
+    this.dispatchUpdate();
   }
-};
-_MenuItem.instanceCount = 0;
+  dispatchUpdate() {
+    this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));
+    this.willDispatchUpdate = false;
+  }
+}
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], _MenuItem.prototype, "active", 2);
+], MenuItem.prototype, "active", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], _MenuItem.prototype, "focused", 2);
+], MenuItem.prototype, "focused", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], _MenuItem.prototype, "selected", 2);
+], MenuItem.prototype, "selected", 2);
 __decorateClass([
   property({ type: String })
-], _MenuItem.prototype, "value", 1);
+], MenuItem.prototype, "value", 1);
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "has-submenu" })
-], _MenuItem.prototype, "hasSubmenu", 2);
+], MenuItem.prototype, "hasSubmenu", 2);
+__decorateClass([
+  query("slot:not([name])")
+], MenuItem.prototype, "contentSlot", 2);
+__decorateClass([
+  query('slot[name="icon"]')
+], MenuItem.prototype, "iconSlot", 2);
 __decorateClass([
   property({
     type: Boolean,
@@ -499,12 +489,14 @@ __decorateClass([
       return false;
     }
   })
-], _MenuItem.prototype, "noWrap", 2);
+], MenuItem.prototype, "noWrap", 2);
 __decorateClass([
   query(".anchor")
-], _MenuItem.prototype, "anchorElement", 2);
+], MenuItem.prototype, "anchorElement", 2);
+__decorateClass([
+  query("sp-overlay")
+], MenuItem.prototype, "overlayElement", 2);
 __decorateClass([
-  property({ type: Boolean })
-], _MenuItem.prototype, "open", 2);
-export let MenuItem = _MenuItem;
+  property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "open", 2);
 //# sourceMappingURL=MenuItem.dev.js.map