feat: add full ESM support (#125)

Author: kyletsang

.babelrc.js

@@ -1,4 +1,4 @@
-module.exports = (api) => ({
+export default (api) => ({
   presets: [
     ['env-modules', { modules: api.env() === 'cjs' ? 'commonjs' : false }],
     ['@babel/react', { runtime: 'automatic' }],

eslint.config.mjs

@@ -55,6 +55,7 @@ export default tseslint.config(
           ignoreRestSiblings: false,
         },
       ],
+      'react/prop-types': 'off',
     },
   },
   {
@@ -82,7 +83,6 @@ export default tseslint.config(
       '@typescript-eslint/no-unused-expressions': 'off',
       'padded-blocks': 'off',
       'react/no-multi-comp': 'off',
-      'react/prop-types': 'off',
     },
   },
 );

package.json

@@ -11,7 +11,8 @@
     "url": "git+https://github.com/react-restart/ui.git"
   },
   "license": "MIT",
-  "main": "cjs/index.js",
+  "type": "module",
+  "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
@@ -100,7 +101,7 @@
     "@restart/hooks": "^0.6.2",
     "@types/warning": "^3.0.3",
     "dequal": "^2.0.3",
-    "dom-helpers": "^5.2.0",
+    "dom-helpers": "^6.0.1",
     "uncontrollable": "^9.0.0",
     "warning": "^4.0.3"
   },

src/Anchor.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import useEventCallback from '@restart/hooks/useEventCallback';
-import { useButtonProps } from './Button';
+import { useButtonProps } from './Button.js';
 
 export function isTrivialHref(href?: string) {
   return !href || href.trim() === '#';

src/Dropdown.tsx

@@ -8,23 +8,23 @@ import useForceUpdate from '@restart/hooks/useForceUpdate';
 import useEventListener from '@restart/hooks/useEventListener';
 import useEventCallback from '@restart/hooks/useEventCallback';
 
-import DropdownContext from './DropdownContext';
+import DropdownContext from './DropdownContext.js';
 import DropdownMenu, {
-  DropdownMenuProps,
-  UseDropdownMenuMetadata,
-  UseDropdownMenuOptions,
-} from './DropdownMenu';
+  type DropdownMenuProps,
+  type UseDropdownMenuMetadata,
+  type UseDropdownMenuOptions,
+} from './DropdownMenu.js';
 import DropdownToggle, {
-  DropdownToggleProps,
-  UseDropdownToggleMetadata,
+  type DropdownToggleProps,
+  type UseDropdownToggleMetadata,
   isRoleMenu,
-} from './DropdownToggle';
-import DropdownItem, { DropdownItemProps } from './DropdownItem';
-import SelectableContext from './SelectableContext';
-import { SelectCallback } from './types';
-import { dataAttr } from './DataKey';
-import { Placement } from './usePopper';
-import useWindow from './useWindow';
+} from './DropdownToggle.js';
+import DropdownItem, { type DropdownItemProps } from './DropdownItem.js';
+import SelectableContext from './SelectableContext.js';
+import type { SelectCallback } from './types.js';
+import { dataAttr } from './DataKey.js';
+import type { Placement } from './usePopper.js';
+import useWindow from './useWindow.js';
 
 export type {
   DropdownMenuProps,

src/DropdownContext.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Placement } from './usePopper';
+import type { Placement } from './usePopper.js';
 
 export type DropdownContextValue = {
   toggle: (

src/DropdownItem.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { useContext } from 'react';
 import useEventCallback from '@restart/hooks/useEventCallback';
 
-import SelectableContext, { makeEventKey } from './SelectableContext';
-import NavContext from './NavContext';
+import SelectableContext, { makeEventKey } from './SelectableContext.js';
+import NavContext from './NavContext.js';
 
-import { EventKey, DynamicRefForwardingComponent } from './types';
-import Button from './Button';
-import { dataAttr } from './DataKey';
+import type { EventKey, DynamicRefForwardingComponent } from './types.js';
+import Button from './Button.js';
+import { dataAttr } from './DataKey.js';
 
 export interface DropdownItemProps extends React.HTMLAttributes<HTMLElement> {
   /**

src/DropdownMenu.tsx

@@ -1,15 +1,19 @@
 import { useContext, useRef } from 'react';
 import * as React from 'react';
 import useCallbackRef from '@restart/hooks/useCallbackRef';
-import DropdownContext, { DropdownContextValue } from './DropdownContext';
+import DropdownContext, {
+  type DropdownContextValue,
+} from './DropdownContext.js';
 import usePopper, {
-  UsePopperOptions,
-  Placement,
-  Offset,
-  UsePopperState,
-} from './usePopper';
-import useClickOutside, { ClickOutsideOptions } from './useClickOutside';
-import mergeOptionsWithPopperConfig from './mergeOptionsWithPopperConfig';
+  type UsePopperOptions,
+  type Placement,
+  type Offset,
+  type UsePopperState,
+} from './usePopper.js';
+import useClickOutside, {
+  type ClickOutsideOptions,
+} from './useClickOutside.js';
+import mergeOptionsWithPopperConfig from './mergeOptionsWithPopperConfig.js';
 
 export interface UseDropdownMenuOptions {
   /**

src/DropdownToggle.tsx

@@ -1,6 +1,8 @@
 import { useContext, useCallback, useId } from 'react';
 import * as React from 'react';
-import DropdownContext, { DropdownContextValue } from './DropdownContext';
+import DropdownContext, {
+  type DropdownContextValue,
+} from './DropdownContext.js';
 
 export const isRoleMenu = (el: HTMLElement) =>
   el.getAttribute('role')?.toLowerCase() === 'menu';

src/ImperativeTransition.tsx

@@ -2,10 +2,10 @@ import useMergedRefs from '@restart/hooks/useMergedRefs';
 import useEventCallback from '@restart/hooks/useEventCallback';
 import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
 import { useRef, cloneElement, useState } from 'react';
-import { TransitionComponent, TransitionProps } from './types';
-import NoopTransition from './NoopTransition';
-import RTGTransition from './RTGTransition';
-import { getChildRef } from './utils';
+import type { TransitionComponent, TransitionProps } from './types.js';
+import NoopTransition from './NoopTransition.js';
+import RTGTransition from './RTGTransition.js';
+import { getChildRef } from './utils.js';
 
 export interface TransitionFunctionOptions {
   in: boolean;