diff --git a/.gitignore b/.gitignore index fc740099e..bf35aacaf 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ dist storybook-static package-lock.json .vscode -yarn.lock \ No newline at end of file +yarn.lock +.idea \ No newline at end of file diff --git a/jest.config.js b/jest.config.js index bee308ae6..093648960 100644 --- a/jest.config.js +++ b/jest.config.js @@ -3,9 +3,9 @@ module.exports = { testEnvironment: "jsdom", moduleDirectories: ["node_modules", "src"], moduleNameMapper: { - ".(css|less|scss)$": "identity-obj-proxy", - "components/(.*)": "/src/components/$1", - "assets/(.*)": "/src/assets/$1", + "\\.(css|less|scss)$": "identity-obj-proxy", + "^components/(.*)$": "/src/components/$1", + "^assets/(.*)$": "/src/assets/$1", }, transformIgnorePatterns: ["/node_modules/(?!react-dnd|dnd-core|@react-dnd)"], }; diff --git a/package.json b/package.json index 97334d52e..2677f23c5 100644 --- a/package.json +++ b/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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7e4406efb..2e6f996d6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,8 +18,8 @@ importers: specifier: ^3.6.0 version: 3.6.0 react-day-picker: - specifier: ^8.10.1 - version: 8.10.1(date-fns@3.6.0)(react@18.3.1) + specifier: ^9.5.1 + version: 9.5.1(react@18.3.1) react-transition-state: specifier: ^2.1.2 version: 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -895,6 +895,9 @@ packages: resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==} engines: {node: '>=0.1.90'} + '@date-fns/tz@1.2.0': + resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==} + '@esbuild/aix-ppc64@0.23.1': resolution: {integrity: sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==} engines: {node: '>=18'} @@ -2953,9 +2956,15 @@ packages: resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} engines: {node: '>= 0.4'} + date-fns-jalali@4.1.0-0: + resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==} + date-fns@3.6.0: resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} + date-fns@4.1.0: + resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==} + debug@4.3.7: resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==} engines: {node: '>=6.0'} @@ -5202,11 +5211,11 @@ packages: peerDependencies: react: ^16.3.0 || ^17.0.1 || ^18.0.0 - react-day-picker@8.10.1: - resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==} + react-day-picker@9.5.1: + resolution: {integrity: sha512-PxuK8inYLlYgM2zZUVBPsaBM5jI40suPeG+naKyx7kpyF032RRlEAUEjkpW9/poTASh/vyWAOVqjGuGw+47isw==} + engines: {node: '>=18'} peerDependencies: - date-fns: ^2.28.0 || ^3.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: '>=16.8.0' react-docgen-typescript@2.2.2: resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==} @@ -7097,6 +7106,8 @@ snapshots: '@colors/colors@1.5.0': optional: true + '@date-fns/tz@1.2.0': {} + '@esbuild/aix-ppc64@0.23.1': optional: true @@ -9501,8 +9512,12 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 + date-fns-jalali@4.1.0-0: {} + date-fns@3.6.0: {} + date-fns@4.1.0: {} + debug@4.3.7: dependencies: ms: 2.1.3 @@ -11967,9 +11982,11 @@ snapshots: react: 18.3.1 tween-functions: 1.2.0 - react-day-picker@8.10.1(date-fns@3.6.0)(react@18.3.1): + react-day-picker@9.5.1(react@18.3.1): dependencies: - date-fns: 3.6.0 + '@date-fns/tz': 1.2.0 + date-fns: 4.1.0 + date-fns-jalali: 4.1.0-0 react: 18.3.1 react-docgen-typescript@2.2.2(typescript@4.9.5): diff --git a/src/components/input-elements/Calendar/Calendar.tsx b/src/components/input-elements/Calendar/Calendar.tsx index 1b4b2b087..190944f27 100644 --- a/src/components/input-elements/Calendar/Calendar.tsx +++ b/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({ mode, defaultMonth, @@ -34,7 +32,7 @@ function Calendar({ showOutsideDays={true} mode={mode as any} defaultMonth={defaultMonth} - selected={selected} + selected={selected as any} onSelect={onSelect as any} locale={locale} disabled={disabled} @@ -42,41 +40,49 @@ function Calendar({ 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 }) => , - IconRight: ({ ...props }) => , - Caption: ({ ...props }) => { - const { goToMonth, nextMonth, previousMonth, currentMonth } = useNavigation(); + Chevron: (props) => { + if (props.orientation === "left") { + return ; + } + + return ; + }, + MonthCaption: ({ calendarMonth }) => { + const { goToMonth, nextMonth, previousMonth } = useDayPicker(); return (
{enableYearNavigation && ( currentMonth && goToMonth(addYears(currentMonth, -1))} + onClick={() => + calendarMonth.date && goToMonth(addYears(calendarMonth.date, -1)) + } icon={DoubleArrowLeftHeadIcon} /> )} @@ -87,7 +93,7 @@ function Calendar({
- {format(props.displayMonth, "LLLL yyy", { locale })} + {format(calendarMonth.date, "LLLL yyy", { locale: locale as any })}
@@ -97,7 +103,7 @@ function Calendar({ /> {enableYearNavigation && ( currentMonth && goToMonth(addYears(currentMonth, 1))} + onClick={() => calendarMonth.date && goToMonth(addYears(calendarMonth.date, 1))} icon={DoubleArrowRightHeadIcon} /> )} @@ -107,6 +113,7 @@ function Calendar({ }, }} {...other} + hideNavigation /> ); } diff --git a/src/components/input-elements/Calendar/index.ts b/src/components/input-elements/Calendar/index.ts index eca04c49a..540e4bb85 100644 --- a/src/components/input-elements/Calendar/index.ts +++ b/src/components/input-elements/Calendar/index.ts @@ -1 +1 @@ -export { default as Calendar } from "./Calendar"; +export { default as Calendar, DayPickerSingleProps, DayPickerRangeProps } from "./Calendar"; diff --git a/src/components/input-elements/DatePicker/DatePicker.tsx b/src/components/input-elements/DatePicker/DatePicker.tsx index bdf3507ab..648d1bea9 100644 --- a/src/components/input-elements/DatePicker/DatePicker.tsx +++ b/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"; diff --git a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx b/src/components/input-elements/DateRangePicker/DateRangePicker.tsx index 59596f60f..a3d2e649f 100644 --- a/src/components/input-elements/DateRangePicker/DateRangePicker.tsx +++ b/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(( 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"} />