fix: remove selectionStates from useGetModifiers()

examples/__snapshots__/Range.test.tsx.snap

@@ -338,7 +338,7 @@ exports[`should match the snapshot 1`] = `
                 </td>
                 <td
                   aria-selected="true"
-                  class="rdp-day rdp-range_start rdp-selected"
+                  class="rdp-day rdp-selected rdp-range_start"
                   data-day="2020-06-15"
                   data-selected="true"
                 >
@@ -353,7 +353,7 @@ exports[`should match the snapshot 1`] = `
                 </td>
                 <td
                   aria-selected="true"
-                  class="rdp-day rdp-range_middle rdp-selected"
+                  class="rdp-day rdp-selected rdp-range_middle"
                   data-day="2020-06-16"
                   data-selected="true"
                 >
@@ -368,7 +368,7 @@ exports[`should match the snapshot 1`] = `
                 </td>
                 <td
                   aria-selected="true"
-                  class="rdp-day rdp-range_middle rdp-selected"
+                  class="rdp-day rdp-selected rdp-range_middle"
                   data-day="2020-06-17"
                   data-selected="true"
                 >
@@ -383,7 +383,7 @@ exports[`should match the snapshot 1`] = `
                 </td>
                 <td
                   aria-selected="true"
-                  class="rdp-day rdp-range_middle rdp-selected"
+                  class="rdp-day rdp-selected rdp-range_middle"
                   data-day="2020-06-18"
                   data-selected="true"
                 >
@@ -398,7 +398,7 @@ exports[`should match the snapshot 1`] = `
                 </td>
                 <td
                   aria-selected="true"
-                  class="rdp-day rdp-range_end rdp-selected"
+                  class="rdp-day rdp-selected rdp-range_end"
                   data-day="2020-06-19"
                   data-selected="true"
                 >

src/useGetModifiers.test.tsx

@@ -0,0 +1,79 @@
+import { DayFlag } from "./UI";
+import { CalendarDay, defaultDateLib } from "./classes/index";
+import { useGetModifiers } from "./useGetModifiers";
+
+const dateLib = defaultDateLib;
+
+const month1 = new Date(2022, 10, 1);
+const month2 = new Date(2022, 11, 1);
+
+const date1 = new Date(2022, 10, 10);
+const date2 = new Date(2022, 10, 11);
+const date3 = new Date(2022, 10, 12);
+const date4 = new Date(2022, 10, 13);
+const date5 = new Date(2022, 10, 14);
+const date6 = new Date(2022, 10, 30);
+
+const day1 = new CalendarDay(date1, month1);
+const day2 = new CalendarDay(date2, month1);
+const day3 = new CalendarDay(date3, month1);
+const day4 = new CalendarDay(date4, month1);
+const day5 = new CalendarDay(date5, month1);
+const day6 = new CalendarDay(date6, month2);
+
+const days: CalendarDay[] = [day1, day2, day3, day4, day5, day6];
+
+const props = {
+  disabled: [date1],
+  hidden: [date2],
+  modifiers: {
+    custom: [date3],
+    selected: [date5]
+  },
+  selected: date6,
+  showOutsideDays: true,
+  today: date4,
+  timeZone: "UTC"
+};
+
+describe("useGetModifiers", () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const getModifiers = useGetModifiers(days, props, dateLib);
+
+  test("return the modifiers for a given day", () => {
+    const modifiers = getModifiers(day1);
+
+    expect(modifiers[DayFlag.focused]).toBe(false);
+    expect(modifiers[DayFlag.disabled]).toBe(true);
+    expect(modifiers[DayFlag.hidden]).toBe(false);
+    expect(modifiers[DayFlag.outside]).toBe(false);
+    expect(modifiers[DayFlag.today]).toBe(false);
+    expect(modifiers.custom).toBe(false);
+  });
+
+  test("return the custom modifiers for a given day", () => {
+    const modifiers = getModifiers(day3);
+    expect(modifiers.custom).toBe(true);
+  });
+
+  test("return the custom `selected` modifier for a given day", () => {
+    const modifiers = getModifiers(day5);
+    expect(modifiers.selected).toBe(true);
+  });
+
+  test("return the today modifier for a given day", () => {
+    const modifiers = getModifiers(day4);
+    expect(modifiers[DayFlag.today]).toBe(true);
+  });
+
+  test("return the hidden modifier for a given day", () => {
+    const modifiers = getModifiers(day2);
+    expect(modifiers[DayFlag.hidden]).toBe(true);
+  });
+
+  test("return the outside modifier for a given day", () => {
+    const modifiers = getModifiers(day6);
+
+    expect(modifiers[DayFlag.outside]).toBe(true);
+  });
+});

src/useGetModifiers.tsx

@@ -1,13 +1,15 @@
 import { TZDate } from "@date-fns/tz";
 
-import { DayFlag, SelectionState } from "./UI.js";
+import { DayFlag } from "./UI.js";
 import type { CalendarDay, DateLib } from "./classes/index.js";
 import type { DayPickerProps, Modifiers } from "./types/index.js";
 import { dateMatchModifiers } from "./utils/dateMatchModifiers.js";
 
 /**
  * Return a function to get the modifiers for a given day.
  *
+ * NOTE: this is not an hook, but a factory for `getModifiers`.
+ *
  * @private
  */
 export function useGetModifiers(
@@ -29,13 +31,6 @@ export function useGetModifiers(
 
   const customModifiersMap: Record<string, CalendarDay[]> = {};
 
-  const selectionModifiersMap: Record<SelectionState, CalendarDay[]> = {
-    [SelectionState.range_end]: [],
-    [SelectionState.range_middle]: [],
-    [SelectionState.range_start]: [],
-    [SelectionState.selected]: []
-  };
-
   for (const day of days) {
     const { date, displayMonth } = day;
 
@@ -81,7 +76,7 @@ export function useGetModifiers(
     }
   }
 
-  return (day: CalendarDay) => {
+  return (day: CalendarDay): Modifiers => {
     // Initialize all the modifiers to false
     const dayFlags: Record<DayFlag, boolean> = {
       [DayFlag.focused]: false,
@@ -90,32 +85,21 @@ export function useGetModifiers(
       [DayFlag.outside]: false,
       [DayFlag.today]: false
     };
-    const selectionStates: Record<SelectionState, boolean> = {
-      [SelectionState.range_end]: false,
-      [SelectionState.range_middle]: false,
-      [SelectionState.range_start]: false,
-      [SelectionState.selected]: false
-    };
     const customModifiers: Modifiers = {};
 
     // Find the modifiers for the given day
     for (const name in internalModifiersMap) {
       const days = internalModifiersMap[name as DayFlag];
       dayFlags[name as DayFlag] = days.some((d) => d === day);
     }
-    for (const name in selectionModifiersMap) {
-      const days = selectionModifiersMap[name as SelectionState];
-      selectionStates[name as SelectionState] = days.some((d) => d === day);
-    }
     for (const name in customModifiersMap) {
       customModifiers[name] = customModifiersMap[name].some((d) => d === day);
     }
 
     return {
-      ...selectionStates,
       ...dayFlags,
       // custom modifiers should override all the previous ones
       ...customModifiers
-    } as Modifiers;
+    };
   };
 }