feat: Add support React19

CONTRIBUTING.md

@@ -3,11 +3,11 @@
 Thanks for your interest in contributing to `react-tailwindcss-datepicker`! Please take a moment to
 review this document **before submitting a pull request**.
 
--   [Pull requests](#pull-requests)
--   [Installation](#installation)
--   [Coding standards](#coding-standards)
--   [Running playground](#running-playgrounds)
--   [Before you make a Pull Request](#before-you-make-a-pull-request)
+- [Pull requests](#pull-requests)
+- [Installation](#installation)
+- [Coding standards](#coding-standards)
+- [Running playground](#running-playground)
+- [Before you make a Pull Request](#before-you-make-a-pull-request)
 
 ## Pull requests
 

README.md

@@ -16,27 +16,27 @@
 
 ## Contents
 
--   [Features](#features)
--   [Documentation](#documentation)
--   [Installation](#installation)
--   [Simple Usage](#simple-usage)
--   [Theming Options](#theming-options)
--   [Playground](#playground)
--   [Contributing](#contributing)
+- [Features](#features)
+- [Documentation](#documentation)
+- [Installation](#installation)
+- [Simple Usage](#simple-usage)
+- [Theming Options](#theming-options)
+- [Playground](#playground)
+- [Contributing](#contributing)
 
 ## Features
 
--   ✅ Theming options
--   ✅ Dark mode
--   ✅ Single Date
--   ✅ Single date use Range
--   ✅ Shortcuts
--   ✅ TypeScript support
--   ✅ Localization(i18n)
--   ✅ Date formatting
--   ✅ Disable specific dates
--   ✅ Minimum Date and Maximum Date
--   ✅ Custom shortcuts
+- ✅ Theming options
+- ✅ Dark mode
+- ✅ Single Date
+- ✅ Single date use Range
+- ✅ Shortcuts
+- ✅ TypeScript support
+- ✅ Localization(i18n)
+- ✅ Date formatting
+- ✅ Disable specific dates
+- ✅ Minimum Date and Maximum Date
+- ✅ Custom shortcuts
 
 ## Documentation
 
@@ -156,10 +156,10 @@ See
 
 ## Thanks to
 
--   [Vue Tailwind Datepicker](https://vue-tailwind-datepicker.com/)
--   [React](https://reactjs.org/)
--   [Tailwind CSS](https://tailwindcss.com/)
--   [dayjs](https://day.js.org/)
+- [Vue Tailwind Datepicker](https://vue-tailwind-datepicker.com/)
+- [React](https://reactjs.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [dayjs](https://day.js.org/)
 
 I thank you in advance for your contribution to this project.
 

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -39,15 +39,15 @@
     ],
     "peerDependencies": {
         "dayjs": "^1.11.12",
-        "react": "^17.0.2 || ^18.2.0"
+        "react": "^19.0.0"
     },
     "devDependencies": {
-        "@rollup/plugin-commonjs": "^26.0.1",
-        "@rollup/plugin-node-resolve": "^15.2.3",
-        "@rollup/plugin-typescript": "^11.1.6",
+        "@rollup/plugin-commonjs": "^28.0.2",
+        "@rollup/plugin-node-resolve": "^16.0.0",
+        "@rollup/plugin-typescript": "^12.1.2",
         "@tailwindcss/forms": "^0.5.7",
         "@types/node": "^22.3.0",
-        "@types/react": "^18.3.3",
+        "@types/react": "^19.0.2",
         "@typescript-eslint/eslint-plugin": "^8.1.0",
         "@typescript-eslint/parser": "^8.1.0",
         "autoprefixer": "^10.4.20",
@@ -62,12 +62,12 @@
         "eslint-plugin-react-refresh": "^0.4.9",
         "husky": "^9.1.4",
         "lint-staged": "^15.2.9",
-        "next": "^14.2.5",
+        "next": "^15.1.3",
         "pinst": "^3.0.0",
         "postcss": "^8.4.41",
         "prettier": "^3.3.3",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "rollup": "^4.20.0",
         "tailwindcss": "^3.4.10",
         "tslib": "^2.6.3",

rollup.config.js

@@ -19,5 +19,11 @@ module.exports = {
         }
     ],
     external: ["react", "dayjs"],
-    plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })]
+    plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
+    jsx: {
+        mode: "preserve",
+        factory: "React.createElement",
+        fragment: "React.Fragment",
+        importSource: "react"
+    }
 };

src/components/Input.tsx

@@ -16,7 +16,7 @@ import { DateType } from "../types";
 import ToggleButton from "./ToggleButton";
 
 type Props = {
-    setContextRef?: (ref: RefObject<HTMLInputElement>) => void;
+    setContextRef?: (ref: RefObject<HTMLInputElement | null>) => void;
 };
 
 const Input = (e: Props) => {

src/components/Shortcuts.tsx

@@ -158,7 +158,9 @@ const Shortcuts = () => {
                                           key as keyof typeof configs.shortcuts
                                       ] === "object"
                                         ? printItemText(item)
-                                        : configs.shortcuts[key as keyof typeof configs.shortcuts]
+                                        : (configs.shortcuts[
+                                              key as keyof typeof configs.shortcuts
+                                          ] as string)
                                     : printItemText(item)}
                             </>
                         </ItemTemplate>

src/contexts/DatepickerContext.ts → src/contexts/DatepickerContext.tsx

@@ -22,10 +22,10 @@ import {
 } from "../types";
 
 interface DatepickerStore {
-    arrowContainer: RefObject<HTMLDivElement> | null;
+    arrowContainer: RefObject<HTMLDivElement | null> | null;
     asSingle?: boolean;
 
-    calendarContainer: RefObject<HTMLDivElement> | null;
+    calendarContainer: RefObject<HTMLDivElement | null> | null;
     changeDatepickerValue: (value: DateValueType, e?: HTMLInputElement | null | undefined) => void;
     changeDayHover: (day: DateType) => void;
     changeInputText: (text: string) => void;
@@ -43,7 +43,7 @@ interface DatepickerStore {
     hideDatepicker: () => void;
 
     i18n: string;
-    input?: RefObject<HTMLInputElement>;
+    input?: RefObject<HTMLInputElement | null>;
     inputClassName?: ((className: string) => string) | string | null;
     inputId?: string;
     inputName?: string;

src/hooks/index.ts

@@ -1,7 +1,7 @@
 import { RefObject, useEffect } from "react";
 
 export default function useOnClickOutside(
-    ref: RefObject<HTMLDivElement>,
+    ref: RefObject<HTMLDivElement | null>,
     handler: (e?: MouseEvent | TouchEvent) => void
 ) {
     useEffect(() => {

tsconfig.json

@@ -9,7 +9,7 @@
         "isolatedModules": true,
         "esModuleInterop": true,
         "noEmit": true,
-        "jsx": "react-jsx",
+        "jsx": "preserve",
         "allowJs": true,
         "strict": true,
         "noUnusedLocals": true,