@y14e/menu 1.4.8 → 1.5.1

package/README.md

@@ -10,16 +10,16 @@ npm i @y14e/menu
 
 ```ts
 // npm
-import Menu from '@y14e/menu@1.4.8';
+import Menu from '@y14e/menu@1.5.1';
 // with middleware
-import Menu, { flip, offset, shift } from '@y14e/menu@1.4.8';
+import Menu, { flip, offset, shift } from '@y14e/menu@1.5.1';
 
 // CDNs
-import Menu from 'https://esm.sh/@y14e/menu@1.4.8';
+import Menu from 'https://esm.sh/@y14e/menu@1.5.1';
 // or
-import Menu from 'https://cdn.jsdelivr.net/npm/@y14e/menu@1.4.8/+esm';
+import Menu from 'https://cdn.jsdelivr.net/npm/@y14e/menu@1.5.1/+esm';
 // or
-import Menu from 'https://esm.unpkg.com/@y14e/menu@1.4.8';
+import Menu from 'https://esm.unpkg.com/@y14e/menu@1.5.1';
 ```
 
 ## Usage

package/dist/index.cjs

@@ -2624,6 +2624,7 @@ var Menu = class _Menu {
   };
   #settings;
   #externalTrigger;
+  #isMenubar;
   #isPortal;
   #isSubmenu;
   #triggerElement;
@@ -2656,10 +2657,12 @@ var Menu = class _Menu {
     matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
     const {
       externalTrigger = null,
+      isMenubar = false,
       isPortal = false,
       isSubmenu = false
     } = _internal;
     this.#externalTrigger = externalTrigger;
+    this.#isMenubar = isMenubar;
     this.#isPortal = isPortal;
     this.#isSubmenu = isSubmenu;
     const { selector } = this.#settings;
@@ -2715,8 +2718,8 @@ var Menu = class _Menu {
     }
     this.#initialize();
   }
-  open(focusLastItem = false) {
-    this.#toggle(true, focusLastItem);
+  open(_initialFocus = "first") {
+    this.#toggle(true, { initialFocus: _initialFocus });
   }
   close() {
     this.#toggle(false);
@@ -2916,7 +2919,7 @@ var Menu = class _Menu {
     }
     event.preventDefault();
     event.stopPropagation();
-    this.open(key === "ArrowUp");
+    this.open(key === "ArrowDown" ? "first" : "last");
   };
   #onListKeyDown = (event) => {
     const { shiftKey, key } = event;
@@ -2932,7 +2935,8 @@ var Menu = class _Menu {
       "Enter",
       "Escape",
       " ",
-      ...this.#isSubmenu ? ["ArrowLeft"] : []
+      "ArrowLeft",
+      ...this.#isMenubar ? ["ArrowRight"] : []
     ].includes(key)) {
       return;
     }
@@ -2945,9 +2949,18 @@ var Menu = class _Menu {
     switch (key) {
       case "Tab":
       case "Escape":
-      case "ArrowLeft":
         this.close();
         return;
+      case "ArrowLeft":
+        if (this.#isMenubar) {
+          this.#closeAndMoveFocus("previous");
+        } else if (this.#isSubmenu && this.#triggerElement) {
+          this.close();
+        }
+        return;
+      case "ArrowRight":
+        this.#closeAndMoveFocus("next");
+        return;
       case "Enter":
       case " ":
         active.click();
@@ -2987,7 +3000,7 @@ var Menu = class _Menu {
       i.setAttribute("aria-checked", String(i === item));
     });
   };
-  #toggle(isOpen, isFocusLastItem = false) {
+  #toggle(isOpen, options = {}) {
     if (this.#triggerElement?.ariaExpanded === String(isOpen)) {
       return;
     }
@@ -3012,7 +3025,8 @@ var Menu = class _Menu {
       style.setProperty("display", "block");
       style.setProperty("opacity", "0");
       this.#triggerElement && this.#updatePopover();
-      this.#itemElements.filter(isFocusable3).at(isFocusLastItem ? -1 : 0)?.focus();
+      const { initialFocus = "first" } = options;
+      this.#itemElements.filter(isFocusable3).at(initialFocus === "first" ? 0 : -1)?.focus();
     } else {
       this.#clearSubmenuTimer();
       this.#focusTrigger();
@@ -3077,8 +3091,18 @@ var Menu = class _Menu {
       this.#submenuTimer = void 0;
     }
   }
+  #closeAndMoveFocus(direction) {
+    this.close();
+    requestAnimationFrame(
+      () => (this.#externalTrigger ?? this.#triggerElement)?.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: direction === "previous" ? "ArrowLeft" : "ArrowRight"
+        })
+      )
+    );
+  }
   #containsRoot(element) {
-    return this.#rootElement.contains(element) || this.#listElement?.contains(element);
+    return this.#rootElement.contains(element) || !!this.#listElement?.contains(element);
   }
   #focusTrigger() {
     const active = getActiveElement4();
