react-grid-layout 1.4.3 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.4.4 (Nov 28, 2023)
+
+### Bugfixes
+
+- Fix position logic when draggable item is dragged into the grid. We no longer use the deprecated / non-standard `e.nativeEvent.layer{X,Y}` properties. [#1915](https://github.com/react-grid-layout/react-grid-layout/pull/1915)
+- Fix drag values according to containerPadding. Previously, when dragging an item, the intuited position within the grid was _not_ modified by `containerPadding`, causing it to off by that value. On most grids, this is only set to `[10, 10]`, so this may not have been noticeable, but for higher values it was very obvious. Thanks @hywlss9. [#1323](https://github.com/react-grid-layout/react-grid-layout/pull/1323)
+- Various lint/dependency fixes.
+
 ## 1.4.3 (Nov 8, 2023)
 
 ### Bugfixes

package/README.md

@@ -37,16 +37,16 @@ RGL is React-only and does not require jQuery.
 
 ## Demos
 
-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. [Showcase](https://react-grid-layout.github.io/react-grid-layout/examples/00-showcase.html)
+1. [Basic](https://react-grid-layout.github.io/react-grid-layout/examples/01-basic.html)
+1. [No Dragging/Resizing (Layout Only)](https://react-grid-layout.github.io/react-grid-layout/examples/02-no-dragging.html)
+1. [Messy Layout Autocorrect](https://react-grid-layout.github.io/react-grid-layout/examples/03-messy.html)
+1. [Layout Defined on Children](https://react-grid-layout.github.io/react-grid-layout/examples/04-grid-property.html)
+1. [Static Elements](https://react-grid-layout.github.io/react-grid-layout/examples/05-static-elements.html)
+1. [Adding/Removing Elements](https://react-grid-layout.github.io/react-grid-layout/examples/06-dynamic-add-remove.html)
+1. [Saving Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/07-localstorage.html)
+1. [Saving a Responsive Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/08-localstorage-responsive.html)
+1. [Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/09-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)
@@ -54,10 +54,11 @@ RGL is React-only and does not require jQuery.
 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. [Responsive Bootstrap-style Layout](https://react-grid-layout.github.io/react-grid-layout/examples/17-responsive-bootstrap-style.html)
 1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html)
 1. [Allow Overlap](https://react-grid-layout.github.io/react-grid-layout/examples/19-allow-overlap.html)
 1. [All Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/20-resizable-handles.html)
+1. [Single Row Horizontal](https://react-grid-layout.github.io/react-grid-layout/examples/21-horizontal.html)
 
 #### Projects Using React-Grid-Layout
 
@@ -78,6 +79,7 @@ RGL is React-only and does not require jQuery.
 - [Ubidots](https://help.ubidots.com/en/articles/2400308-create-dashboards-and-widgets)
 - [Statsout](https://statsout.com/)
 - [Datto RMM](https://www.datto.com/uk/products/rmm/)
+- [SquaredUp](https://squaredup.com/)
 
 _Know of others? Create a PR to let me know!_
 
@@ -108,7 +110,7 @@ _Know of others? Create a PR to let me know!_
 
 ## Installation
 
-Install the React-Grid-Layout [package](https://www.npmjs.org/package/react-grid-layout) package using [npm](https://www.npmjs.com/):
+Install the React-Grid-Layout [package](https://www.npmjs.org/package/react-grid-layout) using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install react-grid-layout
@@ -297,15 +299,13 @@ draggableCancel: ?string = '',
 draggableHandle: ?string = '',
 
 // Compaction type.
-compactType: ?('vertical' | 'horizontal') = 'vertical';
+compactType: ?('vertical' | 'horizontal' | null) = 'vertical';
 
-// Layout is an array of object with the format:
-// {x: number, y: number, w: number, h: number}
+// Layout is an array of objects with the format:
 // The index into the layout must match the key used on each item component.
 // If you choose to use custom keys, you can specify that key in the layout
-// array objects like so:
-// {i: string, x: number, y: number, w: number, h: number}
-layout: ?array = null, // If not provided, use data-grid props on children
+// array objects using the `i` prop.
+layout: ?Array<{i?: string, x: number, y: number, w: number, h: number}> = null, // If not provided, use data-grid props on children
 
 // Margin between items [x, y] in px.
 margin: ?[number, number] = [10, 10],

package/build/GridItem.js

@@ -199,13 +199,14 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
         if (offsetParent) {
           const {
             margin,
-            rowHeight
+            rowHeight,
+            containerPadding
           } = this.props;
           const bottomBoundary = offsetParent.clientHeight - (0, _calculateUtils.calcGridItemWHPx)(h, rowHeight, margin[1]);
-          top = (0, _calculateUtils.clamp)(top, 0, bottomBoundary);
+          top = (0, _calculateUtils.clamp)(top - containerPadding[1], 0, bottomBoundary);
           const colWidth = (0, _calculateUtils.calcGridColWidth)(positionParams);
           const rightBoundary = containerWidth - (0, _calculateUtils.calcGridItemWHPx)(w, colWidth, margin[0]);
-          left = (0, _calculateUtils.clamp)(left, 0, rightBoundary);
+          left = (0, _calculateUtils.clamp)(left - containerPadding[0], 0, rightBoundary);
         }
       }
       const newPosition /*: PartialPosition*/ = {

package/build/ReactGridLayout.js

@@ -12,8 +12,8 @@ var _calculateUtils = require("./calculateUtils");
 var _GridItem = _interopRequireDefault(require("./GridItem"));
 var _ReactGridLayoutPropTypes = _interopRequireDefault(require("./ReactGridLayoutPropTypes"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
@@ -233,7 +233,7 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       const {
         oldResizeItem
       } = this.state;
-      let {
+      const {
         layout
       } = this.state;
       const {
@@ -349,7 +349,6 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
     // Called while dragging an element. Part of browser native drag/drop API.
     // Native event target might be the layout itself, or an element within the layout.
     _defineProperty(this, "onDragOver", e => {
-      var _e$nativeEvent$target;
       e.preventDefault(); // Prevent any browser native action
       e.stopPropagation();
 
@@ -358,7 +357,7 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       // FIXME remove this hack
       if (isFirefox &&
       // $FlowIgnore can't figure this out
-      !((_e$nativeEvent$target = e.nativeEvent.target) !== null && _e$nativeEvent$target !== void 0 && _e$nativeEvent$target.classList.contains(layoutClassName))) {
+      !e.nativeEvent.target?.classList.contains(layoutClassName)) {
         return false;
       }
       const {
@@ -374,7 +373,7 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       } = this.props;
       // Allow user to customize the dropping item or short-circuit the drop based on the results
       // of the `onDragOver(e: Event)` callback.
-      const onDragOverResult = onDropDragOver === null || onDropDragOver === void 0 ? void 0 : onDropDragOver(e);
+      const onDragOverResult = onDropDragOver?.(e);
       if (onDragOverResult === false) {
         if (this.state.droppingDOMNode) {
           this.removeDroppingPlaceholder();
@@ -388,11 +387,13 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       const {
         layout
       } = this.state;
-      // This is relative to the DOM element that this event fired for.
-      const {
-        layerX,
-        layerY
-      } = e.nativeEvent;
+
+      // $FlowIgnore missing def
+      const gridRect = e.currentTarget.getBoundingClientRect(); // The grid's position in the viewport
+
+      // Calculate the mouse position relative to the grid
+      const layerX = e.clientX - gridRect.left;
+      const layerY = e.clientY - gridRect.top;
       const droppingPosition = {
         left: layerX / transformScale,
         top: layerY / transformScale,
@@ -584,7 +585,7 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       x: activeDrag.x,
       y: activeDrag.y,
       i: activeDrag.i,
-      className: "react-grid-placeholder ".concat(this.state.resizing ? "placeholder-resizing" : ""),
+      className: `react-grid-placeholder ${this.state.resizing ? "placeholder-resizing" : ""}`,
       containerWidth: width,
       cols: cols,
       margin: margin,

package/build/ReactGridLayoutPropTypes.js

@@ -40,10 +40,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 'nw' - Northwest handle (top-left)
 // 'se' - Southeast handle (bottom-right)
 // 'ne' - Northeast handle (top-right)
-const resizeHandleAxesType /*: ReactPropsChainableTypeChecker*/ = _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"]));
+const resizeHandleAxesType /*: ReactPropsChainableTypeChecker*/ = exports.resizeHandleAxesType = _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"]));
 // Custom component for resize handles
-exports.resizeHandleAxesType = resizeHandleAxesType;
-const resizeHandleType /*: ReactPropsChainableTypeChecker*/ = _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]);
+const resizeHandleType /*: ReactPropsChainableTypeChecker*/ = exports.resizeHandleType = _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]);
 /*:: export type Props = {|
   className: string,
   style: Object,
@@ -91,8 +90,7 @@ const resizeHandleType /*: ReactPropsChainableTypeChecker*/ = _propTypes.default
     width: number
   }
 >;*/
-exports.resizeHandleType = resizeHandleType;
-var _default = {
+var _default = exports.default = {
   //
   // Basic props
   //
@@ -200,7 +198,7 @@ var _default = {
     // Check children keys for duplicates. Throw if found.
     const keys = {};
     _react.default.Children.forEach(children, function (child) {
-      if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
+      if (child?.key == null) return;
       if (keys[child.key]) {
         throw new Error('Duplicate child key "' + child.key + '" found! This will cause problems in ReactGridLayout.');
       }
@@ -209,5 +207,4 @@ var _default = {
   },
   // Optional ref for getting a reference for the wrapping div.
   innerRef: _propTypes.default.any
-};
-exports.default = _default;
+};

package/build/ResponsiveReactGridLayout.js

@@ -11,8 +11,8 @@ var _utils = require("./utils");
 var _responsiveUtils = require("./responsiveUtils");
 var _ReactGridLayout = _interopRequireDefault(require("./ReactGridLayout"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 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); }
@@ -170,8 +170,8 @@ class ResponsiveReactGridLayout extends React.Component
       newLayouts[newBreakpoint] = layout;
 
       // callbacks
-      this.props.onLayoutChange(layout, newLayouts);
       this.props.onBreakpointChange(newBreakpoint, newCols);
+      this.props.onLayoutChange(layout, newLayouts);
       this.setState({
         breakpoint: newBreakpoint,
         layout: layout,

package/build/calculateUtils.js

@@ -97,21 +97,18 @@ function calcGridItemPosition(positionParams /*: PositionParams*/, x /*: number*
 function calcXY(positionParams /*: PositionParams*/, top /*: number*/, left /*: number*/, w /*: number*/, h /*: number*/) /*: { x: number, y: number }*/{
   const {
     margin,
+    containerPadding,
     cols,
     rowHeight,
     maxRows
   } = positionParams;
   const colWidth = calcGridColWidth(positionParams);
 
-  // left = colWidth * x + margin * (x + 1)
-  // l = cx + m(x+1)
-  // l = cx + mx + m
-  // l - m = cx + mx
-  // l - m = x(c + m)
-  // (l - m) / (c + m) = x
-  // x = (left - margin) / (coldWidth + margin)
-  let x = Math.round((left - margin[0]) / (colWidth + margin[0]));
-  let y = Math.round((top - margin[1]) / (rowHeight + margin[1]));
+  // left = containerPaddingX + x * (colWidth + marginX)
+  // x * (colWidth + marginX) = left - containerPaddingX
+  // x = (left - containerPaddingX) / (colWidth + marginX)
+  let x = Math.round((left - containerPadding[0]) / (colWidth + margin[0]));
+  let y = Math.round((top - containerPadding[1]) / (rowHeight + margin[1]));
 
   // Capping
   x = clamp(x, 0, cols - w);

package/build/components/WidthProvider.js

@@ -9,8 +9,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
 var _clsx = _interopRequireDefault(require("clsx"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 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); }

package/build/utils.js

@@ -196,7 +196,7 @@ function cloneLayoutItem(layoutItem /*: LayoutItem*/) /*: LayoutItem*/{
  * This will catch differences in keys, order, and length.
  */
 function childrenEqual(a /*: ReactChildren*/, b /*: ReactChildren*/) /*: boolean*/{
-  return (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c === null || c === void 0 ? void 0 : c.key), _react.default.Children.map(b, c => c === null || c === void 0 ? void 0 : c.key)) && (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c === null || c === void 0 ? void 0 : c.props["data-grid"]), _react.default.Children.map(b, c => c === null || c === void 0 ? void 0 : c.props["data-grid"]));
+  return (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c?.key), _react.default.Children.map(b, c => c?.key)) && (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c?.props["data-grid"]), _react.default.Children.map(b, c => c?.props["data-grid"]));
 }
 
 /**
@@ -208,10 +208,9 @@ function childrenEqual(a /*: ReactChildren*/, b /*: ReactChildren*/) /*: boolean
  * function, tuned for exactly our props.
  */
 /*:: type FastRGLPropsEqual = (Object, Object, Function) => boolean;*/
-const fastRGLPropsEqual /*: FastRGLPropsEqual*/ = require("./fastRGLPropsEqual");
+const fastRGLPropsEqual /*: FastRGLPropsEqual*/ = exports.fastRGLPropsEqual = require("./fastRGLPropsEqual");
 
 // Like the above, but a lot simpler.
-exports.fastRGLPropsEqual = fastRGLPropsEqual;
 function fastPositionEqual(a /*: Position*/, b /*: Position*/) /*: boolean*/{
   return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height;
 }
@@ -434,7 +433,7 @@ function moveElement(layout /*: Layout*/, l /*: LayoutItem*/, x /*: ?number*/, y
 
   // Short-circuit if nothing to do.
   if (l.y === y && l.x === x) return layout;
-  log("Moving element ".concat(l.i, " to [").concat(String(x), ",").concat(String(y), "] from [").concat(l.x, ",").concat(l.y, "]"));
+  log(`Moving element ${l.i} to [${String(x)},${String(y)}] from [${l.x},${l.y}]`);
   const oldX = l.x;
   const oldY = l.y;
 
@@ -464,7 +463,7 @@ function moveElement(layout /*: Layout*/, l /*: LayoutItem*/, x /*: ?number*/, y
     // If we are preventing collision but not allowing overlap, we need to
     // revert the position of this element so it goes to where it came from, rather
     // than the user's desired location.
-    log("Collision prevented on ".concat(l.i, ", reverting."));
+    log(`Collision prevented on ${l.i}, reverting.`);
     l.x = oldX;
     l.y = oldY;
     l.moved = false;
@@ -474,7 +473,7 @@ function moveElement(layout /*: Layout*/, l /*: LayoutItem*/, x /*: ?number*/, y
   // Move each item that collides away from this element.
   for (let i = 0, len = collisions.length; i < len; i++) {
     const collision = collisions[i];
-    log("Resolving collision between ".concat(l.i, " at [").concat(l.x, ",").concat(l.y, "] and ").concat(collision.i, " at [").concat(collision.x, ",").concat(collision.y, "]"));
+    log(`Resolving collision between ${l.i} at [${l.x},${l.y}] and ${collision.i} at [${collision.x},${collision.y}]`);
 
     // Short circuit so we can't infinite loop
     if (collision.moved) continue;
@@ -524,7 +523,7 @@ function moveElementAwayFromCollision(layout /*: Layout*/, collidesWith /*: Layo
 
     // No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
     if (!firstCollision) {
-      log("Doing reverse collision on ".concat(itemToMove.i, " up to [").concat(fakeItem.x, ",").concat(fakeItem.y, "]."));
+      log(`Doing reverse collision on ${itemToMove.i} up to [${fakeItem.x},${fakeItem.y}].`);
       return moveElement(layout, itemToMove, compactH ? fakeItem.x : undefined, compactV ? fakeItem.y : undefined, isUserAction, preventCollision, compactType, cols);
     } else if (collisionNorth && compactV) {
       return moveElement(layout, itemToMove, undefined, collidesWith.y + 1, isUserAction, preventCollision, compactType, cols);
@@ -664,15 +663,15 @@ function setTransform(_ref5 /*:: */) /*: Object*/{
     height
   } /*: Position*/ = _ref5 /*: Position*/;
   // Replace unitless items with px
-  const translate = "translate(".concat(left, "px,").concat(top, "px)");
+  const translate = `translate(${left}px,${top}px)`;
   return {
     transform: translate,
     WebkitTransform: translate,
     MozTransform: translate,
     msTransform: translate,
     OTransform: translate,
-    width: "".concat(width, "px"),
-    height: "".concat(height, "px"),
+    width: `${width}px`,
+    height: `${height}px`,
     position: "absolute"
   };
 }
@@ -684,10 +683,10 @@ function setTopLeft(_ref6 /*:: */) /*: Object*/{
     height
   } /*: Position*/ = _ref6 /*: Position*/;
   return {
-    top: "".concat(top, "px"),
-    left: "".concat(left, "px"),
-    width: "".concat(width, "px"),
-    height: "".concat(height, "px"),
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${width}px`,
+    height: `${height}px`,
     position: "absolute"
   };
 }
@@ -753,7 +752,7 @@ function synchronizeLayoutWithChildren(initialLayout /*: Layout*/, children /*:
   const layout /*: LayoutItem[]*/ = [];
   _react.default.Children.forEach(children, (child /*: ReactElement<any>*/) => {
     // Child may not exist
-    if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
+    if (child?.key == null) return;
     const exists = getLayoutItem(initialLayout, String(child.key));
     const g = child.props["data-grid"];
     // Don't overwrite the layout item if it's already in the initial layout.
@@ -806,10 +805,15 @@ function validateLayout(layout /*: Layout*/) /*: void*/{
   for (let i = 0, len = layout.length; i < len; i++) {
     const item = layout[i];
     for (let j = 0; j < subProps.length; j++) {
-      if (typeof item[subProps[j]] !== "number") {
-        throw new Error("ReactGridLayout: " + contextName + "[" + i + "]." + subProps[j] + " must be a number!");
+      const key = subProps[j];
+      const value = item[key];
+      if (typeof value !== "number" || Number.isNaN(value)) {
+        throw new Error(`ReactGridLayout: ${contextName}[${i}].${key} must be a number! Received: ${value} (${typeof value})`);
       }
     }
+    if (typeof item.i !== "undefined" && typeof item.i !== "string") {
+      throw new Error(`ReactGridLayout: ${contextName}[${i}].i must be a string! Received: ${item.i} (${typeof item.i})`);
+    }
   }
 }