react-grid-layout 1.2.5 → 1.3.3

package/build/ReactGridLayout.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,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _lodash = _interopRequireDefault(require("lodash.isequal"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _utils = require("./utils");
 
@@ -27,43 +27,43 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _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); }
 
-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 _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; }
 
 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; }
 
@@ -92,25 +92,21 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(ReactGridLayout);
 
-  // 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;
 
     _classCallCheck(this, ReactGridLayout);
 
-    _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,
       oldDragItem: null,
       oldLayout: null,
@@ -121,35 +117,251 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "dragEnterCounter", 0);
 
+    _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: 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,
+          preventCollision = _this$props.preventCollision;
+      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, 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.
 
       var _e$nativeEvent = e.nativeEvent,
           layerX = _e$nativeEvent.layerX,
           layerY = _e$nativeEvent.layerY;
       var droppingPosition = {
-        left: layerX,
-        top: layerY,
+        left: layerX / transformScale,
+        top: layerY / transformScale,
         e: e
       };
 
@@ -164,14 +376,14 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
           containerWidth: width,
           containerPadding: containerPadding || margin
         };
-        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,
             y: calculatedPosition.y,
             static: false,
@@ -190,15 +402,12 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
           });
         }
       }
-
-      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;
       var newLayout = (0, _utils.compact)(layout.filter(function (l) {
         return l.i !== droppingItem.i;
@@ -212,7 +421,9 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _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.
       // But we know that count of dragEnter and dragLeave events
       // will be balanced after leaving the layout's container
@@ -224,13 +435,17 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onDragEnter", function () {
+    _defineProperty(_assertThisInitialized(_this), "onDragEnter", function (e) {
+      e.preventDefault(); // Prevent any browser native action
+
       _this.dragEnterCounter++;
     });
 
     _defineProperty(_assertThisInitialized(_this), "onDrop", function (e
     /*: Event*/
     ) {
+      e.preventDefault(); // Prevent any browser native action
+
       var droppingItem = _this.props.droppingItem;
       var layout = _this.state.layout;
       var item = layout.find(function (l) {
@@ -244,7 +459,6 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       _this.props.onDrop(layout, item, e);
     });
 
-    (0, _utils.autoBindHandlers)(_assertThisInitialized(_this), ["onDragStart", "onDrag", "onDragStop", "onResizeStart", "onResize", "onResizeStop"]);
     return _this;
   }
 
@@ -310,118 +524,6 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
      * @param {Element} node The current dragging DOM element
      */
 
-  }, {
-    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",
     value: function onLayoutMaybeChanged(newLayout
@@ -436,150 +538,26 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       }
     }
   }, {
-    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:
     /**
      * Create a placeholder object.
      * @return {Element} Placeholder div.
      */
-
-  }, {
-    key: "placeholder",
-    value: function placeholder()
+    function placeholder()
     /*: ?ReactElement<any>*/
     {
       var activeDrag = this.state.activeDrag;
       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
 
       return /*#__PURE__*/React.createElement(_GridItem.default, {
         w: activeDrag.w,
@@ -619,22 +597,22 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       if (!child || !child.key) return;
       var l = (0, _utils.getLayoutItem)(this.state.layout, String(child.key));
       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,
           mounted = _this$state3.mounted,
           droppingPosition = _this$state3.droppingPosition; // Determine user manipulations possible.
@@ -691,12 +669,12 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
     {
       var _this2 = this;
 
-      var _this$props7 = this.props,
-          className = _this$props7.className,
-          style = _this$props7.style,
-          isDroppable = _this$props7.isDroppable,
-          innerRef = _this$props7.innerRef;
-      var mergedClassName = (0, _classnames.default)(layoutClassName, className);
+      var _this$props9 = this.props,
+          className = _this$props9.className,
+          style = _this$props9.style,
+          isDroppable = _this$props9.isDroppable,
+          innerRef = _this$props9.innerRef;
+      var mergedClassName = (0, _clsx.default)(layoutClassName, className);
 
       var mergedStyle = _objectSpread({
         height: this.containerHeight()
@@ -742,7 +720,7 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
 
 
       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 {
           layout: newLayout,
           // We need to save these props to state for using
@@ -782,6 +760,7 @@ _defineProperty(ReactGridLayout, "defaultProps", {
   isBounded: false,
   isDraggable: true,
   isResizable: true,
+  allowOverlap: false,
   isDroppable: false,
   useCSSTransforms: true,
   transformScale: 1,
@@ -801,5 +780,6 @@ _defineProperty(ReactGridLayout, "defaultProps", {
   onResizeStart: _utils.noop,
   onResize: _utils.noop,
   onResizeStop: _utils.noop,
-  onDrop: _utils.noop
+  onDrop: _utils.noop,
+  onDropDragOver: _utils.noop
 });