@ionic/react-router 8.8.1-dev.11773873479.192398dc → 8.8.1-dev.11774029927.130994f5

package/dist/index.js

@@ -1495,32 +1495,18 @@ class StackManager extends React.PureComponent {
         return { enteringViewItem, leavingViewItem };
     }
     shouldUnmountLeavingView(routeInfo, enteringViewItem, leavingViewItem) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         if (!leavingViewItem) {
             return false;
         }
         if (routeInfo.routeAction === 'replace') {
-            const enteringRoutePath = (_b = (_a = enteringViewItem === null || enteringViewItem === void 0 ? void 0 : enteringViewItem.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path;
-            const leavingRoutePath = (_d = (_c = leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.reactElement) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.path;
-            // Never unmount root path - needed for back navigation
-            if (leavingRoutePath === '/' || leavingRoutePath === '') {
+            const leavingRoutePath = (_b = (_a = leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path;
+            // Never unmount root path or views without a path - needed for back navigation
+            if (!leavingRoutePath || leavingRoutePath === '/' || leavingRoutePath === '') {
                 return false;
             }
-            if (enteringRoutePath && leavingRoutePath) {
-                const getParentPath = (path) => {
-                    const normalized = path.replace(/\/\*$/, '');
-                    const lastSlash = normalized.lastIndexOf('/');
-                    return lastSlash > 0 ? normalized.substring(0, lastSlash) : '/';
-                };
-                const enteringParent = getParentPath(enteringRoutePath);
-                const leavingParent = getParentPath(leavingRoutePath);
-                // Unmount if routes are siblings or entering is a child of leaving (redirect)
-                const areSiblings = enteringParent === leavingParent && enteringParent !== '/';
-                const isChildRedirect = enteringRoutePath.startsWith(leavingRoutePath) ||
-                    (leavingRoutePath.endsWith('/*') && enteringRoutePath.startsWith(leavingRoutePath.slice(0, -2)));
-                return areSiblings || isChildRedirect;
-            }
-            return false;
+            // Replace actions unmount the leaving view since it's being replaced in history.
+            return true;
         }
         // For non-replace actions, only unmount for back navigation
         const isForwardPush = routeInfo.routeAction === 'push' && routeInfo.routeDirection === 'forward';
@@ -1540,6 +1526,19 @@ class StackManager extends React.PureComponent {
             clearTimeout(this.outOfScopeUnmountTimeout);
             this.outOfScopeUnmountTimeout = undefined;
         }
+        // Fire lifecycle events on any visible view before unmounting.
+        // When navigating away from a tabbed section, the parent outlet fires
+        // ionViewDidLeave on the tabs container, but the active tab child page
+        // never receives its own lifecycle events because the core transition
+        // dispatches events with bubbles:false. This ensures tab child pages
+        // get ionViewWillLeave/ionViewDidLeave so useIonViewDidLeave fires.
+        const allViewsInOutlet = this.context.getViewItemsForOutlet(this.id);
+        allViewsInOutlet.forEach((viewItem) => {
+            if (viewItem.ionPageElement && isViewVisible(viewItem.ionPageElement)) {
+                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewWillLeave', { bubbles: false, cancelable: false }));
+                viewItem.ionPageElement.dispatchEvent(new CustomEvent('ionViewDidLeave', { bubbles: false, cancelable: false }));
+            }
+        });
         // Remove view items from the stack but do NOT apply ion-page-hidden.
         // ion-page-hidden sets display:none which immediately removes content
         // from the layout, causing the parent outlet's leaving page to flash
@@ -1551,7 +1550,6 @@ class StackManager extends React.PureComponent {
         // commit() captures the current DOM state (with content visible) before
         // React processes the removal. The compositor's cached layer is unaffected
         // by subsequent DOM changes during the animation.
-        const allViewsInOutlet = this.context.getViewItemsForOutlet(this.id);
         allViewsInOutlet.forEach((viewItem) => {
             this.context.unMountViewItem(viewItem);
         });
@@ -1691,7 +1689,12 @@ class StackManager extends React.PureComponent {
         const shouldSkipAnimation = this.applySkipAnimationIfNeeded(enteringViewItem, leavingViewItem);
         this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, undefined, false, shouldSkipAnimation);
         if (shouldUnmountLeavingViewItem && leavingViewItem && enteringViewItem !== leavingViewItem) {
-            leavingViewItem.mount = false;
+            // For non-replace actions (back nav), set mount=false here to hide the view.
+            // For replace actions, handleLeavingViewUnmount sets mount=false only after
+            // its container-to-container guard passes, avoiding zombie state.
+            if (routeInfo.routeAction !== 'replace') {
+                leavingViewItem.mount = false;
+            }
             this.handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem);
         }
         // Clean up orphaned sibling views after replace actions (redirects)
@@ -1702,13 +1705,19 @@ class StackManager extends React.PureComponent {
      */
     handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem) {
         var _a, _b, _c, _d, _e, _f;
-        if (!leavingViewItem.ionPageElement) {
-            return;
-        }
         // Only replace actions unmount views; push/pop cache for navigation history
         if (routeInfo.routeAction !== 'replace') {
             return;
         }
+        if (!leavingViewItem.ionPageElement) {
+            leavingViewItem.mount = false;
+            const viewToUnmount = leavingViewItem;
+            setTimeout(() => {
+                this.context.unMountViewItem(viewToUnmount);
+                this.forceUpdate();
+            }, VIEW_UNMOUNT_DELAY_MS);
+            return;
+        }
         const enteringRoutePath = (_b = (_a = enteringViewItem.reactElement) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.path;
         const leavingRoutePath = (_d = (_c = leavingViewItem.reactElement) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.path;
         const isEnteringContainerRoute = enteringRoutePath && enteringRoutePath.endsWith('/*');
@@ -1722,6 +1731,7 @@ class StackManager extends React.PureComponent {
         if (isEnteringContainerRoute && !isLeavingSpecificRoute) {
             return;
         }
+        leavingViewItem.mount = false;
         const viewToUnmount = leavingViewItem;
         setTimeout(() => {
             this.context.unMountViewItem(viewToUnmount);
@@ -1764,10 +1774,24 @@ class StackManager extends React.PureComponent {
             }
             const getParent = (path) => {
                 const normalized = path.replace(/\/\*$/, '');
-                const lastSlash = normalized.lastIndexOf('/');
-                return lastSlash > 0 ? normalized.substring(0, lastSlash) : '/';
+                const segments = normalized.split('/').filter(Boolean);
+                // Strip trailing parameter segments (e.g., :id) so that
+                // sibling routes like /items/list/:id and /items/detail/:id
+                // resolve to the same parent (/items).
+                while (segments.length > 0 && segments[segments.length - 1].startsWith(':')) {
+                    segments.pop();
+                }
+                segments.pop();
+                return segments.length > 0 ? '/' + segments.join('/') : '/';
             };
-            return getParent(path1) === getParent(path2);
+            const parent = getParent(path1);
+            // Exclude root-level routes from sibling detection to avoid unintended
+            // cleanup of unrelated top-level routes. Also covers single-depth param
+            // routes (e.g., /items/:id) which resolve to root after param stripping.
+            if (parent === '/') {
+                return false;
+            }
+            return parent === getParent(path2);
         };
         for (const viewItem of allViewsInOutlet) {
             const viewRoutePath = (_g = (_f = viewItem.reactElement) === null || _f === void 0 ? void 0 : _f.props) === null || _g === void 0 ? void 0 : _g.path;
@@ -1775,11 +1799,19 @@ class StackManager extends React.PureComponent {
                 (leavingViewItem && viewItem.id === leavingViewItem.id) ||
                 !viewItem.mount ||
                 !viewRoutePath ||
+                // Don't clean up container routes when entering a container route
+                // (e.g., /tabs/* and /settings/* coexist for tab switching)
                 (viewRoutePath.endsWith('/*') && enteringRoutePath.endsWith('/*'));
             if (shouldSkip) {
                 continue;
             }
-            if (areSiblingRoutes(enteringRoutePath, viewRoutePath)) {
+            const isOrphanedSpecificRoute = !viewRoutePath.endsWith('/*');
+            // Clean up sibling non-container routes that are no longer reachable.
+            let shouldCleanup = false;
+            if ((isReplaceAction || isPushToContainer) && isOrphanedSpecificRoute) {
+                shouldCleanup = areSiblingRoutes(enteringRoutePath, viewRoutePath);
+            }
+            if (shouldCleanup) {
                 hideIonPageElement(viewItem.ionPageElement);
                 viewItem.mount = false;
                 const viewToRemove = viewItem;
@@ -1858,7 +1890,10 @@ class StackManager extends React.PureComponent {
             });
             // Don't unmount if entering and leaving are the same view item
             if (shouldUnmountLeavingViewItem && leavingViewItem && enteringViewItem !== leavingViewItem) {
-                leavingViewItem.mount = false;
+                if (routeInfo.routeAction !== 'replace') {
+                    leavingViewItem.mount = false;
+                }
+                this.handleLeavingViewUnmount(routeInfo, enteringViewItem, leavingViewItem);
             }
             this.forceUpdate();
             return;
@@ -1884,8 +1919,9 @@ class StackManager extends React.PureComponent {
                 const shouldSkipAnimation = this.applySkipAnimationIfNeeded(latestEnteringView, latestLeavingView !== null && latestLeavingView !== void 0 ? latestLeavingView : undefined);
                 this.transitionPage(routeInfo, latestEnteringView, latestLeavingView !== null && latestLeavingView !== void 0 ? latestLeavingView : undefined, undefined, false, shouldSkipAnimation);
                 if (shouldUnmountLeavingViewItem && latestLeavingView && latestEnteringView !== latestLeavingView) {
-                    latestLeavingView.mount = false;
-                    // Call handleLeavingViewUnmount to ensure the view is properly removed
+                    if (routeInfo.routeAction !== 'replace') {
+                        latestLeavingView.mount = false;
+                    }
                     this.handleLeavingViewUnmount(routeInfo, latestEnteringView, latestLeavingView);
                 }
                 this.forceUpdate();
@@ -1935,18 +1971,6 @@ class StackManager extends React.PureComponent {
     }
     componentDidMount() {
         this._isMounted = true;
-        if (this.clearOutletTimeout) {
-            /**
-             * The clearOutlet integration with React Router is a bit hacky.
-             * It uses a timeout to clear the outlet after a transition.
-             * In React v18, components are mounted and unmounted in development mode
-             * to check for side effects.
-             *
-             * This clearTimeout prevents the outlet from being cleared when the component is re-mounted,
-             * which should only happen in development mode and as a result of a hot reload.
-             */
-            clearTimeout(this.clearOutletTimeout);
-        }
         if (this.routerOutletElement) {
             this.setupRouterOutlet(this.routerOutletElement);
             this.handlePageTransition(this.props.routeInfo);
@@ -1994,7 +2018,7 @@ class StackManager extends React.PureComponent {
         allViewsInOutlet.forEach((viewItem) => {
             hideIonPageElement(viewItem.ionPageElement);
         });
-        this.clearOutletTimeout = this.context.clearOutlet(this.id);
+        this.context.clearOutlet(this.id);
     }
     /**
      * Sets the transition between pages within this router outlet.
@@ -2199,9 +2223,15 @@ class StackManager extends React.PureComponent {
             }
             // View might have mount=false but ionPageElement still in DOM
             const ionPageInDocument = Boolean((enteringViewItem === null || enteringViewItem === void 0 ? void 0 : enteringViewItem.ionPageElement) && document.body.contains(enteringViewItem.ionPageElement));
+            // For wildcard/parameterized routes, the pattern path (e.g. "/foo/*") will
+            // never equal the resolved pathname (e.g. "/foo/bar"), so the pattern check
+            // alone isn't sufficient. Also, verify the entering view's resolved pathname
+            // differs from the current pathname — if they match, the entering and leaving
+            // views are the same and the swipe gesture shouldn't start.
             const canStartSwipe = !!enteringViewItem &&
                 (enteringViewItem.mount || ionPageInDocument) &&
-                enteringViewItem.routeData.match.pattern.path !== routeInfo.pathname;
+                enteringViewItem.routeData.match.pattern.path !== routeInfo.pathname &&
+                enteringViewItem.routeData.match.pathname !== routeInfo.pathname;
             return canStartSwipe;
         };
         const onStart = async () => {