stimeo-ui 0.1.0.pre.beta.3 → 0.2.0

data/dist/controllers/tooltip_controller.js

@@ -2,6 +2,90 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/tooltip_controller.ts
 
+// src/utils/escape_layer.ts
+var EscapeLayer = class _EscapeLayer {
+  static #registries = /* @__PURE__ */ new WeakMap();
+  #ownerDocument = null;
+  /** Dismissal callback while active; `null` when inactive. */
+  #onDismiss = null;
+  /** Live predicate deciding whether the layer claims a press; `null` = always. */
+  #claims = null;
+  /**
+   * Activates this layer at the top of its document's Escape stack, installing
+   * the document's shared resolver listener if this is its first layer.
+   * Re-activating an already-active layer moves it to the top.
+   */
+  activate(ownerDocument = document, options) {
+    this.deactivate();
+    let registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) {
+      registry = _EscapeLayer.#createRegistry();
+      _EscapeLayer.#registries.set(ownerDocument, registry);
+      ownerDocument.addEventListener("keydown", registry.onKeydown);
+    }
+    registry.stack.push(this);
+    this.#ownerDocument = ownerDocument;
+    this.#onDismiss = options.onDismiss;
+    this.#claims = options.claims ?? null;
+  }
+  /**
+   * Removes this layer from its document's Escape stack, uninstalling the
+   * shared listener when the stack empties. Safe to call when inactive.
+   */
+  deactivate() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (registry) {
+      const index = registry.stack.lastIndexOf(this);
+      if (index >= 0) registry.stack.splice(index, 1);
+      if (registry.stack.length === 0) {
+        ownerDocument.removeEventListener("keydown", registry.onKeydown);
+        _EscapeLayer.#registries.delete(ownerDocument);
+      }
+    }
+    this.#ownerDocument = null;
+    this.#onDismiss = null;
+    this.#claims = null;
+  }
+  /**
+   * Whether this active layer would own a press right now: it is the topmost
+   * layer whose {@link EscapeLayerOptions.claims} passes. Exposed for tests
+   * and diagnostics — production dismissal goes through the shared listener.
+   */
+  get ownsEscape() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return false;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) return false;
+    return _EscapeLayer.#resolveOwner(registry.stack) === this;
+  }
+  /** Builds a document's registry with its shared resolver listener. */
+  static #createRegistry() {
+    const registry = {
+      stack: [],
+      onKeydown: (event) => {
+        if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+        const owner = _EscapeLayer.#resolveOwner(registry.stack);
+        if (!owner) return;
+        event.preventDefault();
+        owner.#onDismiss?.();
+      }
+    };
+    return registry;
+  }
+  /** The topmost stack layer whose claims predicate passes, or `null`. */
+  static #resolveOwner(stack) {
+    for (let index = stack.length - 1; index >= 0; index--) {
+      const layer = stack[index];
+      if (!layer) continue;
+      if (layer.#claims && !layer.#claims()) continue;
+      return layer;
+    }
+    return null;
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -88,27 +172,39 @@ var TooltipController = class extends Controller {
     hideDelay: { type: Number, default: 0 },
     closeOnScroll: { type: Boolean, default: false }
   };
-  static actions = ["hide", "onKeydown", "show"];
-  /** Pending show/hide timers, torn down together on disconnect. */
+  static actions = ["hide", "show"];
+  /** Registry whose pending timers are cancelled individually with their guard ids. */
   #timers = new SafeTimeout();
-  /** The id of the currently pending show or hide timer, if any. */
+  /** Escape-stack membership while shown; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
+  /** The id of the currently pending show timer, if any. */
   #pendingShow = null;
+  /** The id of the currently pending hide timer, if any. */
   #pendingHide = null;
+  /** Whether focus or the pointer currently requires the tooltip to persist. */
+  #focusActive = false;
+  #pointerActive = false;
   /** Cleanup for the dismiss-on-scroll listeners while shown, or `null`. */
   #stopScrollDismiss = null;
-  /** Starts hidden. */
+  /** Starts hidden with no stale timer or interaction state from a prior connection. */
   connect() {
+    this.#cancelShow();
+    this.#cancelHide();
+    this.#resetInteractionState();
     this.#conceal();
   }
-  /** Clears timers and the document `Escape` / scroll listeners so nothing outlives the element. */
+  /** Clears timers, the Escape-stack membership, and scroll listeners so nothing outlives the element. */
   disconnect() {
-    this.#timers.clearAll();
-    document.removeEventListener("keydown", this.#onDocumentKeydown);
+    this.#cancelShow();
+    this.#cancelHide();
+    this.#resetInteractionState();
+    this.#escapeLayer.deactivate();
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;
   }
-  /** Shows the tooltip, after `showDelay` ms (or immediately at 0). Cancels a pending hide. */
-  show() {
+  /** Shows after `showDelay`, recording the focus/pointer reason supplied by an action event. */
+  show(event) {
+    this.#activateInteraction(event);
     this.#cancelHide();
     if (this.#isVisible || this.#pendingShow !== null) return;
     if (this.showDelayValue <= 0) {
@@ -120,8 +216,13 @@ var TooltipController = class extends Controller {
       this.#reveal();
     }, this.showDelayValue);
   }
-  /** Hides the tooltip, after `hideDelay` ms (or immediately at 0). Cancels a pending show. */
-  hide() {
+  /** Hides after `hideDelay` once no focus/pointer reason remains; eventless calls are explicit. */
+  hide(event) {
+    const interactionEnded = this.#deactivateInteraction(event);
+    if (interactionEnded && this.#hasActiveInteraction) {
+      this.#cancelHide();
+      return;
+    }
     this.#cancelShow();
     if (!this.#isVisible || this.#pendingHide !== null) return;
     if (this.hideDelayValue <= 0) {
@@ -133,52 +234,57 @@ var TooltipController = class extends Controller {
       this.#conceal();
     }, this.hideDelayValue);
   }
-  /**
-   * Dismisses the tooltip on `Escape` from the trigger. The authoritative
-   * dismissal path is the document-level listener (added while shown) so a
-   * hover-triggered tooltip is dismissible regardless of focus; this handler
-   * keeps the documented `keydown->#onKeydown` binding meaningful too.
-   */
-  onKeydown(event) {
-    if (event.key === "Escape" && this.#isVisible) {
-      event.preventDefault();
-      this.#cancelShow();
-      this.#cancelHide();
-      this.#conceal();
-    }
-  }
-  /** Reveals the content and starts watching for a dismissing `Escape`/scroll. */
+  /** Reveals the content and joins the Escape stack / starts the scroll watcher. */
   #reveal() {
     if (!this.hasContentTarget) return;
     this.contentTarget.hidden = false;
     this.contentTarget.setAttribute("data-state", "open");
-    document.addEventListener("keydown", this.#onDocumentKeydown);
+    this.#escapeLayer.activate(document, { onDismiss: () => this.#dismiss() });
     if (this.closeOnScrollValue && !this.#stopScrollDismiss) {
-      this.#stopScrollDismiss = observeScrollDismiss(this.element, () => {
-        this.#cancelShow();
-        this.#cancelHide();
-        this.#conceal();
-      });
+      this.#stopScrollDismiss = observeScrollDismiss(this.element, () => this.#dismiss());
     }
   }
-  /** Hides the content and stops watching for `Escape`/scroll. */
+  /** Hides the content and leaves the Escape stack / stops the scroll watcher. */
   #conceal() {
-    document.removeEventListener("keydown", this.#onDocumentKeydown);
+    this.#escapeLayer.deactivate();
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;
     if (!this.hasContentTarget) return;
     this.contentTarget.hidden = true;
     this.contentTarget.setAttribute("data-state", "closed");
   }
-  /** Document-level `Escape` watcher (active only while shown). */
-  #onDocumentKeydown = (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      this.#cancelShow();
-      this.#cancelHide();
-      this.#conceal();
+  /** Cancels pending timers and conceals immediately (shared Escape / scroll path). */
+  #dismiss() {
+    this.#cancelShow();
+    this.#cancelHide();
+    this.#conceal();
+  }
+  /** Records the modality whose enter/focus event requires the tooltip to stay visible. */
+  #activateInteraction(event) {
+    if (event?.type === "mouseenter") this.#pointerActive = true;
+    if (event?.type === "focusin") this.#focusActive = true;
+  }
+  /** Clears a modality on leave/blur and reports whether the event represented such a change. */
+  #deactivateInteraction(event) {
+    if (event?.type === "mouseleave") {
+      this.#pointerActive = false;
+      return true;
     }
-  };
+    if (event?.type === "focusout") {
+      this.#focusActive = false;
+      return true;
+    }
+    return false;
+  }
+  /** Discards interaction reasons at a lifecycle boundary. */
+  #resetInteractionState() {
+    this.#focusActive = false;
+    this.#pointerActive = false;
+  }
+  /** Whether focus or pointer presence still requires a persistent tooltip. */
+  get #hasActiveInteraction() {
+    return this.#focusActive || this.#pointerActive;
+  }
   /** Cancels any pending show timer. */
   #cancelShow() {
     if (this.#pendingShow !== null) {