From 39349194ab3ac8b3c66ba68820cbb2d5cc5d4c4d Mon Sep 17 00:00:00 2001 From: Patrick Kenny Date: Sun, 15 Dec 2024 09:44:46 +0900 Subject: [PATCH 1/5] use React.JSX.Element instead of JSX.Element; children must be specified explicitly --- packages/react/src/components/IonIcon.tsx | 1 + packages/react/src/components/IonRoute.tsx | 2 +- packages/react/src/components/IonRouterOutlet.tsx | 1 + packages/react/src/components/IonicReactProps.ts | 1 + packages/react/src/framework-delegate.tsx | 2 +- packages/react/src/models/ReactComponentOrElement.ts | 2 +- packages/react/src/routing/OutletPageManager.tsx | 1 + 7 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/IonIcon.tsx b/packages/react/src/components/IonIcon.tsx index a873f3c4577..73f78859be4 100644 --- a/packages/react/src/components/IonIcon.tsx +++ b/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; diff --git a/packages/react/src/components/IonRoute.tsx b/packages/react/src/components/IonRoute.tsx index c7dc0b1af40..839ad20343a 100644 --- a/packages/react/src/components/IonRoute.tsx +++ b/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; } diff --git a/packages/react/src/components/IonRouterOutlet.tsx b/packages/react/src/components/IonRouterOutlet.tsx index d7c75b13189..f52b85f599e 100644 --- a/packages/react/src/components/IonRouterOutlet.tsx +++ b/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; ionPage?: boolean; }; diff --git a/packages/react/src/components/IonicReactProps.ts b/packages/react/src/components/IonicReactProps.ts index 11bc2404361..d9090da7319 100644 --- a/packages/react/src/components/IonicReactProps.ts +++ b/packages/react/src/components/IonicReactProps.ts @@ -1,4 +1,5 @@ export interface IonicReactProps { className?: string; style?: { [key: string]: any }; + children?: React.ReactNode; } diff --git a/packages/react/src/framework-delegate.tsx b/packages/react/src/framework-delegate.tsx index 7379b4b97e0..839116fa200 100644 --- a/packages/react/src/framework-delegate.tsx +++ b/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, diff --git a/packages/react/src/models/ReactComponentOrElement.ts b/packages/react/src/models/ReactComponentOrElement.ts index 2cb796ed837..222e151080c 100644 --- a/packages/react/src/models/ReactComponentOrElement.ts +++ b/packages/react/src/models/ReactComponentOrElement.ts @@ -1,3 +1,3 @@ import type React from 'react'; -export type ReactComponentOrElement = React.ComponentClass | React.FC | JSX.Element; +export type ReactComponentOrElement = React.ComponentClass | React.FC | React.JSX.Element; diff --git a/packages/react/src/routing/OutletPageManager.tsx b/packages/react/src/routing/OutletPageManager.tsx index 0e0d1f9ea08..2cf22759b83 100644 --- a/packages/react/src/routing/OutletPageManager.tsx +++ b/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; routeInfo?: RouteInfo; From c418abaa95e73a79bb27268c95eeb69ff210de2b Mon Sep 17 00:00:00 2001 From: Patrick Kenny Date: Sun, 15 Dec 2024 09:48:01 +0900 Subject: [PATCH 2/5] package.json: bump @types/react and @types/react-dom to 19+ --- packages/react/package-lock.json | 112 ++++++++++++++++++++++--------- packages/react/package.json | 4 +- 2 files changed, 81 insertions(+), 35 deletions(-) diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index f86e75d9805..07288f2ab83 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -22,8 +22,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", @@ -1888,6 +1888,29 @@ } } }, + "node_modules/@testing-library/react/node_modules/@types/react": { + "version": "17.0.83", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.83.tgz", + "integrity": "sha512-l0m4ArKJvmFtR4e8UmKrj1pB4tUgOhJITf+mADyF/p69Ts1YAR/E+G9XEM0mHXKVRa1dQNHseyyDNzeuAXfXQw==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "^0.16", + "csstype": "^3.0.2" + } + }, + "node_modules/@testing-library/react/node_modules/@types/react-dom": { + "version": "17.0.26", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.26.tgz", + "integrity": "sha512-Z+2VcYXJwOqQ79HreLU/1fyQ88eXSSFh6I3JdrEHQIfYSI0kCQpTGvOrbE6jFGGYXKsHuwY9tBa/w5Uo6KzrEg==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^17.0.0" + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -2084,29 +2107,31 @@ "dev": true }, "node_modules/@types/prop-types": { - "version": "15.7.9", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz", - "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==", - "dev": true + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", + "dev": true, + "license": "MIT", + "peer": true }, "node_modules/@types/react": { - "version": "17.0.79", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.79.tgz", - "integrity": "sha512-gavKA8AwJAML9zWHuiQRASjrrPJHbT/zrUDHiUGUf+l5a3pkEd6atvjjq+8y2vfRHBJLQJjFpxSa9I8qe9zHAw==", + "version": "19.0.1", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.1.tgz", + "integrity": "sha512-YW6614BDhqbpR5KtUYzTA+zlA7nayzJRA9ljz9CQoxthR0sDisYZLuvSMsil36t4EH/uAt8T52Xb4sVw17G+SQ==", "dev": true, + "license": "MIT", "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", "csstype": "^3.0.2" } }, "node_modules/@types/react-dom": { - "version": "17.0.25", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.25.tgz", - "integrity": "sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==", + "version": "19.0.2", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.2.tgz", + "integrity": "sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==", "dev": true, - "dependencies": { - "@types/react": "^17" + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.0.0" } }, "node_modules/@types/react-test-renderer": { @@ -2131,7 +2156,9 @@ "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "dev": true + "dev": true, + "license": "MIT", + "peer": true }, "node_modules/@types/semver": { "version": "7.5.4", @@ -13090,6 +13117,27 @@ "@babel/runtime": "^7.12.5", "@testing-library/dom": "^8.0.0", "@types/react-dom": "<18.0.0" + }, + "dependencies": { + "@types/react": { + "version": "17.0.83", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.83.tgz", + "integrity": "sha512-l0m4ArKJvmFtR4e8UmKrj1pB4tUgOhJITf+mADyF/p69Ts1YAR/E+G9XEM0mHXKVRa1dQNHseyyDNzeuAXfXQw==", + "dev": true, + "peer": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "^0.16", + "csstype": "^3.0.2" + } + }, + "@types/react-dom": { + "version": "17.0.26", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.26.tgz", + "integrity": "sha512-Z+2VcYXJwOqQ79HreLU/1fyQ88eXSSFh6I3JdrEHQIfYSI0kCQpTGvOrbE6jFGGYXKsHuwY9tBa/w5Uo6KzrEg==", + "dev": true, + "requires": {} + } } }, "@testing-library/react-hooks": { @@ -13298,30 +13346,27 @@ "dev": true }, "@types/prop-types": { - "version": "15.7.9", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz", - "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==", - "dev": true + "version": "15.7.14", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", + "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", + "dev": true, + "peer": true }, "@types/react": { - "version": "17.0.79", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.79.tgz", - "integrity": "sha512-gavKA8AwJAML9zWHuiQRASjrrPJHbT/zrUDHiUGUf+l5a3pkEd6atvjjq+8y2vfRHBJLQJjFpxSa9I8qe9zHAw==", + "version": "19.0.1", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.1.tgz", + "integrity": "sha512-YW6614BDhqbpR5KtUYzTA+zlA7nayzJRA9ljz9CQoxthR0sDisYZLuvSMsil36t4EH/uAt8T52Xb4sVw17G+SQ==", "dev": true, "requires": { - "@types/prop-types": "*", - "@types/scheduler": "*", "csstype": "^3.0.2" } }, "@types/react-dom": { - "version": "17.0.25", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.25.tgz", - "integrity": "sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==", + "version": "19.0.2", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.2.tgz", + "integrity": "sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==", "dev": true, - "requires": { - "@types/react": "^17" - } + "requires": {} }, "@types/react-test-renderer": { "version": "18.0.5", @@ -13345,7 +13390,8 @@ "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "dev": true + "dev": true, + "peer": true }, "@types/semver": { "version": "7.5.4", diff --git a/packages/react/package.json b/packages/react/package.json index 152e60b797a..a1c9545e672 100644 --- a/packages/react/package.json +++ b/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", From a85d304a45f822590991a93d3b132018dd0079cf Mon Sep 17 00:00:00 2001 From: Patrick Kenny Date: Sun, 15 Dec 2024 10:59:22 +0900 Subject: [PATCH 3/5] import type instead of import --- .../react-component-lib/createOverlayComponent.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/react-component-lib/createOverlayComponent.tsx b/packages/react/src/components/react-component-lib/createOverlayComponent.tsx index 288c38dd54c..ef3b6046cf7 100644 --- a/packages/react/src/components/react-component-lib/createOverlayComponent.tsx +++ b/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; From 484f2476ab9c713b5aad9c9c40828ff43eb78c2c Mon Sep 17 00:00:00 2001 From: Patrick Kenny Date: Sun, 15 Dec 2024 11:32:22 +0900 Subject: [PATCH 4/5] cast props as Props to fix overlay issue --- packages/react/src/components/createOverlayComponent.tsx | 2 +- .../components/react-component-lib/createOverlayComponent.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/createOverlayComponent.tsx b/packages/react/src/components/createOverlayComponent.tsx index 701d8b8214e..7109685c462 100644 --- a/packages/react/src/components/createOverlayComponent.tsx +++ b/packages/react/src/components/createOverlayComponent.tsx @@ -139,6 +139,6 @@ export const createOverlayComponent = ((props, ref) => { - return ; + return ; }); }; diff --git a/packages/react/src/components/react-component-lib/createOverlayComponent.tsx b/packages/react/src/components/react-component-lib/createOverlayComponent.tsx index ef3b6046cf7..377ce1f1ca0 100644 --- a/packages/react/src/components/react-component-lib/createOverlayComponent.tsx +++ b/packages/react/src/components/react-component-lib/createOverlayComponent.tsx @@ -138,6 +138,6 @@ export const createOverlayComponent = ((props, ref) => { - return ; + return ; }); }; From df945f53bef54b1f57051394da1f30b8a0cb63d4 Mon Sep 17 00:00:00 2001 From: Patrick Kenny Date: Fri, 3 Jan 2025 16:59:48 +0900 Subject: [PATCH 5/5] define children explicitly in more places --- packages/react/src/components/createControllerComponent.tsx | 1 + packages/react/src/components/navigation/IonNav.tsx | 1 + packages/react/src/routing/NavManager.tsx | 1 + packages/react/src/routing/PageManager.tsx | 1 + packages/react/src/routing/ViewLifeCycleManager.tsx | 1 + 5 files changed, 5 insertions(+) diff --git a/packages/react/src/components/createControllerComponent.tsx b/packages/react/src/components/createControllerComponent.tsx index 15688a7f3b9..3abbd69da76 100644 --- a/packages/react/src/components/createControllerComponent.tsx +++ b/packages/react/src/components/createControllerComponent.tsx @@ -10,6 +10,7 @@ interface OverlayBase extends HTMLElement { export interface ReactControllerProps { isOpen: boolean; + children?: React.ReactNode; onDidDismiss?: (event: CustomEvent) => void; onDidPresent?: (event: CustomEvent) => void; onWillDismiss?: (event: CustomEvent) => void; diff --git a/packages/react/src/components/navigation/IonNav.tsx b/packages/react/src/components/navigation/IonNav.tsx index 8d2ca03e3ae..4489b87084d 100644 --- a/packages/react/src/components/navigation/IonNav.tsx +++ b/packages/react/src/components/navigation/IonNav.tsx @@ -14,6 +14,7 @@ const IonNavInner = createReactComponent; }; diff --git a/packages/react/src/routing/NavManager.tsx b/packages/react/src/routing/NavManager.tsx index 27396947800..7bf133775e9 100644 --- a/packages/react/src/routing/NavManager.tsx +++ b/packages/react/src/routing/NavManager.tsx @@ -34,6 +34,7 @@ interface NavManagerProps { ionRoute: any; stackManager: any; locationHistory: LocationHistory; + children?: React.ReactNode; } export class NavManager extends React.PureComponent { diff --git a/packages/react/src/routing/PageManager.tsx b/packages/react/src/routing/PageManager.tsx index 19a184a6364..cfc696b4ed9 100644 --- a/packages/react/src/routing/PageManager.tsx +++ b/packages/react/src/routing/PageManager.tsx @@ -8,6 +8,7 @@ import { StackContext } from './StackContext'; interface PageManagerProps { className?: string; + children?: React.ReactNode; forwardedRef?: React.ForwardedRef; routeInfo?: RouteInfo; } diff --git a/packages/react/src/routing/ViewLifeCycleManager.tsx b/packages/react/src/routing/ViewLifeCycleManager.tsx index 78b83f295a4..506b28ac1ec 100644 --- a/packages/react/src/routing/ViewLifeCycleManager.tsx +++ b/packages/react/src/routing/ViewLifeCycleManager.tsx @@ -5,6 +5,7 @@ import { DefaultIonLifeCycleContext, IonLifeCycleContext } from '../contexts/Ion interface ViewTransitionManagerProps { removeView: () => void; mount: boolean; + children?: React.ReactNode; } interface ViewTransitionManagerState {