Updated functionality on DatePicker and DateRangePicker components

Author: ilchapman

.gitignore

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

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

@@ -18,7 +18,10 @@ import { addYears, format } from "date-fns";
 import { Text } from "../../text-elements/Text";
 import { NavButton } from "./NavButton";
 
-function Calendar<T extends (PropsSingle | PropsRange) & PropsBase>({
+export type DayPickerSingleProps = PropsBase & PropsSingle;
+export type DayPickerRangeProps = PropsBase & PropsRange;
+
+function Calendar<T extends DayPickerSingleProps | DayPickerRangeProps>({
   mode,
   defaultMonth,
   selected,
@@ -96,7 +99,7 @@ function Calendar<T extends (PropsSingle | PropsRange) & PropsBase>({
               </div>
 
               <Text className="text-tremor-default tabular-nums capitalize text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis font-medium">
-                {format(calendarMonth.date, "LLLL yyy", { locale })}
+                {format(calendarMonth.date, "LLLL yyy", { locale: locale as any })}
               </Text>
 
               <div className="flex items-center space-x-1">

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, type 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, type 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>