react-grid-layout 1.3.3 → 1.4.0

package/build/GridItem.js

@@ -1,542 +1,656 @@
 "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 = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactDraggable = require("react-draggable");
-
 var _reactResizable = require("react-resizable");
-
 var _utils = require("./utils");
-
 var _calculateUtils = require("./calculateUtils");
-
 var _ReactGridLayoutPropTypes = require("./ReactGridLayoutPropTypes");
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 _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"); } 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; } 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 _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 { Element as ReactElement, Node as ReactNode } from "react";*/
+/*:: import type {
+  ReactDraggableCallbackData,
+  GridDragEvent,
+  GridResizeEvent,
+  DroppingPosition,
+  Position
+} from "./utils";*/
+/*:: import type { PositionParams } from "./calculateUtils";*/
+/*:: import type {
+  ResizeHandleAxis,
+  ResizeHandle,
+  ReactRef
+} from "./ReactGridLayoutPropTypes";*/
+/*:: type PartialPosition = { top: number, left: number };*/
+/*:: type GridItemCallback<Data: GridDragEvent | GridResizeEvent> = (
+  i: string,
+  w: number,
+  h: number,
+  Data
+) => void;*/
+/*:: type GridItemResizeCallback = (
+  e: Event,
+  data: ResizeCallbackData,
+  position: Position
+) => void;*/
+/*:: type ResizeCallbackData = {
+  node: HTMLElement,
+  size: Position,
+  handle: string
+};*/
+/*:: type State = {
+  resizing: ?{ top: number, left: number, width: number, height: number },
+  dragging: ?{ top: number, left: number },
+  className: string
+};*/
+/*:: type Props = {
+  children: ReactElement<any>,
+  cols: number,
+  containerWidth: number,
+  margin: [number, number],
+  containerPadding: [number, number],
+  rowHeight: number,
+  maxRows: number,
+  isDraggable: boolean,
+  isResizable: boolean,
+  isBounded: boolean,
+  static?: boolean,
+  useCSSTransforms?: boolean,
+  usePercentages?: boolean,
+  transformScale: number,
+  droppingPosition?: DroppingPosition,
+
+  className: string,
+  style?: Object,
+  // Draggability
+  cancel: string,
+  handle: string,
+
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+
+  minW: number,
+  maxW: number,
+  minH: number,
+  maxH: number,
+  i: string,
+
+  resizeHandles?: ResizeHandleAxis[],
+  resizeHandle?: ResizeHandle,
+
+  onDrag?: GridItemCallback<GridDragEvent>,
+  onDragStart?: GridItemCallback<GridDragEvent>,
+  onDragStop?: GridItemCallback<GridDragEvent>,
+  onResize?: GridItemCallback<GridResizeEvent>,
+  onResizeStart?: GridItemCallback<GridResizeEvent>,
+  onResizeStop?: GridItemCallback<GridResizeEvent>
+};*/
+/*:: type DefaultProps = {
+  className: string,
+  cancel: string,
+  handle: string,
+  minH: number,
+  minW: number,
+  maxH: number,
+  maxW: number,
+  transformScale: number
+};*/
 /**
  * An individual item within a ReactGridLayout.
  */
