react-grid-layout 1.2.3 → 1.3.1

package/build/ReactGridLayoutPropTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.resizeHandleType = exports.resizeHandlesType = void 0;
+exports.resizeHandleType = exports.resizeHandleAxesType = exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,12 +21,12 @@ 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
+var resizeHandleAxesType
 /*: ReactPropsChainableTypeChecker*/
 = _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])); // Custom component for resize handles
 
 
-exports.resizeHandlesType = resizeHandlesType;
+exports.resizeHandleAxesType = resizeHandleAxesType;
 
 var resizeHandleType
 /*: ReactPropsChainableTypeChecker*/
@@ -54,8 +54,9 @@ var resizeHandleType
   useCSSTransforms: boolean,
   transformScale: number,
   droppingItem: $Shape<LayoutItem>,
-  resizeHandles: ResizeHandles,
+  resizeHandles: ResizeHandleAxis[],
   resizeHandle?: ResizeHandle,
+  allowOverlap: boolean,
 
   // Callbacks
   onLayoutChange: Layout => void,
@@ -65,6 +66,7 @@ var resizeHandleType
   onResize: EventCallback,
   onResizeStart: EventCallback,
   onResizeStop: EventCallback,
+  onDropDragOver: (e: DragOverEvent) => ?({| w?: number, h?: number |} | false),
   onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
   children: ReactChildrenArray<ReactElement<any>>,
   innerRef?: Ref<"div">
