@rogieking/figui3 6.6.6 → 6.7.1

package/fig.js

@@ -747,9 +747,10 @@ customElements.define("fig-dropdown", FigDropdown);
  */
 class FigTooltip extends HTMLElement {
   static #lastShownAt = 0;
-  static #lastShownInstance = null;
-  static #warmupWindow = 500;
+  static #lastHiddenAt = 0;
+  static #warmupWindow = 1000;
   static #hoverOpen = null;
+  static #documentExitListenersReady = false;
 
   #boundHideOnChromeOpen;
   #boundHidePopupOutsideClick;
@@ -788,6 +789,7 @@ class FigTooltip extends HTMLElement {
     };
   }
   connectedCallback() {
+    FigTooltip.#ensureDocumentExitListeners();
     this.setup();
     this.#bindTriggerListeners();
     this.setupEventListeners();
@@ -989,17 +991,29 @@ class FigTooltip extends HTMLElement {
     return this.hasAttribute("show") && this.getAttribute("show") !== "false";
   }
 
+  #isWarmSession() {
+    const now = Date.now();
+    const windowMs = FigTooltip.#warmupWindow;
+    if (this.action === "hover" && FigTooltip.#hoverOpen) return true;
+    if (FigTooltip.#lastShownAt && now - FigTooltip.#lastShownAt < windowMs)
+      return true;
+    if (FigTooltip.#lastHiddenAt && now - FigTooltip.#lastHiddenAt < windowMs)
+      return true;
+    return false;
+  }
+
   showDelayedPopup() {
     if (this.#showPersisted) return;
     clearTimeout(this.timeout);
-    const warm =
-      FigTooltip.#lastShownInstance === this &&
-      Date.now() - FigTooltip.#lastShownAt < FigTooltip.#warmupWindow;
-    const effectiveDelay = warm ? 0 : this.delay;
+    if (this.#isWarmSession()) {
+      this.render();
+      this.showPopup();
+      return;
+    }
     this.timeout = setTimeout(() => {
       this.render();
       this.showPopup();
-    }, effectiveDelay);
+    }, this.delay);
   }
 
   showPopup() {
@@ -1021,19 +1035,20 @@ class FigTooltip extends HTMLElement {
     this.isOpen = true;
     if (this.action === "hover") FigTooltip.#hoverOpen = this;
     FigTooltip.#lastShownAt = Date.now();
-    FigTooltip.#lastShownInstance = this;
   }
 
   hidePopup() {
     if (this.#showPersisted) return;
     clearTimeout(this.timeout);
     clearTimeout(this.#touchTimeout);
+    const wasShowing = this.isOpen;
     if (this.popup) {
       this.destroy();
     }
 
     this.isOpen = false;
     if (FigTooltip.#hoverOpen === this) FigTooltip.#hoverOpen = null;
+    if (wasShowing) FigTooltip.#lastHiddenAt = Date.now();
   }
 
   hidePopupOutsideClick(event) {
@@ -1184,6 +1199,48 @@ class FigTooltip extends HTMLElement {
     }
   }
 
+  static #ensureDocumentExitListeners() {
+    if (FigTooltip.#documentExitListenersReady) return;
+    FigTooltip.#documentExitListenersReady = true;
+
+    const handlePointerLeftDocument = () => {
+      FigTooltip.#dismissHoverTooltipsOnDocumentExit();
+    };
+
+    document.documentElement.addEventListener(
+      "mouseleave",
+      handlePointerLeftDocument,
+    );
+    document.addEventListener("mouseout", (event) => {
+      if (event.relatedTarget) return;
+      handlePointerLeftDocument();
+    });
+
+    // Same-origin embed: leaving the iframe element (e.g. into a parent dialog).
+    try {
+      const frame = window.frameElement;
+      if (frame) {
+        frame.addEventListener("mouseleave", handlePointerLeftDocument);
+      }
+    } catch {}
+
+    window.addEventListener("message", (event) => {
+      if (event?.data?.type !== "figui:dismiss-tooltips") return;
+      if (window.parent !== window && event.source !== window.parent) return;
+      handlePointerLeftDocument();
+    });
+  }
+
+  static #dismissHoverTooltipsOnDocumentExit() {
+    for (const node of document.querySelectorAll("fig-tooltip")) {
+      if (!(node instanceof FigTooltip)) continue;
+      if (node.action !== "hover") continue;
+      if (node.hasAttribute("show") && node.getAttribute("show") !== "false")
+        continue;
+      if (node.isOpen || node.timeout) node.hidePopup();
+    }
+  }
+
   static #programmatic = new WeakMap();
 
   static show(anchor, text, options = {}) {
@@ -1363,6 +1420,8 @@ class FigDialog extends HTMLDialogElement {
     this._boundContentMutation = this._scheduleAutoResize.bind(this);
     this._boundContentResize = this._scheduleAutoResize.bind(this);
     this._boundRestoreFocus = this._restoreFocus.bind(this);
+    this._boundIframeMouseLeave = this._handleIframeMouseLeave.bind(this);
+    this._iframeDismissMutationObserver = null;
     this._previousFocus = null;
   }
 
@@ -1389,6 +1448,7 @@ class FigDialog extends HTMLDialogElement {
       this._setupDragListeners();
       this._applyPosition();
       this._syncAutoResize();
+      this._setupIframeDismissListeners();
       this._syncA11y();
     });
 
@@ -1403,6 +1463,7 @@ class FigDialog extends HTMLDialogElement {
     });
     window.removeEventListener("message", this._boundIframeMessage);
     this._teardownAutoResize();
+    this._teardownIframeDismissListeners();
     this.removeEventListener("close", this._boundRestoreFocus);
   }
 
@@ -1435,6 +1496,44 @@ class FigDialog extends HTMLDialogElement {
     return super.showModal();
   }
 
+  _handleIframeMouseLeave(event) {
+    const iframe = event?.currentTarget;
+    if (!(iframe instanceof HTMLIFrameElement)) return;
+    try {
+      iframe.contentWindow?.postMessage({ type: "figui:dismiss-tooltips" }, "*");
+    } catch {}
+  }
+
+  _syncIframeDismissListeners() {
+    for (const iframe of this.querySelectorAll(":scope > iframe")) {
+      if (!(iframe instanceof HTMLIFrameElement)) continue;
+      if (iframe.dataset.figuiDismissBound === "true") continue;
+      iframe.dataset.figuiDismissBound = "true";
+      iframe.addEventListener("mouseleave", this._boundIframeMouseLeave);
+    }
+  }
+
+  _setupIframeDismissListeners() {
+    this._syncIframeDismissListeners();
+    if (this._iframeDismissMutationObserver) return;
+    this._iframeDismissMutationObserver = new MutationObserver(() => {
+      this._syncIframeDismissListeners();
+    });
+    this._iframeDismissMutationObserver.observe(this, {
+      childList: true,
+      subtree: false,
+    });
+  }
+
+  _teardownIframeDismissListeners() {
+    this._iframeDismissMutationObserver?.disconnect();
+    this._iframeDismissMutationObserver = null;
+    for (const iframe of this.querySelectorAll(":scope > iframe")) {
+      iframe.removeEventListener("mouseleave", this._boundIframeMouseLeave);
+      delete iframe.dataset.figuiDismissBound;
+    }
+  }
+
   _handleIframeMessage(event) {
     if (!this.autoresize) return;
     const data = event?.data;

package/package.json

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