chor: compatible with react 18

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-trip-date",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "date-picker and range-picker for React applications",
   "author": "Samsam Ahmadi",
   "license": "GPL-3.0",
@@ -22,8 +22,8 @@
     "datePicker"
   ],
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^16.9.0 || ^17 || ^18",
+    "react-dom": "^16.9.0 || ^17 || ^18"
   },
   "dependencies": {
     "dayjs": "^1.11.7",

src/calendar/Calendar.tsx

@@ -1,12 +1,12 @@
 import { Dayjs } from "dayjs";
-import { ReactElement } from "react";
+import { FC, ReactElement } from "react";
 import { createCalendar } from "libs/createCalendar";
 import { dayjs } from "libs/dayjs-config";
 import { sliceDaysOfMonthToWeeks } from "libs/sliceDaysOfMonthToWeeks";
 
 import { CalendarProps } from "./calendar.type";
 
-export const Calendar: React.FC<CalendarProps> = ({
+export const Calendar: FC<CalendarProps> = ({
   jalali,
   startOfWeek = 1,
   children,

src/components/TitleOfWeek.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { ElementType } from "react";
+import { ElementType, FC } from "react";
 
 type Props = {
   jalali: boolean;
@@ -10,11 +10,7 @@ type Props = {
   };
 };
 
-export const TitleOfWeek: React.FunctionComponent<Props> = ({
-  jalali,
-  startOfWeek,
-  components,
-}) => {
+export const TitleOfWeek: FC<Props> = ({ jalali, startOfWeek, components }) => {
   let titles = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   if (components?.titles) titles = [...components?.titles];
   else if (jalali) titles = ["ش", "ی", "د", "س", "چ", "پ", "ج"];
@@ -25,12 +21,16 @@ export const TitleOfWeek: React.FunctionComponent<Props> = ({
   }
 
   if (components?.wrapper) {
-    const WrapperC = components?.wrapper;
+    const WrapperC = components.wrapper;
     return <WrapperC jalali={jalali} startOfWeek={startOfWeek} />;
   }
 
   return (
-    <Wrapper className="tp-calendar-week-titles" jalali={jalali} startOfWeek={startOfWeek}>
+    <Wrapper
+      className="tp-calendar-week-titles"
+      jalali={jalali}
+      startOfWeek={startOfWeek}
+    >
       {titles.map(item => (
         <p key={item}>{item}</p>
       ))}

src/datePicker/Day.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { Dayjs } from "dayjs";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, FC, SetStateAction } from "react";
 import { FORMAT_DATE } from "constant";
 import { classNames } from "libs/classNames";
 import { dayjs } from "libs/dayjs-config";
@@ -26,7 +26,7 @@ type Props = {
   dayClasses?: (day: Dayjs) => string[];
 };
 
-export const Day: React.FC<Props> = ({
+export const Day: FC<Props> = ({
   day,
   jalali,
   source,
@@ -144,16 +144,20 @@ export const Day: React.FC<Props> = ({
     <Wrapper
       data-test={day.format(FORMAT_DATE)}
       onClick={handleClick}
-      className={classNames({
-        inactive: day.month() !== source.add(numberOfMonth, "month").month(),
-        selected: handleSelectedDate(),
-        disabled: handleDisabledDate(),
-        disable: disabled,
-        today:
-          dayjs()
-            .calendar(jalali ? "jalali" : "gregory")
-            .format(FORMAT_DATE) === day.format(FORMAT_DATE),
-      }, extraDayClasses, "tp-calendar-day")}
+      className={classNames(
+        {
+          inactive: day.month() !== source.add(numberOfMonth, "month").month(),
+          selected: handleSelectedDate(),
+          disabled: handleDisabledDate(),
+          disable: disabled,
+          today:
+            dayjs()
+              .calendar(jalali ? "jalali" : "gregory")
+              .format(FORMAT_DATE) === day.format(FORMAT_DATE),
+        },
+        extraDayClasses,
+        "tp-calendar-day",
+      )}
     >
       {DayComponent && (
         <DayComponent day={day.format(FORMAT_DATE)} jalali={jalali} />