react-sizeme - npm Package Compare versions

Comparing version 2.6.12 to 3.0.0

dist/react-sizeme.js

 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var ReactDOM = _interopDefault(require('react-dom'));
-var invariant = _interopDefault(require('invariant'));
+var ReactDOM = require('react-dom');
+var invariant = require('invariant');
 var throttleDebounce = require('throttle-debounce');
-var createResizeDetector = _interopDefault(require('element-resize-detector'));
-var isShallowEqual = _interopDefault(require('shallowequal'));
+var createResizeDetector = require('element-resize-detector');
+var isShallowEqual = require('shallowequal');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
+var createResizeDetector__default = /*#__PURE__*/_interopDefaultLegacy(createResizeDetector);
+var isShallowEqual__default = /*#__PURE__*/_interopDefaultLegacy(isShallowEqual);
+
 function _classCallCheck(instance, Constructor) {
@@ -133,2 +138,15 @@ if (!(instance instanceof Constructor)) {
 
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -186,2 +204,21 @@ if (source == null) return {};
 
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
 var instances = {}; // Lazily require to not cause bug
@@ -194,3 +231,3 @@ // https://github.com/ctrlplusb/react-sizeme/issues/6
   if (!instances[strategy]) {
-    instances[strategy] = createResizeDetector({
+    instances[strategy] = createResizeDetector__default['default']({
       strategy: strategy
@@ -207,3 +244,2 @@ });
   monitorHeight: false,
-  monitorPosition: false,
   refreshRate: 16,
@@ -225,11 +261,11 @@ refreshMode: 'throttle',
 
-var ReferenceWrapper =
-/*#__PURE__*/
-function (_Component) {
+var ReferenceWrapper = /*#__PURE__*/function (_Component) {
   _inherits(ReferenceWrapper, _Component);
 
+  var _super = _createSuper(ReferenceWrapper);
+
   function ReferenceWrapper() {
     _classCallCheck(this, ReferenceWrapper);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(ReferenceWrapper).apply(this, arguments));
+    return _super.apply(this, arguments);
   }
@@ -271,3 +307,3 @@
 
-  return React__default.createElement("div", phProps);
+  return /*#__PURE__*/React__default['default'].createElement("div", phProps);
 }
@@ -290,7 +326,7 @@
         size = props.size,
-        disablePlaceholder = props.disablePlaceholder,
-        onSize = props.onSize,
-        restProps = _objectWithoutProperties(props, ["explicitRef", "className", "style", "size", "disablePlaceholder", "onSize"]);
+        disablePlaceholder = props.disablePlaceholder;
+        props.onSize;
+        var restProps = _objectWithoutProperties(props, ["explicitRef", "className", "style", "size", "disablePlaceholder", "onSize"]);
 
-    var noSizeData = size == null || size.width == null && size.height == null && size.position == null;
+    var noSizeData = size == null || size.width == null && size.height == null;
     var renderPlaceholder = noSizeData && !disablePlaceholder;
@@ -306,7 +342,7 @@ var renderProps = {
 
-    var toRender = renderPlaceholder ? React__default.createElement(Placeholder, {
+    var toRender = renderPlaceholder ? /*#__PURE__*/React__default['default'].createElement(Placeholder, {
       className: className,
       style: style
-    }) : React__default.createElement(WrappedComponent, _extends({}, renderProps, restProps));
-    return React__default.createElement(ReferenceWrapper, {
+    }) : /*#__PURE__*/React__default['default'].createElement(WrappedComponent, _extends({}, renderProps, restProps));
+    return /*#__PURE__*/React__default['default'].createElement(ReferenceWrapper, {
       ref: explicitRef
@@ -342,4 +378,2 @@ }, toRender);
       monitorHeight = _config$monitorHeight === void 0 ? defaultConfig.monitorHeight : _config$monitorHeight,
-      _config$monitorPositi = config.monitorPosition,
-      monitorPosition = _config$monitorPositi === void 0 ? defaultConfig.monitorPosition : _config$monitorPositi,
       _config$refreshRate = config.refreshRate,
@@ -353,5 +387,5 @@ refreshRate = _config$refreshRate === void 0 ? defaultConfig.refreshRate : _config$refreshRate,
       resizeDetectorStrategy = _config$resizeDetecto === void 0 ? defaultConfig.resizeDetectorStrategy : _config$resizeDetecto;
-  invariant(monitorWidth || monitorHeight || monitorPosition, 'You have to monitor at least one of the width, height, or position when using "sizeMe"');
-  invariant(refreshRate >= 16, "It is highly recommended that you don't put your refreshRate lower than " + '16 as this may cause layout thrashing.');
-  invariant(refreshMode === 'throttle' || refreshMode === 'debounce', 'The refreshMode should have a value of "throttle" or "debounce"');
+  invariant__default['default'](monitorWidth || monitorHeight, 'You have to monitor at least one of the width or height when using "sizeMe"');
+  invariant__default['default'](refreshRate >= 16, "It is highly recommended that you don't put your refreshRate lower than " + '16 as this may cause layout thrashing.');
+  invariant__default['default'](refreshMode === 'throttle' || refreshMode === 'debounce', 'The refreshMode should have a value of "throttle" or "debounce"');
   var refreshDelayStrategy = refreshMode === 'throttle' ? throttleDebounce.throttle : throttleDebounce.debounce;
@@ -361,10 +395,8 @@ return function WrapComponent(WrappedComponent) {
 
-    var SizeAwareComponent =
-    /*#__PURE__*/
-    function (_React$Component) {
+    var SizeAwareComponent = /*#__PURE__*/function (_React$Component) {
       _inherits(SizeAwareComponent, _React$Component);
 
+      var _super2 = _createSuper(SizeAwareComponent);
+
       function SizeAwareComponent() {
-        var _getPrototypeOf2;
-
         var _this;
@@ -378,3 +410,3 @@
 
-        _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SizeAwareComponent)).call.apply(_getPrototypeOf2, [this].concat(args)));
+        _this = _super2.call.apply(_super2, [this].concat(args));
 
@@ -385,4 +417,3 @@ _defineProperty(_assertThisInitialized(_this), "domEl", null);
           width: undefined,
-          height: undefined,
-          position: undefined
+          height: undefined
         });
@@ -436,5 +467,3 @@
           var n = next;
-          var cp = c.position || {};
-          var np = n.position || {};
-          return monitorWidth && c.width !== n.width || monitorHeight && c.height !== n.height || monitorPosition && (cp.top !== np.top || cp.left !== np.left || cp.bottom !== np.bottom || cp.right !== np.right);
+          return monitorWidth && c.width !== n.width || monitorHeight && c.height !== n.height;
         });
@@ -445,17 +474,7 @@
               width = _el$getBoundingClient.width,
-              height = _el$getBoundingClient.height,
-              right = _el$getBoundingClient.right,
-              left = _el$getBoundingClient.left,
-              top = _el$getBoundingClient.top,
-              bottom = _el$getBoundingClient.bottom;
+              height = _el$getBoundingClient.height;
 
           var next = {
             width: monitorWidth ? width : null,
-            height: monitorHeight ? height : null,
-            position: monitorPosition ? {
-              right: right,
-              left: left,
-              top: top,
-              bottom: bottom
-            } : null
+            height: monitorHeight ? height : null
           };
@@ -502,3 +521,3 @@
         value: function handleDOMNode() {
-          var found = this.element && ReactDOM.findDOMNode(this.element);
+          var found = this.element && ReactDOM__default['default'].findDOMNode(this.element);
 
@@ -519,3 +538,3 @@ if (!found) {
             this.detector.listenTo(this.domEl, this.checkIfSizeChanged);
-          }
+          } else ;
         }
@@ -529,3 +548,3 @@ }, {
 
-          return React__default.createElement(SizeMeRenderWrapper, _extends({
+          return /*#__PURE__*/React__default['default'].createElement(SizeMeRenderWrapper, _extends({
             explicitRef: this.refCallback,
@@ -539,3 +558,3 @@ size: this.strategy === 'callback' ? null : size,
       return SizeAwareComponent;
-    }(React__default.Component);
+    }(React__default['default'].Component);
 
@@ -568,7 +587,7 @@ _defineProperty(SizeAwareComponent, "displayName", "SizeMe(".concat(getDisplayName(WrappedComponent), ")"));
 
-var SizeMe =
-/*#__PURE__*/
-function (_Component) {
+var SizeMe = /*#__PURE__*/function (_Component) {
   _inherits(SizeMe, _Component);
 
+  var _super = _createSuper(SizeMe);
+
   function SizeMe(props) {
@@ -579,3 +598,3 @@ var _this;
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(SizeMe).call(this, props));
+    _this = _super.call(this, props);
 
@@ -595,5 +614,5 @@ _defineProperty(_assertThisInitialized(_this), "createComponent", function (config) {
 
-    var _children = props.children,
-        render = props.render,
-        sizeMeConfig = _objectWithoutProperties(props, ["children", "render"]);
+    props.children;
+        props.render;
+        var sizeMeConfig = _objectWithoutProperties(props, ["children", "render"]);
 
@@ -614,12 +633,12 @@ _this.createComponent(sizeMeConfig);
     value: function componentDidUpdate(prevProps) {
-      var _this$props = this.props,
-          prevChildren = _this$props.children,
-          prevRender = _this$props.render,
-          currentSizeMeConfig = _objectWithoutProperties(_this$props, ["children", "render"]);
+      var _this$props = this.props;
+          _this$props.children;
+          _this$props.render;
+          var currentSizeMeConfig = _objectWithoutProperties(_this$props, ["children", "render"]);
 
-      var nextChildren = prevProps.children,
-          nextRender = prevProps.render,
-          prevSizeMeConfig = _objectWithoutProperties(prevProps, ["children", "render"]);
+      prevProps.children;
+          prevProps.render;
+          var prevSizeMeConfig = _objectWithoutProperties(prevProps, ["children", "render"]);
 
-      if (!isShallowEqual(currentSizeMeConfig, prevSizeMeConfig)) {
+      if (!isShallowEqual__default['default'](currentSizeMeConfig, prevSizeMeConfig)) {
         this.createComponent(currentSizeMeConfig);
@@ -633,3 +652,3 @@ }
       var render = this.props.children || this.props.render;
-      return React__default.createElement(SizeAware, {
+      return /*#__PURE__*/React__default['default'].createElement(SizeAware, {
         onSize: this.onSize
@@ -636,0 +655,0 @@ }, render({

dist/react-sizeme.min.js

@@ -1,2 +0,2 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React),ReactDOM=_interopDefault(require("react-dom")),invariant=_interopDefault(require("invariant")),throttleDebounce=require("throttle-debounce"),createResizeDetector=_interopDefault(require("element-resize-detector")),isShallowEqual=_interopDefault(require("shallowequal"));function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e}).apply(this,arguments)}function ownKeys(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,i)}return r}function _objectSpread2(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(r),!0).forEach(function(e){_defineProperty(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_setPrototypeOf(e,t)}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var r,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)r=o[i],0<=t.indexOf(r)||(n[r]=e[r]);return n}function _objectWithoutProperties(e,t){if(null==e)return{};var r,i,n=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)r=o[i],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _possibleConstructorReturn(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?_assertThisInitialized(e):t}var instances={};function resizeDetector(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"scroll";return instances[e]||(instances[e]=createResizeDetector({strategy:e})),instances[e]}var errMsg="react-sizeme: an error occurred whilst stopping to listen to node size changes",defaultConfig={monitorWidth:!0,monitorHeight:!1,monitorPosition:!1,refreshRate:16,refreshMode:"throttle",noPlaceholder:!1,resizeDetectorStrategy:"scroll"};function getDisplayName(e){return e.displayName||e.name||"Component"}var ReferenceWrapper=function(){function e(){return _classCallCheck(this,e),_possibleConstructorReturn(this,_getPrototypeOf(e).apply(this,arguments))}return _inherits(e,React.Component),_createClass(e,[{key:"render",value:function(){return React.Children.only(this.props.children)}}]),e}();function Placeholder(e){var t=e.className,r=e.style,i={};return t||r?(t&&(i.className=t),r&&(i.style=r)):i.style={width:"100%",height:"100%"},React__default.createElement("div",i)}_defineProperty(ReferenceWrapper,"displayName","SizeMeReferenceWrapper"),Placeholder.displayName="SizeMePlaceholder";var renderWrapper=function(h){function e(e){var t=e.explicitRef,r=e.className,i=e.style,n=e.size,o=e.disablePlaceholder,a=(e.onSize,_objectWithoutProperties(e,["explicitRef","className","style","size","disablePlaceholder","onSize"])),s=(null==n||null==n.width&&null==n.height&&null==n.position)&&!o,l={className:r,style:i};null!=n&&(l.size=n);var c=s?React__default.createElement(Placeholder,{className:r,style:i}):React__default.createElement(h,_extends({},l,a));return React__default.createElement(ReferenceWrapper,{ref:t},c)}return e.displayName="SizeMeRenderer(".concat(getDisplayName(h),")"),e};function withSize(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultConfig,t=e.monitorWidth,h=void 0===t?defaultConfig.monitorWidth:t,r=e.monitorHeight,u=void 0===r?defaultConfig.monitorHeight:r,i=e.monitorPosition,d=void 0===i?defaultConfig.monitorPosition:i,n=e.refreshRate,o=void 0===n?defaultConfig.refreshRate:n,a=e.refreshMode,s=void 0===a?defaultConfig.refreshMode:a,l=e.noPlaceholder,c=void 0===l?defaultConfig.noPlaceholder:l,f=e.resizeDetectorStrategy,p=void 0===f?defaultConfig.resizeDetectorStrategy:f;invariant(h||u||d,'You have to monitor at least one of the width, height, or position when using "sizeMe"'),invariant(16<=o,"It is highly recommended that you don't put your refreshRate lower than 16 as this may cause layout thrashing."),invariant("throttle"===s||"debounce"===s,'The refreshMode should have a value of "throttle" or "debounce"');var y="throttle"===s?throttleDebounce.throttle:throttleDebounce.debounce;return function(e){var r=renderWrapper(e),t=function(){function n(){var e,c;_classCallCheck(this,n);for(var t=arguments.length,r=new Array(t),i=0;i<t;i++)r[i]=arguments[i];return _defineProperty(_assertThisInitialized(c=_possibleConstructorReturn(this,(e=_getPrototypeOf(n)).call.apply(e,[this].concat(r)))),"domEl",null),_defineProperty(_assertThisInitialized(c),"state",{width:void 0,height:void 0,position:void 0}),_defineProperty(_assertThisInitialized(c),"uninstall",function(){if(c.domEl){try{c.detector.uninstall(c.domEl)}catch(e){console.warn(errMsg)}c.domEl=null}}),_defineProperty(_assertThisInitialized(c),"determineStrategy",function(e){e.onSize?(c.callbackState||(c.callbackState=_objectSpread2({},c.state)),c.strategy="callback"):c.strategy="render"}),_defineProperty(_assertThisInitialized(c),"strategisedSetState",function(e){"callback"===c.strategy&&(c.callbackState=e,c.props.onSize(e)),c.setState(e)}),_defineProperty(_assertThisInitialized(c),"strategisedGetState",function(){return"callback"===c.strategy?c.callbackState:c.state}),_defineProperty(_assertThisInitialized(c),"refCallback",function(e){c.element=e}),_defineProperty(_assertThisInitialized(c),"hasSizeChanged",function(e,t){var r=e.position||{},i=t.position||{};return h&&e.width!==t.width||u&&e.height!==t.height||d&&(r.top!==i.top||r.left!==i.left||r.bottom!==i.bottom||r.right!==i.right)}),_defineProperty(_assertThisInitialized(c),"checkIfSizeChanged",y(o,function(e){var t=e.getBoundingClientRect(),r=t.width,i=t.height,n=t.right,o=t.left,a=t.top,s=t.bottom,l={width:h?r:null,height:u?i:null,position:d?{right:n,left:o,top:a,bottom:s}:null};c.hasSizeChanged(c.strategisedGetState(),l)&&c.strategisedSetState(l)})),c}return _inherits(n,React__default.Component),_createClass(n,[{key:"componentDidMount",value:function(){this.detector=resizeDetector(p),this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentDidUpdate",value:function(){this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentWillUnmount",value:function(){this.hasSizeChanged=function(){},this.checkIfSizeChanged=function(){},this.uninstall()}},{key:"handleDOMNode",value:function(){var e=this.element&&ReactDOM.findDOMNode(this.element);e?this.domEl?(this.domEl.isSameNode&&!this.domEl.isSameNode(e)||this.domEl!==e)&&(this.uninstall(),this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):(this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):this.uninstall()}},{key:"render",value:function(){var e=withSize.enableSSRBehaviour||withSize.noPlaceholders||c||"callback"===this.strategy,t=_objectSpread2({},this.state);return React__default.createElement(r,_extends({explicitRef:this.refCallback,size:"callback"===this.strategy?null:t,disablePlaceholder:e},this.props))}}]),n}();return _defineProperty(t,"displayName","SizeMe(".concat(getDisplayName(e),")")),t.WrappedComponent=e,t}}withSize.enableSSRBehaviour=!1,withSize.noPlaceholders=!1;var SizeMe=function(){function i(e){var t;_classCallCheck(this,i),_defineProperty(_assertThisInitialized(t=_possibleConstructorReturn(this,_getPrototypeOf(i).call(this,e))),"createComponent",function(e){t.SizeAware=withSize(e)(function(e){return e.children})}),_defineProperty(_assertThisInitialized(t),"onSize",function(e){return t.setState({size:e})});e.children,e.render;var r=_objectWithoutProperties(e,["children","render"]);return t.createComponent(r),t.state={size:{width:void 0,height:void 0}},t}return _inherits(i,React.Component),_createClass(i,[{key:"componentDidUpdate",value:function(e){var t=this.props,r=(t.children,t.render,_objectWithoutProperties(t,["children","render"])),i=(e.children,e.render,_objectWithoutProperties(e,["children","render"]));isShallowEqual(r,i)||this.createComponent(r)}},{key:"render",value:function(){var e=this.SizeAware,t=this.props.children||this.props.render;return React__default.createElement(e,{onSize:this.onSize},t({size:this.state.size}))}}]),i}();_defineProperty(SizeMe,"defaultProps",{children:void 0,render:void 0}),withSize.SizeMe=SizeMe,withSize.withSize=withSize,module.exports=withSize;
+"use strict";var React=require("react"),ReactDOM=require("react-dom"),invariant=require("invariant"),throttleDebounce=require("throttle-debounce"),createResizeDetector=require("element-resize-detector"),isShallowEqual=require("shallowequal");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React),ReactDOM__default=_interopDefaultLegacy(ReactDOM),invariant__default=_interopDefaultLegacy(invariant),createResizeDetector__default=_interopDefaultLegacy(createResizeDetector),isShallowEqual__default=_interopDefaultLegacy(isShallowEqual);function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r,i=arguments[t];for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e}).apply(this,arguments)}function ownKeys(t,e){var r,i=Object.keys(t);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(t),e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),i.push.apply(i,r)),i}function _objectSpread2(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(r),!0).forEach(function(e){_defineProperty(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_setPrototypeOf(e,t)}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(e){return!1}}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};for(var r,i={},n=Object.keys(e),o=0;o<n.length;o++)r=n[o],0<=t.indexOf(r)||(i[r]=e[r]);return i}function _objectWithoutProperties(e,t){if(null==e)return{};var r,i=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols)for(var n=Object.getOwnPropertySymbols(e),o=0;o<n.length;o++)r=n[o],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r]);return i}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _possibleConstructorReturn(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?_assertThisInitialized(e):t}function _createSuper(r){var i=_isNativeReflectConstruct();return function(){var e,t=_getPrototypeOf(r);return _possibleConstructorReturn(this,i?(e=_getPrototypeOf(this).constructor,Reflect.construct(t,arguments,e)):t.apply(this,arguments))}}var instances={};function resizeDetector(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"scroll";return instances[e]||(instances[e]=createResizeDetector__default.default({strategy:e})),instances[e]}var errMsg="react-sizeme: an error occurred whilst stopping to listen to node size changes",defaultConfig={monitorWidth:!0,monitorHeight:!1,refreshRate:16,refreshMode:"throttle",noPlaceholder:!1,resizeDetectorStrategy:"scroll"};function getDisplayName(e){return e.displayName||e.name||"Component"}var ReferenceWrapper=function(){_inherits(t,React.Component);var e=_createSuper(t);function t(){return _classCallCheck(this,t),e.apply(this,arguments)}return _createClass(t,[{key:"render",value:function(){return React.Children.only(this.props.children)}}]),t}();function Placeholder(e){var t=e.className,r=e.style,e={};return t||r?(t&&(e.className=t),r&&(e.style=r)):e.style={width:"100%",height:"100%"},React__default.default.createElement("div",e)}_defineProperty(ReferenceWrapper,"displayName","SizeMeReferenceWrapper"),Placeholder.displayName="SizeMePlaceholder";var renderWrapper=function(l){function e(e){var t=e.explicitRef,r=e.className,i=e.style,n=e.size,o=e.disablePlaceholder;e.onSize;var a=_objectWithoutProperties(e,["explicitRef","className","style","size","disablePlaceholder","onSize"]),e=(null==n||null==n.width&&null==n.height)&&!o,o={className:r,style:i};null!=n&&(o.size=n);a=e?React__default.default.createElement(Placeholder,{className:r,style:i}):React__default.default.createElement(l,_extends({},o,a));return React__default.default.createElement(ReferenceWrapper,{ref:t},a)}return e.displayName="SizeMeRenderer(".concat(getDisplayName(l),")"),e};function withSize(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultConfig,t=e.monitorWidth,a=void 0===t?defaultConfig.monitorWidth:t,r=e.monitorHeight,l=void 0===r?defaultConfig.monitorHeight:r,t=e.refreshRate,s=void 0===t?defaultConfig.refreshRate:t,r=e.refreshMode,t=void 0===r?defaultConfig.refreshMode:r,r=e.noPlaceholder,i=void 0===r?defaultConfig.noPlaceholder:r,e=e.resizeDetectorStrategy,c=void 0===e?defaultConfig.resizeDetectorStrategy:e;invariant__default.default(a||l,'You have to monitor at least one of the width or height when using "sizeMe"'),invariant__default.default(16<=s,"It is highly recommended that you don't put your refreshRate lower than 16 as this may cause layout thrashing."),invariant__default.default("throttle"===t||"debounce"===t,'The refreshMode should have a value of "throttle" or "debounce"');var u="throttle"===t?throttleDebounce.throttle:throttleDebounce.debounce;return function(e){var r=renderWrapper(e),t=function(){_inherits(o,React__default["default"].Component);var n=_createSuper(o);function o(){var r;_classCallCheck(this,o);for(var e=arguments.length,t=new Array(e),i=0;i<e;i++)t[i]=arguments[i];return _defineProperty(_assertThisInitialized(r=n.call.apply(n,[this].concat(t))),"domEl",null),_defineProperty(_assertThisInitialized(r),"state",{width:void 0,height:void 0}),_defineProperty(_assertThisInitialized(r),"uninstall",function(){if(r.domEl){try{r.detector.uninstall(r.domEl)}catch(e){console.warn(errMsg)}r.domEl=null}}),_defineProperty(_assertThisInitialized(r),"determineStrategy",function(e){e.onSize?(r.callbackState||(r.callbackState=_objectSpread2({},r.state)),r.strategy="callback"):r.strategy="render"}),_defineProperty(_assertThisInitialized(r),"strategisedSetState",function(e){"callback"===r.strategy&&(r.callbackState=e,r.props.onSize(e)),r.setState(e)}),_defineProperty(_assertThisInitialized(r),"strategisedGetState",function(){return"callback"===r.strategy?r.callbackState:r.state}),_defineProperty(_assertThisInitialized(r),"refCallback",function(e){r.element=e}),_defineProperty(_assertThisInitialized(r),"hasSizeChanged",function(e,t){return a&&e.width!==t.width||l&&e.height!==t.height}),_defineProperty(_assertThisInitialized(r),"checkIfSizeChanged",u(s,function(e){var t=e.getBoundingClientRect(),e=t.width,t=t.height,t={width:a?e:null,height:l?t:null};r.hasSizeChanged(r.strategisedGetState(),t)&&r.strategisedSetState(t)})),r}return _createClass(o,[{key:"componentDidMount",value:function(){this.detector=resizeDetector(c),this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentDidUpdate",value:function(){this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentWillUnmount",value:function(){this.hasSizeChanged=function(){},this.checkIfSizeChanged=function(){},this.uninstall()}},{key:"handleDOMNode",value:function(){var e=this.element&&ReactDOM__default.default.findDOMNode(this.element);e?this.domEl?(this.domEl.isSameNode&&!this.domEl.isSameNode(e)||this.domEl!==e)&&(this.uninstall(),this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):(this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):this.uninstall()}},{key:"render",value:function(){var e=withSize.enableSSRBehaviour||withSize.noPlaceholders||i||"callback"===this.strategy,t=_objectSpread2({},this.state);return React__default.default.createElement(r,_extends({explicitRef:this.refCallback,size:"callback"===this.strategy?null:t,disablePlaceholder:e},this.props))}}]),o}();return _defineProperty(t,"displayName","SizeMe(".concat(getDisplayName(e),")")),t.WrappedComponent=e,t}}withSize.enableSSRBehaviour=!1,withSize.noPlaceholders=!1;var SizeMe=function(){_inherits(i,React.Component);var r=_createSuper(i);function i(e){var t;_classCallCheck(this,i),_defineProperty(_assertThisInitialized(t=r.call(this,e)),"createComponent",function(e){t.SizeAware=withSize(e)(function(e){return e.children})}),_defineProperty(_assertThisInitialized(t),"onSize",function(e){return t.setState({size:e})}),e.children,e.render;e=_objectWithoutProperties(e,["children","render"]);return t.createComponent(e),t.state={size:{width:void 0,height:void 0}},t}return _createClass(i,[{key:"componentDidUpdate",value:function(e){var t=this.props;t.children,t.render;t=_objectWithoutProperties(t,["children","render"]);e.children,e.render;e=_objectWithoutProperties(e,["children","render"]);isShallowEqual__default.default(t,e)||this.createComponent(t)}},{key:"render",value:function(){var e=this.SizeAware,t=this.props.children||this.props.render;return React__default.default.createElement(e,{onSize:this.onSize},t({size:this.state.size}))}}]),i}();_defineProperty(SizeMe,"defaultProps",{children:void 0,render:void 0}),withSize.SizeMe=SizeMe,withSize.withSize=withSize,module.exports=withSize;
 //# sourceMappingURL=react-sizeme.min.js.map

package.json

 {
   "name": "react-sizeme",
-  "version": "2.6.12",
+  "version": "3.0.0",
   "description": "Make your React Components aware of their width and/or height!",
@@ -32,59 +32,56 @@ "license": "MIT",
   },
-  "resolutions": {
-    "@types/react": "16.9.17"
-  },
   "dependencies": {
-    "element-resize-detector": "^1.2.1",
+    "element-resize-detector": "^1.2.2",
     "invariant": "^2.2.4",
     "shallowequal": "^1.1.0",
-    "throttle-debounce": "^2.1.0"
+    "throttle-debounce": "^3.0.1"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0"
+    "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.3",
-    "@babel/core": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/polyfill": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/register": "^7.8.3",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
+    "@babel/cli": "^7.13.0",
+    "@babel/core": "^7.13.1",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.13.5",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/register": "^7.13.0",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
     "app-root-dir": "1.0.2",
-    "babel-eslint": "10.0.3",
-    "babel-jest": "^24.9.0",
-    "codecov": "^3.6.1",
-    "cross-env": "^6.0.3",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "codecov": "^3.8.1",
+    "cross-env": "^7.0.3",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "enzyme-to-json": "^3.4.3",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.9.0",
-    "eslint-plugin-import": "^2.20.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "gzip-size": "^5.1.1",
-    "husky": "^4.0.10",
-    "in-publish": "2.0.0",
-    "jest": "^24.9.0",
-    "lint-staged": "^9.5.0",
-    "prettier": "^1.19.1",
-    "pretty-bytes": "5.3.0",
-    "ramda": "^0.26.1",
-    "react": "^16.12.0",
+    "enzyme-to-json": "^3.6.1",
+    "eslint": "^7.20.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "gzip-size": "^6.0.0",
+    "husky": "^4.3.8",
+    "in-publish": "^2.0.1",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.2.1",
+    "pretty-bytes": "5.6.0",
+    "ramda": "^0.27.1",
+    "react": "^17.0.1",
     "react-addons-test-utils": "^15.6.0",
-    "react-dom": "^16.12.0",
-    "react-test-renderer": "^16.12.0",
+    "react-dom": "^17.0.1",
+    "react-test-renderer": "^17.0.1",
     "readline-sync": "1.4.10",
-    "rimraf": "^3.0.0",
-    "rollup": "^1.29.0",
-    "rollup-plugin-babel": "^4.3.3",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.40.0",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-uglify": "^6.0.4",
-    "title-case": "^3.0.2",
-    "typescript": "^3.7.4",
+    "title-case": "^3.0.3",
+    "typescript": "^4.2.2",
     "typings-tester": "^0.3.2"
@@ -152,4 +149,3 @@ },
     "*.js": [
-      "prettier --write \"src/**/*.js\"",
-      "git add"
+      "prettier --write \"src/**/*.js\""
     ]
@@ -156,0 +152,0 @@ },

react-sizeme.d.ts

@@ -17,3 +17,2 @@ /* eslint-disable */
     monitorHeight?: boolean
-    monitorPosition?: boolean
     monitorWidth?: boolean
@@ -23,2 +22,3 @@ noPlaceholder?: boolean
     refreshRate?: number
+    resizeDetectorStrategy?: 'scroll' | 'object'
   }
@@ -25,0 +25,0 @@

README.md

@@ -15,8 +15,8 @@ <p>&nbsp;</p>
 
-- Blazingly fast. 😛
-- Responsive Components!
+- Hyper Responsive Components!
+- Performant.
 - Easy to use.
 - Extensive browser support.
-- Supports any Component type, i.e. stateless/class.
-- Really small bundle size.
+- Supports functional and class Component types.
+- Tiny bundle size.
 
@@ -192,3 +192,3 @@ Use it via the render prop pattern (supports `children` or `render` prop):
 ```javascript
-import sizeMe from 'react-sizeme'
+import { withSize } from 'react-sizeme'
 
@@ -207,3 +207,3 @@ class MyComponent extends Component {
 
-export default sizeMe({ monitorHeight: true })(MyComponent)
+export default withSize({ monitorHeight: true })(MyComponent)
 ```
@@ -222,3 +222,3 @@
 ```jsx
-import sizeMe from 'react-sizeme'
+import { withSize } from 'react-sizeme'
 
@@ -229,3 +229,3 @@ function MyComponent({ message }) {
 
-export default sizeMe()(MyComponent)
+export default withSize()(MyComponent)
 ```
@@ -237,3 +237,3 @@
 class ParentComponent extends React.Component {
-  onSize = size => {
+  onSize = (size) => {
     console.log('MyComponent has a width of', size.width)
@@ -273,23 +273,23 @@ }
 ```javascript
-import React from 'react';
-import LargeChildComponent from './LargeChildComponent';
-import SmallChildComponent from './SmallChildComponent';
-import sizeMe from 'react-sizeme';
+import React from 'react'
+import LargeChildComponent from './LargeChildComponent'
+import SmallChildComponent from './SmallChildComponent'
+import sizeMe from 'react-sizeme'
 
 function MyComponent(props) {
-  const { width, height } = props.size;
+  const { width, height } = props.size
 
-  const ToRenderChild = height > 600
-    ? LargeChildComponent
-    : SmallChildComponent;
+  const ToRenderChild = height > 600 ? LargeChildComponent : SmallChildComponent
 
   return (
     <div>
-      <h1>My size is {width}x{height}</div>
+      <h1>
+        My size is {width}x{height}
+      </div>
       <ToRenderChild />
     </div>
-  );
+  )
 }
 
-export default sizeMe({ monitorHeight: true })(MyComponent);
+export default sizeMe({ monitorHeight: true })(MyComponent)
 ```
@@ -309,3 +309,3 @@
 
-To avoid the rendering of placeholders in this context you can make use of the `noPlaceholders` global configuration value. Setting this flag will disables any placeholder rendering. Instead your wrapped component will be rendered directly - however it's initial render will contain no values within the `size` prop (i.e. `width`, `height`, and `position` will be `null`).
+To avoid the rendering of placeholders in this context you can make use of the `noPlaceholders` global configuration value. Setting this flag will disables any placeholder rendering. Instead your wrapped component will be rendered directly - however it's initial render will contain no values within the `size` prop (i.e. `width`, and `height` will be `null`).
 
@@ -331,3 +331,3 @@ ```javascript
 
-We make use of the awesome [element-resize-detector](https://github.com/wnr/element-resize-detector) library. This library makes use of an scroll/object based event strategy which outperforms window resize event listening dramatically. The original idea for this approach comes from another library, namely [css-element-queries](https://github.com/marcj/css-element-queries) by Marc J. Schmidt. I recommend looking into these libraries for history, specifics, and more examples. I love them for the work they did, whithout which this library would not be possible. :sparkle-heart:
+We make use of the awesome [element-resize-detector](https://github.com/wnr/element-resize-detector) library. This library makes use of an scroll/object based event strategy which outperforms window resize event listening dramatically. The original idea for this approach comes from another library, namely [css-element-queries](https://github.com/marcj/css-element-queries) by Marc J. Schmidt. I recommend looking into these libraries for history, specifics, and more examples. I love them for the work they did, whithout which this library would not be possible. :sparkling_heart:
 
@@ -340,6 +340,6 @@ <p>&nbsp;</p>
 
-Thank goes to all our backers! [[Become a backer](https://opencollective.com/react-sizeme#backer)].
+Thank goes to all our backers! [[Become a backer](https://opencollective.com/controlplusb#backer)].
 
-<a href="https://opencollective.com/react-sizeme#backers">
-    <img src="https://opencollective.com/react-sizeme/backers.svg?width=950" />
+<a href="https://opencollective.com/controlplusb#backers">
+    <img src="https://opencollective.com/controlplusb/backers.svg?width=950" />
 </a>

rollup.config.js

@@ -23,2 +23,3 @@ const babel = require('rollup-plugin-babel')
     name: titleCase(packageJson.name.replace(/-/g, ' ')).replace(/ /g, ''),
+    exports: 'auto',
   },
@@ -25,0 +26,0 @@ plugins: [

No alert changes

Improved metrics

Number of package files

12

increased by9.09%

Lines of code

665

increased by1.84%

Worsened metrics

Total package byte prevSize

88196

decreased by-1.56%

Dependency changes

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedscheduler@0.20.2(transitive)

• + Addedthrottle-debounce@3.0.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedscheduler@0.19.1(transitive)

• - Removedthrottle-debounce@2.3.0(transitive)

• Updatedelement-resize-detector@^1.2.2

• Updatedthrottle-debounce@^3.0.1