@spectrum-web-components/menu 1.2.0-beta.8 → 1.2.0

package/src/Menu.dev.js

@@ -19,9 +19,7 @@ import {
   query
 } from "@spectrum-web-components/base/src/decorators.js";
 import menuStyles from "./menu.css.js";
-function elementIsOrContains(el, isOrContains) {
-  return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
-}
+import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
 export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
   constructor() {
     super();
@@ -58,15 +56,8 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: 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;
@@ -75,6 +66,26 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     this.resolveCacheUpdated = () => {
       return;
     };
+    if (!this.rovingTabindexController && this.controlsRovingTabindex) {
+      this.rovingTabindexController = new RovingTabindexController(this, {
+        direction: "vertical",
+        focusInIndex: (elements) => {
+          let firstEnabledIndex = -1;
+          const firstSelectedIndex = elements == null ? void 0 : elements.findIndex(
+            (el, index) => {
+              if (!elements[firstEnabledIndex] && !el.disabled) {
+                firstEnabledIndex = index;
+              }
+              return el.selected && !el.disabled;
+            }
+          );
+          return elements && firstSelectedIndex && elements[firstSelectedIndex] ? firstSelectedIndex : firstEnabledIndex;
+        },
+        elements: () => this.childItems,
+        isFocusableElement: this.isFocusableElement.bind(this),
+        hostDelegatesFocus: true
+      });
+    }
     this.addEventListener(
       "sp-menu-item-added-or-updated",
       this.onSelectableItemAddedOrUpdated
@@ -87,9 +98,9 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
       }
     );
     this.addEventListener("click", this.handleClick);
+    this.addEventListener("focusout", this.handleFocusout);
+    this.addEventListener("sp-menu-item-keydown", this.handleKeydown);
     this.addEventListener("pointerup", this.handlePointerup);
-    this.addEventListener("focusin", this.handleFocusin);
-    this.addEventListener("blur", this.handleBlur);
     this.addEventListener("sp-opened", this.handleSubmenuOpened);
     this.addEventListener("sp-closed", this.handleSubmenuClosed);
   }
@@ -100,7 +111,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     return this.slot === "submenu";
   }
   get selected() {
-    return this._selected;
+    return !this.selects ? [] : this._selected;
   }
   set selected(selected) {
     if (selected === this.selected) {
@@ -122,6 +133,16 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     });
     this.requestUpdate("selected", old);
   }
