@spectrum-web-components/menu 0.36.0 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/menu",
-    "version": "0.36.0",
+    "version": "0.38.0",
     "publishConfig": {
         "access": "public"
     },
@@ -85,13 +85,13 @@
     ],
     "dependencies": {
         "@lit-labs/observers": "^2.0.0",
-        "@spectrum-web-components/action-button": "^0.36.0",
-        "@spectrum-web-components/base": "^0.36.0",
-        "@spectrum-web-components/divider": "^0.36.0",
-        "@spectrum-web-components/icon": "^0.36.0",
-        "@spectrum-web-components/icons-ui": "^0.36.0",
-        "@spectrum-web-components/overlay": "^0.36.0",
-        "@spectrum-web-components/shared": "^0.36.0"
+        "@spectrum-web-components/action-button": "^0.38.0",
+        "@spectrum-web-components/base": "^0.38.0",
+        "@spectrum-web-components/divider": "^0.38.0",
+        "@spectrum-web-components/icon": "^0.38.0",
+        "@spectrum-web-components/icons-ui": "^0.38.0",
+        "@spectrum-web-components/overlay": "^0.38.0",
+        "@spectrum-web-components/shared": "^0.38.0"
     },
     "devDependencies": {
         "@spectrum-css/menu": "^5.0.2"
@@ -102,5 +102,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "a532ff8a410abeefb54d9638a2316ae82570566e"
+    "gitHead": "9a099b7543672f2fd4030833ab813b16c2cad62e"
 }

package/src/Menu.d.ts

