Merge pull request #6 from rpearce/forward-refs

Handle forwarded refs

Author: rpearce

.eslintrc

@@ -29,6 +29,7 @@
     "func-call-spacing": [ "error", "never" ],
     "indent": [ "error", 2 ],
     "linebreak-style": [ "error", "unix" ],
+    "no-console": "off",
     "no-else-return": [ "error" ],
     "no-empty-function": [ "error" ],
     "no-multiple-empty-lines": [2, { "max": 1, "maxEOF": 1 }],

.gitignore

@@ -61,3 +61,4 @@ typings/
 .next
 
 src/
+*.tmp

docs/app.js

@@ -23493,9 +23493,34 @@ function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.itera
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ButtonA11y = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
+
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  } else {
+    var newObj = {};
+
+    if (obj != null) {
+      for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+
+          if (desc.get || desc.set) {
+            Object.defineProperty(newObj, key, desc);
+          } else {
+            newObj[key] = obj[key];
+          }
+        }
+      }
+    }
+
+    newObj.default = obj;
+    return newObj;
+  }
+}
 
 function _typeof(obj) {
   if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
@@ -23511,6 +23536,24 @@ function _typeof(obj) {
   return _typeof(obj);
 }
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectSpread(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
@@ -23695,8 +23738,9 @@ function (_PureComponent) {
       var _this$props2 = this.props,
           children = _this$props2.children,
           element = _this$props2.element,
+          forwardedRef = _this$props2.forwardedRef,
           strictMode = _this$props2.strictMode,
-          rest = _objectWithoutProperties(_this$props2, ["children", "element", "strictMode"]);
+          rest = _objectWithoutProperties(_this$props2, ["children", "element", "forwardedRef", "strictMode"]);
 
       if (strictMode && !children && !rest['aria-label']) {
         throw new Error('react-button-a11y: `aria-label` required for accessibility');
@@ -23705,6 +23749,7 @@ function (_PureComponent) {
       return (0, _react.createElement)(element, _objectSpread({}, rest, {
         children: children,
         onKeyDown: this.handleKeyDown,
+        ref: forwardedRef,
         role: 'button',
         tabIndex: '0'
       }));
@@ -23714,12 +23759,19 @@ function (_PureComponent) {
   return ButtonA11y;
 }(_react.PureComponent);
 
-exports.default = ButtonA11y;
+exports.ButtonA11y = ButtonA11y;
 ButtonA11y.defaultProps = {
   element: 'div',
   onClick: Function.prototype,
   onKeyDown: Function.prototype,
   strictMode: true
 };
+var WrappedComponent = (0, _react.forwardRef)(function (props, ref) {
+  return _react.default.createElement(ButtonA11y, _extends({}, props, {
+    forwardedRef: ref
+  }));
+});
+var _default = WrappedComponent;
+exports.default = _default;
 
 },{"react":12}]},{},[1]);

package.json

@@ -33,14 +33,14 @@
     "src/"
   ],
   "scripts": {
-    "build": "npm run lint && npm run build:js && npm run build:docs",
+    "build": "npm run build:js && npm run build:docs",
     "build:docs": "browserify example/app.js -o docs/app.js -t [ babelify ]",
     "build:js": "babel source --out-dir src",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
     "coverage": "jest --coverage --coverageReporters=text-lcov | coveralls",
     "lint": "eslint --ext .js .",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run lint && npm run build",
     "test": "npm run lint && npm run build && jest --coverage"
   },
   "jest": {
@@ -75,8 +75,8 @@
     "react-dom": "^16.6.3"
   },
   "peerDependencies": {
-    "react": ">= 15",
-    "react-dom": ">= 15"
+    "react": ">= 16.3",
+    "react-dom": ">= 16.3"
   },
   "dependencies": {
     "@babel/polyfill": "^7.0.0"

source/react-button-a11y.js

@@ -1,4 +1,4 @@
-import { PureComponent, createElement } from 'react'
+import React, { PureComponent, createElement, forwardRef } from 'react'
 
 // isSelect :: KeyboardEvent -> Bool
 const isSelect = e =>
@@ -8,7 +8,7 @@ const isSelect = e =>
   e.keyCode === 13 ||
   e.keyCode === 32
 
-export default class ButtonA11y extends PureComponent {
+export class ButtonA11y extends PureComponent {
   constructor(...params) {
     super(...params)
     this.handleKeyDown = this.handleKeyDown.bind(this)
@@ -26,7 +26,7 @@ export default class ButtonA11y extends PureComponent {
   }
 
   render() {
-    const { children, element, strictMode, ...rest } = this.props
+    const { children, element, forwardedRef, strictMode, ...rest } = this.props
 
     if (strictMode && !children && !rest['aria-label']) {
       throw new Error('react-button-a11y: `aria-label` required for accessibility')
@@ -36,6 +36,7 @@ export default class ButtonA11y extends PureComponent {
       ...rest,
       children,
       onKeyDown: this.handleKeyDown,
+      ref: forwardedRef,
       role: 'button',
       tabIndex: '0'
     })
@@ -48,3 +49,9 @@ ButtonA11y.defaultProps = {
   onKeyDown: Function.prototype,
   strictMode: true
 }
+
+const WrappedComponent = forwardRef((props, ref) =>
+  <ButtonA11y {...props} forwardedRef={ref} />
+)
+
+export default WrappedComponent

test/__snapshots__/react-button-a11y.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`react-button-a11y renders, children 1`] = `
+exports[`react-button-a11y component renders, children 1`] = `
 <div
   aria-label="Mock Label"
   className="mock-className"
@@ -13,7 +13,7 @@ exports[`react-button-a11y renders, children 1`] = `
 </div>
 `;
 
-exports[`react-button-a11y renders, no children 1`] = `
+exports[`react-button-a11y component renders, no children 1`] = `
 <div
   aria-label="Mock Label"
   className="mock-className"
@@ -24,7 +24,37 @@ exports[`react-button-a11y renders, no children 1`] = `
 />
 `;
 
-exports[`react-button-a11y renders, span element 1`] = `
+exports[`react-button-a11y component renders, ref passed in 1`] = `
+<ButtonA11y
+  aria-label="Mock Label"
+  className="mock-className"
+  element="div"
+  forwardedRef={
+    Object {
+      "current": <div
+        aria-label="Mock Label"
+        class="mock-className"
+        role="button"
+        tabindex="0"
+      />,
+    }
+  }
+  onClick={[MockFunction]}
+  onKeyDown={[Function]}
+  strictMode={true}
+>
+  <div
+    aria-label="Mock Label"
+    className="mock-className"
+    onClick={[MockFunction]}
+    onKeyDown={[Function]}
+    role="button"
+    tabIndex="0"
+  />
+</ButtonA11y>
+`;
+
+exports[`react-button-a11y component renders, span element 1`] = `
 <span
   aria-label="Mock Label"
   className="mock-className"
@@ -35,12 +65,25 @@ exports[`react-button-a11y renders, span element 1`] = `
 />
 `;
 
-exports[`react-button-a11y renders, strict mode disabled 1`] = `
-<span
+exports[`react-button-a11y component renders, strict mode disabled 1`] = `
+<div
+  aria-label="Mock Label"
   className="mock-className"
   onClick={[MockFunction]}
   onKeyDown={[Function]}
   role="button"
   tabIndex="0"
 />
 `;
+
+exports[`react-button-a11y container renders 1`] = `
+<ButtonA11y
+  aria-label="Mock Label"
+  className="mock-className"
+  element="div"
+  forwardedRef={null}
+  onClick={[MockFunction]}
+  onKeyDown={[Function]}
+  strictMode={true}
+/>
+`;