@y14e/menu 1.4.7 → 1.5.0

package/README.md

@@ -10,16 +10,16 @@ npm i @y14e/menu
 
 ```ts
 // npm
-import Menu from '@y14e/menu@1.4.7';
+import Menu from '@y14e/menu@1.5.0';
 // with middleware
-import Menu, { flip, offset, shift } from '@y14e/menu@1.4.7';
+import Menu, { flip, offset, shift } from '@y14e/menu@1.5.0';
 
 // CDNs
-import Menu from 'https://esm.sh/@y14e/menu@1.4.7';
+import Menu from 'https://esm.sh/@y14e/menu@1.5.0';
 // or
-import Menu from 'https://cdn.jsdelivr.net/npm/@y14e/menu@1.4.7/+esm';
+import Menu from 'https://cdn.jsdelivr.net/npm/@y14e/menu@1.5.0/+esm';
 // or
-import Menu from 'https://esm.unpkg.com/@y14e/menu@1.4.7';
+import Menu from 'https://esm.unpkg.com/@y14e/menu@1.5.0';
 ```
 
 ## 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;
@@ -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();
@@ -3077,6 +3090,16 @@ 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);
   }
@@ -3085,8 +3108,7 @@ var Menu = class _Menu {
     if (!(active instanceof HTMLElement)) {
       return;
     }
-    const trigger = this.#externalTrigger ?? this.#triggerElement;
-    this.#containsRoot(active) && trigger && trigger.tabIndex >= 0 && trigger.focus();
+    this.#containsRoot(active) && (this.#externalTrigger ?? this.#triggerElement)?.focus();
   }
   #includesRoot(event) {
     const path = event.composedPath();
@@ -3242,7 +3264,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.7
+ * @version 1.5.0
  * @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.7
+ * @version 1.5.0
  * @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;
 }

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.7
+ * @version 1.5.0
  * @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;
 }

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;
@@ -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();
@@ -3073,6 +3086,16 @@ 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);
   }
@@ -3081,8 +3104,7 @@ var Menu = class _Menu {
     if (!(active instanceof HTMLElement)) {
       return;
     }
-    const trigger = this.#externalTrigger ?? this.#triggerElement;
-    this.#containsRoot(active) && trigger && trigger.tabIndex >= 0 && trigger.focus();
+    this.#containsRoot(active) && (this.#externalTrigger ?? this.#triggerElement)?.focus();
   }
   #includesRoot(event) {
     const path = event.composedPath();
@@ -3238,7 +3260,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.7
+ * @version 1.5.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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