@ethlete/core 5.0.0-next.24 → 5.0.0-next.25

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ethlete/core
 
+## 5.0.0-next.25
+
+### Patch Changes
+
+- [#3017](https://github.com/ethlete-io/ethdk/pull/3017) [`83853d6`](https://github.com/ethlete-io/ethdk/commit/83853d6138bc7d0a481b5b982c2a7137b9cc65e6) Thanks [@github-actions](https://github.com/apps/github-actions)! - Overlay: anchored overlays with `autoCloseIfReferenceHidden` now close instantly when their anchor is removed, instead of jumping to the viewport corner and animating out from there.
+
 ## 5.0.0-next.24
 
 ### Minor Changes

package/fesm2022/ethlete-core.mjs

@@ -4633,9 +4633,24 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
             strategy: 'absolute',
             middleware,
         }).then(({ x, y, placement, middlewareData }) => {
+            // A detached reference reports a zeroed rect, so floating-ui positions the pane at the
+            // viewport's top-left. Tear the overlay down (without animating from that bogus position)
+            // before applying the transform when auto-close is on, and otherwise leave the pane where it
+            // last was rather than snapping it to the corner.
+            if (middlewareData.hide?.referenceHidden) {
+                if (strategy.autoCloseIfReferenceHidden) {
+                    overlayRef.close(undefined, 'reference-detached');
+                    return;
+                }
+                if (strategy.autoHide) {
+                    renderer.setStyle(paneElement, { visibility: 'hidden' });
+                }
+                return;
+            }
             renderer.setStyle(paneElement, {
                 transform: `translate3d(${x}px, ${y}px, 0)`,
                 width: mirrorWidthElement ? `${mirrorWidthElement.offsetWidth}px` : null,
+                visibility: null,
             });
             // exposed so animations can compose their transforms with the anchored position
             renderer.setCssProperties(paneElement, {
@@ -4646,19 +4661,6 @@ const createAnchoredPositionCleanup = (strategy, paneElement, overlayRef, render
             if (arrowElement && middlewareData.arrow) {
                 renderer.setCssProperty(arrowElement, '--et-floating-arrow-translate', `translate3d(${middlewareData.arrow.x ?? 0}px, ${middlewareData.arrow.y ?? 0}px, 0)`);
             }
-            if (middlewareData.hide?.referenceHidden) {
-                if (strategy.autoCloseIfReferenceHidden) {
-                    overlayRef.close(undefined, 'api');
-                    return;
-                }
-                renderer.setStyle(paneElement, {
-                    visibility: strategy.autoHide ? 'hidden' : null,
-                });
-                return;
-            }
-            renderer.setStyle(paneElement, {
-                visibility: null,
-            });
         });
     });
     return () => {
@@ -4913,7 +4915,9 @@ const [provideOverlayRuntime, injectOverlayRuntime] = createRootProvider(() => {
             }
             const lifecycle = getAnimatedLifecycle(componentRef);
             animationDebugLog(`runtime ${config.id}`, `close requested (source "${closeEvent.source}", lifecycle state "${lifecycle?.state$.value ?? 'none'}", delegate ${config.animationDelegate?.leave ? 'yes' : 'no'})`);
-            if (!lifecycle) {
+            // The reference element is gone — there is nothing left to animate away from, so tear the
+            // overlay down synchronously instead of playing a leave transition from a stale position.
+            if (!lifecycle || closeEvent.source === 'reference-detached') {
                 destroyMountedOverlay(closeEvent);
                 return;
             }