+  get focusInItem() {
+    var _a;
+    return (_a = this.rovingTabindexController) == null ? void 0 : _a.focusInElement;
+  }
+  get controlsRovingTabindex() {
+    return true;
+  }
+  /**
+   * child items managed by menu
+   */
   get childItems() {
     if (!this.cachedChildItems) {
       this.cachedChildItems = this.updateCachedMenuItems();
@@ -129,16 +150,17 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     return this.cachedChildItems;
   }
   updateCachedMenuItems() {
-    this.cachedChildItems = [];
+    var _a;
     if (!this.menuSlot) {
       return [];
     }
+    const itemsList = [];
     const slottedElements = this.menuSlot.assignedElements({
       flatten: true
     });
     for (const [i, slottedElement] of slottedElements.entries()) {
       if (this.childItemSet.has(slottedElement)) {
-        this.cachedChildItems.push(slottedElement);
+        itemsList.push(slottedElement);
         continue;
       }
       const isHTMLSlotElement = slottedElement.localName === "slot";
@@ -152,6 +174,8 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
         ...flattenedChildren
       );
     }
+    this.cachedChildItems = [...itemsList];
+    (_a = this.rovingTabindexController) == null ? void 0 : _a.clearElementCache();
     return this.cachedChildItems;
   }
   /**
@@ -206,9 +230,6 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     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;
-    }
     this.addChildItem(event.item);
     if (this.selects === "inherit") {
       this.resolvedSelects = "inherit";
@@ -221,6 +242,9 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
       this.resolvedRole = this.ignore ? "none" : this.getAttribute("role") || void 0;
       this.resolvedSelects = this.resolvedRole === "none" ? "ignore" : "none";
     }
+    if (this.resolvedRole === "none") {
+      return;
+    }
     const selects = this.resolvedSelects === "single" || this.resolvedSelects === "multiple";
     event.item.menuData.cleanupSteps.push(
       (item) => this.removeChildItem(item)
@@ -241,30 +265,50 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     this.handleItemsChanged();
   }
   async removeChildItem(item) {
+    if (item.focused || item.hasAttribute("focused") || item.active) {
+      this._updateFocus = this.getNeighboringFocusableElement(item);
+    }
     this.childItemSet.delete(item);
     this.cachedChildItems = void 0;
-    if (item.focused) {
-      this.handleItemsChanged();
-      await this.updateComplete;
-      this.focus();
-    }
   }
-  focus({ preventScroll } = {}) {
-    if (!this.childItems.length || this.childItems.every((childItem) => childItem.disabled)) {
-      return;
-    }
-    if (this.childItems.some(
-      (childItem) => childItem.menuData.focusRoot !== this
-    )) {
-      super.focus({ preventScroll });
+  /**
+   * for picker elements, will set focus on first selected item
+   */
+  focusOnFirstSelectedItem({
+    preventScroll
+  } = {}) {
+    var _a;
+    if (!this.rovingTabindexController) return;
+    const selectedItem = this.selectedItems.find(
+      (el) => this.isFocusableElement(el)
+    );
+    if (!selectedItem) {
+      this.focus({ preventScroll });
       return;
     }
-    this.focusMenuItemByOffset(0);
-    super.focus({ preventScroll });
-    const selectedItem = this.selectedItems[0];
     if (selectedItem && !preventScroll) {
       selectedItem.scrollIntoView({ block: "nearest" });
     }
+    (_a = this.rovingTabindexController) == null ? void 0 : _a.focusOnItem(selectedItem);
+  }
+  focus({ preventScroll } = {}) {
+    if (this.rovingTabindexController) {
+      if (!this.childItems.length || this.childItems.every((childItem) => childItem.disabled)) {
+        return;
+      }
+      if (this.childItems.some(
+        (childItem) => childItem.menuData.focusRoot !== this
+      )) {
+        super.focus({ preventScroll });
+        return;
+      }
+      this.rovingTabindexController.focus({ preventScroll });
+    }
+  }
+  handleFocusout() {
+    var _a;
+    if (!this.matches(":focus-within"))
+      (_a = this.rovingTabindexController) == null ? void 0 : _a.reset();
   }
   handleClick(event) {
     if (this.pointerUpTarget === event.target) {
@@ -315,40 +359,6 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     }
     this.prepareToCleanUp();
   }
-  handleFocusin(event) {
-    var _a;
-    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 || event.target !== this) {
-      selectionRoot.focus({ preventScroll: true });
-      if (activeElement && this.focusedItemIndex === 0) {
-        const offset = this.childItems.findIndex(
-          (childItem) => childItem === activeElement
-        );
-        this.focusMenuItemByOffset(Math.max(offset, 0));
-      }
-    }
-    this.startListeningToKeyboard();
-  }
-  startListeningToKeyboard() {
-    this.addEventListener("keydown", this.handleKeydown);
-  }
-  handleBlur(event) {
-    if (elementIsOrContains(this, event.relatedTarget)) {
-      return;
-    }
-    this.stopListeningToKeyboard();
-    this.childItems.forEach((child) => child.focused = false);
-    this.removeAttribute("aria-activedescendant");
-  }
-  stopListeningToKeyboard() {
-    this.removeEventListener("keydown", this.handleKeydown);
-  }
   handleDescendentOverlayOpened(event) {
     const target = event.composedPath()[0];
     if (!target.overlayElement) return;
@@ -362,19 +372,34 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     if (!target.overlayElement) return;
     this.descendentOverlays.delete(target.overlayElement);
   }
