@ionic/react-router 8.8.1-dev.11774273905.1c3b9598 → 8.8.1-dev.11774636992.1511ce70

package/dist/index.js

@@ -1406,6 +1406,12 @@ class StackManager extends React.PureComponent {
         this._isMounted = false;
         /** In-flight requestAnimationFrame IDs from transitionPage, cancelled on unmount. */
         this.transitionRafIds = [];
+        /**
+         * Monotonically increasing counter incremented at the start of each transitionPage call.
+         * Used to detect when an async commit() resolves after a newer transition has already run,
+         * preventing the stale commit from hiding an element that the newer transition made visible.
+         */
+        this.transitionGeneration = 0;
         this.outletMountPath = undefined;
         /**
          * Whether this outlet is at the root level (no parent route matches).
@@ -1556,6 +1562,26 @@ class StackManager extends React.PureComponent {
         this.forceUpdate();
         return true;
     }
+    /**
+     * Handles root navigation by unmounting all non-entering views in this outlet.
+     * Fires ionViewWillLeave / ionViewDidLeave only on views that are currently visible.
+     * Views that are mounted but not visible (e.g., pages earlier in the back stack)
+     * are silently unmounted without lifecycle events, consistent with the behavior
+     * of out-of-scope outlet cleanup.
+     */
+    handleRootNavigation(enteringViewItem) {
+        const allViewsInOutlet = this.context.getViewItemsForOutlet(this.id);
+        allViewsInOutlet.forEach((viewItem) => {
+            if (viewItem === enteringViewItem) {
+                return;
+            }
+            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 }));
+            }
+            this.context.unMountViewItem(viewItem);
+        });
+    }
     /**
      * Handles nested outlet with relative routes but no parent path. Returns true to abort.
      */
