react-grid-layout 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.5.3 (Dec 5, 2025)
+
+- Fix collision detection y-coordinate offset. [#2173](https://github.com/react-grid-layout/react-grid-layout/pull/2173)
+- Memoize bottom computation in compact for performance. [#2115](https://github.com/react-grid-layout/react-grid-layout/pull/2115)
+- Make `b` param in `compactItem` optional. [#2165](https://github.com/react-grid-layout/react-grid-layout/pull/2165)
+- Fix example animations and rework example styles.
+- Various devDependency updates and security fixes. [#2179](https://github.com/react-grid-layout/react-grid-layout/pull/2179)
+
 ## 1.5.2 (Jun 25, 2025)
 
 - Fix `calcXY` when `isBounded=true` moving items incorrectly. Likely related to #2059. Thanks @wanpan11. [#2102](https://github.com/react-grid-layout/react-grid-layout/pull/2102)
@@ -440,7 +448,6 @@ Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, a
 ---
 
 - Fix React PropTypes & createClass warnings
-
   - See https://github.com/facebook/react/issues/10583
 
     0.15.0 (Aug 21, 2017)
@@ -456,7 +463,6 @@ Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, a
 ---
 
 - Fixed a dragging bug when the grid container is scrollable. Thanks @chultquist.
-
   - Ref: https://github.com/STRML/react-grid-layout/pull/555
 
     0.14.6 (Apr 19, 2017)
@@ -531,7 +537,6 @@ Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, a
 #### Fixes:
 
 - Fixed sorting of layout items, which could be different in IE if two items have the same x & y coordinate.
-
   - See [#369](https://github.com/STRML/react-grid-layout/issues/369).
 
     0.13.8 (Oct 13, 2016)
@@ -541,7 +546,6 @@ Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, a
 #### Fixes:
 
 - Fixed breakage introduced in `0.13.7` when items are added without a layout or `data-grid` property.
-
   - See [#368](https://github.com/STRML/react-grid-layout/issues/368).
 
     0.13.7 (Oct 3, 2016)
@@ -579,7 +583,6 @@ Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, a
 
 - Fixed potential call to `ReactDOM.findDOMNode(this)` after unmount of `WidthProvider`.
 - Fixed an issue where layout items using `data-grid` could rearrange on mount depending on how they were ordered.
-
   - See [#342](https://github.com/STRML/react-grid-layout/pull/342) for reference.
 
     0.13.3 (Aug 31, 2016)
@@ -602,7 +605,6 @@ Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, a
   - I'm aware this could be a breaking change if you were relying on this bad behavior. If so, please
     use your own `WidthProvider`-style HOC.
 - `babel-plugin-transform-flow-comments` had limited support for defining types like transpiled classes.
-
   - This has been updated to instead copy source to `.js.flow` files, which preserves all type information.
 
     0.13.1 (Aug 16, 2016)
@@ -650,7 +652,6 @@ Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, a
 ---
 
 - Update to React-Draggable v2. Fixes: #241, #239, #24
-
   - v2 contains a number of bugfixes & enhancements for touchscreens, multitouch, and scrolling containers.
 
     0.12.3 (May 3, 2016)
@@ -828,7 +829,6 @@ Other changes:
 - Upgraded to Babel 6.
 - Full typechecking via Flow.
 - Lots of misc bugfixes.
-
   - See beta releases below for more details.
 
     0.10.0-beta1

package/README.md

@@ -62,6 +62,7 @@ RGL is React-only and does not require jQuery.
 
 #### Projects Using React-Grid-Layout
 
+- [Basedash](https://www.basedash.com)
 - [BitMEX](https://www.bitmex.com/)
 - [AWS CloudFront Dashboards](https://aws.amazon.com/blogs/aws/cloudwatch-dashboards-create-use-customized-metrics-views/)
 - [Grafana](https://grafana.com/)

package/build/GridItem.js

@@ -14,6 +14,8 @@ var _calculateUtils = require("./calculateUtils");
 var _ReactGridLayoutPropTypes = require("./ReactGridLayoutPropTypes");
 var _clsx = _interopRequireDefault(require("clsx"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -543,11 +545,7 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
         cssTransforms: useCSSTransforms
       }),
       // We can set the width and height on the child, but unfortunately we can't set the position.
-      style: {
-        ...this.props.style,
-        ...child.props.style,
-        ...this.createStyle(pos)
-      }
+      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.

package/build/ReactGridLayout.js

@@ -13,6 +13,8 @@ var _GridItem = _interopRequireDefault(require("./GridItem"));
 var _ReactGridLayoutPropTypes = _interopRequireDefault(require("./ReactGridLayoutPropTypes"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -265,13 +267,12 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
         // Something like quad tree should be used
         // to find collisions faster
         if (preventCollision && !allowOverlap) {
-          const collisions = (0, _utils.getAllCollisions)(layout, {
-            ...l,
+          const collisions = (0, _utils.getAllCollisions)(layout, _objectSpread(_objectSpread({}, l), {}, {
             w,
             h,
             x,
             y
-          }).filter(layoutItem => layoutItem.i !== l.i);
+          })).filter(layoutItem => layoutItem.i !== l.i);
           hasCollisions = collisions.length > 0;
 
           // If we're colliding, we need adjust the placeholder.
@@ -348,6 +349,7 @@ 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();
 
@@ -356,7 +358,7 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       // FIXME remove this hack
       if (isFirefox &&
       // $FlowIgnore can't figure this out
-      !e.nativeEvent.target?.classList.contains(layoutClassName)) {
+      !((_e$nativeEvent$target = e.nativeEvent.target) !== null && _e$nativeEvent$target !== void 0 && _e$nativeEvent$target.classList.contains(layoutClassName))) {
         return false;
       }
       const {
@@ -372,17 +374,14 @@ 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?.(e);
+      const onDragOverResult = onDropDragOver === null || onDropDragOver === void 0 ? void 0 : onDropDragOver(e);
       if (onDragOverResult === false) {
         if (this.state.droppingDOMNode) {
           this.removeDroppingPlaceholder();
         }
         return false;
       }
-      const finalDroppingItem = {
-        ...droppingItem,
-        ...onDragOverResult
-      };
+      const finalDroppingItem = _objectSpread(_objectSpread({}, droppingItem), onDragOverResult);
       const {
         layout
       } = this.state;
@@ -413,13 +412,12 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
             key: finalDroppingItem.i
           }),
           droppingPosition,
-          layout: [...layout, {
-            ...finalDroppingItem,
+          layout: [...layout, _objectSpread(_objectSpread({}, finalDroppingItem), {}, {
             x: calculatedPosition.x,
             y: calculatedPosition.y,
             static: false,
             isDraggable: true
-          }]
+          })]
         });
       } else if (this.state.droppingPosition) {
         const {
@@ -584,7 +582,7 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       x: activeDrag.x,
       y: activeDrag.y,
       i: activeDrag.i,
-      className: `react-grid-placeholder ${this.state.resizing ? "placeholder-resizing" : ""}`,
+      className: "react-grid-placeholder ".concat(this.state.resizing ? "placeholder-resizing" : ""),
       containerWidth: width,
       cols: cols,
       margin: margin,
@@ -683,10 +681,9 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       innerRef
     } = this.props;
     const mergedClassName = (0, _clsx.default)(layoutClassName, className);
-    const mergedStyle = {
-      height: this.containerHeight(),
-      ...style
-    };
+    const mergedStyle = _objectSpread({
+      height: this.containerHeight()
+    }, style);
     return /*#__PURE__*/React.createElement("div", {
       ref: innerRef,
       className: mergedClassName,

package/build/ReactGridLayoutPropTypes.js

@@ -198,7 +198,7 @@ var _default = exports.default = {
     // Check children keys for duplicates. Throw if found.
     const keys = {};
     _react.default.Children.forEach(children, function (child) {
-      if (child?.key == null) return;
+      if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
       if (keys[child.key]) {
         throw new Error('Duplicate child key "' + child.key + '" found! This will cause problems in ReactGridLayout.');
       }

package/build/ResponsiveReactGridLayout.js

@@ -10,9 +10,14 @@ var _fastEquals = require("fast-equals");
 var _utils = require("./utils");
 var _responsiveUtils = require("./responsiveUtils");
 var _ReactGridLayout = _interopRequireDefault(require("./ReactGridLayout"));
+const _excluded = ["breakpoint", "breakpoints", "cols", "layouts", "margin", "containerPadding", "onBreakpointChange", "onLayoutChange", "onWidthChange"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*:: import { type Layout, type Pick } from "./utils";*/ /*:: import { type ResponsiveLayout, type OnLayoutChangeCallback, type Breakpoints } from "./responsiveUtils";*/
@@ -86,10 +91,9 @@ class ResponsiveReactGridLayout extends React.Component
     _defineProperty(this, "state", this.generateInitialState());
     // wrap layouts so we do not need to pass layouts to child
     _defineProperty(this, "onLayoutChange", (layout /*: Layout*/) => {
-      this.props.onLayoutChange(layout, {
-        ...this.props.layouts,
+      this.props.onLayoutChange(layout, _objectSpread(_objectSpread({}, this.props.layouts), {}, {
         [this.state.breakpoint]: layout
-      });
+      }));
     });
   }
   generateInitialState() /*: State*/{
@@ -150,9 +154,7 @@ class ResponsiveReactGridLayout extends React.Component
     const newBreakpoint = this.props.breakpoint || (0, _responsiveUtils.getBreakpointFromWidth)(this.props.breakpoints, this.props.width);
     const lastBreakpoint = this.state.breakpoint;
     const newCols /*: number*/ = (0, _responsiveUtils.getColsFromBreakpoint)(newBreakpoint, cols);
-    const newLayouts = {
-      ...layouts
-    };
+    const newLayouts = _objectSpread({}, layouts);
 
     // Breakpoint change
     if (lastBreakpoint !== newBreakpoint || prevProps.breakpoints !== breakpoints || prevProps.cols !== cols) {
@@ -185,18 +187,19 @@ class ResponsiveReactGridLayout extends React.Component
   }
   render() /*: React.Element<typeof ReactGridLayout>*/{
     /* eslint-disable no-unused-vars */
-    const {
-      breakpoint,
-      breakpoints,
-      cols,
-      layouts,
-      margin,
-      containerPadding,
-      onBreakpointChange,
-      onLayoutChange,
-      onWidthChange,
-      ...other
-    } = this.props;
+    const _this$props = this.props,
+      {
+        breakpoint,
+        breakpoints,
+        cols,
+        layouts,
+        margin,
+        containerPadding,
+        onBreakpointChange,
+        onLayoutChange,
+        onWidthChange
+      } = _this$props,
+      other = _objectWithoutProperties(_this$props, _excluded);
     /* eslint-enable no-unused-vars */
 
     return /*#__PURE__*/React.createElement(_ReactGridLayout.default, _extends({}, other, {

package/build/components/WidthProvider.js

@@ -8,9 +8,12 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
 var _clsx = _interopRequireDefault(require("clsx"));
+const _excluded = ["measureBeforeMount"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -84,10 +87,11 @@ function WidthProvideRGL /*:: <Config>*/(ComposedComponent /*: React.AbstractCom
       this.resizeObserver.disconnect();
     }
     render() {
-      const {
-        measureBeforeMount,
-        ...rest
-      } = this.props;
+      const _this$props = this.props,
+        {
+          measureBeforeMount
+        } = _this$props,
+        rest = _objectWithoutProperties(_this$props, _excluded);
       if (measureBeforeMount && !this.mounted) {
         return /*#__PURE__*/React.createElement("div", {
           className: (0, _clsx.default)(this.props.className, layoutClassName),

package/build/utils.js

@@ -35,6 +35,11 @@ exports.withLayoutItem = withLayoutItem;
 var _fastEquals = require("fast-equals");
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /*:: import type {
   ChildrenArray as ReactChildrenArray,
   Element as ReactElement
@@ -196,7 +201,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?.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"]));
+  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"]));
 }
 
 /**
@@ -242,6 +247,8 @@ function collides(l1 /*: LayoutItem*/, l2 /*: LayoutItem*/) /*: boolean*/{
 function compact(layout /*: Layout*/, compactType /*: CompactType*/, cols /*: number*/, allowOverlap /*: ?boolean*/) /*: Layout*/{
   // Statics go in the compareWith array right away so items flow around them.
   const compareWith = getStatics(layout);
+  // We keep track of the bottom position.
+  let b = bottom(compareWith);
   // We go through the items by row and column.
   const sorted = sortLayoutItems(layout, compactType);
   // Holding for new items.
@@ -251,7 +258,8 @@ function compact(layout /*: Layout*/, compactType /*: CompactType*/, cols /*: nu
 
     // Don't move static elements
     if (!l.static) {
-      l = compactItem(compareWith, l, compactType, cols, sorted, allowOverlap);
+      l = compactItem(compareWith, l, compactType, cols, sorted, allowOverlap, b);
+      b = Math.max(b, l.y + l.h);
 
       // Add to comparison array. We only collide with items before this one.
       // Statics are already in this array.
@@ -302,14 +310,18 @@ function resolveCompactionCollision(layout /*: Layout*/, item /*: LayoutItem*/,
  * Modifies item.
  *
  */
-function compactItem(compareWith /*: Layout*/, l /*: LayoutItem*/, compactType /*: CompactType*/, cols /*: number*/, fullLayout /*: Layout*/, allowOverlap /*: ?boolean*/) /*: LayoutItem*/{
+function compactItem(compareWith /*: Layout*/, l /*: LayoutItem*/, compactType /*: CompactType*/, cols /*: number*/, fullLayout /*: Layout*/, allowOverlap /*: ?boolean*/, b /*: ?number*/) /*: LayoutItem*/{
   const compactV = compactType === "vertical";
   const compactH = compactType === "horizontal";
   if (compactV) {
     // Bottom 'y' possible is the bottom of the layout.
     // This allows you to do nice stuff like specify {y: Infinity}
     // This is here because the layout must be sorted in order to get the correct bottom `y`.
-    l.y = Math.min(bottom(compareWith), l.y);
+    if (typeof b === "number") {
+      l.y = Math.min(b, l.y);
+    } else {
+      l.y = Math.min(bottom(compareWith), l.y);
+    }
     // Move the element up as far as it can go without colliding.
     while (l.y > 0 && !getFirstCollision(compareWith, l)) {
       l.y--;
@@ -433,7 +445,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 ${l.i} to [${String(x)},${String(y)}] from [${l.x},${l.y}]`);
+  log("Moving element ".concat(l.i, " to [").concat(String(x), ",").concat(String(y), "] from [").concat(l.x, ",").concat(l.y, "]"));
   const oldX = l.x;
   const oldY = l.y;
 
@@ -463,7 +475,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 ${l.i}, reverting.`);
+    log("Collision prevented on ".concat(l.i, ", reverting."));
     l.x = oldX;
     l.y = oldY;
     l.moved = false;
@@ -473,7 +485,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 ${l.i} at [${l.x},${l.y}] and ${collision.i} at [${collision.x},${collision.y}]`);
+    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, "]"));
 
     // Short circuit so we can't infinite loop
     if (collision.moved) continue;
@@ -523,10 +535,10 @@ 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 ${itemToMove.i} up to [${fakeItem.x},${fakeItem.y}].`);
+      log("Doing reverse collision on ".concat(itemToMove.i, " up to [").concat(fakeItem.x, ",").concat(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);
+      return moveElement(layout, itemToMove, undefined, itemToMove.y + 1, isUserAction, preventCollision, compactType, cols);
     } else if (collisionNorth && compactType == null) {
       collidesWith.y = itemToMove.y;
       itemToMove.y = itemToMove.y + itemToMove.h;
@@ -650,10 +662,7 @@ function resizeItemInDirection(direction /*: ResizeHandleAxis*/, currentSize /*:
   const ordinalHandler = ordinalResizeHandlerMap[direction];
   // Shouldn't be possible given types; that said, don't fail hard
   if (!ordinalHandler) return newSize;
-  return ordinalHandler(currentSize, {
-    ...currentSize,
-    ...newSize
-  }, containerWidth);
+  return ordinalHandler(currentSize, _objectSpread(_objectSpread({}, currentSize), newSize), containerWidth);
 }
 function setTransform(_ref5 /*:: */) /*: Object*/{
   let {
@@ -663,15 +672,15 @@ function setTransform(_ref5 /*:: */) /*: Object*/{
     height
   } /*: Position*/ = _ref5 /*: Position*/;
   // Replace unitless items with px
-  const translate = `translate(${left}px,${top}px)`;
+  const translate = "translate(".concat(left, "px,").concat(top, "px)");
   return {
     transform: translate,
     WebkitTransform: translate,
     MozTransform: translate,
     msTransform: translate,
     OTransform: translate,
-    width: `${width}px`,
-    height: `${height}px`,
+    width: "".concat(width, "px"),
+    height: "".concat(height, "px"),
     position: "absolute"
   };
 }
@@ -683,10 +692,10 @@ function setTopLeft(_ref6 /*:: */) /*: Object*/{
     height
   } /*: Position*/ = _ref6 /*: Position*/;
   return {
-    top: `${top}px`,
-    left: `${left}px`,
-    width: `${width}px`,
-    height: `${height}px`,
+    top: "".concat(top, "px"),
+    left: "".concat(left, "px"),
+    width: "".concat(width, "px"),
+    height: "".concat(height, "px"),
     position: "absolute"
   };
 }
@@ -752,7 +761,7 @@ function synchronizeLayoutWithChildren(initialLayout /*: Layout*/, children /*:
   const layout /*: LayoutItem[]*/ = [];
   _react.default.Children.forEach(children, (child /*: ReactElement<any>*/) => {
     // Child may not exist
-    if (child?.key == null) return;
+    if ((child === null || child === void 0 ? void 0 : 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.
@@ -766,10 +775,9 @@ function synchronizeLayoutWithChildren(initialLayout /*: Layout*/, children /*:
           validateLayout([g], "ReactGridLayout.children");
         }
         // FIXME clone not really necessary here
-        layout.push(cloneLayoutItem({
-          ...g,
+        layout.push(cloneLayoutItem(_objectSpread(_objectSpread({}, g), {}, {
           i: child.key
-        }));
+        })));
       } else {
         // Nothing provided: ensure this is added to the bottom
         // FIXME clone not really necessary here
@@ -808,11 +816,11 @@ function validateLayout(layout /*: Layout*/) /*: void*/{
       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})`);
+        throw new Error("ReactGridLayout: ".concat(contextName, "[").concat(i, "].").concat(key, " must be a number! Received: ").concat(value, " (").concat(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})`);
+      throw new Error("ReactGridLayout: ".concat(contextName, "[").concat(i, "].i must be a string! Received: ").concat(item.i, " (").concat(typeof item.i, ")"));
     }
   }
 }