feat(deps) - upgrade react-day-picker from v8 to v9 with improved styling

package.json

@@ -103,7 +103,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "dompurify": "^3.3.3",
     "lodash.capitalize": "^4.2.1",
     "lodash.get": "^4.4.2",
@@ -115,7 +115,7 @@
     "lodash.omitby": "^4.6.0",
     "lucide-react": "^1.7.0",
     "postcss": "^8.5.9",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.14.0",
     "react-flagpack": "^2.0.6",
     "react-hook-form": "^7.54.2",
     "tailwind-merge": "^3.5.0",

src/components/form/fields/default/DatePickerFieldDefault.tsx

@@ -11,13 +11,13 @@ import { CalendarIcon } from 'lucide-react';
 import { format } from 'date-fns';
 import {
   Popover,
-  PopoverClose,
   PopoverContent,
   PopoverTrigger,
 } from '@/src/components/ui/popover';
 import { cn } from '@/src/lib/utils';
 import { Calendar } from '@/src/components/ui/calendar';
 import { HelpCenter } from '@/src/components/shared/zendesk-drawer/HelpCenter';
+import { useState } from 'react';
 
 export function DatePickerFieldDefault({
   field,
@@ -27,6 +27,8 @@ export function DatePickerFieldDefault({
   const { name, label, description, minDate, maxDate } = fieldData;
   const minDateValue = minDate ? new Date(minDate) : undefined;
   const maxDateValue = maxDate ? new Date(maxDate) : undefined;
+  const [open, setOpen] = useState(false);
+
   return (
     <FormItem
       data-field={name}
@@ -35,7 +37,7 @@ export function DatePickerFieldDefault({
       <FormLabel className='RemoteFlows__DatePickerField__Label'>
         {label}
       </FormLabel>
-      <Popover>
+      <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <FormControl>
             <div>
@@ -62,15 +64,12 @@ export function DatePickerFieldDefault({
             mode='single'
             className='RemoteFlows__DatepickerField__Calendar'
             selected={field.value ? new Date(field.value) : undefined}
-            onSelect={(date) => {
-              field.onChange(date ? format(date, 'yyyy-MM-dd') : null);
+            onDayClick={(day) => {
+              const formattedDate = format(day, 'yyyy-MM-dd');
+              field.onChange(formattedDate);
+              setOpen(false);
             }}
             defaultMonth={minDateValue}
-            components={{
-              DayContent: (props) => {
-                return <PopoverClose>{props.date.getDate()}</PopoverClose>;
-              },
-            }}
             disabled={(date: Date) => {
               if (minDateValue && date < minDateValue) return true;
               if (maxDateValue && date > maxDateValue) return true;

src/components/ui/calendar.tsx

@@ -3,71 +3,45 @@ import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { DayPicker } from 'react-day-picker';
 
 import { cn } from '@/src/lib/utils';
-import { buttonVariants } from '@/src/components/ui/button';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
   ...props
-}: React.ComponentProps<typeof DayPicker>) {
+}: CalendarProps) {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn('p-3', className)}
       classNames={{
-        months: 'flex flex-col sm:flex-row gap-2',
-        month: 'flex flex-col gap-4',
-        caption: 'flex justify-center pt-1 relative items-center w-full',
-        caption_label: 'text-sm font-medium',
-        nav: 'flex items-center gap-1',
-        nav_button: cn(
-          buttonVariants({ variant: 'outline' }),
-          'size-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-x-1',
-        head_row: 'flex',
-        head_cell:
-          'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
-        row: 'flex w-full mt-2',
-        cell: cn(
-          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',
-          props.mode === 'range'
-            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
-            : '[&:has([aria-selected])]:rounded-md',
-        ),
-        day: cn(
-          buttonVariants({ variant: 'ghost' }),
-          'size-8 p-0 font-normal aria-selected:opacity-100',
-        ),
-        day_range_start:
-          'day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground',
-        day_range_end:
-          'day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground',
-        day_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:text-muted-foreground',
-        day_disabled: 'text-muted-foreground opacity-50',
-        day_range_middle:
-          'aria-selected:bg-accent aria-selected:text-accent-foreground',
-        day_hidden: 'invisible',
+        months: 'flex flex-col sm:flex-row gap-4',
+        month: 'flex flex-col gap-y-4',
+        month_caption: 'flex h-8 w-full items-center justify-center relative',
+        caption_label: 'font-medium text-sm',
+        nav: 'flex items-center justify-between w-full',
+        month_grid: 'w-full border-collapse mt-4',
+        weekdays: 'flex',
+        weekday:
+          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        week: 'flex w-full mt-2',
+        day: 'h-9 w-9 text-center text-sm p-0 relative',
         ...classNames,
       }}
       components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeft className={cn('size-4', className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn('size-4', className)} {...props} />
-        ),
+        Chevron: ({ orientation, ...props }) => {
+          if (orientation === 'left') {
+            return <ChevronLeft {...props} />;
+          }
+          return <ChevronRight {...props} />;
+        },
       }}
       {...props}
     />
   );
 }
+Calendar.displayName = 'Calendar';
 
 export { Calendar };