Update react-day-picker to 9.x (#18247)

* update react-day-picker to 9.x

* fix shadcn calendar component

* update review activity custom component for rdp

* fix colors

web/src/components/overlay/ReviewActivityCalendar.tsx

@@ -1,9 +1,9 @@
 import { RecordingsSummary, ReviewSummary } from "@/types/review";
 import { Calendar } from "../ui/calendar";
-import { useMemo } from "react";
+import { ButtonHTMLAttributes, useEffect, useMemo, useRef } from "react";
 import { FaCircle } from "react-icons/fa";
 import { getUTCOffset } from "@/utils/dateUtil";
-import { type DayContentProps } from "react-day-picker";
+import { type DayButtonProps } from "react-day-picker";
 import { LAST_24_HOURS_KEY } from "@/types/filter";
 import { usePersistence } from "@/hooks/use-persistence";
 import { cn } from "@/lib/utils";
@@ -94,7 +94,7 @@ export default function ReviewActivityCalendar({
       onSelect={onSelect}
       modifiers={modifiers}
       components={{
-        DayContent: ReviewActivityDay,
+        DayButton: ReviewActivityDay,
       }}
       defaultMonth={selectedDay ?? new Date()}
       weekStartsOn={(weekStartsOn ?? 0) as WeekStartsOnType}
@@ -102,43 +102,61 @@ export default function ReviewActivityCalendar({
   );
 }
 
-function ReviewActivityDay({ date, activeModifiers }: DayContentProps) {
+function ReviewActivityDay({
+  day,
+  modifiers,
+  ...buttonProps
+}: DayButtonProps & ButtonHTMLAttributes<HTMLButtonElement>) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
   const dayActivity = useMemo(() => {
-    if (activeModifiers["alerts"]) {
+    if (modifiers["alerts"]) {
       return "alert";
-    } else if (activeModifiers["detections"]) {
+    } else if (modifiers["detections"]) {
       return "detection";
     } else {
       return "none";
     }
-  }, [activeModifiers]);
+  }, [modifiers]);
 
   return (
-    <div className={cn("flex flex-col items-center justify-center gap-0.5")}>
-      <span
-        className={cn(
-          "w-4",
-          activeModifiers["recordings"]
-            ? "border-b border-primary/60 text-primary"
-            : "text-primary/40",
-          activeModifiers.selected && "border-white text-white",
-        )}
-      >
-        {date.getDate()}
-      </span>
-      <div className="mt-0.5 flex h-2 flex-row gap-0.5">
-        {dayActivity != "none" && (
-          <FaCircle
-            size={6}
-            className={cn(
-              dayActivity == "alert"
-                ? "fill-severity_alert"
-                : "fill-severity_detection",
-            )}
-          />
-        )}
+    <button ref={ref} {...buttonProps}>
+      <div className={cn("flex flex-col items-center justify-center gap-0.5")}>
+        <span
+          className={cn(
+            modifiers["recordings"] ? "text-primary" : "text-primary/40",
+          )}
+        >
+          {day.date.getDate()}
+        </span>
+        <div
+          className={cn(
+            "w-4",
+            modifiers["recordings"]
+              ? "border-b border-primary/60 text-primary"
+              : "text-primary/40",
+            modifiers.selected && "border-white text-white",
+          )}
+        />
+
+        <div className="mt-0.5 flex h-2 flex-row gap-0.5">
+          {dayActivity != "none" && (
+            <FaCircle
+              size={6}
+              className={cn(
+                dayActivity == "alert"
+                  ? "fill-severity_alert"
+                  : "fill-severity_detection",
+              )}
+            />
+          )}
+        </div>
       </div>
-    </div>
+    </button>
   );
 }
 

web/src/components/ui/calendar.tsx

@@ -17,45 +17,59 @@ function Calendar({
   return (
     <DayPicker
       locale={locale}
+      navLayout={"around"}
       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",
+        month: "relative",
+        month_caption: "flex justify-center pt-1 relative items-center",
+        month_grid: "w-full border-collapse space-y-1 mt-4",
         caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
+        nav: "flex items-center justify-between",
+        button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          "h-7 w-7 absolute top-0 left-1 bg-transparent fill-primary p-0 opacity-50 hover:opacity-100 z-10",
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex justify-center",
-        head_cell:
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 absolute top-0 right-1 bg-transparent fill-primary p-0 opacity-50 hover:opacity-100 z-10",
+        ),
+        weeks: "w-full border-collapse",
+        weekdays: "flex justify-center",
+        weekday:
           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2 justify-center",
-        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(
+        week: "flex w-full mt-2 justify-center",
+        day: "h-9 w-9 text-center text-sm p-0 relative aria-selected:opacity-100 first:aria-selected:rounded-l-md last:aria-selected:rounded-r-md",
+        day_button: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
+          "h-9 w-9 p-0 font-normal text-muted-foreground focus-within:relative focus-within:z-20",
         ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-selected text-white hover:bg-selected hover:text-white focus:bg-selected focus:text-white",
-        day_today: "bg-muted text-muted-foreground",
-        day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
+        range_start:
+          "day-range-start !bg-accent rounded-l-md [&>button]:bg-selected [&>button]:text-white [&>button]:hover:bg-selected [&>button]:hover:text-white",
+        range_end:
+          "day-range-end !bg-accent rounded-r-md [&>button]:bg-selected [&>button]:text-white [&>button]:hover:bg-selected [&>button]:hover:text-white",
+        selected: cn(
+          props.mode === "range"
+            ? " [&>button]:hover:bg-selected [&>button]:hover:text-white focus:bg-selected focus:text-white  [&>button]:aria-selected:text-primary"
+            : " [&>button]:bg-selected [&>button]:text-white  [&>button]:hover:bg-selected  [&>button]:hover:text-white focus:bg-selected focus:text-white rounded-md",
+        ),
+        today: "bg-muted text-muted-foreground !rounded-md",
+        outside:
+          "day-outside text-muted-foreground opacity-50 !aria-selected:bg-accent/50 !aria-selected:text-muted-foreground !aria-selected:opacity-30",
+        disabled: "text-muted-foreground opacity-50",
+        range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        hidden: "invisible",
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
-        IconRight: () => <ChevronRight className="h-4 w-4" />,
+        Chevron: ({ ...props }) =>
+          props.orientation === "left" ? (
+            <ChevronLeft {...props} className="h-4 w-4" />
+          ) : (
+            <ChevronRight {...props} className="h-4 w-4" />
+          ),
       }}
       {...props}
     />