chore(): sync with main

packages/react-router/src/ReactRouter/IonReactHashRouter.tsx

@@ -1,11 +1,8 @@
-import {
-  Action as HistoryAction,
-  History,
-  Location as HistoryLocation,
-  createHashHistory as createHistory,
-} from 'history';
+import type { Action as HistoryAction, History, Location as HistoryLocation } from 'history';
+import { createHashHistory as createHistory } from 'history';
 import React from 'react';
-import { BrowserRouterProps, Router } from 'react-router-dom';
+import type { BrowserRouterProps } from 'react-router-dom';
+import { Router } from 'react-router-dom';
 
 import { IonRouter } from './IonRouter';
 

packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx

@@ -1,6 +1,7 @@
-import { Action as HistoryAction, Location as HistoryLocation, MemoryHistory } from 'history';
+import type { Action as HistoryAction, Location as HistoryLocation, MemoryHistory } from 'history';
 import React from 'react';
-import { MemoryRouterProps, Router } from 'react-router';
+import type { MemoryRouterProps } from 'react-router';
+import { Router } from 'react-router';
 
 import { IonRouter } from './IonRouter';
 

packages/react-router/src/ReactRouter/IonReactRouter.tsx

@@ -1,11 +1,8 @@
-import {
-  Action as HistoryAction,
-  History,
-  Location as HistoryLocation,
-  createBrowserHistory as createHistory,
-} from 'history';
+import type { Action as HistoryAction, History, Location as HistoryLocation } from 'history';
+import { createBrowserHistory as createHistory } from 'history';
 import React from 'react';
-import { BrowserRouterProps, Router } from 'react-router-dom';
+import type { BrowserRouterProps } from 'react-router-dom';
+import { Router } from 'react-router-dom';
 
 import { IonRouter } from './IonRouter';
 
@@ -25,21 +22,21 @@ export class IonReactRouter extends React.Component<IonReactRouterProps> {
     this.registerHistoryListener = this.registerHistoryListener.bind(this);
   }
 
