@ionic/react-router 9.0.7-dev.11791478996.1b854592 → 9.0.7-dev.11792524803.14f0e7d2

package/dist/index.js

@@ -1,8 +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 { LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER } from '@ionic/core/components';
-import { MemoryRouter, useLocation as useLocation$1, useNavigationType as useNavigationType$1 } from 'react-router';
 
 const IonRouteInner = ({ path, index, caseSensitive, element }) => {
     return React.createElement(Route, { path: path, index: index, caseSensitive: caseSensitive, element: element });
@@ -622,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,
@@ -982,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 };
@@ -2578,7 +2579,7 @@ class StackManager extends React.PureComponent {
             return canStartSwipe;
         };
         const onStart = async () => {
-            // Core skips onEnd when an animated swipe ends without a progress animation, so a
+            // Core only calls onEnd when a progress animation exists, so with animations off a
             // previous gesture can leave its mark behind. Drop any stale one before marking.
             this.clearSwipeRevealedView();
             const { routeInfo } = this.props;
@@ -2607,9 +2608,9 @@ class StackManager extends React.PureComponent {
             revealIonPageForSwipeBack(enteringViewItem?.ionPageElement);
             // When the gesture starts, kick off a transition controlled via swipe gesture
             if (enteringViewItem && leavingViewItem) {
-                // Without a leaving view there is no progress animation, and core skips
-                // swipeHandler.onEnd for an animated swipe without one, so nothing would clear the
-                // mark until the next transition.
+                // Without a leaving view there is no progress animation, and core only calls
+                // swipeHandler.onEnd when one exists, so nothing would clear the mark until the
+                // next transition.
                 markSwipeRevealed(enteringViewItem);
                 this.swipeRevealedViewItem = enteringViewItem;
                 await this.transitionPage(routeInfo, enteringViewItem, leavingViewItem, 'back', true);
@@ -3708,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,
@@ -3752,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)));
 };
 
@@ -3762,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;
@@ -3791,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)));
 };
 
@@ -3829,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)));
 };