test(react): fix test app navigation and routing

packages/angular/standalone/src/directives/proxies.ts

@@ -36,6 +36,7 @@ import { defineCustomElement as defineIonHeader } from '@ionic/core/components/i
 import { defineCustomElement as defineIonImg } from '@ionic/core/components/ion-img.js';
 import { defineCustomElement as defineIonInfiniteScroll } from '@ionic/core/components/ion-infinite-scroll.js';
 import { defineCustomElement as defineIonInfiniteScrollContent } from '@ionic/core/components/ion-infinite-scroll-content.js';
+import { defineCustomElement as defineIonInputOtp } from '@ionic/core/components/ion-input-otp.js';
 import { defineCustomElement as defineIonInputPasswordToggle } from '@ionic/core/components/ion-input-password-toggle.js';
 import { defineCustomElement as defineIonItem } from '@ionic/core/components/ion-item.js';
 import { defineCustomElement as defineIonItemDivider } from '@ionic/core/components/ion-item-divider.js';
@@ -981,6 +982,71 @@ export class IonInfiniteScrollContent {
 export declare interface IonInfiniteScrollContent extends Components.IonInfiniteScrollContent {}
 
 
+@ProxyCmp({
+  defineCustomElementFn: defineIonInputOtp,
+  inputs: ['autocapitalize', 'color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
+  methods: ['setFocus']
+})
+@Component({
+  selector: 'ion-input-otp',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['autocapitalize', 'color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
+  standalone: true
+})
+export class IonInputOtp {
+  protected el: HTMLIonInputOtpElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionComplete', 'ionBlur', 'ionFocus']);
+  }
+}
+
+
+import type { InputOtpInputEventDetail as IIonInputOtpInputOtpInputEventDetail } from '@ionic/core/components';
+import type { InputOtpChangeEventDetail as IIonInputOtpInputOtpChangeEventDetail } from '@ionic/core/components';
+import type { InputOtpCompleteEventDetail as IIonInputOtpInputOtpCompleteEventDetail } from '@ionic/core/components';
+
+export declare interface IonInputOtp extends Components.IonInputOtp {
+  /**
+   * The `ionInput` event is fired each time the user modifies the input's value.
+Unlike the `ionChange` event, the `ionInput` event is fired for each alteration
+to the input's value. This typically happens for each keystroke as the user types.
+
+For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
+is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
+the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
+the input is cleared on edit, the type is `null`.
+   */
+  ionInput: EventEmitter<CustomEvent<IIonInputOtpInputOtpInputEventDetail>>;
+  /**
+   * The `ionChange` event is fired when the user modifies the input's value.
+Unlike the `ionInput` event, the `ionChange` event is only fired when changes
+are committed, not as the user types.
+
+The `ionChange` event fires when the `<ion-input-otp>` component loses
+focus after its value has changed.
+
+This event will not emit when programmatically setting the `value` property.
+   */
+  ionChange: EventEmitter<CustomEvent<IIonInputOtpInputOtpChangeEventDetail>>;
+  /**
+   * Emitted when all input boxes have been filled with valid values.
+   */
+  ionComplete: EventEmitter<CustomEvent<IIonInputOtpInputOtpCompleteEventDetail>>;
+  /**
+   * Emitted when the input group loses focus.
+   */
+  ionBlur: EventEmitter<CustomEvent<FocusEvent>>;
+  /**
+   * Emitted when the input group has focus.
+   */
+  ionFocus: EventEmitter<CustomEvent<FocusEvent>>;
+}
+
+
 @ProxyCmp({
   defineCustomElementFn: defineIonInputPasswordToggle,
   inputs: ['color', 'hideIcon', 'mode', 'showIcon']

packages/react/test/base/src/App.tsx

@@ -24,6 +24,7 @@ import './theme/variables.css';
 import Icons from './pages/Icons';
 import Inputs from './pages/Inputs';
 import Main from './pages/Main';
+import RadioGroup from './pages/RadioGroup';
 import Tabs from './pages/Tabs';
 import TabsBasic from './pages/TabsBasic';
 import NavComponent from './pages/navigation/NavComponent';

packages/react/test/base/src/pages/overlay-components/KeepContentsMounted.tsx

@@ -1,11 +1,16 @@
-import React, { useState } from 'react';
 import {
   IonButton,
   IonContent,
+  IonHeader,
   IonPage,
   IonModal,
   IonPopover,
+  IonToolbar,
+  IonButtons,
+  IonBackButton,
+  IonTitle,
 } from '@ionic/react';
+import React, { useState } from 'react';
 
 const KeepContentsMounted: React.FC = () => {
   const [showModal, setShowModal] = useState(false);
@@ -13,6 +18,14 @@ const KeepContentsMounted: React.FC = () => {
 
   return (
     <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Keep Contents Mounted</IonTitle>
+        </IonToolbar>
+      </IonHeader>
       <IonContent fullscreen>
         <IonButton id="open-modal" onClick={() => setShowModal(true)}>Open Modal</IonButton>
         <IonButton id="open-popover" onClick={() => setShowPopover(true)}>Open Popover</IonButton>

packages/react/test/base/src/pages/overlay-components/OverlayComponents.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-import { Route, Redirect } from 'react-router';
+import { Route, Redirect } from 'react-router-dom';
 import {
   addCircleOutline,
   alarm,
@@ -18,20 +18,18 @@ import PickerComponent from './PickerComponent';
 import PopoverComponent from './PopoverComponent';
 import ToastComponent from './ToastComponent';
 
-interface OverlayHooksProps {}
-
-const OverlayHooks: React.FC<OverlayHooksProps> = () => {
+const OverlayComponents: React.FC = () => {
   return (
     <IonTabs>
       <IonRouterOutlet>
-        <Redirect from="/overlay-components" to="/overlay-components/actionsheet" exact />
-        <Route path="/overlay-components/actionsheet" component={ActionSheetComponent} />
-        <Route path="/overlay-components/alert" component={AlertComponent} />
-        <Route path="/overlay-components/loading" component={LoadingComponent} />
-        <Route path="/overlay-components/modal" component={ModalComponent} />
-        <Route path="/overlay-components/picker" component={PickerComponent} />
-        <Route path="/overlay-components/popover" component={PopoverComponent} />
-        <Route path="/overlay-components/toast" component={ToastComponent} />
+        <Route path="/overlay-components" render={() => <Redirect to="/overlay-components/actionsheet" />} exact={true} />
+        <Route path="/overlay-components/actionsheet" component={ActionSheetComponent} exact={true} />
+        <Route path="/overlay-components/alert" component={AlertComponent} exact={true} />
+        <Route path="/overlay-components/loading" component={LoadingComponent} exact={true} />
+        <Route path="/overlay-components/modal" component={ModalComponent} exact={true} />
+        <Route path="/overlay-components/picker" component={PickerComponent} exact={true} />
+        <Route path="/overlay-components/popover" component={PopoverComponent} exact={true} />
+        <Route path="/overlay-components/toast" component={ToastComponent} exact={true} />
       </IonRouterOutlet>
       <IonTabBar slot="bottom">
         <IonTabButton tab="actionsheet" href="/overlay-components/actionsheet">
@@ -67,4 +65,4 @@ const OverlayHooks: React.FC<OverlayHooksProps> = () => {
   );
 };
 
-export default OverlayHooks;
+export default OverlayComponents;

packages/react/test/base/src/pages/overlay-hooks/OverlayHooks.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
-import { Route, Redirect } from 'react-router';
+import { Route, Redirect } from 'react-router-dom';
 import ActionSheetHook from './ActionSheetHook';
 import {
   addCircleOutline,
@@ -18,20 +18,18 @@ import PickerHook from './PickerHook';
 import PopoverHook from './PopoverHook';
 import ToastHook from './ToastHook';
 
-interface OverlayHooksProps {}
-
-const OverlayHooks: React.FC<OverlayHooksProps> = () => {
+const OverlayHooks: React.FC = () => {
   return (
     <IonTabs>
       <IonRouterOutlet>
-        <Redirect from="/overlay-hooks" to="/overlay-hooks/actionsheet" exact />
-        <Route path="/overlay-hooks/actionsheet" component={ActionSheetHook} />
-        <Route path="/overlay-hooks/alert" component={AlertHook} />
-        <Route path="/overlay-hooks/loading" component={LoadingHook} />
-        <Route path="/overlay-hooks/modal" component={ModalHook} />
-        <Route path="/overlay-hooks/picker" component={PickerHook} />
-        <Route path="/overlay-hooks/popover" component={PopoverHook} />
-        <Route path="/overlay-hooks/toast" component={ToastHook} />
+        <Route path="/overlay-hooks" render={() => <Redirect to="/overlay-hooks/actionsheet" />} exact={true} />
+        <Route path="/overlay-hooks/actionsheet" component={ActionSheetHook} exact={true} />
+        <Route path="/overlay-hooks/alert" component={AlertHook} exact={true} />
+        <Route path="/overlay-hooks/loading" component={LoadingHook} exact={true} />
+        <Route path="/overlay-hooks/modal" component={ModalHook} exact={true} />
+        <Route path="/overlay-hooks/picker" component={PickerHook} exact={true} />
+        <Route path="/overlay-hooks/popover" component={PopoverHook} exact={true} />
+        <Route path="/overlay-hooks/toast" component={ToastHook} exact={true} />
       </IonRouterOutlet>
       <IonTabBar slot="bottom">
         <IonTabButton tab="actionsheet" href="/overlay-hooks/actionsheet">

packages/vue/src/proxies.ts

@@ -492,7 +492,7 @@ export const IonInput: StencilVueComponent<JSX.IonInput, JSX.IonInput["value"]>
 'value', 'ion-input');
 
 
-export const IonInputOtp: StencilVueComponent<JSX.IonInputOtp, JSX.IonInputOtp["value"]> = /*@__PURE__*/ defineContainer<JSX.IonInputOtp, JSX.IonInputOtp["value"]>('ion-input-otp', defineIonInputOtp, [
+export const IonInputOtp: StencilVueComponent<JSX.IonInputOtp> = /*@__PURE__*/ defineContainer<JSX.IonInputOtp>('ion-input-otp', defineIonInputOtp, [
   'autocapitalize',
   'color',
   'disabled',
@@ -517,8 +517,7 @@ export const IonInputOtp: StencilVueComponent<JSX.IonInputOtp, JSX.IonInputOtp["
   'ionComplete',
   'ionBlur',
   'ionFocus'
-],
-'value', 'ion-input');
+]);
 
 
 export const IonInputPasswordToggle: StencilVueComponent<JSX.IonInputPasswordToggle> = /*@__PURE__*/ defineContainer<JSX.IonInputPasswordToggle>('ion-input-password-toggle', defineIonInputPasswordToggle, [