build: fix CSS module support, added missing class names (#2168)

package.json

@@ -44,16 +44,16 @@
       "types": "./src/style.css.d.ts"
     },
     "./style.module.css": {
-      "require": "./src/style.css",
-      "import": "./src/style.css",
-      "default": "./src/style.css",
-      "types": "./src/style.css.d.ts"
+      "require": "./src/style.module.css",
+      "import": "./src/style.module.css",
+      "default": "./src/style.module.css",
+      "types": "./src/style.module.css.d.ts"
     },
     "./dist/style.module.css": {
-      "require": "./src/style.css",
-      "import": "./src/style.css",
-      "default": "./src/style.css",
-      "types": "./src/style.css.d.ts"
+      "require": "./src/style.module.css",
+      "import": "./src/style.module.css",
+      "default": "./src/style.module.css",
+      "types": "./src/style.module.css.d.ts"
     },
     "./package.json": {
       "require": "./package.json",
@@ -66,6 +66,7 @@
     "build": "pnpm build:cjs && pnpm build:esm",
     "build:cjs": "tsc --project tsconfig-cjs.json",
     "build:esm": "tsc --project tsconfig-esm.json",
+    "build:css": "tcm src",
     "lint": "eslint .",
     "test": "jest",
     "test-watch": "jest --watch",
@@ -111,7 +112,8 @@
     "ts-jest": "^29.1.3",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
-    "typescript": "~5.4.5"
+    "typescript": "~5.4.5",
+    "typescript-css-modules": "^1.0.4"
   },
   "peerDependencies": {
     "date-fns": "^2.28.0 || ^3.0.0",

src/UI.ts

@@ -1,3 +1,8 @@
+/**
+ * The UI elements composing DayPicker.
+ *
+ * These elements are mapped to the components directory.
+ */
 /**
  * The UI elements composing DayPicker.
  *
@@ -10,12 +15,12 @@ export enum UI {
   ButtonNext = "button_next",
   /** The calendar element, the root of the component. */
   Calendar = "calendar",
+  /** The Chevron SVG element used by navigation buttons and dropdowns. */
+  Chevron = "chevron",
   /** The gridcell with the day's date. */
   Day = "day",
   /** The label of a caption. */
   CaptionLabel = "caption_label",
-  /** The Chevron SVG element used by navigation buttons and dropdowns. */
-  Chevron = "chevron",
   /** The container of the dropdown navigation.. */
   DropdownNav = "dropdown_nav",
   /** The dropdown used for years and months. */
@@ -24,22 +29,22 @@ export enum UI {
   DropdownRoot = "dropdown_root",
   /** The root element of the {@link Footer} component. */
   Footer = "footer",
+  /** The month grid. */
+  Month = "month",
   /** The caption of a month. */
   MonthCaption = "month_caption",
   /** The dropdown of months. */
   MonthsDropdown = "months_dropdown",
   /** Wrapper of the month grid. */
   MonthWrapper = "month_wrapper",
-  /** The month grid. */
-  Month = "month",
-  /** The group of weeks in a month. */
-  Weeks = "weeks",
   /** Container containing the months. */
   Months = "months",
   /** The navigation element. */
   Nav = "nav",
   /** The row in a week. */
   Week = "week",
+  /** The group of weeks in a month. */
+  Weeks = "weeks",
   /** The column's header with the weekday. */
   Weekday = "weekday",
   /** The row grouping the weekdays. */
@@ -77,9 +82,9 @@ export enum DayModifier {
 /** Flags that can be applied to the {@link UI.Calendar} element. */
 export enum CalendarFlag {
   /** Assigned when the week numbers are show. */
-  hasWeekNumbers = "week_numbers",
+  hasWeekNumbers = "has_week_numbers",
   /** Assigned when the weekdays are hidden. */
   noWeekdays = "no_weekdays",
   /** Assigned when the calendar has multiple months. */
-  hasMultipleMonths = "multiple_months"
+  hasMultipleMonths = "has_multiple_months"
 }

src/components/Calendar.test.tsx

@@ -21,8 +21,8 @@ it("should apply classnames and style according to props", () => {
   });
 
   expect(container.firstChild).toHaveClass("rdp-calendar");
-  expect(container.firstChild).toHaveClass("rdp-multiple_months");
-  expect(container.firstChild).toHaveClass("rdp-week_numbers");
+  expect(container.firstChild).toHaveClass("rdp-has_multiple_months");
+  expect(container.firstChild).toHaveClass("rdp-has_week_numbers");
   expect(container.firstChild).toHaveClass("custom-class");
   expect(container.firstChild).toHaveStyle({ color: "red" });
 });

src/helpers/getDefaultClassNames.test.ts

@@ -15,8 +15,8 @@ test("should return the default classnames", () => {
     focusable: "rdp-focusable",
     focused: "rdp-focused",
     footer: "rdp-footer",
-    multiple_months: "rdp-multiple_months",
-    week_numbers: "rdp-week_numbers",
+    has_multiple_months: "rdp-has_multiple_months",
+    has_week_numbers: "rdp-has_week_numbers",
     hidden: "rdp-hidden",
     month_caption: "rdp-month_caption",
     month_wrapper: "rdp-month_wrapper",

src/helpers/useControlledValue.test.ts

@@ -1,5 +1,4 @@
-import { renderHook } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
+import { act, renderHook } from "@testing-library/react";
 
 import { useControlledValue } from "./useControlledValue";