fix(react): update @types/react to v19+

packages/react/package.json

@@ -56,8 +56,8 @@
     "@testing-library/react-hooks": "^7.0.1",
     "@types/jest": "^26.0.15",
     "@types/node": "^14.0.14",
-    "@types/react": "^17.0.79",
-    "@types/react-dom": "^17.0.25",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "eslint": "^7.32.0",

packages/react/src/components/IonIcon.tsx

@@ -7,6 +7,7 @@ import { IonIconInner } from './inner-proxies';
 import { createForwardRef, getConfig } from './utils';
 
 interface IonIconProps {
+  children?: React.ReactNode;
   color?: string;
   flipRtl?: boolean;
   icon?: string;

packages/react/src/components/IonRoute.tsx

@@ -6,7 +6,7 @@ export interface IonRouteProps {
   path?: string;
   exact?: boolean;
   show?: boolean;
-  render: (props?: any) => JSX.Element; // TODO(FW-2959): type
+  render: (props?: any) => React.JSX.Element; // TODO(FW-2959): type
   disableIonPageManagement?: boolean;
 }
 

packages/react/src/components/IonRouterOutlet.tsx

@@ -10,6 +10,7 @@ import { createForwardRef } from './utils';
 
 type Props = LocalJSX.IonRouterOutlet & {
   basePath?: string;
+  children?: React.ReactNode;
   ref?: React.Ref<any>;
   ionPage?: boolean;
 };

packages/react/src/components/IonicReactProps.ts

@@ -1,4 +1,5 @@
 export interface IonicReactProps {
   className?: string;
   style?: { [key: string]: any };
+  children?: React.ReactNode;
 }

packages/react/src/components/createOverlayComponent.tsx

@@ -139,6 +139,6 @@ export const createOverlayComponent = <OverlayComponent extends object, OverlayT
   }
 
   return React.forwardRef<OverlayType, Props>((props, ref) => {
-    return <Overlay {...props} forwardedRef={ref} />;
+    return <Overlay {...(props as Props)} forwardedRef={ref} />;
   });
 };

packages/react/src/components/react-component-lib/createOverlayComponent.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { OverlayEventDetail } from './interfaces';
-import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+import type { OverlayEventDetail } from './interfaces';
+import type { StencilReactForwardedRef } from './utils';
+import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
 
 interface OverlayElement extends HTMLElement {
   present: () => Promise<void>;
@@ -137,6 +138,6 @@ export const createOverlayComponent = <OverlayComponent extends object, OverlayT
   }
 
   return React.forwardRef<OverlayType, Props>((props, ref) => {
-    return <Overlay {...props} forwardedRef={ref} />;
+    return <Overlay {...(props as Props)} forwardedRef={ref} />;
   });
 };

packages/react/src/framework-delegate.tsx

@@ -5,7 +5,7 @@ import { generateId } from './utils/generateId';
 
 // TODO(FW-2959): types
 
-type ReactComponent = (props?: any) => JSX.Element;
+type ReactComponent = (props?: any) => React.JSX.Element;
 
 export const ReactDelegate = (
   addView: (view: React.ReactElement) => void,

packages/react/src/models/ReactComponentOrElement.ts

@@ -1,3 +1,3 @@
 import type React from 'react';
 
-export type ReactComponentOrElement = React.ComponentClass<any, any> | React.FC<any> | JSX.Element;
+export type ReactComponentOrElement = React.ComponentClass<any, any> | React.FC<any> | React.JSX.Element;

packages/react/src/routing/OutletPageManager.tsx

@@ -8,6 +8,7 @@ import type { RouteInfo } from '../models';
 import { StackContext } from './StackContext';
 
 interface OutletPageManagerProps {
+  children?: React.ReactNode;
   className?: string;
   forwardedRef?: React.ForwardedRef<HTMLIonRouterOutletElement>;
   routeInfo?: RouteInfo;