react-grid-layout 1.2.1 → 1.2.5

package/.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.145.0
+^0.150.1
 
 [ignore]
 <PROJECT_ROOT>/build/.*

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+1.2.5 (May 10, 2021)
+---
+
+### Bugfixes
+  - Ensure no negative positions are possible when compacting
+    - Thanks @DonnyLi [#829](https://github.com/react-grid-layout/react-grid-layout/pull/829)
+    - Fixes [#535](https://github.com/react-grid-layout/react-grid-layout/issues/535)
+  - Fix resizing on mobile. This was caused by the `ref` refactor to remove ReactDOM in 1.2.3.
+    - Fixes #[1458](https://github.com/react-grid-layout/react-grid-layout/issues/1458)
+    - Note: this upgrades `react-resizable` to `3.0.1`, which like our other deps, is only compatible with `React@>=16.3`.
+
+### Documentation
+  - Document new arity of `resizeHandle` (`(axis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => React$Element`)
+  - Remove references to the deprecated `verticalCompact` prop
+
+1.2.4 (Mar 18, 2021)
+---
+
+*This version fixes a serious render bug in `<WidthProvider>`. 1.2.3 should not be used.*
+
+### Bugfixes
+  - Fix failure to mount when layout is WidthProvider-wrapped and `measureBeforeMount` is `true`.
+    - Ref: [#1428](https://github.com/react-grid-layout/react-grid-layout/issues/1428)
+  - `<WidthProvider>` no longer updates grid with if it has been set to 0. This prevents unnecessary updates
+    if the grid is set to `display: none;`. Thanks @405go [#1427](https://github.com/react-grid-layout/react-grid-layout/pull/1427)
+
+1.2.3 (Mar 16, 2021)
+---
+
+### New Features
+  - React-Grid-Layout is now fully compatible with `<React.StrictMode>`.
+    - Usage of `ReactDOM` has been removed by using `React.createRef()` inside RGL, and the new [`nodeRef` prop](https://github.com/react-grid-layout/react-draggable/blob/master/CHANGELOG.md#440-may-12-2020) in `react-draggable`.
+
+1.2.2 (Mar 1, 2021)
+---
+
+### Bugfixes
+  - `onResize` as changed in 1.2.1 did not correctly save the layout. This is now fixed.
+    - As you might guess, we need more test coverage! PRs are very welcome, I'll buy you beers on Cashapp or Patreon or whatever you like.
+
 1.2.1 (Mar 1, 2021)
 ---
 

package/README.md

@@ -16,7 +16,7 @@ RGL is React-only and does not require jQuery.
 ![BitMEX UI](http://i.imgur.com/oo1NT6c.gif)
 > GIF from production usage on [BitMEX.com](https://www.bitmex.com)
 
-[**[Demo](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js)**]
+[**[Demo](https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js)**]
 
 ## Table of Contents
 
@@ -92,11 +92,12 @@ RGL is React-only and does not require jQuery.
 * Separate layouts per responsive breakpoint
 * Grid Items placed using CSS Transforms
   * Performance with CSS Transforms: [on](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), note paint (green) as % of time
+* Compatibility with `<React.StrictMode>`
 
 |Version         | Compatibility    |
 |----------------|------------------|
-| >= 0.17.0      | React 0.16       |
-| >= 0.11.3      | React 0.14 & v15 |
+| >= 0.17.0      | React 16 & 17    |
+| >= 0.11.3      | React 0.14 & 15  |
 | >= 0.10.0      | React 0.14       |
 | 0.8. - 0.9.2   | React 0.13       |
 | < 0.8          | React 0.12       |
@@ -272,9 +273,6 @@ draggableCancel: ?string = '',
 // If you forget the leading . it will not work.
 draggableHandle: ?string = '',
 
-// If true, the layout will compact vertically
-verticalCompact: ?boolean = true,
-
 // Compaction type.
 compactType: ?('vertical' | 'horizontal') = 'vertical';
 
@@ -344,7 +342,8 @@ isDroppable: ?boolean = false
 // 'ne' - Northeast handle (top-right)
 resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
 // Custom component for resize handles
-resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>)
+// See `handle` as used in https://github.com/react-grid-layout/react-resizable#props
+resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>)
 
 //
 // Callbacks

package/build/GridItem.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactDraggable = require("react-draggable");
@@ -27,7 +25,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 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); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -78,7 +76,7 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       className: ""
     });
 
-    _defineProperty(_assertThisInitialized(_this), "currentNode", void 0);
+    _defineProperty(_assertThisInitialized(_this), "elementRef", /*#__PURE__*/_react.default.createRef());
 
     _defineProperty(_assertThisInitialized(_this), "onDragStart", function (e, _ref) {
       var node = _ref.node;
@@ -273,26 +271,19 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
     ) {
       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;
-
-      if (!this.currentNode) {
-        // eslint-disable-next-line react/no-find-dom-node
-        this.currentNode = ((_reactDom.default.findDOMNode(this)
-        /*: any*/
-        )
-        /*: HTMLElement*/
-        );
-      }
-
       var shouldDrag = dragging && droppingPosition.left !== prevDroppingPosition.left || droppingPosition.top !== prevDroppingPosition.top;
 
       if (!dragging) {
         this.onDragStart(droppingPosition.e, {
-          node: this.currentNode,
+          node: node,
           deltaX: droppingPosition.left,
           deltaY: droppingPosition.top
         });
@@ -300,7 +291,7 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
         var deltaX = droppingPosition.left - dragging.left;
         var deltaY = droppingPosition.top - dragging.top;
         this.onDrag(droppingPosition.e, {
-          node: this.currentNode,
+          node: node,
           deltaX: deltaX,
           deltaY: deltaY
         });
@@ -383,7 +374,8 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
         onStop: this.onDragStop,
         handle: this.props.handle,
         cancel: ".react-resizable-handle" + (this.props.cancel ? "," + this.props.cancel : ""),
-        scale: this.props.transformScale
+        scale: this.props.transformScale,
+        nodeRef: this.elementRef
       }, child);
     }
     /**
@@ -422,7 +414,8 @@ var GridItem = /*#__PURE__*/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 /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable, {
+      return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable // These are opts for the resize handle itself
+      , {
         draggableOpts: {
           disabled: !isResizable
         },
@@ -518,6 +511,7 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
 
 
       var newChild = /*#__PURE__*/_react.default.cloneElement(child, {
+        ref: this.elementRef,
         className: (0, _classnames.default)("react-grid-item", child.props.className, this.props.className, {
           static: this.props.static,
           resizing: Boolean(this.state.resizing),
@@ -598,7 +592,7 @@ _defineProperty(GridItem, "propTypes", {
   // ID is nice to have for callbacks
   i: _propTypes.default.string.isRequired,
   // Resize handle options
-  resizeHandles: _ReactGridLayoutPropTypes.resizeHandlesType,
+  resizeHandles: _ReactGridLayoutPropTypes.resizeHandleAxesType,
   resizeHandle: _ReactGridLayoutPropTypes.resizeHandleType,
   // Functions
   onDragStop: _propTypes.default.func,

package/build/ReactGridLayout.js

@@ -23,11 +23,19 @@ var _ReactGridLayoutPropTypes = _interopRequireDefault(require("./ReactGridLayou
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _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 _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -37,7 +45,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+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); }
 
@@ -464,45 +472,50 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
       var _this$props4 = this.props,
           cols = _this$props4.cols,
           preventCollision = _this$props4.preventCollision;
-      var originalLayoutItem
-      /*: ?LayoutItem*/
-      = (0, _utils.getLayoutItem)(layout, i);
-      if (!originalLayoutItem) return; // We're going to modify this object now, so clone it first.
-
-      var l = (0, _utils.cloneLayoutItem)(originalLayoutItem); // Something like quad tree should be used
-      // to find collisions faster
-
-      var hasCollisions;
-
-      if (preventCollision) {
-        var collisions = (0, _utils.getAllCollisions)(layout, _objectSpread(_objectSpread({}, l), {}, {
-          w: w,
-          h: h
-        })).filter(function (layoutItem) {
-          return layoutItem.i !== l.i;
-        });
-        hasCollisions = collisions.length > 0; // If we're colliding, we need adjust the placeholder.
-
-        if (hasCollisions) {
-          // adjust w && h to maximum allowed space
-          var leastX = Infinity,
-              leastY = Infinity;
-          collisions.forEach(function (layoutItem) {
-            if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
-            if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
+
+      var _withLayoutItem = (0, _utils.withLayoutItem)(layout, i, function (l) {
+        // Something like quad tree should be used
+        // to find collisions faster
+        var hasCollisions;
+
+        if (preventCollision) {
+          var collisions = (0, _utils.getAllCollisions)(layout, _objectSpread(_objectSpread({}, l), {}, {
+            w: w,
+            h: h
+          })).filter(function (layoutItem) {
+            return layoutItem.i !== l.i;
           });
-          if (Number.isFinite(leastX)) l.w = leastX - l.x;
-          if (Number.isFinite(leastY)) l.h = leastY - l.y;
+          hasCollisions = collisions.length > 0; // If we're colliding, we need adjust the placeholder.
+
+          // If we're colliding, we need adjust the placeholder.
+          if (hasCollisions) {
+            // adjust w && h to maximum allowed space
+            var leastX = Infinity,
+                leastY = Infinity;
+            collisions.forEach(function (layoutItem) {
+              if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x);
+              if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y);
+            });
+            if (Number.isFinite(leastX)) l.w = leastX - l.x;
+            if (Number.isFinite(leastY)) l.h = leastY - l.y;
+          }
+        }
+
+        if (!hasCollisions) {
+          // Set new width and height.
+          l.w = w;
+          l.h = h;
         }
-      }
 
-      if (!hasCollisions) {
-        // Set new width and height.
-        l.w = w;
-        l.h = h;
-      } // Create placeholder element (display only)
+        return l;
+      }),
+          _withLayoutItem2 = _slicedToArray(_withLayoutItem, 2),
+          newLayout = _withLayoutItem2[0],
+          l = _withLayoutItem2[1]; // Shouldn't ever happen, but typechecking makes it necessary
 
 
+      if (!l) return; // Create placeholder element (display only)
+
       var placeholder = {
         w: l.w,
         h: l.h,
@@ -511,10 +524,10 @@ var ReactGridLayout = /*#__PURE__*/function (_React$Component) {
         static: true,
         i: i
       };
-      this.props.onResize(layout, oldResizeItem, l, placeholder, e, node); // Re-compact the layout and set the drag placeholder.
+      this.props.onResize(newLayout, oldResizeItem, l, placeholder, e, node); // Re-compact the newLayout and set the drag placeholder.
 
       this.setState({
-        layout: (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols),
+        layout: (0, _utils.compact)(newLayout, (0, _utils.compactType)(this.props), cols),
         activeDrag: placeholder
       });
     }

package/build/ReactGridLayoutPropTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.resizeHandleType = exports.resizeHandlesType = void 0;
+exports.default = exports.resizeHandleType = exports.resizeHandleAxesType = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,12 +21,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 'nw' - Northwest handle (top-left)
 // 'se' - Southeast handle (bottom-right)
 // 'ne' - Northeast handle (top-right)
-var resizeHandlesType
+var resizeHandleAxesType
 /*: ReactPropsChainableTypeChecker*/
 = _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"])); // Custom component for resize handles
 
 
-exports.resizeHandlesType = resizeHandlesType;
+exports.resizeHandleAxesType = resizeHandleAxesType;
 
 var resizeHandleType
 /*: ReactPropsChainableTypeChecker*/
@@ -54,7 +54,7 @@ var resizeHandleType
   useCSSTransforms: boolean,
   transformScale: number,
   droppingItem: $Shape<LayoutItem>,
-  resizeHandles: ResizeHandles,
+  resizeHandles: ResizeHandleAxis[],
   resizeHandle?: ResizeHandle,
 
   // Callbacks
@@ -156,7 +156,7 @@ var _default = {
   // If true, an external element can trigger onDrop callback with a specific grid position as a parameter
   isDroppable: _propTypes.default.bool,
   // Resize handle options
-  resizeHandles: resizeHandlesType,
+  resizeHandles: resizeHandleAxesType,
   resizeHandle: resizeHandleType,
   //
   // Callbacks

package/build/ResponsiveReactGridLayout.js

@@ -21,9 +21,9 @@ var _ReactGridLayout = _interopRequireDefault(require("./ReactGridLayout"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -31,7 +31,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 

package/build/components/WidthProvider.js

@@ -5,19 +5,19 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = WidthProvider;
+exports.default = WidthProvideRGL;
 
 var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -47,24 +47,20 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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; }
 
+var layoutClassName = "react-grid-layout";
 /*
  * A simple HOC that provides facility for listening to container resizes.
  *
  * The Flow type is pretty janky here. I can't just spread `WPProps` into this returned object - I wish I could - but it triggers
  * a flow bug of some sort that causes it to stop typechecking.
  */
-function WidthProvider
+
+function WidthProvideRGL
 /*:: <Config>*/
 (ComposedComponent
 /*: React.AbstractComponent<Config>*/
 )
-/*: React.AbstractComponent<{|
-  ...Config,
-  measureBeforeMount?: boolean,
-  className?: string,
-  style?: Object,
-  width?: number
-|}>*/
+/*: React.AbstractComponent<ComposedProps<Config>>*/
 {
   var _class, _temp;
 
@@ -88,17 +84,21 @@ function WidthProvider
         width: 1280
       });
 
+      _defineProperty(_assertThisInitialized(_this), "elementRef", /*#__PURE__*/React.createRef());
+
       _defineProperty(_assertThisInitialized(_this), "mounted", false);
 
       _defineProperty(_assertThisInitialized(_this), "onWindowResize", function () {
-        if (!_this.mounted) return; // eslint-disable-next-line react/no-find-dom-node
-
-        var node = _reactDom.default.findDOMNode(_assertThisInitialized(_this)); // Flow casts this to Text | Element
-
-
-        if (node instanceof HTMLElement) _this.setState({
-          width: node.offsetWidth
-        });
+        if (!_this.mounted) return;
+        var node = _this.elementRef.current; // Flow casts this to Text | Element
+        // fix: grid position error when node or parentNode display is none by window resize
+        // #924 #1084
+
+        if (node instanceof HTMLElement && node.offsetWidth) {
+          _this.setState({
+            width: node.offsetWidth
+          });
+        }
       });
 
       return _this;
@@ -129,12 +129,16 @@ function WidthProvider
 
         if (measureBeforeMount && !this.mounted) {
           return /*#__PURE__*/React.createElement("div", {
-            className: this.props.className,
-            style: this.props.style
+            className: (0, _classnames.default)(this.props.className, layoutClassName),
+            style: this.props.style // $FlowIgnore ref types
+            ,
+            ref: this.elementRef
           });
         }
 
-        return /*#__PURE__*/React.createElement(ComposedComponent, _extends({}, rest, this.state));
+        return /*#__PURE__*/React.createElement(ComposedComponent, _extends({
+          innerRef: this.elementRef
+        }, rest, this.state));
       }
     }]);
 

package/build/utils.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.bottom = bottom;
 exports.cloneLayout = cloneLayout;
+exports.modifyLayout = modifyLayout;
+exports.withLayoutItem = withLayoutItem;
 exports.cloneLayoutItem = cloneLayoutItem;
 exports.childrenEqual = childrenEqual;
 exports.fastPositionEqual = fastPositionEqual;
@@ -36,7 +38,7 @@ var _react = _interopRequireDefault(require("react"));
 
 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); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -79,6 +81,48 @@ function cloneLayout(layout
   }
 
   return newLayout;
+} // Modify a layoutItem inside a layout. Returns a new Layout,
+// does not mutate. Carries over all other LayoutItems unmodified.
+
+
+function modifyLayout(layout
+/*: Layout*/
+, layoutItem
+/*: LayoutItem*/
+)
+/*: Layout*/
+{
+  var newLayout = Array(layout.length);
+
+  for (var i = 0, len = layout.length; i < len; i++) {
+    if (layoutItem.i === layout[i].i) {
+      newLayout[i] = layoutItem;
+    } else {
+      newLayout[i] = layout[i];
+    }
+  }
+
+  return newLayout;
+} // Function to be called to modify a layout item.
+// Does defensive clones to ensure the layout is not modified.
+
+
+function withLayoutItem(layout
+/*: Layout*/
+, itemKey
+/*: string*/
+, cb
+/*: LayoutItem => LayoutItem*/
+)
+/*: [Layout, ?LayoutItem]*/
+{
+  var item = getLayoutItem(layout, itemKey);
+  if (!item) return [layout, null];
+  item = cb(cloneLayoutItem(item)); // defensive clone then modify
+  // FIXME could do this faster if we already knew the index
+
+  layout = modifyLayout(layout, item);
+  return [layout, item];
 } // Fast path to cloning, since this is monomorphic
 
 
@@ -318,8 +362,11 @@ function compactItem(compareWith
       l.x = cols - l.w;
       l.y++;
     }
-  }
+  } // Ensure that there are no negative positions
+
 
+  l.y = Math.max(l.y, 0);
+  l.x = Math.max(l.x, 0);
   return l;
 }
 /**
@@ -727,13 +774,15 @@ function synchronizeLayoutWithChildren(initialLayout
       if (g) {
         if (!isProduction) {
           validateLayout([g], "ReactGridLayout.children");
-        }
+        } // FIXME clone not really necessary here
+
 
         layout[i] = cloneLayoutItem(_objectSpread(_objectSpread({}, g), {}, {
           i: child.key
         }));
       } else {
         // Nothing provided: ensure this is added to the bottom
+        // FIXME clone not really necessary here
         layout[i] = cloneLayoutItem({
           w: 1,
           h: 1,