dash: update react-day-picker to v9 (#42078)

GitOrigin-RevId: 1b8c7bccdeebd91b65bfbbdf9a3e04c29d3f56db

Author: Nicolapps

npm-packages/common/config/rush/pnpm-lock.yaml

@@ -41,7 +41,7 @@
     "monaco-editor": "0.40.0",
     "object-sizeof": "~2.6.3",
     "prettier-old-sync": "npm:[email protected]",
-    "react-day-picker": "~8.10.1",
+    "react-day-picker": "~9.11.1",
     "react-dnd": "~16.0.1",
     "react-dnd-scrolling": "~1.3.3",
     "react-dnd-html5-backend": "~16.0.1",

npm-packages/dashboard-common/package.json

@@ -18,12 +18,18 @@ export const Range: Story = {
   },
 };
 
+const rangeStart = new Date(Date.now() - 3 * 24 * 60 * 60 * 1000); // 3 days ago
+const rangeEnd = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000); // 3 days from now
 export const RestrictedRange: Story = {
   args: {
     mode: "single",
     selected: new Date(Date.now() - 24 * 60 * 60 * 1000), // Yesterday
-    fromDate: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
-    toDate: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000), // 3 days from now
+    startMonth: rangeStart,
+    endMonth: rangeEnd,
+    disabled: {
+      before: rangeStart,
+      after: rangeEnd,
+    },
   },
 };
 

npm-packages/dashboard-common/src/elements/Calendar.stories.tsx

@@ -1,56 +1,78 @@
 "use client";
 
 import * as React from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
-import { DayPicker } from "react-day-picker";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+} from "@radix-ui/react-icons";
+import { ChevronProps, ClassNames, DayPicker } from "react-day-picker";
 
 import { cn } from "@ui/cn";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
-function Calendar({ ...props }: CalendarProps) {
+export function Calendar({ ...props }: CalendarProps) {
   return (
     <DayPicker
-      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(
-          "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: "rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-fit mt-2 first:ml-auto",
-        cell: cn(
-          "p-0 text-center text-sm focus-within:relative focus-within:z-20",
-        ),
-        day: cn(
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100",
-          "hover:rounded hover:bg-background-primary",
-        ),
-        day_selected: "bg-background-tertiary border-y",
-        day_range_start: "rounded-l bg-background-tertiary border",
-        day_range_end: "rounded-r bg-background-tertiary border",
-        day_range_middle:
-          "bg-background-tertiary/30 border-y hover:text-primary-foreground focus:bg-primary",
-        day_today: "font-semibold",
-        day_outside: "day-outside opacity-30 aria-selected:opacity-50",
-        day_disabled: "opacity-60 cursor-not-allowed hover:bg-transparent",
-        day_hidden: "invisible",
-      }}
+      classNames={
+        {
+          root: "[--calendar-header-height:--spacing(7)] relative",
+          months: "flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0",
+          month: "flex flex-col gap-y-3",
+          month_caption:
+            "flex justify-center items-center min-h-(--calendar-header-height)",
+          caption_label: "text-sm font-medium",
+          nav: "absolute inset-x-0 top-0 flex items-center min-h-(--calendar-header-height) justify-between px-1 pointer-events-none",
+          button_previous: cn(
+            "pointer-events-auto flex size-(--calendar-header-height) items-center justify-center bg-transparent p-0 opacity-50 hover:opacity-100 aria-disabled:cursor-not-allowed aria-disabled:hover:opacity-50",
+          ),
+          button_next: cn(
+            "pointer-events-auto flex size-(--calendar-header-height) items-center justify-center bg-transparent p-0 opacity-50 hover:opacity-100 aria-disabled:cursor-not-allowed aria-disabled:hover:opacity-50",
+          ),
+          month_grid: "w-full border-collapse space-y-1",
+          weekdays: "flex",
+          weekday: "rounded-md w-8 font-normal text-[0.8rem]",
+          week: "flex w-fit mt-2 first:ml-auto",
+          day: cn(
+            "size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20",
+          ),
+          day_button: cn(
+            "size-full p-0 aria-selected:opacity-100",
+            "hover:rounded hover:bg-background-primary",
+          ),
+          selected: "bg-background-tertiary border-y",
+          range_start: "rounded-l bg-background-tertiary border",
+          range_end: "rounded-r bg-background-tertiary border",
+          range_middle:
+            "bg-background-tertiary/30 border-y hover:text-primary-foreground focus:bg-primary",
+          today: "font-semibold",
+          outside: "day-outside opacity-30 aria-selected:opacity-50",
+          disabled:
+            "opacity-60 [&>button]:cursor-not-allowed [&>button]:hover:bg-transparent",
+          hidden: "invisible",
+        } satisfies Partial<ClassNames>
+      }
       components={{
-        IconLeft: () => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: () => <ChevronRightIcon className="h-4 w-4" />,
+        Chevron: function CustomChevron({ orientation }: ChevronProps) {
+          if (orientation === "left") {
+            return <ChevronLeftIcon className="size-4" />;
+          }
+          if (orientation === "right") {
+            return <ChevronRightIcon className="size-4" />;
+          }
+          if (orientation === "up") {
+            return <ChevronUpIcon className="size-4" />;
+          }
+          if (orientation === "down") {
+            return <ChevronDownIcon className="size-4" />;
+          }
+          orientation satisfies undefined;
+          return <span />;
+        },
       }}
       {...props}
     />
   );
 }