@@ -1973,7 +1999,15 @@ class StackManager extends React.PureComponent {
         this._isMounted = true;
         if (this.routerOutletElement) {
             this.setupRouterOutlet(this.routerOutletElement);
-            this.handlePageTransition(this.props.routeInfo);
+            // Defer to a microtask to avoid calling forceUpdate() synchronously during
+            // React 19's reappearLayoutEffects phase, which re-runs componentDidMount
+            // without a preceding componentWillUnmount and causes "Maximum update depth exceeded".
+            const routeInfo = this.props.routeInfo;
+            queueMicrotask(() => {
+                if (this._isMounted && this.props.routeInfo.pathname === routeInfo.pathname) {
+                    this.handlePageTransition(routeInfo);
+                }
+            });
         }
     }
     componentDidUpdate(prevProps) {
@@ -2044,14 +2078,20 @@ class StackManager extends React.PureComponent {
         // Find entering and leaving view items
         const viewItems = this.findViewItems(routeInfo);
         let enteringViewItem = viewItems.enteringViewItem;
-        const leavingViewItem = viewItems.leavingViewItem;
-        const shouldUnmountLeavingViewItem = this.shouldUnmountLeavingView(routeInfo, enteringViewItem, leavingViewItem);
+        let leavingViewItem = viewItems.leavingViewItem;
+        let shouldUnmountLeavingViewItem = this.shouldUnmountLeavingView(routeInfo, enteringViewItem, leavingViewItem);
         // Get parent path for nested outlets
         const parentPath = this.getParentPath();
         // Handle out-of-scope outlet (route outside mount path)
         if (this.handleOutOfScopeOutlet(routeInfo)) {
             return;
         }
+        // Handle root navigation: unmount all non-entering views
+        if (routeInfo.routeDirection === 'root') {
+            this.handleRootNavigation(enteringViewItem);
+            leavingViewItem = undefined;
+            shouldUnmountLeavingViewItem = false;
+        }
         // Clear any pending out-of-scope unmount timeout
         if (this.outOfScopeUnmountTimeout) {
             clearTimeout(this.outOfScopeUnmountTimeout);
@@ -2300,6 +2340,7 @@ class StackManager extends React.PureComponent {
      * overlapping content during the transition. Defaults to `false`.
      */
     async transitionPage(routeInfo, enteringViewItem, leavingViewItem, direction, progressAnimation = false, skipAnimation = false) {
+        const myGeneration = ++this.transitionGeneration;
         const runCommit = async (enteringEl, leavingEl) => {
             const skipTransition = this.skipTransition;
             /**
@@ -2349,10 +2390,22 @@ class StackManager extends React.PureComponent {
             const timeoutMs = 5000;
             const timeoutPromise = new Promise((resolve) => setTimeout(() => resolve('timeout'), timeoutMs));
             const result = await Promise.race([commitPromise.then(() => 'done'), timeoutPromise]);
+            // Bail out if the component unmounted during the commit animation
+            if (!this._isMounted)
+                return;
             if (result === 'timeout') {
                 // Force entering page visible even though commit hung
                 enteringEl.classList.remove('ion-page-invisible');
             }
+            /**
+             * If a newer transitionPage call ran while this commit was in-flight (e.g., a tab
+             * switch fired during a forward animation), the core commit may have applied
+             * ion-page-hidden to leavingEl even though the newer transition already made it
+             * visible. Undo that stale hide so the newer transition's DOM state wins.
+             */
+            if (myGeneration !== this.transitionGeneration && leavingEl && leavingEl === this.transitionEnteringElement) {
+                showIonPageElement(leavingEl);
+            }
             if (!progressAnimation) {
                 enteringEl.classList.remove('ion-page-invisible');
             }
@@ -2361,6 +2414,7 @@ class StackManager extends React.PureComponent {
         const routeInfoFallbackDirection = routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root' ? undefined : routeInfo.routeDirection;
         const directionToUse = direction !== null && direction !== void 0 ? direction : routeInfoFallbackDirection;
         if (enteringViewItem && enteringViewItem.ionPageElement && this.routerOutletElement) {
+            this.transitionEnteringElement = enteringViewItem.ionPageElement;
             if (leavingViewItem && leavingViewItem.ionPageElement && enteringViewItem === leavingViewItem) {
                 // Clone page for same-view transitions (e.g., /user/1 → /user/2)
                 const match = matchComponent(leavingViewItem.reactElement, routeInfo.pathname, undefined, this.outletMountPath);
@@ -2461,15 +2515,22 @@ class StackManager extends React.PureComponent {
                     if (!this._isMounted)
                         return;
                     // Swap visibility synchronously - show entering, hide leaving
+                    // Skip hiding if a newer transition already made leavingEl the entering view
                     enteringEl.classList.remove('ion-page-invisible');
-                    leavingEl.classList.add('ion-page-hidden');
-                    leavingEl.setAttribute('aria-hidden', 'true');
+                    if (myGeneration === this.transitionGeneration || leavingEl !== this.transitionEnteringElement) {
+                        leavingEl.classList.add('ion-page-hidden');
+                        leavingEl.setAttribute('aria-hidden', 'true');
+                    }
                 }
                 else {
                     await runCommit(enteringViewItem.ionPageElement, leavingEl);
                     if (leavingEl && !progressAnimation) {
-                        leavingEl.classList.add('ion-page-hidden');
-                        leavingEl.setAttribute('aria-hidden', 'true');
+                        // Skip hiding if a newer transition already made leavingEl the entering view
+                        // runCommit's generation check has already restored its visibility in that case
+                        if (myGeneration === this.transitionGeneration || leavingEl !== this.transitionEnteringElement) {
+                            leavingEl.classList.add('ion-page-hidden');
+                            leavingEl.setAttribute('aria-hidden', 'true');
+                        }
                     }
                 }
             }
@@ -2769,34 +2830,14 @@ const IonRouter = ({ children, registerHistoryListener }) => {
      * @param action The action that triggered the history change.
      */
     const handleHistoryChange = (location, action) => {
-        var _a, _b, _c, _d, _e;
-        let leavingLocationInfo;
+        var _a, _b, _c, _d;
         /**
-         * A programmatic navigation was triggered.
-         * e.g., `<Navigate />`, `navigate()`, or `handleNavigate()`
+         * The leaving location is always the current route, for both programmatic
+         * and external navigations. Using `previous()` for replace actions was
+         * incorrect: it caused the equality check below to skip navigation when
+         * the replace destination matched the entry two slots back in history.
          */
-        if (incomingRouteParams.current) {
-            /**
-             * The current history entry is overwritten, so the previous entry
-             * is the one we are leaving.
-             */
-            if (((_a = incomingRouteParams.current) === null || _a === void 0 ? void 0 : _a.routeAction) === 'replace') {
-                leavingLocationInfo = locationHistory.current.previous();
-            }
-            else {
-                // If the action is 'push' or 'pop', we want to use the current route.
-                leavingLocationInfo = locationHistory.current.current();
-            }
-        }
-        else {
-            /**
-             * An external navigation was triggered
-             * e.g., browser back/forward button or direct link
-             *
-             * The leaving location is the current route.
-             */
-            leavingLocationInfo = locationHistory.current.current();
-        }
+        const leavingLocationInfo = locationHistory.current.current();
         const leavingUrl = leavingLocationInfo.pathname + leavingLocationInfo.search;
         if (leavingUrl !== location.pathname + location.search) {
             if (!incomingRouteParams.current) {
@@ -2898,7 +2939,7 @@ const IonRouter = ({ children, registerHistoryListener }) => {
              * An existing id indicates that it's re-activating an existing route.
              * e.g., tab switching or navigating back to a previous route
              */
-            if ((_b = incomingRouteParams.current) === null || _b === void 0 ? void 0 : _b.id) {
+            if ((_a = incomingRouteParams.current) === null || _a === void 0 ? void 0 : _a.id) {
                 routeInfo = Object.assign(Object.assign({}, incomingRouteParams.current), { lastPathname: leavingLocationInfo.pathname });
                 locationHistory.current.add(routeInfo);
                 /**
@@ -2907,9 +2948,9 @@ const IonRouter = ({ children, registerHistoryListener }) => {
                  */
             }
             else {
-                const isPushed = ((_c = incomingRouteParams.current) === null || _c === void 0 ? void 0 : _c.routeAction) === 'push' &&
+                const isPushed = ((_b = incomingRouteParams.current) === null || _b === void 0 ? void 0 : _b.routeAction) === 'push' &&
                     incomingRouteParams.current.routeDirection === 'forward';
-                routeInfo = Object.assign(Object.assign({ id: generateId('routeInfo') }, incomingRouteParams.current), { lastPathname: leavingLocationInfo.pathname, pathname: location.pathname, search: location.search, params: ((_d = incomingRouteParams.current) === null || _d === void 0 ? void 0 : _d.params)
+                routeInfo = Object.assign(Object.assign({ id: generateId('routeInfo') }, incomingRouteParams.current), { lastPathname: leavingLocationInfo.pathname, pathname: location.pathname, search: location.search, params: ((_c = incomingRouteParams.current) === null || _c === void 0 ? void 0 : _c.params)
                         ? filterUndefinedParams(incomingRouteParams.current.params)
                         : {}, prevRouteLastPathname: leavingLocationInfo.lastPathname });
                 if (isPushed) {
@@ -2949,7 +2990,7 @@ const IonRouter = ({ children, registerHistoryListener }) => {
                         routeInfo.pushedByRoute = lastRoute === null || lastRoute === void 0 ? void 0 : lastRoute.pushedByRoute;
                     }
                     else {
-                        routeInfo.pushedByRoute = (_e = lastRoute === null || lastRoute === void 0 ? void 0 : lastRoute.pushedByRoute) !== null && _e !== void 0 ? _e : leavingLocationInfo.pathname;
+                        routeInfo.pushedByRoute = (_d = lastRoute === null || lastRoute === void 0 ? void 0 : lastRoute.pushedByRoute) !== null && _d !== void 0 ? _d : leavingLocationInfo.pathname;
                     }
                     // Triggered by `navigate()` with replace or a `<Navigate />` component, etc.
                 }
@@ -3058,6 +3099,7 @@ const IonRouter = ({ children, registerHistoryListener }) => {
      *
      * @param tab The tab to set as active.
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const handleSetCurrentTab = (tab, _routeInfo) => {
         currentTab.current = tab;
         const current = locationHistory.current.current();
@@ -3197,6 +3239,24 @@ const IonRouter = ({ children, registerHistoryListener }) => {
             routeAnimation, tab: navigationTab });
         navigate(path, { replace: routeAction !== 'push' });
     };
+    /**
+     * Navigates to a new root path, clearing Ionic's navigation history so that
+     * canGoBack() returns false after the transition. All previously mounted views
+     * are unmounted. Useful for post-login / post-logout root navigation.
+     *
+     * @param pathname The path to navigate to.
+     * @param routeAnimation An optional custom animation builder.
+     */
+    const handleNavigateRoot = (pathname, routeAnimation) => {
+        currentTab.current = undefined;
+        forwardStack.current = [];
+        incomingRouteParams.current = {
+            routeAction: 'replace',
+            routeDirection: 'root',
+            routeAnimation,
+        };
+        navigate(pathname, { replace: true });
+    };
     const routeMangerContextValue = {
         canGoBack: () => locationHistory.current.canGoBack(),
         clearOutlet: viewStack.current.clear,
@@ -3211,7 +3271,7 @@ const IonRouter = ({ children, registerHistoryListener }) => {
         unMountViewItem: viewStack.current.remove,
     };
     return (React.createElement(RouteManagerContext.Provider, { value: routeMangerContextValue },
-        React.createElement(NavManager, { ionRoute: IonRouteInner, stackManager: StackManager, routeInfo: routeInfo, onNativeBack: handleNativeBack, onNavigateBack: handleNavigateBack, onNavigate: handleNavigate, onSetCurrentTab: handleSetCurrentTab, onChangeTab: handleChangeTab, onResetTab: handleResetTab, locationHistory: locationHistory.current }, children)));
+        React.createElement(NavManager, { ionRoute: IonRouteInner, stackManager: StackManager, routeInfo: routeInfo, onNativeBack: handleNativeBack, onNavigateBack: handleNavigateBack, onNavigate: handleNavigate, onNavigateRoot: handleNavigateRoot, onSetCurrentTab: handleSetCurrentTab, onChangeTab: handleChangeTab, onResetTab: handleResetTab, locationHistory: locationHistory.current }, children)));
 };
 IonRouter.displayName = 'IonRouter';