fix: range_middle class is added to days not in the selected range (#…

…1581)

packages/react-day-picker/src/contexts/Modifiers/utils/isDateInRange.test.ts

@@ -1,3 +1,4 @@
+import { addDays } from 'date-fns';
 import { DateRange } from 'index';
 
 import { isDateInRange } from './isDateInRange';
@@ -13,16 +14,32 @@ describe('when range is missing the "from" date', () => {
 });
 
 describe('when range is missing the "to" date', () => {
-  const to = undefined;
-  describe('when the from date is the same as date', () => {
-    const range: DateRange = { from: date, to };
-    const result = isDateInRange(date, range);
-    test('should return true', () => {
-      expect(result).toBe(true);
-    });
+  const result = isDateInRange(date, { from: date, to: undefined });
+  test('should return true', () => {
+    expect(result).toBe(true);
   });
-  const result = isDateInRange(date, { from: undefined });
+});
+
+describe('when the range dates are the same as date', () => {
+  const range: DateRange = { from: date, to: date };
+  const result = isDateInRange(date, range);
+  test('should return true', () => {
+    expect(result).toBe(true);
+  });
+});
+
+describe('when the range dates are the same but not as date', () => {
+  const range: DateRange = { from: date, to: date };
+  const result = isDateInRange(addDays(date, 1), range);
   test('should return false', () => {
     expect(result).toBe(false);
   });
 });
+
+describe('when the range is inverted', () => {
+  const range: DateRange = { from: addDays(date, 1), to: date };
+  const result = isDateInRange(date, range);
+  test('should return true', () => {
+    expect(result).toBe(true);
+  });
+});

packages/react-day-picker/src/contexts/Modifiers/utils/isDateInRange.ts

@@ -15,13 +15,12 @@ export function isDateInRange(date: Date, range: DateRange): boolean {
   if (!to) {
     return false;
   }
-  const isToBeforeFrom = differenceInCalendarDays(to, from) < 0;
-  if (to && isToBeforeFrom) {
+  const isRangeInverted = differenceInCalendarDays(to, from) < 0;
+  if (isRangeInverted) {
     [from, to] = [to, from];
   }
-
-  return (
+  const isInRange =
     differenceInCalendarDays(date, from) >= 0 &&
-    differenceInCalendarDays(to, date) >= 0
-  );
+    differenceInCalendarDays(to, date) >= 0;
+  return isInRange;
 }

packages/react-day-picker/src/contexts/SelectRange/SelectRangeContext.test.ts

@@ -67,7 +67,7 @@ describe('when no days are selected', () => {
         stubEvent
       );
     });
-    test('should call "onSelect" with the clicked day as the "from" propx', () => {
+    test('should call "onSelect" with the clicked day as the "from" prop', () => {
       expect(initialProps.onSelect).toHaveBeenCalledWith(
         { from: day, to: undefined },
         day,
@@ -146,6 +146,27 @@ describe('when a complete range of days is selected', () => {
   });
 });
 
+describe('when "from" and "to" are the same', () => {
+  const date = new Date();
+  const selected = { from: date, to: date };
+  const dayPickerProps: DayPickerRangeProps = {
+    ...initialProps,
+    selected
+  };
+  beforeAll(() => {
+    setup(dayPickerProps);
+  });
+  test('should return the "range_start" modifier with the date', () => {
+    expect(result.current.modifiers.range_start).toEqual([date]);
+  });
+  test('should return the "range_end" modifier with the date', () => {
+    expect(result.current.modifiers.range_end).toEqual([date]);
+  });
+  test('should return an empty "range_middle"', () => {
+    expect(result.current.modifiers.range_middle).toEqual([]);
+  });
+});
+
 describe('when the max number of the selected days is reached', () => {
   const from = today;
   const to = addDays(today, 6);

packages/react-day-picker/src/contexts/SelectRange/SelectRangeContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, ReactNode, useContext } from 'react';
 
+import { isSameDay } from 'date-fns';
 import addDays from 'date-fns/addDays';
 import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
 import subDays from 'date-fns/subDays';
@@ -107,12 +108,14 @@ export function SelectRangeProviderInternal({
       modifiers.range_end = [selectedFrom];
     } else {
       modifiers.range_end = [selectedTo];
-      modifiers.range_middle = [
-        {
-          after: selectedFrom,
-          before: selectedTo
-        }
-      ];
+      if (!isSameDay(selectedFrom, selectedTo)) {
+        modifiers.range_middle = [
+          {
+            after: selectedFrom,
+            before: selectedTo
+          }
+        ];
+      }
     }
   }