Skip to content

Upgrade to React 19 #5300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 6, 2025
Merged

Upgrade to React 19 #5300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
32d6546
Upgrade to React 19
martijnrusschen Jan 6, 2025
9de10cd
also upgrade example
martijnrusschen Jan 6, 2025
cb56f57
🚨 Fix TypeScript Linting warnings for React 19 upgrade
Jan 6, 2025
011c335
Merge pull request #5301 from qburst/upgrade/react-19
martijnrusschen Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions docs-site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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",
Expand Down
39 changes: 17 additions & 22 deletions docs-site/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down
12 changes: 4 additions & 8 deletions examples/hello-world/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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"
}
39 changes: 17 additions & 22 deletions examples/hello-world/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down
33 changes: 8 additions & 25 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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": "[email protected]"
}
2 changes: 1 addition & 1 deletion src/calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
}
}

containerRef: React.RefObject<HTMLDivElement>;
containerRef: React.RefObject<HTMLDivElement | null>;

monthContainer: CalendarState["monthContainer"] = undefined;

Expand Down
13 changes: 9 additions & 4 deletions src/calendar_icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,16 @@ const CalendarIcon: React.FC<CalendarIconProps> = ({

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") {
Expand Down
8 changes: 6 additions & 2 deletions src/input_time.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -32,7 +36,7 @@ export default class InputTime extends Component<
InputTimeProps,
InputTimeState
> {
inputRef: React.RefObject<HTMLInputElement> = React.createRef();
inputRef: React.RefObject<HTMLInputElement | null> = React.createRef();

constructor(props: InputTimeProps) {
super(props);
Expand Down
2 changes: 1 addition & 1 deletion src/tab_loop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default class TabLoop extends Component<TabLoopProps> {
this.tabLoopRef = createRef();
}

private tabLoopRef: React.RefObject<HTMLDivElement>;
private tabLoopRef: React.RefObject<HTMLDivElement | null>;

/**
* `getTabChildren` is a method of the `TabLoop` class that retrieves all tabbable children of the component.
Expand Down
2 changes: 1 addition & 1 deletion src/with_floating.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function withFloating<T extends FloatingProps>(
const WithFloating: React.FC<R> = (props): React.ReactElement => {
const hidePopper: boolean =
typeof props.hidePopper === "boolean" ? props.hidePopper : true;
const arrowRef: React.RefObject<HTMLElement> = useRef(null);
const arrowRef: React.RefObject<HTMLElement | null> = useRef(null);
const floatingProps = useFloating({
open: !hidePopper,
whileElementsMounted: autoUpdate,
Expand Down
2 changes: 1 addition & 1 deletion src/year_dropdown_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export default class YearDropdownOptions extends Component<
}
}

dropdownRef: React.RefObject<HTMLDivElement>;
dropdownRef: React.RefObject<HTMLDivElement | null>;

renderOptions = (): React.ReactElement[] => {
const selectedYear = this.props.year;
Expand Down
Loading
Loading