Update all src imports

src/DayPicker.test.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React from "react"
 
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react"
 
-import { DayPicker } from "./DayPicker";
+import { DayPicker } from "./DayPicker.js"
 
 test("should render a date picker component", () => {
   render(<DayPicker data-testid="test" />);

src/DayPicker.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+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.test.ts

@@ -1,4 +1,4 @@
-import { CalendarDay } from "./CalendarDay";
+import { CalendarDay } from "./CalendarDay.js"
 
 it("should set `displayMonth` to undefined when date and `displayMonth` are in the same month", () => {
   const date = new Date(2020, 0, 1);

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.test.ts

@@ -1,6 +1,6 @@
-import { CalendarDay } from "./CalendarDay";
-import { CalendarMonth } from "./CalendarMonth";
-import { CalendarWeek } from "./CalendarWeek";
+import { CalendarDay } from "./CalendarDay.js"
+import { CalendarMonth } from "./CalendarMonth.js"
+import { CalendarWeek } from "./CalendarWeek.js"
 
 let month: CalendarMonth;
 let date: Date;

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.test.ts

@@ -1,5 +1,5 @@
-import { CalendarDay } from "./CalendarDay";
-import { CalendarWeek } from "./CalendarWeek";
+import { CalendarDay } from "./CalendarDay.js"
+import { CalendarWeek } from "./CalendarWeek.js"
 
 let week: CalendarWeek;
 const days = [

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/components/Button.tsx

@@ -1,4 +1,4 @@
-import React, { type ButtonHTMLAttributes } from "react";
+import React, { type ButtonHTMLAttributes } from "react"
 
 /**
  * Render the button elements in the calendar.

src/components/Calendar.test.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React from "react"
 
-import { grid, nav } from "@/test/elements";
-import { render } from "@/test/render";
+import { grid, nav } from "@/test/elements.js"
+import { render } from "@/test/render.js"
 
-import { Calendar } from "./Calendar";
+import { Calendar } from "./Calendar.js"
 
 it("should render the navigation and month grids", () => {
   render(<Calendar />);

src/components/Calendar.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+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 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 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 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,15 @@
-import React from "react";
+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 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 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/Footer.tsx

@@ -1,4 +1,4 @@
-import React, { type HTMLProps } from "react";
+import React, { type HTMLProps } from "react"
 
 /**
  * Component wrapping the footer.

src/components/Month.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+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 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/Months.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import type { HTMLProps } from "react";
+import React from "react"
+import type { HTMLProps } from "react"
 
 /**
  * Component wrapping the month grids.

src/components/MonthsDropdown.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import type { ChangeEventHandler } from "react";
+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.test.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React from "react"
 
-import { nextButton, previousButton } from "@/test/elements";
-import { render } from "@/test/render";
-import { user } from "@/test/user";
+import { nextButton, previousButton } from "@/test/elements.js"
+import { render } from "@/test/render.js"
+import { user } from "@/test/user.js"
 
-import { Nav } from "./Nav";
+import { Nav } from "./Nav.js"
 
 describe("when clicking the next button", () => {
   test("should call the onNextClick callback", async () => {

src/components/Nav.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+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/Option.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import type { OptionHTMLAttributes } from "react";
+import React from "react"
+import type { OptionHTMLAttributes } from "react"
 
 /**
  * Render the `option` element.

src/components/Select.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import type { SelectHTMLAttributes } from "react";
+import React from "react"
+import type { SelectHTMLAttributes } from "react"
 
 /**
  * Render the `select` element.

src/components/Week.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+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 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 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 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.