@y14e/menu 1.5.2 → 1.5.4

package/README.md

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

package/dist/index.cjs

@@ -2627,6 +2627,7 @@ var Menu = class _Menu {
   #isMenubar;
   #isPortal;
   #isSubmenu;
+  #popoverRef;
   #triggerElement;
   #listElement;
   #itemElements;
@@ -2635,14 +2636,14 @@ var Menu = class _Menu {
   #radioItemElementsByGroup = /* @__PURE__ */ new WeakMap();
   #arrowElement;
   #controller = null;
+  #cleanupPopover = null;
+  #cleanupPortal = null;
+  #cleanupRovingTabIndex = null;
   #animation = null;
+  #buttons = [];
   #submenus = [];
   #submenuTimer;
   #isDestroyed = false;
-  #cleanupPortal = null;
-  #cleanupRovingTabIndex = null;
-  #cleanupPopover = null;
-  #buttons = [];
   constructor(root, options = {}, _internal = {}) {
     if (!(root instanceof HTMLElement)) {
       throw new TypeError("Invalid root element");
@@ -2669,6 +2670,7 @@ var Menu = class _Menu {
     this.#triggerElement = this.#rootElement.querySelector(
       selector[this.#isSubmenu ? "item" : "trigger"]
     );
+    this.#popoverRef = _internal.popoverRef ?? this.#triggerElement;
     this.#listElement = this.#rootElement.querySelector(
       selector.list
     );
@@ -2752,15 +2754,16 @@ var Menu = class _Menu {
     }
     this.#animation?.cancel();
     this.#animation = null;
-    this.#externalTrigger = null;
+    const trigger = this.#getTrigger();
     const elements = this.#itemElements;
-    if (this.#triggerElement) {
-      elements.push(this.#triggerElement);
+    if (trigger) {
+      elements.push(trigger);
     }
     if (this.#listElement) {
       elements.push(this.#listElement);
     }
     restoreAttributes(elements);
+    this.#externalTrigger = null;
     this.#triggerElement = null;
     this.#listElement = null;
     this.#itemElements.length = 0;
@@ -2786,9 +2789,10 @@ var Menu = class _Menu {
       return;
     }
     saveAttributes([this.#listElement], ["aria-labelledby", "id", "role"]);
-    if (this.#triggerElement) {
+    const trigger = this.#getTrigger();
+    if (trigger && this.#triggerElement) {
       saveAttributes(
-        [this.#triggerElement],
+        [trigger],
         [
           "aria-controls",
           "aria-disabled",
@@ -2801,18 +2805,14 @@ var Menu = class _Menu {
       );
       const id = Math.random().toString(36).slice(-8);
       this.#listElement.id ||= `menu-list-${id}`;
-      addTokenToAttribute(
-        this.#triggerElement,
-        "aria-controls",
-        this.#listElement.id
-      );
-      this.#triggerElement.setAttribute("aria-expanded", "false");
-      this.#triggerElement.setAttribute("aria-haspopup", "true");
-      this.#triggerElement.id ||= `menu-trigger-${id}`;
-      if (!isFocusable3(this.#triggerElement)) {
-        this.#triggerElement.setAttribute("aria-disabled", "true");
-        this.#triggerElement.setAttribute("tabindex", "-1");
-        this.#triggerElement.style.setProperty("pointer-events", "none");
+      addTokenToAttribute(trigger, "aria-controls", this.#listElement.id);
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.setAttribute("aria-haspopup", "true");
+      trigger.id ||= `menu-trigger-${id}`;
+      if (!isFocusable3(trigger)) {
+        trigger.setAttribute("aria-disabled", "true");
+        trigger.setAttribute("tabindex", "-1");
+        trigger.style.setProperty("pointer-events", "none");
       }
       this.#triggerElement.addEventListener("click", this.#onTriggerClick, {
         signal
@@ -2820,11 +2820,7 @@ var Menu = class _Menu {
       this.#triggerElement.addEventListener("keydown", this.#onTriggerKeyDown, {
         signal
       });
-      addTokenToAttribute(
-        this.#listElement,
-        "aria-labelledby",
-        this.#triggerElement.id
-      );
+      addTokenToAttribute(this.#listElement, "aria-labelledby", trigger.id);
       this.#buttons.push(new Button(this.#triggerElement));
     }
     this.#listElement.setAttribute("role", "menu");
@@ -2907,7 +2903,7 @@ var Menu = class _Menu {
   #onTriggerClick = (event) => {
     event.preventDefault();
     this.#toggle(
-      this.#isSubmenu ? event.currentTarget === this.#triggerElement : this.#triggerElement?.ariaExpanded !== "true"
+      this.#isSubmenu ? event.currentTarget === this.#triggerElement : this.#getTrigger()?.ariaExpanded !== "true"
     );
   };
   #onTriggerKeyDown = (event) => {
@@ -3001,10 +2997,11 @@ var Menu = class _Menu {
     });
   };
   #toggle(isOpen, options = {}) {
-    if (this.#triggerElement?.ariaExpanded === String(isOpen)) {
+    const trigger = this.#getTrigger();
+    if (trigger?.ariaExpanded === String(isOpen)) {
       return;
     }
-    this.#triggerElement?.setAttribute("aria-expanded", String(isOpen));
+    trigger?.setAttribute("aria-expanded", String(isOpen));
     if (isOpen) {
       _Menu.#menus.filter((m) => !m.#containsRoot(this.#rootElement)).forEach((menu) => {
         menu.close();
@@ -3094,7 +3091,7 @@ var Menu = class _Menu {
   #closeAndMoveFocus(direction) {
     this.close();
     requestAnimationFrame(
-      () => (this.#externalTrigger ?? this.#triggerElement)?.dispatchEvent(
+      () => this.#getTrigger()?.dispatchEvent(
         new KeyboardEvent("keydown", {
           key: direction === "previous" ? "ArrowLeft" : "ArrowRight"
         })
@@ -3109,7 +3106,10 @@ var Menu = class _Menu {
     if (!(active instanceof HTMLElement)) {
       return;
     }
-    this.#containsRoot(active) && (this.#externalTrigger ?? this.#triggerElement)?.focus();
+    this.#containsRoot(active) && this.#getTrigger()?.focus();
+  }
+  #getTrigger() {
+    return this.#externalTrigger ?? this.#triggerElement;
   }
   #includesRoot(event) {
     const path = event.composedPath();
@@ -3164,15 +3164,15 @@ var Menu = class _Menu {
     }
   }
   #updatePopover() {
-    if (!this.#triggerElement) {
+    if (!this.#popoverRef) {
       return;
     }
     const compute = () => {
-      if (!this.#triggerElement || !this.#listElement) {
+      if (!this.#popoverRef || !this.#listElement) {
         return;
       }
       const options = this.#settings.popover[this.#isSubmenu ? "submenu" : "menu"];
-      computePosition2(this.#triggerElement, this.#listElement, {
+      computePosition2(this.#popoverRef, this.#listElement, {
         ...options,
         placement: options.placement
       }).then(
@@ -3240,10 +3240,9 @@ var Menu = class _Menu {
         }
       );
     };
-    compute();
     if (!this.#cleanupPopover) {
       this.#cleanupPopover = autoUpdate(
-        this.#triggerElement,
+        this.#popoverRef,
         this.#listElement,
         compute
       );
@@ -3265,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.5.2
+ * @version 1.5.4
  * @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.2
+ * @version 1.5.4
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -42,6 +42,7 @@ interface InternalOptions {
     readonly isMenubar?: boolean;
     readonly isPortal?: boolean;
     readonly isSubmenu?: boolean;
+    readonly popoverRef?: HTMLElement | null;
 }
 declare class Menu {
     #private;

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.2
+ * @version 1.5.4
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -42,6 +42,7 @@ interface InternalOptions {
     readonly isMenubar?: boolean;
     readonly isPortal?: boolean;
     readonly isSubmenu?: boolean;
+    readonly popoverRef?: HTMLElement | null;
 }
 declare class Menu {
     #private;

package/dist/index.js

@@ -2623,6 +2623,7 @@ var Menu = class _Menu {
   #isMenubar;
   #isPortal;
   #isSubmenu;
+  #popoverRef;
   #triggerElement;
   #listElement;
   #itemElements;
@@ -2631,14 +2632,14 @@ var Menu = class _Menu {
   #radioItemElementsByGroup = /* @__PURE__ */ new WeakMap();
   #arrowElement;
   #controller = null;
+  #cleanupPopover = null;
+  #cleanupPortal = null;
+  #cleanupRovingTabIndex = null;
   #animation = null;
+  #buttons = [];
   #submenus = [];
   #submenuTimer;
   #isDestroyed = false;
-  #cleanupPortal = null;
-  #cleanupRovingTabIndex = null;
-  #cleanupPopover = null;
-  #buttons = [];
   constructor(root, options = {}, _internal = {}) {
     if (!(root instanceof HTMLElement)) {
       throw new TypeError("Invalid root element");
@@ -2665,6 +2666,7 @@ var Menu = class _Menu {
     this.#triggerElement = this.#rootElement.querySelector(
       selector[this.#isSubmenu ? "item" : "trigger"]
     );
+    this.#popoverRef = _internal.popoverRef ?? this.#triggerElement;
     this.#listElement = this.#rootElement.querySelector(
       selector.list
     );
@@ -2748,15 +2750,16 @@ var Menu = class _Menu {
     }
     this.#animation?.cancel();
     this.#animation = null;
-    this.#externalTrigger = null;
+    const trigger = this.#getTrigger();
     const elements = this.#itemElements;
-    if (this.#triggerElement) {
-      elements.push(this.#triggerElement);
+    if (trigger) {
+      elements.push(trigger);
     }
     if (this.#listElement) {
       elements.push(this.#listElement);
     }
     restoreAttributes(elements);
+    this.#externalTrigger = null;
     this.#triggerElement = null;
     this.#listElement = null;
     this.#itemElements.length = 0;
@@ -2782,9 +2785,10 @@ var Menu = class _Menu {
       return;
     }
     saveAttributes([this.#listElement], ["aria-labelledby", "id", "role"]);
-    if (this.#triggerElement) {
+    const trigger = this.#getTrigger();
+    if (trigger && this.#triggerElement) {
       saveAttributes(
-        [this.#triggerElement],
+        [trigger],
         [
           "aria-controls",
           "aria-disabled",
@@ -2797,18 +2801,14 @@ var Menu = class _Menu {
       );
       const id = Math.random().toString(36).slice(-8);
       this.#listElement.id ||= `menu-list-${id}`;
-      addTokenToAttribute(
-        this.#triggerElement,
-        "aria-controls",
-        this.#listElement.id
-      );
-      this.#triggerElement.setAttribute("aria-expanded", "false");
-      this.#triggerElement.setAttribute("aria-haspopup", "true");
-      this.#triggerElement.id ||= `menu-trigger-${id}`;
-      if (!isFocusable3(this.#triggerElement)) {
-        this.#triggerElement.setAttribute("aria-disabled", "true");
-        this.#triggerElement.setAttribute("tabindex", "-1");
-        this.#triggerElement.style.setProperty("pointer-events", "none");
+      addTokenToAttribute(trigger, "aria-controls", this.#listElement.id);
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.setAttribute("aria-haspopup", "true");
+      trigger.id ||= `menu-trigger-${id}`;
+      if (!isFocusable3(trigger)) {
+        trigger.setAttribute("aria-disabled", "true");
+        trigger.setAttribute("tabindex", "-1");
+        trigger.style.setProperty("pointer-events", "none");
       }
       this.#triggerElement.addEventListener("click", this.#onTriggerClick, {
         signal
@@ -2816,11 +2816,7 @@ var Menu = class _Menu {
       this.#triggerElement.addEventListener("keydown", this.#onTriggerKeyDown, {
         signal
       });
-      addTokenToAttribute(
-        this.#listElement,
-        "aria-labelledby",
-        this.#triggerElement.id
-      );
+      addTokenToAttribute(this.#listElement, "aria-labelledby", trigger.id);
       this.#buttons.push(new Button(this.#triggerElement));
     }
     this.#listElement.setAttribute("role", "menu");
@@ -2903,7 +2899,7 @@ var Menu = class _Menu {
   #onTriggerClick = (event) => {
     event.preventDefault();
     this.#toggle(
-      this.#isSubmenu ? event.currentTarget === this.#triggerElement : this.#triggerElement?.ariaExpanded !== "true"
+      this.#isSubmenu ? event.currentTarget === this.#triggerElement : this.#getTrigger()?.ariaExpanded !== "true"
     );
   };
   #onTriggerKeyDown = (event) => {
@@ -2997,10 +2993,11 @@ var Menu = class _Menu {
     });
   };
   #toggle(isOpen, options = {}) {
-    if (this.#triggerElement?.ariaExpanded === String(isOpen)) {
+    const trigger = this.#getTrigger();
+    if (trigger?.ariaExpanded === String(isOpen)) {
       return;
     }
-    this.#triggerElement?.setAttribute("aria-expanded", String(isOpen));
+    trigger?.setAttribute("aria-expanded", String(isOpen));
     if (isOpen) {
       _Menu.#menus.filter((m) => !m.#containsRoot(this.#rootElement)).forEach((menu) => {
         menu.close();
@@ -3090,7 +3087,7 @@ var Menu = class _Menu {
   #closeAndMoveFocus(direction) {
     this.close();
     requestAnimationFrame(
-      () => (this.#externalTrigger ?? this.#triggerElement)?.dispatchEvent(
+      () => this.#getTrigger()?.dispatchEvent(
         new KeyboardEvent("keydown", {
           key: direction === "previous" ? "ArrowLeft" : "ArrowRight"
         })
@@ -3105,7 +3102,10 @@ var Menu = class _Menu {
     if (!(active instanceof HTMLElement)) {
       return;
     }
-    this.#containsRoot(active) && (this.#externalTrigger ?? this.#triggerElement)?.focus();
+    this.#containsRoot(active) && this.#getTrigger()?.focus();
+  }
+  #getTrigger() {
+    return this.#externalTrigger ?? this.#triggerElement;
   }
   #includesRoot(event) {
     const path = event.composedPath();
@@ -3160,15 +3160,15 @@ var Menu = class _Menu {
     }
   }
   #updatePopover() {
-    if (!this.#triggerElement) {
+    if (!this.#popoverRef) {
       return;
     }
     const compute = () => {
-      if (!this.#triggerElement || !this.#listElement) {
+      if (!this.#popoverRef || !this.#listElement) {
         return;
       }
       const options = this.#settings.popover[this.#isSubmenu ? "submenu" : "menu"];
-      computePosition2(this.#triggerElement, this.#listElement, {
+      computePosition2(this.#popoverRef, this.#listElement, {
         ...options,
         placement: options.placement
       }).then(
@@ -3236,10 +3236,9 @@ var Menu = class _Menu {
         }
       );
     };
-    compute();
     if (!this.#cleanupPopover) {
       this.#cleanupPopover = autoUpdate(
-        this.#triggerElement,
+        this.#popoverRef,
         this.#listElement,
         compute
       );
@@ -3261,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.5.2
+ * @version 1.5.4
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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