chore(deps): update to react 18

Author: OS-jacobbell

packages/react/package-lock.json

@@ -53,12 +53,11 @@
     "@ionic/prettier-config": "^2.0.0",
     "@rollup/plugin-typescript": "^11.1.5",
     "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/react": "~13.4.0",
     "@types/jest": "^26.0.15",
     "@types/node": "^14.0.14",
-    "@types/react": "^17.0.79",
-    "@types/react-dom": "^17.0.25",
+    "@types/react": "~18.3.28",
+    "@types/react-dom": "~18.3.7",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "eslint": "^7.32.0",
@@ -67,8 +66,8 @@
     "jest-environment-jsdom": "^29.7.0",
     "np": "^6.4.0",
     "prettier": "^2.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1",
     "rimraf": "^3.0.2",
     "rollup": "^4.2.0",
     "ts-jest": "^29.1.3",

packages/react/package.json

@@ -21,6 +21,7 @@ interface IonIconProps {
 
 type InternalProps = IonIconProps & {
   forwardedRef?: React.ForwardedRef<HTMLIonIconElement>;
+  children: React.ReactNode;
 };
 
 class IonIconContainer extends React.PureComponent<InternalProps> {

packages/react/src/components/IonIcon.tsx

@@ -11,6 +11,7 @@ interface IonPageProps extends IonicReactProps {}
 
 interface IonPageInternalProps extends IonPageProps {
   forwardedRef?: React.ForwardedRef<HTMLDivElement>;
+  children: React.ReactNode;
 }
 
 class IonPageInternal extends React.Component<IonPageInternalProps> {

packages/react/src/components/IonPage.tsx

@@ -16,6 +16,7 @@ type Props = LocalJSX.IonRouterOutlet & {
 
 interface InternalProps extends Props {
   forwardedRef?: React.ForwardedRef<HTMLIonRouterOutletElement>;
+  children: React.ReactNode;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface

packages/react/src/components/IonRouterOutlet.tsx

@@ -122,6 +122,6 @@ export const createControllerComponent = <OptionsType extends object, OverlayTyp
   }
 
   return React.forwardRef<OverlayType, Props>((props, ref) => {
-    return <Overlay {...props} forwardedRef={ref} />;
+    return <Overlay {...(props as Props)} forwardedRef={ref} />;
   });
 };

packages/react/src/components/createControllerComponent.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/createOverlayComponent.tsx

@@ -15,6 +15,7 @@ const IonNavInner = createReactComponent<JSX.IonNav & { delegate: FrameworkDeleg
 
 type IonNavProps = JSX.IonNav & {
   forwardedRef?: React.ForwardedRef<HTMLIonNavElement>;
+  children?: React.ReactNode;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars