ng-primitives 0.114.1 → 0.115.0

package/fesm2022/ng-primitives-portal.mjs

@@ -106,10 +106,13 @@ class NgpOverlayCooldownManager {
      */
     registerActive(overlayType, overlay, cooldown) {
         const existing = this.activeOverlays.get(overlayType);
-        // If there's an existing overlay and cooldown is enabled, close it immediately.
-        // This ensures instant DOM swap when hovering between items of the same type.
-        if (existing && existing !== overlay && cooldown > 0) {
-            existing.instantTransition?.set(true);
+        // If there's an existing overlay of the same type, close it immediately.
+        // This ensures only one overlay of each type is open at a time.
+        if (existing && existing !== overlay) {
+            // Enable instant transition only if cooldown is active
+            if (cooldown > 0) {
+                existing.instantTransition?.set(true);
+            }
             existing.hideImmediate();
         }
         this.activeOverlays.set(overlayType, overlay);
@@ -308,11 +311,14 @@ class NgpOverlayRegistry {
         this.pointerDownTarget = null;
     }
     /**
-     * Outside-click dismiss: only the topmost overlay responds.
+     * Outside-click dismiss: checks all overlays (not just the topmost) and
+     * dismisses every overlay tree where the click landed outside.
+     *
+     * This handles the case where a non-dismissable overlay (e.g. a tooltip) is
+     * topmost but other overlays (e.g. a popover) should still be dismissed.
      */
     handleOutsideClick(event) {
-        const topmost = this.getTopmost();
-        if (!topmost || this.pendingGuardIds.has(topmost.id)) {
+        if (this.entries.length === 0) {
             return;
         }
         // Ignore scrollbar clicks — the click lands outside the viewport's client area.
@@ -322,18 +328,80 @@ class NgpOverlayRegistry {
             (event.clientX >= clientWidth || event.clientY >= clientHeight)) {
             return;
         }
-        // Check if the click is inside the topmost overlay
         const path = event.composedPath();
-        const isInsideElements = topmost.getElements().some(el => path.includes(el));
-        const isInsideTrigger = path.includes(topmost.triggerElement);
-        const isInsideAnchor = topmost.anchorElement ? path.includes(topmost.anchorElement) : false;
-        if (isInsideElements || isInsideTrigger || isInsideAnchor) {
-            return;
+        // Step 1: Build a set of overlay IDs where the click is "inside"
+        const insideIds = new Set();
+        for (const entry of this.entries) {
+            if (!this.isClickOutsideEntry(entry, path)) {
+                insideIds.add(entry.id);
+            }
+        }
+        // Step 2: Expand insideIds to include all ancestors of inside entries.
+        // If a child contains the click, its entire parent chain is protected.
+        for (const id of insideIds) {
+            let currentId = this.entries.find(e => e.id === id)?.parentId ?? null;
+            while (currentId !== null) {
+                if (insideIds.has(currentId))
+                    break; // already protected
+                insideIds.add(currentId);
+                currentId = this.entries.find(e => e.id === currentId)?.parentId ?? null;
+            }
         }
-        // Derive a proper Element from the composed path
+        // Step 3: For each entry that is outside, find the highest dismissable ancestor
+        // and collect unique roots to dismiss.
+        const toDismiss = new Map();
+        const coveredIds = new Set(); // entries covered by an ancestor we'll dismiss
+        // Walk from topmost to oldest
+        for (let i = this.entries.length - 1; i >= 0; i--) {
+            const entry = this.entries[i];
+            // Skip entries where the click was inside
+            if (insideIds.has(entry.id))
+                continue;
+            // Skip entries with pending guards
+            if (this.pendingGuardIds.has(entry.id))
+                continue;
+            // Skip entries already covered by an ancestor we're about to dismiss
+            if (coveredIds.has(entry.id))
+                continue;
+            // Walk up parent chain to find the highest dismissable ancestor
+            let highest = entry;
+            let currentId = entry.parentId;
+            while (currentId !== null) {
+                const parent = this.entries.find(e => e.id === currentId);
+                if (!parent)
+                    break;
+                if (insideIds.has(parent.id))
+                    break;
+                if (parent.dismissPolicy.outsidePress === false)
+                    break;
+                if (this.pendingGuardIds.has(parent.id))
+                    break;
+                highest = parent;
+                currentId = parent.parentId;
+            }
+            toDismiss.set(highest.id, highest);
+            // Mark all descendants as covered
+            for (const desc of this.getDescendants(highest.id)) {
+                coveredIds.add(desc.id);
+            }
+        }
+        // Derive a proper Element from the composed path for guard evaluation
         const target = path.find((node) => node instanceof Element) ??
             this.document.documentElement;
-        this.evaluateGuardAndDismiss(topmost.id, topmost.dismissPolicy.outsidePress, target, () => this.ngZone.run(() => topmost.overlay.hide()));
+        // Step 4: Dismiss each root
+        for (const [id, entry] of toDismiss) {
+            this.evaluateGuardAndDismiss(id, entry.dismissPolicy.outsidePress, target, () => this.ngZone.run(() => entry.overlay.hide()));
+        }
+    }
+    /**
+     * Check if a click (represented by its composedPath) is outside an entry's
+     * elements, trigger, and anchor.
+     */
+    isClickOutsideEntry(entry, path) {
+        const isInsideElements = entry.getElements().some(el => path.includes(el));
+        const isInsideTrigger = path.includes(entry.triggerElement);
+        const isInsideAnchor = entry.anchorElement ? path.includes(entry.anchorElement) : false;
+        return !(isInsideElements || isInsideTrigger || isInsideAnchor);
     }
     /**
      * Escape-key dismiss: only the topmost overlay responds.