@y14e/menu 1.5.2 → 1.5.3

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.3';
 // with middleware
-import Menu, { flip, offset, shift } from '@y14e/menu@1.5.2';
+import Menu, { flip, offset, shift } from '@y14e/menu@1.5.3';
 
 // CDNs
-import Menu from 'https://esm.sh/@y14e/menu@1.5.2';
+import Menu from 'https://esm.sh/@y14e/menu@1.5.3';
 // 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.3/+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.3';
 ```
 
 ## Usage

package/dist/index.cjs

@@ -2635,14 +2635,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");
@@ -2752,15 +2752,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 +2787,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 +2803,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 +2818,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 +2901,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 +2995,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 +3089,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 +3104,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();
@@ -3265,7 +3263,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.3
  * @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.3
  * @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.2
+ * @version 1.5.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -2631,14 +2631,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");
@@ -2748,15 +2748,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 +2783,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 +2799,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 +2814,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 +2897,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 +2991,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 +3085,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 +3100,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();
@@ -3261,7 +3259,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.3
  * @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.3",
   "description": "WAI-ARIA compliant menu (menu button) pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",