fix(build): add type module in package.json (#2230)

.eslintrc.cjs

@@ -30,6 +30,7 @@ const config = {
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
     "import/no-unresolved": "off",
+    "import/namespace": "off",
     "prettier/prettier": "warn",
     "no-console": "warn",
     "@typescript-eslint/no-unused-vars": "off",

jest.config.ts

@@ -6,7 +6,8 @@ const config: Config.InitialOptions = {
   moduleNameMapper: {
     "@/test/(.*)": ["<rootDir>/test/$1"],
     "react-day-picker": ["<rootDir>/src/index.ts"],
-    "react-day-picker/(.*)": ["<rootDir>/src/$1"]
+    "react-day-picker/(.*)": ["<rootDir>/src/$1.js"],
+    "^(\\.\\.?\\/.+)\\.jsx?$": "$1" // see https://github.com/kulshekhar/ts-jest/issues/1057
   },
   testEnvironment: "jsdom",
   coverageReporters: ["lcov", "text", "clover"],

package.json

@@ -16,6 +16,7 @@
   "types": "./dist/cjs/index.d.ts",
   "module": "./dist/esm/index.js",
   "style": "./src/style.css",
+  "type": "module",
   "exports": {
     ".": {
       "require": {

src/DayPicker.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { Calendar } from "./components/Calendar";
-import { ContextProviders } from "./contexts/providers";
-import type { DayPickerProps } from "./types";
+import { Calendar } from "./components/Calendar.js";
+import { ContextProviders } from "./contexts/providers.js";
+import type { DayPickerProps } from "./types/index.js";
 
 /**
  * Render the date picker calendar.

src/UI.ts

@@ -1,4 +1,4 @@
-import type { CustomComponents, ClassNames, Styles } from "./types";
+import type { CustomComponents, ClassNames, Styles } from "./types/index.js";
 
 /**
  * The UI elements composing DayPicker. These elements are mapped to

src/classes/CalendarDay.ts

@@ -1,5 +1,5 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 
 /**
  * Represent the day displayed in the calendar.

src/classes/CalendarMonth.ts

@@ -1,4 +1,4 @@
-import { CalendarWeek } from "./CalendarWeek";
+import { CalendarWeek } from "./CalendarWeek.js";
 
 /** Represent a month in a calendar year. Contains the weeks within the month. */
 export class CalendarMonth {

src/classes/CalendarWeek.ts

@@ -1,4 +1,4 @@
-import { CalendarDay } from "./CalendarDay";
+import { CalendarDay } from "./CalendarDay.js";
 
 /** Represent a week in a calendar month. */
 export class CalendarWeek {

src/classes/index.ts

@@ -1,3 +1,3 @@
-export * from "./CalendarDay";
-export * from "./CalendarMonth";
-export * from "./CalendarWeek";
+export * from "./CalendarDay.js";
+export * from "./CalendarMonth.js";
+export * from "./CalendarWeek.js";

src/components/Calendar.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 
-import { UI, CalendarFlag } from "../UI";
-import { useCalendar, useProps } from "../contexts";
+import { UI, CalendarFlag } from "../UI.js";
+import { useCalendar, useProps } from "../contexts/index.js";
 
-import { Footer as DefaultFooter } from "./Footer";
-import { Month as DefaultMonth } from "./Month";
-import { Months as DefaultMonths } from "./Months";
-import { Nav as DefaultNav } from "./Nav";
+import { Footer as DefaultFooter } from "./Footer.js";
+import { Month as DefaultMonth } from "./Month.js";
+import { Months as DefaultMonths } from "./Months.js";
+import { Nav as DefaultNav } from "./Nav.js";
 
 /**
  * Render the DayPicker Calendar with navigation and the month grids.

src/components/Chevron.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { ChevronFlag, UI } from "../UI";
-import { useProps } from "../contexts";
+import { ChevronFlag, UI } from "../UI.js";
+import { useProps } from "../contexts/index.js";
 
 /**
  * Render the chevron icon used in the navigation buttons and dropdowns.

src/components/Day.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import type { CalendarDay } from "../classes";
-import type { Modifiers } from "../types";
+import type { CalendarDay } from "../classes/index.js";
+import type { Modifiers } from "../types/index.js";
 
 /**
  * Render the gridcell of a day in the calendar and handle the interaction and

src/components/DayDate.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import type { CalendarDay } from "../classes";
-import type { Modifiers } from "../types";
+import type { CalendarDay } from "../classes/index.js";
+import type { Modifiers } from "../types/index.js";
 
 /**
  * Render the date as string inside the day grid cell.

src/components/DayWrapper.tsx

@@ -1,15 +1,20 @@
 import React from "react";
 
-import { UI, DayFlag } from "../UI";
-import { CalendarDay } from "../classes/CalendarDay";
-import { useCalendar, useFocus, useModifiers, useProps } from "../contexts";
-import { debounce } from "../helpers/debounce";
-import { getClassNamesForModifiers } from "../helpers/getClassNamesForModifiers";
-import { getStyleForModifiers } from "../helpers/getStyleForModifiers";
-import { useMulti, useRange, useSingle } from "../selection";
+import { UI, DayFlag } from "../UI.js";
+import { CalendarDay } from "../classes/CalendarDay.js";
+import {
+  useCalendar,
+  useFocus,
+  useModifiers,
+  useProps
+} from "../contexts/index.js";
+import { debounce } from "../helpers/debounce.js";
+import { getClassNamesForModifiers } from "../helpers/getClassNamesForModifiers.js";
+import { getStyleForModifiers } from "../helpers/getStyleForModifiers.js";
+import { useMulti, useRange, useSingle } from "../selection/index.js";
 
-import { type DayProps, Day as DefaultDay } from "./Day";
-import { type DayDateProps, DayDate as DefaultDayDate } from "./DayDate";
+import { type DayProps, Day as DefaultDay } from "./Day.js";
+import { type DayDateProps, DayDate as DefaultDayDate } from "./DayDate.js";
 
 /**
  * Provides a `Day` the day state and the html attributes. Developers may use a

src/components/Dropdown.tsx

@@ -1,11 +1,11 @@
 import React, { type SelectHTMLAttributes } from "react";
 
-import { UI } from "../UI";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js";
+import { useProps } from "../contexts/index.js";
 
-import { Chevron as DefaultChevron } from "./Chevron";
-import { Option as DefaultOption } from "./Option";
-import { Select as DefaultSelect } from "./Select";
+import { Chevron as DefaultChevron } from "./Chevron.js";
+import { Option as DefaultOption } from "./Option.js";
+import { Select as DefaultSelect } from "./Select.js";
 
 /** An option to use in the dropdown. Maps to the `<option>` HTML element. */
 export type DropdownOption = {

src/components/DropdownNav.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import { UI } from "../UI";
-import type { CalendarMonth } from "../classes";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js";
+import type { CalendarMonth } from "../classes/index.js";
+import { useProps } from "../contexts/index.js";
 
-import { MonthsDropdown } from "./MonthsDropdown";
-import { YearsDropdown } from "./YearsDropdown";
+import { MonthsDropdown } from "./MonthsDropdown.js";
+import { YearsDropdown } from "./YearsDropdown.js";
 
 /**
  * Render the dropdowns to navigate between months.

src/components/Month.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 
-import { UI } from "../UI";
-import type { CalendarMonth } from "../classes/CalendarMonth";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js";
+import type { CalendarMonth } from "../classes/CalendarMonth.js";
+import { useProps } from "../contexts/index.js";
 
-import { MonthCaption as DefaultMonthCaption } from "./MonthCaption";
-import { Week as DefaultWeek } from "./Week";
-import { Weekdays as DefaultWeekdays } from "./Weekdays";
+import { MonthCaption as DefaultMonthCaption } from "./MonthCaption.js";
+import { Week as DefaultWeek } from "./Week.js";
+import { Weekdays as DefaultWeekdays } from "./Weekdays.js";
 
 /**
  * Render the grid with the weekday header row and the weeks for the given

src/components/MonthCaption.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import { UI } from "../UI";
-import type { CalendarMonth } from "../classes";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js";
+import type { CalendarMonth } from "../classes/index.js";
+import { useProps } from "../contexts/index.js";
 
-import { DropdownNav } from "./DropdownNav";
+import { DropdownNav } from "./DropdownNav.js";
 
 /**
  * Render the caption of a month in the calendar.

src/components/MonthsDropdown.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import type { ChangeEventHandler } from "react";
 
-import { UI } from "../UI";
-import type { CalendarMonth } from "../classes";
-import { useCalendar, useProps } from "../contexts";
+import { UI } from "../UI.js";
+import type { CalendarMonth } from "../classes/index.js";
+import { useCalendar, useProps } from "../contexts/index.js";
 
-import { Dropdown as DefaultDropdown } from "./Dropdown";
+import { Dropdown as DefaultDropdown } from "./Dropdown.js";
 
 /**
  * Render the dropdown to change the month.

src/components/Nav.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import { UI } from "../UI";
-import { useCalendar, useProps } from "../contexts";
+import { UI } from "../UI.js";
+import { useCalendar, useProps } from "../contexts/index.js";
 
-import { Button as DefaultButton } from "./Button";
-import { Chevron as DefaultChevron } from "./Chevron";
+import { Button as DefaultButton } from "./Button.js";
+import { Chevron as DefaultChevron } from "./Chevron.js";
 
 /**
  * Render the navigation buttons to change the month.

src/components/Week.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import { UI } from "../UI";
-import type { CalendarDay, CalendarWeek } from "../classes";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js";
+import type { CalendarDay, CalendarWeek } from "../classes/index.js";
+import { useProps } from "../contexts/index.js";
 
-import { DayWrapper } from "./DayWrapper";
-import { WeekNumber as DefaultWeekNumber } from "./WeekNumber";
+import { DayWrapper } from "./DayWrapper.js";
+import { WeekNumber as DefaultWeekNumber } from "./WeekNumber.js";
 
 /**
  * Render a row in the calendar, with the days and the week number.

src/components/WeekNumber.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { UI, WeekNumberFlag } from "../UI";
-import type { CalendarWeek } from "../classes";
-import { useProps } from "../contexts";
+import { UI, WeekNumberFlag } from "../UI.js";
+import type { CalendarWeek } from "../classes/index.js";
+import { useProps } from "../contexts/index.js";
 
 /**
  * Render the cell with the number of the week.

src/components/Weekday.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { UI } from "../UI";
-import { useProps } from "../contexts";
+import { UI } from "../UI.js";
+import { useProps } from "../contexts/index.js";
 
 /**
  * Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).

src/components/Weekdays.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import { UI } from "../UI";
-import { useProps } from "../contexts";
-import { getWeekdays } from "../helpers/getWeekdays";
+import { UI } from "../UI.js";
+import { useProps } from "../contexts/index.js";
+import { getWeekdays } from "../helpers/getWeekdays.js";
 
-import { Weekday as DefaultWeekday } from "./Weekday";
+import { Weekday as DefaultWeekday } from "./Weekday.js";
 
 /**
  * Render the row with the weekday names.

src/components/YearsDropdown.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import type { ChangeEventHandler } from "react";
 
-import { UI } from "../UI";
-import type { CalendarMonth } from "../classes/CalendarMonth";
-import { useCalendar, useProps } from "../contexts";
+import { UI } from "../UI.js";
+import type { CalendarMonth } from "../classes/CalendarMonth.js";
+import { useCalendar, useProps } from "../contexts/index.js";
 
-import { Dropdown as DefaultDropdown } from "./Dropdown";
+import { Dropdown as DefaultDropdown } from "./Dropdown.js";
 
 /**
  * Render the dropdown to change the year.

src/components/custom-components.ts

@@ -1,19 +1,19 @@
-export * from "./Button";
-export * from "./Chevron";
-export * from "./Day";
-export * from "./DayDate";
-export * from "./Dropdown";
-export * from "./DropdownNav";
-export * from "./Footer";
-export * from "./Month";
-export * from "./MonthCaption";
-export * from "./Months";
-export * from "./MonthsDropdown";
-export * from "./Nav";
-export * from "./Option";
-export * from "./Select";
-export * from "./Week";
-export * from "./Weekday";
-export * from "./Weekdays";
-export * from "./WeekNumber";
-export * from "./YearsDropdown";
+export * from "./Button.js";
+export * from "./Chevron.js";
+export * from "./Day.js";
+export * from "./DayDate.js";
+export * from "./Dropdown.js";
+export * from "./DropdownNav.js";
+export * from "./Footer.js";
+export * from "./Month.js";
+export * from "./MonthCaption.js";
+export * from "./Months.js";
+export * from "./MonthsDropdown.js";
+export * from "./Nav.js";
+export * from "./Option.js";
+export * from "./Select.js";
+export * from "./Week.js";
+export * from "./Weekday.js";
+export * from "./Weekdays.js";
+export * from "./WeekNumber.js";
+export * from "./YearsDropdown.js";

src/contexts/index.ts

@@ -1,4 +1,4 @@
-export * from "./useCalendar";
-export * from "./useFocus";
-export * from "./useModifiers";
-export * from "./useProps";
+export * from "./useCalendar.js";
+export * from "./useFocus.js";
+export * from "./useModifiers.js";
+export * from "./useProps.js";

src/contexts/providers.tsx

@@ -1,18 +1,22 @@
 import React from "react";
 import type { PropsWithChildren } from "react";
 
-import { MultiProvider, RangeProvider, SingleProvider } from "../selection";
+import {
+  MultiProvider,
+  RangeProvider,
+  SingleProvider
+} from "../selection/index.js";
 import type {
   DayPickerProps,
   PropsMulti,
   PropsRange,
   PropsSingle
 } from "../types";
 
-import { CalendarContextProvider } from "./useCalendar";
-import { FocusContextProvider } from "./useFocus";
-import { ModifiersContextProvider } from "./useModifiers";
-import { PropsContextProvider, useProps } from "./useProps";
+import { CalendarContextProvider } from "./useCalendar.js";
+import { FocusContextProvider } from "./useFocus.js";
+import { ModifiersContextProvider } from "./useModifiers.js";
+import { PropsContextProvider, useProps } from "./useProps.js";
 
 function SelectionProviders({ children }: PropsWithChildren) {
   const props = useProps();