react-grid-layout 1.3.4 → 1.4.0

package/build/ReactGridLayout.js

@@ -1,253 +1,253 @@
 "use strict";
 
-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
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
-var _lodash = _interopRequireDefault(require("lodash.isequal"));
-
+var _fastEquals = require("fast-equals");
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _utils = require("./utils");
-
 var _calculateUtils = require("./calculateUtils");
-
 var _GridItem = _interopRequireDefault(require("./GridItem"));
-
 var _ReactGridLayoutPropTypes = _interopRequireDefault(require("./ReactGridLayoutPropTypes"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-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); 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 = 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _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 _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 _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 _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); 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 } }); Object.defineProperty(subClass, "prototype", { 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; } 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; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/*:: import type {
+  ChildrenArray as ReactChildrenArray,
+  Element as ReactElement
+} from "react";*/
+/*:: import type {
+  CompactType,
+  GridResizeEvent,
+  GridDragEvent,
+  DragOverEvent,
+  Layout,
+  DroppingPosition,
+  LayoutItem
+} from "./utils";*/
+// Types
+/*:: import type { PositionParams } from "./calculateUtils";*/
+/*:: type State = {
+  activeDrag: ?LayoutItem,
+  layout: Layout,
+  mounted: boolean,
+  oldDragItem: ?LayoutItem,
+  oldLayout: ?Layout,
+  oldResizeItem: ?LayoutItem,
+  resizing: boolean,
+  droppingDOMNode: ?ReactElement<any>,
+  droppingPosition?: DroppingPosition,
+  // Mirrored props
+  children: ReactChildrenArray<ReactElement<any>>,
+  compactType?: CompactType,
+  propsLayout?: Layout
+};*/
+/*:: import type { Props, DefaultProps } from "./ReactGridLayoutPropTypes";*/
 // End Types
-var layoutClassName = "react-grid-layout";
-var isFirefox = false; // Try...catch will protect from navigator not existing (e.g. node) or a bad implementation of navigator
-
+const layoutClassName = "react-grid-layout";
+let isFirefox = false;
+// Try...catch will protect from navigator not existing (e.g. node) or a bad implementation of navigator
 try {
   isFirefox = /firefox/i.test(navigator.userAgent);
 } catch (e) {
   /* Ignore */
 }
+
 /**
  * A reactive, fluid grid layout with draggable, resizable components.
  */
 
-
-var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
-  _inherits(ReactGridLayout, _React$Component);
-
-  var _super = _createSuper(ReactGridLayout);
-
-  function ReactGridLayout() {
-    var _this;
-
-    _classCallCheck(this, ReactGridLayout);
-
-    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", {
+class ReactGridLayout extends React.Component /*:: <Props, State>*/{
+  constructor() {
+    super(...arguments);
+    _defineProperty(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), _this.props.allowOverlap),
+      layout: (0, _utils.synchronizeLayoutWithChildren)(this.props.layout, this.props.children, this.props.cols,
+      // Legacy support for verticalCompact: false
+      (0, _utils.compactType)(this.props), this.props.allowOverlap),
       mounted: false,
       oldDragItem: null,
       oldLayout: null,
       oldResizeItem: null,
+      resizing: false,
       droppingDOMNode: null,
       children: []
     });
-
-    _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);
+    _defineProperty(this, "dragEnterCounter", 0);
+    /**
+     * When dragging starts
+     * @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
+     */
+    _defineProperty(this, "onDragStart", (i /*: string*/, x /*: number*/, y /*: number*/, _ref /*:: */) => {
+      let {
+        e,
+        node
+      } /*: GridDragEvent*/ = _ref /*: GridDragEvent*/;
+      const {
+        layout
+      } = this.state;
+      const l = (0, _utils.getLayoutItem)(layout, i);
       if (!l) return;
-
-      _this.setState({
+      this.setState({
         oldDragItem: (0, _utils.cloneLayoutItem)(l),
         oldLayout: layout
       });
-
-      return _this.props.onDragStart(layout, l, l, null, e, node);
+      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
+     */
+    _defineProperty(this, "onDrag", (i, x, y, _ref2) => {
+      let {
+        e,
+        node
+      } = _ref2;
+      const {
+        oldDragItem
+      } = this.state;
+      let {
+        layout
+      } = this.state;
+      const {
+        cols,
+        allowOverlap,
+        preventCollision
+      } = this.props;
+      const l = (0, _utils.getLayoutItem)(layout, i);
+      if (!l) return;
 
-    _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 = {
+      // Create placeholder (display only)
+      const 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),
+      // Move the element to the dragged location.
+      const 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
       });
     });
+    /**
+     * 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
+     */
+    _defineProperty(this, "onDragStop", (i, x, y, _ref3) => {
+      let {
+        e,
+        node
+      } = _ref3;
+      if (!this.state.activeDrag) return;
+      const {
+        oldDragItem
+      } = this.state;
+      let {
+        layout
+      } = this.state;
+      const {
+        cols,
+        preventCollision,
+        allowOverlap
+      } = this.props;
+      const l = (0, _utils.getLayoutItem)(layout, i);
+      if (!l) return;
 
-    _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;
+      // Move the element here
+      const isUserAction = true;
+      layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, (0, _utils.compactType)(this.props), cols, allowOverlap);
 
-      _this.setState({
+      // Set state
+      const newLayout = allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols);
+      this.props.onDragStop(newLayout, oldDragItem, l, null, e, node);
+      const {
+        oldLayout
+      } = this.state;
+      this.setState({
         activeDrag: null,
         layout: newLayout,
         oldDragItem: null,
         oldLayout: null
       });
-
-      _this.onLayoutMaybeChanged(newLayout, oldLayout);
+      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);
+    _defineProperty(this, "onResizeStart", (i, w, h, _ref4) => {
+      let {
+        e,
+        node
+      } = _ref4;
+      const {
+        layout
+      } = this.state;
+      const l = (0, _utils.getLayoutItem)(layout, i);
       if (!l) return;
-
-      _this.setState({
+      this.setState({
         oldResizeItem: (0, _utils.cloneLayoutItem)(l),
-        oldLayout: _this.state.layout
+        oldLayout: this.state.layout,
+        resizing: true
       });
-
-      _this.props.onResizeStart(layout, l, l, null, e, node);
+      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) {
+    _defineProperty(this, "onResize", (i, w, h, _ref5) => {
+      let {
+        e,
+        node,
+        size,
+        handle
+      } = _ref5;
+      const {
+        oldResizeItem
+      } = this.state;
+      let {
+        layout
+      } = this.state;
+      const {
+        cols,
+        preventCollision,
+        allowOverlap
+      } = this.props;
+      const [newLayout, l] = (0, _utils.withLayoutItem)(layout, i, l => {
         // Something like quad tree should be used
         // to find collisions faster
-        var hasCollisions;
-
+        let 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.
+          const collisions = (0, _utils.getAllCollisions)(layout, {
+            ...l,
+            w,
+            h
+          }).filter(layoutItem => layoutItem.i !== l.i);
+          hasCollisions = collisions.length > 0;
 
           // If we're colliding, we need adjust the placeholder.
           if (hasCollisions) {
             // adjust w && h to maximum allowed space
-            var leastX = Infinity,
-                leastY = Infinity;
-            collisions.forEach(function (layoutItem) {
+            let leastX = Infinity,
+              leastY = Infinity;
+            collisions.forEach(layoutItem => {
               if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
               if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
             });
@@ -255,23 +255,38 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
             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)
+      // Shouldn't ever happen, but typechecking makes it necessary
+      if (!l) return;
+      let finalLayout;
+      if (["sw", "w", "nw", "n", "ne"].indexOf(handle) !== -1) {
+        let x = l.x;
+        let y = l.y;
+        if (["sw", "nw", "w"].indexOf(handle) !== -1) {
+          x = l.x + (l.w - w);
+          w = l.x !== x && x < 0 ? l.w : w;
+          x = x < 0 ? 0 : x;
+        }
+        if (["ne", "n", "nw"].indexOf(handle) !== -1) {
+          y = l.y + (l.h - h);
+          h = l.y !== y && y < 0 ? l.h : h;
+          y = y < 0 ? 0 : y;
+        }
+        l.w = w;
+        l.h = h;
+        // Move the element to the new position.
+        const isUserAction = true;
+        finalLayout = (0, _utils.moveElement)(newLayout, l, x, y, isUserAction, this.props.preventCollision, (0, _utils.compactType)(this.props), cols, allowOverlap);
+      } else {
+        l.w = w;
+        l.h = h;
+        finalLayout = newLayout;
+      }
 
-      var placeholder = {
+      // Create placeholder element (display only)
+      const placeholder = {
         w: l.w,
         h: l.h,
         x: l.x,
@@ -279,474 +294,401 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         static: true,
         i: i
       };
+      this.props.onResize(finalLayout, oldResizeItem, l, placeholder, e, node);
 
-      _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),
+      // Re-compact the newLayout and set the drag placeholder.
+      this.setState({
+        layout: allowOverlap ? finalLayout : (0, _utils.compact)(finalLayout, (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({
+    _defineProperty(this, "onResizeStop", (i, w, h, _ref6) => {
+      let {
+        e,
+        node
+      } = _ref6;
+      const {
+        layout,
+        oldResizeItem
+      } = this.state;
+      const {
+        cols,
+        allowOverlap
+      } = this.props;
+      const l = (0, _utils.getLayoutItem)(layout, i);
+
+      // Set state
+      const newLayout = allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols);
+      this.props.onResizeStop(newLayout, oldResizeItem, l, null, e, node);
+      const {
+        oldLayout
+      } = this.state;
+      this.setState({
         activeDrag: null,
         layout: newLayout,
         oldResizeItem: null,
-        oldLayout: null
+        oldLayout: null,
+        resizing: false
       });
-
-      _this.onLayoutMaybeChanged(newLayout, oldLayout);
+      this.onLayoutMaybeChanged(newLayout, oldLayout);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onDragOver", function (e) {
+    // Called while dragging an element. Part of browser native drag/drop API.
+    // Native event target might be the layout itself, or an element within the layout.
+    _defineProperty(this, "onDragOver", e => {
       var _e$nativeEvent$target;
-
       e.preventDefault(); // Prevent any browser native action
+      e.stopPropagation();
 
-      e.stopPropagation(); // we should ignore events from layout's children in Firefox
+      // 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
+      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))) {
         return false;
       }
-
-      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
+      const {
+        droppingItem,
+        onDropDragOver,
+        margin,
+        cols,
+        rowHeight,
+        maxRows,
+        width,
+        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.
-
-      var onDragOverResult = onDropDragOver === null || onDropDragOver === void 0 ? void 0 : onDropDragOver(e);
-
+      const onDragOverResult = onDropDragOver === null || onDropDragOver === void 0 ? void 0 : onDropDragOver(e);
       if (onDragOverResult === false) {
-        if (_this.state.droppingDOMNode) {
-          _this.removeDroppingPlaceholder();
+        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 = {
+      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 / transformScale,
         top: layerY / transformScale,
-        e: e
+        e
       };
-
-      if (!_this.state.droppingDOMNode) {
-        var positionParams
-        /*: PositionParams*/
-        = {
-          cols: cols,
-          margin: margin,
-          maxRows: maxRows,
-          rowHeight: rowHeight,
+      if (!this.state.droppingDOMNode) {
+        const positionParams /*: PositionParams*/ = {
+          cols,
+          margin,
+          maxRows,
+          rowHeight,
           containerWidth: width,
           containerPadding: containerPadding || margin
         };
-        var calculatedPosition = (0, _calculateUtils.calcXY)(positionParams, layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
-
-        _this.setState({
+        const calculatedPosition = (0, _calculateUtils.calcXY)(positionParams, layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
+        this.setState({
           droppingDOMNode: /*#__PURE__*/React.createElement("div", {
             key: finalDroppingItem.i
           }),
-          droppingPosition: droppingPosition,
-          layout: [].concat(_toConsumableArray(layout), [_objectSpread(_objectSpread({}, finalDroppingItem), {}, {
+          droppingPosition,
+          layout: [...layout, {
+            ...finalDroppingItem,
             x: calculatedPosition.x,
             y: calculatedPosition.y,
             static: false,
             isDraggable: true
-          })])
+          }]
         });
-      } else if (_this.state.droppingPosition) {
-        var _this$state$droppingP = _this.state.droppingPosition,
-            left = _this$state$droppingP.left,
-            top = _this$state$droppingP.top;
-        var shouldUpdatePosition = left != layerX || top != layerY;
-
+      } else if (this.state.droppingPosition) {
+        const {
+          left,
+          top
+        } = this.state.droppingPosition;
+        const shouldUpdatePosition = left != layerX || top != layerY;
         if (shouldUpdatePosition) {
-          _this.setState({
-            droppingPosition: droppingPosition
+          this.setState({
+            droppingPosition
           });
         }
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "removeDroppingPlaceholder", function () {
-      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;
-      }), (0, _utils.compactType)(_this.props), cols);
-
-      _this.setState({
+    _defineProperty(this, "removeDroppingPlaceholder", () => {
+      const {
+        droppingItem,
+        cols
+      } = this.props;
+      const {
+        layout
+      } = this.state;
+      const newLayout = (0, _utils.compact)(layout.filter(l => l.i !== droppingItem.i), (0, _utils.compactType)(this.props), cols, this.props.allowOverlap);
+      this.setState({
         layout: newLayout,
         droppingDOMNode: null,
         activeDrag: null,
         droppingPosition: undefined
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onDragLeave", function (e) {
+    _defineProperty(this, "onDragLeave", e => {
       e.preventDefault(); // Prevent any browser native action
-
       e.stopPropagation();
-      _this.dragEnterCounter--; // onDragLeave can be triggered on each layout's child.
+      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
       // so we can increase and decrease count of dragEnter and
       // when it'll be equal to 0 we'll remove the placeholder
-
-      if (_this.dragEnterCounter === 0) {
-        _this.removeDroppingPlaceholder();
+      if (this.dragEnterCounter === 0) {
+        this.removeDroppingPlaceholder();
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onDragEnter", function (e) {
+    _defineProperty(this, "onDragEnter", e => {
       e.preventDefault(); // Prevent any browser native action
-
       e.stopPropagation();
-      _this.dragEnterCounter++;
+      this.dragEnterCounter++;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onDrop", function (e
-    /*: Event*/
-    ) {
+    _defineProperty(this, "onDrop", (e /*: Event*/) => {
       e.preventDefault(); // Prevent any browser native action
-
       e.stopPropagation();
-      var droppingItem = _this.props.droppingItem;
-      var layout = _this.state.layout;
-      var item = layout.find(function (l) {
-        return l.i === droppingItem.i;
-      }); // reset dragEnter counter on drop
-
-      _this.dragEnterCounter = 0;
-
-      _this.removeDroppingPlaceholder();
-
-      _this.props.onDrop(layout, item, e);
+      const {
+        droppingItem
+      } = this.props;
+      const {
+        layout
+      } = this.state;
+      const item = layout.find(l => l.i === droppingItem.i);
+
+      // reset dragEnter counter on drop
+      this.dragEnterCounter = 0;
+      this.removeDroppingPlaceholder();
+      this.props.onDrop(layout, item, e);
     });
-
-    return _this;
   }
-
-  _createClass(ReactGridLayout, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.setState({
-        mounted: true
-      }); // Possibly call back with layout on mount. This should be done after correcting the layout width
-      // to ensure we don't rerender with the wrong width.
-
-      this.onLayoutMaybeChanged(this.state.layout, this.props.layout);
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps
-    /*: Props*/
-    , nextState
-    /*: State*/
-    )
-    /*: boolean*/
-    {
-      return (// NOTE: this is almost always unequal. Therefore the only way to get better performance
-        // from SCU is if the user intentionally memoizes children. If they do, and they can
-        // handle changes properly, performance will increase.
-        this.props.children !== nextProps.children || !(0, _utils.fastRGLPropsEqual)(this.props, nextProps, _lodash.default) || this.state.activeDrag !== nextState.activeDrag || this.state.mounted !== nextState.mounted || this.state.droppingPosition !== nextState.droppingPosition
-      );
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps
-    /*: Props*/
-    , prevState
-    /*: State*/
-    ) {
-      if (!this.state.activeDrag) {
-        var newLayout = this.state.layout;
-        var oldLayout = prevState.layout;
-        this.onLayoutMaybeChanged(newLayout, oldLayout);
-      }
-    }
-    /**
-     * Calculates a pixel value for the container.
-     * @return {String} Container height in pixels.
-     */
-
-  }, {
-    key: "containerHeight",
-    value: function containerHeight()
-    /*: ?string*/
-    {
-      if (!this.props.autoSize) return;
-      var nbRow = (0, _utils.bottom)(this.state.layout);
-      var containerPaddingY = this.props.containerPadding ? this.props.containerPadding[1] : this.props.margin[1];
-      return nbRow * this.props.rowHeight + (nbRow - 1) * this.props.margin[1] + containerPaddingY * 2 + "px";
+  componentDidMount() {
+    this.setState({
+      mounted: true
+    });
+    // Possibly call back with layout on mount. This should be done after correcting the layout width
+    // to ensure we don't rerender with the wrong width.
+    this.onLayoutMaybeChanged(this.state.layout, this.props.layout);
+  }
+  static getDerivedStateFromProps(nextProps /*: Props*/, prevState /*: State*/) /*: $Shape<State> | null*/{
+    let newLayoutBase;
+    if (prevState.activeDrag) {
+      return null;
     }
-    /**
-     * When dragging starts
-     * @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: "onLayoutMaybeChanged",
-    value: function onLayoutMaybeChanged(newLayout
-    /*: Layout*/
-    , oldLayout
-    /*: ?Layout*/
-    ) {
-      if (!oldLayout) oldLayout = this.state.layout;
-
-      if (!(0, _lodash.default)(oldLayout, newLayout)) {
-        this.props.onLayoutChange(newLayout);
-      }
+    // Legacy support for compactType
+    // Allow parent to set layout directly.
+    if (!(0, _fastEquals.deepEqual)(nextProps.layout, prevState.propsLayout) || nextProps.compactType !== prevState.compactType) {
+      newLayoutBase = nextProps.layout;
+    } else if (!(0, _utils.childrenEqual)(nextProps.children, prevState.children)) {
+      // If children change, also regenerate the layout. Use our state
+      // as the base in case because it may be more up to date than
+      // what is in props.
+      newLayoutBase = prevState.layout;
     }
-  }, {
-    key: "placeholder",
-    value:
-    /**
-     * Create a placeholder object.
-     * @return {Element} Placeholder div.
-     */
-    function placeholder()
-    /*: ?ReactElement<any>*/
-    {
-      var activeDrag = this.state.activeDrag;
-      if (!activeDrag) return null;
-      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,
-        h: activeDrag.h,
-        x: activeDrag.x,
-        y: activeDrag.y,
-        i: activeDrag.i,
-        className: "react-grid-placeholder",
-        containerWidth: width,
-        cols: cols,
-        margin: margin,
-        containerPadding: containerPadding || margin,
-        maxRows: maxRows,
-        rowHeight: rowHeight,
-        isDraggable: false,
-        isResizable: false,
-        isBounded: false,
-        useCSSTransforms: useCSSTransforms,
-        transformScale: transformScale
-      }, /*#__PURE__*/React.createElement("div", null));
+    // We need to regenerate the layout.
+    if (newLayoutBase) {
+      const 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
+        // getDerivedStateFromProps instead of componentDidMount (in which we would get extra rerender)
+        compactType: nextProps.compactType,
+        children: nextProps.children,
+        propsLayout: nextProps.layout
+      };
     }
-    /**
-     * Given a grid item, set its style attributes & surround in a <Draggable>.
-     * @param  {Element} child React element.
-     * @return {Element}       Element wrapped in draggable and properly placed.
-     */
-
-  }, {
-    key: "processGridItem",
-    value: function processGridItem(child
-    /*: ReactElement<any>*/
-    , isDroppingItem
-    /*: boolean*/
-    )
-    /*: ?ReactElement<any>*/
-    {
-      if (!child || !child.key) return;
-      var l = (0, _utils.getLayoutItem)(this.state.layout, String(child.key));
-      if (!l) return null;
-      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.
-      // If an item is static, it can't be manipulated by default.
-      // Any properties defined directly on the grid item will take precedence.
-
-      var draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
-      var resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
-      var resizeHandlesOptions = l.resizeHandles || resizeHandles; // isBounded set on child if set on parent, and child is not explicitly false
-
-      var bounded = draggable && isBounded && l.isBounded !== false;
-      return /*#__PURE__*/React.createElement(_GridItem.default, {
-        containerWidth: width,
-        cols: cols,
-        margin: margin,
-        containerPadding: containerPadding || margin,
-        maxRows: maxRows,
-        rowHeight: rowHeight,
-        cancel: draggableCancel,
-        handle: draggableHandle,
-        onDragStop: this.onDragStop,
-        onDragStart: this.onDragStart,
-        onDrag: this.onDrag,
-        onResizeStart: this.onResizeStart,
-        onResize: this.onResize,
-        onResizeStop: this.onResizeStop,
-        isDraggable: draggable,
-        isResizable: resizable,
-        isBounded: bounded,
-        useCSSTransforms: useCSSTransforms && mounted,
-        usePercentages: !mounted,
-        transformScale: transformScale,
-        w: l.w,
-        h: l.h,
-        x: l.x,
-        y: l.y,
-        i: l.i,
-        minH: l.minH,
-        minW: l.minW,
-        maxH: l.maxH,
-        maxW: l.maxW,
-        static: l.static,
-        droppingPosition: isDroppingItem ? droppingPosition : undefined,
-        resizeHandles: resizeHandlesOptions,
-        resizeHandle: resizeHandle
-      }, child);
-    } // Called while dragging an element. Part of browser native drag/drop API.
-    // Native event target might be the layout itself, or an element within the layout.
-
-  }, {
-    key: "render",
-    value: function render()
-    /*: React.Element<"div">*/
-    {
-      var _this2 = this;
-
-      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()
-      }, style);
-
-      return /*#__PURE__*/React.createElement("div", {
-        ref: innerRef,
-        className: mergedClassName,
-        style: mergedStyle,
-        onDrop: isDroppable ? this.onDrop : _utils.noop,
-        onDragLeave: isDroppable ? this.onDragLeave : _utils.noop,
-        onDragEnter: isDroppable ? this.onDragEnter : _utils.noop,
-        onDragOver: isDroppable ? this.onDragOver : _utils.noop
-      }, React.Children.map(this.props.children, function (child) {
-        return _this2.processGridItem(child);
-      }), isDroppable && this.state.droppingDOMNode && this.processGridItem(this.state.droppingDOMNode, true), this.placeholder());
+    return null;
+  }
+  shouldComponentUpdate(nextProps /*: Props*/, nextState /*: State*/) /*: boolean*/{
+    return (
+      // NOTE: this is almost always unequal. Therefore the only way to get better performance
+      // from SCU is if the user intentionally memoizes children. If they do, and they can
+      // handle changes properly, performance will increase.
+      this.props.children !== nextProps.children || !(0, _utils.fastRGLPropsEqual)(this.props, nextProps, _fastEquals.deepEqual) || this.state.activeDrag !== nextState.activeDrag || this.state.mounted !== nextState.mounted || this.state.droppingPosition !== nextState.droppingPosition
+    );
+  }
+  componentDidUpdate(prevProps /*: Props*/, prevState /*: State*/) {
+    if (!this.state.activeDrag) {
+      const newLayout = this.state.layout;
+      const oldLayout = prevState.layout;
+      this.onLayoutMaybeChanged(newLayout, oldLayout);
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps
-    /*: Props*/
-    , prevState
-    /*: State*/
-    )
-    /*: $Shape<State> | null*/
-    {
-      var newLayoutBase;
-
-      if (prevState.activeDrag) {
-        return null;
-      } // Legacy support for compactType
-      // Allow parent to set layout directly.
-
-
-      if (!(0, _lodash.default)(nextProps.layout, prevState.propsLayout) || nextProps.compactType !== prevState.compactType) {
-        newLayoutBase = nextProps.layout;
-      } else if (!(0, _utils.childrenEqual)(nextProps.children, prevState.children)) {
-        // If children change, also regenerate the layout. Use our state
-        // as the base in case because it may be more up to date than
-        // what is in props.
-        newLayoutBase = prevState.layout;
-      } // We need to regenerate the layout.
-
-
-      if (newLayoutBase) {
-        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
-          // getDerivedStateFromProps instead of componentDidMount (in which we would get extra rerender)
-          compactType: nextProps.compactType,
-          children: nextProps.children,
-          propsLayout: nextProps.layout
-        };
-      }
+  }
 
-      return null;
+  /**
+   * Calculates a pixel value for the container.
+   * @return {String} Container height in pixels.
+   */
+  containerHeight() /*: ?string*/{
+    if (!this.props.autoSize) return;
+    const nbRow = (0, _utils.bottom)(this.state.layout);
+    const containerPaddingY = this.props.containerPadding ? this.props.containerPadding[1] : this.props.margin[1];
+    return nbRow * this.props.rowHeight + (nbRow - 1) * this.props.margin[1] + containerPaddingY * 2 + "px";
+  }
+  onLayoutMaybeChanged(newLayout /*: Layout*/, oldLayout /*: ?Layout*/) {
+    if (!oldLayout) oldLayout = this.state.layout;
+    if (!(0, _fastEquals.deepEqual)(oldLayout, newLayout)) {
+      this.props.onLayoutChange(newLayout);
     }
-  }]);
-
-  return ReactGridLayout;
-}(React.Component);
+  }
+  /**
+   * Create a placeholder object.
+   * @return {Element} Placeholder div.
+   */
+  placeholder() /*: ?ReactElement<any>*/{
+    const {
+      activeDrag
+    } = this.state;
+    if (!activeDrag) return null;
+    const {
+      width,
+      cols,
+      margin,
+      containerPadding,
+      rowHeight,
+      maxRows,
+      useCSSTransforms,
+      transformScale
+    } = this.props;
+
+    // {...this.state.activeDrag} is pretty slow, actually
+    return /*#__PURE__*/React.createElement(_GridItem.default, {
+      w: activeDrag.w,
+      h: activeDrag.h,
+      x: activeDrag.x,
+      y: activeDrag.y,
+      i: activeDrag.i,
+      className: "react-grid-placeholder ".concat(this.state.resizing ? "placeholder-resizing" : ""),
+      containerWidth: width,
+      cols: cols,
+      margin: margin,
+      containerPadding: containerPadding || margin,
+      maxRows: maxRows,
+      rowHeight: rowHeight,
+      isDraggable: false,
+      isResizable: false,
+      isBounded: false,
+      useCSSTransforms: useCSSTransforms,
+      transformScale: transformScale
+    }, /*#__PURE__*/React.createElement("div", null));
+  }
 
+  /**
+   * Given a grid item, set its style attributes & surround in a <Draggable>.
+   * @param  {Element} child React element.
+   * @return {Element}       Element wrapped in draggable and properly placed.
+   */
+  processGridItem(child /*: ReactElement<any>*/, isDroppingItem /*: boolean*/) /*: ?ReactElement<any>*/{
+    if (!child || !child.key) return;
+    const l = (0, _utils.getLayoutItem)(this.state.layout, String(child.key));
+    if (!l) return null;
+    const {
+      width,
+      cols,
+      margin,
+      containerPadding,
+      rowHeight,
+      maxRows,
+      isDraggable,
+      isResizable,
+      isBounded,
+      useCSSTransforms,
+      transformScale,
+      draggableCancel,
+      draggableHandle,
+      resizeHandles,
+      resizeHandle
+    } = this.props;
+    const {
+      mounted,
+      droppingPosition
+    } = this.state;
+
+    // Determine user manipulations possible.
+    // If an item is static, it can't be manipulated by default.
+    // Any properties defined directly on the grid item will take precedence.
+    const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
+    const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
+    const resizeHandlesOptions = l.resizeHandles || resizeHandles;
+
+    // isBounded set on child if set on parent, and child is not explicitly false
+    const bounded = draggable && isBounded && l.isBounded !== false;
+    return /*#__PURE__*/React.createElement(_GridItem.default, {
+      containerWidth: width,
+      cols: cols,
+      margin: margin,
+      containerPadding: containerPadding || margin,
+      maxRows: maxRows,
+      rowHeight: rowHeight,
+      cancel: draggableCancel,
+      handle: draggableHandle,
+      onDragStop: this.onDragStop,
+      onDragStart: this.onDragStart,
+      onDrag: this.onDrag,
+      onResizeStart: this.onResizeStart,
+      onResize: this.onResize,
+      onResizeStop: this.onResizeStop,
+      isDraggable: draggable,
+      isResizable: resizable,
+      isBounded: bounded,
+      useCSSTransforms: useCSSTransforms && mounted,
+      usePercentages: !mounted,
+      transformScale: transformScale,
+      w: l.w,
+      h: l.h,
+      x: l.x,
+      y: l.y,
+      i: l.i,
+      minH: l.minH,
+      minW: l.minW,
+      maxH: l.maxH,
+      maxW: l.maxW,
+      static: l.static,
+      droppingPosition: isDroppingItem ? droppingPosition : undefined,
+      resizeHandles: resizeHandlesOptions,
+      resizeHandle: resizeHandle
+    }, child);
+  }
+  render() /*: React.Element<"div">*/{
+    const {
+      className,
+      style,
+      isDroppable,
+      innerRef
+    } = this.props;
+    const mergedClassName = (0, _clsx.default)(layoutClassName, className);
+    const mergedStyle = {
+      height: this.containerHeight(),
+      ...style
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      ref: innerRef,
+      className: mergedClassName,
+      style: mergedStyle,
+      onDrop: isDroppable ? this.onDrop : _utils.noop,
+      onDragLeave: isDroppable ? this.onDragLeave : _utils.noop,
+      onDragEnter: isDroppable ? this.onDragEnter : _utils.noop,
+      onDragOver: isDroppable ? this.onDragOver : _utils.noop
+    }, React.Children.map(this.props.children, child => this.processGridItem(child)), isDroppable && this.state.droppingDOMNode && this.processGridItem(this.state.droppingDOMNode, true), this.placeholder());
+  }
+}
 exports.default = ReactGridLayout;
-
+// TODO publish internal ReactClass displayName transform
 _defineProperty(ReactGridLayout, "displayName", "ReactGridLayout");
-
+// Refactored to another module to make way for preval
 _defineProperty(ReactGridLayout, "propTypes", _ReactGridLayoutPropTypes.default);
-
 _defineProperty(ReactGridLayout, "defaultProps", {
   autoSize: true,
   cols: 12,