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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/menu",
-    "version": "0.35.1-rc.43+432051b80",
+    "version": "0.36.0",
     "publishConfig": {
         "access": "public"
     },
@@ -85,16 +85,16 @@
     ],
     "dependencies": {
         "@lit-labs/observers": "^2.0.0",
-        "@spectrum-web-components/action-button": "^0.35.1-rc.43+432051b80",
-        "@spectrum-web-components/base": "^0.35.1-rc.43+432051b80",
-        "@spectrum-web-components/divider": "^0.35.1-rc.43+432051b80",
-        "@spectrum-web-components/icon": "^0.35.1-rc.43+432051b80",
-        "@spectrum-web-components/icons-ui": "^0.35.1-rc.43+432051b80",
-        "@spectrum-web-components/overlay": "^0.35.1-rc.43+432051b80",
-        "@spectrum-web-components/shared": "^0.35.1-rc.43+432051b80"
+        "@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"
     },
     "devDependencies": {
-        "@spectrum-css/menu": "^4.0.48"
+        "@spectrum-css/menu": "^5.0.2"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -102,5 +102,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "432051b8085e7c86032333fa296bfa5334d47d84"
+    "gitHead": "a532ff8a410abeefb54d9638a2316ae82570566e"
 }

package/src/Menu.d.ts

@@ -7,6 +7,10 @@ export interface MenuChildItem {
     focusable: boolean;
     focusRoot: Menu;
 }
+declare const Menu_base: typeof SpectrumElement & {
+    new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
+    prototype: import("@spectrum-web-components/base").SizedElementInterface;
+};
 /**
  * Spectrum Menu Component
  * @element sp-menu
@@ -20,9 +24,9 @@ export interface MenuChildItem {
  *   When the `selects` attribute is not present a `value` will not be maintained and the Menu
  *   Item children of this Menu will not have their `selected` state managed.
  */
