@y14e/menu 1.5.4 → 1.5.6

package/README.md

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

package/dist/index.cjs

@@ -2927,40 +2927,28 @@ var Menu = class _Menu {
       requestAnimationFrame(() => this.#focusTrigger());
       return;
     }
-    if (![
-      "Enter",
-      "Escape",
-      " ",
-      "ArrowLeft",
-      ...this.#isMenubar ? ["ArrowRight"] : []
-    ].includes(key)) {
+    if (!["Enter", "Escape", " ", "ArrowLeft", "ArrowRight"].includes(key)) {
       return;
     }
     event.preventDefault();
     event.stopPropagation();
+    if (key === "Escape" || key === "ArrowLeft" && this.#isSubmenu) {
+      this.close();
+      return;
+    }
     const active = getActiveElement4();
     if (!(active instanceof HTMLElement)) {
       return;
     }
     switch (key) {
-      case "Tab":
-      case "Escape":
-        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();
-        return;
+        break;
+      case "ArrowLeft":
+      case "ArrowRight":
+        this.#dispatchTriggerKeyDown(key);
+        break;
     }
   };
   #onItemPointerEnter = (event) => {
@@ -3012,7 +3000,9 @@ var Menu = class _Menu {
       if (!this.#isPortal || !this.#isSubmenu && this.#triggerElement) {
         const style2 = this.#listElement.style;
         style2.setProperty("position", "fixed");
-        this.#cleanupPortal = createPortal(this.#listElement);
+        if (!this.#cleanupPortal) {
+          this.#cleanupPortal = createPortal(this.#listElement);
+        }
         requestAnimationFrame(() => style2.removeProperty("position"));
       }
       requestAnimationFrame(
@@ -3088,19 +3078,15 @@ var Menu = class _Menu {
       this.#submenuTimer = void 0;
     }
   }
-  #closeAndMoveFocus(direction) {
-    this.close();
-    requestAnimationFrame(
-      () => this.#getTrigger()?.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: direction === "previous" ? "ArrowLeft" : "ArrowRight"
-        })
-      )
-    );
-  }
   #containsRoot(element) {
     return this.#rootElement.contains(element) || !!this.#listElement?.contains(element);
   }
+  #dispatchTriggerKeyDown(key) {
+    this.#isMenubar && this.close();
+    requestAnimationFrame(
+      () => this.#getTrigger()?.dispatchEvent(new KeyboardEvent("keydown", { key }))
+    );
+  }
   #focusTrigger() {
     const active = getActiveElement4();
     if (!(active instanceof HTMLElement)) {
@@ -3264,7 +3250,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.5.4
+ * @version 1.5.6
  * @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.5.4
+ * @version 1.5.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

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.5.4
+ * @version 1.5.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -2923,40 +2923,28 @@ var Menu = class _Menu {
       requestAnimationFrame(() => this.#focusTrigger());
       return;
     }
-    if (![
-      "Enter",
-      "Escape",
-      " ",
-      "ArrowLeft",
-      ...this.#isMenubar ? ["ArrowRight"] : []
-    ].includes(key)) {
+    if (!["Enter", "Escape", " ", "ArrowLeft", "ArrowRight"].includes(key)) {
       return;
     }
     event.preventDefault();
     event.stopPropagation();
+    if (key === "Escape" || key === "ArrowLeft" && this.#isSubmenu) {
+      this.close();
+      return;
+    }
     const active = getActiveElement4();
     if (!(active instanceof HTMLElement)) {
       return;
     }
     switch (key) {
-      case "Tab":
-      case "Escape":
-        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();
-        return;
+        break;
+      case "ArrowLeft":
+      case "ArrowRight":
+        this.#dispatchTriggerKeyDown(key);
+        break;
     }
   };
   #onItemPointerEnter = (event) => {
@@ -3008,7 +2996,9 @@ var Menu = class _Menu {
       if (!this.#isPortal || !this.#isSubmenu && this.#triggerElement) {
         const style2 = this.#listElement.style;
         style2.setProperty("position", "fixed");
-        this.#cleanupPortal = createPortal(this.#listElement);
+        if (!this.#cleanupPortal) {
+          this.#cleanupPortal = createPortal(this.#listElement);
+        }
         requestAnimationFrame(() => style2.removeProperty("position"));
       }
       requestAnimationFrame(
@@ -3084,19 +3074,15 @@ var Menu = class _Menu {
       this.#submenuTimer = void 0;
     }
   }
-  #closeAndMoveFocus(direction) {
-    this.close();
-    requestAnimationFrame(
-      () => this.#getTrigger()?.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: direction === "previous" ? "ArrowLeft" : "ArrowRight"
-        })
-      )
-    );
-  }
   #containsRoot(element) {
     return this.#rootElement.contains(element) || !!this.#listElement?.contains(element);
   }
+  #dispatchTriggerKeyDown(key) {
+    this.#isMenubar && this.close();
+    requestAnimationFrame(
+      () => this.#getTrigger()?.dispatchEvent(new KeyboardEvent("keydown", { key }))
+    );
+  }
   #focusTrigger() {
     const active = getActiveElement4();
     if (!(active instanceof HTMLElement)) {
@@ -3260,7 +3246,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.5.4
+ * @version 1.5.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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