Add native ESM support

package.json

@@ -2,18 +2,27 @@
  "name": "react-calendar",
  "version": "4.5.0",
  "description": "Ultimate calendar for your React app.",
- "main": "dist/cjs/index.js",
- "module": "dist/esm/index.js",
- "source": "src/index.ts",
- "types": "dist/cjs/index.d.ts",
+ "type": "module",
  "sideEffects": [
  "*.css"
  ],
+ "main": "./dist/cjs/index.js",
+ "module": "./dist/esm/index.js",
+ "source": "./src/index.ts",
+ "types": "./dist/cjs/index.d.ts",
+ "exports": {
+ ".": {
+ "import": "./dist/esm/index.js",
+ "require": "./dist/cjs/index.js"
+ },
+ "./dist/Calendar.css": "./dist/Calendar.css"
+ },
  "scripts": {
  "build": "yarn build-js && yarn copy-styles",
- "build-js": "yarn build-js-esm && yarn build-js-cjs",
+ "build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package",
  "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
  "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
+ "build-js-cjs-package": "echo '{\n \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
  "clean": "rimraf dist",
  "copy-styles": "cpy 'src/**/*.css' dist",
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
@@ -23,7 +32,7 @@
  "test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
  "tsc": "tsc --noEmit",
  "unit": "vitest",
- "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & nodemon --watch src --ext css --exec \"yarn copy-styles\""
+ "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & yarn build-js-cjs-package & nodemon --watch src --ext css --exec \"yarn copy-styles\""
  },
  "keywords": [
  "calendar",

src/Calendar.spec.tsx

@@ -3,9 +3,9 @@ import React, { createRef } from 'react';
 import { act, render } from '@testing-library/react';
 import { getMonthStart } from '@wojtekmaj/date-utils';
 
-import Calendar from './Calendar';
+import Calendar from './Calendar.js';
 
-import type { Action, Value, View } from './shared/types';
+import type { Action, Value, View } from './shared/types.js';
 
 type CalendarImperativeHandle = {
  activeStartDate: Date;

src/Calendar.tsx

@@ -4,13 +4,13 @@ import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'r
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-import Navigation from './Calendar/Navigation';
-import CenturyView from './CenturyView';
-import DecadeView from './DecadeView';
-import YearView from './YearView';
-import MonthView from './MonthView';
+import Navigation from './Calendar/Navigation.js';
+import CenturyView from './CenturyView.js';
+import DecadeView from './DecadeView.js';
+import YearView from './YearView.js';
+import MonthView from './MonthView.js';
 
-import { getBegin, getBeginNext, getEnd, getValueRange } from './shared/dates';
+import { getBegin, getBeginNext, getEnd, getValueRange } from './shared/dates.js';
 import {
  isCalendarType,
  isClassName,
@@ -19,8 +19,8 @@ import {
  isRef,
  isView,
  rangeOf,
-} from './shared/propTypes';
-import { between } from './shared/utils';
+} from './shared/propTypes.js';
+import { between } from './shared/utils.js';
 
 import type {
  Action,
@@ -39,7 +39,7 @@ import type {
  TileDisabledFunc,
  Value,
  View,
-} from './shared/types';
+} from './shared/types.js';
 
 import type {
  formatDay as defaultFormatDay,
@@ -49,7 +49,7 @@ import type {
  formatShortWeekday as defaultFormatShortWeekday,
  formatWeekday as defaultFormatWeekday,
  formatYear as defaultFormatYear,
-} from './shared/dateFormatter';
+} from './shared/dateFormatter.js';
 
 const baseClassName = 'react-calendar';
 const allViews = ['century', 'decade', 'year', 'month'] as const;

src/Calendar/Navigation.spec.tsx

@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import Navigation from './Navigation';
+import Navigation from './Navigation.js';
 
 const allViews = ['century', 'decade', 'year', 'month'];
 

src/Calendar/Navigation.tsx

@@ -12,13 +12,13 @@ import {
  getBeginPrevious2,
  getEndPrevious,
  getEndPrevious2,
-} from '../shared/dates';
+} from '../shared/dates.js';
 import {
  formatMonthYear as defaultFormatMonthYear,
  formatYear as defaultFormatYear,
-} from '../shared/dateFormatter';
+} from '../shared/dateFormatter.js';
 
