@y14e/menu 1.5.3 → 1.5.5

package/README.md

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

package/dist/index.cjs

@@ -2627,6 +2627,7 @@ var Menu = class _Menu {
   #isMenubar;
   #isPortal;
   #isSubmenu;
+  #popoverRef;
   #triggerElement;
   #listElement;
   #itemElements;
@@ -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
     );
@@ -3010,7 +3012,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(
@@ -3162,15 +3166,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(
@@ -3238,10 +3242,9 @@ var Menu = class _Menu {
         }
       );
     };
-    compute();
     if (!this.#cleanupPopover) {
       this.#cleanupPopover = autoUpdate(
-        this.#triggerElement,
+        this.#popoverRef,
         this.#listElement,
         compute
       );
@@ -3263,7 +3266,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.3
+ * @version 1.5.5
  * @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.3
+ * @version 1.5.5
  * @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.3
+ * @version 1.5.5
  * @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;
@@ -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
     );
@@ -3006,7 +3008,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(
@@ -3158,15 +3162,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(
@@ -3234,10 +3238,9 @@ var Menu = class _Menu {
         }
       );
     };
-    compute();
     if (!this.#cleanupPopover) {
       this.#cleanupPopover = autoUpdate(
-        this.#triggerElement,
+        this.#popoverRef,
         this.#listElement,
         compute
       );
@@ -3259,7 +3262,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.3
+ * @version 1.5.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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