@@ -3241,7 +3265,7 @@ function isFocusable3(element) {
  * WAI-ARIA compliant menu (menu button) pattern implementation in TypeScript.
  * Supports checkbox item, radio item, and infinitely nested menus.
  *
- * @version 1.4.8
+ * @version 1.5.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -6,7 +6,7 @@ export { flip, offset, shift } from '@floating-ui/dom';
  * WAI-ARIA compliant menu (menu button) pattern implementation in TypeScript.
  * Supports checkbox item, radio item, and infinitely nested menus.
  *
- * @version 1.4.8
+ * @version 1.5.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -39,6 +39,7 @@ interface MenuPopoverOptions {
 }
 interface InternalOptions {
     readonly externalTrigger?: HTMLElement;
+    readonly isMenubar?: boolean;
     readonly isPortal?: boolean;
     readonly isSubmenu?: boolean;
 }
@@ -50,7 +51,11 @@ declare class Menu {
      * @internal Internal constructor
      */
     constructor(root: HTMLElement, options?: MenuOptions, _internal?: InternalOptions);
-    open(focusLastItem?: boolean): void;
+    open(): void;
+    /**
+     * @internal Internal open
+     */
+    open(_initialFocus?: 'first' | 'last'): void;
     close(): void;
     destroy(force?: boolean): Promise<void>;
 }

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { flip, offset, shift } from '@floating-ui/dom';
  * WAI-ARIA compliant menu (menu button) pattern implementation in TypeScript.
  * Supports checkbox item, radio item, and infinitely nested menus.
  *
- * @version 1.4.8
+ * @version 1.5.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -39,6 +39,7 @@ interface MenuPopoverOptions {
 }
 interface InternalOptions {
     readonly externalTrigger?: HTMLElement;
+    readonly isMenubar?: boolean;
     readonly isPortal?: boolean;
     readonly isSubmenu?: boolean;
 }
@@ -50,7 +51,11 @@ declare class Menu {
      * @internal Internal constructor
      */
     constructor(root: HTMLElement, options?: MenuOptions, _internal?: InternalOptions);
-    open(focusLastItem?: boolean): void;
+    open(): void;
+    /**
+     * @internal Internal open
+     */
+    open(_initialFocus?: 'first' | 'last'): void;
     close(): void;
     destroy(force?: boolean): Promise<void>;
 }

package/dist/index.js

@@ -2620,6 +2620,7 @@ var Menu = class _Menu {
   };
   #settings;
   #externalTrigger;
+  #isMenubar;
   #isPortal;
   #isSubmenu;
   #triggerElement;
@@ -2652,10 +2653,12 @@ var Menu = class _Menu {
     matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
     const {
       externalTrigger = null,
+      isMenubar = false,
       isPortal = false,
       isSubmenu = false
     } = _internal;
     this.#externalTrigger = externalTrigger;
+    this.#isMenubar = isMenubar;
     this.#isPortal = isPortal;
     this.#isSubmenu = isSubmenu;
     const { selector } = this.#settings;
@@ -2711,8 +2714,8 @@ var Menu = class _Menu {
     }
     this.#initialize();
   }
-  open(focusLastItem = false) {
-    this.#toggle(true, focusLastItem);
+  open(_initialFocus = "first") {
+    this.#toggle(true, { initialFocus: _initialFocus });
   }
   close() {
     this.#toggle(false);
@@ -2912,7 +2915,7 @@ var Menu = class _Menu {
     }
     event.preventDefault();
     event.stopPropagation();
-    this.open(key === "ArrowUp");
+    this.open(key === "ArrowDown" ? "first" : "last");
   };
   #onListKeyDown = (event) => {
     const { shiftKey, key } = event;
@@ -2928,7 +2931,8 @@ var Menu = class _Menu {
       "Enter",
       "Escape",
       " ",
-      ...this.#isSubmenu ? ["ArrowLeft"] : []
+      "ArrowLeft",
+      ...this.#isMenubar ? ["ArrowRight"] : []
     ].includes(key)) {
       return;
     }
@@ -2941,9 +2945,18 @@ var Menu = class _Menu {
     switch (key) {
       case "Tab":
       case "Escape":
-      case "ArrowLeft":
         this.close();
         return;
+      case "ArrowLeft":
+        if (this.#isMenubar) {
+          this.#closeAndMoveFocus("previous");
+        } else if (this.#isSubmenu && this.#triggerElement) {
+          this.close();
+        }
+        return;
+      case "ArrowRight":
+        this.#closeAndMoveFocus("next");
+        return;
       case "Enter":
       case " ":
         active.click();
@@ -2983,7 +2996,7 @@ var Menu = class _Menu {
       i.setAttribute("aria-checked", String(i === item));
     });
   };
-  #toggle(isOpen, isFocusLastItem = false) {
+  #toggle(isOpen, options = {}) {
     if (this.#triggerElement?.ariaExpanded === String(isOpen)) {
       return;
     }
@@ -3008,7 +3021,8 @@ var Menu = class _Menu {
       style.setProperty("display", "block");
       style.setProperty("opacity", "0");
       this.#triggerElement && this.#updatePopover();
-      this.#itemElements.filter(isFocusable3).at(isFocusLastItem ? -1 : 0)?.focus();
+      const { initialFocus = "first" } = options;
+      this.#itemElements.filter(isFocusable3).at(initialFocus === "first" ? 0 : -1)?.focus();
     } else {
       this.#clearSubmenuTimer();
       this.#focusTrigger();
@@ -3073,8 +3087,18 @@ var Menu = class _Menu {
       this.#submenuTimer = void 0;
     }
   }
+  #closeAndMoveFocus(direction) {
+    this.close();
+    requestAnimationFrame(
+      () => (this.#externalTrigger ?? this.#triggerElement)?.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: direction === "previous" ? "ArrowLeft" : "ArrowRight"
+        })
+      )
+    );
+  }
   #containsRoot(element) {
-    return this.#rootElement.contains(element) || this.#listElement?.contains(element);
+    return this.#rootElement.contains(element) || !!this.#listElement?.contains(element);
   }
   #focusTrigger() {
     const active = getActiveElement4();
@@ -3237,7 +3261,7 @@ function isFocusable3(element) {
  * WAI-ARIA compliant menu (menu button) pattern implementation in TypeScript.
  * Supports checkbox item, radio item, and infinitely nested menus.
  *
- * @version 1.4.8
+ * @version 1.5.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/menu",
-  "version": "1.4.8",
+  "version": "1.5.1",
   "description": "WAI-ARIA compliant menu (menu button) pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",