Fix module resolution issues in dual CJS/ESM setup

.babelrc.js

@@ -2,7 +2,7 @@
 // https://babeljs.io/docs/options#shouldprintcomment
 const shouldPrintComment = (val) => /@license|@preserve|[#@]__PURE__/.test(val);
 
-module.exports = {
+export default {
   env: {
     cjs: {
       presets: ["@babel/preset-env", "@babel/preset-react"],

UI/UI.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {ReactFocusLockProps, AutoFocusProps, FreeFocusProps, InFocusGuardProps} from "../interfaces";
+import {ReactFocusLockProps, AutoFocusProps, FreeFocusProps, InFocusGuardProps} from "../dist/cjs/interfaces.js";
 
 /**
  * Traps Focus inside a Lock

UI/package.json

@@ -1,8 +1,8 @@
 {
   "private": true,
+  "type": "module",
   "main": "../dist/cjs/UI.js",
-  "jsnext:main": "../dist/es2015/UI.js",
   "module": "../dist/es2015/UI.js",
-  "types": "UI.d.ts",
-  "sideEffects": false
+  "jsnext:main": "../dist/es2015/UI.js",
+  "types": "./UI.d.ts"
 }

package.json

@@ -2,18 +2,33 @@
   "name": "react-focus-lock",
   "version": "2.11.3",
   "description": "It is a trap! (for a focus)",
-  "main": "dist/cjs/index.js",
-  "jsnext:main": "dist/es2015/index.js",
-  "module": "dist/es2015/index.js",
-  "types": "react-focus-lock.d.ts",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es2015/index.js",
+  "jsnext:main": "./dist/es2015/index.js",
+  "types": "./dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/es2015/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./sidecar": {
+      "import": "./dist/es2015/sidecar.js",
+      "require": "./dist/cjs/sidecar.js"
+    },
+    "./UI": {
+      "import": "./dist/es2015/UI.js",
+      "require": "./dist/cjs/UI.js"
+    }
+  },
   "sideEffects": [
     "**/sidecar.js",
     "**/index.js"
   ],
   "scripts": {
-    "build:cjs": "NODE_ENV=cjs babel src -d dist/cjs",
-    "build:es5": "NODE_ENV=es2015 babel src -d dist/es2015",
-    "build": "rm -Rf ./dist && yarn build:es5 && yarn build:cjs",
+    "build:cjs": "NODE_ENV=cjs babel src -d dist/cjs && copyfiles -u 1 src/**/*.d.ts dist/cjs && echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
+    "build:esm": "NODE_ENV=es2015 babel src -d dist/es2015 && copyfiles -u 1 src/**/*.d.ts dist/es2015",
+    "build": "rm -Rf ./dist && yarn build:esm && yarn build:cjs",
     "test": "npm run test:pick -- '_tests/**/*spec.js'",
     "test:pick": "NODE_ENV=cjs mocha --require @babel/register --require global-jsdom/register --require _tests/spinup/scaffolding --exit",
     "prepublish": "npm run lint:fix && npm run build && npm run changelog",
@@ -80,6 +95,7 @@
     "chai": "^4.1.0",
     "chai-enzyme": "^1.0.0-beta.0",
     "conventional-changelog-cli": "^2.0.12",
+    "copyfiles": "^2.4.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^5.16.0",

sidecar/package.json

@@ -1,7 +1,8 @@
 {
   "private": true,
+  "type": "module",
   "main": "../dist/cjs/sidecar.js",
-  "jsnext:main": "../dist/es2015/sidecar.js",
   "module": "../dist/es2015/sidecar.js",
-  "types": "sidecar.d.ts"
+  "jsnext:main": "../dist/es2015/sidecar.js",
+  "types": "./sidecar.d.ts"
 }

src/UI.d.ts

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import {ReactFocusLockProps, AutoFocusProps, FreeFocusProps, InFocusGuardProps} from "./interfaces.js";
+
+/**
+ * Traps Focus inside a Lock
+ */
+declare const ReactFocusLock: React.FC<ReactFocusLockProps & { sideCar: React.FC<any> }>;
+
+export default ReactFocusLock;
+
+/**
+ * Autofocus on children on Lock activation
+ */
+export class AutoFocusInside extends React.Component<AutoFocusProps> {
+}
+
+/**
+ * Autofocus on children
+ */
+export class MoveFocusInside extends React.Component<AutoFocusProps> {
+}
+
+/**
+ * Allow free focus inside on children
+ */
+export class FreeFocusInside extends React.Component<FreeFocusProps> {
+}
+
+/**
+ * Secures the focus around the node
+ */
+export class InFocusGuard extends React.Component<InFocusGuardProps> {
+}
+
+/**
+ * Moves focus inside a given node
+ */
+export function useFocusInside(node: React.RefObject<HTMLElement>): void;
+
+export type FocusOptions = {
+    /**
+     * enables focus cycle
+     * @default true
+     */
+    cycle?: boolean;
+    /**
+     * limits focusables to tabbables (tabindex>=0) elements only
+     * @default true
+     */
+    onlyTabbable?:boolean
+}
+
+export type FocusControl = {
+    /**
+     * moves focus to the current scope, can be considered as autofocus
+     */
+    autoFocus():Promise<void>;
+    /**
+     * focuses the next element in the scope.
+     * If active element is not in the scope, autofocus will be triggered first
+     */
+    focusNext(options?:FocusOptions):Promise<void>;
+    /**
+     * focuses the prev element in the scope.
+     * If active element is not in the scope, autofocus will be triggered first
+     */
+    focusPrev(options?:FocusOptions):Promise<void>;
+    /**
+     * focused the first element in the scope
+     */
+    focusFirst(options?: Pick<FocusOptions,'onlyTabbable'>):Promise<void>;
+    /**
+     * focused the last element in the scope
+     */
+    focusLast(options?: Pick<FocusOptions,'onlyTabbable'>):Promise<void>;
+}
+
+
+/**
+ * returns FocusControl over the union given elements, one or many
+ * - can be used outside of FocusLock
+ * @see {@link useFocusScope} for use cases inside of FocusLock
+ */
+export function useFocusController<Elements extends HTMLElement=HTMLElement>(...shards: ReadonlyArray<HTMLElement | {current:HTMLElement | null}>):FocusControl;
+
+/**
+ * returns FocusControl over the current FocusLock
+ * - can be used only within FocusLock
+ * - can be used by disabled FocusLock
+ * @see {@link useFocusController} for use cases outside of FocusLock
+ */
+export function useFocusScope():FocusControl
+
+
+export type FocusCallbacks = {
+    onFocus():void;
+    onBlur():void;
+}
+/**
+ * returns information about FocusState of a given node
+ * @example
+ * ```tsx
+ * const {active, ref, onFocus} = useFocusState();
+ * return <div ref={ref} onFocus={onFocus}>{active ? 'is focused' : 'not focused'}</div>
+ * ```
+ */
+export function useFocusState<T extends Element>(callbacks?: FocusCallbacks ):{
+    /**
+     * is currently focused, or is focus is inside
+     */
+    active: boolean;
+    /**
+     * focus handled. SHALL be passed to the node down
+     */
+    onFocus: React.FocusEventHandler<T>;
+    /**
+     * reference to the node
+     * only required to capture current status of the node
+     */
+    ref: React.RefObject<T>;
+}

react-focus-lock.d.ts → src/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {ReactFocusLockProps, AutoFocusProps, FreeFocusProps, InFocusGuardProps} from "./interfaces";
+import {ReactFocusLockProps, AutoFocusProps, FreeFocusProps, InFocusGuardProps} from "./interfaces.js";
 
 /**
  * Traps Focus inside a Lock

interfaces.d.ts → src/interfaces.d.ts

@@ -1,6 +1,19 @@
 import * as React from 'react';
 import {Ref} from "react";
 
+export type FocusOptions = {
+  /**
+   * enables focus cycle
+   * @default true
+   */
+  cycle?: boolean;
+  /**
+   * limits focusables to tabbables (tabindex>=0) elements only
+   * @default true
+   */
+  onlyTabbable?:boolean
+}
+
 export interface ReactFocusLockProps<ChildrenType = React.ReactNode, LockProps = Record<string, any>> {
   disabled?: boolean;
 

src/sidecar.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+declare var sidecar: React.FC;
+
+export default sidecar;

yarn.lock

@@ -4190,6 +4190,19 @@ copy-to-clipboard@^3.0.8:
   dependencies:
     toggle-selection "^1.0.6"
 
+copyfiles@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.4.1.tgz#d2dcff60aaad1015f09d0b66e7f0f1c5cd3c5da5"
+  integrity sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==
+  dependencies:
+    glob "^7.0.5"
+    minimatch "^3.0.3"
+    mkdirp "^1.0.4"
+    noms "0.0.0"
+    through2 "^2.0.1"
+    untildify "^4.0.0"
+    yargs "^16.1.0"
+
 core-js-compat@^3.31.0, core-js-compat@^3.34.0:
   version "3.35.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.35.1.tgz#215247d7edb9e830efa4218ff719beb2803555e2"
@@ -6251,7 +6264,7 @@ glob@7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.2.0:
+glob@^7.0.0, glob@^7.0.5, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.2.0:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -8139,7 +8152,7 @@ minimatch@3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -8462,6 +8475,14 @@ node-releases@^2.0.14:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
+noms@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859"
+  integrity sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow==
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "~1.0.31"
+
 normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -10027,6 +10048,16 @@ readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.4.0, readable-stre
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@~1.0.31:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  integrity sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -11091,6 +11122,11 @@ string_decoder@^1.0.0, string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
+string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==
+
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -11370,7 +11406,7 @@ throttle-debounce@^2.1.0:
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
   integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
 
-through2@^2.0.0:
+through2@^2.0.0, through2@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
   integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
@@ -11727,6 +11763,11 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
+untildify@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
+
 upath@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
@@ -12283,7 +12324,7 @@ yargs-unparser@2.0.0:
     flat "^5.0.2"
     is-plain-obj "^2.1.0"
 
-yargs@16.2.0, yargs@^16.2.0:
+yargs@16.2.0, yargs@^16.1.0, yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
   integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==