@ionic/react-router 8.8.1-dev.11773676615.1d6c4cf7 → 8.8.1-dev.11773873479.192398dc

package/dist/index.js

@@ -1540,9 +1540,19 @@ class StackManager extends React.PureComponent {
             clearTimeout(this.outOfScopeUnmountTimeout);
             this.outOfScopeUnmountTimeout = undefined;
         }
+        // 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
+        // blank during its transition animation (issue #25477).
+        //
+        // Removing from the stack triggers React reconciliation via forceUpdate,
+        // which removes the DOM elements. React batches this re-render after all
+        // componentDidUpdate calls in the current cycle, so the parent outlet's
+        // 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) => {
-            hideIonPageElement(viewItem.ionPageElement);
             this.context.unMountViewItem(viewItem);
         });
         this.forceUpdate();
@@ -1782,13 +1792,15 @@ class StackManager extends React.PureComponent {
     }
     /**
      * Determines whether to skip the transition animation and, if so, immediately
-     * hides the leaving view with inline `display:none`.
+     * hides the leaving view with inline `visibility:hidden`.
      *
-     * Skips transitions in outlets nested inside a parent IonPage. These outlets
-     * render pages inside a parent page's content area. The MD animation shows
-     * both entering and leaving pages simultaneously, causing text overlap and
-     * nested scrollbars (each page has its own IonContent). Top-level outlets
-     * are unaffected and animate normally.
+     * Skips transitions only for outlets nested inside a parent IonPage's content
+     * area (i.e., an ion-content sits between the outlet and the .ion-page). These
+     * outlets render child pages inside a parent page's scrollable area, and the MD
+     * animation shows both entering and leaving pages simultaneously — causing text
+     * overlap and nested scrollbars. Standard page-level outlets (tabs, routing,
+     * swipe-to-go-back) animate normally even though they sit inside a framework-
+     * managed .ion-page wrapper from the parent outlet's view stack.
      *
      * Uses inline visibility:hidden rather than ion-page-hidden class because
      * core's beforeTransition() removes ion-page-hidden via setPageHidden().
@@ -1798,9 +1810,23 @@ class StackManager extends React.PureComponent {
      * can resolve normally.
      */
     applySkipAnimationIfNeeded(enteringViewItem, leavingViewItem) {
-        var _a;
-        const isNestedOutlet = !!((_a = this.routerOutletElement) === null || _a === void 0 ? void 0 : _a.closest('.ion-page'));
-        const shouldSkip = isNestedOutlet && !!leavingViewItem && enteringViewItem !== leavingViewItem;
+        var _a, _b;
+        // Only skip for outlets genuinely nested inside a page's content area.
+        // Walk from the outlet up to the nearest .ion-page; if an ion-content
+        // sits in between, the outlet is inside scrollable page content and
+        // animating would cause overlapping pages with duplicate scrollbars.
+        let isInsidePageContent = false;
+        let el = (_b = (_a = this.routerOutletElement) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null;
+        while (el) {
+            if (el.classList.contains('ion-page'))
+                break;
+            if (el.tagName === 'ION-CONTENT') {
+                isInsidePageContent = true;
+                break;
+            }
+            el = el.parentElement;
+        }
+        const shouldSkip = isInsidePageContent && !!leavingViewItem && enteringViewItem !== leavingViewItem;
         if (shouldSkip && (leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.ionPageElement)) {
             leavingViewItem.ionPageElement.style.setProperty('visibility', 'hidden');
             leavingViewItem.ionPageElement.setAttribute('aria-hidden', 'true');
@@ -2596,6 +2622,27 @@ const filterUndefinedParams = (params) => {
     }
     return result;
 };
+/**
+ * Checks if a POP event is a multi-step back navigation (navigate(-n) where n > 1).
+ * Walks the pushedByRoute chain from prevInfo to verify the destination is an ancestor
+ * in the same navigation chain. This distinguishes multi-step back from tab-crossing
+ * back navigation where prevInfo.pathname also differs from the browser destination.
+ */
+const checkIsMultiStepBack = (prevInfo, destinationPathname, history) => {
+    if (!prevInfo || prevInfo.pathname === destinationPathname)
+        return false;
+    const visited = new Set();
+    let walker = prevInfo;
+    while (walker === null || walker === void 0 ? void 0 : walker.pushedByRoute) {
+        if (visited.has(walker.id))
+            break; // cycle guard
+        visited.add(walker.id);
+        if (walker.pushedByRoute === destinationPathname)
+            return true;
+        walker = history.findLastLocation(walker);
+    }
+    return false;
+};
 const areParamsEqual = (a, b) => {
     const paramsA = a || {};
     const paramsB = b || {};
@@ -2769,7 +2816,22 @@ const IonRouter = ({ children, registerHistoryListener }) => {
                         // Back navigation. Record current location key for potential forward
                         forwardStack.current.push(currentLocationKeyRef.current);
                         const prevInfo = locationHistory.current.findLastLocation(currentRoute);
-                        incomingRouteParams.current = Object.assign(Object.assign({}, prevInfo), { routeAction: 'pop', routeDirection: 'back' });
+                        const isMultiStepBack = checkIsMultiStepBack(prevInfo, location.pathname, locationHistory.current);
+                        if (isMultiStepBack) {
+                            const destinationInfo = locationHistory.current.findLastLocationByPathname(location.pathname);
+                            incomingRouteParams.current = Object.assign(Object.assign({}, (destinationInfo || {})), { routeAction: 'pop', routeDirection: 'back' });
+                        }
+                        else if (prevInfo && prevInfo.pathname !== location.pathname && currentRoute.tab) {
+                            // Browser POP destination differs from within-tab back target.
+                            // Sync URL via replace, like handleNavigateBack's non-linear path (#25141).
+                            incomingRouteParams.current = Object.assign(Object.assign({}, prevInfo), { routeAction: 'pop', routeDirection: 'back' });
+                            forwardStack.current = [];
+                            handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back', undefined, undefined, prevInfo.tab);
+                            return;
+                        }
+                        else {
+                            incomingRouteParams.current = Object.assign(Object.assign({}, prevInfo), { routeAction: 'pop', routeDirection: 'back' });
+                        }
                     }
                     else {
                         // It's a non-linear history path like a direct link.
@@ -2825,9 +2887,19 @@ const IonRouter = ({ children, registerHistoryListener }) => {
                     // This preserves tab context for same-tab navigation while allowing cross-tab navigation.
                     routeInfo.tab = routeInfo.tab || leavingLocationInfo.tab;
                     routeInfo.pushedByRoute = leavingLocationInfo.pathname;
-                    // Triggered by a browser back button or handleNavigateBack.
+                }
+                else if (routeInfo.routeAction === 'push' &&
+                    routeInfo.routeDirection === 'none' &&
+                    routeInfo.tab === leavingLocationInfo.tab) {
+                    // Push with routerDirection="none" within the same tab (or non-tab) context.
+                    // Still needs pushedByRoute so the back button can navigate back correctly.
+                    // Cross-tab navigations with direction "none" are handled by the tab-switching
+                    // block below which has different pushedByRoute semantics.
+                    routeInfo.tab = routeInfo.tab || leavingLocationInfo.tab;
+                    routeInfo.pushedByRoute = leavingLocationInfo.pathname;
                 }
                 else if (routeInfo.routeAction === 'pop') {
+                    // Triggered by a browser back button or handleNavigateBack.
                     // Find the route that pushed this one.
                     const r = locationHistory.current.findLastLocation(routeInfo);
                     routeInfo.pushedByRoute = r === null || r === void 0 ? void 0 : r.pushedByRoute;
@@ -2900,8 +2972,10 @@ const IonRouter = ({ children, registerHistoryListener }) => {
     const handleResetTab = (tab, originalHref, originalRouteOptions) => {
         const routeInfo = locationHistory.current.getFirstRouteInfoForTab(tab);
         if (routeInfo) {
+            const [pathname, search] = originalHref.split('?');
             const newRouteInfo = Object.assign({}, routeInfo);
-            newRouteInfo.pathname = originalHref;
+            newRouteInfo.pathname = pathname;
+            newRouteInfo.search = search ? '?' + search : '';
             newRouteInfo.routeOptions = originalRouteOptions;
             incomingRouteParams.current = Object.assign(Object.assign({}, newRouteInfo), { routeAction: 'pop', routeDirection: 'back' });
             navigate(newRouteInfo.pathname + (newRouteInfo.search || ''));
@@ -2928,21 +3002,23 @@ const IonRouter = ({ children, registerHistoryListener }) => {
              * e.g., `/tabs/home` → `/tabs/home`
              */
             if (routeInfo.pathname === pathname) {
-                incomingRouteParams.current = Object.assign(Object.assign({}, routeParams), { routeOptions });
-                navigate(routeInfo.pathname + (routeInfo.search || ''));
+                const newSearch = search ? '?' + search : routeInfo.search;
+                incomingRouteParams.current = Object.assign(Object.assign({}, routeParams), { search: newSearch || '', routeOptions });
+                navigate(routeInfo.pathname + (newSearch || ''));
                 /**
                  * User is navigating to a different tab.
                  * e.g., `/tabs/home` → `/tabs/settings`
                  */
             }
             else {
-                incomingRouteParams.current = Object.assign(Object.assign({}, routeParams), { pathname, search: search ? '?' + search : undefined, routeOptions });
+                incomingRouteParams.current = Object.assign(Object.assign({}, routeParams), { pathname, search: search ? '?' + search : '', routeOptions });
                 navigate(pathname + (search ? '?' + search : ''));
             }
             // User has not navigated to this tab before.
         }
         else {
-            handleNavigate(pathname, 'push', 'none', undefined, routeOptions, tab);
+            const fullPath = pathname + (search ? '?' + search : '');
+            handleNavigate(fullPath, 'push', 'none', undefined, routeOptions, tab);
         }
     };
     /**