Merge pull request #8 from rpearce/use-with-forwarded-ref

Use with forwarded ref and rename source file to index.js

Author: rpearce

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [1.0.1] - 2018-12-19
+
+### Fixed
+* fixed forwarding refs eating the display name by including
+  `react-with-forwarded-refs` as a dependency
+
 ## [1.0.0] - 2018-12-18
 
 ### Fixed

docs/app.js

@@ -65,12 +65,12 @@ var container = document.querySelector('[data-app]');
 
 _reactDom.default.render(_react.default.createElement(App, null), container);
 
-},{"../":2,"react":12,"react-dom":9}],2:[function(require,module,exports){
+},{"../":2,"react":14,"react-dom":9}],2:[function(require,module,exports){
 'use strict';
 
-module.exports = require('./src/react-button-a11y.js');
+module.exports = require('./src');
 
-},{"./src/react-button-a11y.js":19}],3:[function(require,module,exports){
+},{"./src":21}],3:[function(require,module,exports){
 /*
 object-assign
 (c) Sindre Sorhus
@@ -20188,7 +20188,7 @@ module.exports = reactDom;
 }
 
 }).call(this,require('_process'))
-},{"_process":4,"object-assign":3,"prop-types/checkPropTypes":5,"react":12,"scheduler":17,"scheduler/tracing":18}],8:[function(require,module,exports){
+},{"_process":4,"object-assign":3,"prop-types/checkPropTypes":5,"react":14,"scheduler":19,"scheduler/tracing":20}],8:[function(require,module,exports){
 /** @license React v16.6.1
  * react-dom.production.min.js
  *
@@ -20439,7 +20439,7 @@ void 0:t("40");return a._reactRootContainer?(Oh(function(){$h(null,null,a,!1,fun
 Ka,La,Ca.injectEventPluginsByName,qa,Ra,function(a){za(a,Qa)},Ib,Jb,Jd,Ea]},unstable_createRoot:function(a,b){Yh(a)?void 0:t("299","unstable_createRoot");return new Xh(a,!0,null!=b&&!0===b.hydrate)}};(function(a){var b=a.findFiberByHostInstance;return Ve(n({},a,{findHostInstanceByFiber:function(a){a=nd(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:Ia,bundleType:0,version:"16.6.3",rendererPackageName:"react-dom"});
 var ei={default:bi},fi=ei&&bi||ei;module.exports=fi.default||fi;
 
-},{"object-assign":3,"react":12,"scheduler":17}],9:[function(require,module,exports){
+},{"object-assign":3,"react":14,"scheduler":19}],9:[function(require,module,exports){
 (function (process){
 'use strict';
 
@@ -20482,6 +20482,39 @@ if (process.env.NODE_ENV === 'production') {
 
 }).call(this,require('_process'))
 },{"./cjs/react-dom.development.js":7,"./cjs/react-dom.production.min.js":8,"_process":4}],10:[function(require,module,exports){
+'use strict'
+
+module.exports = require('./src')
+
+},{"./src":11}],11:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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 _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); }
+
+var withForwardedRef = function withForwardedRef(Comp) {
+  var handle = function handle(props, ref) {
+    return _react.default.createElement(Comp, _extends({}, props, {
+      forwardedRef: ref
+    }));
+  };
+
+  var name = Comp.displayName || Comp.name;
+  handle.displayName = "withForwardedRef(".concat(name, ")");
+  return (0, _react.forwardRef)(handle);
+};
+
+var _default = withForwardedRef;
+exports.default = _default;
+},{"react":14}],12:[function(require,module,exports){
 (function (process){
 /** @license React v16.6.1
  * react.development.js
@@ -22325,7 +22358,7 @@ module.exports = react;
 }
 
 }).call(this,require('_process'))
-},{"_process":4,"object-assign":3,"prop-types/checkPropTypes":5}],11:[function(require,module,exports){
+},{"_process":4,"object-assign":3,"prop-types/checkPropTypes":5}],13:[function(require,module,exports){
 /** @license React v16.6.1
  * react.production.min.js
  *
@@ -22351,7 +22384,7 @@ _currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.P
 if(null!=b){void 0!==b.ref&&(h=b.ref,f=K.current);void 0!==b.key&&(g=""+b.key);var l=void 0;a.type&&a.type.defaultProps&&(l=a.type.defaultProps);for(c in b)L.call(b,c)&&!M.hasOwnProperty(c)&&(d[c]=void 0===b[c]&&void 0!==l?l[c]:b[c])}c=arguments.length-2;if(1===c)d.children=e;else if(1<c){l=Array(c);for(var m=0;m<c;m++)l[m]=arguments[m+2];d.children=l}return{$$typeof:p,type:a.type,key:g,ref:h,props:d,_owner:f}},createFactory:function(a){var b=N.bind(null,a);b.type=a;return b},isValidElement:O,version:"16.6.3",
 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentOwner:K,assign:k}};X.unstable_ConcurrentMode=x;X.unstable_Profiler=u;var Y={default:X},Z=Y&&X||Y;module.exports=Z.default||Z;
 
-},{"object-assign":3}],12:[function(require,module,exports){
+},{"object-assign":3}],14:[function(require,module,exports){
 (function (process){
 'use strict';
 
@@ -22362,7 +22395,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 }).call(this,require('_process'))
-},{"./cjs/react.development.js":10,"./cjs/react.production.min.js":11,"_process":4}],13:[function(require,module,exports){
+},{"./cjs/react.development.js":12,"./cjs/react.production.min.js":13,"_process":4}],15:[function(require,module,exports){
 (function (process){
 /** @license React v0.11.3
  * scheduler-tracing.development.js
@@ -22786,7 +22819,7 @@ exports.unstable_unsubscribe = unstable_unsubscribe;
 }
 
 }).call(this,require('_process'))
-},{"_process":4}],14:[function(require,module,exports){
+},{"_process":4}],16:[function(require,module,exports){
 /** @license React v0.11.3
  * scheduler-tracing.production.min.js
  *
@@ -22798,7 +22831,7 @@ exports.unstable_unsubscribe = unstable_unsubscribe;
 
 'use strict';Object.defineProperty(exports,"__esModule",{value:!0});var b=0;exports.__interactionsRef=null;exports.__subscriberRef=null;exports.unstable_clear=function(a){return a()};exports.unstable_getCurrent=function(){return null};exports.unstable_getThreadID=function(){return++b};exports.unstable_trace=function(a,d,c){return c()};exports.unstable_wrap=function(a){return a};exports.unstable_subscribe=function(){};exports.unstable_unsubscribe=function(){};
 
-},{}],15:[function(require,module,exports){
+},{}],17:[function(require,module,exports){
 (function (process,global){
 /** @license React v0.11.3
  * scheduler.development.js
@@ -23436,7 +23469,7 @@ exports.unstable_shouldYield = unstable_shouldYield;
 }
 
 }).call(this,require('_process'),typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"_process":4}],16:[function(require,module,exports){
+},{"_process":4}],18:[function(require,module,exports){
 (function (global){
 /** @license React v0.11.3
  * scheduler.production.min.js
@@ -23461,7 +23494,7 @@ b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstabl
 exports.unstable_shouldYield=function(){return!f&&(null!==d&&d.expirationTime<l||w())};
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],17:[function(require,module,exports){
+},{}],19:[function(require,module,exports){
 (function (process){
 'use strict';
 
@@ -23472,7 +23505,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 }).call(this,require('_process'))
-},{"./cjs/scheduler.development.js":15,"./cjs/scheduler.production.min.js":16,"_process":4}],18:[function(require,module,exports){
+},{"./cjs/scheduler.development.js":17,"./cjs/scheduler.production.min.js":18,"_process":4}],20:[function(require,module,exports){
 (function (process){
 'use strict';
 
@@ -23483,7 +23516,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 }).call(this,require('_process'))
-},{"./cjs/scheduler-tracing.development.js":13,"./cjs/scheduler-tracing.production.min.js":14,"_process":4}],19:[function(require,module,exports){
+},{"./cjs/scheduler-tracing.development.js":15,"./cjs/scheduler-tracing.production.min.js":16,"_process":4}],21:[function(require,module,exports){
 "use strict";
 
 function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }
@@ -23493,31 +23526,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ButtonA11y = void 0;
 
-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) : {};
+var _react = require("react");
 
-          if (desc.get || desc.set) {
-            Object.defineProperty(newObj, key, desc);
-          } else {
-            newObj[key] = obj[key];
-          }
-        }
-      }
-    }
+var _reactWithForwardedRef = _interopRequireDefault(require("react-with-forwarded-ref"));
 
-    newObj.default = obj;
-    return newObj;
-  }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
 }
 
 function _typeof(obj) {
@@ -23534,24 +23550,6 @@ 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] : {};
@@ -23764,12 +23762,9 @@ ButtonA11y.defaultProps = {
   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;
+
+var _default = (0, _reactWithForwardedRef.default)(ButtonA11y);
+
 exports.default = _default;
 
-},{"react":12}]},{},[1]);
+},{"react":14,"react-with-forwarded-ref":10}]},{},[1]);

index.js

@@ -1,3 +1,3 @@
 'use strict'
 
-module.exports = require('./src/react-button-a11y.js')
+module.exports = require('./src')

package.json

@@ -79,6 +79,7 @@
     "react-dom": ">= 16.3"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.0.0"
+    "@babel/polyfill": "^7.0.0",
+    "react-with-forwarded-ref": "^0.1.0"
   }
 }

source/react-button-a11y.js renamed to source/index.js

@@ -1,4 +1,5 @@
-import React, { PureComponent, createElement, forwardRef } from 'react'
+import { PureComponent, createElement } from 'react'
+import withForwardedRef from 'react-with-forwarded-ref'
 
 // isSelect :: KeyboardEvent -> Bool
 const isSelect = e =>
@@ -50,8 +51,4 @@ ButtonA11y.defaultProps = {
   strictMode: true
 }
 
-const WrappedComponent = forwardRef((props, ref) =>
-  <ButtonA11y {...props} forwardedRef={ref} />
-)
-
-export default WrappedComponent
+export default withForwardedRef(ButtonA11y)

test/__snapshots__/react-button-a11y.test.js.snap renamed to test/__snapshots__/index.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`react-button-a11y component renders, children 1`] = `
+exports[`ButtonA11y component renders, children 1`] = `
 <div
   aria-label="Mock Label"
   className="mock-className"
@@ -13,7 +13,7 @@ exports[`react-button-a11y component renders, children 1`] = `
 </div>
 `;
 
-exports[`react-button-a11y component renders, no children 1`] = `
+exports[`ButtonA11y component renders, no children 1`] = `
 <div
   aria-label="Mock Label"
   className="mock-className"
@@ -24,7 +24,7 @@ exports[`react-button-a11y component renders, no children 1`] = `
 />
 `;
 
-exports[`react-button-a11y component renders, ref passed in 1`] = `
+exports[`ButtonA11y component renders, ref passed in 1`] = `
 <ButtonA11y
   aria-label="Mock Label"
   className="mock-className"
@@ -54,7 +54,7 @@ exports[`react-button-a11y component renders, ref passed in 1`] = `
 </ButtonA11y>
 `;
 
-exports[`react-button-a11y component renders, span element 1`] = `
+exports[`ButtonA11y component renders, span element 1`] = `
 <span
   aria-label="Mock Label"
   className="mock-className"
@@ -65,7 +65,7 @@ exports[`react-button-a11y component renders, span element 1`] = `
 />
 `;
 
-exports[`react-button-a11y component renders, strict mode disabled 1`] = `
+exports[`ButtonA11y component renders, strict mode disabled 1`] = `
 <div
   aria-label="Mock Label"
   className="mock-className"
@@ -76,7 +76,7 @@ exports[`react-button-a11y component renders, strict mode disabled 1`] = `
 />
 `;
 
-exports[`react-button-a11y container renders 1`] = `
+exports[`ButtonA11y container renders 1`] = `
 <ButtonA11y
   aria-label="Mock Label"
   className="mock-className"

test/react-button-a11y.test.js renamed to test/index.test.js

@@ -3,9 +3,9 @@ import { renderIntoDocument } from 'react-dom/test-utils'
 import { mount, shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
-import Container, { ButtonA11y } from '../source/react-button-a11y'
+import Container, { ButtonA11y } from '../source'
 
-describe('react-button-a11y', () => {
+describe('ButtonA11y', () => {
 
   describe('container', () => {
 

yarn.lock

@@ -4977,6 +4977,13 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.6.3"
     scheduler "^0.11.2"
 
+react-with-forwarded-ref@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/react-with-forwarded-ref/-/react-with-forwarded-ref-0.1.0.tgz#105658548957dec5fdd6c01f5ecda5f7a44020ab"
+  integrity sha512-2VjYW1qwMxbUqnJwsS8CAcZSYB7gp4fxg2fucLK8y5tnuXGQxtbAGKajLuT7gZHWODzmesW0dm4RkvafWoNz7A==
+  dependencies:
+    "@babel/polyfill" "^7.0.0"
+
 react@^16.6.3:
   version "16.6.3"
   resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"