Merge branch 'release/1.2.2'

README.md

@@ -16,7 +16,7 @@ beautiful web apps without sacrificing accessibility.
 When using this component, outlines on focusable elements are hidden until a user begins to interact with keyboard
 (specifically, the `tab` key). Optionally, resuming mouse/touch input can hide outlines again.
 
-From version [v1.2.0](https://github.com/mrmckeb/react-outline-manager/releases/tag/v1.1.0) and above, React v16.2+ is
+From version [v1.2.0](https://github.com/mrmckeb/react-outline-manager/releases/tag/v1.2.0) and above, React v16.2+ is
 required due to the introduction of `Fragment` support.
 
 ## Usage

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-outline-manager",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "A simple helper for toggling CSS outlines.",
   "keywords": [
     "a11y",
@@ -43,23 +43,24 @@
     "react": ">=16.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.1.0",
-    "@babel/core": "^7.1.0",
+    "@babel/cli": "^7.1.2",
+    "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
     "@types/react": "^16.4.14",
     "jest": "^23.6.0",
-    "react": "^16.5.2",
+    "react": ">=16.2.0",
     "react-dom": "^16.5.2",
-    "rollup": "^0.66.2",
+    "rollup": "^0.66.4",
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-commonjs": "^9.1.8",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^6.0.0",
-    "serve": "^10.0.1",
-    "typescript": "^3.0.3"
+    "serve": "^10.0.2",
+    "typescript": "^3.1.1"
   },
   "dependencies": {}
 }

rollup.config.js

@@ -1,4 +1,5 @@
 import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
 import replace from 'rollup-plugin-replace';
 import resolve from 'rollup-plugin-node-resolve';
 import packageJson from './package.json';
@@ -38,7 +39,6 @@ export default {
 		: productionOutputs,
 	external: ['react'],
 	plugins: [
-		resolve(),
 		babel({
 			babelrc: false,
 			extensions: ['.ts', '.tsx', '.js', '.jsx'],
@@ -52,6 +52,8 @@ export default {
 				'@babel/preset-typescript',
 			],
 		}),
+		resolve(),
+		commonjs(),
 		replace({
 			'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
 		}),

src/index.tsx

@@ -1,4 +1,4 @@
-import { Component, Fragment } from 'react';
+import * as React from 'react';
 
 interface Props extends React.HTMLProps<HTMLElement> {
 	className: string,
@@ -10,7 +10,7 @@ interface State {
 	isUsingKeyboard: boolean,
 }
 
-export default class ReactOutlineHander extends Component<Props, State> {
+export default class ReactOutlineHander extends React.Component<Props, State> {
 
 	static defaultProps: Partial<Props> = {
 		className: 'ReactOutlineManager',
@@ -58,7 +58,7 @@ export default class ReactOutlineHander extends Component<Props, State> {
 		script.id = className;
 		script.innerText = `.${className} a:focus,.${className} area:focus,.${className} button:focus,.${className} iframe:focus,.${className} input:focus,.${className} select:focus,.${className} textarea:focus,.${className} [tabindex]:focus,.${className} [contenteditable]:focus { outline: none; }`;
 
-		document.head.appendChild(script);
+		document.head && document.head.appendChild(script);
 	}
 
 	removeListeners = () => {
@@ -77,7 +77,7 @@ export default class ReactOutlineHander extends Component<Props, State> {
 	render () {
 		const { children, className, toggle, tagName: Tag, ...rest } = this.props;
 
-		if (!Tag) return <Fragment>{children}</Fragment>;
+		if (!Tag) return <React.Fragment>{children}</React.Fragment>;
 
 		const props = { ...rest };
 		if (!this.state.isUsingKeyboard) Object.assign(props, { className });