feat: (#1072) React 19 Updates for Calendar, DatePicker and DateRangePicker

.gitignore

@@ -4,4 +4,5 @@ dist
 storybook-static
 package-lock.json
 .vscode
-yarn.lock
+yarn.lock
+.idea

jest.config.js

@@ -3,9 +3,9 @@ module.exports = {
   testEnvironment: "jsdom",
   moduleDirectories: ["node_modules", "src"],
   moduleNameMapper: {
-    ".(css|less|scss)$": "identity-obj-proxy",
-    "components/(.*)": "<rootDir>/src/components/$1",
-    "assets/(.*)": "<rootDir>/src/assets/$1",
+    "\\.(css|less|scss)$": "identity-obj-proxy",
+    "^components/(.*)$": "<rootDir>/src/components/$1",
+    "^assets/(.*)$": "<rootDir>/src/assets/$1",
   },
   transformIgnorePatterns: ["<rootDir>/node_modules/(?!react-dnd|dnd-core|@react-dnd)"],
 };

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

@@ -1,11 +1,6 @@
 "use client";
 import React from "react";
-import {
-  DayPicker,
-  DayPickerRangeProps,
-  DayPickerSingleProps,
-  useNavigation,
-} from "react-day-picker";
+import { DayPicker, useDayPicker, PropsSingle, PropsRange, PropsBase } from "react-day-picker";
 
 import {
   ArrowLeftHeadIcon,
@@ -17,6 +12,9 @@ import { addYears, format } from "date-fns";
 import { Text } from "../../text-elements/Text";
 import { NavButton } from "./NavButton";
 
+export type DayPickerSingleProps = PropsBase & PropsSingle;
+export type DayPickerRangeProps = PropsBase & PropsRange;
+
 function Calendar<T extends DayPickerSingleProps | DayPickerRangeProps>({
   mode,
   defaultMonth,
@@ -34,49 +32,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 hover:bg-tremor-background-subtle dark:hover:bg-dark-tremor-background-subtle rounded-tremor-default",
+        day_button:
+          "h-9 w-9 p-0 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 +93,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: locale as any })}
               </Text>
 
               <div className="flex items-center space-x-1">
@@ -97,7 +103,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 +113,7 @@ function Calendar<T extends DayPickerSingleProps | DayPickerRangeProps>({
         },
       }}
       {...other}
+      hideNavigation
     />
   );
 }

src/components/input-elements/Calendar/index.ts

@@ -1 +1 @@
-export { default as Calendar } from "./Calendar";
+export { default as Calendar, DayPickerSingleProps, DayPickerRangeProps } from "./Calendar";

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

@@ -1,14 +1,13 @@
 "use client";
 import { tremorTwMerge } from "lib";
 import React, { useMemo } from "react";
-import { DayPickerSingleProps } from "react-day-picker";
 
 import { startOfMonth, startOfToday } from "date-fns";
 import { enUS } from "date-fns/locale";
 
 import { Popover, PopoverButton, PopoverPanel, Transition } from "@headlessui/react";
 import { CalendarIcon, XCircleIcon } from "assets";
-import { Calendar } from "components/input-elements/Calendar";
+import { Calendar, DayPickerSingleProps } from "components/input-elements/Calendar";
 import { makeDatePickerClassName } from "components/input-elements/DatePicker/datePickerUtils";
 import { useInternalState } from "hooks";
 import { Color } from "../../../lib/inputTypes";

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

@@ -4,7 +4,7 @@ import { CalendarIcon, XCircleIcon } from "assets";
 import { startOfMonth, startOfToday } from "date-fns";
 import { tremorTwMerge } from "lib";
 import React, { ReactElement, useMemo, useState } from "react";
-import { DateRange, DayPickerRangeProps } from "react-day-picker";
+import { DateRange } from "react-day-picker";
 import {
   constructValueToNameMapping,
   getNodeText,
@@ -19,7 +19,7 @@ import {
   parseStartDate,
 } from "./dateRangePickerUtils";
 
-import { Calendar } from "components/input-elements/Calendar";
+import { Calendar, DayPickerRangeProps } from "components/input-elements/Calendar";
 import { DateRangePickerItemProps } from "components/input-elements/DateRangePicker/DateRangePickerItem";
 import { SelectItem } from "components/input-elements/Select";
 import { enUS } from "date-fns/locale";
@@ -277,16 +277,17 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((
               disabled={disabledDays}
               enableYearNavigation={enableYearNavigation}
               classNames={{
-                day_range_middle: tremorTwMerge(
+                range_middle: tremorTwMerge(
                   "!rounded-none aria-selected:!bg-tremor-background-subtle aria-selected:dark:!bg-dark-tremor-background-subtle aria-selected:!text-tremor-content aria-selected:dark:!bg-dark-tremor-background-subtle",
                 ),
-                day_range_start:
+                range_start:
                   "rounded-r-none rounded-l-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted",
-                day_range_end:
+                range_end:
                   "rounded-l-none rounded-r-tremor-small aria-selected:text-tremor-brand-inverted dark:aria-selected:text-dark-tremor-brand-inverted",
               }}
               weekStartsOn={weekStartsOn}
               {...props}
+              role={"dialog"}
             />
           </PopoverPanel>
         </Transition>