-export declare class Menu extends SpectrumElement {
+export declare class Menu extends Menu_base {
     static get styles(): CSSResultArray;
-    private get isSubmenu();
+    isSubmenu: boolean;
     label: string;
     ignore: boolean;
     selects: undefined | 'inherit' | 'single' | 'multiple';
@@ -51,7 +55,7 @@ export declare class Menu extends SpectrumElement {
     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
@@ -59,7 +63,7 @@ export declare class Menu extends SpectrumElement {
     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
@@ -69,33 +73,24 @@ export declare class Menu extends SpectrumElement {
     private removeChildItem;
     constructor();
     focus({ preventScroll }?: FocusOptions): void;
-    private handleClick;
+    private onClick;
     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(event: KeyboardEvent): void;
+    protected navigateBetweenRelatedMenus(code: string): 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;
@@ -103,6 +98,6 @@ export declare class Menu extends SpectrumElement {
     disconnectedCallback(): void;
     protected childItemsUpdated: Promise<unknown[]>;
     protected cacheUpdated: Promise<void>;
-    protected resolveCacheUpdated: () => void;
     protected getUpdateComplete(): Promise<boolean>;
 }
+export {};

package/src/Menu.dev.js

@@ -12,6 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 import {
   html,
+  SizedMixin,
   SpectrumElement
 } from "@spectrum-web-components/base";
 import {
@@ -23,9 +24,10 @@ import menuStyles from "./menu.css.js";
 function elementIsOrContains(el, isOrContains) {
   return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
 }
-export class Menu extends SpectrumElement {
+export class Menu extends SizedMixin(SpectrumElement) {
   constructor() {
     super();
+    this.isSubmenu = false;
     this.label = "";
     this.ignore = false;
     this.value = "";
@@ -36,44 +38,9 @@ export class Menu extends 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
@@ -85,18 +52,13 @@ export class Menu extends SpectrumElement {
         capture: true
       }
     );
-    this.addEventListener("click", this.handleClick);
+    this.addEventListener("sp-menu-item-removed", this.removeChildItem);
+    this.addEventListener("click", this.onClick);
     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();
@@ -105,7 +67,7 @@ export class Menu extends SpectrumElement {
   }
   updateCachedMenuItems() {
     this.cachedChildItems = [];
-    const slotElements = this.menuSlot.assignedElements({ flatten: true });
+    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) {
@@ -141,37 +103,17 @@ export class Menu extends 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;
-    const cascadeData = event.menuCascade.get(this);
-    if (!cascadeData)
-      return;
-    event.item.menuData.parentMenu = event.item.menuData.parentMenu || this;
-    if (cascadeData.hadFocusRoot && !this.ignore) {
+    if (event.item.menuData.focusRoot && !this.ignore) {
       this.tabIndex = -1;
     }
+    event.focusRoot = this;
     this.addChildItem(event.item);
     if (this.selects === "inherit") {
       this.resolvedSelects = "inherit";
@@ -180,33 +122,34 @@ export class Menu extends 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.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);
-      }
+      event.selectionRoot = this;
     }
   }
   addChildItem(item) {
     this.childItemSet.add(item);
     this.handleItemsChanged();
   }
-  async removeChildItem(item) {
-    this.childItemSet.delete(item);
+  async removeChildItem(event) {
+    this.childItemSet.delete(event.item);
     this.cachedChildItems = void 0;
-    if (item.focused) {
+    if (event.item.focused) {
       this.handleItemsChanged();
       await this.updateComplete;
       this.focus();
@@ -224,12 +167,12 @@ export class Menu extends SpectrumElement {
     }
     this.focusMenuItemByOffset(0);
     super.focus({ preventScroll });
-    const selectedItem = this.selectedItems[0];
+    const selectedItem = this.querySelector("[selected]");
     if (selectedItem && !preventScroll) {
       selectedItem.scrollIntoView({ block: "nearest" });
     }
   }
-  handleClick(event) {
+  onClick(event) {
     if (event.defaultPrevented) {
       return;
     }
@@ -261,18 +204,18 @@ export class Menu extends SpectrumElement {
   }
   handleFocusin(event) {
     var _a;
-    const wasOrContainedRelatedTarget = elementIsOrContains(
+    const isOrContainsRelatedTarget = elementIsOrContains(
       this,
       event.relatedTarget
     );
-    if (this.childItems.some(
+    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 || !wasOrContainedRelatedTarget && event.target !== this) {
+    if (activeElement !== selectionRoot || !isOrContainsRelatedTarget) {
       selectionRoot.focus({ preventScroll: true });
       if (activeElement && this.focusedItemIndex === 0) {
         const offset = this.childItems.findIndex(
@@ -287,32 +230,27 @@ export class Menu extends 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();
-    this.childItems.forEach((child) => child.focused = false);
+    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);
-  }
-  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);
+    this.removeEventListener("focusout", this.handleFocusout);
   }
   async selectOrToggleItem(targetItem) {
     const resolvedSelects = this.resolvedSelects;
@@ -321,7 +259,6 @@ export class Menu extends SpectrumElement {
     const oldSelectedItems = this.selectedItems.slice();
     const oldValue = this.value;
     this.childItems[this.focusedItemIndex].focused = false;
-    this.childItems[this.focusedItemIndex].active = false;
     this.focusedItemIndex = this.childItems.indexOf(targetItem);
     this.forwardFocusVisibleToItem(targetItem);
     if (resolvedSelects === "multiple") {
@@ -385,31 +322,23 @@ export class Menu extends SpectrumElement {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
     itemToFocus.scrollIntoView({ block: "nearest" });
   }
-  navigateBetweenRelatedMenus(event) {
-    const { code } = event;
+  navigateBetweenRelatedMenus(code) {
     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 { code } = event;
     if (code === "Tab") {
       this.prepareToCleanUp();
@@ -418,6 +347,7 @@ export class Menu extends SpectrumElement {
     if (code === "Space") {
       const lastFocusedItem = this.childItems[this.focusedItemIndex];
       if (lastFocusedItem == null ? void 0 : lastFocusedItem.hasSubmenu) {
+        this.blur();
         lastFocusedItem.openOverlay();
         return;
       }
@@ -430,15 +360,12 @@ export class Menu extends SpectrumElement {
       this.navigateWithinMenu(event);
       return;
     }
-    this.navigateBetweenRelatedMenus(event);
+    this.navigateBetweenRelatedMenus(code);
   }
   focusMenuItemByOffset(offset) {
     const step = offset || 1;
     const focusedItem = this.childItems[this.focusedItemIndex];
-    if (focusedItem) {
-      focusedItem.focused = false;
-      focusedItem.active = focusedItem.open;
-    }
+    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;
@@ -477,7 +404,7 @@ export class Menu extends SpectrumElement {
       itemIndex -= 1;
       const childItem = this.childItems[itemIndex];
       if (childItem.menuData.selectionRoot === this) {
-        if (childItem.selected || !this._hasUpdatedSelectedItemIndex && this.selected.includes(childItem.value)) {
+        if (childItem.selected) {
           firstOrFirstSelectedIndex = itemIndex;
           selectedItemsMap.set(childItem, true);
           selected.unshift(childItem.value);
@@ -503,17 +430,20 @@ export class Menu extends SpectrumElement {
   handleItemsChanged() {
     this.cachedChildItems = void 0;
     if (!this._willUpdateItems) {
+      let resolve = () => {
+        return;
+      };
+      this.cacheUpdated = new Promise((res) => resolve = res);
       this._willUpdateItems = true;
-      this.cacheUpdated = this.updateCache();
-    }
-  }
-  async updateCache() {
-    await new Promise((res) => requestAnimationFrame(() => res(true)));
-    if (this.cachedChildItems === void 0) {
-      this.updateSelectedItemIndex();
-      this.updateItemFocus();
+      window.requestAnimationFrame(() => {
+        if (this.cachedChildItems === void 0) {
+          this.updateSelectedItemIndex();
+          this.updateItemFocus();
+        }
+        this._willUpdateItems = false;
+        resolve();
+      });
     }
-    this._willUpdateItems = false;
   }
   updateItemFocus() {
     if (this.childItems.length == 0) {
@@ -524,52 +454,21 @@ export class Menu extends 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;
     }
-    this.closeDescendentOverlays();
-    const focused = this.hasVisibleFocusInTree() || !!this.childItems.find((child) => {
-      return child.hasVisibleFocusInTree();
-    });
-    item.focused = focused;
+    item.focused = this.hasVisibleFocusInTree();
     this.setAttribute("aria-activedescendant", item.id);
     if (item.menuData.selectionRoot && item.menuData.selectionRoot !== this) {
       item.menuData.selectionRoot.focus();
     }
   }
-  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() {
+  render() {
     return html`
-            <slot
-                @sp-menu-submenu-opened=${this.handleDescendentOverlayOpened}
-                @sp-menu-submenu-closed=${this.handleDescendentOverlayClosed}
-                @slotchange=${this.handleSlotchange}
-            ></slot>
+            <slot></slot>
         `;
   }
-  render() {
-    return this.renderMenuItemSlot();
-  }
   firstUpdated(changed) {
     super.firstUpdated(changed);
     if (!this.hasAttribute("tabindex") && !this.ignore) {
@@ -592,16 +491,17 @@ export class Menu extends SpectrumElement {
   }
   updated(changes) {
     super.updated(changes);
-    if (changes.has("selects") && this.hasUpdated) {
+    if (changes.has("selects") && this._notFirstUpdated) {
       this.selectsChanged();
     }
-    if (changes.has("label") && (this.label || typeof changes.get("label") !== "undefined")) {
+    if (changes.has("label")) {
       if (this.label) {
         this.setAttribute("aria-label", this.label);
       } else {
         this.removeAttribute("aria-label");
       }
     }
+    this._notFirstUpdated = true;
   }
   selectsChanged() {
     const updates = [