From 9b61d035bc1543bf56f2e2c61c4df5ff5a3f487d Mon Sep 17 00:00:00 2001 From: Ahmad <103906421+ahmadk953@users.noreply.github.com> Date: Sat, 15 Feb 2025 13:00:44 -0500 Subject: [PATCH] Update React Day Picker to Latest Version --- components/ui/calendar.tsx | 64 ++++++++++++++++++++------------------ package.json | 2 +- yarn.lock | 31 +++++++++++++----- 3 files changed, 58 insertions(+), 39 deletions(-) diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx index 9286fed..4dcf951 100644 --- a/components/ui/calendar.tsx +++ b/components/ui/calendar.tsx @@ -1,11 +1,9 @@ -'use client'; - import * as React from 'react'; -import { ChevronLeft, ChevronRight } from 'lucide-react'; -import { DayPicker } from 'react-day-picker'; +import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'; +import { DayFlag, DayPicker, SelectionState, UI } from 'react-day-picker'; import { cn } from '@/lib/utils'; -import { buttonVariants } from '@/components/ui/button'; +import { buttonVariants } from './button'; export type CalendarProps = React.ComponentProps; @@ -20,45 +18,49 @@ function Calendar({ showOutsideDays={showOutsideDays} className={cn('p-3', className)} 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-1 relative items-center', - caption_label: 'text-sm font-medium', - nav: 'space-x-1 flex items-center', - nav_button: cn( + [UI.Months]: 'relative', + [UI.Month]: 'space-y-4 ml-0', + [UI.MonthCaption]: 'flex justify-center items-center h-7', + [UI.CaptionLabel]: 'text-sm font-medium', + [UI.PreviousMonthButton]: cn( buttonVariants({ variant: 'outline' }), - 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100' + 'absolute left-1 top-0 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100' ), - 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: + [UI.NextMonthButton]: cn( + buttonVariants({ variant: 'outline' }), + 'absolute right-1 top-0 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100' + ), + [UI.MonthGrid]: 'w-full border-collapse space-y-1', + [UI.Weekdays]: 'flex', + [UI.Weekday]: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]', - row: 'flex w-full mt-2', - cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20', - day: cn( + [UI.Week]: 'flex w-full mt-2', + [UI.Day]: + 'h-9 w-9 text-center rounded-md text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20', + [UI.DayButton]: cn( buttonVariants({ variant: 'ghost' }), - 'h-9 w-9 p-0 font-normal aria-selected:opacity-100' + 'h-9 w-9 p-0 font-normal aria-selected:opacity-100 hover:bg-primary hover:text-primary-foreground' ), - day_range_end: 'day-range-end', - day_selected: + [SelectionState.range_end]: 'day-range-end', + [SelectionState.selected]: 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground', - day_today: 'bg-accent text-accent-foreground', - day_outside: - 'day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground', - day_disabled: 'text-muted-foreground opacity-50', - day_range_middle: + [SelectionState.range_middle]: 'aria-selected:bg-accent aria-selected:text-accent-foreground', - day_hidden: 'invisible', + [DayFlag.today]: 'bg-accent text-accent-foreground', + [DayFlag.outside]: + 'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30', + [DayFlag.disabled]: 'text-muted-foreground opacity-50', + [DayFlag.hidden]: 'invisible', ...classNames, }} components={{ + // @ts-expect-error https://github.com/shadcn-ui/ui/issues/5799 IconLeft: ({ className, ...props }) => ( - + ), + // @ts-expect-error https://github.com/shadcn-ui/ui/issues/5799 IconRight: ({ className, ...props }) => ( - + ), }} {...props} diff --git a/package.json b/package.json index 7d74874..d413e35 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "next": "^15.1.6", "next-themes": "^0.4.4", "react": "^19.0.0", - "react-day-picker": "8.10.1", + "react-day-picker": "^9.5.1", "react-dom": "^19.0.0", "sharp": "^0.33.5", "sonner": "^1.7.4", diff --git a/yarn.lock b/yarn.lock index f391955..850842a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -950,6 +950,13 @@ __metadata: languageName: node linkType: hard +"@date-fns/tz@npm:^1.2.0": + version: 1.2.0 + resolution: "@date-fns/tz@npm:1.2.0" + checksum: 10c0/411e9d4303b10951f6fd0189d18fb845f0d934a575df2176bc10daf664282c765fb6b057a977e446bbb1229151d89e7788978600a019f1fc24b5c75276d496bd + languageName: node + linkType: hard + "@emnapi/runtime@npm:^1.2.0": version: 1.3.1 resolution: "@emnapi/runtime@npm:1.3.1" @@ -5854,6 +5861,13 @@ __metadata: languageName: node linkType: hard +"date-fns-jalali@npm:^4.1.0-0": + version: 4.1.0-0 + resolution: "date-fns-jalali@npm:4.1.0-0" + checksum: 10c0/f9ad98d9f7e8e5abe0d070dc806b0c8baded2b1208626c42e92cbd2605b5171f5714d6b79b20cc2666267d821699244c9d0b5e93274106cf57d6232da77596ed + languageName: node + linkType: hard + "date-fns@npm:^4.1.0": version: 4.1.0 resolution: "date-fns@npm:4.1.0" @@ -11033,13 +11047,16 @@ __metadata: languageName: node linkType: hard -"react-day-picker@npm:8.10.1": - version: 8.10.1 - resolution: "react-day-picker@npm:8.10.1" +"react-day-picker@npm:^9.5.1": + version: 9.5.1 + resolution: "react-day-picker@npm:9.5.1" + dependencies: + "@date-fns/tz": "npm:^1.2.0" + date-fns: "npm:^4.1.0" + date-fns-jalali: "npm:^4.1.0-0" peerDependencies: - date-fns: ^2.28.0 || ^3.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10c0/a0ff28c4b61b3882e6a825b19e5679e2fdf3256cf1be8eb0a0c028949815c1ae5a6561474c2c19d231c010c8e0e0b654d3a322610881e0655abca05a2e03d9df + react: ">=16.8.0" + checksum: 10c0/050309240cc4b00d2012a43ff7f0d22276072d90ff0d619a2f6accb34318b919e6c723080a43e6d34583e48c194cbffecd5881b7350fac09e0b47576ddc872cf languageName: node linkType: hard @@ -12487,7 +12504,7 @@ __metadata: prettier-plugin-tailwindcss: "npm:^0.6.11" prisma: "npm:^6.3.1" react: "npm:^19.0.0" - react-day-picker: "npm:8.10.1" + react-day-picker: "npm:^9.5.1" react-dom: "npm:^19.0.0" sharp: "npm:^0.33.5" sonner: "npm:^1.7.4"