react-grid-layout - npm Package Compare versions

Comparing version 1.5.2 to 1.5.3

build/components/WidthProvider.js

@@ -11,5 +11,8 @@ "use strict";
 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; }
@@ -88,6 +91,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
     render() {
-      const {
-        measureBeforeMount,
-        ...rest
-      } = this.props;
+      const _this$props = this.props,
+        {
+          measureBeforeMount
+        } = _this$props,
+        rest = _objectWithoutProperties(_this$props, _excluded);
       if (measureBeforeMount && !this.mounted) {
@@ -94,0 +98,0 @@ return /*#__PURE__*/React.createElement("div", {

build/GridItem.js

@@ -17,2 +17,4 @@ "use strict";
 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; }
@@ -547,7 +549,3 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
       // 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))
     });
@@ -554,0 +552,0 @@

build/ReactGridLayout.js

@@ -16,2 +16,4 @@ "use strict";
 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; }
@@ -269,4 +271,3 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
         if (preventCollision && !allowOverlap) {
-          const collisions = (0, _utils.getAllCollisions)(layout, {
-            ...l,
+          const collisions = (0, _utils.getAllCollisions)(layout, _objectSpread(_objectSpread({}, l), {}, {
             w,
@@ -276,3 +277,3 @@ h,
             y
-          }).filter(layoutItem => layoutItem.i !== l.i);
+          })).filter(layoutItem => layoutItem.i !== l.i);
           hasCollisions = collisions.length > 0;
@@ -354,2 +355,3 @@
     _defineProperty(this, "onDragOver", e => {
+      var _e$nativeEvent$target;
       e.preventDefault(); // Prevent any browser native action
@@ -363,3 +365,3 @@ e.stopPropagation();
       // $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;
@@ -380,3 +382,3 @@ }
       // of the `onDragOver(e: Event)` callback.
-      const onDragOverResult = onDropDragOver?.(e);
+      const onDragOverResult = onDropDragOver === null || onDropDragOver === void 0 ? void 0 : onDropDragOver(e);
       if (onDragOverResult === false) {
@@ -388,6 +390,3 @@ if (this.state.droppingDOMNode) {
       }
-      const finalDroppingItem = {
-        ...droppingItem,
-        ...onDragOverResult
-      };
+      const finalDroppingItem = _objectSpread(_objectSpread({}, droppingItem), onDragOverResult);
       const {
@@ -423,4 +422,3 @@ layout
           droppingPosition,
-          layout: [...layout, {
-            ...finalDroppingItem,
+          layout: [...layout, _objectSpread(_objectSpread({}, finalDroppingItem), {}, {
             x: calculatedPosition.x,
@@ -430,3 +428,3 @@ y: calculatedPosition.y,
             isDraggable: true
-          }]
+          })]
         });
@@ -596,3 +594,3 @@ } else if (this.state.droppingPosition) {
       i: activeDrag.i,
-      className: `react-grid-placeholder ${this.state.resizing ? "placeholder-resizing" : ""}`,
+      className: "react-grid-placeholder ".concat(this.state.resizing ? "placeholder-resizing" : ""),
       containerWidth: width,
@@ -696,6 +694,5 @@ cols: cols,
     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", {
@@ -702,0 +699,0 @@ ref: innerRef,

build/ReactGridLayoutPropTypes.js

@@ -201,3 +201,3 @@ "use strict";
     _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]) {
@@ -204,0 +204,0 @@ throw new Error('Duplicate child key "' + child.key + '" found! This will cause problems in ReactGridLayout.');

build/ResponsiveReactGridLayout.js

@@ -13,5 +13,10 @@ "use strict";
 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; }
@@ -90,6 +95,5 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
     _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
-      });
+      }));
     });
@@ -155,5 +159,3 @@ }
     const newCols /*: number*/ = (0, _responsiveUtils.getColsFromBreakpoint)(newBreakpoint, cols);
-    const newLayouts = {
-      ...layouts
-    };
+    const newLayouts = _objectSpread({}, layouts);
 
@@ -191,14 +193,15 @@ // Breakpoint change
     /* 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 */
@@ -205,0 +208,0 @@

build/utils.js

@@ -38,2 +38,7 @@ "use strict";
 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 {
@@ -200,3 +205,3 @@ ChildrenArray as ReactChildrenArray,
 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"]));
 }
@@ -247,2 +252,4 @@
   const compareWith = getStatics(layout);
+  // We keep track of the bottom position.
+  let b = bottom(compareWith);
   // We go through the items by row and column.
@@ -257,3 +264,4 @@ const sorted = sortLayoutItems(layout, compactType);
     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);
 
@@ -309,3 +317,3 @@ // Add to comparison array. We only collide with items before this one.
  */
-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";
@@ -317,3 +325,7 @@ const compactH = compactType === "horizontal";
     // 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.
