react-grid-layout 1.2.0 → 1.2.4

package/build/ReactGridLayout.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
 var _lodash = _interopRequireDefault(require("lodash.isequal"));
 
@@ -21,7 +23,17 @@ var _ReactGridLayoutPropTypes = _interopRequireDefault(require("./ReactGridLayou
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -55,7 +67,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -109,13 +121,14 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "dragEnterCounter", 0);
 
-    _defineProperty(_assertThisInitialized(_this), "onDragOver", function (e
-    /*: DragOverEvent*/
-    ) {
+    _defineProperty(_assertThisInitialized(_this), "onDragOver", function (e) {
+      var _e$nativeEvent$target;
+
       // we should ignore events from layout's children in Firefox
       // to avoid unpredictable jumping of a dropping placeholder
       // FIXME remove this hack
-      if (isFirefox && e.nativeEvent.target.className.indexOf(layoutClassName) === -1) {
+      if (isFirefox && // $FlowIgnore can't figure this out
+      !((_e$nativeEvent$target = e.nativeEvent.target) !== null && _e$nativeEvent$target !== void 0 && _e$nativeEvent$target.classList.contains(layoutClassName))) {
         // without this Firefox will not allow drop if currently over droppingItem
         e.preventDefault();
         return false;
@@ -154,7 +167,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         var calculatedPosition = (0, _calculateUtils.calcXY)(positionParams, layerY, layerX, droppingItem.w, droppingItem.h);
 
         _this.setState({
-          droppingDOMNode: /*#__PURE__*/_react.default.createElement("div", {
+          droppingDOMNode: /*#__PURE__*/React.createElement("div", {
             key: droppingItem.i
           }),
           droppingPosition: droppingPosition,
@@ -251,7 +264,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: Props*/
     , nextState
     /*: State*/
-    ) {
+    )
+    /*: boolean*/
+    {
       return (// NOTE: this is almost always unequal. Therefore the only way to get better performance
         // from SCU is if the user intentionally memoizes children. If they do, and they can
         // handle changes properly, performance will increase.
@@ -278,7 +293,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
   }, {
     key: "containerHeight",
-    value: function containerHeight() {
+    value: function containerHeight()
+    /*: ?string*/
+    {
       if (!this.props.autoSize) return;
       var nbRow = (0, _utils.bottom)(this.state.layout);
       var containerPaddingY = this.props.containerPadding ? this.props.containerPadding[1] : this.props.margin[1];
@@ -301,7 +318,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: number*/
     , y
     /*: number*/
-    , _ref) {
+    , _ref)
+    /*: void*/
+    {
       var e = _ref.e,
           node = _ref.node;
       var layout = this.state.layout;
@@ -330,7 +349,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: number*/
     , y
     /*: number*/
-    , _ref2) {
+    , _ref2)
+    /*: void*/
+    {
       var e = _ref2.e,
           node = _ref2.node;
       var oldDragItem = this.state.oldDragItem;
@@ -373,7 +394,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: number*/
     , y
     /*: number*/
-    , _ref3) {
+    , _ref3)
+    /*: void*/
+    {
       var e = _ref3.e,
           node = _ref3.node;
       if (!this.state.activeDrag) return;
@@ -449,42 +472,48 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       var _this$props4 = this.props,
           cols = _this$props4.cols,
           preventCollision = _this$props4.preventCollision;
-      var l
-      /*: ?LayoutItem*/
-      = (0, _utils.getLayoutItem)(layout, i);
-      if (!l) return; // Something like quad tree should be used
-      // to find collisions faster
-
-      var hasCollisions;
-
-      if (preventCollision) {
-        var collisions = (0, _utils.getAllCollisions)(layout, _objectSpread(_objectSpread({}, l), {}, {
-          w: w,
-          h: h
-        })).filter(function (layoutItem) {
-          return layoutItem.i !== l.i;
-        });
-        hasCollisions = collisions.length > 0; // If we're colliding, we need adjust the placeholder.
-
-        if (hasCollisions) {
-          // adjust w && h to maximum allowed space
-          var leastX = Infinity,
-              leastY = Infinity;
-          collisions.forEach(function (layoutItem) {
-            if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
-            if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
+
+      var _withLayoutItem = (0, _utils.withLayoutItem)(layout, i, function (l) {
+        // Something like quad tree should be used
+        // to find collisions faster
+        var hasCollisions;
+
+        if (preventCollision) {
+          var collisions = (0, _utils.getAllCollisions)(layout, _objectSpread(_objectSpread({}, l), {}, {
+            w: w,
+            h: h
+          })).filter(function (layoutItem) {
+            return layoutItem.i !== l.i;
           });
-          if (Number.isFinite(leastX)) l.w = leastX - l.x;
-          if (Number.isFinite(leastY)) l.h = leastY - l.y;
+          hasCollisions = collisions.length > 0; // If we're colliding, we need adjust the placeholder.
+
+          if (hasCollisions) {
+            // adjust w && h to maximum allowed space
+            var leastX = Infinity,
+                leastY = Infinity;
+            collisions.forEach(function (layoutItem) {
+              if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
+              if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
+            });
+            if (Number.isFinite(leastX)) l.w = leastX - l.x;
+            if (Number.isFinite(leastY)) l.h = leastY - l.y;
+          }
         }
-      }
 
-      if (!hasCollisions) {
-        // Set new width and height.
-        l.w = w;
-        l.h = h;
-      } // Create placeholder element (display only)
+        if (!hasCollisions) {
+          // Set new width and height.
+          l.w = w;
+          l.h = h;
+        }
+
+        return l;
+      }),
+          _withLayoutItem2 = _slicedToArray(_withLayoutItem, 2),
+          newLayout = _withLayoutItem2[0],
+          l = _withLayoutItem2[1]; // Shouldn't ever happen, but typechecking makes it necessary
+
 
+      if (!l) return; // Create placeholder element (display only)
 
       var placeholder = {
         w: l.w,
@@ -494,10 +523,10 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         static: true,
         i: i
       };
-      this.props.onResize(layout, oldResizeItem, l, placeholder, e, node); // Re-compact the layout and set the drag placeholder.
+      this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node); // Re-compact the newLayout and set the drag placeholder.
 
       this.setState({
-        layout: (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols),
+        layout: (0, _utils.compact)(newLayout, (0, _utils.compactType)(this.props), cols),
         activeDrag: placeholder
       });
     }
@@ -551,7 +580,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
           useCSSTransforms = _this$props5.useCSSTransforms,
           transformScale = _this$props5.transformScale; // {...this.state.activeDrag} is pretty slow, actually
 
-      return /*#__PURE__*/_react.default.createElement(_GridItem.default, {
+      return /*#__PURE__*/React.createElement(_GridItem.default, {
         w: activeDrag.w,
         h: activeDrag.h,
         x: activeDrag.x,
@@ -569,7 +598,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         isBounded: false,
         useCSSTransforms: useCSSTransforms,
         transformScale: transformScale
-      }, /*#__PURE__*/_react.default.createElement("div", null));
+      }, /*#__PURE__*/React.createElement("div", null));
     }
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
@@ -616,7 +645,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       var resizeHandlesOptions = l.resizeHandles || resizeHandles; // isBounded set on child if set on parent, and child is not explicitly false
 
       var bounded = draggable && isBounded && l.isBounded !== false;
-      return /*#__PURE__*/_react.default.createElement(_GridItem.default, {
+      return /*#__PURE__*/React.createElement(_GridItem.default, {
         containerWidth: width,
         cols: cols,
         margin: margin,
@@ -656,7 +685,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
   }, {
     key: "render",
-    value: function render() {
+    value: function render()
+    /*: React.Element<"div">*/
+    {
       var _this2 = this;
 
       var _this$props7 = this.props,
@@ -670,7 +701,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         height: this.containerHeight()
       }, style);
 
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         ref: innerRef,
         className: mergedClassName,
         style: mergedStyle,
@@ -678,7 +709,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         onDragLeave: isDroppable ? this.onDragLeave : _utils.noop,
         onDragEnter: isDroppable ? this.onDragEnter : _utils.noop,
         onDragOver: isDroppable ? this.onDragOver : _utils.noop
-      }, _react.default.Children.map(this.props.children, function (child) {
+      }, React.Children.map(this.props.children, function (child) {
         return _this2.processGridItem(child);
       }), isDroppable && this.state.droppingDOMNode && this.processGridItem(this.state.droppingDOMNode, true), this.placeholder());
     }
@@ -688,7 +719,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: Props*/
     , prevState
     /*: State*/
-    ) {
+    )
+    /*: $Shape<State> | null*/
+    {
       var newLayoutBase;
 
       if (prevState.activeDrag) {
@@ -724,7 +757,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return ReactGridLayout;
-}(_react.default.Component);
+}(React.Component);
 
 exports.default = ReactGridLayout;
 

package/build/ReactGridLayoutPropTypes.js

@@ -21,12 +21,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 'nw' - Northwest handle (top-left)
 // 'se' - Southeast handle (bottom-right)
 // 'ne' - Northeast handle (top-right)
-var resizeHandlesType = _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])); // Custom component for resize handles
+var resizeHandlesType
+/*: ReactPropsChainableTypeChecker*/
+= _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])); // Custom component for resize handles
 
 
 exports.resizeHandlesType = resizeHandlesType;
 
-var resizeHandleType = _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]);
+var resizeHandleType
+/*: ReactPropsChainableTypeChecker*/
+= _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]);
 /*:: export type Props = {|
   className: string,
   style: Object,
@@ -66,6 +70,14 @@ var resizeHandleType = _propTypes.default.oneOfType([_propTypes.default.node, _p
   innerRef?: Ref<"div">
 |};*/
 
+/*:: export type DefaultProps = $Diff<
+  Props,
+  {
+    children: ReactChildrenArray<ReactElement<any>>,
+    width: number
+  }
+>;*/
+
 
 exports.resizeHandleType = resizeHandleType;
 var _default = {
@@ -96,7 +108,9 @@ var _default = {
     }
   },
   // Choose vertical or hotizontal compaction
-  compactType: _propTypes.default.oneOf(["vertical", "horizontal"]),
+  compactType: (_propTypes.default.oneOf(["vertical", "horizontal"])
+  /*: ReactPropsChainableTypeChecker*/
+  ),
   // layout is an array of object with the format:
   // {x: Number, y: Number, w: Number, h: Number, i: String}
   layout: function layout(props
@@ -112,9 +126,13 @@ var _default = {
   // Grid Dimensions
   //
   // Margin between items [x, y] in px
-  margin: _propTypes.default.arrayOf(_propTypes.default.number),
+  margin: (_propTypes.default.arrayOf(_propTypes.default.number)
+  /*: ReactPropsChainableTypeChecker*/
+  ),
   // Padding inside the container [x, y] in px
-  containerPadding: _propTypes.default.arrayOf(_propTypes.default.number),
+  containerPadding: (_propTypes.default.arrayOf(_propTypes.default.number)
+  /*: ReactPropsChainableTypeChecker*/
+  ),
   // Rows have a static height, but you can change this based on breakpoints if you like
   rowHeight: _propTypes.default.number,
   // Default Infinity, but you can specify a max here if you like.
@@ -163,11 +181,13 @@ var _default = {
   //
   // Other validations
   //
-  droppingItem: _propTypes.default.shape({
+  droppingItem: (_propTypes.default.shape({
     i: _propTypes.default.string.isRequired,
     w: _propTypes.default.number.isRequired,
     h: _propTypes.default.number.isRequired
-  }),
+  })
+  /*: ReactPropsChainableTypeChecker*/
+  ),
   // Children must not have duplicate keys.
   children: function children(props
   /*: Props*/

package/build/ResponsiveReactGridLayout.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,8 +25,6 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -51,7 +51,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -78,15 +78,16 @@ function getIndentationValue
 )
 /*: T*/
 {
-  // $FlowIssue doesn't seem to understand this
-  if (param == null) return null;
+  // $FlowIgnore TODO fix this typedef
+  if (param == null) return null; // $FlowIgnore TODO fix this typedef
+
   return Array.isArray(param) ? param : param[breakpoint];
 }
 /*:: type State = {
   layout: Layout,
   breakpoint: string,
   cols: number,
-  layouts?: { [key: string]: Layout }
+  layouts?: ResponsiveLayout<string>
 };*/
 
 /*:: type Props<Breakpoint: string = string> = {|
@@ -104,7 +105,7 @@ function getIndentationValue
 
   // Callbacks
   onBreakpointChange: (Breakpoint, cols: number) => void,
-  onLayoutChange: (Layout, { [key: Breakpoint]: Layout }) => void,
+  onLayoutChange: OnLayoutChangeCallback,
   onWidthChange: (
     containerWidth: number,
     margin: [number, number],
@@ -113,6 +114,20 @@ function getIndentationValue
   ) => void
 |};*/
 
+/*:: type DefaultProps = Pick<
+  Props<>,
+  {|
+    breakpoints: 0,
+    cols: 0,
+    containerPadding: 0,
+    layouts: 0,
+    margin: 0,
+    onBreakpointChange: 0,
+    onLayoutChange: 0,
+    onWidthChange: 0
+  |}
+>;*/
+
 
 var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
   _inherits(ResponsiveReactGridLayout, _React$Component);
@@ -177,12 +192,12 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
   }, {
     key: "onWidthChange",
-
+    value:
     /**
      * When the width changes work through breakpoints and reset state with the new width & breakpoint.
      * Width changes are necessary to figure out the widget widths.
      */
-    value: function onWidthChange(prevProps
+    function onWidthChange(prevProps
     /*: Props<*>*/
     ) {
       var _this$props2 = this.props,
@@ -225,7 +240,9 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "render",
-    value: function render() {
+    value: function render()
+    /*: React.Element<typeof ReactGridLayout>*/
+    {
       /* eslint-disable no-unused-vars */
       var _this$props3 = this.props,
           breakpoint = _this$props3.breakpoint,
@@ -242,6 +259,7 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
 
       return /*#__PURE__*/React.createElement(_ReactGridLayout.default, _extends({}, other, {
+        // $FlowIgnore should allow nullable here due to DefaultProps
         margin: getIndentationValue(margin, this.state.breakpoint),
         containerPadding: getIndentationValue(containerPadding, this.state.breakpoint),
         onLayoutChange: this.onLayoutChange,
@@ -255,7 +273,9 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
     /*: Props<*>*/
     , prevState
     /*: State*/
-    ) {
+    )
+    /*: ?$Shape<State>*/
+    {
       if (!(0, _lodash.default)(nextProps.layouts, prevState.layouts)) {
         // Allow parent to set layouts directly.
         var breakpoint = prevState.breakpoint,
@@ -348,8 +368,6 @@ _defineProperty(ResponsiveReactGridLayout, "defaultProps", {
     xs: 4,
     xxs: 2
   },
-  layouts: {},
-  margin: [10, 10],
   containerPadding: {
     lg: null,
     md: null,
@@ -357,6 +375,8 @@ _defineProperty(ResponsiveReactGridLayout, "defaultProps", {
     xs: null,
     xxs: null
   },
+  layouts: {},
+  margin: [10, 10],
   onBreakpointChange: _utils.noop,
   onLayoutChange: _utils.noop,
   onWidthChange: _utils.noop

package/build/calculateUtils.js

@@ -43,7 +43,9 @@ function calcGridItemWHPx(gridUnits
 /*: number*/
 , marginPx
 /*: number*/
-) {
+)
+/*: number*/
+{
   // 0 * Infinity === NaN, which causes problems with resize contraints
   if (!Number.isFinite(gridUnits)) return gridUnits;
   return Math.round(colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx);
@@ -198,6 +200,8 @@ function clamp(num
 /*: number*/
 , upperBound
 /*: number*/
-) {
+)
+/*: number*/
+{
   return Math.max(Math.min(num, upperBound), lowerBound);
 }

package/build/components/WidthProvider.js

@@ -1,15 +1,17 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = WidthProvider;
+exports.default = WidthProvideRGL;
 
 var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -17,8 +19,6 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -41,30 +41,26 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var layoutClassName = "react-grid-layout";
 /*
  * A simple HOC that provides facility for listening to container resizes.
  *
  * The Flow type is pretty janky here. I can't just spread `WPProps` into this returned object - I wish I could - but it triggers
  * a flow bug of some sort that causes it to stop typechecking.
  */
-function WidthProvider
+
+function WidthProvideRGL
 /*:: <Config>*/
 (ComposedComponent
 /*: React.AbstractComponent<Config>*/
 )
-/*: React.AbstractComponent<{|
-  ...Config,
-  measureBeforeMount?: boolean,
-  className?: string,
-  style?: Object,
-  width?: number
-|}>*/
+/*: React.AbstractComponent<ComposedProps<Config>>*/
 {
   var _class, _temp;
 
@@ -88,17 +84,21 @@ function WidthProvider
         width: 1280
       });
 
+      _defineProperty(_assertThisInitialized(_this), "elementRef", /*#__PURE__*/React.createRef());
+
       _defineProperty(_assertThisInitialized(_this), "mounted", false);
 
       _defineProperty(_assertThisInitialized(_this), "onWindowResize", function () {
-        if (!_this.mounted) return; // eslint-disable-next-line react/no-find-dom-node
-
-        var node = _reactDom.default.findDOMNode(_assertThisInitialized(_this)); // Flow casts this to Text | Element
-
-
-        if (node instanceof HTMLElement) _this.setState({
-          width: node.offsetWidth
-        });
+        if (!_this.mounted) return;
+        var node = _this.elementRef.current; // Flow casts this to Text | Element
+        // fix: grid position error when node or parentNode display is none by window resize
+        // #924 #1084
+
+        if (node instanceof HTMLElement && node.offsetWidth) {
+          _this.setState({
+            width: node.offsetWidth
+          });
+        }
       });
 
       return _this;
@@ -129,12 +129,16 @@ function WidthProvider
 
         if (measureBeforeMount && !this.mounted) {
           return /*#__PURE__*/React.createElement("div", {
-            className: this.props.className,
-            style: this.props.style
+            className: (0, _classnames.default)(this.props.className, layoutClassName),
+            style: this.props.style // $FlowIgnore ref types
+            ,
+            ref: this.elementRef
           });
         }
 
-        return /*#__PURE__*/React.createElement(ComposedComponent, _extends({}, rest, this.state));
+        return /*#__PURE__*/React.createElement(ComposedComponent, _extends({
+          innerRef: this.elementRef
+        }, rest, this.state));
       }
     }]);