focus-trap-react - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

CHANGELOG.md

 # Changelog
 
+## 3.0.3
+
+- Introduce `dist/focus-trap-react.js`, where `src/` now compiles to, since React 15.5+ demands `class`es, so Babel-compilation.
+  Which is actually a huge overhaul, though in semver it's just a patch.
+
 ## 3.0.2
@@ -4,0 +9,0 @@

index.js

@@ -1,6 +0,6 @@
-var React = require('react');
-var createFocusTrap = require('focus-trap');
+const React = require('react');
+const PropTypes = require('prop-types');
+const createFocusTrap = require('focus-trap');
 
-var PropTypes = React.PropTypes;
-var checkedProps = {
+const checkedProps = {
   active: PropTypes.bool.isRequired,
@@ -12,21 +12,10 @@ paused: PropTypes.bool.isRequired,
 
-var FocusTrap = React.createClass({
-  propTypes: checkedProps,
-
-  getDefaultProps: function() {
-    return {
-      active: true,
-      tag: 'div',
-      paused: false,
-      focusTrapOptions: {},
-    };
-  },
-
-  componentWillMount: function() {
+class FocusTrap extends React.Component {
+  componentWillMount() {
     if (typeof document !== 'undefined') {
       this.previouslyFocusedElement = document.activeElement;
     }
-  },
+  }
 
-  componentDidMount: function() {
+  componentDidMount() {
     // We need to hijack the returnFocusOnDeactivate option,
@@ -37,7 +26,7 @@ // because React can move focus into the element before we arrived at
     // then (optionally) returns focus to it in componentWillUnmount.
-    var specifiedFocusTrapOptions = this.props.focusTrapOptions;
-    var tailoredFocusTrapOptions = {
+    const specifiedFocusTrapOptions = this.props.focusTrapOptions;
+    const tailoredFocusTrapOptions = {
       returnFocusOnDeactivate: false,
     };
-    for (var optionName in specifiedFocusTrapOptions) {
+    for (const optionName in specifiedFocusTrapOptions) {
       if (!specifiedFocusTrapOptions.hasOwnProperty(optionName)) continue;
@@ -55,5 +44,5 @@ if (optionName === 'returnFocusOnDeactivate') continue;
     }
-  },
+  }
 
-  componentDidUpdate: function(prevProps) {
+  componentDidUpdate(prevProps) {
     if (prevProps.active && !this.props.active) {
@@ -70,5 +59,5 @@ this.focusTrap.deactivate();
     }
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     this.focusTrap.deactivate();
@@ -78,13 +67,15 @@ if (this.props.focusTrapOptions.returnFocusOnDeactivate !== false && this.previouslyFocusedElement) {
     }
-  },
+  }
 
-  render: function() {
-    var props = this.props;
+  render() {
+    const props = this.props;
 
-    var elementProps = {
-      ref: function(el) { this.node = el; }.bind(this),
+    const elementProps = {
+      ref: function(el) {
+        this.node = el;
+      }.bind(this),
     };
 
     // This will get id, className, style, etc. -- arbitrary element props
-    for (var prop in props) {
+    for (const prop in props) {
       if (!props.hasOwnProperty(prop)) continue;
@@ -96,5 +87,15 @@ if (checkedProps[prop]) continue;
     return React.createElement(this.props.tag, elementProps, this.props.children);
-  },
-});
+  }
 
+}
+
+FocusTrap.propTypes = checkedProps;
+
+FocusTrap.defaultProps = {
+  active: true,
+  tag: 'div',
+  paused: false,
+  focusTrapOptions: {},
+};
+
 module.exports = FocusTrap;

package.json

 {
   "name": "focus-trap-react",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "A React component that traps focus.",
-  "main": "index.js",
+  "main": "dist/focus-trap-react.js",
   "scripts": {
-    "lint": "eslint .",
     "demo-bundle": "browserify demo/js -t babelify --extension=.jsx -o demo/demo-bundle.js",
     "start": "budo demo/js/index.js:demo-bundle.js --dir demo --live -- -t babelify --extension=.jsx",
-    "test-dev": "zuul --local 8080 --open -- test/index.js",
-    "pretest": "npm run lint",
-    "test": "zuul -- test/index.js"
+    "lint": "eslint .",
+    "format": "prettier --single-quote --write src/*.js test/*.js demo/js/*.js",
+    "build": "babel src -d dist",
+    "jest": "jest",
+    "pretest": "npm run lint && npm run build",
+    "test": "jest",
+    "prepublish": "npm run build"
   },
@@ -36,13 +39,16 @@ "repository": {
   "devDependencies": {
-    "babel-preset-react": "^6.5.0",
+    "babel-cli": "^6.24.1",
+    "babel-eslint": "^7.2.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "babelify": "^7.3.0",
-    "browserify": "^13.0.1",
+    "browserify": "^14.3.0",
     "budo": "^9.4.1",
     "eslint": "^3.13.1",
-    "react": "^15.1.0",
-    "react-addons-test-utils": "^15.1.0",
-    "react-dom": "^15.1.0",
-    "sinon": "^1.17.4",
-    "tape": "^4.5.1",
-    "zuul": "^3.10.1"
+    "eslint-plugin-react": "^6.10.3",
+    "jest": "^19.0.2",
+    "prettier": "^1.2.2",
+    "react": "^15.5.0",
+    "react-dom": "^15.5.0"
   },
@@ -56,10 +62,15 @@ "dependencies": {
   },
-  "files": [
-    "index.js"
-  ],
   "babel": {
     "presets": [
-      "react"
+      "react",
+      "es2015"
+    ],
+    "plugins": [
+      "transform-class-properties"
     ]
+  },
+  "jest": {
+    "testRegex": "/test/.*\\.test.js$",
+    "resetMocks": true
   }
 }

README.md

@@ -1,2 +0,2 @@
-# focus-trap-react [![Build Status](https://travis-ci.org/davidtheclark/focus-trap-react.svg?branch=0.1.0)](https://travis-ci.org/davidtheclark/focus-trap-react)
+# focus-trap-react [![Build Status](https://travis-ci.org/davidtheclark/focus-trap-react.svg?branch=master)](https://travis-ci.org/davidtheclark/focus-trap-react)
 
@@ -28,5 +28,7 @@ A React component that traps focus.
 
+`dist/focus-trap-react.js` is the Babel-compiled file that you'll use.
+
 ### React dependency
 
-Version 2+ is compatible with React 0.14+.
+Version 2+ is compatible with React >0.14+.
 
@@ -37,8 +39,6 @@ Version 1 is compatible with React 0.13.
 
-Basically IE9+. See `.zuul.yml` for more details.
+Basically IE9+.
 
 Why? Because this module's core functionality comes from focus-trap, which uses [a couple of IE9+ functions](https://github.com/davidtheclark/tabbable#browser-support).
 
-Automated testing is done with [zuul](https://github.com/defunctzombie/zuul) and [Open Suace](https://saucelabs.com/opensauce/).
-
 ## Usage
@@ -51,42 +51,55 @@
 ```js
-var React = require('react');
-var ReactDOM = require('react-dom');
-var FocusTrap = require('../../');
+const React = require('react');
+const ReactDOM = require('react-dom');
+const FocusTrap = require('../../dist/focus-trap-react');
 
-var container = document.getElementById('demo-one');
+const container = document.getElementById('demo-one');
 
-var DemoOne = React.createClass({
-  getInitialState: function() {
-    return {
-      activeTrap: false,
+class DemoOne extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeTrap: false
     };
-  },
 
-  mountTrap: function() {
+    this.mountTrap = this.mountTrap.bind(this);
+    this.unmountTrap = this.unmountTrap.bind(this);
+  }
+
+  mountTrap() {
     this.setState({ activeTrap: true });
-  },
+  }
 
-  unmountTrap: function() {
+  unmountTrap() {
     this.setState({ activeTrap: false });
-  },
+  }
 
-  render: function() {
-    var 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;
+  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;
 
@@ -103,4 +116,4 @@ return (
     );
-  },
-});
+  }
+}
 
@@ -150,2 +163,2 @@ ReactDOM.render(<DemoOne />, container);
 
-Test with `npm run test-dev`, which will give you a URL to open in your browser. Look at the console log for TAP output.
+Test with `npm run test`.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

204565

1835.52%

Number of package files

24

380%

Lines of code

883

1003.75%

Number of lines in readme file

160

8.84%

Worsened metrics

Dev dependency count

14

27.27%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes