@ethlete/core 5.0.0-next.31 → 5.0.0-next.32

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ethlete/core
 
+## 5.0.0-next.32
+
+### Patch Changes
+
+- [`ed58b19`](https://github.com/ethlete-io/ethdk/commit/ed58b19b1957f2051e0f1ef68c3814747af9ccd0) Thanks [@TomTomB](https://github.com/TomTomB)! - `etAutoSurface`: opening an overlay (date-picker, select, menu, …) no longer elevates unrelated surfaces on the base page. The overlay surface-context tracker is now matched by DOM containment, so an `etAutoSurface` only adopts an overlay's elevation when it actually renders inside that overlay's pane.
+
 ## 5.0.0-next.31
 
 ### Minor Changes

package/fesm2022/ethlete-core.mjs

@@ -7577,15 +7577,26 @@ const [provideSurfaceContextTracker, injectSurfaceContextTracker] = createRootPr
     ...(ngDevMode ? [{ debugName: "topType" }] : /* istanbul ignore next */ []));
     const topElevation = computed(() => topEntry()?.elevation ?? 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "topElevation" }] : /* istanbul ignore next */ []));
-    const register = (type, elevation) => {
+    const register = (type, elevation, element) => {
         const id = `surface-ctx-${uniqueId++}`;
-        const entry = { id, type, elevation };
+        const entry = { id, type, elevation, element };
         entries.update((e) => [...e, entry]);
         return () => {
             entries.update((e) => e.filter((item) => item.id !== id));
         };
     };
-    return { topType, topElevation, register };
+    const surfaceForElement = (host) => {
+        const stack = entries();
+        // Walk newest-first so the innermost overlay containing `host` wins.
+        for (let i = stack.length - 1; i >= 0; i--) {
+            const entry = stack[i];
+            if (entry && entry.element.contains(host)) {
+                return { type: entry.type, elevation: entry.elevation };
+            }
+        }
+        return null;
+    };
+    return { topType, topElevation, register, surfaceForElement };
 }, { name: 'SurfaceContextTracker' });
 
 class AutoSurfaceDirective {
@@ -7605,6 +7616,7 @@ class AutoSurfaceDirective {
         this.contextSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
         this.surfaceThemes = injectSurfaceThemes({ optional: true });
         this.surfaceContextTracker = injectSurfaceContextTracker();
+        this.elementRef = inject(ElementRef);
         /**
          * Explicit surface provider to resolve the surface relative to. Falls back to the
          * surface provider from the surrounding (trigger) context when not set.
@@ -7627,12 +7639,16 @@ class AutoSurfaceDirective {
             // An overlay's projected/portaled content keeps the injector of where it was
             // *declared* (the trigger location), not the pane it renders into — so the
             // injector-derived parent surface is one elevation too low. The surface-context
-            // tracker records the innermost open overlay's surface across that boundary, so
-            // consult it and take whichever parent surface sits higher. Panels that are
-            // themselves the overlay's surface opt out via ignoreOverlaySurfaceContext().
-            const overlayActive = this.consultsOverlayContext() && this.surfaceContextTracker.topType() !== null;
-            const overlayElevation = overlayActive ? this.surfaceContextTracker.topElevation() : null;
-            const overlayType = overlayActive ? this.surfaceContextTracker.topType() : null;
+            // tracker records each open overlay's surface *and* its pane element, so we consult
+            // only the overlay whose pane actually contains this element in the DOM (portaling
+            // moves the DOM into the pane even though the injector stays at the trigger). An
+            // auto-surface on the base page therefore stays put when an overlay opens elsewhere.
+            // Panels that are themselves the overlay's surface opt out via ignoreOverlaySurfaceContext().
+            const overlaySurface = this.consultsOverlayContext()
+                ? this.surfaceContextTracker.surfaceForElement(this.elementRef.nativeElement)
+                : null;
+            const overlayElevation = overlaySurface?.elevation ?? null;
+            const overlayType = overlaySurface?.type ?? null;
             let parentElevation;
             let parentType;
             if (overlayElevation !== null && (contextElevation === null || overlayElevation > contextElevation)) {