-var GridItem = /*#__PURE__*/function (_React$Component) {
-  _inherits(GridItem, _React$Component);
-
-  var _super = _createSuper(GridItem);
-
-  function GridItem() {
-    var _this;
-
-    _classCallCheck(this, GridItem);
-
-    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 GridItem extends _react.default.Component /*:: <Props, State>*/{
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
       resizing: null,
       dragging: null,
       className: ""
     });
-
-    _defineProperty(_assertThisInitialized(_this), "elementRef", /*#__PURE__*/_react.default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "onDragStart", function (e, _ref) {
-      var node = _ref.node;
-      var _this$props = _this.props,
-          onDragStart = _this$props.onDragStart,
-          transformScale = _this$props.transformScale;
+    _defineProperty(this, "elementRef", /*#__PURE__*/_react.default.createRef());
+    /**
+     * onDragStart event handler
+     * @param  {Event}  e             event data
+     * @param  {Object} callbackData  an object with node, delta and position information
+     */
+    _defineProperty(this, "onDragStart", (e, _ref) => {
+      let {
+        node
+      } = _ref;
+      const {
+        onDragStart,
+        transformScale
+      } = this.props;
       if (!onDragStart) return;
-      var newPosition
-      /*: PartialPosition*/
-      = {
+      const newPosition /*: PartialPosition*/ = {
         top: 0,
         left: 0
-      }; // TODO: this wont work on nested parents
+      };
 
-      var offsetParent = node.offsetParent;
+      // TODO: this wont work on nested parents
+      const {
+        offsetParent
+      } = node;
       if (!offsetParent) return;
-      var parentRect = offsetParent.getBoundingClientRect();
-      var clientRect = node.getBoundingClientRect();
-      var cLeft = clientRect.left / transformScale;
-      var pLeft = parentRect.left / transformScale;
-      var cTop = clientRect.top / transformScale;
-      var pTop = parentRect.top / transformScale;
+      const parentRect = offsetParent.getBoundingClientRect();
+      const clientRect = node.getBoundingClientRect();
+      const cLeft = clientRect.left / transformScale;
+      const pLeft = parentRect.left / transformScale;
+      const cTop = clientRect.top / transformScale;
+      const pTop = parentRect.top / transformScale;
       newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
       newPosition.top = cTop - pTop + offsetParent.scrollTop;
-
-      _this.setState({
+      this.setState({
         dragging: newPosition
-      }); // Call callback with this data
-
-
-      var _calcXY = (0, _calculateUtils.calcXY)(_this.getPositionParams(), newPosition.top, newPosition.left, _this.props.w, _this.props.h),
-          x = _calcXY.x,
-          y = _calcXY.y;
+      });
 
-      return onDragStart.call(_assertThisInitialized(_this), _this.props.i, x, y, {
-        e: e,
-        node: node,
-        newPosition: newPosition
+      // Call callback with this data
+      const {
+        x,
+        y
+      } = (0, _calculateUtils.calcXY)(this.getPositionParams(), newPosition.top, newPosition.left, this.props.w, this.props.h);
+      return onDragStart.call(this, this.props.i, x, y, {
+        e,
+        node,
+        newPosition
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onDrag", function (e, _ref2) {
-      var node = _ref2.node,
-          deltaX = _ref2.deltaX,
-          deltaY = _ref2.deltaY;
-      var onDrag = _this.props.onDrag;
+    /**
+     * onDrag event handler
+     * @param  {Event}  e             event data
+     * @param  {Object} callbackData  an object with node, delta and position information
+     */
+    _defineProperty(this, "onDrag", (e, _ref2) => {
+      let {
+        node,
+        deltaX,
+        deltaY
+      } = _ref2;
+      const {
+        onDrag
+      } = this.props;
       if (!onDrag) return;
-
-      if (!_this.state.dragging) {
+      if (!this.state.dragging) {
         throw new Error("onDrag called before onDragStart.");
       }
-
-      var top = _this.state.dragging.top + deltaY;
-      var left = _this.state.dragging.left + deltaX;
-      var _this$props2 = _this.props,
-          isBounded = _this$props2.isBounded,
-          i = _this$props2.i,
-          w = _this$props2.w,
-          h = _this$props2.h,
-          containerWidth = _this$props2.containerWidth;
-
-      var positionParams = _this.getPositionParams(); // Boundary calculations; keeps items within the grid
-
-
+      let top = this.state.dragging.top + deltaY;
+      let left = this.state.dragging.left + deltaX;
+      const {
+        isBounded,
+        i,
+        w,
+        h,
+        containerWidth
+      } = this.props;
+      const positionParams = this.getPositionParams();
+
+      // Boundary calculations; keeps items within the grid
       if (isBounded) {
-        var offsetParent = node.offsetParent;
-
+        const {
+          offsetParent
+        } = node;
         if (offsetParent) {
-          var _this$props3 = _this.props,
-              margin = _this$props3.margin,
-              rowHeight = _this$props3.rowHeight;
-          var bottomBoundary = offsetParent.clientHeight - (0, _calculateUtils.calcGridItemWHPx)(h, rowHeight, margin[1]);
+          const {
+            margin,
+            rowHeight
+          } = this.props;
+          const bottomBoundary = offsetParent.clientHeight - (0, _calculateUtils.calcGridItemWHPx)(h, rowHeight, margin[1]);
           top = (0, _calculateUtils.clamp)(top, 0, bottomBoundary);
-          var colWidth = (0, _calculateUtils.calcGridColWidth)(positionParams);
-          var rightBoundary = containerWidth - (0, _calculateUtils.calcGridItemWHPx)(w, colWidth, margin[0]);
+          const colWidth = (0, _calculateUtils.calcGridColWidth)(positionParams);
+          const rightBoundary = containerWidth - (0, _calculateUtils.calcGridItemWHPx)(w, colWidth, margin[0]);
           left = (0, _calculateUtils.clamp)(left, 0, rightBoundary);
         }
       }
-
-      var newPosition
-      /*: PartialPosition*/
-      = {
-        top: top,
-        left: left
+      const newPosition /*: PartialPosition*/ = {
+        top,
+        left
       };
-
-      _this.setState({
+      this.setState({
         dragging: newPosition
-      }); // Call callback with this data
-
-
-      var _calcXY2 = (0, _calculateUtils.calcXY)(positionParams, top, left, w, h),
-          x = _calcXY2.x,
-          y = _calcXY2.y;
+      });
 
-      return onDrag.call(_assertThisInitialized(_this), i, x, y, {
-        e: e,
-        node: node,
-        newPosition: newPosition
+      // Call callback with this data
+      const {
+        x,
+        y
+      } = (0, _calculateUtils.calcXY)(positionParams, top, left, w, h);
+      return onDrag.call(this, i, x, y, {
+        e,
+        node,
+        newPosition
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onDragStop", function (e, _ref3) {
-      var node = _ref3.node;
-      var onDragStop = _this.props.onDragStop;
+    /**
+     * onDragStop event handler
+     * @param  {Event}  e             event data
+     * @param  {Object} callbackData  an object with node, delta and position information
+     */
+    _defineProperty(this, "onDragStop", (e, _ref3) => {
+      let {
+        node
+      } = _ref3;
+      const {
+        onDragStop
+      } = this.props;
       if (!onDragStop) return;
-
-      if (!_this.state.dragging) {
+      if (!this.state.dragging) {
         throw new Error("onDragEnd called before onDragStart.");
       }
-
-      var _this$props4 = _this.props,
-          w = _this$props4.w,
-          h = _this$props4.h,
-          i = _this$props4.i;
-      var _this$state$dragging = _this.state.dragging,
-          left = _this$state$dragging.left,
-          top = _this$state$dragging.top;
-      var newPosition
-      /*: PartialPosition*/
-      = {
-        top: top,
-        left: left
+      const {
+        w,
+        h,
+        i
+      } = this.props;
+      const {
+        left,
+        top
+      } = this.state.dragging;
+      const newPosition /*: PartialPosition*/ = {
+        top,
+        left
       };
-
-      _this.setState({
+      this.setState({
         dragging: null
       });
-
-      var _calcXY3 = (0, _calculateUtils.calcXY)(_this.getPositionParams(), top, left, w, h),
-          x = _calcXY3.x,
-          y = _calcXY3.y;
-
-      return onDragStop.call(_assertThisInitialized(_this), i, x, y, {
-        e: e,
-        node: node,
-        newPosition: newPosition
+      const {
+        x,
+        y
+      } = (0, _calculateUtils.calcXY)(this.getPositionParams(), top, left, w, h);
+      return onDragStop.call(this, i, x, y, {
+        e,
+        node,
+        newPosition
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "onResizeStop", function (e, callbackData) {
-      _this.onResizeHandler(e, callbackData, "onResizeStop");
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onResizeStart", function (e, callbackData) {
-      _this.onResizeHandler(e, callbackData, "onResizeStart");
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onResize", function (e, callbackData) {
-      _this.onResizeHandler(e, callbackData, "onResize");
-    });
-
-    return _this;
-  }
-
-  _createClass(GridItem, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps
-    /*: Props*/
-    , nextState
-    /*: State*/
-    )
-    /*: boolean*/
-    {
-      // We can't deeply compare children. If the developer memoizes them, we can
-      // use this optimization.
-      if (this.props.children !== nextProps.children) return true;
-      if (this.props.droppingPosition !== nextProps.droppingPosition) return true; // TODO memoize these calculations so they don't take so long?
-
-      var oldPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(this.props), this.props.x, this.props.y, this.props.w, this.props.h, this.state);
-      var newPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(nextProps), nextProps.x, nextProps.y, nextProps.w, nextProps.h, nextState);
-      return !(0, _utils.fastPositionEqual)(oldPosition, newPosition) || this.props.useCSSTransforms !== nextProps.useCSSTransforms;
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.moveDroppingItem({});
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps
-    /*: Props*/
-    ) {
-      this.moveDroppingItem(prevProps);
-    } // When a droppingPosition is present, this means we should fire a move event, as if we had moved
-    // this element by `x, y` pixels.
-
-  }, {
-    key: "moveDroppingItem",
-    value: function moveDroppingItem(prevProps
-    /*: Props*/
-    ) {
-      var droppingPosition = this.props.droppingPosition;
-      if (!droppingPosition) return;
-      var node = this.elementRef.current; // Can't find DOM node (are we unmounted?)
-
-      if (!node) return;
-      var prevDroppingPosition = prevProps.droppingPosition || {
-        left: 0,
-        top: 0
-      };
-      var dragging = this.state.dragging;
-      var shouldDrag = dragging && droppingPosition.left !== prevDroppingPosition.left || droppingPosition.top !== prevDroppingPosition.top;
-
-      if (!dragging) {
-        this.onDragStart(droppingPosition.e, {
-          node: node,
-          deltaX: droppingPosition.left,
-          deltaY: droppingPosition.top
-        });
-      } else if (shouldDrag) {
-        var deltaX = droppingPosition.left - dragging.left;
-        var deltaY = droppingPosition.top - dragging.top;
-        this.onDrag(droppingPosition.e, {
-          node: node,
-          deltaX: deltaX,
-          deltaY: deltaY
-        });
-      }
-    }
-  }, {
-    key: "getPositionParams",
-    value: function getPositionParams()
-    /*: PositionParams*/
-    {
-      var props
-      /*: Props*/
-      = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
-      return {
-        cols: props.cols,
-        containerPadding: props.containerPadding,
-        containerWidth: props.containerWidth,
-        margin: props.margin,
-        maxRows: props.maxRows,
-        rowHeight: props.rowHeight
-      };
-    }
     /**
-     * This is where we set the grid item's absolute placement. It gets a little tricky because we want to do it
-     * well when server rendering, and the only way to do that properly is to use percentage width/left because
-     * we don't know exactly what the browser viewport is.
-     * Unfortunately, CSS Transforms, which are great for performance, break in this instance because a percentage
-     * left is relative to the item itself, not its container! So we cannot use them on the server rendering pass.
-     *
-     * @param  {Object} pos Position object with width, height, left, top.
-     * @return {Object}     Style object.
-     */
-
-  }, {
-    key: "createStyle",
-    value: function createStyle(pos
-    /*: Position*/
-    )
-    /*: { [key: string]: ?string }*/
-    {
-      var _this$props5 = this.props,
-          usePercentages = _this$props5.usePercentages,
-          containerWidth = _this$props5.containerWidth,
-          useCSSTransforms = _this$props5.useCSSTransforms;
-      var style; // CSS Transforms support (default)
-
-      if (useCSSTransforms) {
-        style = (0, _utils.setTransform)(pos);
-      } else {
-        // top,left (slow)
-        style = (0, _utils.setTopLeft)(pos); // This is used for server rendering.
-
-        if (usePercentages) {
-          style.left = (0, _utils.perc)(pos.left / containerWidth);
-          style.width = (0, _utils.perc)(pos.width / containerWidth);
-        }
-      }
-
-      return style;
-    }
-    /**
-     * Mix a Draggable instance into a child.
-     * @param  {Element} child    Child element.
-     * @return {Element}          Child wrapped in Draggable.
+     * onResizeStop event handler
+     * @param  {Event}  e             event data
+     * @param  {Object} callbackData  an object with node and size information
      */
+    _defineProperty(this, "onResizeStop", (e, callbackData, position) => this.onResizeHandler(e, callbackData, position, "onResizeStop"));
+    // onResizeStart event handler
+    _defineProperty(this, "onResizeStart", (e, callbackData, position) => this.onResizeHandler(e, callbackData, position, "onResizeStart"));
+    // onResize event handler
+    _defineProperty(this, "onResize", (e, callbackData, position) => this.onResizeHandler(e, callbackData, position, "onResize"));
+  }
+  shouldComponentUpdate(nextProps /*: Props*/, nextState /*: State*/) /*: boolean*/{
+    // We can't deeply compare children. If the developer memoizes them, we can
+    // use this optimization.
+    if (this.props.children !== nextProps.children) return true;
+    if (this.props.droppingPosition !== nextProps.droppingPosition) return true;
+    // TODO memoize these calculations so they don't take so long?
+    const oldPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(this.props), this.props.x, this.props.y, this.props.w, this.props.h, this.state);
+    const newPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(nextProps), nextProps.x, nextProps.y, nextProps.w, nextProps.h, nextState);
+    return !(0, _utils.fastPositionEqual)(oldPosition, newPosition) || this.props.useCSSTransforms !== nextProps.useCSSTransforms;
+  }
+  componentDidMount() {
+    this.moveDroppingItem({});
+  }
+  componentDidUpdate(prevProps /*: Props*/) {
+    this.moveDroppingItem(prevProps);
+  }
 
-  }, {
-    key: "mixinDraggable",
-    value: function mixinDraggable(child
-    /*: ReactElement<any>*/
-    , isDraggable
-    /*: boolean*/
-    )
-    /*: ReactElement<any>*/
-    {
-      return /*#__PURE__*/_react.default.createElement(_reactDraggable.DraggableCore, {
-        disabled: !isDraggable,
-        onStart: this.onDragStart,
-        onDrag: this.onDrag,
-        onStop: this.onDragStop,
-        handle: this.props.handle,
-        cancel: ".react-resizable-handle" + (this.props.cancel ? "," + this.props.cancel : ""),
-        scale: this.props.transformScale,
-        nodeRef: this.elementRef
-      }, child);
+  // When a droppingPosition is present, this means we should fire a move event, as if we had moved
+  // this element by `x, y` pixels.
+  moveDroppingItem(prevProps /*: Props*/) {
+    const {
+      droppingPosition
+    } = this.props;
+    if (!droppingPosition) return;
+    const node = this.elementRef.current;
+    // Can't find DOM node (are we unmounted?)
+    if (!node) return;
+    const prevDroppingPosition = prevProps.droppingPosition || {
+      left: 0,
+      top: 0
+    };
+    const {
+      dragging
+    } = this.state;
+    const shouldDrag = dragging && droppingPosition.left !== prevDroppingPosition.left || droppingPosition.top !== prevDroppingPosition.top;
+    if (!dragging) {
+      this.onDragStart(droppingPosition.e, {
+        node,
+        deltaX: droppingPosition.left,
+        deltaY: droppingPosition.top
+      });
+    } else if (shouldDrag) {
+      const deltaX = droppingPosition.left - dragging.left;
+      const deltaY = droppingPosition.top - dragging.top;
+      this.onDrag(droppingPosition.e, {
+        node,
+        deltaX,
+        deltaY
+      });
     }
-    /**
-     * Mix a Resizable instance into a child.
-     * @param  {Element} child    Child element.
-     * @param  {Object} position  Position object (pixel values)
-     * @return {Element}          Child wrapped in Resizable.
-     */
-
-  }, {
-    key: "mixinResizable",
-    value: function mixinResizable(child
-    /*: ReactElement<any>*/
-    , position
-    /*: Position*/
-    , isResizable
-    /*: boolean*/
-    )
-    /*: ReactElement<any>*/
-    {
-      var _this$props6 = this.props,
-          cols = _this$props6.cols,
-          x = _this$props6.x,
-          minW = _this$props6.minW,
-          minH = _this$props6.minH,
-          maxW = _this$props6.maxW,
-          maxH = _this$props6.maxH,
-          transformScale = _this$props6.transformScale,
-          resizeHandles = _this$props6.resizeHandles,
-          resizeHandle = _this$props6.resizeHandle;
-      var positionParams = this.getPositionParams(); // This is the max possible width - doesn't go to infinity because of the width of the window
-
-      var maxWidth = (0, _calculateUtils.calcGridItemPosition)(positionParams, 0, 0, cols - x, 0).width; // Calculate min/max constraints using our min & maxes
+  }
+  getPositionParams() /*: PositionParams*/{
+    let props /*: Props*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
+    return {
+      cols: props.cols,
+      containerPadding: props.containerPadding,
+      containerWidth: props.containerWidth,
+      margin: props.margin,
+      maxRows: props.maxRows,
+      rowHeight: props.rowHeight
+    };
+  }
 
-      var mins = (0, _calculateUtils.calcGridItemPosition)(positionParams, 0, 0, minW, minH);
-      var maxes = (0, _calculateUtils.calcGridItemPosition)(positionParams, 0, 0, maxW, maxH);
-      var minConstraints = [mins.width, mins.height];
-      var maxConstraints = [Math.min(maxes.width, maxWidth), Math.min(maxes.height, Infinity)];
-      return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable // These are opts for the resize handle itself
-      , {
-        draggableOpts: {
-          disabled: !isResizable
-        },
-        className: isResizable ? undefined : "react-resizable-hide",
-        width: position.width,
-        height: position.height,
-        minConstraints: minConstraints,
-        maxConstraints: maxConstraints,
-        onResizeStop: this.onResizeStop,
-        onResizeStart: this.onResizeStart,
-        onResize: this.onResize,
-        transformScale: transformScale,
-        resizeHandles: resizeHandles,
-        handle: resizeHandle
-      }, child);
+  /**
+   * This is where we set the grid item's absolute placement. It gets a little tricky because we want to do it
+   * well when server rendering, and the only way to do that properly is to use percentage width/left because
+   * we don't know exactly what the browser viewport is.
+   * Unfortunately, CSS Transforms, which are great for performance, break in this instance because a percentage
+   * left is relative to the item itself, not its container! So we cannot use them on the server rendering pass.
+   *
+   * @param  {Object} pos Position object with width, height, left, top.
+   * @return {Object}     Style object.
+   */
+  createStyle(pos /*: Position*/) /*: { [key: string]: ?string }*/{
+    const {
+      usePercentages,
+      containerWidth,
+      useCSSTransforms
+    } = this.props;
+    let style;
+    // CSS Transforms support (default)
+    if (useCSSTransforms) {
+      style = (0, _utils.setTransform)(pos);
+    } else {
+      // top,left (slow)
+      style = (0, _utils.setTopLeft)(pos);
+
+      // This is used for server rendering.
+      if (usePercentages) {
+        style.left = (0, _utils.perc)(pos.left / containerWidth);
+        style.width = (0, _utils.perc)(pos.width / containerWidth);
+      }
     }
-    /**
-     * onDragStart event handler
-     * @param  {Event}  e             event data
-     * @param  {Object} callbackData  an object with node, delta and position information
-     */
-
-  }, {
-    key: "onResizeHandler",
-    value:
-    /**
-     * Wrapper around drag events to provide more useful data.
-     * All drag events call the function with the given handler name,
-     * with the signature (index, x, y).
-     *
-     * @param  {String} handlerName Handler name to wrap.
-     * @return {Function}           Handler function.
-     */
-    function onResizeHandler(e
-    /*: Event*/
-    , _ref4, handlerName
-    /*: string*/
-    )
-    /*: void*/
-    {
-      var node = _ref4.node,
-          size = _ref4.size;
-      var handler = this.props[handlerName];
-      if (!handler) return;
-      var _this$props7 = this.props,
-          cols = _this$props7.cols,
-          x = _this$props7.x,
-          y = _this$props7.y,
-          i = _this$props7.i,
-          maxH = _this$props7.maxH,
-          minH = _this$props7.minH;
-      var _this$props8 = this.props,
-          minW = _this$props8.minW,
-          maxW = _this$props8.maxW; // Get new XY
-
-      var _calcWH = (0, _calculateUtils.calcWH)(this.getPositionParams(), size.width, size.height, x, y),
-          w = _calcWH.w,
-          h = _calcWH.h; // minW should be at least 1 (TODO propTypes validation?)
-
+    return style;
+  }
 
-      minW = Math.max(minW, 1); // maxW should be at most (cols - x)
+  /**
+   * Mix a Draggable instance into a child.
+   * @param  {Element} child    Child element.
+   * @return {Element}          Child wrapped in Draggable.
+   */
+  mixinDraggable(child /*: ReactElement<any>*/, isDraggable /*: boolean*/) /*: ReactElement<any>*/{
+    return /*#__PURE__*/_react.default.createElement(_reactDraggable.DraggableCore, {
+      disabled: !isDraggable,
+      onStart: this.onDragStart,
+      onDrag: this.onDrag,
+      onStop: this.onDragStop,
+      handle: this.props.handle,
+      cancel: ".react-resizable-handle" + (this.props.cancel ? "," + this.props.cancel : ""),
+      scale: this.props.transformScale,
+      nodeRef: this.elementRef
+    }, child);
+  }
 
-      maxW = Math.min(maxW, cols - x); // Min/max capping
+  /**
+   * Utility function to setup callback handler definitions for
+   * similarily structured resize events.
+   */
+  curryResizeHandler(position /*: Position*/, handler /*: function*/) /*: function*/{
+    return (e /*: Event*/, data /*: ResizeCallbackData*/) => /*: function*/handler(e, data, position);
+  }
 
-      w = (0, _calculateUtils.clamp)(w, minW, maxW);
-      h = (0, _calculateUtils.clamp)(h, minH, maxH);
+  /**
+   * Mix a Resizable instance into a child.
+   * @param  {Element} child    Child element.
+   * @param  {Object} position  Position object (pixel values)
+   * @return {Element}          Child wrapped in Resizable.
+   */
+  mixinResizable(child /*: ReactElement<any>*/, position /*: Position*/, isResizable /*: boolean*/) /*: ReactElement<any>*/{
+    const {
+      cols,
+      x,
+      minW,
+      minH,
+      maxW,
+      maxH,
+      transformScale,
+      resizeHandles,
+      resizeHandle
+    } = this.props;
+    const positionParams = this.getPositionParams();
+
+    // This is the max possible width - doesn't go to infinity because of the width of the window
+    const maxWidth = (0, _calculateUtils.calcGridItemPosition)(positionParams, 0, 0, cols, 0).width;
+
+    // Calculate min/max constraints using our min & maxes
+    const mins = (0, _calculateUtils.calcGridItemPosition)(positionParams, 0, 0, minW, minH);
+    const maxes = (0, _calculateUtils.calcGridItemPosition)(positionParams, 0, 0, maxW, maxH);
+    const minConstraints = [mins.width, mins.height];
+    const maxConstraints = [Math.min(maxes.width, maxWidth), Math.min(maxes.height, Infinity)];
+    return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable
+    // These are opts for the resize handle itself
+    , {
+      draggableOpts: {
+        disabled: !isResizable
+      },
+      className: isResizable ? undefined : "react-resizable-hide",
+      width: position.width,
+      height: position.height,
+      minConstraints: minConstraints,
+      maxConstraints: maxConstraints,
+      onResizeStop: this.curryResizeHandler(position, this.onResizeStop),
+      onResizeStart: this.curryResizeHandler(position, this.onResizeStart),
+      onResize: this.curryResizeHandler(position, this.onResize),
+      transformScale: transformScale,
+      resizeHandles: resizeHandles,
+      handle: resizeHandle
+    }, child);
+  }
+  /**
+   * Wrapper around drag events to provide more useful data.
+   * All drag events call the function with the given handler name,
+   * with the signature (index, x, y).
+   */
+  onResizeHandler(e /*: Event*/, _ref4 /*:: */, position /*: Position*/, handlerName /*: string*/) /*: void*/{
+    let {
+      node,
+      size,
+      handle
+    } /*: ResizeCallbackData*/ = _ref4 /*: ResizeCallbackData*/;
+    const handler = this.props[handlerName];
+    if (!handler) return;
+    const {
+      x,
+      y,
+      i,
+      maxH,
+      minH
+    } = this.props;
+    let {
+      minW,
+      maxW
+    } = this.props;
+
+    // Get new XY
+    let {
+      w,
+      h
+    } = (0, _calculateUtils.calcWH)(this.getPositionParams(), size.width, size.height, x, y, handle);
+
+    // minW should be at least 1 (TODO propTypes validation?)
+    minW = Math.max(minW, 1);
+
+    // Min/max capping
+    w = (0, _calculateUtils.clamp)(w, minW, maxW);
+    h = (0, _calculateUtils.clamp)(h, minH, maxH);
+    let updatedSize = size;
+    if (node) {
+      const currentLeft = position.left;
+      const currentTop = position.top;
+      const currentWidth = position.width;
+      const currentHeight = position.height;
+      const resizeNorth = _ref5 => {
+        let {
+          left,
+          height,
+          width
+        } = _ref5;
+        const top = currentTop - (height - currentHeight);
+        return {
+          top,
+          left,
+          width,
+          height: this.constrainHeight(top, currentHeight, height),
+          top: this.constrainTop(top)
+        };
+      };
+      const resizeEast = _ref6 => {
+        let {
+          top,
+          left,
+          height,
+          width
+        } = _ref6;
+        return {
+          top,
+          height,
+          width: this.constrainWidth(currentLeft, currentWidth, width),
+          left: this.constrainLeft(left)
+        };
+      };
+      const resizeWest = _ref7 => {
+        let {
+          top,
+          height,
+          width
+        } = _ref7;
+        const left = currentLeft - (width - currentWidth);
+        return {
+          height,
+          width: left <= 0 ? currentWidth : this.constrainWidth(currentLeft, currentWidth, width),
+          top: this.constrainTop(top),
+          left: this.constrainLeft(left)
+        };
+      };
+      const resizeSouth = _ref8 => {
+        let {
+          top,
+          left,
+          height,
+          width
+        } = _ref8;
+        return {
+          width,
+          left,
+          height: this.constrainHeight(top, currentHeight, height),
+          top: this.constrainTop(top)
+        };
+      };
+      const resizeNorthEast = function () {
+        return resizeNorth(resizeEast(...arguments));
+      };
+      const resizeNorthWest = function () {
+        return resizeNorth(resizeWest(...arguments));
+      };
+      const resizeSouthEast = function () {
+        return resizeSouth(resizeEast(...arguments));
+      };
+      const resizeSouthWest = function () {
+        return resizeSouth(resizeWest(...arguments));
+      };
+      const ordinalResizeHandlerMap = {
+        n: resizeNorth,
+        ne: resizeNorthEast,
+        e: resizeEast,
+        se: resizeSouthEast,
+        s: resizeSouth,
+        sw: resizeSouthWest,
+        w: resizeWest,
+        nw: resizeNorthWest
+      };
+      const resizeHandler = ordinalResizeHandlerMap[handle];
+      updatedSize = resizeHandler ? resizeHandler({
+        top: currentTop,
+        left: currentLeft,
+        height: currentHeight,
+        width: currentWidth,
+        ...size
+      }) : size;
       this.setState({
-        resizing: handlerName === "onResizeStop" ? null : size
-      });
-      handler.call(this, i, w, h, {
-        e: e,
-        node: node,
-        size: size
+        resizing: handlerName === "onResizeStop" ? null : updatedSize
       });
     }
-  }, {
-    key: "render",
-    value: function render()
-    /*: ReactNode*/
-    {
-      var _this$props9 = this.props,
-          x = _this$props9.x,
-          y = _this$props9.y,
-          w = _this$props9.w,
-          h = _this$props9.h,
-          isDraggable = _this$props9.isDraggable,
-          isResizable = _this$props9.isResizable,
-          droppingPosition = _this$props9.droppingPosition,
-          useCSSTransforms = _this$props9.useCSSTransforms;
-      var pos = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(), x, y, w, h, this.state);
-
-      var child = _react.default.Children.only(this.props.children); // Create the child element. We clone the existing element but modify its className and style.
-
-
-      var newChild = /*#__PURE__*/_react.default.cloneElement(child, {
-        ref: this.elementRef,
-        className: (0, _clsx.default)("react-grid-item", child.props.className, this.props.className, {
-          static: this.props.static,
-          resizing: Boolean(this.state.resizing),
-          "react-draggable": isDraggable,
-          "react-draggable-dragging": Boolean(this.state.dragging),
-          dropping: Boolean(droppingPosition),
-          cssTransforms: useCSSTransforms
-        }),
-        // We can set the width and height on the child, but unfortunately we can't set the position.
-        style: _objectSpread(_objectSpread(_objectSpread({}, this.props.style), child.props.style), this.createStyle(pos))
-      }); // Resizable support. This is usually on but the user can toggle it off.
-
-
-      newChild = this.mixinResizable(newChild, pos, isResizable); // Draggable support. This is always on, except for with placeholders.
+    handler.call(this, i, w, h, {
+      e,
+      node,
+      size: updatedSize,
+      handle
+    });
+  }
 
-      newChild = this.mixinDraggable(newChild, isDraggable);
-      return newChild;
-    }
-  }]);
+  /**
+   * Helper functions to constrain dimensions of a GridItem
+   */
+  constrainWidth(left /*: number*/, currentWidth /*: number*/, newWidth /*: number*/) /*: number*/{
+    return left + newWidth > this.props.containerWidth ? currentWidth : newWidth;
+  }
+  constrainHeight(top /*: number*/, currentHeight /*: number*/, newHeight /*: number*/) /*: number*/{
+    return top <= 0 ? currentHeight : newHeight;
+  }
+  constrainLeft(left /*: number*/) /*: number*/{
+    return Math.max(0, left);
+  }
+  constrainTop(top /*: number*/) /*: number*/{
+    return Math.max(0, top);
+  }
+  render() /*: ReactNode*/{
+    const {
+      x,
+      y,
+      w,
+      h,
+      isDraggable,
+      isResizable,
+      droppingPosition,
+      useCSSTransforms
+    } = this.props;
+    const pos = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(), x, y, w, h, this.state);
+    const child = _react.default.Children.only(this.props.children);
+
+    // Create the child element. We clone the existing element but modify its className and style.
+    let newChild = /*#__PURE__*/_react.default.cloneElement(child, {
+      ref: this.elementRef,
+      className: (0, _clsx.default)("react-grid-item", child.props.className, this.props.className, {
+        static: this.props.static,
+        resizing: Boolean(this.state.resizing),
+        "react-draggable": isDraggable,
+        "react-draggable-dragging": Boolean(this.state.dragging),
+        dropping: Boolean(droppingPosition),
+        cssTransforms: useCSSTransforms
+      }),
+      // We can set the width and height on the child, but unfortunately we can't set the position.
+      style: {
+        ...this.props.style,
+        ...child.props.style,
+        ...this.createStyle(pos)
+      }
+    });
 
-  return GridItem;
-}(_react.default.Component);
+    // Resizable support. This is usually on but the user can toggle it off.
+    newChild = this.mixinResizable(newChild, pos, isResizable);
 
+    // Draggable support. This is always on, except for with placeholders.
+    newChild = this.mixinDraggable(newChild, isDraggable);
+    return newChild;
+  }
+}
 exports.default = GridItem;
-
 _defineProperty(GridItem, "propTypes", {
   // Children must be only a single element
   children: _propTypes.default.element,
@@ -553,39 +667,23 @@ _defineProperty(GridItem, "propTypes", {
   w: _propTypes.default.number.isRequired,
   h: _propTypes.default.number.isRequired,
   // All optional
-  minW: function minW(props
-  /*: Props*/
-  , propName
-  /*: string*/
-  ) {
-    var value = props[propName];
+  minW: function (props /*: Props*/, propName /*: string*/) {
+    const value = props[propName];
     if (typeof value !== "number") return new Error("minWidth not Number");
     if (value > props.w || value > props.maxW) return new Error("minWidth larger than item width/maxWidth");
   },
-  maxW: function maxW(props
-  /*: Props*/
-  , propName
-  /*: string*/
-  ) {
-    var value = props[propName];
+  maxW: function (props /*: Props*/, propName /*: string*/) {
+    const value = props[propName];
     if (typeof value !== "number") return new Error("maxWidth not Number");
     if (value < props.w || value < props.minW) return new Error("maxWidth smaller than item width/minWidth");
   },
-  minH: function minH(props
-  /*: Props*/
-  , propName
-  /*: string*/
-  ) {
-    var value = props[propName];
+  minH: function (props /*: Props*/, propName /*: string*/) {
+    const value = props[propName];
     if (typeof value !== "number") return new Error("minHeight not Number");
     if (value > props.h || value > props.maxH) return new Error("minHeight larger than item height/maxHeight");
   },
-  maxH: function maxH(props
-  /*: Props*/
-  , propName
-  /*: string*/
-  ) {
-    var value = props[propName];
+  maxH: function (props /*: Props*/, propName /*: string*/) {
+    const value = props[propName];
     if (typeof value !== "number") return new Error("maxHeight not Number");
     if (value < props.h || value < props.minH) return new Error("maxHeight smaller than item height/minHeight");
   },
@@ -622,7 +720,6 @@ _defineProperty(GridItem, "propTypes", {
     top: _propTypes.default.number.isRequired
   })
 });
-
 _defineProperty(GridItem, "defaultProps", {
   className: "",
   cancel: "",