@ethlete/core 5.0.0-next.52 → 5.0.0-next.53

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ethlete/core
 
+## 5.0.0-next.53
+
+### Major Changes
+
+- [`2352137`](https://github.com/ethlete-io/ethdk/commit/235213735ede4c3542b7796d378e008bcab50bdc) Thanks [@TomTomB](https://github.com/TomTomB)! - An overlay strategy switch between a backdropped and a backdrop-less shape now adds or
+  removes the backdrop instead of keeping the one it mounted with. `elements.backdropElement`
+  is a signal.
+
+### Patch Changes
+
+- [`0b4b4eb`](https://github.com/ethlete-io/ethdk/commit/0b4b4eb779218d6c70b27c212b03703ca8b64564) Thanks [@TomTomB](https://github.com/TomTomB)! - Overlay: an overlay's own providers are destroyed when it closes, so an overlay router with `syncUrl` removes its query param from the url again.
+
 ## 5.0.0-next.52
 
 ### Major Changes

package/fesm2022/ethlete-core.mjs

@@ -7711,6 +7711,7 @@ const createOverlayRuntimeRef = (id, config, elements, requestClose) => {
     const _componentInstance = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_componentInstance" }] : /* istanbul ignore next */ []));
     let positionUpdater = null;
+    let backdropUpdater = null;
     const beforeOpenedSubject = new Subject();
     const afterOpenedSubject = new Subject();
     const beforeClosedSubject = new Subject();
@@ -7776,6 +7777,20 @@ const createOverlayRuntimeRef = (id, config, elements, requestClose) => {
             }
             positionUpdater?.(strategy);
         },
+        /** @internal */
+        attachBackdropUpdater(updater) {
+            backdropUpdater = updater;
+        },
+        /**
+         * Adds or removes the backdrop of an open overlay. `elements.backdropElement` follows.
+         * A closing overlay keeps the backdrop it has, so its leave transition stays intact.
+         */
+        updateBackdrop(hasBackdrop) {
+            if (_state() === 'closing' || _state() === 'closed') {
+                return;
+            }
+            backdropUpdater?.(hasBackdrop);
+        },
         markOpened() {
             if (_state() !== 'mounting') {
                 return;
@@ -7892,11 +7907,27 @@ const OVERLAY_RUNTIME_DEF = /* @__PURE__ */ defineRootProvider(() => {
         const root = getRootElement(targetDocument, layer);
         const hostElement = renderer.createElement('div');
         const paneElement = renderer.createElement('div');
-        const backdropElement = config.hasBackdrop === false ? null : renderer.createElement('div');
+        const backdropElement = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backdropElement" }] : /* istanbul ignore next */ []));
         const previousFocusedElement = isHTMLElement(targetDocument.activeElement) ? targetDocument.activeElement : null;
         const autoFocus = config.autoFocus ?? 'first-tabbable';
+        let currentHasBackdrop = config.hasBackdrop !== false;
+        let currentPositionStrategy = config.positionStrategy;
+        const activeConfig = () => ({
+            ...config,
+            positionStrategy: currentPositionStrategy,
+            hasBackdrop: currentHasBackdrop,
+        });
+        const createBackdropElement = () => {
+            const element = renderer.createElement('div');
+            renderer.addClass(element, 'et-overlay-runtime-backdrop');
+            setBackdropStyles(element, renderer);
+            renderer.setAttribute(element, 'data-overlay-id', config.id);
+            (config.backdropClass ?? []).forEach((className) => renderer.addClass(element, className));
+            return element;
+        };
         renderer.addClass(hostElement, 'et-overlay-runtime-entry');
-        setBaseElementStyles(config, hostElement, paneElement, renderer);
+        setBaseElementStyles(activeConfig(), hostElement, paneElement, renderer);
         renderer.setAttributes(hostElement, {
             'data-overlay-id': config.id,
             role: config.role ?? null,
@@ -7907,19 +7938,17 @@ const OVERLAY_RUNTIME_DEF = /* @__PURE__ */ defineRootProvider(() => {
             'aria-label': config.ariaLabel ?? null,
         });
         renderer.addClass(hostElement, ...(config.hostClass ?? []));
-        if (backdropElement) {
-            renderer.addClass(backdropElement, 'et-overlay-runtime-backdrop');
-            setBackdropStyles(backdropElement, renderer);
-            renderer.setAttribute(backdropElement, 'data-overlay-id', config.id);
-            (config.backdropClass ?? []).forEach((className) => renderer.addClass(backdropElement, className));
-            renderer.appendChild(hostElement, backdropElement);
+        if (currentHasBackdrop) {
+            const element = createBackdropElement();
+            renderer.appendChild(hostElement, element);
+            backdropElement.set(element);
         }
         renderer.appendChild(hostElement, paneElement);
         renderer.appendChild(root, hostElement);
         const overlayRef = createOverlayRuntimeRef(config.id, { ...config }, {
             rootElement: root,
             hostElement,
-            backdropElement,
+            backdropElement: backdropElement.asReadonly(),
             paneElement,
         }, (result, source) => beginClose({ result, source }));
         animationDebugLog(`runtime ${config.id}`, 'mount');
@@ -7946,23 +7975,46 @@ const OVERLAY_RUNTIME_DEF = /* @__PURE__ */ defineRootProvider(() => {
         overlayRef.beforeOpenedSubject.next();
         overlayRef.beforeOpenedSubject.complete();
         openEntriesState.update((entries) => [...entries, overlayRef]);
-        let positionCleanup = setupPositioning(config, hostElement, paneElement, overlayRef, renderer);
+        let positionCleanup = setupPositioning(activeConfig(), hostElement, paneElement, overlayRef, renderer);
         cleanupFns.push(() => positionCleanup());
-        let currentPositionStrategy = config.positionStrategy;
         const getOriginElement = () => currentPositionStrategy?.kind === 'anchored' && isHTMLElement(currentPositionStrategy.referenceElement)
             ? currentPositionStrategy.referenceElement
             : null;
         overlayRef.attachPositionUpdater((strategy) => {
             currentPositionStrategy = strategy;
             positionCleanup();
-            resetPositioningStyles(config, hostElement, paneElement, renderer);
-            positionCleanup = setupPositioning({ ...config, positionStrategy: strategy }, hostElement, paneElement, overlayRef, renderer);
+            resetPositioningStyles(activeConfig(), hostElement, paneElement, renderer);
+            positionCleanup = setupPositioning(activeConfig(), hostElement, paneElement, overlayRef, renderer);
+        });
+        overlayRef.attachBackdropUpdater((hasBackdrop) => {
+            if (hasBackdrop === currentHasBackdrop) {
+                return;
+            }
+            currentHasBackdrop = hasBackdrop;
+            if (hasBackdrop) {
+                const element = createBackdropElement();
+                renderer.insertBefore(hostElement, element, paneElement);
+                backdropElement.set(element);
+            }
+            else {
+                const element = backdropElement();
+                if (element) {
+                    renderer.removeChild(hostElement, element);
+                    backdropElement.set(null);
+                }
+            }
+            renderer.setStyle(hostElement, { pointerEvents: hasBackdrop ? 'auto' : 'none' });
         });
         const destroyMountedOverlay = (closeEvent) => {
             animationDebugLog(`runtime ${config.id}`, `destroy (source "${closeEvent.source}")`);
             cleanupFns.forEach((cleanup) => cleanup());
             appRef.detachView(componentRef.hostView);
             componentRef.destroy();
+            // Angular does not own this injector, so nothing else tears down what the overlay's own
+            // providers registered on it - their `DestroyRef` hooks and effects would outlive the overlay.
+            if (!elementInjector.destroyed) {
+                elementInjector.destroy();
+            }
             const parentNode = renderer.parentNode(hostElement);
             if (parentNode) {
                 renderer.removeChild(parentNode, hostElement);
@@ -10008,7 +10060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/core` this build was cut from. */
-const CORE_VERSION = '5.0.0-next.52';
+const CORE_VERSION = '5.0.0-next.53';
 
 /**
  * Generated bundle index. Do not edit.