@ionic/react 9.0.1-dev.11788212611.154b1596 → 9.0.1-dev.11788375537.1f38f077

package/dist/index.js

@@ -1395,72 +1395,6 @@ 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();
@@ -1472,18 +1406,7 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
         markerRef;
         stableMergedRefs;
         portalTarget;
-        // 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;
+        isUnmounted = false;
         constructor(props) {
             super(props);
             // Create a local ref to to attach props to the wrapped element.
@@ -1494,6 +1417,8 @@ 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
@@ -1505,11 +1430,10 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
             this.portalTarget = typeof document !== 'undefined' ? document.querySelector('ion-app') || document.body : null;
         }
         componentDidMount() {
-            this.mountCount++;
-            this.nodesAtUnmount = null;
-            // React is showing this subtree again, so cancel the hide's teardown.
-            this.stopWatchingForDestroy();
-            this.restoreRelocatedPortalHost();
+            // 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.componentDidUpdate(this.props);
             this.ref.current?.addEventListener('ionMount', this.handleIonMount);
             this.ref.current?.addEventListener('willPresent', this.handleWillPresent);
@@ -1520,23 +1444,14 @@ 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;
-            const generation = this.mountCount;
-            if (overlay && !this.props.isNested && !this.hasRedirectedOriginalParent) {
+            if (overlay) {
                 componentOnReady(overlay, () => {
-                    // 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 (this.mountCount !== generation || markerParent === null) {
+                    if (this.isUnmounted)
                         return;
-                    }
-                    // Reached the JSX parent, so close the latch against later reveals.
-                    this.hasRedirectedOriginalParent = true;
-                    if (markerParent !== this.portalTarget) {
+                    const markerParent = this.markerRef.current?.parentElement ?? null;
+                    if (markerParent && markerParent !== this.portalTarget) {
                         overlay.cachedOriginalParent = markerParent;
                     }
                 });
@@ -1554,80 +1469,43 @@ 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 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 && !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.
+             * 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.
              */
-            const marker = this.markerRef.current;
-            const mountCount = this.mountCount;
-            queueMicrotask(() => {
-                // Already back (the StrictMode cycle remounts before this runs).
-                if (this.mountCount !== mountCount) {
-                    return;
-                }
-                if (marker?.isConnected) {
-                    this.watchForDestroyWhileHidden(marker, node, mountCount);
-                    return;
+            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();
+                    }
                 }
-                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;
+                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);
                 }
-                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
@@ -1695,14 +1573,14 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
                     className: getWrapperClasses(),
                 }, children)
                 : null));
-            // 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.
+            // 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.
             if (!isNested && this.portalTarget) {
                 return createElement(React.Fragment, null, createElement('template', { ref: this.markerRef }), createPortal(overlayElement, this.portalTarget));
             }
-            return createElement('template', { ref: this.markerRef }, overlayElement);
+            return createElement('template', {}, overlayElement);
         }
         static get displayName() {
             return displayName;
@@ -1728,20 +1606,18 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
             this.props.onWillPresent && this.props.onWillPresent(evt);
         };
         handleDidDismiss = (evt) => {
-            const wrapper = this.wrapperRef.current ?? this.nodesAtUnmount?.wrapper ?? null;
-            const el = this.ref.current ?? this.nodesAtUnmount?.host ?? null;
+            const wrapper = this.wrapperRef.current;
+            const el = this.ref.current;
             /**
-             * 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.
+             * 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.)
              */
-            if (wrapper && el && wrapper.parentElement !== el) {
+            if (wrapper && 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);
         };
     };