-import type { Action, NavigationLabelFunc, RangeType } from '../shared/types';
+import type { Action, NavigationLabelFunc, RangeType } from '../shared/types.js';
 
 const className = 'react-calendar__navigation';
 

src/CenturyView.spec.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { getDecadeStart, getDecadeEnd } from '@wojtekmaj/date-utils';
 
-import CenturyView from './CenturyView';
+import CenturyView from './CenturyView.js';
 
 describe('CenturyView', () => {
  const defaultProps = {

src/CenturyView.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Decades from './CenturyView/Decades';
+import Decades from './CenturyView/Decades.js';
 
-import { tileGroupProps } from './shared/propTypes';
+import { tileGroupProps } from './shared/propTypes.js';
 
 type CenturyViewProps = React.ComponentProps<typeof Decades>;
 

src/CenturyView/Decade.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import Decade from './Decade';
+import Decade from './Decade.js';
 
 const tileProps = {
  activeStartDate: new Date(2018, 0, 1),

src/CenturyView/Decade.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { getDecadeStart, getDecadeEnd } from '@wojtekmaj/date-utils';
 
-import Tile from '../Tile';
+import Tile from '../Tile.js';
 
-import { getDecadeLabel } from '../shared/dates';
-import { formatYear as defaultFormatYear } from '../shared/dateFormatter';
+import { getDecadeLabel } from '../shared/dates.js';
+import { formatYear as defaultFormatYear } from '../shared/dateFormatter.js';
 
 const className = 'react-calendar__century-view__decades__decade';
 

src/CenturyView/Decades.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { getDecadeStart } from '@wojtekmaj/date-utils';
 
-import TileGroup from '../TileGroup';
-import Decade from './Decade';
+import TileGroup from '../TileGroup.js';
+import Decade from './Decade.js';
 
-import { getBeginOfCenturyYear } from '../shared/dates';
+import { getBeginOfCenturyYear } from '../shared/dates.js';
 
 type DecadesProps = {
  activeStartDate: Date;

src/DecadeView.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import DecadeView from './DecadeView';
+import DecadeView from './DecadeView.js';
 
 describe('DecadeView', () => {
  const defaultProps = {

src/DecadeView.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Years from './DecadeView/Years';
+import Years from './DecadeView/Years.js';
 
-import { tileGroupProps } from './shared/propTypes';
+import { tileGroupProps } from './shared/propTypes.js';
 
 type DecadeViewProps = React.ComponentProps<typeof Years>;
 

src/DecadeView/Year.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import Year from './Year';
+import Year from './Year.js';
 
 const tileProps = {
  activeStartDate: new Date(2018, 0, 1),

src/DecadeView/Year.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { getYearStart, getYearEnd } from '@wojtekmaj/date-utils';
 
-import Tile from '../Tile';
+import Tile from '../Tile.js';
 
-import { formatYear as defaultFormatYear } from '../shared/dateFormatter';
+import { formatYear as defaultFormatYear } from '../shared/dateFormatter.js';
 
 const className = 'react-calendar__decade-view__years__year';
 

src/DecadeView/Years.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { getYearStart } from '@wojtekmaj/date-utils';
 
-import TileGroup from '../TileGroup';
-import Year from './Year';
+import TileGroup from '../TileGroup.js';
+import Year from './Year.js';
 
-import { getBeginOfDecadeYear } from '../shared/dates';
+import { getBeginOfDecadeYear } from '../shared/dates.js';
 
 type YearsProps = {
  activeStartDate: Date;

src/Flex.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import Flex from './Flex';
+import Flex from './Flex.js';
 
 describe('Flex', () => {
  it('styles itself properly with wrap flag set to false', () => {

src/MonthView.spec.tsx

@@ -2,8 +2,8 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import MonthView from './MonthView';
-import { formatShortWeekday } from './shared/dateFormatter';
+import MonthView from './MonthView.js';
+import { formatShortWeekday } from './shared/dateFormatter.js';
 
 const { format } = new Intl.DateTimeFormat('en-US', {
  day: 'numeric',

src/MonthView.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-import Days from './MonthView/Days';
-import Weekdays from './MonthView/Weekdays';
-import WeekNumbers from './MonthView/WeekNumbers';
+import Days from './MonthView/Days.js';
+import Weekdays from './MonthView/Weekdays.js';
+import WeekNumbers from './MonthView/WeekNumbers.js';
 
-import { CALENDAR_TYPES, CALENDAR_TYPE_LOCALES } from './shared/const';
-import { isCalendarType, tileGroupProps } from './shared/propTypes';
+import { CALENDAR_TYPES, CALENDAR_TYPE_LOCALES } from './shared/const.js';
+import { isCalendarType, tileGroupProps } from './shared/propTypes.js';
 
-import type { CalendarType } from './shared/types';
+import type { CalendarType } from './shared/types.js';
 
 function getCalendarTypeFromLocale(locale: string | undefined): CalendarType {
  if (locale) {

src/MonthView/Day.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import Day from './Day';
+import Day from './Day.js';
 
 const tileProps = {
  activeStartDate: new Date(2018, 0, 1),

src/MonthView/Day.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { getDayStart, getDayEnd } from '@wojtekmaj/date-utils';
 
-import Tile from '../Tile';
+import Tile from '../Tile.js';
 
-import { isWeekend } from '../shared/dates';
+import { isWeekend } from '../shared/dates.js';
 import {
  formatDay as defaultFormatDay,
  formatLongDate as defaultFormatLongDate,
-} from '../shared/dateFormatter';
-import { mapCalendarType } from '../shared/utils';
+} from '../shared/dateFormatter.js';
+import { mapCalendarType } from '../shared/utils.js';
 
-import type { CalendarType, DeprecatedCalendarType } from '../shared/types';
+import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js';
 
 const className = 'react-calendar__month-view__days__day';
 

src/MonthView/Days.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { getYear, getMonth, getDaysInMonth, getDayStart } from '@wojtekmaj/date-utils';
 
-import TileGroup from '../TileGroup';
-import Day from './Day';
+import TileGroup from '../TileGroup.js';
+import Day from './Day.js';
 
-import { getDayOfWeek } from '../shared/dates';
-import { mapCalendarType } from '../shared/utils';
+import { getDayOfWeek } from '../shared/dates.js';
+import { mapCalendarType } from '../shared/utils.js';
 
-import type { CalendarType, DeprecatedCalendarType } from '../shared/types';
+import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js';
 
 type DaysProps = {
  activeStartDate: Date;

src/MonthView/WeekNumber.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import WeekNumber from './WeekNumber';
+import WeekNumber from './WeekNumber.js';
 
 describe('<WeekNumber /> component', () => {
  const defaultProps = {

src/MonthView/WeekNumber.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { OnClickWeekNumberFunc } from '../shared/types';
+import type { OnClickWeekNumberFunc } from '../shared/types.js';
 
 const className = 'react-calendar__tile';
 

src/MonthView/WeekNumbers.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
-import WeekNumbers from './WeekNumbers';
+import WeekNumbers from './WeekNumbers.js';
 
 describe('.react-calendar__month-view__weekNumbers', () => {
  const defaultProps = {

src/MonthView/WeekNumbers.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import { getYear, getMonth, getDate, getDaysInMonth } from '@wojtekmaj/date-utils';
 
-import WeekNumber from './WeekNumber';
-import Flex from '../Flex';
+import WeekNumber from './WeekNumber.js';
+import Flex from '../Flex.js';
 
-import { getBeginOfWeek, getDayOfWeek, getWeekNumber } from '../shared/dates';
-import { mapCalendarType } from '../shared/utils';
+import { getBeginOfWeek, getDayOfWeek, getWeekNumber } from '../shared/dates.js';
+import { mapCalendarType } from '../shared/utils.js';
 
-import type { CalendarType, DeprecatedCalendarType, OnClickWeekNumberFunc } from '../shared/types';
+import type {
+ CalendarType,
+ DeprecatedCalendarType,
+ OnClickWeekNumberFunc,
+} from '../shared/types.js';
 
 type WeekNumbersProps = {
  activeStartDate: Date;

src/MonthView/Weekdays.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import Weekdays from './Weekdays';
+import Weekdays from './Weekdays.js';
 
 describe('Weekdays', () => {
  const defaultProps = {