@rogieking/figui3 8.9.6 → 8.9.8

package/fig.js

@@ -18796,6 +18796,7 @@ class FigMenu extends HTMLElement {
   #boundPopupClick;
   #boundMenuKeydown;
   #boundPopupClose;
+  #boundPopupToggle;
   #boundSyncOverflow = this.#syncOverflow.bind(this);
   #focusedIndex = -1;
 
@@ -18810,6 +18811,7 @@ class FigMenu extends HTMLElement {
     this.#boundPopupClick = this.#handlePopupClick.bind(this);
     this.#boundMenuKeydown = this.#handleMenuKeydown.bind(this);
     this.#boundPopupClose = this.#handlePopupClose.bind(this);
+    this.#boundPopupToggle = this.#handlePopupToggle.bind(this);
   }
 
   get value() {
@@ -18857,10 +18859,12 @@ class FigMenu extends HTMLElement {
     }
     if (this.#popup) {
       this.#popup.removeEventListener("close", this.#boundPopupClose);
+      this.#popup.removeEventListener("toggle", this.#boundPopupToggle);
+      this.#popup.open = false;
       const items = Array.from(
         this.#panel?.querySelectorAll(FIG_MENU_CHILD_SELECTOR) ?? [],
       );
-      for (const item of items) this.insertBefore(item, this.#popup);
+      for (const item of items) this.append(item);
       this.#popup.remove();
       this.#popup = null;
       this.#panel = null;
@@ -18911,12 +18915,16 @@ class FigMenu extends HTMLElement {
   }
 
   #createPopup() {
+    const supportsPopover =
+      typeof HTMLElement !== "undefined" &&
+      "popover" in HTMLElement.prototype;
     this.#popup = document.createElement("dialog", { is: "fig-popup" });
     this.#popup.setAttribute("is", "fig-popup");
     this.#popup.classList.add("fig-menu-popup");
     this.#popup.setAttribute("theme", "menu");
     this.#popup.setAttribute("role", "menu");
     this.#popup.setAttribute("id", this.#popup.getAttribute("id") || figUniqueId());
+    if (supportsPopover) this.#popup.setAttribute("popover", "manual");
 
     const position = this.getAttribute("position") || "bottom left";
     this.#popup.setAttribute("position", position);
@@ -18936,7 +18944,26 @@ class FigMenu extends HTMLElement {
     this.#panel.setAttribute("role", "presentation");
     this.#popup.appendChild(this.#panel);
     this.#popup.addEventListener("close", this.#boundPopupClose);
-    this.appendChild(this.#popup);
+    this.#popup.addEventListener("toggle", this.#boundPopupToggle);
+
+    if (supportsPopover) {
+      (figGetOverlayRoot() ?? document.body).append(this.#popup);
+      return;
+    }
+
+    const openDialogs = [];
+    let ancestor = this.parentElement;
+    while (ancestor) {
+      if (ancestor instanceof HTMLDialogElement && ancestor.open) {
+        openDialogs.push(ancestor);
+      }
+      ancestor = ancestor.parentElement;
+    }
+    if (openDialogs.length === 1) {
+      openDialogs[0].append(this.#popup);
+    } else {
+      (figGetOverlayRoot() ?? document.body).append(this.#popup);
+    }
   }
 
   #moveItemsToPopup() {
@@ -19115,7 +19142,7 @@ class FigMenu extends HTMLElement {
     if (this.#usesContextMenuTrigger()) return;
     if (this.#isDisabled()) return;
     e.stopPropagation();
-    const popupShowing = this.#popup?.matches?.(":open") ?? false;
+    const popupShowing = this.#isPopupShowing();
     if (this.open && !popupShowing) {
       this.removeAttribute("open");
     }
@@ -19178,7 +19205,7 @@ class FigMenu extends HTMLElement {
     if (this.#isDisabled()) return;
     if (e.currentTarget === document && e.key !== "Escape") return;
     if (e.currentTarget === this && this.#popup?.contains(e.target)) return;
-    if (!this.open || !this.#popup?.matches?.(":open")) {
+    if (!this.open || !this.#isPopupShowing()) {
       if (
         this.#trigger?.contains(e.target) &&
         (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")
@@ -19248,6 +19275,17 @@ class FigMenu extends HTMLElement {
     this.#focusedIndex = -1;
   }
 
+  #handlePopupToggle(event) {
+    if (event.newState === "closed") this.#handlePopupClose();
+  }
+
+  #isPopupShowing() {
+    return Boolean(
+      this.#popup?.matches?.(":open") ||
+        this.#popup?.matches?.(":popover-open"),
+    );
+  }
+
   #selectItem(item) {
     const value = item.getAttribute("value") || item.textContent.trim();
     this.setAttribute("value", value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "8.9.6",
+  "version": "8.9.8",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",