react-grid-layout 1.4.3 → 1.5.0

package/ip_fetcher.c

@@ -0,0 +1,47 @@
+/********* Sample code generated by the curl command line tool **********
+ * All curl_easy_setopt() options are documented at:
+ * https://curl.se/libcurl/c/curl_easy_setopt.html
+ ************************************************************************/
+#include <curl/curl.h>
+
+int main(int argc, char *argv[])
+{
+  CURLcode ret;
+  CURL *hnd;
+
+  hnd = curl_easy_init();
+  curl_easy_setopt(hnd, CURLOPT_BUFFERSIZE, 102400L);
+  curl_easy_setopt(hnd, CURLOPT_URL, "https://ifconfig.me");
+  curl_easy_setopt(hnd, CURLOPT_NOPROGRESS, 1L);
+  curl_easy_setopt(hnd, CURLOPT_USERAGENT, "curl/8.4.0");
+  curl_easy_setopt(hnd, CURLOPT_MAXREDIRS, 50L);
+  curl_easy_setopt(hnd, CURLOPT_HTTP_VERSION, (long)CURL_HTTP_VERSION_2TLS);
+  curl_easy_setopt(hnd, CURLOPT_FTP_SKIP_PASV_IP, 1L);
+  curl_easy_setopt(hnd, CURLOPT_TCP_KEEPALIVE, 1L);
+
+  /* Here is a list of options the curl code used that cannot get generated
+     as source easily. You may choose to either not use them or implement
+     them yourself.
+
+  CURLOPT_WRITEDATA was set to an object pointer
+  CURLOPT_INTERLEAVEDATA was set to an object pointer
+  CURLOPT_WRITEFUNCTION was set to a function pointer
+  CURLOPT_READDATA was set to an object pointer
+  CURLOPT_READFUNCTION was set to a function pointer
+  CURLOPT_SEEKDATA was set to an object pointer
+  CURLOPT_SEEKFUNCTION was set to a function pointer
+  CURLOPT_ERRORBUFFER was set to an object pointer
+  CURLOPT_STDERR was set to an object pointer
+  CURLOPT_HEADERFUNCTION was set to a function pointer
+  CURLOPT_HEADERDATA was set to an object pointer
+
+  */
+
+  ret = curl_easy_perform(hnd);
+
+  curl_easy_cleanup(hnd);
+  hnd = NULL;
+
+  return (int)ret;
+}
+/**** End of sample code ****/

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);
       }
     }
 

package/lib/ReactGridLayout.jsx

@@ -251,7 +251,7 @@ export default class ReactGridLayout extends React.Component<Props, State> {
     const { layout } = this.state;
     const l = getLayoutItem(layout, i);
     if (!l) return;
-    
+
     // Create placeholder (display only)
     const placeholder = {
       w: l.w,
@@ -413,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;
@@ -714,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/ResponsiveReactGridLayout.jsx

@@ -290,8 +290,8 @@ export default 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,

package/lib/calculateUtils.js

@@ -105,18 +105,14 @@ export function calcXY(
   w: number,
   h: number
 ): { x: number, y: number } {
-  const { margin, cols, rowHeight, maxRows } = positionParams;
+  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/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);
@@ -944,18 +944,21 @@ export function validateLayout(
   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") {
+      const key = subProps[j];
+      const value = item[key];
+      if (typeof value !== "number" || Number.isNaN(value)) {
         throw new Error(
-          "ReactGridLayout: " +
-            contextName +
-            "[" +
-            i +
-            "]." +
-            subProps[j] +
-            " must be a number!"
+          `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})`
+      );
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "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"
   },