Merge pull request #5300 from Hacker0x01/react-19

Upgrade to React 19

Author: martijnrusschen

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",

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
 

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"
 }

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
 

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": "[email protected]"
 }

src/calendar.tsx

@@ -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;
 

src/calendar_icon.tsx

@@ -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") {

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<HTMLInputElement> = React.createRef();
+  inputRef: React.RefObject<HTMLInputElement | null> = React.createRef();
 
   constructor(props: InputTimeProps) {
     super(props);

src/tab_loop.tsx

@@ -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.

src/with_floating.tsx

@@ -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,