fix(deps): update dependency react-datepicker to v7 (#406)

* fix(deps): update dependency react-datepicker to v7

* fix: ui and typecheck

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: chiol <[email protected]>

apps/web/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/pages/building-your-application/configuring/typescript for more information.

apps/web/package.json

@@ -62,7 +62,7 @@
     "pino": "^9.0.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
-    "react-datepicker": "^6.9.0",
+    "react-datepicker": "^7.0.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.3",
     "react-hot-toast": "^2.4.1",
@@ -90,7 +90,7 @@
     "@types/node": "20.16.5",
     "@types/react": "^18.2.79",
     "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-datepicker": "^6.0.0",
+    "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^18.2.25",
     "@ufb/eslint-config": "workspace:*",
     "@ufb/prettier-config": "workspace:*",

apps/web/src/shared/styles/react-datepicker.css

@@ -11,7 +11,7 @@
   @apply p-2;
 }
 .react-datepicker__current-month {
-  @apply bg-fill-quaternary font-16-regular text-primary rounded-sm px-4 py-3;
+  @apply bg-fill-quaternary font-16-regular text-primary rounded-sm px-4 py-3 !important;
 }
 
 .react-datepicker__navigation--previous,
@@ -72,18 +72,18 @@
   color: var(--text-color-tertiary);
 }
 
-.react-datepicker__day:hover,
-.react-datepicker__month-text:hover,
-.react-datepicker__quarter-text:hover,
-.react-datepicker__year-text:hover {
+.react-datepicker__day:not([aria-disabled='true']):hover,
+.react-datepicker__month-text:not([aria-disabled='true']):hover,
+.react-datepicker__quarter-text:not([aria-disabled='true']):hover,
+.react-datepicker__year-text:not([aria-disabled='true']):hover {
   @apply text-inverse bg-fill-primary rounded-full;
 }
 
 .react-datepicker__day--disabled:hover,
 .react-datepicker__month-text--disabled:hover,
 .react-datepicker__quarter-text--disabled:hover,
 .react-datepicker__year-text--disabled:hover {
-  @apply bg-transparent;
+  @apply rounded-full bg-transparent;
   color: var(--text-color-tertiary);
 }
 

apps/web/src/shared/ui/date-range-picker.tsx

@@ -179,8 +179,8 @@ const DateRangePicker: React.FC<IProps> = (props) => {
               setCurrentValue({ startDate: v[0], endDate: v[1] });
               setActiveIdx(-1);
             }}
-            startDate={currentValue?.startDate}
-            endDate={currentValue?.endDate}
+            startDate={currentValue?.startDate ?? undefined}
+            endDate={currentValue?.endDate ?? undefined}
             monthsShown={2}
             minDate={minDate}
             maxDate={maxDate}