@@ -26,7 +26,7 @@ declare const Menu_base: typeof SpectrumElement & {
  */
 export declare class Menu extends Menu_base {
     static get styles(): CSSResultArray;
-    isSubmenu: boolean;
+    private get isSubmenu();
     label: string;
     ignore: boolean;
     selects: undefined | 'inherit' | 'single' | 'multiple';
@@ -55,7 +55,7 @@ export declare class Menu extends Menu_base {
     private resolvedRole?;
     /**
      * When a descendant `<sp-menu-item>` element is added or updated it will dispatch
-     * this event to announce its presence in the DOM. During the capture phase the first
+     * this event to announce its presence in the DOM. During the CAPTURE phase the first
      * Menu based element that the event encounters will manage the focus state of the
      * dispatching `<sp-menu-item>` element.
      * @param event
@@ -63,7 +63,7 @@ export declare class Menu extends Menu_base {
     private onFocusableItemAddedOrUpdated;
     /**
      * When a descendant `<sp-menu-item>` element is added or updated it will dispatch
-     * this event to announce its presence in the DOM. During the bubble phase the first
+     * this event to announce its presence in the DOM. During the BUBBLE phase the first
      * Menu based element that the event encounters that does not inherit selection will
      * manage the selection state of the dispatching `<sp-menu-item>` element.
      * @param event
@@ -73,24 +73,33 @@ export declare class Menu extends Menu_base {
     private removeChildItem;
     constructor();
     focus({ preventScroll }?: FocusOptions): void;
-    private onClick;
+    private handleClick;
     handleFocusin(event: FocusEvent): void;
     startListeningToKeyboard(): void;
     handleFocusout(event: FocusEvent): void;
     stopListeningToKeyboard(): void;
+    private descendentOverlays;
+    protected handleDescendentOverlayOpened(event: Event): void;
+    protected handleDescendentOverlayClosed(event: Event): void;
+    handleSubmenuClosed: (event: Event) => void;
+    handleSubmenuOpened: (event: Event) => void;
     selectOrToggleItem(targetItem: MenuItem): Promise<void>;
     protected navigateWithinMenu(event: KeyboardEvent): void;
-    protected navigateBetweenRelatedMenus(code: string): void;
+    protected navigateBetweenRelatedMenus(event: KeyboardEvent): void;
     handleKeydown(event: KeyboardEvent): void;
     focusMenuItemByOffset(offset: number): MenuItem;
     private prepareToCleanUp;
+    private _hasUpdatedSelectedItemIndex;
     updateSelectedItemIndex(): void;
     private _willUpdateItems;
     private handleItemsChanged;
+    private updateCache;
     private updateItemFocus;
+    closeDescendentOverlays(): void;
     private forwardFocusVisibleToItem;
+    private handleSlotchange;
+    protected renderMenuItemSlot(): TemplateResult;
     render(): TemplateResult;
-    private _notFirstUpdated;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changes: PropertyValues<this>): void;
     protected selectsChanged(): void;
@@ -98,6 +107,7 @@ export declare class Menu extends Menu_base {
     disconnectedCallback(): void;
     protected childItemsUpdated: Promise<unknown[]>;
     protected cacheUpdated: Promise<void>;
+    protected resolveCacheUpdated: () => void;
     protected getUpdateComplete(): Promise<boolean>;
 }
 export {};

package/src/Menu.dev.js

@@ -24,10 +24,9 @@ import menuStyles from "./menu.css.js";
 function elementIsOrContains(el, isOrContains) {
   return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
 }
-export class Menu extends SizedMixin(SpectrumElement) {
+export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
   constructor() {
     super();
-    this.isSubmenu = false;
     this.label = "";
     this.ignore = false;
     this.value = "";
@@ -38,9 +37,44 @@ export class Menu extends SizedMixin(SpectrumElement) {
     this.focusedItemIndex = 0;
     this.focusInItemIndex = 0;
     this.selectedItemsMap = /* @__PURE__ */ new Map();
+    this.descendentOverlays = /* @__PURE__ */ new Map();
+    this.handleSubmenuClosed = (event) => {
+      event.stopPropagation();
+      const target = event.composedPath()[0];
+      target.dispatchEvent(
+        new Event("sp-menu-submenu-closed", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this.handleSubmenuOpened = (event) => {
+      event.stopPropagation();
+      const target = event.composedPath()[0];
+      target.dispatchEvent(
+        new Event("sp-menu-submenu-opened", {
+          bubbles: true,
+          composed: true
+        })
+      );
+      const focusedItem = this.childItems[this.focusedItemIndex];
+      if (focusedItem) {
+        focusedItem.focused = false;
+      }
+      const openedItem = event.composedPath().find((el) => this.childItemSet.has(el));
+      if (!openedItem)
+        return;
+      const openedItemIndex = this.childItems.indexOf(openedItem);
+      this.focusedItemIndex = openedItemIndex;
+      this.focusInItemIndex = openedItemIndex;
+    };
+    this._hasUpdatedSelectedItemIndex = false;
     this._willUpdateItems = false;
-    this._notFirstUpdated = false;
     this.cacheUpdated = Promise.resolve();
+    /* c8 ignore next 3 */
+    this.resolveCacheUpdated = () => {
+      return;
+    };
     this.addEventListener(
       "sp-menu-item-added-or-updated",
       this.onSelectableItemAddedOrUpdated
@@ -52,13 +86,18 @@ export class Menu extends SizedMixin(SpectrumElement) {
         capture: true
       }
     );
-    this.addEventListener("sp-menu-item-removed", this.removeChildItem);
-    this.addEventListener("click", this.onClick);
+    this.addEventListener("click", this.handleClick);
     this.addEventListener("focusin", this.handleFocusin);
+    this.addEventListener("focusout", this.handleFocusout);
+    this.addEventListener("sp-opened", this.handleSubmenuOpened);
+    this.addEventListener("sp-closed", this.handleSubmenuClosed);
   }
   static get styles() {
     return [menuStyles];
   }
+  get isSubmenu() {
+    return this.slot === "submenu";
+  }
   get childItems() {
     if (!this.cachedChildItems) {
       this.cachedChildItems = this.updateCachedMenuItems();
@@ -67,7 +106,7 @@ export class Menu extends SizedMixin(SpectrumElement) {
   }
   updateCachedMenuItems() {
     this.cachedChildItems = [];
-    const slotElements = this.menuSlot ? this.menuSlot.assignedElements({ flatten: true }) : [];
+    const slotElements = this.menuSlot.assignedElements({ flatten: true });
     for (const slotElement of slotElements) {
       const childMenuItems = slotElement instanceof MenuItem ? [slotElement] : [...slotElement.querySelectorAll(`*`)];
       for (const childMenuItem of childMenuItems) {
@@ -103,17 +142,37 @@ export class Menu extends SizedMixin(SpectrumElement) {
   }
   /**
    * When a descendant `<sp-menu-item>` element is added or updated it will dispatch
-   * this event to announce its presence in the DOM. During the capture phase the first
+   * this event to announce its presence in the DOM. During the CAPTURE phase the first
    * Menu based element that the event encounters will manage the focus state of the
    * dispatching `<sp-menu-item>` element.
    * @param event
    */
   onFocusableItemAddedOrUpdated(event) {
+    event.menuCascade.set(this, {
+      hadFocusRoot: !!event.item.menuData.focusRoot,
+      ancestorWithSelects: event.currentAncestorWithSelects
+    });
+    if (this.selects) {
+      event.currentAncestorWithSelects = this;
+    }
+    event.item.menuData.focusRoot = event.item.menuData.focusRoot || this;
+  }
+  /**
+   * When a descendant `<sp-menu-item>` element is added or updated it will dispatch
+   * this event to announce its presence in the DOM. During the BUBBLE phase the first
+   * Menu based element that the event encounters that does not inherit selection will
+   * manage the selection state of the dispatching `<sp-menu-item>` element.
+   * @param event
+   */
+  onSelectableItemAddedOrUpdated(event) {
     var _a, _b;
-    if (event.item.menuData.focusRoot && !this.ignore) {
+    const cascadeData = event.menuCascade.get(this);
+    if (!cascadeData)
+      return;
+    event.item.menuData.parentMenu = event.item.menuData.parentMenu || this;
+    if (cascadeData.hadFocusRoot && !this.ignore) {
       this.tabIndex = -1;
     }
-    event.focusRoot = this;
     this.addChildItem(event.item);
     if (this.selects === "inherit") {
       this.resolvedSelects = "inherit";
@@ -122,34 +181,33 @@ export class Menu extends SizedMixin(SpectrumElement) {
     } else if (this.selects) {
       this.resolvedRole = this.ignore ? "none" : this.getAttribute("role") || void 0;
       this.resolvedSelects = this.selects;
-      event.currentAncestorWithSelects = this;
     } else {
       this.resolvedRole = this.ignore ? "none" : this.getAttribute("role") || void 0;
       this.resolvedSelects = this.resolvedRole === "none" ? "ignore" : "none";
     }
-  }
-  /**
-   * When a descendant `<sp-menu-item>` element is added or updated it will dispatch
-   * this event to announce its presence in the DOM. During the bubble phase the first
-   * Menu based element that the event encounters that does not inherit selection will
-   * manage the selection state of the dispatching `<sp-menu-item>` element.
-   * @param event
-   */
-  onSelectableItemAddedOrUpdated(event) {
     const selects = this.resolvedSelects === "single" || this.resolvedSelects === "multiple";
+    event.item.menuData.cleanupSteps.push(
+      (item) => this.removeChildItem(item)
+    );
     if ((selects || !this.selects && this.resolvedSelects !== "ignore") && !event.item.menuData.selectionRoot) {
       event.item.setRole(this.childRole);
-      event.selectionRoot = this;
+      event.item.menuData.selectionRoot = event.item.menuData.selectionRoot || this;
+      if (event.item.selected) {
+        this.selectedItemsMap.set(event.item, true);
+        this.selectedItems = [...this.selectedItems, event.item];
+        this.selected = [...this.selected, event.item.value];
+        this.value = this.selected.join(this.valueSeparator);
+      }
     }
   }
   addChildItem(item) {
     this.childItemSet.add(item);
     this.handleItemsChanged();
   }
-  async removeChildItem(event) {
-    this.childItemSet.delete(event.item);
+  async removeChildItem(item) {
+    this.childItemSet.delete(item);
     this.cachedChildItems = void 0;
-    if (event.item.focused) {
+    if (item.focused) {
       this.handleItemsChanged();
       await this.updateComplete;
       this.focus();
@@ -167,12 +225,12 @@ export class Menu extends SizedMixin(SpectrumElement) {
     }
     this.focusMenuItemByOffset(0);
     super.focus({ preventScroll });
-    const selectedItem = this.querySelector("[selected]");
+    const selectedItem = this.selectedItems[0];
     if (selectedItem && !preventScroll) {
       selectedItem.scrollIntoView({ block: "nearest" });
     }
   }
-  onClick(event) {
+  handleClick(event) {
     if (event.defaultPrevented) {
       return;
     }
@@ -204,18 +262,18 @@ export class Menu extends SizedMixin(SpectrumElement) {
   }
   handleFocusin(event) {
     var _a;
-    const isOrContainsRelatedTarget = elementIsOrContains(
+    const wasOrContainedRelatedTarget = elementIsOrContains(
       this,
       event.relatedTarget
     );
-    if (isOrContainsRelatedTarget || this.childItems.some(
+    if (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) {
+    if (activeElement !== selectionRoot || !wasOrContainedRelatedTarget && event.target !== this) {
       selectionRoot.focus({ preventScroll: true });
       if (activeElement && this.focusedItemIndex === 0) {
         const offset = this.childItems.findIndex(
@@ -230,27 +288,32 @@ export class Menu extends SizedMixin(SpectrumElement) {
   }
   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.childItems.forEach((child) => child.focused = false);
     this.removeAttribute("aria-activedescendant");
   }
   stopListeningToKeyboard() {
     this.removeEventListener("keydown", this.handleKeydown);
-    this.removeEventListener("focusout", this.handleFocusout);
+  }
+  handleDescendentOverlayOpened(event) {
+    const target = event.composedPath()[0];
+    if (!target.overlayElement)
+      return;
+    this.descendentOverlays.set(
+      target.overlayElement,
+      target.overlayElement
+    );
+  }
+  handleDescendentOverlayClosed(event) {
+    const target = event.composedPath()[0];
+    if (!target.overlayElement)
+      return;
+    this.descendentOverlays.delete(target.overlayElement);
   }
   async selectOrToggleItem(targetItem) {
     const resolvedSelects = this.resolvedSelects;
@@ -258,7 +321,11 @@ export class Menu extends SizedMixin(SpectrumElement) {
     const oldSelected = this.selected.slice();
     const oldSelectedItems = this.selectedItems.slice();
     const oldValue = this.value;
-    this.childItems[this.focusedItemIndex].focused = false;
+    const focusedChild = this.childItems[this.focusedItemIndex];
+    if (focusedChild) {
+      focusedChild.focused = false;
+      focusedChild.active = false;
+    }
     this.focusedItemIndex = this.childItems.indexOf(targetItem);
     this.forwardFocusVisibleToItem(targetItem);
     if (resolvedSelects === "multiple") {
@@ -322,32 +389,42 @@ export class Menu extends SizedMixin(SpectrumElement) {
       return;
     }
     event.preventDefault();
+    event.stopPropagation();
     itemToFocus.scrollIntoView({ block: "nearest" });
   }
-  navigateBetweenRelatedMenus(code) {
+  navigateBetweenRelatedMenus(event) {
+    const { code } = event;
     const shouldOpenSubmenu = this.isLTR && code === "ArrowRight" || !this.isLTR && code === "ArrowLeft";
     const shouldCloseSelfAsSubmenu = this.isLTR && code === "ArrowLeft" || !this.isLTR && code === "ArrowRight";
     if (shouldOpenSubmenu) {
+      event.stopPropagation();
       const lastFocusedItem = this.childItems[this.focusedItemIndex];
       if (lastFocusedItem == null ? void 0 : lastFocusedItem.hasSubmenu) {
-        this.blur();
         lastFocusedItem.openOverlay();
       }
     } else if (shouldCloseSelfAsSubmenu && this.isSubmenu) {
+      event.stopPropagation();
       this.dispatchEvent(new Event("close", { bubbles: true }));
+      this.updateSelectedItemIndex();
     }
   }
   handleKeydown(event) {
     var _a;
+    const isNotThisOrDirectChild = event.target !== this && this !== event.target.parentElement;
+    if (isNotThisOrDirectChild || event.defaultPrevented) {
+      return;
+    }
+    const lastFocusedItem = this.childItems[this.focusedItemIndex];
+    if (lastFocusedItem) {
+      lastFocusedItem.focused = true;
+    }
     const { code } = event;
     if (code === "Tab") {
       this.prepareToCleanUp();
       return;
     }
     if (code === "Space") {
-      const lastFocusedItem = this.childItems[this.focusedItemIndex];
       if (lastFocusedItem == null ? void 0 : lastFocusedItem.hasSubmenu) {
-        this.blur();
         lastFocusedItem.openOverlay();
         return;
       }
@@ -360,12 +437,15 @@ export class Menu extends SizedMixin(SpectrumElement) {
       this.navigateWithinMenu(event);
       return;
     }
-    this.navigateBetweenRelatedMenus(code);
+    this.navigateBetweenRelatedMenus(event);
   }
   focusMenuItemByOffset(offset) {
     const step = offset || 1;
     const focusedItem = this.childItems[this.focusedItemIndex];
-    focusedItem.focused = false;
+    if (focusedItem) {
+      focusedItem.focused = false;
+      focusedItem.active = focusedItem.open;
+    }
     this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + offset) % this.childItems.length;
     let itemToFocus = this.childItems[this.focusedItemIndex];
     let availableItems = this.childItems.length;
@@ -404,7 +484,7 @@ export class Menu extends SizedMixin(SpectrumElement) {
       itemIndex -= 1;
       const childItem = this.childItems[itemIndex];
       if (childItem.menuData.selectionRoot === this) {
-        if (childItem.selected) {
+        if (childItem.selected || !this._hasUpdatedSelectedItemIndex && this.selected.includes(childItem.value)) {
           firstOrFirstSelectedIndex = itemIndex;
           selectedItemsMap.set(childItem, true);
           selected.unshift(childItem.value);
@@ -430,20 +510,24 @@ export class Menu extends SizedMixin(SpectrumElement) {
   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();
-      });
+      this.cacheUpdated = this.updateCache();
+    }
+  }
+  async updateCache() {
+    if (!this.hasUpdated) {
+      await Promise.all([
+        new Promise((res) => requestAnimationFrame(() => res(true))),
+        this.updateComplete
+      ]);
+    } else {
+      await new Promise((res) => requestAnimationFrame(() => res(true)));
+    }
+    if (this.cachedChildItems === void 0) {
+      this.updateSelectedItemIndex();
+      this.updateItemFocus();
     }
+    this._willUpdateItems = false;
   }
   updateItemFocus() {
     if (this.childItems.length == 0) {
@@ -454,21 +538,52 @@ export class Menu extends SizedMixin(SpectrumElement) {
       this.forwardFocusVisibleToItem(focusInItem);
     }
   }
+  closeDescendentOverlays() {
+    this.descendentOverlays.forEach((overlay) => {
+      overlay.open = false;
+    });
+    this.descendentOverlays = /* @__PURE__ */ new Map();
+  }
   forwardFocusVisibleToItem(item) {
     if (item.menuData.focusRoot !== this) {
       return;
     }
-    item.focused = this.hasVisibleFocusInTree();
+    this.closeDescendentOverlays();
+    const focused = this.hasVisibleFocusInTree() || !!this.childItems.find((child) => {
+      return child.hasVisibleFocusInTree();
+    });
+    item.focused = focused;
     this.setAttribute("aria-activedescendant", item.id);
     if (item.menuData.selectionRoot && item.menuData.selectionRoot !== this) {
       item.menuData.selectionRoot.focus();
     }
   }
-  render() {
+  handleSlotchange({
+    target
+  }) {
+    const assignedElement = target.assignedElements({
+      flatten: true
+    });
+    if (this.childItems.length !== assignedElement.length) {
+      assignedElement.forEach((item) => {
+        if (typeof item.triggerUpdate !== "undefined") {
+          item.triggerUpdate();
+        }
+      });
+    }
+  }
+  renderMenuItemSlot() {
     return html`
-            <slot></slot>
+            <slot
+                @sp-menu-submenu-opened=${this.handleDescendentOverlayOpened}
+                @sp-menu-submenu-closed=${this.handleDescendentOverlayClosed}
+                @slotchange=${this.handleSlotchange}
+            ></slot>
         `;
   }
+  render() {
+    return this.renderMenuItemSlot();
+  }
   firstUpdated(changed) {
     super.firstUpdated(changed);
     if (!this.hasAttribute("tabindex") && !this.ignore) {
@@ -491,17 +606,16 @@ export class Menu extends SizedMixin(SpectrumElement) {
   }
   updated(changes) {
     super.updated(changes);
-    if (changes.has("selects") && this._notFirstUpdated) {
+    if (changes.has("selects") && this.hasUpdated) {
       this.selectsChanged();
     }
-    if (changes.has("label")) {
+    if (changes.has("label") && (this.label || typeof changes.get("label") !== "undefined")) {
       if (this.label) {
         this.setAttribute("aria-label", this.label);
       } else {
         this.removeAttribute("aria-label");
       }
     }
-    this._notFirstUpdated = true;
   }
   selectsChanged() {
     const updates = [