@ethlete/components 1.0.0-next.28 → 1.0.0-next.29

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 1.0.0-next.29
+
+### Patch Changes
+
+- [`90dad92`](https://github.com/ethlete-io/ethdk/commit/90dad922e8985b76e5f5ad67727333de6f5b9431) Thanks [@TomTomB](https://github.com/TomTomB)! - Overlays now elevate one level above the surface their **trigger** actually sits on, resolved from the trigger's nearest surface ancestor in the DOM rather than from dependency injection. The overlay container previously read its parent surface from the injector context (`SURFACE_PROVIDER`), which is wrong across the portal boundary: an overlay's trigger keeps the injector of where it was _declared_, and the anchored panel overlays (select, cascader, date-picker, menu) mount with no DI link to the trigger at all — so they always landed at elevation 1.
+
+  This fixes two cases:
+
+  - A `select` (or any anchored panel) opened from **inside a dialog** now mounts at elevation 2 instead of matching the dialog's elevation 1.
+  - A picker anchored to a field inside an **elevated card** (e.g. a date input in a card at elevation 1) now elevates above the card instead of staying at elevation 1.
+
+  Nested content (submenus elevating above their parent menu) and the plain non-nested case (an overlay opened from the base page mounts at elevation 1) are unchanged. Modal dialogs still always mount at elevation 1 — a backdrop resets the visual context.
+
 ## 1.0.0-next.28
 
 ### Minor Changes

package/fesm2022/ethlete-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { ViewEncapsulation, Component, Directive, input, booleanAttribute, signal, effect, numberAttribute, computed, inject, ElementRef, afterNextRender, DestroyRef, InjectionToken, model, linkedSignal, output, Injector, runInInjectionContext, untracked, ApplicationRef, viewChild, ViewContainerRef, createEnvironmentInjector, DOCUMENT, EnvironmentInjector, inputBinding, createComponent, TemplateRef, afterRenderEffect, contentChild, viewChildren, outputBinding, afterEveryRender, isSignal, assertInInjectionContext, isDevMode, provideEnvironmentInitializer, PLATFORM_ID, contentChildren } from '@angular/core';
 import * as i1 from '@ethlete/core';
-import { injectStyleManager, SurfaceInteractiveDirective, RuntimeError, createCanAnimateSignal, ColorInteractiveDirective, ProvideColorDirective, injectErrorTheme, signalElementDimensions, createProvider, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceContextTracker, injectRenderer, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, provideBoundaryElement, AnimatedLifecycleDirective, injectBreakpointObserver, isHTMLElement, equal, animationDebugLog, createRootProvider, injectOverlayRuntime, injectAnimatedBlockSize, randomId, createStaticRootProvider, forceReflow, nextFrame, elementCanScroll, createSwipeTracker, createComponentId, injectObserveBreakpoint, AutoSurfaceDirective, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, createFlipAnimation, injectPrefersReducedMotion, createFlipAnimationGroup, ColorInteractiveHasFocusDirective, htmlToMarkdown, markdownToHtml, injectHasTouchInput, injectLocale, clamp, signalHostElementDimensions, DragHandleDirective, ResizeHandlesComponent, copyToClipboard, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, applyHostListener, injectQueryParam, createUnsavedChangesTracker, createDocumentElementSignal, fromNextFrame, injectRoute, AnimatedIfDirective, applyInitialFocus, syncSignal, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectViewportSize, signalHostElementIntersection, setInputSignal, injectHostElement, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory, injectFocusVisibleTracker } from '@ethlete/core';
+import { injectStyleManager, SurfaceInteractiveDirective, RuntimeError, createCanAnimateSignal, ColorInteractiveDirective, ProvideColorDirective, injectErrorTheme, signalElementDimensions, createProvider, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectRenderer, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, injectBreakpointObserver, isHTMLElement, equal, animationDebugLog, createRootProvider, injectOverlayRuntime, injectAnimatedBlockSize, randomId, createStaticRootProvider, forceReflow, nextFrame, elementCanScroll, createSwipeTracker, createComponentId, injectObserveBreakpoint, AutoSurfaceDirective, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, createFlipAnimation, injectPrefersReducedMotion, createFlipAnimationGroup, ColorInteractiveHasFocusDirective, htmlToMarkdown, markdownToHtml, injectHasTouchInput, injectLocale, clamp, signalHostElementDimensions, DragHandleDirective, ResizeHandlesComponent, copyToClipboard, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, applyHostListener, injectQueryParam, createUnsavedChangesTracker, createDocumentElementSignal, fromNextFrame, injectRoute, AnimatedIfDirective, applyInitialFocus, syncSignal, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectViewportSize, signalHostElementIntersection, setInputSignal, injectHostElement, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory, injectFocusVisibleTracker } from '@ethlete/core';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, NgComponentOutlet, Location, isPlatformBrowser } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { endOfMonth, startOfWeek, startOfMonth, addDays, addYears, addMonths, startOfDay, isSameMonth, getDate, setDate, lastDayOfMonth, isBefore, format, isSameDay, isAfter, parse, isValid, setMilliseconds, setSeconds, setMinutes, setHours } from 'date-fns';
@@ -3110,6 +3110,7 @@ class OverlayContainerComponent {
         this.appRef = inject(ApplicationRef);
         this.overlayRef = inject(OVERLAY_REF);
         this.surfaceThemes = injectSurfaceThemes({ optional: true });
+        this.surfacePrefix = injectSurfaceThemesPrefix({ optional: true });
         this.surfaceContextTracker = injectSurfaceContextTracker();
         this.renderer = injectRenderer();
         this.rootBoundary = injectBoundaryElement();
@@ -3133,9 +3134,18 @@ class OverlayContainerComponent {
             this.ownColorProvider.syncWithProvider(contextColorProvider);
         }
         if (this.surfaceThemes) {
-            const parentType = this.parentSurfaceProvider?.surfaceType() ?? 'dark';
+            // Resolve the surface the overlay's trigger visually sits on, so the overlay elevates one
+            // level above it. The trigger keeps its *declaration* injector even when projected/portaled
+            // into another overlay, so DI (`parentSurfaceProvider`) reports the wrong surface for a
+            // trigger rendered inside a dialog/menu pane, and reports nothing for the anchored panel
+            // overlays (select/menu/date) which mount with no DI link to the trigger at all. The
+            // trigger's nearest painted surface ancestor *in the DOM* is authoritative in every case —
+            // an overlay pane and a plain elevated card both carry the surface class — so read that,
+            // and fall back to DI (openers that pass a viewContainerRef but no origin).
+            const parentSurface = this.resolveOriginSurface() ?? this.parentDiSurface();
+            const parentType = parentSurface?.type ?? 'dark';
             const hasBackdrop = this.overlayRef.config.hasBackdrop ?? this.overlayRef.config.mode !== 'non-modal';
-            const elevation = hasBackdrop || !this.parentSurfaceProvider ? 1 : this.parentSurfaceProvider.elevation() + 1;
+            const elevation = hasBackdrop || !parentSurface ? 1 : parentSurface.elevation + 1;
             const resolved = resolveSurfaceByElevation(this.surfaceThemes, parentType, elevation);
             if (resolved) {
                 this.ownSurfaceProvider.forceSurface(resolved.name);
@@ -3216,6 +3226,49 @@ class OverlayContainerComponent {
      * dialog), otherwise the first painted element in the rendered content (menu/tooltip/date-picker
      * paint a nested element, potentially at a higher elevation than the host's forced surface).
      */
+    parentDiSurface() {
+        const provider = this.parentSurfaceProvider;
+        if (!provider)
+            return null;
+        return { elevation: provider.elevation(), type: provider.surfaceType() ?? 'dark' };
+    }
+    /**
+     * The surface of the nearest ancestor of the overlay's origin (trigger) that paints a resolved
+     * surface — walking the real DOM so it sees *through* the portal/projection boundary that hides
+     * the true parent surface from DI. Returns null when there is no origin element or no surfaced
+     * ancestor (the overlay then falls back to DI, and ultimately to elevation 1).
+     */
+    resolveOriginSurface() {
+        const themes = this.surfaceThemes;
+        if (!themes)
+            return null;
+        const origin = this.resolveOriginElement();
+        if (!origin)
+            return null;
+        const prefix = this.surfacePrefix || 'et';
+        const themeByClass = new Map();
+        for (const theme of themes) {
+            themeByClass.set(`${prefix}-surface--${createCssSurfaceName(theme.name)}`, theme);
+        }
+        for (let el = origin; el; el = el.parentElement) {
+            for (const cls of Array.from(el.classList)) {
+                const theme = themeByClass.get(cls);
+                if (theme)
+                    return { elevation: theme.elevation, type: theme.type };
+            }
+        }
+        return null;
+    }
+    resolveOriginElement() {
+        const origin = this.overlayRef.config.origin;
+        if (origin instanceof HTMLElement)
+            return origin;
+        if (origin instanceof Event) {
+            const target = origin.target ?? origin.currentTarget;
+            return target instanceof HTMLElement ? target : null;
+        }
+        return null;
+    }
     isSheetHost(host) {
         return (host.classList.contains('et-overlay--bottom-sheet') ||
             host.classList.contains('et-overlay--top-sheet') ||