@spectrum-web-components/menu 0.35.1-rc.43 → 0.36.0

package/src/MenuItem.dev.js

@@ -13,6 +13,10 @@ var __decorateClass = (decorators, target, key, kind) => {
 import {
   html
 } from "@spectrum-web-components/base";
+import {
+  ObserveSlotPresence,
+  ObserveSlotText
+} from "@spectrum-web-components/shared";
 import {
   property,
   query
@@ -22,38 +26,85 @@ 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";
-import "@spectrum-web-components/overlay/sp-overlay.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(item) {
+  constructor() {
     super("sp-menu-item-added-or-updated", {
       bubbles: true,
       composed: true
     });
-    this.menuCascade = /* @__PURE__ */ new WeakMap();
-    this.clear(item);
   }
-  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) {
     this._item = item;
-    this.currentAncestorWithSelects = void 0;
+    this._currentAncestorWithSelects = void 0;
     item.menuData = {
-      cleanupSteps: [],
       focusRoot: void 0,
-      selectionRoot: void 0,
-      parentMenu: void 0
+      selectionRoot: void 0
     };
-    this.menuCascade = /* @__PURE__ */ new WeakMap();
   }
-  get item() {
-    return this._item;
+}
+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;
+    });
   }
 }
-export class MenuItem extends LikeAnchor(Focusable) {
+const _MenuItem = class _MenuItem extends LikeAnchor(
+  ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]'))
+) {
   constructor() {
     super();
+    this.isInSubmenu = false;
     this.active = false;
     this.focused = false;
     this.selected = false;
@@ -61,17 +112,28 @@ export class MenuItem extends LikeAnchor(Focusable) {
     this.hasSubmenu = false;
     this.noWrap = false;
     this.open = false;
-    this.proxyFocus = () => {
-      this.focus();
+    /**
+     * 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.handleSubmenuPointerenter = () => {
+      if (this.leaveTimeout) {
+        clearTimeout(this.leaveTimeout);
+        delete this.leaveTimeout;
+      }
     };
-    this.recentlyLeftChild = false;
-    this.willDispatchUpdate = false;
     this.menuData = {
       focusRoot: void 0,
-      parentMenu: void 0,
-      selectionRoot: void 0,
-      cleanupSteps: []
+      selectionRoot: void 0
     };
+    this.proxyFocus = this.proxyFocus.bind(this);
     this.addEventListener("click", this.handleClickCapture, {
       capture: true
     });
@@ -115,17 +177,27 @@ export class MenuItem extends LikeAnchor(Focusable) {
   get focusElement() {
     return this;
   }
+  get hasIcon() {
+    return this.slotContentIsPresent;
+  }
   get itemChildren() {
+    var _a, _b;
     if (this._itemChildren) {
       return this._itemChildren;
     }
-    const icon = this.iconSlot.assignedElements().map((element) => {
+    const iconSlot = (_a = this.shadowRoot) == null ? void 0 : _a.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 content = this.contentSlot.assignedNodes().map((node) => node.cloneNode(true));
+    const contentSlot = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector(
+      "slot:not([name])"
+    );
+    const content = !contentSlot ? [] : contentSlot.assignedNodes().map((node) => node.cloneNode(true));
     this._itemChildren = { icon, content };
     return this._itemChildren;
   }
@@ -146,6 +218,9 @@ export class MenuItem extends LikeAnchor(Focusable) {
       return false;
     }
   }
+  proxyFocus() {
+    this.focus();
+  }
   shouldProxyClick() {
     let handled = false;
     if (this.anchorElement) {
@@ -158,82 +233,53 @@ export class MenuItem extends LikeAnchor(Focusable) {
     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;
-    }
-    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`
-            <slot name="icon"></slot>
-            <div id="label">
-                <slot id="slot"></slot>
-            </div>
-            <slot name="value"></slot>
             ${this.selected ? html`
                       <sp-icon-checkmark100
                           id="selected"
-                          class="spectrum-UIIcon-Checkmark100 icon checkmark"
+                          class="spectrum-UIIcon-Checkmark100 
+                            icon 
+                            checkmark
+                            ${this.hasIcon ? "checkmark--withAdjacentIcon" : ""}"
                       ></sp-icon-checkmark100>
                   ` : html``}
+            <slot name="icon"></slot>
+            <div id="label">
+                <slot id="slot"></slot>
+            </div>
+            <slot name="value"></slot>
             ${this.href && this.href.length > 0 ? super.renderAnchor({
       id: "button",
       ariaHidden: true,
       className: "button anchor hidden"
     }) : html``}
-            ${this.renderSubmenu()}
+
+            <slot
+                hidden
+                name="submenu"
+                @slotchange=${this.manageSubmenu}
+            ></slot>
+            ${this.hasSubmenu ? html`
+                      <sp-icon-chevron100
+                          class="spectrum-UIIcon-ChevronRight100
+                        chevron
+                        icon"
+                      ></sp-icon-chevron100>
+                  ` : html``}
         `;
   }
   manageSubmenu(event) {
     const assignedElements = event.target.assignedElements({
       flatten: true
     });
-    this.hasSubmenu = !!assignedElements.length;
+    this.hasSubmenu = this.open || !!assignedElements;
     if (this.hasSubmenu) {
       this.setAttribute("aria-haspopup", "true");
     }
   }
-  handleRemoveActive() {
-    if (this.open) {
+  handleRemoveActive(event) {
+    if (event.type === "pointerleave" && this.hasSubmenu || this.hasSubmenu || this.open) {
       return;
     }
     this.active = false;
@@ -245,28 +291,22 @@ export class MenuItem extends LikeAnchor(Focusable) {
     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-${crypto.randomUUID().slice(0, 8)}`;
+      this.id = `sp-menu-item-${_MenuItem.instanceCount++}`;
     }
+    this.addEventListener("pointerenter", this.closeOverlaysForRoot);
   }
   closeOverlaysForRoot() {
-    var _a;
     if (this.open)
       return;
-    (_a = this.menuData.parentMenu) == null ? void 0 : _a.closeDescendentOverlays();
+    const overalyCloseEvent = new OverlayCloseEvent({
+      root: this.menuData.focusRoot
+    });
+    this.dispatchEvent(overalyCloseEvent);
   }
-  handleSubmenuClick(event) {
-    if (event.composedPath().includes(this.overlayElement)) {
-      return;
-    }
+  handleSubmenuClick() {
     this.openOverlay();
   }
-  handleSubmenuFocus() {
-    requestAnimationFrame(() => {
-      this.overlayElement.open = this.open;
-    });
-  }
   handlePointerenter() {
     if (this.leaveTimeout) {
       clearTimeout(this.leaveTimeout);
@@ -276,44 +316,14 @@ export class MenuItem extends LikeAnchor(Focusable) {
     this.openOverlay();
   }
   handlePointerleave() {
-    if (this.open && !this.recentlyLeftChild) {
+    if (this.hasSubmenu && this.open) {
       this.leaveTimeout = setTimeout(() => {
         delete this.leaveTimeout;
-        this.open = false;
+        if (this.closeOverlay)
+          this.closeOverlay();
       }, 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;
@@ -321,9 +331,55 @@ export class MenuItem extends LikeAnchor(Focusable) {
     this.open = true;
     this.active = true;
     this.setAttribute("aria-expanded", "true");
-    this.addEventListener("sp-closed", this.cleanup, {
+    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, {
       once: true
     });
+    popover.addEventListener("change", closeSubmenu);
   }
   updateAriaSelected() {
     const role = this.getAttribute("role");
@@ -341,33 +397,25 @@ export class MenuItem extends LikeAnchor(Focusable) {
     this.updateAriaSelected();
   }
   updated(changes) {
-    var _a, _b, _c;
     super.updated(changes);
-    if (changes.has("label") && (this.label || typeof changes.get("label") !== "undefined")) {
+    if (changes.has("label")) {
       this.setAttribute("aria-label", this.label || "");
     }
-    if (changes.has("active") && (this.active || typeof changes.get("active") !== "undefined")) {
+    if (changes.has("active")) {
       if (this.active) {
-        (_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(
+        this.addEventListener("pointerup", this.handleRemoveActive);
+        this.addEventListener("pointerleave", this.handleRemoveActive);
+        this.addEventListener("pointercancel", this.handleRemoveActive);
+      } else {
+        this.removeEventListener("pointerup", this.handleRemoveActive);
+        this.removeEventListener(
           "pointerleave",
-          this.handleRemoveActive,
-          options
+          this.handleRemoveActive
         );
-        this.addEventListener(
+        this.removeEventListener(
           "pointercancel",
-          this.handleRemoveActive,
-          options
+          this.handleRemoveActive
         );
-      } else {
-        (_b = this.abortControllerPointer) == null ? void 0 : _b.abort();
       }
     }
     if (this.anchorElement) {
@@ -377,82 +425,71 @@ export class MenuItem extends LikeAnchor(Focusable) {
     if (changes.has("selected")) {
       this.updateAriaSelected();
     }
-    if (changes.has("hasSubmenu") && (this.hasSubmenu || typeof changes.get("hasSubmenu") !== "undefined")) {
+    if (changes.has("hasSubmenu")) {
       if (this.hasSubmenu) {
-        this.abortControllerSubmenu = new AbortController();
-        const options = { signal: this.abortControllerSubmenu.signal };
-        this.addEventListener(
-          "click",
-          this.handleSubmenuClick,
-          options
-        );
-        this.addEventListener(
-          "focus",
-          this.handleSubmenuFocus,
-          options
-        );
-        this.addEventListener(
+        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,
-          options
+          this.handlePointerenter
         );
-        this.addEventListener(
+        this.removeEventListener(
           "pointerleave",
-          this.handlePointerleave,
-          options
+          this.handlePointerleave
         );
-        this.addEventListener(
-          "sp-opened",
-          this.handleSubmenuOpen,
-          options
-        );
-      } else {
-        (_c = this.abortControllerSubmenu) == null ? void 0 : _c.abort();
       }
     }
   }
   connectedCallback() {
     super.connectedCallback();
-    this.triggerUpdate();
+    this.isInSubmenu = !!this.closest('[slot="submenu"]');
+    if (this.isInSubmenu) {
+      return;
+    }
+    addOrUpdateEvent.reset(this);
+    this.dispatchEvent(addOrUpdateEvent);
+    resetAddOrUpdateEvent();
+    this._parentElement = this.parentElement;
   }
   disconnectedCallback() {
-    this.menuData.cleanupSteps.forEach((removal) => removal(this));
+    if (!this.isInSubmenu && this._parentElement) {
+      removeEvent.reset(this);
+      this._parentElement.dispatchEvent(removeEvent);
+      resetRemoveEvent();
+    }
+    this.isInSubmenu = false;
+    this._itemChildren = void 0;
     super.disconnectedCallback();
   }
   async triggerUpdate() {
-    if (this.willDispatchUpdate) {
+    if (this.isInSubmenu) {
       return;
     }
-    this.willDispatchUpdate = true;
     await new Promise((ready) => requestAnimationFrame(ready));
-    this.dispatchUpdate();
+    addOrUpdateEvent.reset(this);
+    this.dispatchEvent(addOrUpdateEvent);
+    resetAddOrUpdateEvent();
   }
-  dispatchUpdate() {
-    this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));
-    this.willDispatchUpdate = false;
-  }
-}
+};
+_MenuItem.instanceCount = 0;
 __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 })
-], MenuItem.prototype, "hasSubmenu", 2);
-__decorateClass([
-  query("slot:not([name])")
-], MenuItem.prototype, "contentSlot", 2);
-__decorateClass([
-  query('slot[name="icon"]')
-], MenuItem.prototype, "iconSlot", 2);
+  property({ type: Boolean, reflect: true, attribute: "has-submenu" })
+], _MenuItem.prototype, "hasSubmenu", 2);
 __decorateClass([
   property({
     type: Boolean,
@@ -462,14 +499,12 @@ __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, reflect: true })
-], MenuItem.prototype, "open", 2);
+  property({ type: Boolean })
+], _MenuItem.prototype, "open", 2);
+export let MenuItem = _MenuItem;
 //# sourceMappingURL=MenuItem.dev.js.map