-Calendar.displayName = "Calendar";
-
-export { Calendar };

npm-packages/dashboard-common/src/elements/Calendar.tsx

@@ -2,19 +2,25 @@ import { Meta, StoryObj } from "@storybook/nextjs";
 import { DateRangePicker } from "@common/elements/DateRangePicker";
 import { fn } from "storybook/test";
 
-export const Primary: Story = {
+const meta = {
+  component: DateRangePicker,
   args: {
     date: {
       from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
       to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
     },
     setDate: fn(),
   },
-};
-
-const meta = { component: DateRangePicker } satisfies Meta<
-  typeof DateRangePicker
->;
+} satisfies Meta<typeof DateRangePicker>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+export const RestrictedRange: Story = {
+  args: {
+    minDate: new Date(Date.now() - 4 * 7 * 24 * 60 * 60 * 1000),
+    maxDate: new Date(Date.now() + 4 * 7 * 24 * 60 * 60 * 1000),
+  },
+};

npm-packages/dashboard-common/src/elements/DateRangePicker.stories.tsx

@@ -8,6 +8,7 @@ import { DateRange } from "react-day-picker";
 import { Popover } from "@ui/Popover";
 import { Button } from "@ui/Button";
 import { Calendar } from "@common/elements/Calendar";
+import { disabledFromRange } from "@common/features/data/components/FilterEditor/DateTimePicker";
 
 export type DateRangeShortcut = {
   value: string;
@@ -150,10 +151,11 @@ export function DateRangePicker({
             </div>
           )}
           <Calendar
-            initialFocus
+            autoFocus
             mode="range"
-            fromDate={minDate}
-            toDate={maxDate}
+            startMonth={minDate}
+            endMonth={maxDate}
+            disabled={disabledFromRange({ minDate, maxDate })}
             defaultMonth={from || new Date()}
             selected={selectedRange}
             onSelect={(d) => {

npm-packages/dashboard-common/src/elements/DateRangePicker.tsx

@@ -2,16 +2,23 @@ import { Meta, StoryObj } from "@storybook/nextjs";
 import { DateTimePicker } from "@common/features/data/components/FilterEditor/DateTimePicker";
 import { fn } from "storybook/test";
 
-export const Primary: Story = {
+const meta = {
+  component: DateTimePicker,
   args: {
-    date: new Date(),
     onChange: fn(),
+    date: new Date(),
   },
-};
-
-const meta = { component: DateTimePicker } satisfies Meta<
-  typeof DateTimePicker
->;
+} satisfies Meta<typeof DateTimePicker>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+export const RestrictedRange: Story = {
+  args: {
+    minDate: new Date(Date.now() - 4 * 7 * 24 * 60 * 60 * 1000),
+    maxDate: new Date(Date.now() + 4 * 7 * 24 * 60 * 60 * 1000),
+    onChange: fn(),
+  },
+};

npm-packages/dashboard-common/src/features/data/components/FilterEditor/DateTimePicker.stories.tsx

@@ -88,8 +88,9 @@ describe("DateTimePicker", () => {
     expect(screen.getByRole("dialog")).not.toHaveClass("hidden");
 
     // Find a different date button in the calendar (e.g., day 20)
-    // The calendar should have buttons for each day of the month
-    const dayButton = screen.getByRole("gridcell", { name: "20" });
+    const dayButton = screen.getByRole("button", {
+      name: "Saturday, January 20th, 2024",
+    });
 
     // Click on the date button
     await user.click(dayButton);

npm-packages/dashboard-common/src/features/data/components/FilterEditor/DateTimePicker.test.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { usePopper } from "react-popper";
 import { Calendar } from "@common/elements/Calendar";
 import { TextInput } from "@ui/TextInput";
+import { Matcher } from "react-day-picker";
 
 const dateTimeFormat = "M/d/yyyy, h:mm:ss aa";
 
@@ -117,6 +118,13 @@ export function DateTimePicker({
 
   const handleTextInputBlur = () => {
     const parsedDate = parse(inputValue, dateTimeFormat, new Date());
+
+    // Don’t fire event if there was no change.
+    const timeAtSecondPrecision = (d: Date) => Math.floor(d.getTime() / 1000);
+    if (timeAtSecondPrecision(parsedDate) === timeAtSecondPrecision(dateTime)) {
+      return;
+    }
+
     if (!Number.isNaN(parsedDate.getTime())) {
       setDateTime(parsedDate);
       onChange(parsedDate);
@@ -256,8 +264,9 @@ export function DateTimePicker({
             // Necessary so the calendar updates when changing the date via the text input.
             month={visibleMonth}
             onMonthChange={(newDate) => setVisibleMonth(newDate)}
-            fromDate={minDate}
-            toDate={maxDate}
+            startMonth={minDate}
+            endMonth={maxDate}
+            disabled={disabledFromRange({ minDate, maxDate })}
           />
           <input
             type="time"
@@ -272,3 +281,23 @@ export function DateTimePicker({
     </div>
   );
 }
+
+// This is necessary to make the type checker happy
+export function disabledFromRange({
+  minDate,
+  maxDate,
+}: {
+  minDate: Date | undefined;
+  maxDate: Date | undefined;
+}): Matcher | undefined {
+  if (minDate && maxDate) {
+    return { before: minDate, after: maxDate };
+  }
+  if (minDate) {
+    return { before: minDate };
+  }
+  if (maxDate) {
+    return { after: maxDate };
+  }
+  return undefined;
+}

npm-packages/dashboard-common/src/features/data/components/FilterEditor/DateTimePicker.tsx

@@ -45,7 +45,7 @@
     "next": "^14.2.33",
     "nprogress": "~0.2.0",
     "react": "^18.0.0",
-    "react-day-picker": "~8.10.1",
+    "react-day-picker": "~9.11.1",
     "react-dom": "^18.0.0",
     "react-popper": "^2.3.0",
     "react-use": "~17.6.0",
@@ -79,7 +79,6 @@
     "@types/node": "^18.17.0",
     "@types/nprogress": "~0.2.0",
     "@types/react": "^18.0.0",
-    "@types/react-day-picker": "~5.3.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-table": "^7.7.2",
     "@types/react-window": "^1.8.5",