@y14e/menu 1.4.4 → 1.4.6

package/README.md

@@ -10,14 +10,14 @@ npm i @y14e/menu
 
 ```ts
 // npm
-import Menu from '@y14e/menu@1.4.4';
+import Menu from '@y14e/menu@1.4.6';
 
 // CDNs
-import Menu from 'https://esm.sh/@y14e/menu@1.4.4';
+import Menu from 'https://esm.sh/@y14e/menu@1.4.6';
 // or
-import Menu from 'https://cdn.jsdelivr.net/npm/@y14e/menu@1.4.4/+esm';
+import Menu from 'https://cdn.jsdelivr.net/npm/@y14e/menu@1.4.6/+esm';
 // or
-import Menu from 'https://esm.unpkg.com/@y14e/menu@1.4.4';
+import Menu from 'https://esm.unpkg.com/@y14e/menu@1.4.6';
 ```
 
 ## Usage

package/dist/index.cjs

@@ -2621,8 +2621,9 @@ var Menu = class _Menu {
     }
   };
   #settings;
-  #isSubmenu;
+  #externalTrigger;
   #isPortal;
+  #isSubmenu;
   #triggerElement;
   #listElement;
   #itemElements;
@@ -2651,9 +2652,14 @@ var Menu = class _Menu {
     this.#defaults = this.#mergeOptions(this.#defaults, _Menu.defaults);
     this.#settings = this.#mergeOptions(this.#defaults, options);
     matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
-    const { isSubmenu = false, isPortal = false } = _internal;
-    this.#isSubmenu = isSubmenu;
+    const {
+      externalTrigger = null,
+      isPortal = false,
+      isSubmenu = false
+    } = _internal;
+    this.#externalTrigger = externalTrigger;
     this.#isPortal = isPortal;
+    this.#isSubmenu = isSubmenu;
     const { selector } = this.#settings;
     this.#triggerElement = this.#rootElement.querySelector(
       selector[this.#isSubmenu ? "item" : "trigger"]
@@ -2741,6 +2747,7 @@ var Menu = class _Menu {
     }
     this.#animation?.cancel();
     this.#animation = null;
+    this.#externalTrigger = null;
     const elements = this.#itemElements;
     if (this.#triggerElement) {
       elements.push(this.#triggerElement);
@@ -2831,8 +2838,8 @@ var Menu = class _Menu {
       if (parent?.querySelector(this.#settings.selector.list)) {
         this.#submenus.push(
           new _Menu(parent, this.#settings, {
-            isSubmenu: true,
-            isPortal: !!this.#triggerElement
+            isPortal: !!this.#triggerElement,
+            isSubmenu: true
           })
         );
       } else if (item2.hasAttribute("disabled") || item2.tabIndex < 0) {
@@ -2859,8 +2866,6 @@ var Menu = class _Menu {
       item2.addEventListener("click", this.#onRadioItemClick, { signal });
     });
     this.#resetTabIndex();
-    !this.#isSubmenu && this.#rootElement.setAttribute("data-menu-initialized", "");
-    _Menu.#menus.push(this);
     const { item, list } = this.#settings.selector;
     this.#cleanupRovingTabIndex = createRovingTabIndex(this.#listElement, {
       direction: "vertical",
@@ -2868,6 +2873,8 @@ var Menu = class _Menu {
       typeahead: true,
       wrap: true
     });
+    _Menu.#menus.push(this);
+    !this.#isSubmenu && this.#rootElement.setAttribute("data-menu-initialized", "");
   }
   #onOutsidePointerDown = (event) => {
     if (!this.#triggerElement || this.#includesRoot(event)) {
@@ -2916,7 +2923,7 @@ var Menu = class _Menu {
     }
     if (shiftKey && key === "Tab") {
       this.close();
-      requestAnimationFrame(() => this.#triggerElement?.focus());
+      requestAnimationFrame(() => this.#focusTrigger());
       return;
     }
     if (![
@@ -2990,7 +2997,7 @@ var Menu = class _Menu {
       if (!this.#listElement) {
         return;
       }
-      if (!this.#isSubmenu && this.#triggerElement || !this.#isPortal) {
+      if (!this.#isPortal || !this.#isSubmenu && this.#triggerElement) {
         const style2 = this.#listElement.style;
         style2.setProperty("position", "fixed");
         this.#cleanupPortal = createPortal(this.#listElement);
@@ -3006,11 +3013,7 @@ var Menu = class _Menu {
       this.#itemElements.filter(isFocusable3).at(isFocusLastItem ? -1 : 0)?.focus();
     } else {
       this.#clearSubmenuTimer();
-      const active = getActiveElement4();
-      if (!(active instanceof HTMLElement)) {
-        return;
-      }
-      this.#triggerElement && this.#containsRoot(active) && this.#triggerElement.focus();
+      this.#focusTrigger();
     }
     if (!this.#triggerElement) {
       return;
@@ -3075,6 +3078,14 @@ var Menu = class _Menu {
   #containsRoot(element) {
     return this.#rootElement.contains(element) || this.#listElement?.contains(element);
   }
+  #focusTrigger() {
+    const active = getActiveElement4();
+    if (!(active instanceof HTMLElement)) {
+      return;
+    }
+    const trigger = this.#externalTrigger ?? this.#triggerElement;
+    this.#containsRoot(active) && trigger && trigger.tabIndex >= 0 && trigger.focus();
+  }
   #includesRoot(event) {
     const path = event.composedPath();
     if (!this.#listElement) {
@@ -3229,7 +3240,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.4
+ * @version 1.4.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -5,7 +5,7 @@ import { Middleware, Placement } 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.4
+ * @version 1.4.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -37,8 +37,9 @@ interface MenuPopoverOptions {
     readonly placement?: Placement | string;
 }
 interface InternalOptions {
-    readonly isSubmenu?: boolean;
+    readonly externalTrigger?: HTMLElement;
     readonly isPortal?: boolean;
+    readonly isSubmenu?: boolean;
 }
 declare class Menu {
     #private;

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { Middleware, Placement } 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.4
+ * @version 1.4.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -37,8 +37,9 @@ interface MenuPopoverOptions {
     readonly placement?: Placement | string;
 }
 interface InternalOptions {
-    readonly isSubmenu?: boolean;
+    readonly externalTrigger?: HTMLElement;
     readonly isPortal?: boolean;
+    readonly isSubmenu?: boolean;
 }
 declare class Menu {
     #private;

package/dist/index.js

@@ -2619,8 +2619,9 @@ var Menu = class _Menu {
     }
   };
   #settings;
-  #isSubmenu;
+  #externalTrigger;
   #isPortal;
+  #isSubmenu;
   #triggerElement;
   #listElement;
   #itemElements;
@@ -2649,9 +2650,14 @@ var Menu = class _Menu {
     this.#defaults = this.#mergeOptions(this.#defaults, _Menu.defaults);
     this.#settings = this.#mergeOptions(this.#defaults, options);
     matchMedia("(prefers-reduced-motion: reduce)").matches && Object.assign(this.#settings.animation, { duration: 0 });
-    const { isSubmenu = false, isPortal = false } = _internal;
-    this.#isSubmenu = isSubmenu;
+    const {
+      externalTrigger = null,
+      isPortal = false,
+      isSubmenu = false
+    } = _internal;
+    this.#externalTrigger = externalTrigger;
     this.#isPortal = isPortal;
+    this.#isSubmenu = isSubmenu;
     const { selector } = this.#settings;
     this.#triggerElement = this.#rootElement.querySelector(
       selector[this.#isSubmenu ? "item" : "trigger"]
@@ -2739,6 +2745,7 @@ var Menu = class _Menu {
     }
     this.#animation?.cancel();
     this.#animation = null;
+    this.#externalTrigger = null;
     const elements = this.#itemElements;
     if (this.#triggerElement) {
       elements.push(this.#triggerElement);
@@ -2829,8 +2836,8 @@ var Menu = class _Menu {
       if (parent?.querySelector(this.#settings.selector.list)) {
         this.#submenus.push(
           new _Menu(parent, this.#settings, {
-            isSubmenu: true,
-            isPortal: !!this.#triggerElement
+            isPortal: !!this.#triggerElement,
+            isSubmenu: true
           })
         );
       } else if (item2.hasAttribute("disabled") || item2.tabIndex < 0) {
@@ -2857,8 +2864,6 @@ var Menu = class _Menu {
       item2.addEventListener("click", this.#onRadioItemClick, { signal });
     });
     this.#resetTabIndex();
-    !this.#isSubmenu && this.#rootElement.setAttribute("data-menu-initialized", "");
-    _Menu.#menus.push(this);
     const { item, list } = this.#settings.selector;
     this.#cleanupRovingTabIndex = createRovingTabIndex(this.#listElement, {
       direction: "vertical",
@@ -2866,6 +2871,8 @@ var Menu = class _Menu {
       typeahead: true,
       wrap: true
     });
+    _Menu.#menus.push(this);
+    !this.#isSubmenu && this.#rootElement.setAttribute("data-menu-initialized", "");
   }
   #onOutsidePointerDown = (event) => {
     if (!this.#triggerElement || this.#includesRoot(event)) {
@@ -2914,7 +2921,7 @@ var Menu = class _Menu {
     }
     if (shiftKey && key === "Tab") {
       this.close();
-      requestAnimationFrame(() => this.#triggerElement?.focus());
+      requestAnimationFrame(() => this.#focusTrigger());
       return;
     }
     if (![
@@ -2988,7 +2995,7 @@ var Menu = class _Menu {
       if (!this.#listElement) {
         return;
       }
-      if (!this.#isSubmenu && this.#triggerElement || !this.#isPortal) {
+      if (!this.#isPortal || !this.#isSubmenu && this.#triggerElement) {
         const style2 = this.#listElement.style;
         style2.setProperty("position", "fixed");
         this.#cleanupPortal = createPortal(this.#listElement);
@@ -3004,11 +3011,7 @@ var Menu = class _Menu {
       this.#itemElements.filter(isFocusable3).at(isFocusLastItem ? -1 : 0)?.focus();
     } else {
       this.#clearSubmenuTimer();
-      const active = getActiveElement4();
-      if (!(active instanceof HTMLElement)) {
-        return;
-      }
-      this.#triggerElement && this.#containsRoot(active) && this.#triggerElement.focus();
+      this.#focusTrigger();
     }
     if (!this.#triggerElement) {
       return;
@@ -3073,6 +3076,14 @@ var Menu = class _Menu {
   #containsRoot(element) {
     return this.#rootElement.contains(element) || this.#listElement?.contains(element);
   }
+  #focusTrigger() {
+    const active = getActiveElement4();
+    if (!(active instanceof HTMLElement)) {
+      return;
+    }
+    const trigger = this.#externalTrigger ?? this.#triggerElement;
+    this.#containsRoot(active) && trigger && trigger.tabIndex >= 0 && trigger.focus();
+  }
   #includesRoot(event) {
     const path = event.composedPath();
     if (!this.#listElement) {
@@ -3227,7 +3238,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.4
+ * @version 1.4.6
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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