@ionic/react-router 9.0.6-nightly.20260930 → 9.0.7-dev.11790792026.1963eab3

package/dist/index.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { Route, matchPath as matchPath$1, Routes, Navigate, UNSAFE_RouteContext, matchRoutes, useLocation, useNavigate, BrowserRouter, useNavigationType, HashRouter } from 'react-router-dom';
+import { Route, matchPath as matchPath$1, Routes, Navigate, UNSAFE_RouteContext, matchRoutes, useLocation, useNavigate, BrowserRouter, useNavigationType, MemoryRouter, HashRouter } from 'react-router-dom';
 import { IonRoute, ViewStacks, generateId, ViewLifeCycleManager, createDebugLogger, StackContext, RouteManagerContext, getConfig, LocationHistory, NavManager } from '@ionic/react';
-import { MemoryRouter, useLocation as useLocation$1, useNavigationType as useNavigationType$1 } from 'react-router';
+import { LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER } from '@ionic/core/components';
 
 const IonRouteInner = ({ path, index, caseSensitive, element }) => {
     return React.createElement(Route, { path: path, index: index, caseSensitive: caseSensitive, element: element });
@@ -621,14 +621,16 @@ const getFallbackParamsFromViewItems = (allViewItems, currentOutletId, currentPa
     return params;
 };
 /**
- * Builds the matches array for RouteContext.
+ * Builds the matches array for RouteContext. The leaf `pathname` uses the absolute base,
+ * because the raw match is relative for a route without a leading slash, which breaks
+ * relative links, and includes a splat's tail, which loops an index `<Navigate>`.
  */
-const buildContextMatches = (parentMatches, combinedParams, routeMatch, routeInfoPathname, absolutePathnameBase, viewItem, routeElement, componentElement) => {
+const buildContextMatches = (parentMatches, combinedParams, absolutePathnameBase, viewItem, routeElement, componentElement) => {
     return [
         ...parentMatches,
         {
             params: combinedParams,
-            pathname: routeMatch?.pathname || routeInfoPathname,
+            pathname: absolutePathnameBase,
             pathnameBase: absolutePathnameBase,
             route: {
                 id: viewItem.id,
@@ -981,7 +983,7 @@ class ReactRouterViewStack extends ViewStacks {
             const combinedParams = { ...accumulatedParentParams, ...(routeMatch?.params ?? {}) };
             const parentPathnameBase = parentMatches.length > 0 ? parentMatches[parentMatches.length - 1].pathnameBase : '/';
             const absolutePathnameBase = computeAbsolutePathnameBase(routeElement, routeMatch, parentPathnameBase, routeInfo.pathname);
-            const contextMatches = buildContextMatches(parentMatches, combinedParams, routeMatch, routeInfo.pathname, absolutePathnameBase, viewItem, routeElement, componentElement);
+            const contextMatches = buildContextMatches(parentMatches, combinedParams, absolutePathnameBase, viewItem, routeElement, componentElement);
             const routeContextValue = parentContext
                 ? { ...parentContext, matches: contextMatches }
                 : { outlet: null, matches: contextMatches, isDataRoute: false };
@@ -1452,6 +1454,12 @@ const revealIonPageForSwipeBack = (element) => {
         element.removeAttribute('aria-hidden');
     }
 };
+/** Dispatches a view lifecycle event the way core's `lifecycle()` does. */
+const dispatchLifecycleEvent = (element, eventName) => {
+    if (element) {
+        element.dispatchEvent(new CustomEvent(eventName, { bubbles: false, cancelable: false }));
+    }
+};
 /**
  * A leaf view is "preservable" on browser-back (pop) when its React state
  * should survive a forward-pop round-trip. Non-parameterized leaf paths
@@ -1688,8 +1696,8 @@ class StackManager extends React.PureComponent {
         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 }));
+                dispatchLifecycleEvent(viewItem.ionPageElement, LIFECYCLE_WILL_LEAVE);
+                dispatchLifecycleEvent(viewItem.ionPageElement, LIFECYCLE_DID_LEAVE);
             }
         });
         // Defer removal of view items to allow the parent outlet's leaving-page
@@ -1724,8 +1732,8 @@ class StackManager extends React.PureComponent {
                 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 }));
+                dispatchLifecycleEvent(viewItem.ionPageElement, LIFECYCLE_WILL_LEAVE);
+                dispatchLifecycleEvent(viewItem.ionPageElement, LIFECYCLE_DID_LEAVE);
             }
             this.context.unMountViewItem(viewItem);
         });
@@ -2856,10 +2864,34 @@ class StackManager extends React.PureComponent {
                     // Bail out if the component unmounted during waitForComponentsReady
                     if (!this._isMounted)
                         return;
+                    const isCurrent = myGeneration === this.transitionGeneration;
+                    // A page the newest transition is entering is not leaving after all.
+                    const isLeaving = isCurrent || leavingEl !== this.transitionEnteringElement;
+                    // Already hidden means the leave events have fired. This checks the class rather
+                    // than `isViewVisible` because a nested outlet marks its leaving page
+                    // `visibility: hidden` before we get here and still needs `ionViewDidLeave`.
+                    const announceLeaving = isLeaving && !leavingEl.classList.contains('ion-page-hidden');
+                    /**
+                     * Dispatch the lifecycle events, since we skipped `commit()`. Only the
+                     * newest transition fires the entering events, and the class swap follows
+                     * all four so the ordering matches core's `transition()`.
+                     *
+                     * These run after `waitForComponentsReady` because on a first mount the
+                     * page has not attached its listeners yet.
+                     */
+                    if (announceLeaving) {
+                        dispatchLifecycleEvent(leavingEl, LIFECYCLE_WILL_LEAVE);
+                    }
+                    if (isCurrent) {
+                        dispatchLifecycleEvent(enteringEl, LIFECYCLE_WILL_ENTER);
+                        dispatchLifecycleEvent(enteringEl, LIFECYCLE_DID_ENTER);
+                    }
+                    if (announceLeaving) {
+                        dispatchLifecycleEvent(leavingEl, LIFECYCLE_DID_LEAVE);
+                    }
                     // 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');
-                    if (myGeneration === this.transitionGeneration || leavingEl !== this.transitionEnteringElement) {
+                    if (isLeaving) {
                         leavingEl.classList.add('ion-page-hidden');
                         leavingEl.setAttribute('aria-hidden', 'true');
                     }
@@ -3677,6 +3709,18 @@ const IonRouter = ({ children, registerHistoryListener }) => {
 };
 IonRouter.displayName = 'IonRouter';
 
+/**
+ * Defaults React Router 7's `useTransitions` to `false`, since a transition can defer the
+ * commit past Ionic's page-visible signal. React Router 6 ignores the prop.
+ *
+ * Uses `??` instead of spreading a default first, because an explicit
+ * `useTransitions={undefined}` would override it and React Router reads that as on.
+ */
+const withTransitionDefaults = (props) => {
+    const { useTransitions } = props;
+    return { ...props, useTransitions: useTransitions ?? false };
+};
+
 /**
  * `IonReactRouter` facilitates the integration of Ionic's specific
  * navigation and UI management with the standard React Router mechanisms,
@@ -3721,7 +3765,7 @@ const RouterContent$2 = ({ children }) => {
     return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
 };
 const IonReactRouter = ({ children, ...browserRouterProps }) => {
-    return (React.createElement(BrowserRouter, { ...browserRouterProps },
+    return (React.createElement(BrowserRouter, { ...withTransitionDefaults(browserRouterProps) },
         React.createElement(RouterContent$2, null, children)));
 };
 
@@ -3731,8 +3775,8 @@ const IonReactRouter = ({ children, ...browserRouterProps }) => {
  * isn't available or desirable.
  */
 const RouterContent$1 = ({ children }) => {
-    const location = useLocation$1();
-    const navigationType = useNavigationType$1();
+    const location = useLocation();
+    const navigationType = useNavigationType();
     const historyListenHandler = useRef();
     const registerHistoryListener = useCallback((cb) => {
         historyListenHandler.current = cb;
@@ -3760,7 +3804,7 @@ const RouterContent$1 = ({ children }) => {
     return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
 };
 const IonReactMemoryRouter = ({ children, ...routerProps }) => {
-    return (React.createElement(MemoryRouter, { ...routerProps },
+    return (React.createElement(MemoryRouter, { ...withTransitionDefaults(routerProps) },
         React.createElement(RouterContent$1, null, children)));
 };
 
@@ -3798,7 +3842,7 @@ const RouterContent = ({ children }) => {
     return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
 };
 const IonReactHashRouter = ({ children, ...routerProps }) => {
-    return (React.createElement(HashRouter, { ...routerProps },
+    return (React.createElement(HashRouter, { ...withTransitionDefaults(routerProps) },
         React.createElement(RouterContent, null, children)));
 };