@@ -147,6 +149,8 @@ var _default = {
   isBounded: _propTypes.default.bool,
   isDraggable: _propTypes.default.bool,
   isResizable: _propTypes.default.bool,
+  // If true, grid can be placed one over the other.
+  allowOverlap: _propTypes.default.bool,
   // If true, grid items won't change position when being dragged over.
   preventCollision: _propTypes.default.bool,
   // Use CSS transforms instead of top/left
@@ -156,7 +160,7 @@ var _default = {
   // If true, an external element can trigger onDrop callback with a specific grid position as a parameter
   isDroppable: _propTypes.default.bool,
   // Resize handle options
-  resizeHandles: resizeHandlesType,
+  resizeHandles: resizeHandleAxesType,
   resizeHandle: resizeHandleType,
   //
   // Callbacks
@@ -199,6 +203,8 @@ var _default = {
     var keys = {};
 
     _react.default.Children.forEach(children, function (child) {
+      if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
+
       if (keys[child.key]) {
         throw new Error('Duplicate child key "' + child.key + '" found! This will cause problems in ReactGridLayout.');
       }

package/build/ResponsiveReactGridLayout.js

@@ -1,6 +1,6 @@
 "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); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -19,11 +19,13 @@ var _responsiveUtils = require("./responsiveUtils");
 
 var _ReactGridLayout = _interopRequireDefault(require("./ReactGridLayout"));
 
+var _excluded = ["breakpoint", "breakpoints", "cols", "layouts", "margin", "containerPadding", "onBreakpointChange", "onLayoutChange", "onWidthChange"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-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 _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _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); }
 
@@ -31,23 +33,23 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 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); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -57,6 +59,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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; }
 
+// $FlowFixMe[method-unbinding]
 var type = function type(obj) {
   return Object.prototype.toString.call(obj);
 };
@@ -117,6 +120,7 @@ function getIndentationValue
 /*:: type DefaultProps = Pick<
   Props<>,
   {|
+    allowOverlap: 0,
     breakpoints: 0,
     cols: 0,
     containerPadding: 0,
@@ -220,7 +224,7 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
         var layout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType); // This adds missing items.
 
-        layout = (0, _utils.synchronizeLayoutWithChildren)(layout, this.props.children, newCols, compactType); // Store the new layout.
+        layout = (0, _utils.synchronizeLayoutWithChildren)(layout, this.props.children, newCols, compactType, this.props.allowOverlap); // Store the new layout.
 
         newLayouts[newBreakpoint] = layout; // callbacks
 
@@ -254,7 +258,7 @@ var ResponsiveReactGridLayout = /*#__PURE__*/function (_React$Component) {
           onBreakpointChange = _this$props3.onBreakpointChange,
           onLayoutChange = _this$props3.onLayoutChange,
           onWidthChange = _this$props3.onWidthChange,
-          other = _objectWithoutProperties(_this$props3, ["breakpoint", "breakpoints", "cols", "layouts", "margin", "containerPadding", "onBreakpointChange", "onLayoutChange", "onWidthChange"]);
+          other = _objectWithoutProperties(_this$props3, _excluded);
       /* eslint-enable no-unused-vars */
 
 
@@ -307,6 +311,7 @@ _defineProperty(ResponsiveReactGridLayout, "propTypes", {
   breakpoint: _propTypes.default.string,
   // {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
   breakpoints: _propTypes.default.object,
+  allowOverlap: _propTypes.default.bool,
   // # of cols. This is a breakpoint -> cols map
   cols: _propTypes.default.object,
   // # of margin. This is a breakpoint -> margin map
@@ -377,6 +382,7 @@ _defineProperty(ResponsiveReactGridLayout, "defaultProps", {
   },
   layouts: {},
   margin: [10, 10],
+  allowOverlap: false,
   onBreakpointChange: _utils.noop,
   onLayoutChange: _utils.noop,
   onWidthChange: _utils.noop

package/build/calculateUtils.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.calcGridColWidth = calcGridColWidth;
-exports.calcGridItemWHPx = calcGridItemWHPx;
 exports.calcGridItemPosition = calcGridItemPosition;
-exports.calcXY = calcXY;
+exports.calcGridItemWHPx = calcGridItemWHPx;
 exports.calcWH = calcWH;
+exports.calcXY = calcXY;
 exports.clamp = clamp;
 
 /*:: import type { Position } from "./utils";*/
@@ -88,9 +88,9 @@ function calcGridItemPosition(positionParams
     out.height = Math.round(state.resizing.height);
   } // Otherwise, calculate from grid units.
   else {
-      out.width = calcGridItemWHPx(w, colWidth, margin[0]);
-      out.height = calcGridItemWHPx(h, rowHeight, margin[1]);
-    } // If dragging, use the exact width and height as returned from dragging callbacks.
+    out.width = calcGridItemWHPx(w, colWidth, margin[0]);
+    out.height = calcGridItemWHPx(h, rowHeight, margin[1]);
+  } // If dragging, use the exact width and height as returned from dragging callbacks.
 
 
   if (state && state.dragging) {
@@ -98,9 +98,9 @@ function calcGridItemPosition(positionParams
     out.left = Math.round(state.dragging.left);
   } // Otherwise, calculate from grid units.
   else {
-      out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
-      out.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
-    }
+    out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
+    out.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
+  }
 
   return out;
 }

package/build/components/WidthProvider.js

@@ -1,6 +1,6 @@
 "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); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -11,11 +11,15 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _excluded = ["measureBeforeMount"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-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 _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _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); }
 
@@ -27,15 +31,15 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 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); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -45,12 +49,14 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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 WidthProvideRGL
 /*:: <Config>*/
 (ComposedComponent
@@ -82,10 +88,15 @@ function WidthProvideRGL
 
       _defineProperty(_assertThisInitialized(_this), "elementRef", /*#__PURE__*/React.createRef());
 
+      _defineProperty(_assertThisInitialized(_this), "mounted", false);
+
       _defineProperty(_assertThisInitialized(_this), "onWindowResize", function () {
+        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) {
+        if (node instanceof HTMLElement && node.offsetWidth) {
           _this.setState({
             width: node.offsetWidth
           });
@@ -98,6 +109,7 @@ function WidthProvideRGL
     _createClass(WidthProvider, [{
       key: "componentDidMount",
       value: function componentDidMount() {
+        this.mounted = true;
         window.addEventListener("resize", this.onWindowResize); // Call to properly set the breakpoint and resize the elements.
         // Note that if you're doing a full-width element, this can get a little wonky if a scrollbar
         // appears because of the grid. In that case, fire your own resize event, or set `overflow: scroll` on your body.
@@ -107,6 +119,7 @@ function WidthProvideRGL
     }, {
       key: "componentWillUnmount",
       value: function componentWillUnmount() {
+        this.mounted = false;
         window.removeEventListener("resize", this.onWindowResize);
       }
     }, {
@@ -114,16 +127,16 @@ function WidthProvideRGL
       value: function render() {
         var _this$props = this.props,
             measureBeforeMount = _this$props.measureBeforeMount,
-            rest = _objectWithoutProperties(_this$props, ["measureBeforeMount"]);
-
-        if (measureBeforeMount && !this.elementRef.current
-        /* unmounted */
-        ) {
-            return /*#__PURE__*/React.createElement("div", {
-              className: this.props.className,
-              style: this.props.style
-            });
-          }
+            rest = _objectWithoutProperties(_this$props, _excluded);
+
+        if (measureBeforeMount && !this.mounted) {
+          return /*#__PURE__*/React.createElement("div", {
+            className: (0, _clsx.default)(this.props.className, layoutClassName),
+            style: this.props.style // $FlowIgnore ref types
+            ,
+            ref: this.elementRef
+          });
+        }
 
         return /*#__PURE__*/React.createElement(ComposedComponent, _extends({
           innerRef: this.elementRef

package/build/fastRGLPropsEqual.js

@@ -1,5 +1,5 @@
 // this file was prevaled
 module.exports = function fastRGLPropsEqual(a, b, isEqualImpl) {
   if (a === b) return true;
-  return a.className === b.className && isEqualImpl(a.style, b.style) && a.width === b.width && a.autoSize === b.autoSize && a.cols === b.cols && a.draggableCancel === b.draggableCancel && a.draggableHandle === b.draggableHandle && isEqualImpl(a.verticalCompact, b.verticalCompact) && isEqualImpl(a.compactType, b.compactType) && isEqualImpl(a.layout, b.layout) && isEqualImpl(a.margin, b.margin) && isEqualImpl(a.containerPadding, b.containerPadding) && a.rowHeight === b.rowHeight && a.maxRows === b.maxRows && a.isBounded === b.isBounded && a.isDraggable === b.isDraggable && a.isResizable === b.isResizable && a.preventCollision === b.preventCollision && a.useCSSTransforms === b.useCSSTransforms && a.transformScale === b.transformScale && a.isDroppable === b.isDroppable && isEqualImpl(a.resizeHandles, b.resizeHandles) && isEqualImpl(a.resizeHandle, b.resizeHandle) && a.onLayoutChange === b.onLayoutChange && a.onDragStart === b.onDragStart && a.onDrag === b.onDrag && a.onDragStop === b.onDragStop && a.onResizeStart === b.onResizeStart && a.onResize === b.onResize && a.onResizeStop === b.onResizeStop && a.onDrop === b.onDrop && isEqualImpl(a.droppingItem, b.droppingItem) && isEqualImpl(a.innerRef, b.innerRef);
+  return a.className === b.className && isEqualImpl(a.style, b.style) && a.width === b.width && a.autoSize === b.autoSize && a.cols === b.cols && a.draggableCancel === b.draggableCancel && a.draggableHandle === b.draggableHandle && isEqualImpl(a.verticalCompact, b.verticalCompact) && isEqualImpl(a.compactType, b.compactType) && isEqualImpl(a.layout, b.layout) && isEqualImpl(a.margin, b.margin) && isEqualImpl(a.containerPadding, b.containerPadding) && a.rowHeight === b.rowHeight && a.maxRows === b.maxRows && a.isBounded === b.isBounded && a.isDraggable === b.isDraggable && a.isResizable === b.isResizable && a.allowOverlap === b.allowOverlap && a.preventCollision === b.preventCollision && a.useCSSTransforms === b.useCSSTransforms && a.transformScale === b.transformScale && a.isDroppable === b.isDroppable && isEqualImpl(a.resizeHandles, b.resizeHandles) && isEqualImpl(a.resizeHandle, b.resizeHandle) && a.onLayoutChange === b.onLayoutChange && a.onDragStart === b.onDragStart && a.onDrag === b.onDrag && a.onDragStop === b.onDragStop && a.onResizeStart === b.onResizeStart && a.onResize === b.onResize && a.onResizeStop === b.onResizeStop && a.onDrop === b.onDrop && isEqualImpl(a.droppingItem, b.droppingItem) && isEqualImpl(a.innerRef, b.innerRef);
 };

package/build/responsiveUtils.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.findOrGenerateResponsiveLayout = findOrGenerateResponsiveLayout;
 exports.getBreakpointFromWidth = getBreakpointFromWidth;
 exports.getColsFromBreakpoint = getColsFromBreakpoint;
-exports.findOrGenerateResponsiveLayout = findOrGenerateResponsiveLayout;
 exports.sortBreakpoints = sortBreakpoints;
 
 var _utils = require("./utils");

package/build/utils.js

@@ -4,33 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.bottom = bottom;
+exports.childrenEqual = childrenEqual;
 exports.cloneLayout = cloneLayout;
-exports.modifyLayout = modifyLayout;
-exports.withLayoutItem = withLayoutItem;
 exports.cloneLayoutItem = cloneLayoutItem;
-exports.childrenEqual = childrenEqual;
-exports.fastPositionEqual = fastPositionEqual;
 exports.collides = collides;
 exports.compact = compact;
 exports.compactItem = compactItem;
+exports.compactType = compactType;
 exports.correctBounds = correctBounds;
-exports.getLayoutItem = getLayoutItem;
-exports.getFirstCollision = getFirstCollision;
+exports.fastPositionEqual = fastPositionEqual;
+exports.fastRGLPropsEqual = void 0;
 exports.getAllCollisions = getAllCollisions;
+exports.getFirstCollision = getFirstCollision;
+exports.getLayoutItem = getLayoutItem;
 exports.getStatics = getStatics;
+exports.modifyLayout = modifyLayout;
 exports.moveElement = moveElement;
 exports.moveElementAwayFromCollision = moveElementAwayFromCollision;
+exports.noop = void 0;
 exports.perc = perc;
-exports.setTransform = setTransform;
 exports.setTopLeft = setTopLeft;
+exports.setTransform = setTransform;
 exports.sortLayoutItems = sortLayoutItems;
-exports.sortLayoutItemsByRowCol = sortLayoutItemsByRowCol;
 exports.sortLayoutItemsByColRow = sortLayoutItemsByColRow;
+exports.sortLayoutItemsByRowCol = sortLayoutItemsByRowCol;
 exports.synchronizeLayoutWithChildren = synchronizeLayoutWithChildren;
 exports.validateLayout = validateLayout;
-exports.compactType = compactType;
-exports.autoBindHandlers = autoBindHandlers;
-exports.noop = exports.fastRGLPropsEqual = void 0;
+exports.withLayoutItem = withLayoutItem;
 
 var _lodash = _interopRequireDefault(require("lodash.isequal"));
 
@@ -38,9 +38,9 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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; }
 
@@ -164,9 +164,9 @@ function childrenEqual(a
 /*: boolean*/
 {
   return (0, _lodash.default)(_react.default.Children.map(a, function (c) {
-    return c.key;
+    return c === null || c === void 0 ? void 0 : c.key;
   }), _react.default.Children.map(b, function (c) {
-    return c.key;
+    return c === null || c === void 0 ? void 0 : c.key;
   }));
 }
 /**
@@ -362,8 +362,11 @@ function compactItem(compareWith
       l.x = cols - l.w;
       l.y++;
     }
-  }
+  } // Ensure that there are no negative positions
 
+
+  l.y = Math.max(l.y, 0);
+  l.x = Math.max(l.x, 0);
   return l;
 }
 /**
@@ -503,6 +506,8 @@ function moveElement(layout
 /*: CompactType*/
 , cols
 /*: number*/
+, allowOverlap
+/*: ?boolean*/
 )
 /*: Layout*/
 {
@@ -526,14 +531,23 @@ function moveElement(layout
   var movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : compactType === "horizontal" && typeof x === "number" ? oldX >= x : false; // $FlowIgnore acceptable modification of read-only array as it was recently cloned
 
   if (movingUp) sorted = sorted.reverse();
-  var collisions = getAllCollisions(sorted, l); // There was a collision; abort
-
-  if (preventCollision && collisions.length) {
+  var collisions = getAllCollisions(sorted, l);
+  var hasCollisions = collisions.length > 0; // We may have collisions. We can short-circuit if we've turned off collisions or
+  // allowed overlap.
+
+  if (hasCollisions && allowOverlap) {
+    // Easy, we don't need to resolve collisions. But we *did* change the layout,
+    // so clone it on the way out.
+    return cloneLayout(layout);
+  } else if (hasCollisions && preventCollision) {
+    // If we are preventing collision but not allowing overlap, we need to
+    // revert the position of this element so it goes to where it came from, rather
+    // than the user's desired location.
     log("Collision prevented on ".concat(l.i, ", reverting."));
     l.x = oldX;
     l.y = oldY;
     l.moved = false;
-    return layout;
+    return layout; // did not change so don't clone
   } // Move each item that collides away from this element.
 
 
@@ -674,7 +688,8 @@ function sortLayoutItems(layout
 )
 /*: Layout*/
 {
-  if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);else return sortLayoutItemsByRowCol(layout);
+  if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);
+  if (compactType === "vertical") return sortLayoutItemsByRowCol(layout);else return layout;
 }
 /**
  * Sort layout items by row ascending and column ascending.
@@ -741,6 +756,8 @@ function synchronizeLayoutWithChildren(initialLayout
 /*: number*/
 , compactType
 /*: CompactType*/
+, allowOverlap
+/*: ?boolean*/
 )
 /*: Layout*/
 {
@@ -752,14 +769,14 @@ function synchronizeLayoutWithChildren(initialLayout
 
   _react.default.Children.forEach(children, function (child
   /*: ReactElement<any>*/
-  , i
-  /*: number*/
   ) {
-    // Don't overwrite if it already exists.
+    // Child may not exist
+    if ((child === null || child === void 0 ? void 0 : child.key) == null) return; // Don't overwrite if it already exists.
+
     var exists = getLayoutItem(initialLayout, String(child.key));
 
     if (exists) {
-      layout[i] = cloneLayoutItem(exists);
+      layout.push(cloneLayoutItem(exists));
     } else {
       if (!isProduction && child.props._grid) {
         console.warn("`_grid` properties on children have been deprecated as of React 15.2. " + // eslint-disable-line
@@ -774,19 +791,19 @@ function synchronizeLayoutWithChildren(initialLayout
         } // FIXME clone not really necessary here
 
 
-        layout[i] = cloneLayoutItem(_objectSpread(_objectSpread({}, g), {}, {
+        layout.push(cloneLayoutItem(_objectSpread(_objectSpread({}, g), {}, {
           i: child.key
-        }));
+        })));
       } else {
         // Nothing provided: ensure this is added to the bottom
         // FIXME clone not really necessary here
-        layout[i] = cloneLayoutItem({
+        layout.push(cloneLayoutItem({
           w: 1,
           h: 1,
           x: 0,
           y: bottom(layout),
           i: String(child.key)
-        });
+        }));
       }
     }
   }); // Correct the layout.
@@ -795,7 +812,7 @@ function synchronizeLayoutWithChildren(initialLayout
   var correctedLayout = correctBounds(layout, {
     cols: cols
   });
-  return compact(correctedLayout, compactType, cols);
+  return allowOverlap ? correctedLayout : compact(correctedLayout, compactType, cols);
 }
 /**
  * Validate a layout. Throws errors.
@@ -847,19 +864,6 @@ function compactType(props
       compactType = _ref3.compactType;
 
   return verticalCompact === false ? null : compactType;
-} // Flow can't really figure this out, so we just use Object
-
-
-function autoBindHandlers(el
-/*: Object*/
-, fns
-/*: Array<string>*/
-)
-/*: void*/
-{
-  fns.forEach(function (key) {
-    return el[key] = el[key].bind(el);
-  });
 }
 
 function log() {