react-grid-layout 1.5.0 → 1.5.2

package/lib/GridItem.jsx

@@ -1,5 +1,6 @@
 // @flow
 import React from "react";
+import { flushSync } from "react-dom";
 import PropTypes from "prop-types";
 import { DraggableCore } from "react-draggable";
 import { Resizable } from "react-resizable";
@@ -293,11 +294,15 @@ export default class GridItem extends React.Component<Props, State> {
       const deltaX = droppingPosition.left - dragging.left;
       const deltaY = droppingPosition.top - dragging.top;
 
-      this.onDrag(droppingPosition.e, {
-        node,
-        deltaX,
-        deltaY
-      });
+      this.onDrag(
+        droppingPosition.e,
+        {
+          node,
+          deltaX,
+          deltaY
+        },
+        true // dontFLush: avoid flushSync to temper warnings
+      );
     }
   }
 
@@ -481,10 +486,12 @@ export default class GridItem extends React.Component<Props, State> {
    * onDrag event handler
    * @param  {Event}  e             event data
    * @param  {Object} callbackData  an object with node, delta and position information
+   * @param  {boolean} dontFlush    if true, will not call flushSync
    */
-  onDrag: (Event, ReactDraggableCallbackData) => void = (
+  onDrag: (Event, ReactDraggableCallbackData, boolean) => void = (
     e,
-    { node, deltaX, deltaY }
+    { node, deltaX, deltaY },
+    dontFlush
   ) => {
     const { onDrag } = this.props;
     if (!onDrag) return;
@@ -503,20 +510,28 @@ export default class GridItem extends React.Component<Props, State> {
       const { offsetParent } = node;
 
       if (offsetParent) {
-        const { margin, rowHeight, containerPadding } = this.props;
+        const { margin, rowHeight } = this.props;
         const bottomBoundary =
           offsetParent.clientHeight - calcGridItemWHPx(h, rowHeight, margin[1]);
-        top = clamp(top - containerPadding[1], 0, bottomBoundary);
+        top = clamp(top, 0, bottomBoundary);
 
         const colWidth = calcGridColWidth(positionParams);
         const rightBoundary =
           containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
-        left = clamp(left - containerPadding[0], 0, rightBoundary);
+        left = clamp(left, 0, rightBoundary);
       }
     }
 
     const newPosition: PartialPosition = { top, left };
-    this.setState({ dragging: newPosition });
+
+    // dontFlush is set if we're calling from inside
+    if (dontFlush) {
+      this.setState({ dragging: newPosition });
+    } else {
+      flushSync(() => {
+        this.setState({ dragging: newPosition });
+      });
+    }
 
     // Call callback with this data
     const { x, y } = calcXY(positionParams, top, left, w, h);
@@ -592,8 +607,10 @@ export default class GridItem extends React.Component<Props, State> {
         size,
         containerWidth
       );
-      this.setState({
-        resizing: handlerName === "onResizeStop" ? null : updatedSize
+      flushSync(() => {
+        this.setState({
+          resizing: handlerName === "onResizeStop" ? null : updatedSize
+        });
       });
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-layout",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
   "main": "index.js",
   "scripts": {
@@ -37,10 +37,10 @@
   },
   "homepage": "https://github.com/STRML/react-grid-layout",
   "dependencies": {
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "fast-equals": "^4.0.3",
     "prop-types": "^15.8.1",
-    "react-draggable": "^4.4.5",
+    "react-draggable": "^4.4.6",
     "react-resizable": "^3.0.5",
     "resize-observer-polyfill": "^1.5.1"
   },
@@ -48,23 +48,23 @@
     "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.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.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",
+    "@babel/cli": "^7.27.2",
+    "@babel/core": "^7.27.4",
+    "@babel/eslint-parser": "^7.27.5",
+    "@babel/plugin-transform-class-properties": "^7.18.6",
+    "@babel/plugin-transform-flow-comments": "^7.27.3",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-flow": "^7.27.1",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/register": "^7.27.1",
     "@webpack-cli/serve": "^2.0.5",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-preval": "^5.1.0",
     "css-loader": "^6.8.1",
-    "ejs": "^3.1.9",
+    "ejs": "^3.1.10",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.7",
+    "enzyme-adapter-react-16": "^1.15.8",
     "enzyme-to-json": "^3.6.2",
     "eslint": "^8.54.0",
     "eslint-plugin-flowtype": "^8.0.3",
@@ -91,6 +91,12 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
+  "resolutions": {
+    "**/cheerio": "npm:cheerio@1.0.0-rc.12"
+  },
+  "_resolutionNotes": {
+    "**/cheerio": "See https://github.com/cheeriojs/cheerio/issues/4618"
+  },
   "peerDependencies": {
     "react": ">= 16.3.0",
     "react-dom": ">= 16.3.0"