fix(react): resolve errors with JSX and types

packages/react/src/components/IonApp.tsx

@@ -1,5 +1,5 @@
 import type { JSX as LocalJSX } from '@ionic/core/components';
-import React from 'react';
+import React, { type PropsWithChildren } from 'react';
 
 import type { IonContextInterface } from '../contexts/IonContext';
 import { IonContext } from '../contexts/IonContext';
@@ -9,13 +9,11 @@ import { IonOverlayManager } from './IonOverlayManager';
 import type { IonicReactProps } from './IonicReactProps';
 import { IonAppInner } from './inner-proxies';
 
-type Props = LocalJSX.IonApp &
+type Props = PropsWithChildren<LocalJSX.IonApp & IonicReactProps & {
-  IonicReactProps & {
   ref?: React.Ref<HTMLIonAppElement>;
-  };
+}>;
 
-export const IonApp = /*@__PURE__*/ (() =>
+export class IonApp extends React.Component<Props> {
-  class extends React.Component<Props> {
   addOverlayCallback?: (id: string, overlay: ReactComponentOrElement, containerElement: HTMLDivElement) => void;
   removeOverlayCallback?: (id: string) => void;
 
@@ -23,9 +21,6 @@ export const IonApp = /*@__PURE__*/ (() =>
     super(props);
   }
 
-    /*
-      Wire up methods to call into IonOverlayManager
-    */
   ionContext: IonContextInterface = {
     addOverlay: (id: string, overlay: ReactComponentOrElement, containerElement: HTMLDivElement) => {
       if (this.addOverlayCallback) {
@@ -55,7 +50,5 @@ export const IonApp = /*@__PURE__*/ (() =>
     );
   }
 
-    static get displayName() {
+  static displayName = 'IonApp';
-      return 'IonApp';
+}
-    }
-  })();

packages/react/src/components/navigation/IonBackButton.tsx

@@ -1,23 +1,15 @@
 import type { JSX as LocalJSX } from '@ionic/core/components';
-import React from 'react';
+import React, { type PropsWithChildren } from 'react';
 
 import { NavContext } from '../../contexts/NavContext';
 import type { IonicReactProps } from '../IonicReactProps';
 import { IonBackButtonInner } from '../inner-proxies';
 
-type Props = Omit<LocalJSX.IonBackButton, 'icon'> &
+type Props = PropsWithChildren<LocalJSX.IonBackButton & IonicReactProps & {
-  IonicReactProps & {
-    icon?:
-      | {
-          ios: string;
-          md: string;
-        }
-      | string;
   ref?: React.Ref<HTMLIonBackButtonElement>;
-  };
+}>;
 
-export const IonBackButton = /*@__PURE__*/ (() =>
+export class IonBackButton extends React.Component<Props> {
-  class extends React.Component<Props> {
   context!: React.ContextType<typeof NavContext>;
 
   clickButton = (e: React.MouseEvent) => {
@@ -51,4 +43,8 @@ export const IonBackButton = /*@__PURE__*/ (() =>
   static get contextType() {
     return NavContext;
   }
-  })();
+
+  shouldComponentUpdate(_nextProps: Readonly<Props>): boolean {
+    return true;
+  }
+}

packages/react/src/components/navigation/IonTabButton.tsx

@@ -13,10 +13,14 @@ type Props = LocalJSX.IonTabButton &
     onPointerDown?: React.PointerEventHandler<HTMLIonTabButtonElement>;
     onTouchEnd?: React.TouchEventHandler<HTMLIonTabButtonElement>;
     onTouchMove?: React.TouchEventHandler<HTMLIonTabButtonElement>;
+    children?: React.ReactNode;
   };
 
-export const IonTabButton = /*@__PURE__*/ (() =>
+export class IonTabButton extends React.Component<Props> {
-  class extends React.Component<Props> {
+  shouldComponentUpdate(_nextProps: Readonly<Props>, _nextState: Readonly<{}>): boolean {
+    return true;
+  }
+
   constructor(props: Props) {
     super(props);
     this.handleIonTabButtonClick = this.handleIonTabButtonClick.bind(this);
@@ -50,4 +54,4 @@ export const IonTabButton = /*@__PURE__*/ (() =>
   static get displayName() {
     return 'IonTabButton';
   }
-  })();
+}

packages/react/src/components/navigation/IonTabs.tsx

@@ -1,3 +1,4 @@
+import type { Components } from '@ionic/core';
 import type { JSX as LocalJSX } from '@ionic/core/components';
 import React, { Fragment } from 'react';
 
@@ -26,12 +27,14 @@ if (typeof (window as any) !== 'undefined' && window.customElements) {
   }
 }
 
-declare global {
+export interface IonTabsProps extends React.HTMLAttributes<Components.IonTabs> {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
+  onIonTabsWillChange?: (event: CustomEvent<{ tab: string }>) => void;
-  namespace JSX {
+  onIonTabsDidChange?: (event: CustomEvent<{ tab: string }>) => void;
-    interface IntrinsicElements {
+}
-      'ion-tabs': any;
+
-    }
+declare module 'react' {
+  interface HTMLElements {
+    'ion-tabs': IonTabsProps;
   }
 }
 
@@ -40,10 +43,15 @@ type ChildFunction = (ionTabContext: IonTabsContextState) => React.ReactNode;
 interface Props extends LocalJSX.IonTabs {
   className?: string;
   children: ChildFunction | React.ReactNode;
+  onIonTabsWillChange?: (event: CustomEvent<{ tab: string }>) => void;
+  onIonTabsDidChange?: (event: CustomEvent<{ tab: string }>) => void;
 }
 
-export const IonTabs = /*@__PURE__*/ (() =>
+export class IonTabs extends React.Component<Props> {
-  class extends React.Component<Props> {
+  shouldComponentUpdate(_nextProps: Readonly<Props>, _nextState: Readonly<{}>): boolean {
+    return true;
+  }
+
   context!: React.ContextType<typeof NavContext>;
   /**
    * `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
@@ -51,7 +59,7 @@ export const IonTabs = /*@__PURE__*/ (() =>
    * breaking their ability to access the `IonRouterOutlet` instance.
    * Do not remove this ref.
    */
-    routerOutletRef: React.Ref<HTMLIonRouterOutletElement> = React.createRef();
+  routerOutletRef: React.Ref<Components.IonRouterOutlet> = React.createRef();
   selectTabHandler?: (tag: string) => boolean;
   tabBarRef = React.createRef<any>();
 
@@ -205,4 +213,4 @@ export const IonTabs = /*@__PURE__*/ (() =>
   static get contextType() {
     return NavContext;
   }
-  })();
+}

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

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
+import React from 'react';
+import { Route } from 'react-router-dom';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -21,19 +21,19 @@ import '@ionic/react/css/display.css';
 
 /* Theme variables */
 import './theme/variables.css';
+import Icons from './pages/Icons';
 import Main from './pages/Main';
-import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
-import OverlayComponents from './pages/overlay-components/OverlayComponents';
-import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted';
 import Tabs from './pages/Tabs';
 import TabsBasic from './pages/TabsBasic';
-import Icons from './pages/Icons';
 import NavComponent from './pages/navigation/NavComponent';
-import IonModalConditionalSibling from './pages/overlay-components/IonModalConditionalSibling';
 import IonModalConditional from './pages/overlay-components/IonModalConditional';
+import IonModalConditionalSibling from './pages/overlay-components/IonModalConditionalSibling';
 import IonModalDatetimeButton from './pages/overlay-components/IonModalDatetimeButton';
-import IonPopoverNested from './pages/overlay-components/IonPopoverNested';
 import IonModalMultipleChildren from './pages/overlay-components/IonModalMultipleChildren';
+import IonPopoverNested from './pages/overlay-components/IonPopoverNested';
+import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted';
+import OverlayComponents from './pages/overlay-components/OverlayComponents';
+import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
 
 setupIonicReact();
 

tsconfig.json

@@ -7,12 +7,14 @@
     "declaration": true,
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
+    "importHelpers": true,
     "lib": [
       "dom",
-      "es2017"
+      "es2020",
+      "dom.iterable"
     ],
-    "module": "es2015",
+    "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "noImplicitAny": true,
     "noImplicitReturns": true,
     "noUnusedLocals": true,
@@ -20,7 +22,8 @@
     "pretty": true,
     "removeComments": false,
     "strictPropertyInitialization": false,
-    "target": "es2017",
+    "target": "es2020",
+    "jsx": "react-jsx",
     "baseUrl": ".",
     "paths": {
       "@ionic/core/hydrate": [