@ionic/react 9.0.1-nightly.20260824 → 9.0.1-nightly.20260826

package/dist/index.js

@@ -1395,6 +1395,72 @@ const detachEvent = (node, eventName) => {
  * React event-delegation root.
  */
 const NestedOverlayContext = React.createContext(false);
+/**
+ * React skips `componentWillUnmount` when it destroys a subtree it had already
+ * hidden, so a hidden overlay watches its own marker leave the document. One
+ * observer serves every watcher, since each one allocates its own records for
+ * a whole root.
+ *
+ * This all assumes React hides with `display: none` rather than detaching, so
+ * the marker survives a hide. True today, but an implementation detail.
+ */
+const destroyWatches = new Set();
+let destroyObserver;
+const stopDestroyObserverIfIdle = () => {
+    if (destroyWatches.size === 0) {
+        destroyObserver?.disconnect();
+        destroyObserver = undefined;
+    }
+};
+const watchForDestroy = (marker, onDestroy) => {
+    if (typeof MutationObserver === 'undefined') {
+        return undefined;
+    }
+    const watch = { marker, onDestroy };
+    destroyWatches.add(watch);
+    if (destroyObserver === undefined) {
+        destroyObserver = new MutationObserver(() => {
+            try {
+                for (const candidate of Array.from(destroyWatches)) {
+                    if (candidate.marker.isConnected) {
+                        continue;
+                    }
+                    destroyWatches.delete(candidate);
+                    // `detachProps` assigns arbitrary props onto a custom element, so a
+                    // throwing setter would otherwise strand every remaining overlay.
+                    try {
+                        candidate.onDestroy();
+                    }
+                    catch (error) {
+                        console.error(error);
+                    }
+                }
+            }
+            finally {
+                stopDestroyObserverIfIdle();
+            }
+        });
+    }
+    /**
+     * React usually removes the marker's own parent, and a `childList` observer
+     * never fires for its own removal, so watch from the root down. Removing a
+     * shadow host disconnects the marker without mutating anything inside its
+     * root, so walk up the host chain too.
+     */
+    for (let root = marker.getRootNode(); root !== null;) {
+        destroyObserver.observe(root, { childList: true, subtree: true });
+        const { host } = root;
+        root = host === undefined ? null : host.getRootNode();
+    }
+    return watch;
+};
+const unwatchForDestroy = (watch) => {
+    if (watch === undefined) {
+        return;
+    }
+    destroyWatches.delete(watch);
+    stopDestroyObserverIfIdle();
+};
 const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateHost) => {
     if (defineCustomElement) {
         defineCustomElement();
@@ -1406,7 +1472,18 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
         markerRef;
         stableMergedRefs;
         portalTarget;
-        isUnmounted = false;
+        // Bumped on every mount, so a deferred teardown can tell it was revealed.
+        mountCount = 0;
+        hiddenDestroyWatch;
+        // Where a relocated portaled host sat before `componentWillUnmount` moved
+        // it back into `portalTarget`, so a reveal can put it back.
+        relocatedPortalHost;
+        // React nulls the refs for as long as it keeps this subtree hidden, and a
+        // dismiss can land in that window, so `handleDidDismiss` falls back to these.
+        nodesAtUnmount = null;
+        // Core clears `cachedOriginalParent` when the parent is removed, so the
+        // redirect must not re-run on a reveal and put the reference back.
+        hasRedirectedOriginalParent = false;
         constructor(props) {
             super(props);
             // Create a local ref to to attach props to the wrapped element.
@@ -1417,8 +1494,6 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
             this.state = { isOpen: false };
             // Create a local ref to the inner child element.
             this.wrapperRef = React.createRef();
-            // Marker stays at the JSX location so we can recover the immediate
-            // JSX parent after the overlay has been portaled to ion-app.
             this.markerRef = React.createRef();
             /**
              * Resolve the portal target to the same container CoreDelegate
@@ -1430,10 +1505,11 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
             this.portalTarget = typeof document !== 'undefined' ? document.querySelector('ion-app') || document.body : null;
         }
         componentDidMount() {
-            // Reset for React 18 StrictMode: the dev-mode unmount/remount cycle
-            // re-uses this instance and leaves the flag set from the prior
-            // componentWillUnmount.
-            this.isUnmounted = false;
+            this.mountCount++;
+            this.nodesAtUnmount = null;
+            // React is showing this subtree again, so cancel the hide's teardown.
+            this.stopWatchingForDestroy();
+            this.restoreRelocatedPortalHost();
             this.componentDidUpdate(this.props);
             this.ref.current?.addEventListener('ionMount', this.handleIonMount);
             this.ref.current?.addEventListener('willPresent', this.handleWillPresent);
@@ -1444,14 +1520,23 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
              * child-route passthrough, parent-removal auto-dismiss) walk up
              * from `cachedOriginalParent` to find the enclosing `.ion-page`,
              * so we redirect it at the marker's JSX parent.
+             *
+             * Nested overlays never portal, so they already cached their
+             * `<template>` at the JSX position and resolve the right `.ion-page`.
              */
             const overlay = this.ref.current;
-            if (overlay) {
+            const generation = this.mountCount;
+            if (overlay && !this.props.isNested && !this.hasRedirectedOriginalParent) {
                 componentOnReady(overlay, () => {
-                    if (this.isUnmounted)
-                        return;
+                    // Stale: a newer mount owns this, or React nulled the marker ref.
+                    // Leave the latch open so the reveal can try again.
                     const markerParent = this.markerRef.current?.parentElement ?? null;
-                    if (markerParent && markerParent !== this.portalTarget) {
+                    if (this.mountCount !== generation || markerParent === null) {
+                        return;
+                    }
+                    // Reached the JSX parent, so close the latch against later reveals.
+                    this.hasRedirectedOriginalParent = true;
+                    if (markerParent !== this.portalTarget) {
                         overlay.cachedOriginalParent = markerParent;
                     }
                 });
@@ -1469,43 +1554,80 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
             attachProps(node, cProps, prevProps);
         }
         componentWillUnmount() {
-            this.isUnmounted = true;
             const node = this.ref.current;
             if (!node) {
                 return;
             }
+            this.nodesAtUnmount = { host: node, wrapper: this.wrapperRef.current };
             /**
-             * CoreDelegate (or user code in onWillPresent) can move the overlay out
-             * of where React rendered it. React's unmount only removes the node from
-             * its original React location, so we recover a relocated host here,
-             * regardless of open state.
-             *
-             * We can't gate this on `isOpen`: the overlay can be moved before it
-             * finishes presenting (e.g. the React 18 StrictMode mount/unmount cycle,
-             * where the present events that flip `isOpen` haven't fired yet), which
-             * would orphan the relocated host in the DOM. It also has to run
-             * synchronously here, since React's portal `removeChild` runs after
-             * `componentWillUnmount` returns and needs the host where it expects it.
+             * CoreDelegate (or user code in onWillPresent) can move a portaled
+             * overlay out of `portalTarget`. React's portal `removeChild` runs as
+             * soon as this returns and needs the host where it left it, so this has
+             * to stay synchronous, before we know a hide from a destroy.
              */
-            if (node.isConnected) {
-                if (this.props.isNested) {
-                    /**
-                     * Nested overlays render inline inside a `<template>`. If the host
-                     * has been moved out of that template, React's unmount won't reach
-                     * it, so remove it directly. A host still in its template is left
-                     * for React to remove.
-                     */
-                    if (!(node.parentElement instanceof HTMLTemplateElement)) {
-                        node.remove();
-                    }
+            if (node.isConnected && !this.props.isNested && this.portalTarget && node.parentNode !== this.portalTarget) {
+                this.relocatedPortalHost = { node, parent: node.parentNode, nextSibling: node.nextSibling };
+                this.portalTarget.appendChild(node);
+            }
+            /**
+             * React also calls this when it only *hides* a subtree - a Suspense
+             * fallback, an Offscreen tree, the StrictMode cycle - and remounts the
+             * same instance on the reveal. Nothing here tells the two apart, so the
+             * teardown waits a microtask and runs only if the marker really left.
+             */
+            const marker = this.markerRef.current;
+            const mountCount = this.mountCount;
+            queueMicrotask(() => {
+                // Already back (the StrictMode cycle remounts before this runs).
+                if (this.mountCount !== mountCount) {
+                    return;
                 }
-                else if (this.portalTarget && node.parentNode !== this.portalTarget) {
-                    /**
-                     * Portaled overlays: move the host back into `portalTarget` so
-                     * React's portal `removeChild` can find it.
-                     */
-                    this.portalTarget.appendChild(node);
+                if (marker?.isConnected) {
+                    this.watchForDestroyWhileHidden(marker, node, mountCount);
+                    return;
+                }
+                this.cleanupAfterUnmount(node);
+            });
+        }
+        // Undoes the move `componentWillUnmount` made. Skipped if something else
+        // moved the host while hidden, since the pre-hide position is then wrong.
+        restoreRelocatedPortalHost() {
+            const relocated = this.relocatedPortalHost;
+            this.relocatedPortalHost = undefined;
+            if (!relocated || !relocated.parent.isConnected || relocated.node.parentNode !== this.portalTarget) {
+                return;
+            }
+            const { node, parent, nextSibling } = relocated;
+            // The recorded sibling can have moved or been removed while hidden, in
+            // which case appending is the closest we can get.
+            parent.insertBefore(node, nextSibling?.parentNode === parent ? nextSibling : null);
+        }
+        // `cleanupAfterUnmount` decides what to undo. Gating on the state at hide
+        // time would miss an overlay that only starts presenting afterwards.
+        watchForDestroyWhileHidden(marker, node, mountCount) {
+            this.hiddenDestroyWatch = watchForDestroy(marker, () => {
+                this.hiddenDestroyWatch = undefined;
+                // A reveal already happened, so `componentDidMount` owns the teardown.
+                if (this.mountCount !== mountCount) {
+                    return;
                 }
+                this.cleanupAfterUnmount(node);
+            });
+        }
+        stopWatchingForDestroy() {
+            unwatchForDestroy(this.hiddenDestroyWatch);
+            this.hiddenDestroyWatch = undefined;
+        }
+        cleanupAfterUnmount(node) {
+            this.nodesAtUnmount = null;
+            this.relocatedPortalHost = undefined;
+            /**
+             * Nested overlays render inline inside a `<template>`. React's unmount
+             * won't reach a host that has been moved out of one, so remove it here.
+             * A host still in its template is left for React.
+             */
+            if (this.props.isNested && node.isConnected && !(node.parentElement instanceof HTMLTemplateElement)) {
+                node.remove();
             }
             /**
              * If the overlay is being unmounted, but is still
@@ -1573,14 +1695,14 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
                     className: getWrapperClasses(),
                 }, children)
                 : null));
-            // Top-level overlays portal into `portalTarget` with a marker
-            // `<template>` at the JSX location to recover the immediate JSX
-            // parent after CoreDelegate teleports. Nested overlays and SSR
-            // fall back to a `<template>` wrapper.
+            // The marker sits at the JSX location on both branches and leaves the
+            // document only on a real unmount, which is how `componentWillUnmount`
+            // tells a hide from a destroy. Portaled overlays also recover their
+            // JSX parent from it.
             if (!isNested && this.portalTarget) {
                 return createElement(React.Fragment, null, createElement('template', { ref: this.markerRef }), createPortal(overlayElement, this.portalTarget));
             }
-            return createElement('template', {}, overlayElement);
+            return createElement('template', { ref: this.markerRef }, overlayElement);
         }
         static get displayName() {
             return displayName;
@@ -1606,18 +1728,20 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
             this.props.onWillPresent && this.props.onWillPresent(evt);
         };
         handleDidDismiss = (evt) => {
-            const wrapper = this.wrapperRef.current;
-            const el = this.ref.current;
+            const wrapper = this.wrapperRef.current ?? this.nodesAtUnmount?.wrapper ?? null;
+            const el = this.ref.current ?? this.nodesAtUnmount?.host ?? null;
             /**
-             * This component might be unmounted already, if the containing
-             * element was removed while the overlay was still open. (For
-             * example, if an item contains an inline overlay with a button
-             * that removes the item.)
+             * React's `removeChild` needs the wrapper as a direct child of the host,
+             * and a scoped overlay's slot relocation can nest it deeper. So this runs
+             * before the flip below, which triggers that removal. Appending one that
+             * is already a direct child would reorder it against core's own nodes.
              */
-            if (wrapper && el) {
+            if (wrapper && el && wrapper.parentElement !== el) {
                 el.append(wrapper);
-                this.setState({ isOpen: false });
             }
+            // Flip either way, or a dismiss landing while hidden leaves the contents
+            // mounted against a closed overlay on reveal. A no-op after a real unmount.
+            this.setState({ isOpen: false });
             this.props.onDidDismiss && this.props.onDidDismiss(evt);
         };
     };