(chore) Rename getClassNamesForModifiers → getDayCellClassNames, add …

…tests

src/DayPicker.tsx

@@ -4,9 +4,9 @@ import type { MouseEvent, FocusEvent, KeyboardEvent, ChangeEvent } from "react";
 import { UI, DayFlag, SelectionState } from "./UI.js";
 import type { CalendarDay } from "./classes/CalendarDay.js";
 import { DateLib, defaultLocale } from "./classes/DateLib.js";
-import { getClassNamesForModifiers } from "./helpers/getClassNamesForModifiers.js";
 import { getComponents } from "./helpers/getComponents.js";
 import { getDataAttributes } from "./helpers/getDataAttributes.js";
+import { getDayCellClassNames } from "./helpers/getDayCellClassNames.js";
 import { getDefaultClassNames } from "./helpers/getDefaultClassNames.js";
 import { getFormatters } from "./helpers/getFormatters.js";
 import { getMonthOptions } from "./helpers/getMonthOptions.js";
@@ -486,13 +486,13 @@ export function DayPicker(props: DayPickerProps) {
                                 );
                             }
 
-                            const style = getStyleForModifiers(
+                            const cellStyle = getStyleForModifiers(
                               modifiers,
                               styles,
                               props.modifiersStyles
                             );
 
-                            const className = getClassNamesForModifiers(
+                            const cellClassNames = getDayCellClassNames(
                               modifiers,
                               classNames,
                               props.modifiersClassNames
@@ -513,8 +513,8 @@ export function DayPicker(props: DayPickerProps) {
                                 key={`${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`}
                                 day={day}
                                 modifiers={modifiers}
-                                className={className.join(" ")}
-                                style={style}
+                                className={cellClassNames.join(" ")}
+                                style={cellStyle}
                                 role="gridcell"
                                 aria-selected={modifiers.selected || undefined}
                                 aria-label={ariaLabel}

src/helpers/getDayCellClassNames.test.ts

@@ -0,0 +1,64 @@
+import { DayFlag, SelectionState } from "../UI.js";
+import type { ModifiersClassNames, ClassNames } from "../types/index.js";
+
+import { getDayCellClassNames } from "./getDayCellClassNames.js";
+import { getDefaultClassNames } from "./getDefaultClassNames.js";
+
+describe("getDayCellClassNames", () => {
+  const baseClass = "day";
+  const classNames: ClassNames = {
+    ...getDefaultClassNames(),
+    [DayFlag.disabled]: "disabled",
+    [SelectionState.selected]: "selected-style"
+  };
+  const modifiersClassNames: ModifiersClassNames = {
+    today: "today-class",
+    weekend: "weekend-class"
+  };
+
+  it("should return base class when no modifiers are active", () => {
+    const modifiers = { today: false, weekend: false };
+    const result = getDayCellClassNames(
+      modifiers,
+      classNames,
+      modifiersClassNames
+    );
+    expect(result).toEqual([baseClass]);
+  });
+
+  it("should return class names for active modifiers", () => {
+    const modifiers = { today: true, weekend: false };
+    const result = getDayCellClassNames(
+      modifiers,
+      classNames,
+      modifiersClassNames
+    );
+    expect(result).toEqual([baseClass, "today-class"]);
+  });
+
+  it("should return class names for active day flags", () => {
+    const modifiers = { selected: true };
+    const result = getDayCellClassNames(
+      modifiers,
+      classNames,
+      modifiersClassNames
+    );
+    expect(result).toEqual([baseClass, "selected-style"]);
+  });
+
+  it("should return class names for active selection states", () => {
+    const modifiers = { selected: true };
+    const result = getDayCellClassNames(modifiers, classNames);
+    expect(result).toEqual([baseClass, "selected-style"]);
+  });
+
+  it("should prioritize modifiersClassNames over classNames", () => {
+    const modifiers = { today: true, selected: true };
+    const result = getDayCellClassNames(
+      modifiers,
+      classNames,
+      modifiersClassNames
+    );
+    expect(result).toEqual([baseClass, "today-class", "selected-style"]);
+  });
+});

src/helpers/getDayCellClassNames.ts

@@ -0,0 +1,27 @@
+import { DayFlag, SelectionState, UI } from "../UI.js";
+import type { ModifiersClassNames, ClassNames } from "../types/index.js";
+
+export function getDayCellClassNames(
+  modifiers: Record<string, boolean>,
+  classNames: ClassNames,
+  modifiersClassNames: ModifiersClassNames = {}
+) {
+  const result = Object.entries(modifiers)
+    .filter(([, active]) => active === true)
+    .reduce(
+      (val, [modifier]) => {
+        val.push(`${classNames[UI.Day]}-${modifier}`);
+        if (modifiersClassNames[modifier]) {
+          val.push(modifiersClassNames[modifier as string]);
+        } else if (classNames[DayFlag[modifier as DayFlag]]) {
+          val.push(classNames[DayFlag[modifier as DayFlag]]);
+        } else if (classNames[SelectionState[modifier as SelectionState]]) {
+          val.push(classNames[SelectionState[modifier as SelectionState]]);
+        }
+        return val;
+      },
+      [classNames[UI.Day]] as string[]
+    );
+
+  return result;
+}