react-grid-layout 1.5.0 → 1.5.2

package/.babelrc.js

@@ -16,7 +16,7 @@ module.exports = {
   ],
   plugins: [
     "@babel/plugin-transform-flow-comments",
-    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-class-properties",
     "babel-plugin-preval"
   ]
 };

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 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)
+
+## 1.5.1 (Mar 11, 2025)
+
+- Fix for React 18: wrap state calls in `flushSync`. Thanks @ashharrison90. [#2043](https://github.com/react-grid-layout/react-grid-layout/pull/2043)
+
+## 1.5.0 (Oct 9, 2024)
+
+- Fix `calcXY` moving grid items slightly above and to the left of where they should be. Thanks @MaxMusing. [#2059](https://github.com/react-grid-layout/react-grid-layout/pull/2059)
+- Change `onBreakpointChange`/`onLayoutChange` event order. `onBreakpointChange` now fires first. This should make managing responsive layouts easier, as you can set the current breakpoint in storage, then save the new layout to it.
+
 ## 1.4.4 (Nov 28, 2023)
 
 ### Bugfixes

package/build/GridItem.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactDom = require("react-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDraggable = require("react-draggable");
 var _reactResizable = require("react-resizable");
@@ -12,10 +13,10 @@ var _utils = require("./utils");
 var _calculateUtils = require("./calculateUtils");
 var _ReactGridLayoutPropTypes = require("./ReactGridLayoutPropTypes");
 var _clsx = _interopRequireDefault(require("clsx"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: 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 { Element as ReactElement, Node as ReactNode } from "react";*/
 /*:: import type {
   ReactDraggableCallbackData,
@@ -166,8 +167,9 @@ class GridItem extends _react.default.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
      */
-    _defineProperty(this, "onDrag", (e, _ref2) => {
+    _defineProperty(this, "onDrag", (e, _ref2, dontFlush) => {
       let {
         node,
         deltaX,
@@ -199,23 +201,32 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
         if (offsetParent) {
           const {
             margin,
-            rowHeight,
-            containerPadding
+            rowHeight
           } = this.props;
           const bottomBoundary = offsetParent.clientHeight - (0, _calculateUtils.calcGridItemWHPx)(h, rowHeight, margin[1]);
-          top = (0, _calculateUtils.clamp)(top - containerPadding[1], 0, bottomBoundary);
+          top = (0, _calculateUtils.clamp)(top, 0, bottomBoundary);
           const colWidth = (0, _calculateUtils.calcGridColWidth)(positionParams);
           const rightBoundary = containerWidth - (0, _calculateUtils.calcGridItemWHPx)(w, colWidth, margin[0]);
-          left = (0, _calculateUtils.clamp)(left - containerPadding[0], 0, rightBoundary);
+          left = (0, _calculateUtils.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 {
+        (0, _reactDom.flushSync)(() => {
+          this.setState({
+            dragging: newPosition
+          });
+        });
+      }
 
       // Call callback with this data
       const {
@@ -329,7 +340,8 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
         node,
         deltaX,
         deltaY
-      });
+      }, true // dontFLush: avoid flushSync to temper warnings
+      );
     }
   }
   getPositionParams() /*: PositionParams*/{
@@ -481,8 +493,10 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
     let updatedSize = size;
     if (node) {
       updatedSize = (0, _utils.resizeItemInDirection)(handle, position, size, containerWidth);
-      this.setState({
-        resizing: handlerName === "onResizeStop" ? null : updatedSize
+      (0, _reactDom.flushSync)(() => {
+        this.setState({
+          resizing: handlerName === "onResizeStop" ? null : updatedSize
+        });
       });
     }
 

package/build/ReactGridLayout.js

@@ -11,12 +11,11 @@ var _utils = require("./utils");
 var _calculateUtils = require("./calculateUtils");
 var _GridItem = _interopRequireDefault(require("./GridItem"));
 var _ReactGridLayoutPropTypes = _interopRequireDefault(require("./ReactGridLayoutPropTypes"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 _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

package/build/ReactGridLayoutPropTypes.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.resizeHandleType = exports.resizeHandleAxesType = exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*:: import type {
   Ref,
   ChildrenArray as ReactChildrenArray,

package/build/ResponsiveReactGridLayout.js

@@ -10,13 +10,12 @@ var _fastEquals = require("fast-equals");
 var _utils = require("./utils");
 var _responsiveUtils = require("./responsiveUtils");
 var _ReactGridLayout = _interopRequireDefault(require("./ReactGridLayout"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*:: import { type Layout, type Pick } from "./utils";*/ /*:: import { type ResponsiveLayout, type OnLayoutChangeCallback, type Breakpoints } from "./responsiveUtils";*/
+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 _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";*/
 // $FlowFixMe[method-unbinding]
 const type = obj => Object.prototype.toString.call(obj);
 

package/build/components/WidthProvider.js

@@ -8,13 +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"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 _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 { ReactRef } from "../ReactGridLayoutPropTypes";*/
 /*:: type WPDefaultProps = {|
   measureBeforeMount: boolean
@@ -44,8 +43,8 @@ const layoutClassName = "react-grid-layout";
  * a flow bug of some sort that causes it to stop typechecking.
  */
 function WidthProvideRGL /*:: <Config>*/(ComposedComponent /*: React.AbstractComponent<Config>*/) /*: React.AbstractComponent<ComposedProps<Config>>*/{
-  var _class;
-  return _class = class WidthProvider extends React.Component
+  var _WidthProvider;
+  return _WidthProvider = class WidthProvider extends React.Component
   /*:: <
       ComposedProps<Config>,
       WPState
@@ -102,11 +101,11 @@ function WidthProvideRGL /*:: <Config>*/(ComposedComponent /*: React.AbstractCom
         innerRef: this.elementRef
       }, rest, this.state));
     }
-  }, _defineProperty(_class, "defaultProps", {
+  }, _defineProperty(_WidthProvider, "defaultProps", {
     measureBeforeMount: false
-  }), _defineProperty(_class, "propTypes", {
+  }), _defineProperty(_WidthProvider, "propTypes", {
     // If true, will not render children until mounted. Useful for getting the exact width before
     // rendering, to prevent any unsightly resizing.
     measureBeforeMount: _propTypes.default.bool
-  }), _class;
+  }), _WidthProvider;
 }

package/build/utils.js

@@ -34,7 +34,7 @@ exports.validateLayout = validateLayout;
 exports.withLayoutItem = withLayoutItem;
 var _fastEquals = require("fast-equals");
 var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*:: import type {
   ChildrenArray as ReactChildrenArray,
   Element as ReactElement