@@ -442,3 +454,3 @@ while (l.y > 0 && !getFirstCollision(compareWith, l)) {
   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;
@@ -473,3 +485,3 @@ const oldY = l.y;
     // than the user's desired location.
-    log(`Collision prevented on ${l.i}, reverting.`);
+    log("Collision prevented on ".concat(l.i, ", reverting."));
     l.x = oldX;
@@ -484,3 +496,3 @@ l.y = oldY;
     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, "]"));
 
@@ -535,6 +547,6 @@ // Short circuit so we can't infinite loop
     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) {
@@ -663,6 +675,3 @@ collidesWith.y = itemToMove.y;
   if (!ordinalHandler) return newSize;
-  return ordinalHandler(currentSize, {
-    ...currentSize,
-    ...newSize
-  }, containerWidth);
+  return ordinalHandler(currentSize, _objectSpread(_objectSpread({}, currentSize), newSize), containerWidth);
 }
@@ -677,3 +686,3 @@ function setTransform(_ref5 /*:: */) /*: Object*/{
   // Replace unitless items with px
-  const translate = `translate(${left}px,${top}px)`;
+  const translate = "translate(".concat(left, "px,").concat(top, "px)");
   return {
@@ -685,4 +694,4 @@ transform: translate,
     OTransform: translate,
-    width: `${width}px`,
-    height: `${height}px`,
+    width: "".concat(width, "px"),
+    height: "".concat(height, "px"),
     position: "absolute"
@@ -699,6 +708,6 @@ };
   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"
@@ -769,3 +778,3 @@ };
     // 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));
@@ -784,6 +793,5 @@ const g = child.props["data-grid"];
         // FIXME clone not really necessary here
-        layout.push(cloneLayoutItem({
-          ...g,
+        layout.push(cloneLayoutItem(_objectSpread(_objectSpread({}, g), {}, {
           i: child.key
-        }));
+        })));
       } else {
@@ -827,7 +835,7 @@ // Nothing provided: ensure this is added to the bottom
       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, ")"));
     }
@@ -834,0 +842,0 @@ }

CHANGELOG.md

 # 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)
@@ -443,3 +451,2 @@
 - Fix React PropTypes & createClass warnings
-
   - See https://github.com/facebook/react/issues/10583
@@ -460,3 +467,2 @@
 - Fixed a dragging bug when the grid container is scrollable. Thanks @chultquist.
-
   - Ref: https://github.com/STRML/react-grid-layout/pull/555
@@ -536,3 +542,2 @@
 - 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).
@@ -547,3 +552,2 @@
 - 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).
@@ -586,3 +590,2 @@
 - 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.
@@ -610,3 +613,2 @@
 - `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.
@@ -659,3 +661,2 @@
 - Update to React-Draggable v2. Fixes: #241, #239, #24
-
   - v2 contains a number of bugfixes & enhancements for touchscreens, multitouch, and scrolling containers.
@@ -838,3 +839,2 @@
 - Lots of misc bugfixes.
-
   - See beta releases below for more details.
@@ -841,0 +841,0 @@

lib/utils.js

@@ -242,2 +242,4 @@ // @flow
   const compareWith = getStatics(layout);
+  // We keep track of the bottom position.
+  let b = bottom(compareWith);
   // We go through the items by row and column.
@@ -253,3 +255,12 @@ const sorted = sortLayoutItems(layout, compactType);
     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);
 
@@ -324,3 +335,4 @@ // Add to comparison array. We only collide with items before this one.
   fullLayout: Layout,
-  allowOverlap: ?boolean
+  allowOverlap: ?boolean,
+  b: ?number
 ): LayoutItem {
@@ -333,3 +345,7 @@ const compactV = compactType === "vertical";
     // 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.
@@ -626,3 +642,3 @@ while (l.y > 0 && !getFirstCollision(compareWith, l)) {
         undefined,
-        collidesWith.y + 1,
+        itemToMove.y + 1,
         isUserAction,
@@ -629,0 +645,0 @@ preventCollision,

package.json

 {
   "name": "react-grid-layout",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
@@ -12,3 +12,3 @@ "main": "index.js",
     "view-example": "make view-example",
-    "dev": "make dev",
+    "dev": "npx @react-grab/claude-code@latest && make dev",
     "prepublishOnly": "make build",
@@ -87,2 +87,3 @@ "validate": "npm ls",
     "react-dom": "^16.13.1",
+    "react-grab": "^0.0.71",
     "react-hot-loader": "^4.13.1",
@@ -89,0 +90,0 @@ "react-transform-hmr": "^1.0.2",

README.md

@@ -65,2 +65,3 @@ # React-Grid-Layout
 
+- [Basedash](https://www.basedash.com)
 - [BitMEX](https://www.bitmex.com/)
@@ -67,0 +68,0 @@ - [AWS CloudFront Dashboards](https://aws.amazon.com/blogs/aws/cloudwatch-dashboards-create-use-customized-metrics-views/)

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

893077

75.8%

Number of package files

36

2.86%

Lines of code

6654

0.71%

Number of lines in readme file

624

0.16%

Worsened metrics

Dev dependency count

43

2.38%

No dependency changes