react-grid-layout - npm Package Compare versions

Comparing version 1.2.5 to 1.3.0

build/calculateUtils.js

@@ -91,5 +91,5 @@ "use strict";
   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.
 
@@ -102,5 +102,5 @@
   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]);
+  }
 
@@ -107,0 +107,0 @@ return out;

build/components/WidthProvider.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _excluded = ["measureBeforeMount"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,3 +43,3 @@
 
-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); }
 
@@ -130,3 +132,3 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
             measureBeforeMount = _this$props.measureBeforeMount,
-            rest = _objectWithoutProperties(_this$props, ["measureBeforeMount"]);
+            rest = _objectWithoutProperties(_this$props, _excluded);
 
@@ -133,0 +135,0 @@ if (measureBeforeMount && !this.mounted) {

build/fastRGLPropsEqual.js

 // 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);
 };

build/GridItem.js

@@ -44,3 +44,3 @@ "use strict";
 
-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); }
 
@@ -47,0 +47,0 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

build/ReactGridLayout.js

@@ -30,9 +30,9 @@ "use strict";
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
-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 _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
@@ -43,13 +43,13 @@ 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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 _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -68,3 +68,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-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); }
 
@@ -98,11 +98,3 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-  // TODO publish internal ReactClass displayName transform
-  // Refactored to another module to make way for preval
-  function ReactGridLayout(props
-  /*: Props*/
-  , context
-  /*: any*/
-  )
-  /*: void*/
-  {
+  function ReactGridLayout() {
     var _this;
@@ -112,8 +104,12 @@
 
-    _this = _super.call(this, props, context);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
+    _this = _super.call.apply(_super, [this].concat(args));
+
     _defineProperty(_assertThisInitialized(_this), "state", {
       activeDrag: null,
       layout: (0, _utils.synchronizeLayoutWithChildren)(_this.props.layout, _this.props.children, _this.props.cols, // Legacy support for verticalCompact: false
-      (0, _utils.compactType)(_this.props)),
+      (0, _utils.compactType)(_this.props), _this.props.allowOverlap),
       mounted: false,
@@ -129,23 +125,238 @@ oldDragItem: null,
 
+    _defineProperty(_assertThisInitialized(_this), "onDragStart", function (i
+    /*: string*/
+    , x
+    /*: number*/
+    , y
+    /*: number*/
+    , _ref) {
+      var e = _ref.e,
+          node = _ref.node;
+      var layout = _this.state.layout;
+      var l = (0, _utils.getLayoutItem)(layout, i);
+      if (!l) return;
+
+      _this.setState({
+        oldDragItem: (0, _utils.cloneLayoutItem)(l),
+        oldLayout: _this.state.layout
+      });
+
+      return _this.props.onDragStart(layout, l, l, null, e, node);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDrag", function (i, x, y, _ref2) {
+      var e = _ref2.e,
+          node = _ref2.node;
+      var oldDragItem = _this.state.oldDragItem;
+      var layout = _this.state.layout;
+      var _this$props = _this.props,
+          cols = _this$props.cols,
+          allowOverlap = _this$props.allowOverlap;
+      var l = (0, _utils.getLayoutItem)(layout, i);
+      if (!l) return; // Create placeholder (display only)
+
+      var placeholder = {
+        w: l.w,
+        h: l.h,
+        x: l.x,
+        y: l.y,
+        placeholder: true,
+        i: i
+      }; // Move the element to the dragged location.
+
+      var isUserAction = true;
+      layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, _this.props.preventCollision, (0, _utils.compactType)(_this.props), cols, allowOverlap);
+
+      _this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);
+
+      _this.setState({
+        layout: allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(_this.props), cols),
+        activeDrag: placeholder
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDragStop", function (i, x, y, _ref3) {
+      var e = _ref3.e,
+          node = _ref3.node;
+      if (!_this.state.activeDrag) return;
+      var oldDragItem = _this.state.oldDragItem;
+      var layout = _this.state.layout;
+      var _this$props2 = _this.props,
+          cols = _this$props2.cols,
+          preventCollision = _this$props2.preventCollision,
+          allowOverlap = _this$props2.allowOverlap;
+      var l = (0, _utils.getLayoutItem)(layout, i);
+      if (!l) return; // Move the element here
+
+      var isUserAction = true;
+      layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, (0, _utils.compactType)(_this.props), cols, allowOverlap);
+
+      _this.props.onDragStop(layout, oldDragItem, l, null, e, node); // Set state
+
+
+      var newLayout = allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(_this.props), cols);
+      var oldLayout = _this.state.oldLayout;
+
+      _this.setState({
+        activeDrag: null,
+        layout: newLayout,
+        oldDragItem: null,
+        oldLayout: null
+      });
+
+      _this.onLayoutMaybeChanged(newLayout, oldLayout);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onResizeStart", function (i, w, h, _ref4) {
+      var e = _ref4.e,
+          node = _ref4.node;
+      var layout = _this.state.layout;
+      var l = (0, _utils.getLayoutItem)(layout, i);
+      if (!l) return;
+
+      _this.setState({
+        oldResizeItem: (0, _utils.cloneLayoutItem)(l),
+        oldLayout: _this.state.layout
+      });
+
+      _this.props.onResizeStart(layout, l, l, null, e, node);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onResize", function (i, w, h, _ref5) {
+      var e = _ref5.e,
+          node = _ref5.node;
+      var _this$state = _this.state,
+          layout = _this$state.layout,
+          oldResizeItem = _this$state.oldResizeItem;
+      var _this$props3 = _this.props,
+          cols = _this$props3.cols,
+          preventCollision = _this$props3.preventCollision,
+          allowOverlap = _this$props3.allowOverlap;
+
+      var _withLayoutItem = (0, _utils.withLayoutItem)(layout, i, function (l) {
+        // Something like quad tree should be used
+        // to find collisions faster
+        var hasCollisions;
+
+        if (preventCollision && !allowOverlap) {
+          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 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;
+        }
+
+        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,
+        h: l.h,
+        x: l.x,
+        y: l.y,
+        static: true,
+        i: i
+      };
+
+      _this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node); // Re-compact the newLayout and set the drag placeholder.
+
+
+      _this.setState({
+        layout: allowOverlap ? newLayout : (0, _utils.compact)(newLayout, (0, _utils.compactType)(_this.props), cols),
+        activeDrag: placeholder
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onResizeStop", function (i, w, h, _ref6) {
+      var e = _ref6.e,
+          node = _ref6.node;
+      var _this$state2 = _this.state,
+          layout = _this$state2.layout,
+          oldResizeItem = _this$state2.oldResizeItem;
+      var _this$props4 = _this.props,
+          cols = _this$props4.cols,
+          allowOverlap = _this$props4.allowOverlap;
+      var l = (0, _utils.getLayoutItem)(layout, i);
+
+      _this.props.onResizeStop(layout, oldResizeItem, l, null, e, node); // Set state
+
+
+      var newLayout = allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(_this.props), cols);
+      var oldLayout = _this.state.oldLayout;
+
+      _this.setState({
+        activeDrag: null,
+        layout: newLayout,
+        oldResizeItem: null,
+        oldLayout: null
+      });
+
+      _this.onLayoutMaybeChanged(newLayout, oldLayout);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onDragOver", function (e) {
       var _e$nativeEvent$target;
 
-      // we should ignore events from layout's children in Firefox
+      e.preventDefault(); // Prevent any browser native action
+
+      e.stopPropagation(); // we should ignore events from layout's children in Firefox
       // to avoid unpredictable jumping of a dropping placeholder
       // FIXME remove this hack
+
       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;
       }
 
-      var _this$props = _this.props,
-          droppingItem = _this$props.droppingItem,
-          margin = _this$props.margin,
-          cols = _this$props.cols,
-          rowHeight = _this$props.rowHeight,
-          maxRows = _this$props.maxRows,
-          width = _this$props.width,
-          containerPadding = _this$props.containerPadding;
+      var _this$props5 = _this.props,
+          droppingItem = _this$props5.droppingItem,
+          onDropDragOver = _this$props5.onDropDragOver,
+          margin = _this$props5.margin,
+          cols = _this$props5.cols,
+          rowHeight = _this$props5.rowHeight,
+          maxRows = _this$props5.maxRows,
+          width = _this$props5.width,
+          containerPadding = _this$props5.containerPadding,
+          transformScale = _this$props5.transformScale; // Allow user to customize the dropping item or short-circuit the drop based on the results
+      // of the `onDragOver(e: Event)` callback.
+
+      var onDragOverResult = onDropDragOver === null || onDropDragOver === void 0 ? void 0 : onDropDragOver(e);
+
+      if (onDragOverResult === false) {
+        if (_this.state.droppingDOMNode) {
+          _this.removeDroppingPlaceholder();
+        }
+
+        return false;
+      }
+
+      var finalDroppingItem = _objectSpread(_objectSpread({}, droppingItem), onDragOverResult);
+
       var layout = _this.state.layout; // This is relative to the DOM element that this event fired for.
@@ -157,4 +368,4 @@
       var droppingPosition = {
-        left: layerX,
-        top: layerY,
+        left: layerX / transformScale,
+        top: layerY / transformScale,
         e: e
@@ -174,10 +385,10 @@ };
         };
-        var calculatedPosition = (0, _calculateUtils.calcXY)(positionParams, layerY, layerX, droppingItem.w, droppingItem.h);
+        var calculatedPosition = (0, _calculateUtils.calcXY)(positionParams, layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
 
         _this.setState({
           droppingDOMNode: /*#__PURE__*/React.createElement("div", {
-            key: droppingItem.i
+            key: finalDroppingItem.i
           }),
           droppingPosition: droppingPosition,
-          layout: [].concat(_toConsumableArray(layout), [_objectSpread(_objectSpread({}, droppingItem), {}, {
+          layout: [].concat(_toConsumableArray(layout), [_objectSpread(_objectSpread({}, finalDroppingItem), {}, {
             x: calculatedPosition.x,
@@ -201,11 +412,8 @@ y: calculatedPosition.y,
       }
-
-      e.stopPropagation();
-      e.preventDefault();
     });
 
     _defineProperty(_assertThisInitialized(_this), "removeDroppingPlaceholder", function () {
-      var _this$props2 = _this.props,
-          droppingItem = _this$props2.droppingItem,
-          cols = _this$props2.cols;
+      var _this$props6 = _this.props,
+          droppingItem = _this$props6.droppingItem,
+          cols = _this$props6.cols;
       var layout = _this.state.layout;
@@ -224,3 +432,5 @@ var newLayout = (0, _utils.compact)(layout.filter(function (l) {
 
-    _defineProperty(_assertThisInitialized(_this), "onDragLeave", function () {
+    _defineProperty(_assertThisInitialized(_this), "onDragLeave", function (e) {
+      e.preventDefault(); // Prevent any browser native action
+
       _this.dragEnterCounter--; // onDragLeave can be triggered on each layout's child.
@@ -237,3 +447,5 @@ // But we know that count of dragEnter and dragLeave events
 
-    _defineProperty(_assertThisInitialized(_this), "onDragEnter", function () {
+    _defineProperty(_assertThisInitialized(_this), "onDragEnter", function (e) {
+      e.preventDefault(); // Prevent any browser native action
+
       _this.dragEnterCounter++;
@@ -245,2 +457,4 @@ });
     ) {
+      e.preventDefault(); // Prevent any browser native action
+
       var droppingItem = _this.props.droppingItem;
@@ -259,3 +473,2 @@ var layout = _this.state.layout;
 
-    (0, _utils.autoBindHandlers)(_assertThisInitialized(_this), ["onDragStart", "onDrag", "onDragStop", "onResizeStart", "onResize", "onResizeStop"]);
     return _this;
@@ -327,114 +540,2 @@ }
   }, {
-    key: "onDragStart",
-    value: function onDragStart(i
-    /*: string*/
-    , x
-    /*: number*/
-    , y
-    /*: number*/
-    , _ref)
-    /*: void*/
-    {
-      var e = _ref.e,
-          node = _ref.node;
-      var layout = this.state.layout;
-      var l = (0, _utils.getLayoutItem)(layout, i);
-      if (!l) return;
-      this.setState({
-        oldDragItem: (0, _utils.cloneLayoutItem)(l),
-        oldLayout: this.state.layout
-      });
-      return this.props.onDragStart(layout, l, l, null, e, node);
-    }
-    /**
-     * Each drag movement create a new dragelement and move the element to the dragged location
-     * @param {String} i Id of the child
-     * @param {Number} x X position of the move
-     * @param {Number} y Y position of the move
-     * @param {Event} e The mousedown event
-     * @param {Element} node The current dragging DOM element
-     */
-
-  }, {
-    key: "onDrag",
-    value: function onDrag(i
-    /*: string*/
-    , x
-    /*: number*/
-    , y
-    /*: number*/
-    , _ref2)
-    /*: void*/
-    {
-      var e = _ref2.e,
-          node = _ref2.node;
-      var oldDragItem = this.state.oldDragItem;
-      var layout = this.state.layout;
-      var cols = this.props.cols;
-      var l = (0, _utils.getLayoutItem)(layout, i);
-      if (!l) return; // Create placeholder (display only)
-
-      var placeholder = {
-        w: l.w,
-        h: l.h,
-        x: l.x,
-        y: l.y,
-        placeholder: true,
-        i: i
-      }; // Move the element to the dragged location.
-
-      var isUserAction = true;
-      layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, this.props.preventCollision, (0, _utils.compactType)(this.props), cols);
-      this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);
-      this.setState({
-        layout: (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols),
-        activeDrag: placeholder
-      });
-    }
-    /**
-     * When dragging stops, figure out which position the element is closest to and update its x and y.
-     * @param  {String} i Index of the child.
-     * @param {Number} x X position of the move
-     * @param {Number} y Y position of the move
-     * @param {Event} e The mousedown event
-     * @param {Element} node The current dragging DOM element
-     */
-
-  }, {
-    key: "onDragStop",
-    value: function onDragStop(i
-    /*: string*/
-    , x
-    /*: number*/
-    , y
-    /*: number*/
-    , _ref3)
-    /*: void*/
-    {
-      var e = _ref3.e,
-          node = _ref3.node;
-      if (!this.state.activeDrag) return;
-      var oldDragItem = this.state.oldDragItem;
-      var layout = this.state.layout;
-      var _this$props3 = this.props,
-          cols = _this$props3.cols,
-          preventCollision = _this$props3.preventCollision;
-      var l = (0, _utils.getLayoutItem)(layout, i);
-      if (!l) return; // Move the element here
-
-      var isUserAction = true;
-      layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, (0, _utils.compactType)(this.props), cols);
-      this.props.onDragStop(layout, oldDragItem, l, null, e, node); // Set state
-
-      var newLayout = (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols);
-      var oldLayout = this.state.oldLayout;
-      this.setState({
-        activeDrag: null,
-        layout: newLayout,
-        oldDragItem: null,
-        oldLayout: null
-      });
-      this.onLayoutMaybeChanged(newLayout, oldLayout);
-    }
-  }, {
     key: "onLayoutMaybeChanged",
@@ -453,125 +554,4 @@ value: function onLayoutMaybeChanged(newLayout
   }, {
-    key: "onResizeStart",
-    value: function onResizeStart(i
-    /*: string*/
-    , w
-    /*: number*/
-    , h
-    /*: number*/
-    , _ref4) {
-      var e = _ref4.e,
-          node = _ref4.node;
-      var layout = this.state.layout;
-      var l = (0, _utils.getLayoutItem)(layout, i);
-      if (!l) return;
-      this.setState({
-        oldResizeItem: (0, _utils.cloneLayoutItem)(l),
-        oldLayout: this.state.layout
-      });
-      this.props.onResizeStart(layout, l, l, null, e, node);
-    }
-  }, {
-    key: "onResize",
-    value: function onResize(i
-    /*: string*/
-    , w
-    /*: number*/
-    , h
-    /*: number*/
-    , _ref5) {
-      var e = _ref5.e,
-          node = _ref5.node;
-      var _this$state = this.state,
-          layout = _this$state.layout,
-          oldResizeItem = _this$state.oldResizeItem;
-      var _this$props4 = this.props,
-          cols = _this$props4.cols,
-          preventCollision = _this$props4.preventCollision;
-
-      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;
-          });
-          hasCollisions = collisions.length > 0; // If we're colliding, we need adjust the placeholder.
-
-          // 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;
-        }
-
-        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,
-        h: l.h,
-        x: l.x,
-        y: l.y,
-        static: true,
-        i: i
-      };
-      this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node); // Re-compact the newLayout and set the drag placeholder.
-
-      this.setState({
-        layout: (0, _utils.compact)(newLayout, (0, _utils.compactType)(this.props), cols),
-        activeDrag: placeholder
-      });
-    }
-  }, {
-    key: "onResizeStop",
-    value: function onResizeStop(i
-    /*: string*/
-    , w
-    /*: number*/
-    , h
-    /*: number*/
-    , _ref6) {
-      var e = _ref6.e,
-          node = _ref6.node;
-      var _this$state2 = this.state,
-          layout = _this$state2.layout,
-          oldResizeItem = _this$state2.oldResizeItem;
-      var cols = this.props.cols;
-      var l = (0, _utils.getLayoutItem)(layout, i);
-      this.props.onResizeStop(layout, oldResizeItem, l, null, e, node); // Set state
-
-      var newLayout = (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols);
-      var oldLayout = this.state.oldLayout;
-      this.setState({
-        activeDrag: null,
-        layout: newLayout,
-        oldResizeItem: null,
-        oldLayout: null
-      });
-      this.onLayoutMaybeChanged(newLayout, oldLayout);
-    }
+    key: "placeholder",
+    value:
     /**
@@ -581,6 +561,3 @@ * Create a placeholder object.
      */
-
-  }, {
-    key: "placeholder",
-    value: function placeholder()
+    function placeholder()
     /*: ?ReactElement<any>*/
@@ -590,11 +567,11 @@ {
       if (!activeDrag) return null;
-      var _this$props5 = this.props,
-          width = _this$props5.width,
-          cols = _this$props5.cols,
-          margin = _this$props5.margin,
-          containerPadding = _this$props5.containerPadding,
-          rowHeight = _this$props5.rowHeight,
-          maxRows = _this$props5.maxRows,
-          useCSSTransforms = _this$props5.useCSSTransforms,
-          transformScale = _this$props5.transformScale; // {...this.state.activeDrag} is pretty slow, actually
+      var _this$props7 = this.props,
+          width = _this$props7.width,
+          cols = _this$props7.cols,
+          margin = _this$props7.margin,
+          containerPadding = _this$props7.containerPadding,
+          rowHeight = _this$props7.rowHeight,
+          maxRows = _this$props7.maxRows,
+          useCSSTransforms = _this$props7.useCSSTransforms,
+          transformScale = _this$props7.transformScale; // {...this.state.activeDrag} is pretty slow, actually
 
@@ -639,18 +616,18 @@ return /*#__PURE__*/React.createElement(_GridItem.default, {
       if (!l) return null;
-      var _this$props6 = this.props,
-          width = _this$props6.width,
-          cols = _this$props6.cols,
-          margin = _this$props6.margin,
-          containerPadding = _this$props6.containerPadding,
-          rowHeight = _this$props6.rowHeight,
-          maxRows = _this$props6.maxRows,
-          isDraggable = _this$props6.isDraggable,
-          isResizable = _this$props6.isResizable,
-          isBounded = _this$props6.isBounded,
-          useCSSTransforms = _this$props6.useCSSTransforms,
-          transformScale = _this$props6.transformScale,
-          draggableCancel = _this$props6.draggableCancel,
-          draggableHandle = _this$props6.draggableHandle,
-          resizeHandles = _this$props6.resizeHandles,
-          resizeHandle = _this$props6.resizeHandle;
+      var _this$props8 = this.props,
+          width = _this$props8.width,
+          cols = _this$props8.cols,
+          margin = _this$props8.margin,
+          containerPadding = _this$props8.containerPadding,
+          rowHeight = _this$props8.rowHeight,
+          maxRows = _this$props8.maxRows,
+          isDraggable = _this$props8.isDraggable,
+          isResizable = _this$props8.isResizable,
+          isBounded = _this$props8.isBounded,
+          useCSSTransforms = _this$props8.useCSSTransforms,
+          transformScale = _this$props8.transformScale,
+          draggableCancel = _this$props8.draggableCancel,
+          draggableHandle = _this$props8.draggableHandle,
+          resizeHandles = _this$props8.resizeHandles,
+          resizeHandle = _this$props8.resizeHandle;
       var _this$state3 = this.state,
@@ -712,7 +689,7 @@ mounted = _this$state3.mounted,
 
-      var _this$props7 = this.props,
-          className = _this$props7.className,
-          style = _this$props7.style,
-          isDroppable = _this$props7.isDroppable,
-          innerRef = _this$props7.innerRef;
+      var _this$props9 = this.props,
+          className = _this$props9.className,
+          style = _this$props9.style,
+          isDroppable = _this$props9.isDroppable,
+          innerRef = _this$props9.innerRef;
       var mergedClassName = (0, _classnames.default)(layoutClassName, className);
@@ -764,3 +741,3 @@
       if (newLayoutBase) {
-        var newLayout = (0, _utils.synchronizeLayoutWithChildren)(newLayoutBase, nextProps.children, nextProps.cols, (0, _utils.compactType)(nextProps));
+        var newLayout = (0, _utils.synchronizeLayoutWithChildren)(newLayoutBase, nextProps.children, nextProps.cols, (0, _utils.compactType)(nextProps), nextProps.allowOverlap);
         return {
@@ -805,2 +782,3 @@ layout: newLayout,
   isResizable: true,
+  allowOverlap: false,
   isDroppable: false,
@@ -825,3 +803,4 @@ useCSSTransforms: true,
   onResizeStop: _utils.noop,
-  onDrop: _utils.noop
+  onDrop: _utils.noop,
+  onDropDragOver: _utils.noop
 });

build/ReactGridLayoutPropTypes.js

@@ -59,2 +59,3 @@ "use strict";
   resizeHandle?: ResizeHandle,
+  allowOverlap: boolean,
 
@@ -69,2 +70,3 @@ // Callbacks
   onResizeStop: EventCallback,
+  onDropDragOver: (e: DragOverEvent) => ?({| w?: number, h?: number |} | false),
   onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
@@ -152,2 +154,4 @@ children: ReactChildrenArray<ReactElement<any>>,
   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.
@@ -205,2 +209,4 @@ preventCollision: _propTypes.default.bool,
     _react.default.Children.forEach(children, function (child) {
+      if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
+
       if (keys[child.key]) {
@@ -207,0 +213,0 @@ throw new Error('Duplicate child key "' + child.key + '" found! This will cause problems in ReactGridLayout.');

build/ResponsiveReactGridLayout.js

@@ -22,2 +22,4 @@ "use strict";
 
+var _excluded = ["breakpoint", "breakpoints", "cols", "layouts", "margin", "containerPadding", "onBreakpointChange", "onLayoutChange", "onWidthChange"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -51,3 +53,3 @@
 
-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); }
 
@@ -62,2 +64,3 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
+// $FlowFixMe[method-unbinding]
 var type = function type(obj) {
@@ -123,2 +126,3 @@ return Object.prototype.toString.call(obj);
   {|
+    allowOverlap: 0,
     breakpoints: 0,
@@ -227,3 +231,3 @@ cols: 0,
 
-        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.
 
@@ -262,3 +266,3 @@ newLayouts[newBreakpoint] = layout; // callbacks
           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 */
@@ -316,2 +320,3 @@
   breakpoints: _propTypes.default.object,
+  allowOverlap: _propTypes.default.bool,
   // # of cols. This is a breakpoint -> cols map
@@ -387,2 +392,3 @@ cols: _propTypes.default.object,
   margin: [10, 10],
+  allowOverlap: false,
   onBreakpointChange: _utils.noop,
@@ -389,0 +395,0 @@ onLayoutChange: _utils.noop,

build/utils.js

@@ -32,3 +32,2 @@ "use strict";
 exports.compactType = compactType;
-exports.autoBindHandlers = autoBindHandlers;
 exports.noop = exports.fastRGLPropsEqual = void 0;
@@ -168,5 +167,5 @@
   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;
   }));
@@ -511,2 +510,4 @@ }
 /*: number*/
+, allowOverlap
+/*: ?boolean*/
 )
@@ -538,6 +539,9 @@ /*: Layout*/
   if (preventCollision && collisions.length) {
-    log("Collision prevented on ".concat(l.i, ", reverting."));
-    l.x = oldX;
-    l.y = oldY;
-    l.moved = false;
+    if (!allowOverlap) {
+      log("Collision prevented on ".concat(l.i, ", reverting."));
+      l.x = oldX;
+      l.y = oldY;
+      l.moved = false;
+    }
+
     return layout;
@@ -684,3 +688,4 @@ } // Move each item that collides away from this element.
 {
-  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;
 }
@@ -752,2 +757,4 @@ /**
 /*: CompactType*/
+, allowOverlap
+/*: ?boolean*/
 )
@@ -764,10 +771,10 @@ /*: Layout*/
   /*: 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 {
@@ -787,9 +794,9 @@ if (!isProduction && child.props._grid) {
 
-        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,
@@ -800,3 +807,3 @@ h: 1,
           i: String(child.key)
-        });
+        }));
       }
@@ -810,3 +817,3 @@ }
   });
-  return compact(correctedLayout, compactType, cols);
+  return allowOverlap ? correctedLayout : compact(correctedLayout, compactType, cols);
 }
@@ -863,15 +870,2 @@ /**
   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);
-  });
 }
@@ -878,0 +872,0 @@

CHANGELOG.md

 # Changelog
 
+1.3.0 (Aug 27, 2021)
+---
+
+### New Features
+  - `allowOverlap` prop, when `true`, allows overlapping grid items. [#1470](https://github.com/react-grid-layout/react-grid-layout/pull/1470)
+  - Add `onDropDragOver` callback. [#1395](https://github.com/react-grid-layout/react-grid-layout/pull/1395)
+    - Use this callback to dynamically adjust the `droppingItem` based on what is being dragged over. Return `w` and `h` to adjust the item. It is then [spread into the dropping placeholder](https://github.com/react-grid-layout/react-grid-layout/pull/1395/files#diff-83ab569936bfd4bf0460a4f23653ecbe8bc88509062c95e75c9402218b2b8733R609).
+    - This callback has the type:
+      - `onDragOver: (e: DragOverEvent) => { w: number, h: number } | false;`
+      - Return `false` to short-circuit the dragover.
+
+### Bugfixes
+  - Remove sorting when `compactType` is `null`. [#1474](https://github.com/react-grid-layout/react-grid-layout/pull/1474)
+  - Droppable fixes for Chrome behavior. [#1442](https://github.com/react-grid-layout/react-grid-layout/issues/1442) [#1448](https://github.com/react-grid-layout/react-grid-layout/issues/1442)
+  - Allow `null` children as a convenience so that inline expressions don't break the library. [#1296](https://github.com/react-grid-layout/react-grid-layout/pull/1296)
+  - Various dependency upgrades.
+
+### Documentation
+  - Add docs on using custom components as grid children.
+  - Note required class on resizable handles for proper styling.
+
+
 1.2.5 (May 10, 2021)
@@ -4,0 +26,0 @@ ---

lib/ReactGridLayout.jsx

@@ -7,3 +7,2 @@ // @flow
 import {
-  autoBindHandlers,
   bottom,
@@ -99,2 +98,3 @@ childrenEqual,
     isResizable: true,
+    allowOverlap: false,
     isDroppable: false,
@@ -119,3 +119,4 @@ useCSSTransforms: true,
     onResizeStop: noop,
-    onDrop: noop
+    onDrop: noop,
+    onDropDragOver: noop
   };
@@ -130,3 +131,4 @@
       // Legacy support for verticalCompact: false
-      compactType(this.props)
+      compactType(this.props),
+      this.props.allowOverlap
     ),
@@ -143,14 +145,2 @@ mounted: false,
 
-  constructor(props: Props, context: any): void {
-    super(props, context);
-    autoBindHandlers(this, [
-      "onDragStart",
-      "onDrag",
-      "onDragStop",
-      "onResizeStart",
-      "onResize",
-      "onResizeStop"
-    ]);
-  }
-
   componentDidMount() {
@@ -193,3 +183,4 @@ this.setState({ mounted: true });
         nextProps.cols,
-        compactType(nextProps)
+        compactType(nextProps),
+        nextProps.allowOverlap
       );
@@ -258,3 +249,3 @@
    */
-  onDragStart(
+  onDragStart: (i: string, x: number, y: number, GridDragEvent) => void = (
     i: string,
@@ -264,3 +255,3 @@ x: number,
     { e, node }: GridDragEvent
-  ): void {
+  ) => {
     const { layout } = this.state;
@@ -276,3 +267,3 @@ const l = getLayoutItem(layout, i);
     return this.props.onDragStart(layout, l, l, null, e, node);
-  }
+  };
 
@@ -287,6 +278,11 @@ /**
    */
-  onDrag(i: string, x: number, y: number, { e, node }: GridDragEvent): void {
+  onDrag: (i: string, x: number, y: number, GridDragEvent) => void = (
+    i,
+    x,
+    y,
+    { e, node }
+  ) => {
     const { oldDragItem } = this.state;
     let { layout } = this.state;
-    const { cols } = this.props;
+    const { cols, allowOverlap } = this.props;
     const l = getLayoutItem(layout, i);
@@ -315,3 +311,4 @@ if (!l) return;
       compactType(this.props),
-      cols
+      cols,
+      allowOverlap
     );
@@ -322,6 +319,8 @@
     this.setState({
-      layout: compact(layout, compactType(this.props), cols),
+      layout: allowOverlap
+        ? layout
+        : compact(layout, compactType(this.props), cols),
       activeDrag: placeholder
     });
-  }
+  };
 
@@ -336,8 +335,8 @@ /**
    */
-  onDragStop(
-    i: string,
-    x: number,
-    y: number,
-    { e, node }: GridDragEvent
-  ): void {
+  onDragStop: (i: string, x: number, y: number, GridDragEvent) => void = (
+    i,
+    x,
+    y,
+    { e, node }
+  ) => {
     if (!this.state.activeDrag) return;
@@ -347,3 +346,3 @@
     let { layout } = this.state;
-    const { cols, preventCollision } = this.props;
+    const { cols, preventCollision, allowOverlap } = this.props;
     const l = getLayoutItem(layout, i);
@@ -362,3 +361,4 @@ if (!l) return;
       compactType(this.props),
-      cols
+      cols,
+      allowOverlap
     );
@@ -369,3 +369,5 @@
     // Set state
-    const newLayout = compact(layout, compactType(this.props), cols);
+    const newLayout = allowOverlap
+      ? layout
+      : compact(layout, compactType(this.props), cols);
     const { oldLayout } = this.state;
@@ -380,3 +382,3 @@ this.setState({
     this.onLayoutMaybeChanged(newLayout, oldLayout);
-  }
+  };
 
@@ -391,3 +393,8 @@ onLayoutMaybeChanged(newLayout: Layout, oldLayout: ?Layout) {
 
-  onResizeStart(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
+  onResizeStart: (i: string, w: number, h: number, GridResizeEvent) => void = (
+    i,
+    w,
+    h,
+    { e, node }
+  ) => {
     const { layout } = this.state;
@@ -403,7 +410,12 @@ const l = getLayoutItem(layout, i);
     this.props.onResizeStart(layout, l, l, null, e, node);
-  }
+  };
 
-  onResize(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
+  onResize: (i: string, w: number, h: number, GridResizeEvent) => void = (
+    i,
+    w,
+    h,
+    { e, node }
+  ) => {
     const { layout, oldResizeItem } = this.state;
-    const { cols, preventCollision } = this.props;
+    const { cols, preventCollision, allowOverlap } = this.props;
 
@@ -414,3 +426,3 @@ const [newLayout, l] = withLayoutItem(layout, i, l => {
       let hasCollisions;
-      if (preventCollision) {
+      if (preventCollision && !allowOverlap) {
         const collisions = getAllCollisions(layout, { ...l, w, h }).filter(
@@ -462,10 +474,17 @@ layoutItem => layoutItem.i !== l.i
     this.setState({
-      layout: compact(newLayout, compactType(this.props), cols),
+      layout: allowOverlap
+        ? newLayout
+        : compact(newLayout, compactType(this.props), cols),
       activeDrag: placeholder
     });
-  }
+  };
 
-  onResizeStop(i: string, w: number, h: number, { e, node }: GridResizeEvent) {
+  onResizeStop: (i: string, w: number, h: number, GridResizeEvent) => void = (
+    i,
+    w,
+    h,
+    { e, node }
+  ) => {
     const { layout, oldResizeItem } = this.state;
-    const { cols } = this.props;
+    const { cols, allowOverlap } = this.props;
     const l = getLayoutItem(layout, i);
@@ -476,3 +495,5 @@
     // Set state
-    const newLayout = compact(layout, compactType(this.props), cols);
+    const newLayout = allowOverlap
+      ? layout
+      : compact(layout, compactType(this.props), cols);
     const { oldLayout } = this.state;
@@ -487,3 +508,3 @@ this.setState({
     this.onLayoutMaybeChanged(newLayout, oldLayout);
-  }
+  };
 
@@ -625,2 +646,5 @@ /**
   onDragOver: DragOverEvent => void | false = e => {
+    e.preventDefault(); // Prevent any browser native action
+    e.stopPropagation();
+
     // we should ignore events from layout's children in Firefox
@@ -634,4 +658,2 @@ // to avoid unpredictable jumping of a dropping placeholder
     ) {
-      // without this Firefox will not allow drop if currently over droppingItem
-      e.preventDefault();
       return false;
@@ -642,2 +664,3 @@ }
       droppingItem,
+      onDropDragOver,
       margin,
@@ -648,8 +671,20 @@ cols,
       width,
-      containerPadding
+      containerPadding,
+      transformScale
     } = this.props;
+    // Allow user to customize the dropping item or short-circuit the drop based on the results
+    // of the `onDragOver(e: Event)` callback.
+    const onDragOverResult = onDropDragOver?.(e);
+    if (onDragOverResult === false) {
+      if (this.state.droppingDOMNode) {
+        this.removeDroppingPlaceholder();
+      }
+      return false;
+    }
+    const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
+
     const { layout } = this.state;
     // This is relative to the DOM element that this event fired for.
     const { layerX, layerY } = e.nativeEvent;
-    const droppingPosition = { left: layerX, top: layerY, e };
+    const droppingPosition = { left: layerX / transformScale, top: layerY / transformScale, e };
 
@@ -670,8 +705,8 @@ if (!this.state.droppingDOMNode) {
         layerX,
-        droppingItem.w,
-        droppingItem.h
+        finalDroppingItem.w,
+        finalDroppingItem.h
       );
 
       this.setState({
-        droppingDOMNode: <div key={droppingItem.i} />,
+        droppingDOMNode: <div key={finalDroppingItem.i} />,
         droppingPosition,
@@ -681,3 +716,3 @@ layout: [
           {
-            ...droppingItem,
+            ...finalDroppingItem,
             x: calculatedPosition.x,
@@ -697,5 +732,2 @@ y: calculatedPosition.y,
     }
-
-    e.stopPropagation();
-    e.preventDefault();
   };
@@ -721,3 +753,4 @@
 
-  onDragLeave: () => void = () => {
+  onDragLeave: EventHandler = e => {
+    e.preventDefault(); // Prevent any browser native action
     this.dragEnterCounter--;
@@ -735,3 +768,4 @@
 
-  onDragEnter: () => void = () => {
+  onDragEnter: EventHandler = e => {
+    e.preventDefault(); // Prevent any browser native action
     this.dragEnterCounter++;
@@ -741,2 +775,3 @@ };
   onDrop: EventHandler = (e: Event) => {
+    e.preventDefault(); // Prevent any browser native action
     const { droppingItem } = this.props;
@@ -743,0 +778,0 @@ const { layout } = this.state;

lib/ReactGridLayoutPropTypes.js

@@ -9,3 +9,9 @@ // @flow
 } from "react";
-import type { EventCallback, CompactType, Layout, LayoutItem } from "./utils";
+import type {
+  DragOverEvent,
+  EventCallback,
+  CompactType,
+  Layout,
+  LayoutItem
+} from "./utils";
 
@@ -17,8 +23,18 @@ // util
 
-export type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
+export type ResizeHandleAxis =
+  | "s"
+  | "w"
+  | "e"
+  | "n"
+  | "sw"
+  | "nw"
+  | "se"
+  | "ne";
 export type ResizeHandle =
   | ReactElement<any>
-  | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>);
+  | ((
+      resizeHandleAxis: ResizeHandleAxis,
+      ref: ReactRef<HTMLElement>
+    ) => ReactElement<any>);
 
-
 // Defines which resize handles should be rendered (default: 'se')
@@ -34,9 +50,9 @@ // Allows for any combination of:
 // 'ne' - Northeast handle (top-right)
-export const resizeHandleAxesType: ReactPropsChainableTypeChecker = PropTypes.arrayOf(
-  PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
-);
+export const resizeHandleAxesType: ReactPropsChainableTypeChecker =
+  PropTypes.arrayOf(
+    PropTypes.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])
+  );
 // Custom component for resize handles
-export const resizeHandleType: ReactPropsChainableTypeChecker = PropTypes.oneOfType(
-  [PropTypes.node, PropTypes.func]
-);
+export const resizeHandleType: ReactPropsChainableTypeChecker =
+  PropTypes.oneOfType([PropTypes.node, PropTypes.func]);
 
@@ -68,2 +84,3 @@ export type Props = {|
   resizeHandle?: ResizeHandle,
+  allowOverlap: boolean,
 
@@ -78,2 +95,3 @@ // Callbacks
   onResizeStop: EventCallback,
+  onDropDragOver: (e: DragOverEvent) => ?({| w?: number, h?: number |} | false),
   onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
@@ -167,2 +185,4 @@ children: ReactChildrenArray<ReactElement<any>>,
   isResizable: PropTypes.bool,
+  // If true, grid can be placed one over the other.
+  allowOverlap: PropTypes.bool,
   // If true, grid items won't change position when being dragged over.
@@ -216,7 +236,8 @@ preventCollision: PropTypes.bool,
   children: function (props: Props, propName: string) {
-    var children = props[propName];
+    const children = props[propName];
 
     // Check children keys for duplicates. Throw if found.
-    var keys = {};
+    const keys = {};
     React.Children.forEach(children, function (child) {
+      if (child?.key == null) return;
       if (keys[child.key]) {
@@ -223,0 +244,0 @@ throw new Error(

lib/ResponsiveReactGridLayout.jsx

@@ -24,2 +24,3 @@ // @flow
 
+// $FlowFixMe[method-unbinding]
 const type = obj => Object.prototype.toString.call(obj);
@@ -78,2 +79,3 @@
   {|
+    allowOverlap: 0,
     breakpoints: 0,
@@ -108,2 +110,4 @@ cols: 0,
 
+    allowOverlap: PropTypes.bool,
+
     // # of cols. This is a breakpoint -> cols map
@@ -168,2 +172,3 @@ cols: PropTypes.object,
     margin: [10, 10],
+    allowOverlap: false,
     onBreakpointChange: noop,
@@ -284,3 +289,4 @@ onLayoutChange: noop,
         newCols,
-        compactType
+        compactType,
+        this.props.allowOverlap
       );
@@ -287,0 +293,0 @@

lib/utils.js

@@ -162,4 +162,4 @@ // @flow
   return isEqual(
-    React.Children.map(a, c => c.key),
-    React.Children.map(b, c => c.key)
+    React.Children.map(a, c => c?.key),
+    React.Children.map(b, c => c?.key)
   );
@@ -332,7 +332,7 @@ }
   }
-  
+
   // Ensure that there are no negative positions
   l.y = Math.max(l.y, 0);
   l.x = Math.max(l.x, 0);
-  
+
   return l;
@@ -439,3 +439,4 @@ }
   compactType: CompactType,
-  cols: number
+  cols: number,
+  allowOverlap: ?boolean
 ): Layout {
@@ -477,6 +478,8 @@ // If this is static and not explicitly enabled as draggable,
   if (preventCollision && collisions.length) {
-    log(`Collision prevented on ${l.i}, reverting.`);
-    l.x = oldX;
-    l.y = oldY;
-    l.moved = false;
+    if (!allowOverlap) {
+      log(`Collision prevented on ${l.i}, reverting.`);
+      l.x = oldX;
+      l.y = oldY;
+      l.moved = false;
+    }
     return layout;
@@ -633,3 +636,4 @@ }
   if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);
-  else return sortLayoutItemsByRowCol(layout);
+  if (compactType === "vertical") return sortLayoutItemsByRowCol(layout);
+  else return layout;
 }
@@ -684,3 +688,4 @@
   cols: number,
-  compactType: CompactType
+  compactType: CompactType,
+  allowOverlap: ?boolean
 ): Layout {
@@ -691,7 +696,10 @@ initialLayout = initialLayout || [];
   const layout: LayoutItem[] = [];
-  React.Children.forEach(children, (child: ReactElement<any>, i: number) => {
+  React.Children.forEach(children, (child: ReactElement<any>) => {
+    // Child may not exist
+    if (child?.key == null) return;
+
     // Don't overwrite if it already exists.
     const exists = getLayoutItem(initialLayout, String(child.key));
     if (exists) {
-      layout[i] = cloneLayoutItem(exists);
+      layout.push(cloneLayoutItem(exists));
     } else {
@@ -712,7 +720,7 @@ if (!isProduction && child.props._grid) {
         // FIXME clone not really necessary here
-        layout[i] = cloneLayoutItem({ ...g, i: child.key });
+        layout.push(cloneLayoutItem({ ...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,
@@ -723,3 +731,3 @@ h: 1,
           i: String(child.key)
-        });
+        }));
       }
@@ -731,3 +739,5 @@ }
   const correctedLayout = correctBounds(layout, { cols: cols });
-  return compact(correctedLayout, compactType, cols);
+  return allowOverlap
+    ? correctedLayout
+    : compact(correctedLayout, compactType, cols);
 }
@@ -789,7 +799,2 @@
 
-// Flow can't really figure this out, so we just use Object
-export function autoBindHandlers(el: Object, fns: Array<string>): void {
-  fns.forEach(key => (el[key] = el[key].bind(el)));
-}
-
 function log(...args) {
@@ -796,0 +801,0 @@ if (!DEBUG) return;

package.json

 {
   "name": "react-grid-layout",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
@@ -42,19 +42,19 @@ "main": "index.js",
     "react-draggable": "^4.0.0",
-    "react-resizable": "^3.0.1"
+    "react-resizable": "^3.0.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.0",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-flow-comments": "^7.12.13",
-    "@babel/preset-env": "^7.14.1",
-    "@babel/preset-flow": "^7.13.13",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/register": "^7.13.16",
-    "@webpack-cli/serve": "^1.4.0",
+    "@babel/cli": "^7.14.8",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-flow-comments": "^7.14.5",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-flow": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/register": "^7.15.3",
+    "@webpack-cli/serve": "^1.5.2",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-preval": "^5.0.0",
-    "css-loader": "^5.2.4",
+    "css-loader": "^6.2.0",
     "ejs": "^3.1.6",
@@ -64,15 +64,15 @@ "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^7.26.0",
-    "eslint-plugin-flowtype": "^5.7.2",
-    "eslint-plugin-mocha": "^8.1.0",
-    "eslint-plugin-react": "^7.23.2",
-    "exports-loader": "^2.0.0",
-    "flow-bin": "^0.150.1",
-    "husky": "^6.0.0",
-    "imports-loader": "^2.0.0",
-    "jest": "^26.6.3",
-    "lint-staged": "^11.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-flowtype": "^5.9.0",
+    "eslint-plugin-mocha": "^9.0.0",
+    "eslint-plugin-react": "^7.24.0",
+    "exports-loader": "^3.0.0",
+    "flow-bin": "^0.158.0",
+    "husky": "^7.0.2",
+    "imports-loader": "^3.0.0",
+    "jest": "^27.0.6",
+    "lint-staged": "^11.1.2",
     "lodash": "^4.17.21",
     "opener": "^1.5.2",
-    "prettier": "^2.3.0",
+    "prettier": "^2.3.2",
     "react": "^16.13.1",
@@ -82,7 +82,7 @@ "react-dom": "^16.13.1",
     "react-transform-hmr": "^1.0.2",
-    "style-loader": "^2.0.0",
+    "style-loader": "^3.2.1",
     "timsort": "^0.3.0",
-    "webpack": "^5.36.2",
-    "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.0.0"
   },
@@ -106,2 +106,3 @@ "peerDependencies": {
     ],
+    "testEnvironment": "jsdom",
     "testURL": "http://localhost"
@@ -108,0 +109,0 @@ },

README.md

@@ -58,2 +58,3 @@ # React-Grid-Layout
 1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html)
+1. [Allow Overlap](https://react-grid-layout.github.io/react-grid-layout/examples/19-allow-overlap.html)
 
@@ -78,2 +79,3 @@ #### Projects Using React-Grid-Layout
 - [Statsout](https://statsout.com/)
+- [Datto RMM](https://www.datto.com/uk/products/rmm/)
 
@@ -271,2 +273,3 @@ *Know of others? Create a PR to let me know!*
 // If you forget the leading . it will not work.
+// .react-resizable-handle" is always prepended to this value.
 draggableCancel: ?string = '',
@@ -321,5 +324,8 @@
 
+// If true, grid can be placed one over the other.
+allowOverlap: ?boolean = false,
+
 // If true, grid items won't change position when being
 // dragged over.
-preventCollision: ?boolean = false;
+preventCollision: ?boolean = false,
 
@@ -336,3 +342,3 @@ // If true, droppable elements (with `draggable={true}` attribute)
 // @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
-isDroppable: ?boolean = false
+isDroppable: ?boolean = false,
 // Defines which resize handles should be rendered
@@ -348,6 +354,8 @@ // Allows for any combination of:
 // 'ne' - Northeast handle (top-right)
-resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
+resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se'],
 // Custom component for resize handles
-// See `handle` as used in https://github.com/react-grid-layout/react-resizable#props
-resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>)
+// See `handle` as used in https://github.com/react-grid-layout/react-resizable#resize-handle
+// Your component should have the class `.react-resizable-handle`, or you should add your custom
+// class to the `draggableCancel` prop.
+resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>),
 
@@ -367,3 +375,3 @@ //
 type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem,
-                     placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void;
+                     placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void,
 
@@ -382,8 +390,17 @@ // Calls when drag starts.
 onResizeStop: ItemCallback,
+
+//
+// Dropover functionality
+//
+
 // Calls when an element has been dropped into the grid from outside.
-onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void
+onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
+// Calls when an element is being dragged over the grid from outside as above.
+// This callback should return an object to dynamically change the droppingItem size
+// Return false to short-circuit the dragover
+onDropDragOver: (e: DragOverEvent) => ?({|w?: number, h?: number|} | false),
 
 // Ref for getting a reference for the grid's wrapping div.
 // You can use this instead of a regular ref and the deprecated `ReactDOM.findDOMNode()`` function.
-innerRef: ?React.Ref<"div">
+innerRef: ?React.Ref<"div">,
 ```
@@ -406,7 +423,7 @@
 // margin (in pixels). Can be specified either as horizontal and vertical margin, e.g. `[10, 10]` or as a breakpoint -> margin map, e.g. `{lg: [10, 10], md: [10, 10], ...}.
-margin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}
+margin: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]},
 
 
 // containerPadding (in pixels). Can be specified either as horizontal and vertical padding, e.g. `[10, 10]` or as a breakpoint -> containerPadding map, e.g. `{lg: [10, 10], md: [10, 10], ...}.
-containerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]}
+containerPadding: [number, number] | {[breakpoint: $Keys<breakpoints>]: [number, number]},
 
@@ -416,3 +433,3 @@
 // e.g. {lg: Layout, md: Layout, ...}
-layouts: {[key: $Keys<breakpoints>]: Layout}
+layouts: {[key: $Keys<breakpoints>]: Layout},
 
@@ -520,2 +537,25 @@ //
 
+### Custom Child Components and Draggable Handles
+
+If you use React Components as grid children, they need to do a few things:
+
+1. Forward refs to an underlying DOM node, and
+2. Forward `style` and `className` to that same DOM node.
+
+For example:
+
+```js
+const CustomGridItemComponent = React.forwardRef(({style, className, ...props}, ref) => {
+  return (
+    <div style={{ /* styles */, ...style}} className={className} ref={ref}>
+      {/* Some other content */}
+    </div>  
+  );
+}
+```
+
+The same is true of custom elements as draggable handles using the `draggableHandle` prop. This is so that
+the underlying `react-draggable` library can get a reference to the DOM node underneath, manipulate
+positioning via `style`, and set classes.
+
 ## Contribute
@@ -522,0 +562,0 @@

No alert changes

Improved metrics

Total package byte prevSize

790139

increased by9.25%

Number of package files

35

increased by2.94%

Lines of code

6328

increased by0.4%

Number of lines in readme file

572

increased by7.52%

Dependency changes

• Updatedreact-resizable@^3.0.4