Add native ESM support (#317)

package.json

@@ -2,18 +2,39 @@
   "name": "react-time-picker",
   "version": "6.3.0",
   "description": "A time picker 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/cjs/TimeInput.js": "./dist/cjs/TimeInput.js",
+    "./dist/cjs/TimeInput/Hour12Input.js": "./dist/cjs/TimeInput/Hour12Input.js",
+    "./dist/cjs/TimeInput/Hour24Input.js": "./dist/cjs/TimeInput/Hour24Input.js",
+    "./dist/cjs/TimeInput/MinuteInput.js": "./dist/cjs/TimeInput/MinuteInput.js",
+    "./dist/cjs/TimeInput/SecondInput.js": "./dist/cjs/TimeInput/SecondInput.js",
+    "./dist/cjs/TimeInput/AmPm.js": "./dist/cjs/TimeInput/AmPm.js",
+    "./dist/esm/TimeInput.js": "./dist/esm/TimeInput.js",
+    "./dist/esm/TimeInput/Hour12Input.js": "./dist/esm/TimeInput/Hour12Input.js",
+    "./dist/esm/TimeInput/Hour24Input.js": "./dist/esm/TimeInput/Hour24Input.js",
+    "./dist/esm/TimeInput/MinuteInput.js": "./dist/esm/TimeInput/MinuteInput.js",
+    "./dist/esm/TimeInput/SecondInput.js": "./dist/esm/TimeInput/SecondInput.js",
+    "./dist/esm/TimeInput/AmPm.js": "./dist/esm/TimeInput/AmPm.js",
+    "./dist/TimePicker.css": "./dist/TimePicker.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 +44,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": [
     "react",

sample/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import Sample from './Sample';
+
+import Sample from './Sample.js';
 
 createRoot(document.getElementById('react-root') as HTMLDivElement).render(<Sample />);

src/TimeInput.spec.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import TimeInput from './TimeInput';
+import TimeInput from './TimeInput.js';
 
-import { muteConsole, restoreConsole } from '../test-utils';
+import { muteConsole, restoreConsole } from '../test-utils.js';
 
 vi.useFakeTimers();
 

src/TimeInput.tsx

@@ -9,19 +9,19 @@ import {
   getHoursMinutesSeconds,
 } from '@wojtekmaj/date-utils';
 
-import Divider from './Divider';
-import Hour12Input from './TimeInput/Hour12Input';
-import Hour24Input from './TimeInput/Hour24Input';
-import MinuteInput from './TimeInput/MinuteInput';
-import SecondInput from './TimeInput/SecondInput';
-import NativeInput from './TimeInput/NativeInput';
-import AmPm from './TimeInput/AmPm';
-
-import { getFormatter, getNumberFormatter } from './shared/dateFormatter';
-import { convert12to24, convert24to12 } from './shared/dates';
-import { getAmPmLabels } from './shared/utils';
-
-import type { AmPmType, Detail, LooseValuePiece, Value } from './shared/types';
+import Divider from './Divider.js';
+import Hour12Input from './TimeInput/Hour12Input.js';
+import Hour24Input from './TimeInput/Hour24Input.js';
+import MinuteInput from './TimeInput/MinuteInput.js';
+import SecondInput from './TimeInput/SecondInput.js';
+import NativeInput from './TimeInput/NativeInput.js';
+import AmPm from './TimeInput/AmPm.js';
+
+import { getFormatter, getNumberFormatter } from './shared/dateFormatter.js';
+import { convert12to24, convert24to12 } from './shared/dates.js';
+import { getAmPmLabels } from './shared/utils.js';
+
+import type { AmPmType, Detail, LooseValuePiece, Value } from './shared/types.js';
 
 const getFormatterOptionsCache: Record<string, Intl.DateTimeFormatOptions> = {};
 

src/TimeInput/AmPm.spec.tsx

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

src/TimeInput/AmPm.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import clsx from 'clsx';
 import { getHours } from '@wojtekmaj/date-utils';
 
-import { convert24to12 } from '../shared/dates';
-import { getAmPmLabels } from '../shared/utils';
+import { convert24to12 } from '../shared/dates.js';
+import { getAmPmLabels } from '../shared/utils.js';
 
 /* eslint-disable jsx-a11y/no-autofocus */
 

src/TimeInput/Hour12Input.spec.tsx

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

src/TimeInput/Hour12Input.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { getHours } from '@wojtekmaj/date-utils';
 
-import Input from './Input';
+import Input from './Input.js';
 
-import { convert24to12 } from '../shared/dates';
-import { safeMin, safeMax } from '../shared/utils';
+import { convert24to12 } from '../shared/dates.js';
+import { safeMin, safeMax } from '../shared/utils.js';
 
-import type { AmPmType } from '../shared/types';
+import type { AmPmType } from '../shared/types.js';
 
 type Hour12InputProps = {
   amPm: AmPmType | null;

src/TimeInput/Hour24Input.spec.tsx

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

src/TimeInput/Hour24Input.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { getHours } from '@wojtekmaj/date-utils';
 
-import Input from './Input';
+import Input from './Input.js';
 
-import { safeMin, safeMax } from '../shared/utils';
+import { safeMin, safeMax } from '../shared/utils.js';
 
 type Hour24InputProps = {
   maxTime?: string;

src/TimeInput/MinuteInput.spec.tsx

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

src/TimeInput/MinuteInput.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { getHours, getMinutes } from '@wojtekmaj/date-utils';
 
-import Input from './Input';
+import Input from './Input.js';
 
-import { safeMin, safeMax } from '../shared/utils';
+import { safeMin, safeMax } from '../shared/utils.js';
 
 type MinuteInputProps = {
   hour?: string | null;

src/TimeInput/NativeInput.spec.tsx

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

src/TimeInput/SecondInput.spec.tsx

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

src/TimeInput/SecondInput.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { getHours, getMinutes, getSeconds } from '@wojtekmaj/date-utils';
 
-import Input from './Input';
+import Input from './Input.js';
 
-import { safeMin, safeMax } from '../shared/utils';
+import { safeMin, safeMax } from '../shared/utils.js';
 
 type SecondInputProps = {
   hour?: string | null;

src/TimePicker.spec.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { act, fireEvent, render, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import TimePicker from './TimePicker';
+import TimePicker from './TimePicker.js';
 
 async function waitForElementToBeRemovedOrHidden(callback: () => HTMLElement | null) {
   const element = callback();

src/TimePicker.tsx

@@ -8,12 +8,19 @@ import clsx from 'clsx';
 import Clock from 'react-clock';
 import Fit from 'react-fit';
 
-import TimeInput from './TimeInput';
+import TimeInput from './TimeInput.js';
 
-import { isTime, rangeOf } from './shared/propTypes';
+import { isTime, rangeOf } from './shared/propTypes.js';
 
 import type { ReactNodeArray } from 'prop-types';
-import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types';
+import type {
+  ClassName,
+  CloseReason,
+  Detail,
+  LooseValue,
+  OpenReason,
+  Value,
+} from './shared/types.js';
 
 const baseClassName = 'react-time-picker';
 const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'] as const;

src/index.ts

@@ -1,6 +1,6 @@
-import TimePicker from './TimePicker';
+import TimePicker from './TimePicker.js';
 
-export type { TimePickerProps } from './TimePicker';
+export type { TimePickerProps } from './TimePicker.js';
 
 export { TimePicker };
 

src/shared/dates.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { convert12to24, convert24to12 } from './dates';
+import { convert12to24, convert24to12 } from './dates.js';
 
 describe('convert12to24', () => {
   it.each`

src/shared/dates.ts

@@ -1,4 +1,4 @@
-import type { AmPmType } from './types';
+import type { AmPmType } from './types.js';
 
 export function convert12to24(hour12: string | number, amPm: AmPmType): number {
   let hour24 = Number(hour12);

src/shared/propTypes.ts

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
 import type { Requireable, Validator } from 'prop-types';
-import type { Range } from './types';
+import type { Range } from './types.js';
 
 const allViews = ['hour', 'minute', 'second'];
 const allValueTypes = [...allViews];

src/shared/utils.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { safeMin, safeMax } from './utils';
+import { safeMin, safeMax } from './utils.js';
 
 describe('safeMin', () => {
   it('returns Infinity given no values', () => {

src/shared/utils.ts

@@ -1,4 +1,4 @@
-import { getFormatter } from './dateFormatter';
+import { getFormatter } from './dateFormatter.js';
 
 const nines = ['9', '٩'];
 const ninesRegExp = new RegExp(`[${nines.join('')}]`);

test/MaxDetailOptions.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Detail } from './shared/types';
+import type { Detail } from './shared/types.js';
 
 const allViews = ['hour', 'minute', 'second'] as const;
 

test/Test.tsx

@@ -1,18 +1,18 @@
 import React, { useRef, useState } from 'react';
-import TimePicker from 'react-time-picker/src';
-import 'react-time-picker/src/TimePicker.css';
+import TimePicker from 'react-time-picker';
+import 'react-time-picker/dist/TimePicker.css';
 import 'react-clock/dist/Clock.css';
 import { getHoursMinutesSeconds } from '@wojtekmaj/date-utils';
 
-import ValidityOptions from './ValidityOptions';
-import MaxDetailOptions from './MaxDetailOptions';
-import LocaleOptions from './LocaleOptions';
-import ValueOptions from './ValueOptions';
-import ViewOptions from './ViewOptions';
+import ValidityOptions from './ValidityOptions.js';
+import MaxDetailOptions from './MaxDetailOptions.js';
+import LocaleOptions from './LocaleOptions.js';
+import ValueOptions from './ValueOptions.js';
+import ViewOptions from './ViewOptions.js';
 
 import './Test.css';
 
-import type { Detail, LooseValue } from './shared/types';
+import type { Detail, LooseValue } from './shared/types.js';
 
 const now = new Date();
 

test/ValueOptions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { getHoursMinutesSeconds } from '@wojtekmaj/date-utils';
 
-import type { LooseValue } from './shared/types';
+import type { LooseValue } from './shared/types.js';
 
 type ValueOptionsProps = {
   setValue: (value: LooseValue) => void;

test/index.tsx

@@ -1,7 +1,7 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import Test from './Test';
+import Test from './Test.js';
 
 createRoot(document.getElementById('react-root') as HTMLDivElement).render(
   <StrictMode>