Update ALL dependencies to latest versions (#78)

- All dependencies have been updated to their very latest versions. Some were dropped in favor of more modern ones (in particular, related to Babel 6.x -> 7.x). - Added ESLint Prettier rules. - Updated Prettier to 2.x, configured options, formatted code. - Fixed a bug that was causing a crash expecting `includes()` to be a method on `specifiedFocusTrapOptions`. - Added babel-jest to remove the need to first build the bundle prior to running tests. - Added format-check package script to check for formatting issues. - Added format and lint checks to `npm test`, along with unit tests. - Some lint errors were disabled, deferred to #77
focus-trap · Jun 29, 2020 · 3977c86 · 3977c86
1 parent 0d15605
commit 3977c86
Show file tree

Hide file tree

Showing 19 changed files with 6,787 additions and 7,780 deletions.
diff --git a/.eslintrc b/.eslintrc
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,38 @@
+{
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "impliedStrict": true,
+      "jsx": true
+    },
+    "ecmaVersion": 6,
+    "sourceType": "script"
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "prettier" // ALWAYS LAST: disable style rules that conflict with prettier
+  ],
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true,
+    "jest": true
+  },
+  "rules": {
+    "no-warning-comments": [
+      "error",
+      {
+        "terms": ["DEBUG", "FIXME", "HACK"],
+        "location": "start"
+      }
+    ]
+  },
+  "settings": {
+    // eslint-plugin-react settings: a version needs to be specified,
+    //  here it's set to detect (default value)
+    "react": {
+      "version": "detect"
+    }
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,70 @@
-node_modules
+# Logs
+logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# IDE files
+.vscode/
+
+# Builds
+dist/
+# demo-bundle.js generated when running the demo
 **/*-bundle.js
-dist
+
+# OS files
+.DS_Store
+.Thumbs
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,20 @@
+/* eslint-env node */
+
+module.exports = {
+  arrowParens: 'always',
+  bracketSpacing: true,
+  endOfLine: 'lf',
+  htmlWhitespaceSensitivity: 'strict',
+  insertPragma: false,
+  jsxBracketSameLine: false,
+  jsxSingleQuote: false,
+  printWidth: 80,
+  proseWrap: 'never',
+  quoteProps: 'as-needed',
+  requirePragma: false,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'none',
+  useTabs: false
+};
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## UNRELEASED
+
+- Add: Prop types for `<FocusTrap>`.
+- Update: `focus-trap` dependency from 4.0.2 to [5.1.0](https://github.com/davidtheclark/focus-trap/blob/master/CHANGELOG.md#510) for the latest features/fixes it provides. #71
+- **BREAKING** Update: Only React 16.0+ is supported going forward. #55
+- **BREAKING** Update: All dependencies updated to their latest versions.
+- Fix: `children`'s type is `React.ReactNode`, not `React.ReactElement`. #66
+- Fix: Allow mutable object refs to be used for FocusTrap child. #72
+- Fix: `specifiedFocusTrapOptions.includes(optionName)` statement in `componentDidMount()` was causing an exception because `includes()` is not a function defined on `Object`.
+
 ## 6.0.0
 
 - Update focus-trap to 4.0.2, which includes [a queue of traps](https://github.com/davidtheclark/focus-trap/blob/master/CHANGELOG.md#400), so when a trap is paused because another trap activates, it will be unpaused when that other trap deactivates. If Trap A was automatically paused because Trap B activated (existing behavior), when Trap B is deactivated Trap A will be automatically unpaused (new behavior).
@@ -10,7 +20,7 @@
 
 ## 5.0.0
 
-- **Breaking change:** `<FocusTrap>` now expects exactly one child element which can be any HTML element or other React component that contains focusable elements. The `tag` prop has been removed, as has support for additional props that are passed through to the `tag`, because it is no longer necessary: you should provide your own element, with whatever props you want, as a child of `<FocusTrap>`.
+- **BREAKING:** `<FocusTrap>` now expects exactly one child element which can be any HTML element or other React component that contains focusable elements. The `tag` prop has been removed, as has support for additional props that are passed through to the `tag`, because it is no longer necessary: you should provide your own element, with whatever props you want, as a child of `<FocusTrap>`.
 
 ## 4.0.1
 

diff --git a/README.md b/README.md
@@ -168,8 +168,12 @@ If you would like to pause or unpause the focus trap (see [`focus-trap`'s docume
 
 Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
 
+Format with `npm run format`.
+
 Lint with `npm run lint`.
 
 Run the demos with `npm start`.
 
-Test with `npm run test`.
+Test with `npm run test` (checks formatting, checks lint, runs tests).
+
+Unit test (only) with `npm run test-unit`.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    // NOTE: With no targets specified, @babel/preset-env will transform all
+    //  ECMAScript 2015+ code by default, which is the original preset prior
+    //  to upgrading to Babel 7
+    // @see https://babeljs.io/docs/en/babel-preset-env#targets
+    '@babel/preset-env',
+    '@babel/preset-react'
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties'
+  ]
+};
diff --git a/demo/js/demo-autofocus.js b/demo/js/demo-autofocus.js
@@ -25,25 +25,25 @@ class DemoAutofocus extends React.Component {
   }
 
   render() {
-    const trap = this.state.activeTrap
-      ? <FocusTrap
-          focusTrapOptions={{
-            onDeactivate: this.unmountTrap
-          }}
-        >
-          <div className="trap">
-            <button onClick={this.unmountTrap}>
-              deactivate trap
-            </button>
-            <div>
-              <a href="#">Another focusable thing</a>
-            </div>
-            <div>
-              Autofocused input: <input autoFocus={true} />
-            </div>
+    const trap = this.state.activeTrap ? (
+      <FocusTrap
+        focusTrapOptions={{
+          onDeactivate: this.unmountTrap
+        }}
+      >
+        <div className="trap">
+          <button onClick={this.unmountTrap}>deactivate trap</button>
+          <div>
+            <a href="#">Another focusable thing</a>
           </div>
-        </FocusTrap>
-      : false;
+          <div>
+            Autofocused input: <input autoFocus={true} />
+          </div>
+        </div>
+      </FocusTrap>
+    ) : (
+      false
+    );
 
     return (
       <div>

diff --git a/demo/js/demo-defaults.js b/demo/js/demo-defaults.js
@@ -25,39 +25,30 @@ class DemoDefaults extends React.Component {
   }
 
   render() {
-    const trap = this.state.activeTrap
-      ? <FocusTrap
-          focusTrapOptions={{
-            onDeactivate: this.unmountTrap
-          }}
-        >
-          <div className="trap">
-            <p>
-              Here is a focus trap
-              {' '}
-              <a href="#">with</a>
-              {' '}
-              <a href="#">some</a>
-              {' '}
-              <a href="#">focusable</a>
-              {' '}
-              parts.
-            </p>
-            <p>
-              <button onClick={this.unmountTrap}>
-                deactivate trap
-              </button>
-            </p>
-          </div>
-        </FocusTrap>
-      : false;
+    const trap = this.state.activeTrap ? (
+      <FocusTrap
+        focusTrapOptions={{
+          onDeactivate: this.unmountTrap
+        }}
+      >
+        <div className="trap">
+          <p>
+            Here is a focus trap <a href="#">with</a> <a href="#">some</a>{' '}
+            <a href="#">focusable</a> parts.
+          </p>
+          <p>
+            <button onClick={this.unmountTrap}>deactivate trap</button>
+          </p>
+        </div>
+      </FocusTrap>
+    ) : (
+      false
+    );
 
     return (
       <div>
         <p>
-          <button onClick={this.mountTrap}>
-            activate trap
-          </button>
+          <button onClick={this.mountTrap}>activate trap</button>
         </p>
         {trap}
       </div>

diff --git a/demo/js/demo-ffne.js b/demo/js/demo-ffne.js
@@ -25,47 +25,38 @@ class DemoFfne extends React.Component {
   }
 
   render() {
-    const trap = this.state.activeTrap
-      ? <FocusTrap
-          focusTrapOptions={{
-            onDeactivate: this.unmountTrap,
-            initialFocus: '#focused-input',
-            escapeDeactivates: false
-          }}
-        >
-          <div className="trap">
-            <p>
-              Here is a focus trap
-              {' '}
-              <a href="#">with</a>
-              {' '}
-              <a href="#">some</a>
-              {' '}
-              <a href="#">focusable</a>
-              {' '}
-              parts.
-            </p>
-            <p>
-              <label htmlFor="focused-input" style={{ marginRight: 10 }}>
-                Initially focused input
-              </label>
-              <input ref="input" id="focused-input" />
-            </p>
-            <p>
-              <button onClick={this.unmountTrap}>
-                deactivate trap
-              </button>
-            </p>
-          </div>
-        </FocusTrap>
-      : false;
+    const trap = this.state.activeTrap ? (
+      <FocusTrap
+        focusTrapOptions={{
+          onDeactivate: this.unmountTrap,
+          initialFocus: '#focused-input',
+          escapeDeactivates: false
+        }}
+      >
+        <div className="trap">
+          <p>
+            Here is a focus trap <a href="#">with</a> <a href="#">some</a>{' '}
+            <a href="#">focusable</a> parts.
+          </p>
+          <p>
+            <label htmlFor="focused-input" style={{ marginRight: 10 }}>
+              Initially focused input
+            </label>
+            <input id="focused-input" />
+          </p>
+          <p>
+            <button onClick={this.unmountTrap}>deactivate trap</button>
+          </p>
+        </div>
+      </FocusTrap>
+    ) : (
+      false
+    );
 
     return (
       <div>
         <p>
-          <button onClick={this.mountTrap}>
-            activate trap
-          </button>
+          <button onClick={this.mountTrap}>activate trap</button>
         </p>
         {trap}
       </div>