DatePicker fix highlight in range (#3633)

jpmorganchase · Jun 26, 2024 · 07219e5 · 07219e5
1 parent dde7f26
commit 07219e5
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.cy.tsx b/packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.cy.tsx
@@ -5,6 +5,7 @@ import {
   CalendarDate,
   DateFormatter,
   DateValue,
+  endOfMonth,
   getLocalTimeZone,
   startOfMonth,
   today,
@@ -257,7 +258,21 @@ describe("GIVEN a DatePicker", () => {
       cy.findByRole("button", { name: "Open Calendar" }).realClick();
       cy.findAllByRole("application").should("have.length", 1);
     });
-
+    it("should show hover all the first month when hovering through the second one ", () => {
+      cy.mount(<Range />);
+      cy.findByRole("button", { name: "Open Calendar" }).realClick();
+      cy.findByRole("button", {
+        name: formatDay(startOfMonth(today(localTimeZone)).add({ days: 15 })),
+      }).realClick();
+      cy.findByRole("button", {
+        name: formatDay(
+          startOfMonth(today(localTimeZone)).add({ days: 15, months: 1 })
+        ),
+      }).realHover();
+      cy.findByRole("button", {
+        name: formatDay(endOfMonth(today(localTimeZone))),
+      }).should("have.class", "saltCalendarDay-hovered");
+    });
     it("should disable the first calendar's next month button and the second calendar's previous month button when a start date has been selected", () => {
       cy.mount(<Range />);
       cy.findByRole("button", { name: "Open Calendar" }).realClick();

diff --git a/packages/lab/src/date-picker/DatePickerPanel.tsx b/packages/lab/src/date-picker/DatePickerPanel.tsx
@@ -32,11 +32,6 @@ import {
 } from "../calendar";
 import { DateValue, endOfMonth, startOfMonth } from "@internationalized/date";
 
-function clampDate(date: DateValue | null, max: DateValue | null) {
-  if (!date || !max) return undefined;
-  return date.compare(max) === 0 ? max : date;
-}
-
 export interface DatePickerPanelProps<SelectionVariantType>
   extends ComponentPropsWithoutRef<"div"> {
   onSelect?: (
@@ -58,6 +53,19 @@ export interface DatePickerPanelProps<SelectionVariantType>
 
 const withBaseName = makePrefixer("saltDatePickerPanel");
 
+function getHoveredDate(
+  date?: DateValue | null,
+  compact?: boolean,
+  hoveredDate?: DateValue | null
+) {
+  return date &&
+    !compact &&
+    hoveredDate &&
+    hoveredDate.compare(endOfMonth(date)) > 0
+    ? endOfMonth(date)
+    : hoveredDate;
+}
+
 export const DatePickerPanel = forwardRef<
   HTMLDivElement,
   DatePickerPanelProps<SingleSelectionValueType | RangeSelectionValueType>
@@ -137,11 +145,11 @@ export const DatePickerPanel = forwardRef<
   const firstCalendarProps: CalendarProps = isRangePicker
     ? {
         selectionVariant: "range",
-        // This clamps the hovered date to the end of the visible month, otherwise the hovered date is mirrored across calendars.
-        hoveredDate:
-          selectedDate?.startDate && !compact
-            ? clampDate(hoveredDate, endOfMonth(selectedDate?.startDate))
-            : hoveredDate,
+        hoveredDate: getHoveredDate(
+          selectedDate?.startDate,
+          compact,
+          hoveredDate
+        ),
         onHoveredDateChange: handleHoveredDateChange,
         selectedDate: selectedDate,
         onSelectedDateChange: setRangeDate,