Updated react-day-picker dependency and ran upgrade guide

Author: ilchapman

package.json

@@ -27,7 +27,7 @@
     "@floating-ui/react": "^0.19.2",
     "@headlessui/react": "2.2.0",
     "date-fns": "^3.6.0",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.5.1",
     "react-transition-state": "^2.1.2",
     "recharts": "^2.13.3",
     "tailwind-merge": "^2.5.2"

src/components/input-elements/Calendar/Calendar.tsx

@@ -2,9 +2,10 @@
 import React from "react";
 import {
   DayPicker,
-  DayPickerRangeProps,
-  DayPickerSingleProps,
-  useNavigation,
+  useDayPicker,
+  type PropsSingle,
+  type PropsRange,
+  type PropsBase,
 } from "react-day-picker";
 
 import {
@@ -17,7 +18,7 @@ import { addYears, format } from "date-fns";
 import { Text } from "../../text-elements/Text";
 import { NavButton } from "./NavButton";
 
-function Calendar<T extends DayPickerSingleProps | DayPickerRangeProps>({
+function Calendar<T extends (PropsSingle | PropsRange) & PropsBase>({
   mode,
   defaultMonth,
   selected,
@@ -34,49 +35,57 @@ function Calendar<T extends DayPickerSingleProps | DayPickerRangeProps>({
       showOutsideDays={true}
       mode={mode as any}
       defaultMonth={defaultMonth}
-      selected={selected}
+      selected={selected as any}
       onSelect={onSelect as any}
       locale={locale}
       disabled={disabled}
       weekStartsOn={weekStartsOn}
       classNames={{
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
-        caption: "flex justify-center pt-2 relative items-center",
+        month_caption: "flex justify-center pt-2 relative items-center",
         caption_label:
           "text-tremor-default text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis font-medium",
         nav: "space-x-1 flex items-center",
-        nav_button:
-          "flex items-center justify-center p-1 h-7 w-7 outline-none focus:ring-2 transition duration-100 border border-tremor-border dark:border-dark-tremor-border hover:bg-tremor-background-muted dark:hover:bg-dark-tremor-background-muted rounded-tremor-small focus:border-tremor-brand-subtle dark:focus:border-dark-tremor-brand-subtle focus:ring-tremor-brand-muted dark:focus:ring-dark-tremor-brand-muted text-tremor-content-subtle dark:text-dark-tremor-content-subtle hover:text-tremor-content dark:hover:text-dark-tremor-content",
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
+        button_previous:
+          "flex items-center justify-center p-1 h-7 w-7 outline-none focus:ring-2 transition duration-100 border border-tremor-border dark:border-dark-tremor-border hover:bg-tremor-background-muted dark:hover:bg-dark-tremor-background-muted rounded-tremor-small focus:border-tremor-brand-subtle dark:focus:border-dark-tremor-brand-subtle focus:ring-tremor-brand-muted dark:focus:ring-dark-tremor-brand-muted text-tremor-content-subtle dark:text-dark-tremor-content-subtle hover:text-tremor-content dark:hover:text-dark-tremor-content absolute left-1",
+        button_next:
+          "flex items-center justify-center p-1 h-7 w-7 outline-none focus:ring-2 transition duration-100 border border-tremor-border dark:border-dark-tremor-border hover:bg-tremor-background-muted dark:hover:bg-dark-tremor-background-muted rounded-tremor-small focus:border-tremor-brand-subtle dark:focus:border-dark-tremor-brand-subtle focus:ring-tremor-brand-muted dark:focus:ring-dark-tremor-brand-muted text-tremor-content-subtle dark:text-dark-tremor-content-subtle hover:text-tremor-content dark:hover:text-dark-tremor-content absolute right-1",
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday:
           "w-9 font-normal text-center text-tremor-content-subtle dark:text-dark-tremor-content-subtle",
-        row: "flex w-full mt-0.5",
-        cell: "text-center p-0 relative focus-within:relative text-tremor-default text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis",
-        day: "h-9 w-9 p-0 hover:bg-tremor-background-subtle dark:hover:bg-dark-tremor-background-subtle outline-tremor-brand dark:outline-dark-tremor-brand rounded-tremor-default",
-        day_today: "font-bold",
-        day_selected:
+        week: "flex w-full mt-0.5",
+        day: "text-center p-0 relative focus-within:relative text-tremor-default text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis",
+        day_button:
+          "h-9 w-9 p-0 hover:bg-tremor-background-subtle dark:hover:bg-dark-tremor-background-subtle outline-tremor-brand dark:outline-dark-tremor-brand rounded-tremor-default",
+        today: "font-bold",
+        selected:
           "aria-selected:bg-tremor-background-emphasis aria-selected:text-tremor-content-inverted dark:aria-selected:bg-dark-tremor-background-emphasis dark:aria-selected:text-dark-tremor-content-inverted ",
-        day_disabled:
+        disabled:
           "text-tremor-content-subtle dark:text-dark-tremor-content-subtle disabled:hover:bg-transparent",
-        day_outside: "text-tremor-content-subtle dark:text-dark-tremor-content-subtle",
+        outside: "text-tremor-content-subtle dark:text-dark-tremor-content-subtle",
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ArrowLeftHeadIcon className="h-4 w-4" {...props} />,
-        IconRight: ({ ...props }) => <ArrowRightHeadIcon className="h-4 w-4" {...props} />,
-        Caption: ({ ...props }) => {
-          const { goToMonth, nextMonth, previousMonth, currentMonth } = useNavigation();
+        Chevron: (props) => {
+          if (props.orientation === "left") {
+            return <ArrowLeftHeadIcon className="h-4 w-4" {...props} />;
+          }
+
+          return <ArrowRightHeadIcon className="h-4 w-4" {...props} />;
+        },
+        MonthCaption: ({ calendarMonth }) => {
+          const { goToMonth, nextMonth, previousMonth } = useDayPicker();
 
           return (
             <div className="flex justify-between items-center">
               <div className="flex items-center space-x-1">
                 {enableYearNavigation && (
                   <NavButton
-                    onClick={() => currentMonth && goToMonth(addYears(currentMonth, -1))}
+                    onClick={() =>
+                      calendarMonth.date && goToMonth(addYears(calendarMonth.date, -1))
+                    }
                     icon={DoubleArrowLeftHeadIcon}
                   />
                 )}
@@ -87,7 +96,7 @@ function Calendar<T extends DayPickerSingleProps | DayPickerRangeProps>({
               </div>
 
               <Text className="text-tremor-default tabular-nums capitalize text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis font-medium">
-                {format(props.displayMonth, "LLLL yyy", { locale })}
+                {format(calendarMonth.date, "LLLL yyy", { locale })}
               </Text>
 
               <div className="flex items-center space-x-1">
@@ -97,7 +106,7 @@ function Calendar<T extends DayPickerSingleProps | DayPickerRangeProps>({
                 />
                 {enableYearNavigation && (
                   <NavButton
-                    onClick={() => currentMonth && goToMonth(addYears(currentMonth, 1))}
+                    onClick={() => calendarMonth.date && goToMonth(addYears(calendarMonth.date, 1))}
                     icon={DoubleArrowRightHeadIcon}
                   />
                 )}
@@ -107,6 +116,7 @@ function Calendar<T extends DayPickerSingleProps | DayPickerRangeProps>({
         },
       }}
       {...other}
+      hideNavigation
     />
   );
 }