@ethlete/core 5.0.0-next.33 → 5.0.0-next.34

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ethlete/core
 
+## 5.0.0-next.34
+
+### Patch Changes
+
+- [`ef65231`](https://github.com/ethlete-io/ethdk/commit/ef65231ed04184345200f1e6f2e80d3207778157) Thanks [@TomTomB](https://github.com/TomTomB)! - Auto-surface: content that is grafted into an overlay pane after it first renders (e.g. a select option's `etAutoSurface` avatar) now re-resolves its elevation once it lands in the pane, instead of staying stuck one level too low.
+
 ## 5.0.0-next.33
 
 ### Patch Changes

package/fesm2022/ethlete-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, Directive, assertInInjectionContext, DestroyRef, TemplateRef, QueryList, RendererFactory2, RendererStyleFlags2, isSignal, DOCUMENT, signal, linkedSignal, isDevMode, computed, afterNextRender, effect, NgZone, untracked, EnvironmentInjector, runInInjectionContext, Injector, booleanAttribute, numberAttribute, PLATFORM_ID, ApplicationRef, createComponent, model, ViewContainerRef, input, output, Pipe, ViewEncapsulation, Component } from '@angular/core';
+import { InjectionToken, inject, ElementRef, Directive, assertInInjectionContext, DestroyRef, TemplateRef, QueryList, RendererFactory2, RendererStyleFlags2, isSignal, DOCUMENT, signal, linkedSignal, isDevMode, computed, afterNextRender, effect, NgZone, untracked, EnvironmentInjector, runInInjectionContext, Injector, booleanAttribute, numberAttribute, PLATFORM_ID, ApplicationRef, createComponent, model, ViewContainerRef, input, output, Pipe, ViewEncapsulation, Component, afterEveryRender } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
 import { Subject, BehaviorSubject, debounceTime, combineLatest, map, merge, fromEvent, filter, tap, switchMap, startWith, of, defer, from, catchError, timer, takeUntil, pairwise, distinctUntilChanged, take, Observable, concatMap, EMPTY, concat, exhaustMap, share, isObservable, firstValueFrom, defaultIfEmpty } from 'rxjs';
 import { FormGroup, FormArray, FormControl } from '@angular/forms';
@@ -7637,11 +7637,20 @@ class AutoSurfaceDirective {
         // rather than layering one level above a parent surface.
         this.isOverlaySurface = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isOverlaySurface" }] : /* istanbul ignore next */ []));
+        // Bumped by the afterEveryRender watcher in the constructor whenever this element's overlay
+        // containment changes. surfaceForElement() below does a non-reactive element.contains() read,
+        // so the computed must be re-triggered when this element is (re)grafted into an overlay pane —
+        // otherwise a value cached from before the graft (one elevation too low) sticks forever.
+        this.domSettleTick = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "domSettleTick" }] : /* istanbul ignore next */ []));
         this.resolvedSurface = computed(() => {
             const themes = this.surfaceThemes;
             if (!themes) {
                 return null;
             }
+            // Establish a dependency on the DOM-settle tick so the non-reactive containment read below
+            // is re-evaluated after the element is grafted into its final overlay pane.
+            this.domSettleTick();
             const contextProvider = this.surfaceProvider() ?? this.contextSurfaceProvider ?? null;
             const contextElevation = contextProvider?.elevation() ?? null;
             const contextType = contextProvider?.surfaceType() ?? null;
@@ -7688,6 +7697,29 @@ class AutoSurfaceDirective {
             return resolveSurfaceByElevation(themes, parentType, parentElevation + 1)?.name ?? null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resolvedSurface" }] : /* istanbul ignore next */ []));
+        // Projected/portaled auto-surface content (e.g. a select option's avatar) can have its
+        // resolvedSurface computed run *before* it is grafted into the overlay pane it visually lives
+        // in — or while it is briefly mounted in an off-pane measuring container, as windowed lists do.
+        // surfaceForElement()'s element.contains() check then returns the wrong (or no) overlay, so it
+        // resolves off the declaration injector (the trigger location) one elevation too low. That check
+        // is a plain DOM read, not a signal, so nothing re-runs the computed once the element reaches its
+        // final pane. Watch the tracker result across renders and re-trigger the computed whenever the
+        // element's overlay containment changes, settling (and unsubscribing) once it stops moving.
+        let lastElevation = this.surfaceContextTracker.surfaceForElement(this.elementRef.nativeElement)?.elevation ?? null;
+        let stableRenders = 0;
+        const settleWatcher = afterEveryRender(() => {
+            const el = this.elementRef.nativeElement;
+            const elevation = this.surfaceContextTracker.surfaceForElement(el)?.elevation ?? null;
+            if (elevation !== lastElevation) {
+                lastElevation = elevation;
+                stableRenders = 0;
+                this.domSettleTick.update((v) => v + 1);
+            }
+            else if (el.isConnected && ++stableRenders >= 2) {
+                // containment has held for a couple of renders and the element is in the DOM — done moving
+                settleWatcher.destroy();
+            }
+        });
         effect(() => {
             const surface = this.resolvedSurface();
             untracked(() => {