@ionic/react 8.8.3-nightly.20260401 → 8.8.4-dev.11775078622.1402ffa2

package/dist/index.js

@@ -380,9 +380,7 @@ const useIonViewDidLeave = (callback, deps = []) => {
 };
 
 const NavContext = /*@__PURE__*/ React.createContext({
-    getIonRedirect: () => undefined,
     getIonRoute: () => undefined,
-    getPageManager: () => undefined,
     getStackManager: () => undefined,
     goBack: (route) => {
         if (typeof window !== 'undefined') {
@@ -731,6 +729,11 @@ const createRoutingComponent = (tagName, customElement) => {
             this.handleClick = (e) => {
                 const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
                 if (routerLink !== undefined) {
+                    // Allow modifier key clicks (ctrl/cmd/shift) to open the link in a new tab/window
+                    // without triggering SPA navigation on the current page.
+                    if (e.metaKey || e.ctrlKey || e.shiftKey) {
+                        return;
+                    }
                     e.preventDefault();
                     this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
                 }
@@ -1137,7 +1140,18 @@ class PageManager extends React.PureComponent {
         super(props);
         this.ionPageElementRef = React.createRef();
         // React refs must be stable (not created inline).
-        this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
+        // Wrap merged refs to add ion-page-invisible synchronously when element is created
+        const baseMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
+        this.stableMergedRefs = (node) => {
+            if (node && !node.classList.contains('ion-page-invisible') && !node.classList.contains('ion-page-hidden')) {
+                // Add ion-page-invisible synchronously before first paint (if in an outlet)
+                // This prevents the flash that occurs when componentDidMount runs after paint
+                if (this.context?.isInOutlet?.()) {
+                    node.classList.add('ion-page-invisible');
+                }
+            }
+            baseMergedRefs(node);
+        };
         /**
          * This binds the scope of the following methods to the class scope.
          * The `.bind` method returns a new function, so we need to assign it
@@ -1149,11 +1163,38 @@ class PageManager extends React.PureComponent {
         this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this);
         this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this);
     }
+    parseClasses(className) {
+        if (!className)
+            return new Set();
+        return new Set(className.split(/\s+/).filter(Boolean));
+    }
+    /**
+     * Updates classList by diffing old/new className props.
+     * Preserves framework-added classes (can-go-back, ion-page-invisible, etc.).
+     */
+    updateUserClasses(oldClassName, newClassName) {
+        if (!this.ionPageElementRef.current)
+            return;
+        const oldClasses = this.parseClasses(oldClassName);
+        const newClasses = this.parseClasses(newClassName);
+        oldClasses.forEach((cls) => {
+            if (!newClasses.has(cls)) {
+                this.ionPageElementRef.current.classList.remove(cls);
+            }
+        });
+        newClasses.forEach((cls) => {
+            if (!oldClasses.has(cls)) {
+                this.ionPageElementRef.current.classList.add(cls);
+            }
+        });
+    }
     componentDidMount() {
         if (this.ionPageElementRef.current) {
-            if (this.context.isInOutlet()) {
-                this.ionPageElementRef.current.classList.add('ion-page-invisible');
-            }
+            // Add user classes via DOM manipulation to preserve framework-added classes.
+            // We only set "ion-page" in JSX; user classes are added here.
+            // Note: ion-page-invisible is added in the ref callback (stableMergedRefs) to prevent flash.
+            // The ref callback runs synchronously when the element is created, before the browser paints.
+            this.updateUserClasses(undefined, this.props.className);
             this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo);
             this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
             this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
@@ -1161,6 +1202,11 @@ class PageManager extends React.PureComponent {
             this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
         }
     }
+    componentDidUpdate(prevProps) {
+        if (prevProps.className !== this.props.className) {
+            this.updateUserClasses(prevProps.className, this.props.className);
+        }
+    }
     componentWillUnmount() {
         if (this.ionPageElementRef.current) {
             this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
@@ -1190,9 +1236,11 @@ class PageManager extends React.PureComponent {
     render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { className, children, routeInfo, forwardedRef, ...props } = this.props;
+        // Only set "ion-page" in JSX. User classes are managed via DOM in componentDidMount/componentDidUpdate
+        // to preserve framework-added classes (can-go-back, ion-page-invisible, etc.) when className prop changes.
         return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
                 this.ionLifeCycleContext = context;
-                return (jsx("div", { className: className ? `${className} ion-page` : `ion-page`, ref: this.stableMergedRefs, ...props, children: children }));
+                return (jsx("div", { className: "ion-page", ref: this.stableMergedRefs, ...props, children: children }));
             } }));
     }
     static get contextType() {
@@ -1331,10 +1379,10 @@ class OutletPageManager extends React.Component {
         this.ionLifeCycleContext.ionViewDidLeave();
     }
     render() {
-        const { StackManager, children, routeInfo, ...props } = this.props;
+        const { StackManager, children, routeInfo, id, ...props } = this.props;
         return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
                 this.ionLifeCycleContext = context;
-                return (jsx(StackManager, { routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
+                return (jsx(StackManager, { id: id, routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { id: id, setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
             } }));
     }
     static get contextType() {
@@ -1345,11 +1393,13 @@ class OutletPageManager extends React.Component {
 class IonRouterOutletContainer extends React.Component {
     constructor(props) {
         super(props);
+        this.outletId = props.id ?? `routerOutlet-${generateId('routerOutlet')}`;
     }
     render() {
         const StackManager = this.context.getStackManager();
         const { children, forwardedRef, ...props } = this.props;
-        return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, children: jsx(IonRouterOutletInner, { ...props, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
+        const outletId = props.id ?? this.outletId;
+        return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, id: outletId, children: jsx(IonRouterOutletInner, { ...props, id: outletId, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
     }
     static get contextType() {
         return NavContext;
@@ -1546,7 +1596,9 @@ const matchesTab = (pathname, href) => {
     if (href === undefined) {
         return false;
     }
-    const normalizedHref = href.endsWith('/') && href !== '/' ? href.slice(0, -1) : href;
+    // Strip query string before comparing — href may contain search params (e.g., "/tabs/home?foo=bar")
+    const hrefPathname = href.split('?')[0];
+    const normalizedHref = hrefPathname.endsWith('/') && hrefPathname !== '/' ? hrefPathname.slice(0, -1) : hrefPathname;
     return pathname === normalizedHref || pathname.startsWith(normalizedHref + '/');
 };
 class IonTabBarUnwrapped extends React.PureComponent {
@@ -1638,7 +1690,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
             const prevHref = state.tabs[prevActiveTab].currentHref;
             const prevRouteOptions = state.tabs[prevActiveTab].currentRouteOptions;
             if (activeTab !== prevActiveTab ||
-                prevHref !== props.routeInfo?.pathname ||
+                prevHref !== (props.routeInfo?.pathname || '') + (props.routeInfo?.search || '') ||
                 prevRouteOptions !== props.routeInfo?.routeOptions) {
                 tabs[activeTab] = {
                     originalHref: tabs[activeTab].originalHref,
@@ -1705,7 +1757,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
         return (child) => {
             if (child != null && child.props && (child.type === IonTabButton || child.type.isTabButton)) {
                 const href = child.props.tab === activeTab
-                    ? this.props.routeInfo?.pathname
+                    ? (this.props.routeInfo?.pathname || '') + (this.props.routeInfo?.search || '')
                     : this.state.tabs[child.props.tab].currentHref;
                 const routeOptions = child.props.tab === activeTab
                     ? this.props.routeInfo?.routeOptions
@@ -1830,20 +1882,6 @@ class IonRoute extends React.PureComponent {
     }
 }
 
-class IonRedirect extends React.PureComponent {
-    render() {
-        const IonRedirectInner = this.context.getIonRedirect();
-        if (!this.context.hasIonicRouter() || !IonRedirect) {
-            console.error('You either do not have an Ionic Router package, or your router does not support using <IonRedirect>');
-            return null;
-        }
-        return jsx(IonRedirectInner, { ...this.props });
-    }
-    static get contextType() {
-        return NavContext;
-    }
-}
-
 const IonRouterContext = React.createContext({
     routeInfo: undefined, // TODO(FW-2959): type
     push: () => {
@@ -1852,6 +1890,9 @@ const IonRouterContext = React.createContext({
     back: () => {
         throw new Error('An Ionic Router is required for IonRouterContext');
     },
+    navigateRoot: () => {
+        throw new Error('An Ionic Router is required for IonRouterContext');
+    },
     canGoBack: () => {
         throw new Error('An Ionic Router is required for IonRouterContext');
     },
@@ -1868,9 +1909,10 @@ function useIonRouter() {
         back: context.back,
         push: context.push,
         goBack: context.back,
+        navigateRoot: context.navigateRoot,
         canGoBack: context.canGoBack,
         routeInfo: context.routeInfo,
-    }), [context.back, context.push, context.canGoBack, context.routeInfo]);
+    }), [context.back, context.push, context.navigateRoot, context.canGoBack, context.routeInfo]);
 }
 
 class CreateAnimation extends React.PureComponent {
@@ -2240,6 +2282,7 @@ const RouteManagerContext = /*@__PURE__*/ React.createContext({
     findLeavingViewItemByRouteInfo: () => undefined,
     findViewItemByRouteInfo: () => undefined,
     getChildrenToRender: () => undefined,
+    getViewItemsForOutlet: () => [],
     goBack: () => undefined,
     unMountViewItem: () => undefined,
 });
@@ -2358,7 +2401,14 @@ class LocationHistory {
     _replace(routeInfo) {
         const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
         routeInfos && routeInfos.pop();
-        this.locationHistory.pop();
+        // Get the current route that's being replaced
+        const currentRoute = this.locationHistory[this.locationHistory.length - 1];
+        // Only pop from global history if we're replacing in the same outlet context.
+        // Don't pop if we're entering a nested outlet (current route has no tab, new route has a tab)
+        const isEnteringNestedOutlet = currentRoute && !currentRoute.tab && !!routeInfo.tab;
+        if (!isEnteringNestedOutlet) {
+            this.locationHistory.pop();
+        }
         this._add(routeInfo);
     }
     _clear() {
@@ -2390,6 +2440,20 @@ class LocationHistory {
         }
         return undefined;
     }
+    /**
+     * Returns the most recent RouteInfo in global history (excluding the current
+     * entry) whose pathname matches the given value. Unlike findLastLocation,
+     * this search is tab-agnostic. Used by the multi-step back detection.
+     */
+    findLastLocationByPathname(pathname) {
+        for (let i = this.locationHistory.length - 2; i >= 0; i--) {
+            const ri = this.locationHistory[i];
+            if (ri && ri.pathname === pathname) {
+                return ri;
+            }
+        }
+        return undefined;
+    }
     findLastLocation(routeInfo) {
         const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
         if (routeInfos) {
@@ -2421,6 +2485,17 @@ class LocationHistory {
     canGoBack() {
         return this.locationHistory.length > 1;
     }
+    findTabForPathname(pathname) {
+        for (const tab of Object.keys(this.tabHistory)) {
+            const routeInfos = this.tabHistory[tab];
+            for (let i = routeInfos.length - 1; i >= 0; i--) {
+                if (routeInfos[i].pathname === pathname) {
+                    return tab;
+                }
+            }
+        }
+        return undefined;
+    }
 }
 
 class NavManager extends React.PureComponent {
@@ -2433,6 +2508,9 @@ class NavManager extends React.PureComponent {
             back: (animationBuilder) => {
                 this.goBack(undefined, animationBuilder);
             },
+            navigateRoot: (pathname, animationBuilder) => {
+                this.props.onNavigateRoot(pathname, animationBuilder);
+            },
             canGoBack: () => this.props.locationHistory.canGoBack(),
             nativeBack: () => this.props.onNativeBack(),
             routeInfo: this.props.routeInfo,
@@ -2441,10 +2519,8 @@ class NavManager extends React.PureComponent {
             goBack: this.goBack.bind(this),
             hasIonicRouter: () => true,
             navigate: this.navigate.bind(this),
-            getIonRedirect: this.getIonRedirect.bind(this),
             getIonRoute: this.getIonRoute.bind(this),
             getStackManager: this.getStackManager.bind(this),
-            getPageManager: this.getPageManager.bind(this),
             routeInfo: this.props.routeInfo,
             setCurrentTab: this.props.onSetCurrentTab,
             changeTab: this.props.onChangeTab,
@@ -2477,12 +2553,6 @@ class NavManager extends React.PureComponent {
     navigate(path, direction = 'forward', action = 'push', animationBuilder, options, tab) {
         this.props.onNavigate(path, action, direction, animationBuilder, options, tab);
     }
-    getPageManager() {
-        return PageManager;
-    }
-    getIonRedirect() {
-        return this.props.ionRedirect;
-    }
     getIonRoute() {
         return this.props.ionRoute;
     }
@@ -2512,10 +2582,7 @@ class ViewStacks {
         }
     }
     clear(outletId) {
-        // Give some time for the leaving views to transition before removing
-        return setTimeout(() => {
-            delete this.viewStacks[outletId];
-        }, 500);
+        delete this.viewStacks[outletId];
     }
     getViewItemsForOutlet(outletId) {
         return this.viewStacks[outletId] || [];
@@ -2544,5 +2611,5 @@ class ViewStacks {
     }
 }
 
-export { CreateAnimation, DefaultIonLifeCycleContext, IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputOtp, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonLifeCycleContext, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPickerLegacy, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRedirect, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRoute, IonRouterContext, IonRouterLink, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonTabsContext, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, LocationHistory, NavContext, NavManager, RouteManagerContext, StackContext, ViewLifeCycleManager, ViewStacks, generateId, getConfig, getPlatforms, isPlatform, setupIonicReact, useIonActionSheet, useIonAlert, useIonLoading, useIonModal, useIonPicker, useIonPopover, useIonRouter, useIonToast, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };
+export { CreateAnimation, DefaultIonLifeCycleContext, IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputOtp, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonLifeCycleContext, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPickerLegacy, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRoute, IonRouterContext, IonRouterLink, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonTabsContext, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, LocationHistory, NavContext, NavManager, RouteManagerContext, StackContext, ViewLifeCycleManager, ViewStacks, generateId, getConfig, getPlatforms, isPlatform, setupIonicReact, useIonActionSheet, useIonAlert, useIonLoading, useIonModal, useIonPicker, useIonPopover, useIonRouter, useIonToast, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };
 //# sourceMappingURL=index.js.map