+  /**
+   * given a menu item, returns the next focusable menu item before or after it;
+   * if no menu item is provided, returns the first focusable menu item
+   * @param menuItem {MenuItem}
+   * @param before {boolean} return the item before; default is false
+   * @returns {MenuItem}
+   */
+  getNeighboringFocusableElement(menuItem, before = false) {
+    var _a;
+    const diff = before ? -1 : 1;
+    const elements = ((_a = this.rovingTabindexController) == null ? void 0 : _a.elements) || [];
+    const index = !!menuItem ? elements.indexOf(menuItem) : -1;
+    let newIndex = Math.min(Math.max(0, index + diff), elements.length - 1);
+    while (!this.isFocusableElement(elements[newIndex]) && 0 < newIndex && newIndex < elements.length - 1) {
+      newIndex += diff;
+    }
+    return !!this.isFocusableElement(elements[newIndex]) ? elements[newIndex] : menuItem || elements[0];
+  }
   async selectOrToggleItem(targetItem) {
+    var _a;
     const resolvedSelects = this.resolvedSelects;
     const oldSelectedItemsMap = new Map(this.selectedItemsMap);
     const oldSelected = this.selected.slice();
     const oldSelectedItems = this.selectedItems.slice();
     const oldValue = this.value;
-    const focusedChild = this.childItems[this.focusedItemIndex];
-    if (focusedChild) {
-      focusedChild.focused = false;
-      focusedChild.active = false;
+    if (targetItem.menuData.selectionRoot !== this) {
+      return;
     }
-    this.focusedItemIndex = this.childItems.indexOf(targetItem);
-    this.forwardFocusVisibleToItem(targetItem);
     if (resolvedSelects === "multiple") {
       if (this.selectedItemsMap.has(targetItem)) {
         this.selectedItemsMap.delete(targetItem);
@@ -423,49 +448,37 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
       targetItem.selected = true;
     } else if (resolvedSelects === "multiple") {
       targetItem.selected = !targetItem.selected;
+    } else if (!targetItem.hasSubmenu && ((_a = targetItem == null ? void 0 : targetItem.menuData) == null ? void 0 : _a.focusRoot) === this) {
+      this.dispatchEvent(new Event("close", { bubbles: true }));
     }
   }
-  navigateWithinMenu(event) {
-    const { key } = event;
-    const lastFocusedItem = this.childItems[this.focusedItemIndex];
-    const direction = key === "ArrowDown" ? 1 : -1;
-    const itemToFocus = this.focusMenuItemByOffset(direction);
-    if (itemToFocus === lastFocusedItem) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    itemToFocus.scrollIntoView({ block: "nearest" });
-  }
   navigateBetweenRelatedMenus(event) {
-    const { key } = event;
-    event.stopPropagation();
+    const { key, root } = event;
     const shouldOpenSubmenu = this.isLTR && key === "ArrowRight" || !this.isLTR && key === "ArrowLeft";
-    const shouldCloseSelfAsSubmenu = this.isLTR && key === "ArrowLeft" || !this.isLTR && key === "ArrowRight";
+    const shouldCloseSelfAsSubmenu = this.isLTR && key === "ArrowLeft" || !this.isLTR && key === "ArrowRight" || key === "Escape";
+    const lastFocusedItem = root;
     if (shouldOpenSubmenu) {
-      const lastFocusedItem = this.childItems[this.focusedItemIndex];
       if (lastFocusedItem == null ? void 0 : lastFocusedItem.hasSubmenu) {
+        event.stopPropagation();
         lastFocusedItem.openOverlay();
       }
     } else if (shouldCloseSelfAsSubmenu && this.isSubmenu) {
+      event.stopPropagation();
       this.dispatchEvent(new Event("close", { bubbles: true }));
       this.updateSelectedItemIndex();
     }
   }
   handleKeydown(event) {
-    if (event.defaultPrevented) {
+    var _a;
+    if (event.defaultPrevented || !this.rovingTabindexController) {
       return;
     }
-    const lastFocusedItem = this.childItems[this.focusedItemIndex];
-    if (lastFocusedItem) {
-      lastFocusedItem.focused = true;
-    }
-    const { key } = event;
-    if (event.shiftKey && event.target !== this && this.hasAttribute("tabindex")) {
+    const { key, root, shiftKey, target } = event;
+    const openSubmenuKey = ["Enter", " "].includes(key);
+    if (shiftKey && target !== this && this.hasAttribute("tabindex")) {
       this.removeAttribute("tabindex");
       const replaceTabindex = (event2) => {
         if (!event2.shiftKey && !this.hasAttribute("tabindex")) {
-          this.tabIndex = 0;
           document.removeEventListener("keyup", replaceTabindex);
           this.removeEventListener("focusout", replaceTabindex);
         }
@@ -474,61 +487,33 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
       this.addEventListener("focusout", replaceTabindex);
     }
     if (key === "Tab") {
-      this.prepareToCleanUp();
+      this.closeDescendentOverlays();
       return;
     }
-    if (key === " ") {
-      if (lastFocusedItem == null ? void 0 : lastFocusedItem.hasSubmenu) {
-        lastFocusedItem.openOverlay();
-        return;
-      }
-    }
-    if (key === " " || key === "Enter") {
-      const childItem = this.childItems[this.focusedItemIndex];
-      if (childItem && childItem.menuData.selectionRoot === event.target) {
-        event.preventDefault();
-        childItem.click();
-      }
+    if (openSubmenuKey && (root == null ? void 0 : root.hasSubmenu) && !root.open) {
+      event.preventDefault();
+      root.openOverlay();
       return;
     }
-    if (key === "ArrowDown" || key === "ArrowUp") {
-      const childItem = this.childItems[this.focusedItemIndex];
-      if (childItem && childItem.menuData.selectionRoot === event.target) {
-        this.navigateWithinMenu(event);
-      }
+    if (key === " " || key === "Enter") {
+      event.preventDefault();
+      (_a = root == null ? void 0 : root.focusElement) == null ? void 0 : _a.click();
+      if (root) this.selectOrToggleItem(root);
       return;
     }
     this.navigateBetweenRelatedMenus(event);
   }
-  focusMenuItemByOffset(offset) {
-    const step = offset || 1;
-    const focusedItem = this.childItems[this.focusedItemIndex];
-    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;
-    while ((itemToFocus == null ? void 0 : itemToFocus.disabled) && availableItems) {
-      availableItems -= 1;
-      this.focusedItemIndex = (this.childItems.length + this.focusedItemIndex + step) % this.childItems.length;
-      itemToFocus = this.childItems[this.focusedItemIndex];
-    }
-    if (!(itemToFocus == null ? void 0 : itemToFocus.disabled)) {
-      this.forwardFocusVisibleToItem(itemToFocus);
-    }
-    return itemToFocus;
-  }
+  /**
+   * on focus, removes focus from focus styling item, and updates the selected item index
+   */
   prepareToCleanUp() {
     document.addEventListener(
       "focusout",
       () => {
         requestAnimationFrame(() => {
-          const focusedItem = this.childItems[this.focusedItemIndex];
+          const focusedItem = this.focusInItem;
           if (focusedItem) {
             focusedItem.focused = false;
-            this.updateSelectedItemIndex();
           }
         });
       },
@@ -556,11 +541,6 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
         }
       }
     }
-    selectedItems.map((item, i) => {
-      if (i > 0) {
-        item.focused = false;
-      }
-    });
     this.selectedItemsMap = selectedItemsMap;
     this._selected = selected;
     this.selectedItems = selectedItems;
@@ -591,13 +571,11 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     this._willUpdateItems = false;
   }
   updateItemFocus() {
+    var _a;
+    (_a = this.focusInItem) == null ? void 0 : _a.setAttribute("tabindex", "0");
     if (this.childItems.length == 0) {
       return;
     }
-    const focusInItem = this.childItems[this.focusInItemIndex];
-    if (this.getRootNode().activeElement === focusInItem.menuData.focusRoot) {
-      this.forwardFocusVisibleToItem(focusInItem);
-    }
   }
   closeDescendentOverlays() {
     this.descendentOverlays.forEach((overlay) => {
@@ -605,23 +583,10 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     });
     this.descendentOverlays = /* @__PURE__ */ new Map();
   }
-  forwardFocusVisibleToItem(item) {
-    if (!item || item.menuData.focusRoot !== this) {
-      return;
-    }
-    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();
-    }
-  }
   handleSlotchange({
     target
   }) {
+    var _a;
     const assignedElements = target.assignedElements({
       flatten: true
     });
@@ -636,6 +601,10 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
         }
       });
     }
+    if (!!this._updateFocus) {
+      (_a = this.rovingTabindexController) == null ? void 0 : _a.focusOnItem(this._updateFocus);
+      this._updateFocus = void 0;
+    }
   }
   renderMenuItemSlot() {
     return html`
@@ -651,14 +620,6 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
   }
   firstUpdated(changed) {
     super.firstUpdated(changed);
-    if (!this.hasAttribute("tabindex") && !this.ignore) {
-      const role = this.getAttribute("role");
-      if (role === "group") {
-        this.tabIndex = -1;
-      } else {
-        this.tabIndex = 0;
-      }
-    }
     const updates = [
       new Promise((res) => requestAnimationFrame(() => res(true)))
     ];
@@ -698,6 +659,9 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     }
     this.updateComplete.then(() => this.updateItemFocus());
   }
+  isFocusableElement(el) {
+    return el ? !el.disabled : false;
+  }
   disconnectedCallback() {
     this.cachedChildItems = void 0;
     this.selectedItems = [];
@@ -713,6 +677,10 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     return complete;
   }
 }
+Menu.shadowRootOptions = {
+  ...SpectrumElement.shadowRootOptions,
+  delegatesFocus: true
+};
 __decorateClass([
   property({ type: String, reflect: true })
 ], Menu.prototype, "label", 2);