react-grid-layout 1.2.0 → 1.2.4

package/.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.133.0
+^0.145.0
 
 [ignore]
 <PROJECT_ROOT>/build/.*
@@ -15,5 +15,6 @@ interfaces/
 flow-typed/
 
 [options]
+sharedmemory.heap_size=3221225472
 emoji=true
 module.use_strict=true

package/.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged
+make lint
+make test

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Changelog
 
+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)
+---
+
+## Organization Changes
+
+We have created the [React-Grid-Layout Organization](https://github.com/react-grid-layout)! Therefore the repository
+[has moved](https://github.com/react-grid-layout/react-grid-layout).
+
+This organization will grow as time goes on, and also contains the dependencies of RGL.
+
+### Bugfixes
+  - Use `classList` in Firefox onDragOver hack. [#1310](https://github.com/STRML/react-grid-layout/pull/1310)
+  - Fix `scale` property. As `scale` support was added to dependencies, this caused double-compensation for scale, causing the dragged element not to follow the cursor. [#1393](https://github.com/STRML/react-grid-layout/pull/1393)
+  - Fix horizontal compact mode issue where it inadventently would compact the bottom of the grid. This is not useful nor intended. Thanks @s4m3. [#1390](https://github.com/STRML/react-grid-layout/pull/1390)
+  - Fix `onLayoutChange` sometimes not triggering on resize. We weren't cloning the layout item before modifying it. Thanks @xcqwan. [#1289](https://github.com/react-grid-layout/react-grid-layout/pull/1289)
+
+### Internal Refactors
+  - Updated to the latest versions of all dependencies (enzyme, webpack, jest, flow).
+  - Held back React@17 as enzyme is [not yet ready](https://github.com/enzymejs/enzyme/issues/2429).
+
 1.2.0 (Nov 17, 2020)
 ---
 

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://strml.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
 
@@ -36,24 +36,25 @@ RGL is React-only and does not require jQuery.
 
 ## Demos
 
-1. [Showcase](https://strml.github.io/react-grid-layout/examples/0-showcase.html)
-1. [Basic](https://strml.github.io/react-grid-layout/examples/1-basic.html)
-1. [No Dragging/Resizing (Layout Only)](https://strml.github.io/react-grid-layout/examples/2-no-dragging.html)
-1. [Messy Layout Autocorrect](https://strml.github.io/react-grid-layout/examples/3-messy.html)
-1. [Layout Defined on Children](https://strml.github.io/react-grid-layout/examples/4-grid-property.html)
-1. [Static Elements](https://strml.github.io/react-grid-layout/examples/5-static-elements.html)
-1. [Adding/Removing Elements](https://strml.github.io/react-grid-layout/examples/6-dynamic-add-remove.html)
-1. [Saving Layout to LocalStorage](https://strml.github.io/react-grid-layout/examples/7-localstorage.html)
-1. [Saving a Responsive Layout to LocalStorage](https://strml.github.io/react-grid-layout/examples/8-localstorage-responsive.html)
-1. [Minimum and Maximum Width/Height](https://strml.github.io/react-grid-layout/examples/9-min-max-wh.html)
-1. [Dynamic Minimum and Maximum Width/Height](https://strml.github.io/react-grid-layout/examples/10-dynamic-min-max-wh.html)
-1. [No Vertical Compacting (Free Movement)](https://strml.github.io/react-grid-layout/examples/11-no-vertical-compact.html)
-1. [Prevent Collision](https://strml.github.io/react-grid-layout/examples/12-prevent-collision.html)
-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)
+1. [Showcase](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html)
+1. [Basic](https://react-grid-layout.github.io/react-grid-layout/examples/1-basic.html)
+1. [No Dragging/Resizing (Layout Only)](https://react-grid-layout.github.io/react-grid-layout/examples/2-no-dragging.html)
+1. [Messy Layout Autocorrect](https://react-grid-layout.github.io/react-grid-layout/examples/3-messy.html)
+1. [Layout Defined on Children](https://react-grid-layout.github.io/react-grid-layout/examples/4-grid-property.html)
+1. [Static Elements](https://react-grid-layout.github.io/react-grid-layout/examples/5-static-elements.html)
+1. [Adding/Removing Elements](https://react-grid-layout.github.io/react-grid-layout/examples/6-dynamic-add-remove.html)
+1. [Saving Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/7-localstorage.html)
+1. [Saving a Responsive Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/8-localstorage-responsive.html)
+1. [Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/9-min-max-wh.html)
+1. [Dynamic Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/10-dynamic-min-max-wh.html)
+1. [No Vertical Compacting (Free Movement)](https://react-grid-layout.github.io/react-grid-layout/examples/11-no-vertical-compact.html)
+1. [Prevent Collision](https://react-grid-layout.github.io/react-grid-layout/examples/12-prevent-collision.html)
+1. [Error Case](https://react-grid-layout.github.io/react-grid-layout/examples/13-error-case.html)
+1. [Toolbox](https://react-grid-layout.github.io/react-grid-layout/examples/14-toolbox.html)
+1. [Drag From Outside](https://react-grid-layout.github.io/react-grid-layout/examples/15-drag-from-outside.html)
+1. [Bounded Layout](https://react-grid-layout.github.io/react-grid-layout/examples/16-bounded.html)
+1. [Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/17-resizable-handles.html)
+1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html)
 
 #### Projects Using React-Grid-Layout
 
@@ -72,6 +73,7 @@ RGL is React-only and does not require jQuery.
 - [Quadency](https://quadency.com/)
 - [Hakkiri](https://www.hakkiri.io)
 - [Ubidots](https://help.ubidots.com/en/articles/2400308-create-dashboards-and-widgets)
+- [Statsout](https://statsout.com/)
 
 *Know of others? Create a PR to let me know!*
 
@@ -90,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       |

package/build/GridItem.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,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");
@@ -25,8 +25,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function 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; }
@@ -47,7 +45,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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); }
 
@@ -78,13 +76,13 @@ 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
-    /*: Event*/
-    , _ref) {
+    _defineProperty(_assertThisInitialized(_this), "onDragStart", function (e, _ref) {
       var node = _ref.node;
-      var onDragStart = _this.props.onDragStart;
+      var _this$props = _this.props,
+          onDragStart = _this$props.onDragStart,
+          transformScale = _this$props.transformScale;
       if (!onDragStart) return;
       var newPosition
       /*: PartialPosition*/
@@ -97,10 +95,10 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       if (!offsetParent) return;
       var parentRect = offsetParent.getBoundingClientRect();
       var clientRect = node.getBoundingClientRect();
-      var cLeft = clientRect.left / _this.props.transformScale;
-      var pLeft = parentRect.left / _this.props.transformScale;
-      var cTop = clientRect.top / _this.props.transformScale;
-      var pTop = parentRect.top / _this.props.transformScale;
+      var cLeft = clientRect.left / transformScale;
+      var pLeft = parentRect.left / transformScale;
+      var cTop = clientRect.top / transformScale;
+      var pTop = parentRect.top / transformScale;
       newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
       newPosition.top = cTop - pTop + offsetParent.scrollTop;
 
@@ -120,18 +118,12 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onDrag", function (e
-    /*: Event*/
-    , _ref2) {
+    _defineProperty(_assertThisInitialized(_this), "onDrag", function (e, _ref2) {
       var node = _ref2.node,
           deltaX = _ref2.deltaX,
           deltaY = _ref2.deltaY;
-      var _this$props = _this.props,
-          onDrag = _this$props.onDrag,
-          transformScale = _this$props.transformScale;
+      var onDrag = _this.props.onDrag;
       if (!onDrag) return;
-      deltaX /= transformScale;
-      deltaY /= transformScale;
 
       if (!_this.state.dragging) {
         throw new Error("onDrag called before onDragStart.");
@@ -187,9 +179,7 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onDragStop", function (e
-    /*: Event*/
-    , _ref3) {
+    _defineProperty(_assertThisInitialized(_this), "onDragStop", function (e, _ref3) {
       var node = _ref3.node;
       var onDragStop = _this.props.onDragStop;
       if (!onDragStop) return;
@@ -227,27 +217,15 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onResizeStop", function (e
-    /*: Event*/
-    , callbackData
-    /*: { node: HTMLElement, size: Position }*/
-    ) {
+    _defineProperty(_assertThisInitialized(_this), "onResizeStop", function (e, callbackData) {
       _this.onResizeHandler(e, callbackData, "onResizeStop");
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onResizeStart", function (e
-    /*: Event*/
-    , callbackData
-    /*: { node: HTMLElement, size: Position }*/
-    ) {
+    _defineProperty(_assertThisInitialized(_this), "onResizeStart", function (e, callbackData) {
       _this.onResizeHandler(e, callbackData, "onResizeStart");
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onResize", function (e
-    /*: Event*/
-    , callbackData
-    /*: { node: HTMLElement, size: Position }*/
-    ) {
+    _defineProperty(_assertThisInitialized(_this), "onResize", function (e, callbackData) {
       _this.onResizeHandler(e, callbackData, "onResize");
     });
 
@@ -260,7 +238,9 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
     /*: 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;
@@ -291,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
         });
@@ -318,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
         });
@@ -401,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);
     }
     /**
@@ -442,7 +416,8 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
       var maxConstraints = [Math.min(maxes.width, maxWidth), Math.min(maxes.height, Infinity)];
       return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable, {
         draggableOpts: {
-          disabled: !isResizable
+          disabled: !isResizable,
+          nodeRef: this.elementRef
         },
         className: isResizable ? undefined : "react-resizable-hide",
         width: position.width,
@@ -465,7 +440,7 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
 
   }, {
     key: "onResizeHandler",
-
+    value:
     /**
      * Wrapper around drag events to provide more useful data.
      * All drag events call the function with the given handler name,
@@ -474,11 +449,13 @@ var GridItem = /*#__PURE__*/function (_React$Component) {
      * @param  {String} handlerName Handler name to wrap.
      * @return {Function}           Handler function.
      */
-    value: function onResizeHandler(e
+    function onResizeHandler(e
     /*: Event*/
     , _ref4, handlerName
     /*: string*/
-    ) {
+    )
+    /*: void*/
+    {
       var node = _ref4.node,
           size = _ref4.size;
       var handler = this.props[handlerName];
@@ -534,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),