@ionic/react-router 9.0.7-dev.11791381676.118a7a15 → 9.0.7-dev.11792524803.14f0e7d2

package/dist/index.js

@@ -1,41 +1,12 @@
 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 });
 };
 
-/**
- * Compares two route param objects by value, treating a missing object as empty.
- *
- * @param a The first params object.
- * @param b The second params object.
- * @returns True if both have the same keys with equal values.
- */
-const areParamsEqual = (a, b) => {
-    const paramsA = a || {};
-    const paramsB = b || {};
-    const keysA = Object.keys(paramsA);
-    const keysB = Object.keys(paramsB);
-    if (keysA.length !== keysB.length) {
-        return false;
-    }
-    return keysA.every((key) => {
-        const valueA = paramsA[key];
-        const valueB = paramsB[key];
-        if (Array.isArray(valueA) && Array.isArray(valueB)) {
-            if (valueA.length !== valueB.length) {
-                return false;
-            }
-            return valueA.every((entry, idx) => entry === valueB[idx]);
-        }
-        return valueA === valueB;
-    });
-};
-
 /**
  * The matchPath function is used only for matching paths, not rendering components or elements.
  * @see https://reactrouter.com/v6/utils/match-path
@@ -650,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,
@@ -722,42 +695,6 @@ const resolveIndexRouteMatch = (viewItem, pathname, parentPath) => {
     const normalizedBase = normalizePathnameForComparison(previousMatch.pathnameBase || previousMatch.pathname || '');
     return normalizedPathname === normalizedBase ? previousMatch : null;
 };
-const shallowEqual = (a, b) => {
-    const aRecord = a;
-    const bRecord = b;
-    const aKeys = Object.keys(aRecord);
-    return aKeys.length === Object.keys(bRecord).length && aKeys.every((key) => aRecord[key] === bRecord[key]);
-};
-const isSameMatch = (a, b) => a === b ||
-    (a.pathname === b.pathname &&
-        a.pathnameBase === b.pathnameBase &&
-        areParamsEqual(a.params, b.params) &&
-        (a.route === b.route || shallowEqual(a.route, b.route)));
-/**
- * The outlet rebuilds a view's RouteContext on every render, and it renders
- * several times per navigation, so this compares by content to tell whether
- * the view's route state actually changed.
- */
-const isSameRouteContext = (a, b) => {
-    const { matches: aMatches, ...aRest } = a;
-    const { matches: bMatches, ...bRest } = b;
-    return (shallowEqual(aRest, bRest) &&
-        aMatches.length === bMatches.length &&
-        aMatches.every((match, i) => isSameMatch(match, bMatches[i])));
-};
-/**
- * Provides a view's RouteContext, reusing the previous value while its content
- * is unchanged or while `hold` is set (the view is not the one being shown), so
- * RouteContext-only readers like useParams skip re-rendering. Kept in component
- * state since two outlets with the same id share view items.
- */
-const ViewRouteContextProvider = ({ value, hold, children }) => {
-    const [heldValue, setHeldValue] = React.useState(value);
-    if (!hold && heldValue !== value && !isSameRouteContext(heldValue, value)) {
-        setHeldValue(value);
-    }
-    return React.createElement(UNSAFE_RouteContext.Provider, { value: heldValue }, children);
-};
 class ReactRouterViewStack extends ViewStacks {
     /**
      * Stores the computed parent path for each outlet.
@@ -958,8 +895,6 @@ class ReactRouterViewStack extends ViewStacks {
             viewItem.mount = true;
             viewItem.routeData.match = match;
         }
-        // Set when a more specific sibling owns the pathname, so this view is hidden even though it matches.
-        let hiddenBySpecificMatch = false;
         // Deactivate wildcard (catch-all) and empty-path (default) routes when a more-specific route matches.
         // This prevents "Not found" or fallback pages from showing alongside valid routes.
         if (routePath === '*' || routePath === '/*' || routePath === '') {
@@ -1016,7 +951,6 @@ class ReactRouterViewStack extends ViewStacks {
                 }
             }
             if (hasSpecificMatch && !isSwipeRevealed(viewItem)) {
-                hiddenBySpecificMatch = true;
                 // A splat can be the outlet's container page rather than a "not found" fallback.
                 // Pushed over it is the page underneath, so unmounting it destroys its state and
                 // leaves nothing for back to reveal. Hiding it below covers that. A view with no
@@ -1039,11 +973,6 @@ class ReactRouterViewStack extends ViewStacks {
             viewItem.routeData.match = match;
         }
         const routeMatch = shouldSkipForDifferentParam ? viewItem.routeData?.match : match || viewItem.routeData?.match;
-        // Hold the RouteContext while the view isn't the one shown: a sibling owns the pathname, it's
-        // parked on another param instance, or it doesn't match. A pathless default only strictly
-        // matches at "/", so a missing match there doesn't mean it's hidden.
-        const isPathlessDefault = !routePath && !viewItem.routeData?.childProps?.index;
-        const holdRouteContext = hiddenBySpecificMatch || !!shouldSkipForDifferentParam || (!match && !isPathlessDefault);
         return (React.createElement(UNSAFE_RouteContext.Consumer, { key: `view-context-${viewItem.id}` }, (parentContext) => {
             const parentMatches = (parentContext?.matches ?? []);
             // Accumulate params from parent matches, with fallback to other outlets
@@ -1054,12 +983,12 @@ 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 };
             return (React.createElement(ViewLifeCycleManager, { key: `view-${viewItem.id}`, mount: viewItem.mount, removeView: () => this.remove(viewItem) },
-                React.createElement(ViewRouteContextProvider, { value: routeContextValue, hold: holdRouteContext }, componentElement)));
+                React.createElement(UNSAFE_RouteContext.Provider, { value: routeContextValue }, componentElement)));
         }));
     };
     /**
@@ -3178,6 +3107,26 @@ const checkIsMultiStepBack = (prevInfo, destinationPathname, history) => {
     }
     return false;
 };
+const areParamsEqual = (a, b) => {
+    const paramsA = a || {};
+    const paramsB = b || {};
+    const keysA = Object.keys(paramsA);
+    const keysB = Object.keys(paramsB);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    return keysA.every((key) => {
+        const valueA = paramsA[key];
+        const valueB = paramsB[key];
+        if (Array.isArray(valueA) && Array.isArray(valueB)) {
+            if (valueA.length !== valueB.length) {
+                return false;
+            }
+            return valueA.every((entry, idx) => entry === valueB[idx]);
+        }
+        return valueA === valueB;
+    });
+};
 const IonRouter = ({ children, registerHistoryListener }) => {
     const location = useLocation();
     const navigate = useNavigate();
@@ -3760,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,
@@ -3804,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)));
 };
 
@@ -3814,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;
@@ -3843,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)));
 };
 
@@ -3881,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)));
 };