- /**
-  * history@4.x passes separate location and action
-  * params. history@5.x passes location and action
-  * together as a single object.
-  * TODO: If support for React Router <=5 is dropped
-  * this logic is no longer needed. We can just assume
-  * a single object with both location and action.
-  */
+  /**
+   * history@4.x passes separate location and action
+   * params. history@5.x passes location and action
+   * together as a single object.
+   * TODO: If support for React Router <=5 is dropped
+   * this logic is no longer needed. We can just assume
+   * a single object with both location and action.
+   */
   handleHistoryChange(location: HistoryLocation, action: HistoryAction) {
-   const locationValue = (location as any).location || location;
-   const actionValue = (location as any).action || action;
-   if (this.historyListenHandler) {
-     this.historyListenHandler(locationValue, actionValue);
-   }
- }
+    const locationValue = (location as any).location || location;
+    const actionValue = (location as any).action || action;
+    if (this.historyListenHandler) {
+      this.historyListenHandler(locationValue, actionValue);
+    }
+  }
 
   registerHistoryListener(cb: (location: HistoryLocation, action: HistoryAction) => void) {
     this.historyListenHandler = cb;

packages/react-router/src/ReactRouter/IonRouteInner.tsx

@@ -1,4 +1,4 @@
-import { IonRouteProps } from '@ionic/react';
+import type { IonRouteProps } from '@ionic/react';
 import React from 'react';
 import { Route } from 'react-router';
 

packages/react-router/src/ReactRouter/IonRouter.tsx

@@ -1,19 +1,16 @@
-import {
+import type {
   AnimationBuilder,
-  LocationHistory,
-  NavManager,
   RouteAction,
   RouteInfo,
-  RouteManagerContext,
   RouteManagerContextState,
   RouterDirection,
   ViewItem,
-  generateId,
-  getConfig,
 } from '@ionic/react';
-import { Action as HistoryAction, Location as HistoryLocation } from 'history';
+import { LocationHistory, NavManager, RouteManagerContext, generateId, getConfig } from '@ionic/react';
+import type { Action as HistoryAction, Location as HistoryLocation } from 'history';
 import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import type { RouteComponentProps } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 
 import { IonRouteInner } from './IonRouteInner';
 import { ReactRouterViewStack } from './ReactRouterViewStack';
@@ -25,9 +22,7 @@ export interface LocationState {
 }
 
 interface IonRouteProps extends RouteComponentProps<{}, {}, LocationState> {
-  registerHistoryListener: (
-    cb: (location: HistoryLocation<any>, action: HistoryAction) => void
-  ) => void;
+  registerHistoryListener: (cb: (location: HistoryLocation<any>, action: HistoryAction) => void) => void;
 }
 
 interface IonRouteState {
@@ -77,7 +72,9 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
   }
 
   handleChangeTab(tab: string, path?: string, routeOptions?: any) {
-    if (!path) { return; }
+    if (!path) {
+      return;
+    }
 
     const routeInfo = this.locationHistory.getCurrentRouteInfoForTab(tab);
     const [pathname, search] = path.split('?');
@@ -152,8 +149,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
         this.locationHistory.add(routeInfo);
       } else {
         const isPushed =
-          this.incomingRouteParams.routeAction === 'push' &&
-          this.incomingRouteParams.routeDirection === 'forward';
+          this.incomingRouteParams.routeAction === 'push' && this.incomingRouteParams.routeDirection === 'forward';
         routeInfo = {
           id: generateId('routeInfo'),
           ...this.incomingRouteParams,
@@ -183,7 +179,10 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
            * say that /home was pushed by /home which is not correct.
            */
           const currentPushedBy = currentRouteInfo?.pushedByRoute;
-          const pushedByRoute = (currentPushedBy !== undefined && currentPushedBy !== routeInfo.pathname) ? currentPushedBy : routeInfo.pushedByRoute;
+          const pushedByRoute =
+            currentPushedBy !== undefined && currentPushedBy !== routeInfo.pathname
+              ? currentPushedBy
+              : routeInfo.pushedByRoute;
 
           routeInfo.lastPathname = currentRouteInfo?.pathname || routeInfo.lastPathname;
           routeInfo.prevRouteLastPathname = currentRouteInfo?.lastPathname;
@@ -253,16 +252,13 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
         };
         if (
           routeInfo.lastPathname === routeInfo.pushedByRoute ||
-          (
-            /**
-             * We need to exclude tab switches/tab
-             * context changes here because tabbed
-             * navigation is not linear, but router.back()
-             * will go back in a linear fashion.
-             */
-            prevInfo.pathname === routeInfo.pushedByRoute &&
-            routeInfo.tab === '' && prevInfo.tab === ''
-          )
+          /**
+           * We need to exclude tab switches/tab
+           * context changes here because tabbed
+           * navigation is not linear, but router.back()
+           * will go back in a linear fashion.
+           */
+          (prevInfo.pathname === routeInfo.pushedByRoute && routeInfo.tab === '' && prevInfo.tab === '')
         ) {
           /**
            * history@4.x uses goBack(), history@5.x uses back()

packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx

@@ -1,11 +1,5 @@
-import {
-  IonRoute,
-  RouteInfo,
-  ViewItem,
-  ViewLifeCycleManager,
-  ViewStacks,
-  generateId,
-} from '@ionic/react';
+import type { RouteInfo, ViewItem } from '@ionic/react';
+import { IonRoute, ViewLifeCycleManager, ViewStacks, generateId } from '@ionic/react';
 import React from 'react';
 import { matchPath } from 'react-router';
 
@@ -19,12 +13,7 @@ export class ReactRouterViewStack extends ViewStacks {
     this.findViewItemByPathname = this.findViewItemByPathname.bind(this);
   }
 
-  createViewItem(
-    outletId: string,
-    reactElement: React.ReactElement,
-    routeInfo: RouteInfo,
-    page?: HTMLElement
-  ) {
+  createViewItem(outletId: string, reactElement: React.ReactElement, routeInfo: RouteInfo, page?: HTMLElement) {
     const viewItem: ViewItem = {
       id: generateId('viewItem'),
       outletId,
@@ -117,12 +106,7 @@ export class ReactRouterViewStack extends ViewStacks {
   }
 
   findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string, mustBeIonRoute = true) {
-    const { viewItem } = this.findViewItemByPath(
-      routeInfo.lastPathname!,
-      outletId,
-      false,
-      mustBeIonRoute
-    );
+    const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname!, outletId, false, mustBeIonRoute);
     return viewItem;
   }
 
@@ -131,12 +115,7 @@ export class ReactRouterViewStack extends ViewStacks {
     return viewItem;
   }
 
-  private findViewItemByPath(
-    pathname: string,
-    outletId?: string,
-    forceExact?: boolean,
-    mustBeIonRoute?: boolean
-  ) {
+  private findViewItemByPath(pathname: string, outletId?: string, forceExact?: boolean, mustBeIonRoute?: boolean) {
     let viewItem: ViewItem | undefined;
     let match: ReturnType<typeof matchPath> | undefined;
     let viewStack: ViewItem[];

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -1,21 +1,17 @@
-import {
-  RouteInfo,
-  RouteManagerContext,
-  StackContext,
-  StackContextState,
-  ViewItem,
-  generateId,
-  getConfig,
-} from '@ionic/react';
+import type { RouteInfo, StackContextState, ViewItem } from '@ionic/react';
+import { RouteManagerContext, StackContext, generateId, getConfig } from '@ionic/react';
 import React from 'react';
 import { matchPath } from 'react-router-dom';
 
 import { clonePageElement } from './clonePageElement';
 
+// TODO(FW-2959): types
+
 interface StackManagerProps {
   routeInfo: RouteInfo;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface StackManagerState {}
 
 const isViewVisible = (el: HTMLElement) =>
@@ -98,10 +94,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
       let leavingViewItem = this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id);
 
       if (!leavingViewItem && routeInfo.prevRouteLastPathname) {
-        leavingViewItem = this.context.findViewItemByPathname(
-          routeInfo.prevRouteLastPathname,
-          this.id
-        );
+        leavingViewItem = this.context.findViewItemByPathname(routeInfo.prevRouteLastPathname, this.id);
       }
 
       // Check if leavingViewItem should be unmounted
@@ -117,10 +110,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
         }
       }
 
-      const enteringRoute = matchRoute(
-        this.ionRouterOutlet?.props.children,
-        routeInfo
-      ) as React.ReactElement;
+      const enteringRoute = matchRoute(this.ionRouterOutlet?.props.children, routeInfo) as React.ReactElement;
 
       if (enteringViewItem) {
         enteringViewItem.reactElement = enteringRoute;
@@ -154,10 +144,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
          * to find the leaving view item to transition between.
          */
         if (!leavingViewItem && this.props.routeInfo.prevRouteLastPathname) {
-          leavingViewItem = this.context.findViewItemByPathname(
-            this.props.routeInfo.prevRouteLastPathname,
-            this.id
-          );
+          leavingViewItem = this.context.findViewItemByPathname(this.props.routeInfo.prevRouteLastPathname, this.id);
         }
 
         /**
@@ -309,10 +296,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
          * As a result, we should not hide the view item here
          * as it will cause the current view to be hidden.
          */
-        if (
-          enteringViewItem !== leavingViewItem &&
-          enteringViewItem?.ionPageElement !== undefined
-        ) {
+        if (enteringViewItem !== leavingViewItem && enteringViewItem?.ionPageElement !== undefined) {
           const { ionPageElement } = enteringViewItem;
           ionPageElement.setAttribute('aria-hidden', 'true');
           ionPageElement.classList.add('ion-page-hidden');
@@ -376,17 +360,11 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
     const routerOutlet = this.routerOutletElement!;
 
     const routeInfoFallbackDirection =
-      routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root'
-        ? undefined
-        : routeInfo.routeDirection;
+      routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root' ? undefined : routeInfo.routeDirection;
     const directionToUse = direction ?? routeInfoFallbackDirection;
 
     if (enteringViewItem && enteringViewItem.ionPageElement && this.routerOutletElement) {
-      if (
-        leavingViewItem &&
-        leavingViewItem.ionPageElement &&
-        enteringViewItem === leavingViewItem
-      ) {
+      if (leavingViewItem && leavingViewItem.ionPageElement && enteringViewItem === leavingViewItem) {
         // If a page is transitioning to another version of itself
         // we clone it so we can have an animation to show
 
@@ -416,14 +394,9 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
     const ionRouterOutlet = React.Children.only(children) as React.ReactElement;
     this.ionRouterOutlet = ionRouterOutlet;
 
-    const components = this.context.getChildrenToRender(
-      this.id,
-      this.ionRouterOutlet,
-      this.props.routeInfo,
-      () => {
-        this.forceUpdate();
-      }
-    );
+    const components = this.context.getChildrenToRender(this.id, this.ionRouterOutlet, this.props.routeInfo, () => {
+      this.forceUpdate();
+    });
 
     return (
       <StackContext.Provider value={this.stackContextValue}>