@rogieking/figui3 6.6.4 → 6.6.6

package/fig.js

@@ -164,6 +164,19 @@ function figUniqueId() {
   return Date.now().toString(36) + Math.random().toString(36).substring(2);
 }
 
+/** Zero-size portal for fixed overlays so they never affect body layout metrics. */
+function figGetOverlayRoot() {
+  if (!document.body) return null;
+  const attr = "data-figui-overlay-root";
+  let root = document.body.querySelector(`:scope > [${attr}]`);
+  if (!root) {
+    root = document.createElement("div");
+    root.setAttribute(attr, "");
+    document.body.append(root);
+  }
+  return root;
+}
+
 let _figZCounter = 10000;
 function figGetHighestZIndex() {
   return _figZCounter++;
@@ -734,7 +747,9 @@ customElements.define("fig-dropdown", FigDropdown);
  */
 class FigTooltip extends HTMLElement {
   static #lastShownAt = 0;
+  static #lastShownInstance = null;
   static #warmupWindow = 500;
+  static #hoverOpen = null;
 
   #boundHideOnChromeOpen;
   #boundHidePopupOutsideClick;
@@ -747,6 +762,8 @@ class FigTooltip extends HTMLElement {
   #boundHandleDialogClose;
   #boundHandleEscape;
   #parentDialog = null;
+  #triggerEl = null;
+  #childObserver = null;
   #touchTimeout;
   #isTouching = false;
   constructor() {
@@ -772,6 +789,7 @@ class FigTooltip extends HTMLElement {
   }
   connectedCallback() {
     this.setup();
+    this.#bindTriggerListeners();
     this.setupEventListeners();
     this.#parentDialog = this.closest("dialog");
     if (this.#parentDialog) {
@@ -782,6 +800,8 @@ class FigTooltip extends HTMLElement {
   disconnectedCallback() {
     clearTimeout(this.timeout);
     this.destroy();
+    this.#unbindTriggerListeners();
+    this.#teardownChildObserver();
     document.removeEventListener(
       "mousedown",
       this.#boundHideOnChromeOpen,
@@ -801,19 +821,79 @@ class FigTooltip extends HTMLElement {
     }
 
     clearTimeout(this.#touchTimeout);
+    if (FigTooltip.#hoverOpen === this) FigTooltip.#hoverOpen = null;
+  }
+
+  #getTrigger() {
+    return this.firstElementChild;
+  }
+
+  #teardownChildObserver() {
+    this.#childObserver?.disconnect();
+    this.#childObserver = null;
+  }
+
+  #bindTriggerListeners() {
+    this.#unbindTriggerListeners();
+    if (this.action === "manual") return;
+
+    const trigger = this.#getTrigger();
+    if (!trigger) {
+      if (!this.#childObserver && typeof MutationObserver !== "undefined") {
+        this.#childObserver = new MutationObserver(() => {
+          if (this.#getTrigger()) {
+            this.#teardownChildObserver();
+            this.#bindTriggerListeners();
+          }
+        });
+        this.#childObserver.observe(this, { childList: true });
+      }
+      return;
+    }
+
+    this.#triggerEl = trigger;
     if (this.action === "hover") {
-      this.removeEventListener("pointerenter", this.#boundShowDelayedPopup);
-      this.removeEventListener("pointerleave", this.#boundHandlePointerLeave);
-      this.removeEventListener("touchstart", this.#boundHandleTouchStart);
-      this.removeEventListener("touchmove", this.#boundHandleTouchMove);
-      this.removeEventListener("touchend", this.#boundHandleTouchEnd);
-      this.removeEventListener("touchcancel", this.#boundHandleTouchCancel);
+      if (!this.isTouchDevice()) {
+        trigger.addEventListener("pointerenter", this.#boundShowDelayedPopup);
+        trigger.addEventListener("pointerleave", this.#boundHandlePointerLeave);
+      }
+      trigger.addEventListener("touchstart", this.#boundHandleTouchStart, {
+        passive: true,
+      });
+      trigger.addEventListener("touchmove", this.#boundHandleTouchMove, {
+        passive: true,
+      });
+      trigger.addEventListener("touchend", this.#boundHandleTouchEnd, {
+        passive: true,
+      });
+      trigger.addEventListener("touchcancel", this.#boundHandleTouchCancel, {
+        passive: true,
+      });
     } else if (this.action === "click") {
-      this.removeEventListener("click", this.#boundShowDelayedPopup);
-      this.removeEventListener("touchstart", this.#boundShowDelayedPopup);
+      trigger.addEventListener("click", this.#boundShowDelayedPopup);
+      trigger.addEventListener("touchstart", this.#boundShowDelayedPopup, {
+        passive: true,
+      });
     }
   }
 
+  #unbindTriggerListeners() {
+    const trigger = this.#triggerEl;
+    if (!trigger) return;
+    if (this.action === "hover") {
+      trigger.removeEventListener("pointerenter", this.#boundShowDelayedPopup);
+      trigger.removeEventListener("pointerleave", this.#boundHandlePointerLeave);
+      trigger.removeEventListener("touchstart", this.#boundHandleTouchStart);
+      trigger.removeEventListener("touchmove", this.#boundHandleTouchMove);
+      trigger.removeEventListener("touchend", this.#boundHandleTouchEnd);
+      trigger.removeEventListener("touchcancel", this.#boundHandleTouchCancel);
+    } else if (this.action === "click") {
+      trigger.removeEventListener("click", this.#boundShowDelayedPopup);
+      trigger.removeEventListener("touchstart", this.#boundShowDelayedPopup);
+    }
+    this.#triggerEl = null;
+  }
+
   setup() {
     this.style.display = "contents";
   }
@@ -859,13 +939,13 @@ class FigTooltip extends HTMLElement {
     // - Without popover support, fall back to today's behavior: nearest open
     //   <dialog> ancestor if present, else document.body.
     if (supportsPopover) {
-      document.body.append(this.popup);
+      (figGetOverlayRoot() ?? document.body).append(this.popup);
     } else {
       const parentDialog = this.closest("dialog");
       if (parentDialog && parentDialog.open) {
         parentDialog.append(this.popup);
       } else {
-        document.body.append(this.popup);
+        (figGetOverlayRoot() ?? document.body).append(this.popup);
       }
     }
 
@@ -876,6 +956,7 @@ class FigTooltip extends HTMLElement {
 
   destroy() {
     if (this.popup) {
+      this.popup.hidePopup?.();
       this.popup.remove();
       this.popup = null;
     }
@@ -896,30 +977,8 @@ class FigTooltip extends HTMLElement {
   }
 
   setupEventListeners() {
-    if (this.action === "manual") return;
-    if (this.action === "hover") {
-      if (!this.isTouchDevice()) {
-        this.addEventListener("pointerenter", this.#boundShowDelayedPopup);
-        this.addEventListener("pointerleave", this.#boundHandlePointerLeave);
-      }
-      this.addEventListener("touchstart", this.#boundHandleTouchStart, {
-        passive: true,
-      });
-      this.addEventListener("touchmove", this.#boundHandleTouchMove, {
-        passive: true,
-      });
-      this.addEventListener("touchend", this.#boundHandleTouchEnd, {
-        passive: true,
-      });
-      this.addEventListener("touchcancel", this.#boundHandleTouchCancel, {
-        passive: true,
-      });
-    } else if (this.action === "click") {
-      this.addEventListener("click", this.#boundShowDelayedPopup);
+    if (this.action === "click") {
       document.body.addEventListener("click", this.#boundHidePopupOutsideClick);
-      this.addEventListener("touchstart", this.#boundShowDelayedPopup, {
-        passive: true,
-      });
     }
 
     document.addEventListener("mousedown", this.#boundHideOnChromeOpen, true);
@@ -932,17 +991,27 @@ class FigTooltip extends HTMLElement {
 
   showDelayedPopup() {
     if (this.#showPersisted) return;
-    this.render();
     clearTimeout(this.timeout);
     const warm =
+      FigTooltip.#lastShownInstance === this &&
       Date.now() - FigTooltip.#lastShownAt < FigTooltip.#warmupWindow;
     const effectiveDelay = warm ? 0 : this.delay;
-    this.timeout = setTimeout(this.showPopup.bind(this), effectiveDelay);
+    this.timeout = setTimeout(() => {
+      this.render();
+      this.showPopup();
+    }, effectiveDelay);
   }
 
   showPopup() {
     if (this.#parentDialog && !this.#parentDialog.open) return;
     if (!this.firstElementChild) return;
+    if (
+      this.action === "hover" &&
+      FigTooltip.#hoverOpen &&
+      FigTooltip.#hoverOpen !== this
+    ) {
+      FigTooltip.#hoverOpen.hidePopup();
+    }
     if (!this.popup) this.render();
     // Keep anchor in sync in case the trigger child was swapped between
     // creation and show.
@@ -950,7 +1019,9 @@ class FigTooltip extends HTMLElement {
     this.popup.open = true;
 
     this.isOpen = true;
+    if (this.action === "hover") FigTooltip.#hoverOpen = this;
     FigTooltip.#lastShownAt = Date.now();
+    FigTooltip.#lastShownInstance = this;
   }
 
   hidePopup() {
@@ -962,7 +1033,7 @@ class FigTooltip extends HTMLElement {
     }
 
     this.isOpen = false;
-    FigTooltip.#lastShownAt = Date.now();
+    if (FigTooltip.#hoverOpen === this) FigTooltip.#hoverOpen = null;
   }
 
   hidePopupOutsideClick(event) {
@@ -1142,13 +1213,13 @@ class FigTooltip extends HTMLElement {
       popup.append(content);
 
       if (supportsPopover) {
-        document.body.append(popup);
+        (figGetOverlayRoot() ?? document.body).append(popup);
       } else {
         const parentDialog = anchor.closest?.("dialog");
         if (parentDialog && parentDialog.open) {
           parentDialog.append(popup);
         } else {
-          document.body.append(popup);
+          (figGetOverlayRoot() ?? document.body).append(popup);
         }
       }
 
@@ -3026,23 +3097,6 @@ class FigPopup extends HTMLDialogElement {
     );
   }
 
-  updatePointerVisibility(anchorRect, popupRect, left, top, placementSide) {
-    if (!this.tracksAnchorBeak()) return;
-    if (this.getAttribute("pointer") === "false") return;
-
-    if (
-      anchorRect &&
-      !this.canPointAtAnchor(anchorRect, popupRect, left, top, placementSide)
-    ) {
-      this.setAttribute("pointer", "false");
-      return;
-    }
-
-    if (this.hasAttribute("pointer")) {
-      this.removeAttribute("pointer");
-    }
-  }
-
   updatePopoverBeak(anchorRect, popupRect, left, top, placementSide) {
     if (!this.tracksAnchorBeak() || !anchorRect) {
       this.style.removeProperty("--fig-popup-beak-offset");
@@ -3110,6 +3164,23 @@ class FigPopup extends HTMLDialogElement {
     return this.clampToViewport(coords, popupRect, m);
   }
 
+  primaryAxisOverflowPenalty(coords, popupRect, m, placementSide) {
+    const bounds = this.getViewportBounds(m);
+    let overflow = 0;
+
+    if (placementSide === "top") {
+      overflow = Math.max(0, bounds.minTop - coords.top);
+    } else if (placementSide === "bottom") {
+      overflow = Math.max(0, coords.top + popupRect.height - bounds.maxBottom);
+    } else if (placementSide === "left") {
+      overflow = Math.max(0, bounds.minLeft - coords.left);
+    } else if (placementSide === "right") {
+      overflow = Math.max(0, coords.left + popupRect.width - bounds.maxRight);
+    }
+
+    return overflow > 0 ? 1000 + overflow : 0;
+  }
+
   placementScore(anchorRect, popupRect, coords, placementSide, m) {
     const resolved = this.resolveCoordsAtViewport(
       anchorRect,
@@ -3119,6 +3190,12 @@ class FigPopup extends HTMLDialogElement {
       m,
     );
     let score = this.overflowScore(resolved, popupRect, m);
+    score += this.primaryAxisOverflowPenalty(
+      coords,
+      popupRect,
+      m,
+      placementSide,
+    );
     if (
       anchorRect &&
       !this.canPointAtAnchor(
@@ -3150,13 +3227,6 @@ class FigPopup extends HTMLDialogElement {
     );
     this.style.left = `${resolved.left}px`;
     this.style.top = `${resolved.top}px`;
-    this.updatePointerVisibility(
-      anchorRect,
-      popupRect,
-      resolved.left,
-      resolved.top,
-      placementSide,
-    );
     this.updatePopoverBeak(
       anchorRect,
       popupRect,
@@ -3167,7 +3237,7 @@ class FigPopup extends HTMLDialogElement {
   }
 
   positionPopup() {
-    if (!this.open || !this.matches?.(":open")) return;
+    if (!this.open) return;
 
     const popupRect = this.getBoundingClientRect();
     const offset = this.parseOffset();
@@ -3259,7 +3329,9 @@ class FigPopup extends HTMLDialogElement {
   }
 
   queueReposition() {
-    if (!this.open || !this.shouldAutoReposition()) return;
+    if (!this.open || !this.isPopupDisplayed() || !this.shouldAutoReposition()) {
+      return;
+    }
     if (this._rafId !== null) return;
 
     this._rafId = requestAnimationFrame(() => {
@@ -3272,6 +3344,14 @@ class FigPopup extends HTMLDialogElement {
     if (!(this.drag && this._wasDragged)) return true;
     return !this.resolveAnchor();
   }
+
+  isPopupDisplayed() {
+    return Boolean(
+      this._isPopupActive ||
+        this.matches?.(":open") ||
+        this.matches?.(":popover-open"),
+    );
+  }
 }
 figDefineCustomizedBuiltIn("fig-popup", FigPopup, { extends: "dialog" });
 

package/package.json

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