From 32d6546c688a3b6a52be801f51abf3db8496d008 Mon Sep 17 00:00:00 2001 From: Martijn Russchen Date: Mon, 6 Jan 2025 10:27:29 +0100 Subject: [PATCH 1/3] Upgrade to React 19 --- docs-site/package.json | 10 ++---- docs-site/yarn.lock | 39 ++++++++++------------- package.json | 33 +++++--------------- yarn.lock | 71 +++++++++++++++++------------------------- 4 files changed, 57 insertions(+), 96 deletions(-) diff --git a/docs-site/package.json b/docs-site/package.json index 4ecad3f8a..2e9ce3388 100644 --- a/docs-site/package.json +++ b/docs-site/package.json @@ -4,8 +4,8 @@ "private": true, "dependencies": { "highlight.js": "^11.11.1", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", "react-live": "^4.1.8" }, "scripts": { @@ -18,11 +18,7 @@ "extends": "react-app" }, "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], + "production": [">0.2%", "not dead", "not op_mini all"], "development": [ "last 1 chrome version", "last 1 firefox version", diff --git a/docs-site/yarn.lock b/docs-site/yarn.lock index 802285710..e2bbf3e1c 100644 --- a/docs-site/yarn.lock +++ b/docs-site/yarn.lock @@ -8876,7 +8876,7 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0": +"loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" dependencies: @@ -10989,9 +10989,9 @@ __metadata: dependencies: highlight.js: "npm:^11.11.1" raw-loader: "npm:^4.0.2" - react: "npm:^18.3.1" + react: "npm:^19.0.0" react-app-rewired: "npm:^2.2.1" - react-dom: "npm:^18.3.1" + react-dom: "npm:^19.0.0" react-live: "npm:^4.1.8" react-scripts: "npm:5.0.1" sass: "npm:^1.83.0" @@ -11030,15 +11030,14 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^18.3.1": - version: 18.3.1 - resolution: "react-dom@npm:18.3.1" +"react-dom@npm:^19.0.0": + version: 19.0.0 + resolution: "react-dom@npm:19.0.0" dependencies: - loose-envify: "npm:^1.1.0" - scheduler: "npm:^0.23.2" + scheduler: "npm:^0.25.0" peerDependencies: - react: ^18.3.1 - checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85 + react: ^19.0.0 + checksum: 10c0/a36ce7ab507b237ae2759c984cdaad4af4096d8199fb65b3815c16825e5cfeb7293da790a3fc2184b52bfba7ba3ff31c058c01947aff6fd1a3701632aabaa6a9 languageName: node linkType: hard @@ -11158,12 +11157,10 @@ __metadata: languageName: node linkType: hard -"react@npm:^18.3.1": - version: 18.3.1 - resolution: "react@npm:18.3.1" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3 +"react@npm:^19.0.0": + version: 19.0.0 + resolution: "react@npm:19.0.0" + checksum: 10c0/9cad8f103e8e3a16d15cb18a0d8115d8bd9f9e1ce3420310aea381eb42aa0a4f812cf047bb5441349257a05fba8a291515691e3cb51267279b2d2c3253f38471 languageName: node linkType: hard @@ -11624,12 +11621,10 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.23.2": - version: 0.23.2 - resolution: "scheduler@npm:0.23.2" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78 +"scheduler@npm:^0.25.0": + version: 0.25.0 + resolution: "scheduler@npm:0.25.0" + checksum: 10c0/a4bb1da406b613ce72c1299db43759526058fdcc413999c3c3e0db8956df7633acf395cb20eb2303b6a65d658d66b6585d344460abaee8080b4aa931f10eaafe languageName: node linkType: hard diff --git a/package.json b/package.json index 0ed705255..7fb4c2cba 100644 --- a/package.json +++ b/package.json @@ -11,23 +11,9 @@ "module": "dist/es/index.js", "unpkg": "dist/react-datepicker.min.js", "style": "dist/react-datepicker.min.css", - "files": [ - "*.md", - "dist", - "lib", - "es", - "src/stylesheets" - ], - "sideEffects": [ - "**/*.css" - ], - "keywords": [ - "react", - "datepicker", - "calendar", - "date", - "react-component" - ], + "files": ["*.md", "dist", "lib", "es", "src/stylesheets"], + "sideEffects": ["**/*.css"], + "keywords": ["react", "datepicker", "calendar", "date", "react-component"], "repository": { "type": "git", "url": "git://github.com/Hacker0x01/react-datepicker.git" @@ -55,8 +41,8 @@ "@types/eslint": "^8.56.10", "@types/jest": "^29.5.12", "@types/node": "22", - "@types/react": "^18.3.4", - "@types/react-dom": "^18.3.0", + "@types/react": "^19.0.2", + "@types/react-dom": "^19.0.2", "@typescript-eslint/eslint-plugin": "^7.18.0", "@typescript-eslint/parser": "^8.6.0", "axe-core": "^4.10.0", @@ -77,8 +63,8 @@ "lint-staged": "^15.2.9", "lodash": "^4.17.21", "prettier": "^3.3.3", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", "rollup": "^4.21.1", "rollup-plugin-filesize": "^10.0.0", "sass": "1.80.7", @@ -124,10 +110,7 @@ "prepare": "husky" }, "lint-staged": { - "*.{js,jsx,ts,tsx,json,css,scss,md}": [ - "prettier --write", - "git add" - ] + "*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write", "git add"] }, "packageManager": "yarn@4.6.0" } diff --git a/yarn.lock b/yarn.lock index ad8c547d7..c3e0fa70b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3212,29 +3212,21 @@ __metadata: languageName: node linkType: hard -"@types/prop-types@npm:*": - version: 15.7.12 - resolution: "@types/prop-types@npm:15.7.12" - checksum: 10c0/1babcc7db6a1177779f8fde0ccc78d64d459906e6ef69a4ed4dd6339c920c2e05b074ee5a92120fe4e9d9f1a01c952f843ebd550bee2332fc2ef81d1706878f8 - languageName: node - linkType: hard - -"@types/react-dom@npm:^18.3.0": - version: 18.3.1 - resolution: "@types/react-dom@npm:18.3.1" - dependencies: - "@types/react": "npm:*" - checksum: 10c0/8b416551c60bb6bd8ec10e198c957910cfb271bc3922463040b0d57cf4739cdcd24b13224f8d68f10318926e1ec3cd69af0af79f0291b599a992f8c80d47f1eb +"@types/react-dom@npm:^19.0.2": + version: 19.0.2 + resolution: "@types/react-dom@npm:19.0.2" + peerDependencies: + "@types/react": ^19.0.0 + checksum: 10c0/3d0c7b78dbe8df64ea769f30af990a5950173a8321c745fe11094d765423f7964c3519dca6e7cd36b4be6521c8efc690bdd3b79b327b229dd1e9d5a8bad677dd languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:^18.3.4": - version: 18.3.12 - resolution: "@types/react@npm:18.3.12" +"@types/react@npm:^19.0.2": + version: 19.0.2 + resolution: "@types/react@npm:19.0.2" dependencies: - "@types/prop-types": "npm:*" csstype: "npm:^3.0.2" - checksum: 10c0/8bae8d9a41619804561574792e29112b413044eb0d53746dde2b9720c1f9a59f71c895bbd7987cd8ce9500b00786e53bc032dced38cddf42910458e145675290 + checksum: 10c0/8992f39701fcf1bf893ef8f94a56196445667baf08fe4f6050a14e229a17aad3265ad3efc01595ff3b4d5d5c69da885f9aa4ff80f164a613018734efcff1eb8f languageName: node linkType: hard @@ -8043,7 +8035,7 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0": +"loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" dependencies: @@ -9301,8 +9293,8 @@ __metadata: "@types/eslint": "npm:^8.56.10" "@types/jest": "npm:^29.5.12" "@types/node": "npm:22" - "@types/react": "npm:^18.3.4" - "@types/react-dom": "npm:^18.3.0" + "@types/react": "npm:^19.0.2" + "@types/react-dom": "npm:^19.0.2" "@typescript-eslint/eslint-plugin": "npm:^7.18.0" "@typescript-eslint/parser": "npm:^8.6.0" axe-core: "npm:^4.10.0" @@ -9325,8 +9317,8 @@ __metadata: lint-staged: "npm:^15.2.9" lodash: "npm:^4.17.21" prettier: "npm:^3.3.3" - react: "npm:^18.3.1" - react-dom: "npm:^18.3.1" + react: "npm:^19.0.0" + react-dom: "npm:^19.0.0" rollup: "npm:^4.21.1" rollup-plugin-filesize: "npm:^10.0.0" sass: "npm:1.80.7" @@ -9362,15 +9354,14 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^18.3.1": - version: 18.3.1 - resolution: "react-dom@npm:18.3.1" +"react-dom@npm:^19.0.0": + version: 19.0.0 + resolution: "react-dom@npm:19.0.0" dependencies: - loose-envify: "npm:^1.1.0" - scheduler: "npm:^0.23.2" + scheduler: "npm:^0.25.0" peerDependencies: - react: ^18.3.1 - checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85 + react: ^19.0.0 + checksum: 10c0/a36ce7ab507b237ae2759c984cdaad4af4096d8199fb65b3815c16825e5cfeb7293da790a3fc2184b52bfba7ba3ff31c058c01947aff6fd1a3701632aabaa6a9 languageName: node linkType: hard @@ -9395,12 +9386,10 @@ __metadata: languageName: node linkType: hard -"react@npm:^18.3.1": - version: 18.3.1 - resolution: "react@npm:18.3.1" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3 +"react@npm:^19.0.0": + version: 19.0.0 + resolution: "react@npm:19.0.0" + checksum: 10c0/9cad8f103e8e3a16d15cb18a0d8115d8bd9f9e1ce3420310aea381eb42aa0a4f812cf047bb5441349257a05fba8a291515691e3cb51267279b2d2c3253f38471 languageName: node linkType: hard @@ -9910,12 +9899,10 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.23.2": - version: 0.23.2 - resolution: "scheduler@npm:0.23.2" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78 +"scheduler@npm:^0.25.0": + version: 0.25.0 + resolution: "scheduler@npm:0.25.0" + checksum: 10c0/a4bb1da406b613ce72c1299db43759526058fdcc413999c3c3e0db8956df7633acf395cb20eb2303b6a65d658d66b6585d344460abaee8080b4aa931f10eaafe languageName: node linkType: hard From 9de10cd1b9401ee6ab9548924328be5d287b8330 Mon Sep 17 00:00:00 2001 From: Martijn Russchen Date: Mon, 6 Jan 2025 10:29:36 +0100 Subject: [PATCH 2/3] also upgrade example --- examples/hello-world/package.json | 12 ++++------ examples/hello-world/yarn.lock | 39 ++++++++++++++----------------- 2 files changed, 21 insertions(+), 30 deletions(-) diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json index d650597cc..6aae814be 100644 --- a/examples/hello-world/package.json +++ b/examples/hello-world/package.json @@ -3,9 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { - "react": "^18.3.1", + "react": "^19.0.0", "react-datepicker": "^7.5.0", - "react-dom": "^18.3.1", + "react-dom": "^19.0.0", "react-scripts": "5.0.1" }, "scripts": { @@ -18,16 +18,12 @@ "extends": "react-app" }, "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], + "production": [">0.2%", "not dead", "not op_mini all"], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, - "packageManager": "yarn@4.3.1" + "packageManager": "yarn@4.6.0" } diff --git a/examples/hello-world/yarn.lock b/examples/hello-world/yarn.lock index ce9f3f759..fe19c0c2b 100644 --- a/examples/hello-world/yarn.lock +++ b/examples/hello-world/yarn.lock @@ -7067,9 +7067,9 @@ __metadata: version: 0.0.0-use.local resolution: "hello-world@workspace:." dependencies: - react: "npm:^18.3.1" + react: "npm:^19.0.0" react-datepicker: "npm:^7.5.0" - react-dom: "npm:^18.3.1" + react-dom: "npm:^19.0.0" react-scripts: "npm:5.0.1" languageName: unknown linkType: soft @@ -8766,7 +8766,7 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0": +"loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" dependencies: @@ -10841,15 +10841,14 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^18.3.1": - version: 18.3.1 - resolution: "react-dom@npm:18.3.1" +"react-dom@npm:^19.0.0": + version: 19.0.0 + resolution: "react-dom@npm:19.0.0" dependencies: - loose-envify: "npm:^1.1.0" - scheduler: "npm:^0.23.2" + scheduler: "npm:^0.25.0" peerDependencies: - react: ^18.3.1 - checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85 + react: ^19.0.0 + checksum: 10c0/a36ce7ab507b237ae2759c984cdaad4af4096d8199fb65b3815c16825e5cfeb7293da790a3fc2184b52bfba7ba3ff31c058c01947aff6fd1a3701632aabaa6a9 languageName: node linkType: hard @@ -10955,12 +10954,10 @@ __metadata: languageName: node linkType: hard -"react@npm:^18.3.1": - version: 18.3.1 - resolution: "react@npm:18.3.1" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3 +"react@npm:^19.0.0": + version: 19.0.0 + resolution: "react@npm:19.0.0" + checksum: 10c0/9cad8f103e8e3a16d15cb18a0d8115d8bd9f9e1ce3420310aea381eb42aa0a4f812cf047bb5441349257a05fba8a291515691e3cb51267279b2d2c3253f38471 languageName: node linkType: hard @@ -11397,12 +11394,10 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.23.2": - version: 0.23.2 - resolution: "scheduler@npm:0.23.2" - dependencies: - loose-envify: "npm:^1.1.0" - checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78 +"scheduler@npm:^0.25.0": + version: 0.25.0 + resolution: "scheduler@npm:0.25.0" + checksum: 10c0/a4bb1da406b613ce72c1299db43759526058fdcc413999c3c3e0db8956df7633acf395cb20eb2303b6a65d658d66b6585d344460abaee8080b4aa931f10eaafe languageName: node linkType: hard From cb56f57ec0f0003461321260b0696a0bd25cd327 Mon Sep 17 00:00:00 2001 From: Balaji-Sridharan_NYULH Date: Mon, 6 Jan 2025 16:02:58 +0530 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=9A=A8=20Fix=20TypeScript=20Linting?= =?UTF-8?q?=20warnings=20for=20React=2019=20upgrade?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #5299 --- src/calendar.tsx | 2 +- src/calendar_icon.tsx | 13 +++++++++---- src/input_time.tsx | 8 ++++++-- src/tab_loop.tsx | 2 +- src/with_floating.tsx | 2 +- src/year_dropdown_options.tsx | 2 +- 6 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/calendar.tsx b/src/calendar.tsx index 664b35be2..d80f1554a 100644 --- a/src/calendar.tsx +++ b/src/calendar.tsx @@ -281,7 +281,7 @@ export default class Calendar extends Component { } } - containerRef: React.RefObject; + containerRef: React.RefObject; monthContainer: CalendarState["monthContainer"] = undefined; diff --git a/src/calendar_icon.tsx b/src/calendar_icon.tsx index 624ba7055..412531e1e 100644 --- a/src/calendar_icon.tsx +++ b/src/calendar_icon.tsx @@ -44,11 +44,16 @@ const CalendarIcon: React.FC = ({ if (React.isValidElement(icon)) { // Because we are checking that typeof icon is string first, we can safely cast icon as React.ReactElement on types level and code level - return React.cloneElement(icon as React.ReactElement, { - className: `${icon.props.className || ""} ${defaultClass} ${className}`, + const iconElement = icon as React.ReactElement<{ + className: string; + onClick: (event: React.MouseEvent) => void; + }>; + + return React.cloneElement(iconElement, { + className: `${iconElement.props.className || ""} ${defaultClass} ${className}`, onClick: (event: React.MouseEvent) => { - if (typeof icon.props.onClick === "function") { - icon.props.onClick(event); + if (typeof iconElement.props.onClick === "function") { + iconElement.props.onClick(event); } if (typeof onClick === "function") { diff --git a/src/input_time.tsx b/src/input_time.tsx index 67229cd3c..bd0d8c227 100644 --- a/src/input_time.tsx +++ b/src/input_time.tsx @@ -5,7 +5,11 @@ interface InputTimeProps { date?: Date; timeString?: string; timeInputLabel?: string; - customTimeInput?: React.ReactElement; + customTimeInput?: React.ReactElement<{ + date?: Date; + value: string; + onChange: (time: string) => void; + }>; } interface InputTimeState { @@ -32,7 +36,7 @@ export default class InputTime extends Component< InputTimeProps, InputTimeState > { - inputRef: React.RefObject = React.createRef(); + inputRef: React.RefObject = React.createRef(); constructor(props: InputTimeProps) { super(props); diff --git a/src/tab_loop.tsx b/src/tab_loop.tsx index 3695b1117..a830e25ef 100644 --- a/src/tab_loop.tsx +++ b/src/tab_loop.tsx @@ -54,7 +54,7 @@ export default class TabLoop extends Component { this.tabLoopRef = createRef(); } - private tabLoopRef: React.RefObject; + private tabLoopRef: React.RefObject; /** * `getTabChildren` is a method of the `TabLoop` class that retrieves all tabbable children of the component. diff --git a/src/with_floating.tsx b/src/with_floating.tsx index 8efed00b2..7635cc664 100644 --- a/src/with_floating.tsx +++ b/src/with_floating.tsx @@ -48,7 +48,7 @@ export default function withFloating( const WithFloating: React.FC = (props): React.ReactElement => { const hidePopper: boolean = typeof props.hidePopper === "boolean" ? props.hidePopper : true; - const arrowRef: React.RefObject = useRef(null); + const arrowRef: React.RefObject = useRef(null); const floatingProps = useFloating({ open: !hidePopper, whileElementsMounted: autoUpdate, diff --git a/src/year_dropdown_options.tsx b/src/year_dropdown_options.tsx index cf0c7cc98..fcd991850 100644 --- a/src/year_dropdown_options.tsx +++ b/src/year_dropdown_options.tsx @@ -87,7 +87,7 @@ export default class YearDropdownOptions extends Component< } } - dropdownRef: React.RefObject; + dropdownRef: React.RefObject; renderOptions = (): React.ReactElement[] => { const selectedYear = this.props.year;