react-grid-layout 0.18.2 → 1.1.1

package/.babelrc.js

@@ -1,12 +1,14 @@
-"use strict";
+// @flow
+
+const es6Compat = process.env.BABEL_ES_COMPAT === "6" || process.env.NODE_ENV === "test";
 
 module.exports = {
   presets: [
     [
       "@babel/preset-env",
       {
-        targets: "> 0.25%, not dead"
-      }
+        targets: es6Compat ? "maintained node versions" : "> 0.25%, not dead"
+      },
     ],
     "@babel/react",
     "@babel/preset-flow"

package/.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.119.0
+^0.133.0
 
 [ignore]
 <PROJECT_ROOT>/build/.*
@@ -12,11 +12,8 @@
 
 [libs]
 interfaces/
+flow-typed/
 
 [options]
 emoji=true
 module.use_strict=true
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowFixMe.*
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowBug.*
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowIgnore.*
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowNative.*

package/.travis.yml

@@ -1,6 +1,7 @@
 language: node_js
 node_js:
-  - "node"
+  - 10
+  - 12
   - "lts/*"
 script:
   - make build test

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # Changelog
 
+1.1.1 (Sep 10, 2020)
+---
+
+Republish to add `dist/` folder for unpkg use.
+
+1.1.0 (Sep 3, 2020)
+---
+
+### New Features
+  - You can now place resizable handles on all corners. Use the `resizeHandles` prop, which is default `['se']` (for 'southeast').
+    - Allowable values are:
+      * 's' - South handle (bottom-center)
+      * 'w' - West handle (left-center)
+      * 'e' - East handle (right-center)
+      * 'n' - North handle (top-center)
+      * 'sw' - Southwest handle (bottom-left)
+      * 'nw' - Northwest handle (top-left)
+      * 'se' - Southeast handle (bottom-right)
+      * 'ne' - Northeast handle (top-right)
+    - These values may be combined, e.g. `['s', 'se', 'e']`, to place three handles on the bottom side, bottom-right corner, and right side.
+
+### Bugfixes
+  - Revert `containerPadding` change in #1138. This change was meant to be types-only, but it caused a behavioral change where the default value of `containerPadding` became `[0, 0]`, not `margin`, which is default `[10, 10]`.
+  - Add a few more files to `npmignore` to improve package size.
+
+1.0.0 (July 20, 2020)
+---
+
+React-Grid-Layout has been in `0.x` status for far too long. With the addition of some new features in this version and a breaking change, I thought it was time to move to a stable semver.
+
+### Breaking Changes
+   - `onDrop` callback now has a form more consistent with other callbacks.
+     - Previous type: `(elemParams: { x: number, y: number, w: number, h: number, e: Event }) => void`
+     - New type: `(layout: Layout, item: ?LayoutItem, e: Event) => void`
+     - Thanks @ceberhar [#1169](https://github.com/STRML/react-grid-layout/pull/1169)
+  - Dropping Node 8 compatibility and testing due to devDep incompatibilities
+
+### New Features
+  - Add `innerRef: React.Ref<'div'>` prop to expose a ref for the grid layout's outer div. Thanks @paul-sachs [#1176](https://github.com/STRML/react-grid-layout/pull/1176)
+  - Add `isBounded` property to prevent dragging items outside of the grid. Thanks @artembykov [#1248](https://github.com/STRML/react-grid-layout/pull/1248)
+
+### Bugfixes
+  - Fix grid items stuck using percentages on first render. Thanks @rhbg [#1246](https://github.com/STRML/react-grid-layout/pull/1246)
+
+0.18.3 (Mar 16, 2020)
+----
+
+### Bugfixes
+  - Fix `shouldComponentUpdate` interfering with droppability ([#1152](https://github.com/STRML/react-grid-layout/issues/1152))
+
+### Internal Changes
+  - New Enzyme test suite added to prevent regression. If you have time, we could really use more test cases that reflect your use cases!
+
 0.18.2 (Feb 26, 2020)
 ----
 

package/README.md

@@ -52,6 +52,8 @@ RGL is React-only and does not require jQuery.
 1. [Error Case](https://strml.github.io/react-grid-layout/examples/13-error-case.html)
 1. [Toolbox](https://strml.github.io/react-grid-layout/examples/14-toolbox.html)
 1. [Drag From Outside](https://strml.github.io/react-grid-layout/examples/15-drag-from-outside.html)
+1. [Bounded Layout](https://strml.github.io/react-grid-layout/examples/16-bounded.html)
+1. [Resizable Handles](https://strml.github.io/react-grid-layout/examples/17-resizable-handles.html)
 
 #### Projects Using React-Grid-Layout
 
@@ -69,6 +71,7 @@ RGL is React-only and does not require jQuery.
 - [Monday](https://support.monday.com/hc/en-us/articles/360002187819-What-are-the-Dashboards-)
 - [Quadency](https://quadency.com/)
 - [Hakkiri](https://www.hakkiri.io)
+- [Ubidots](https://help.ubidots.com/en/articles/2400308-create-dashboards-and-widgets)
 
 *Know of others? Create a PR to let me know!*
 
@@ -86,7 +89,7 @@ RGL is React-only and does not require jQuery.
 * Responsive breakpoints
 * Separate layouts per responsive breakpoint
 * Grid Items placed using CSS Transforms
-* Performance: [on](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), note paint (green) as % of time
+  * Performance with CSS Transforms: [on](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), note paint (green) as % of time
 
 |Version         | Compatibility    |
 |----------------|------------------|
@@ -197,8 +200,8 @@ If the largest is provided, RGL will attempt to interpolate the rest.
 You will also need to provide a `width`, when using `<ResponsiveReactGridLayout>` it is suggested you use the HOC
 `WidthProvider` as per the instructions below.
 
-For the time being, it is not possible to supply responsive mappings via the `data-grid` property on individual
-items, but that is coming soon.
+It is possible to supply default mappings via the `data-grid` property on individual
+items, so that they would be taken into account within layout interpolation.
 
 ### Providing Grid Width
 
@@ -304,6 +307,7 @@ droppingItem?: { i: string, w: number, h: number }
 //
 isDraggable: ?boolean = true,
 isResizable: ?boolean = true,
+isBounded: ?boolean = false,
 // Uses CSS3 translate() instead of position top/left.
 // This makes about 6x faster paint performance
 useCSSTransforms: ?boolean = true,
@@ -326,6 +330,17 @@ preventCollision: ?boolean = false;
 // onDragStart attribute is required for Firefox for a dragging initialization
 // @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
 isDroppable: ?boolean = false
+// Defines which resize handles should be rendered
+// Allows for any combination of:
+// 's' - South handle (bottom-center)
+// 'w' - West handle (left-center)
+// 'e' - East handle (right-center)
+// 'n' - North handle (top-center)
+// 'sw' - Southwest handle (bottom-left)
+// 'nw' - Northwest handle (top-left)
+// 'se' - Southeast handle (bottom-right)
+// 'ne' - Northeast handle (top-right)
+resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
 
 //
 // Callbacks
@@ -354,8 +369,12 @@ onResizeStart: ItemCallback,
 onResize: ItemCallback,
 // Calls when resize is complete.
 onResizeStop: ItemCallback,
-// Calls when some element has been dropped
-onDrop: (elemParams: { x: number, y: number, w: number, h: number, e: Event }) => void
+// Calls when an element has been dropped into the grid from outside.
+onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void
+
+// Ref for getting a reference for the grid's wrapping div.
+// You can use this instead of a regular ref and the deprecated `ReactDOM.findDOMNode()`` function.
+innerRef: ?React.Ref<"div">
 ```
 
 ### Responsive Grid Layout Props
@@ -440,7 +459,12 @@ will be draggable, even if the item is marked `static: true`.
   // If false, will not be draggable. Overrides `static`.
   isDraggable: ?boolean = true,
   // If false, will not be resizable. Overrides `static`.
-  isResizable: ?boolean = true
+  isResizable: ?boolean = true,
+  // By default, a handle is only shown on the bottom-right (southeast) corner.
+  // Note that resizing from the top or left is generally not intuitive.
+  resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
+  // If true and draggable, item will be moved only within grid.
+  isBounded: ?boolean = false
 }
 ```
 
@@ -468,9 +492,9 @@ shouldComponentUpdate(nextProps: Props, nextState: State) {
 If you memoize your children, you can take advantage of this, and reap faster rerenders. For example:
 
 ```js
-function MyGrid() {
-  const children = React.useMemo((count) => {
-    return new Array(count).fill(undefined).map((val, idx) => {
+function MyGrid(props) {
+  const children = React.useMemo(() => {
+    return new Array(props.count).fill(undefined).map((val, idx) => {
       return <div key={idx} data-grid={{x: idx, y: 1, w: 1, h: 1}} />;
     });
   }, [props.count]);

package/build/GridItem.js

@@ -35,29 +35,31 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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; }
 
 /**
  * An individual item within a ReactGridLayout.
  */
-var GridItem =
-/*#__PURE__*/
-function (_React$Component) {
+var GridItem = /*#__PURE__*/function (_React$Component) {
   _inherits(GridItem, _React$Component);
 
-  function GridItem() {
-    var _getPrototypeOf2;
+  var _super = _createSuper(GridItem);
 
+  function GridItem() {
     var _this;
 
     _classCallCheck(this, GridItem);
@@ -66,7 +68,7 @@ function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(GridItem)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       resizing: null,
@@ -80,7 +82,8 @@ function (_React$Component) {
     /*: Event*/
     , _ref) {
       var node = _ref.node;
-      if (!_this.props.onDragStart) return;
+      var onDragStart = _this.props.onDragStart;
+      if (!onDragStart) return;
       var newPosition
       /*: PartialPosition*/
       = {
@@ -101,13 +104,14 @@ function (_React$Component) {
 
       _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 _this.props.onDragStart && _this.props.onDragStart.call(_assertThisInitialized(_this), _this.props.i, x, y, {
+      return onDragStart.call(_assertThisInitialized(_this), _this.props.i, x, y, {
         e: e,
         node: node,
         newPosition: newPosition
@@ -126,25 +130,55 @@ function (_React$Component) {
       if (!onDrag) return;
       deltaX /= transformScale;
       deltaY /= transformScale;
+
+      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
+
+
+      if (isBounded) {
+        var offsetParent = node.offsetParent;
+
+        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]);
+          top = (0, _calculateUtils.clamp)(top, 0, bottomBoundary);
+          var colWidth = (0, _calculateUtils.calcGridColWidth)(positionParams);
+          var rightBoundary = containerWidth - (0, _calculateUtils.calcGridItemWHPx)(w, colWidth, margin[0]);
+          left = (0, _calculateUtils.clamp)(left, 0, rightBoundary);
+        }
+      }
+
       var newPosition
       /*: PartialPosition*/
       = {
-        top: 0,
-        left: 0
+        top: top,
+        left: left
       };
-      if (!_this.state.dragging) throw new Error("onDrag called before onDragStart.");
-      newPosition.left = _this.state.dragging.left + deltaX;
-      newPosition.top = _this.state.dragging.top + deltaY;
 
       _this.setState({
         dragging: newPosition
-      });
+      }); // Call callback with this data
+
 
-      var _calcXY2 = (0, _calculateUtils.calcXY)(_this.getPositionParams(), newPosition.top, newPosition.left, _this.props.w, _this.props.h),
+      var _calcXY2 = (0, _calculateUtils.calcXY)(positionParams, top, left, w, h),
           x = _calcXY2.x,
           y = _calcXY2.y;
 
-      return onDrag && onDrag.call(_assertThisInitialized(_this), _this.props.i, x, y, {
+      return onDrag.call(_assertThisInitialized(_this), i, x, y, {
         e: e,
         node: node,
         newPosition: newPosition
@@ -155,26 +189,36 @@ function (_React$Component) {
     /*: Event*/
     , _ref3) {
       var node = _ref3.node;
-      if (!_this.props.onDragStop) return;
+      var onDragStop = _this.props.onDragStop;
+      if (!onDragStop) return;
+
+      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: 0,
-        left: 0
+        top: top,
+        left: left
       };
-      if (!_this.state.dragging) throw new Error("onDragEnd called before onDragStart.");
-      newPosition.left = _this.state.dragging.left;
-      newPosition.top = _this.state.dragging.top;
 
       _this.setState({
         dragging: null
       });
 
-      var _calcXY3 = (0, _calculateUtils.calcXY)(_this.getPositionParams(), newPosition.top, newPosition.left, _this.props.w, _this.props.h),
+      var _calcXY3 = (0, _calculateUtils.calcXY)(_this.getPositionParams(), top, left, w, h),
           x = _calcXY3.x,
           y = _calcXY3.y;
 
-      return _this.props.onDragStop && _this.props.onDragStop.call(_assertThisInitialized(_this), _this.props.i, x, y, {
+      return onDragStop.call(_assertThisInitialized(_this), i, x, y, {
         e: e,
         node: node,
         newPosition: newPosition
@@ -217,12 +261,18 @@ function (_React$Component) {
     ) {
       // We can't deeply compare children. If the developer memoizes them, we can
       // use this optimization.
-      if (this.props.children !== nextProps.children) return true; // TODO memoize these calculations so they don't take so long?
+      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
@@ -238,13 +288,13 @@ function (_React$Component) {
     /*: Props*/
     ) {
       var droppingPosition = this.props.droppingPosition;
-      var prevDroppingPosition = prevProps.droppingPosition;
+      if (!droppingPosition) return;
+      var prevDroppingPosition = prevProps.droppingPosition || {
+        left: 0,
+        top: 0
+      };
       var dragging = this.state.dragging;
 
-      if (!droppingPosition || !prevDroppingPosition) {
-        return;
-      }
-
       if (!this.currentNode) {
         // eslint-disable-next-line react/no-find-dom-node
         this.currentNode = ((_reactDom.default.findDOMNode(this)
@@ -307,10 +357,10 @@ function (_React$Component) {
     )
     /*: { [key: string]: ?string }*/
     {
-      var _this$props2 = this.props,
-          usePercentages = _this$props2.usePercentages,
-          containerWidth = _this$props2.containerWidth,
-          useCSSTransforms = _this$props2.useCSSTransforms;
+      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) {
@@ -342,7 +392,7 @@ function (_React$Component) {
     )
     /*: ReactElement<any>*/
     {
-      return _react.default.createElement(_reactDraggable.DraggableCore, {
+      return /*#__PURE__*/_react.default.createElement(_reactDraggable.DraggableCore, {
         disabled: !isDraggable,
         onStart: this.onDragStart,
         onDrag: this.onDrag,
@@ -370,14 +420,15 @@ function (_React$Component) {
     )
     /*: ReactElement<any>*/
     {
-      var _this$props3 = this.props,
-          cols = _this$props3.cols,
-          x = _this$props3.x,
-          minW = _this$props3.minW,
-          minH = _this$props3.minH,
-          maxW = _this$props3.maxW,
-          maxH = _this$props3.maxH,
-          transformScale = _this$props3.transformScale;
+      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;
       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
@@ -386,7 +437,7 @@ function (_React$Component) {
       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 _react.default.createElement(_reactResizable.Resizable, {
+      return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable, {
         draggableOpts: {
           disabled: !isResizable
         },
@@ -398,7 +449,8 @@ function (_React$Component) {
         onResizeStop: this.onResizeStop,
         onResizeStart: this.onResizeStart,
         onResize: this.onResize,
-        transformScale: transformScale
+        transformScale: transformScale,
+        resizeHandles: resizeHandles
       }, child);
     }
     /**
@@ -427,27 +479,28 @@ function (_React$Component) {
           size = _ref4.size;
       var handler = this.props[handlerName];
       if (!handler) return;
-      var _this$props4 = this.props,
-          cols = _this$props4.cols,
-          x = _this$props4.x,
-          y = _this$props4.y,
-          i = _this$props4.i,
-          maxW = _this$props4.maxW,
-          minW = _this$props4.minW,
-          maxH = _this$props4.maxH,
-          minH = _this$props4.minH; // Get new XY
+      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; // Cap w at numCols
+          h = _calcWH.h; // minW should be at least 1 (TODO propTypes validation?)
 
 
-      w = Math.min(w, cols - x); // Ensure w is at least 1
+      minW = Math.max(minW, 1); // maxW should be at most (cols - x)
 
-      w = Math.max(w, 1); // Min/max capping
+      maxW = Math.min(maxW, cols - x); // Min/max capping
 
-      w = Math.max(Math.min(w, maxW), minW);
-      h = Math.max(Math.min(h, maxH), minH);
+      w = (0, _calculateUtils.clamp)(w, minW, maxW);
+      h = (0, _calculateUtils.clamp)(h, minH, maxH);
       this.setState({
         resizing: handlerName === "onResizeStop" ? null : size
       });
@@ -462,21 +515,21 @@ function (_React$Component) {
     value: function render()
     /*: ReactNode*/
     {
-      var _this$props5 = this.props,
-          x = _this$props5.x,
-          y = _this$props5.y,
-          w = _this$props5.w,
-          h = _this$props5.h,
-          isDraggable = _this$props5.isDraggable,
-          isResizable = _this$props5.isResizable,
-          droppingPosition = _this$props5.droppingPosition,
-          useCSSTransforms = _this$props5.useCSSTransforms;
+      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 = _react.default.cloneElement(child, {
+      var newChild = /*#__PURE__*/_react.default.cloneElement(child, {
         className: (0, _classnames.default)("react-grid-item", child.props.className, this.props.className, {
           static: this.props.static,
           resizing: Boolean(this.state.resizing),
@@ -486,7 +539,7 @@ function (_React$Component) {
           cssTransforms: useCSSTransforms
         }),
         // We can set the width and height on the child, but unfortunately we can't set the position.
-        style: _objectSpread({}, this.props.style, {}, child.props.style, {}, this.createStyle(pos))
+        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.
 
 
@@ -566,6 +619,7 @@ _defineProperty(GridItem, "propTypes", {
   // Flags
   isDraggable: _propTypes.default.bool.isRequired,
   isResizable: _propTypes.default.bool.isRequired,
+  isBounded: _propTypes.default.bool.isRequired,
   static: _propTypes.default.bool,
   // Use CSS transforms instead of top/left
   useCSSTransforms: _propTypes.default.bool.isRequired,