react-grid-layout 1.4.2 → 1.4.4

package/lib/GridItem.jsx

@@ -503,15 +503,15 @@ export default class GridItem extends React.Component<Props, State> {
       const { offsetParent } = node;
 
       if (offsetParent) {
-        const { margin, rowHeight } = this.props;
+        const { margin, rowHeight, containerPadding } = this.props;
         const bottomBoundary =
           offsetParent.clientHeight - calcGridItemWHPx(h, rowHeight, margin[1]);
-        top = clamp(top, 0, bottomBoundary);
+        top = clamp(top - containerPadding[1], 0, bottomBoundary);
 
         const colWidth = calcGridColWidth(positionParams);
         const rightBoundary =
           containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
-        left = clamp(left, 0, rightBoundary);
+        left = clamp(left - containerPadding[0], 0, rightBoundary);
       }
     }
 
@@ -519,7 +519,14 @@ export default class GridItem extends React.Component<Props, State> {
     this.setState({ dragging: newPosition });
 
     // Call callback with this data
-    const { x, y } = calcXY(positionParams, top, left, w, h);
+    const { containerPadding } = this.props;
+    const { x, y } = calcXY(
+      positionParams,
+      top - containerPadding[1],
+      left - containerPadding[0],
+      w,
+      h
+    );
     return onDrag.call(this, i, x, y, {
       e,
       node,
@@ -539,12 +546,18 @@ export default class GridItem extends React.Component<Props, State> {
     if (!this.state.dragging) {
       throw new Error("onDragEnd called before onDragStart.");
     }
-    const { w, h, i } = this.props;
+    const { w, h, i, containerPadding } = this.props;
     const { left, top } = this.state.dragging;
     const newPosition: PartialPosition = { top, left };
     this.setState({ dragging: null });
 
-    const { x, y } = calcXY(this.getPositionParams(), top, left, w, h);
+    const { x, y } = calcXY(
+      this.getPositionParams(),
+      top - containerPadding[1],
+      left - containerPadding[0],
+      w,
+      h
+    );
 
     return onDragStop.call(this, i, x, y, {
       e,

package/lib/ReactGridLayout.jsx

@@ -252,9 +252,20 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     const l = getLayoutItem(layout, i);
     if (!l) return;
 
+    // Create placeholder (display only)
+    const placeholder = {
+      w: l.w,
+      h: l.h,
+      x: l.x,
+      y: l.y,
+      placeholder: true,
+      i: i
+    };
+
     this.setState({
       oldDragItem: cloneLayoutItem(l),
-      oldLayout: layout
+      oldLayout: layout,
+      activeDrag: placeholder
     });
 
     return this.props.onDragStart(layout, l, l, null, e, node);
@@ -402,7 +413,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     { e, node, size, handle }
   ) => {
     const { oldResizeItem } = this.state;
-    let { layout } = this.state;
+    const { layout } = this.state;
     const { cols, preventCollision, allowOverlap } = this.props;
 
     let shouldMoveItem = false;
@@ -703,8 +714,13 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
 
     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,

package/lib/utils.js

@@ -497,8 +497,8 @@ export function moveElement(
     compactType === "vertical" && typeof y === "number"
       ? oldY >= y
       : compactType === "horizontal" && typeof x === "number"
-      ? oldX >= x
-      : false;
+        ? oldX >= x
+        : false;
   // $FlowIgnore acceptable modification of read-only array as it was recently cloned
   if (movingUp) sorted = sorted.reverse();
   const collisions = getAllCollisions(sorted, l);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -13,8 +13,8 @@
     "prepublishOnly": "make build",
     "validate": "npm ls",
     "flow": "flow",
-    "fmt": "prettier --write ./**.{json,js,yml,md}",
-    "fmt:check": "prettier --check ./**.{json,js,yml,md}"
+    "fmt": "prettier --write .",
+    "fmt:check": "prettier --check ."
   },
   "repository": {
     "type": "git",
@@ -48,17 +48,17 @@
     "fast-equals": "Bug in CRA5 causes fast-equals@5 to fail to import due to .cjs file. See https://github.com/react-grid-layout/react-grid-layout/issues/1904"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.15",
-    "@babel/core": "^7.22.17",
-    "@babel/eslint-parser": "^7.22.15",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-flow-comments": "^7.22.10",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-flow": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/plugin-transform-flow-comments": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-flow": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
     "@babel/register": "^7.22.15",
     "@webpack-cli/serve": "^2.0.5",
-    "babel-jest": "^29.6.4",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-preval": "^5.1.0",
     "css-loader": "^6.8.1",
@@ -66,28 +66,28 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.49.0",
+    "eslint": "^8.54.0",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-mocha": "^10.1.0",
+    "eslint-plugin-mocha": "^10.2.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-unicorn": "^48.0.1",
+    "eslint-plugin-unicorn": "^49.0.0",
     "exports-loader": "^4.0.0",
     "flow-bin": "^0.172.0",
     "husky": "^8.0.3",
     "imports-loader": "^4.0.1",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
-    "lint-staged": "^14.0.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.1.0",
     "lodash": "^4.17.21",
     "opener": "^1.5.2",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-hot-loader": "^4.13.1",
     "react-transform-hmr": "^1.0.2",
     "style-loader": "^3.3.3",
     "timsort": "^0.3.0",
-    "webpack": "^5.88.2",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },