react-resizable 3.1.2 → 3.2.0

package/build/Resizable.js

@@ -9,7 +9,6 @@ var _propTypes = require("./propTypes");
 const _excluded = ["children", "className", "draggableOpts", "width", "height", "handle", "handleSize", "lockAspectRatio", "axis", "minConstraints", "maxConstraints", "onResize", "onResizeStop", "onResizeStart", "resizeHandles", "transformScale"];
 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; }
@@ -35,11 +34,10 @@ class Resizable extends React.Component {
 
   // Clamp width and height within provided constraints
   runConstraints(width, height) {
-    const {
-      minConstraints,
-      maxConstraints,
-      lockAspectRatio
-    } = this.props;
+    const _this$props = this.props,
+      minConstraints = _this$props.minConstraints,
+      maxConstraints = _this$props.maxConstraints,
+      lockAspectRatio = _this$props.lockAspectRatio;
     // short circuit
     if (!minConstraints && !maxConstraints && !lockAspectRatio) return [width, height];
 
@@ -59,12 +57,15 @@ class Resizable extends React.Component {
         width = height * ratio;
       }
     }
-    const [oldW, oldH] = [width, height];
+    const oldW = width,
+      oldH = height;
 
     // Add slack to the values used to calculate bound position. This will ensure that if
     // we start removing slack, the element won't react to it right away until it's been
     // completely removed.
-    let [slackW, slackH] = this.slack || [0, 0];
+    let _ref = this.slack || [0, 0],
+      slackW = _ref[0],
+      slackH = _ref[1];
     width += slackW;
     height += slackH;
     if (minConstraints) {
@@ -88,12 +89,11 @@ class Resizable extends React.Component {
    * @return {Function}           Handler function.
    */
   resizeHandler(handlerName, axis) {
-    return (e, _ref) => {
-      let {
-        node,
-        deltaX,
-        deltaY
-      } = _ref;
+    return (e, _ref2) => {
+      var _this$lastSize$width, _this$lastSize, _this$lastSize$height, _this$lastSize2;
+      let node = _ref2.node,
+        deltaX = _ref2.deltaX,
+        deltaY = _ref2.deltaY;
       // Reset data in case it was left over somehow (should not be possible)
       if (handlerName === 'onResizeStart') this.resetData();
 
@@ -132,21 +132,29 @@ class Resizable extends React.Component {
       if (axisV === 'n') deltaY = -deltaY;
 
       // Update w/h by the deltas. Also factor in transformScale.
-      let width = this.props.width + (canDragX ? deltaX / this.props.transformScale : 0);
-      let height = this.props.height + (canDragY ? deltaY / this.props.transformScale : 0);
+      // Use lastSize (if available) instead of props to avoid losing deltas
+      // when React can't re-render between consecutive mouse events.
+      const baseWidth = (_this$lastSize$width = (_this$lastSize = this.lastSize) == null ? void 0 : _this$lastSize.width) != null ? _this$lastSize$width : this.props.width;
+      const baseHeight = (_this$lastSize$height = (_this$lastSize2 = this.lastSize) == null ? void 0 : _this$lastSize2.height) != null ? _this$lastSize$height : this.props.height;
+      let width = baseWidth + (canDragX ? deltaX / this.props.transformScale : 0);
+      let height = baseHeight + (canDragY ? deltaY / this.props.transformScale : 0);
 
       // Run user-provided constraints.
-      [width, height] = this.runConstraints(width, height);
-
       // For onResizeStop, use the last size from onResize rather than recalculating.
       // This avoids issues where props.width/height are stale due to React's batched updates.
+      var _this$runConstraints = this.runConstraints(width, height);
+      width = _this$runConstraints[0];
+      height = _this$runConstraints[1];
       if (handlerName === 'onResizeStop' && this.lastSize) {
-        ({
-          width,
-          height
-        } = this.lastSize);
+        var _this$lastSize3 = this.lastSize;
+        width = _this$lastSize3.width;
+        height = _this$lastSize3.height;
       }
-      const dimensionsChanged = width !== this.props.width || height !== this.props.height;
+
+      // Compare against the base (lastSize-or-props) so that callbacks correctly
+      // suppress when the net delta is zero, even if props are stale relative to
+      // the accumulated lastSize.
+      const dimensionsChanged = width !== baseWidth || height !== baseHeight;
 
       // Store the size for use in onResizeStop. We do this after the onResizeStop check
       // above so we don't overwrite the stored value with a potentially stale calculation.
@@ -162,7 +170,7 @@ class Resizable extends React.Component {
       // Don't call 'onResize' if dimensions haven't changed.
       const shouldSkipCb = handlerName === 'onResize' && !dimensionsChanged;
       if (cb && !shouldSkipCb) {
-        e.persist?.();
+        e.persist == null || e.persist();
         cb(e, {
           node,
           size: {
@@ -181,13 +189,11 @@ class Resizable extends React.Component {
   // Render a resize handle given an axis & DOM ref. Ref *must* be attached for
   // the underlying draggable library to work properly.
   renderResizeHandle(handleAxis, ref) {
-    const {
-      handle
-    } = this.props;
+    const handle = this.props.handle;
     // No handle provided, make the default
     if (!handle) {
       return /*#__PURE__*/React.createElement("span", {
-        className: `react-resizable-handle react-resizable-handle-${handleAxis}`,
+        className: "react-resizable-handle react-resizable-handle-" + handleAxis,
         ref: ref
       });
     }
@@ -208,39 +214,38 @@ class Resizable extends React.Component {
   render() {
     // Pass along only props not meant for the `<Resizable>`.`
     // eslint-disable-next-line no-unused-vars
-    const _this$props = this.props,
-      {
-        children,
-        className,
-        draggableOpts,
-        width,
-        height,
-        handle,
-        handleSize,
-        lockAspectRatio,
-        axis,
-        minConstraints,
-        maxConstraints,
-        onResize,
-        onResizeStop,
-        onResizeStart,
-        resizeHandles,
-        transformScale
-      } = _this$props,
-      p = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props2 = this.props,
+      children = _this$props2.children,
+      className = _this$props2.className,
+      draggableOpts = _this$props2.draggableOpts,
+      width = _this$props2.width,
+      height = _this$props2.height,
+      handle = _this$props2.handle,
+      handleSize = _this$props2.handleSize,
+      lockAspectRatio = _this$props2.lockAspectRatio,
+      axis = _this$props2.axis,
+      minConstraints = _this$props2.minConstraints,
+      maxConstraints = _this$props2.maxConstraints,
+      onResize = _this$props2.onResize,
+      onResizeStop = _this$props2.onResizeStop,
+      onResizeStart = _this$props2.onResizeStart,
+      resizeHandles = _this$props2.resizeHandles,
+      transformScale = _this$props2.transformScale,
+      p = _objectWithoutPropertiesLoose(_this$props2, _excluded);
 
     // What we're doing here is getting the child of this element, and cloning it with this element's props.
     // We are then defining its children as:
     // 1. Its original children (resizable's child's children), and
     // 2. One or more draggable handles.
     return (0, _utils.cloneElement)(children, _objectSpread(_objectSpread({}, p), {}, {
-      className: `${className ? `${className} ` : ''}react-resizable`,
+      className: (className ? className + " " : '') + "react-resizable",
       children: [...React.Children.toArray(children.props.children), ...resizeHandles.map(handleAxis => {
+        var _this$handleRefs$hand;
         // Create a ref to the handle so that `<DraggableCore>` doesn't have to use ReactDOM.findDOMNode().
-        const ref = this.handleRefs[handleAxis] ?? (this.handleRefs[handleAxis] = /*#__PURE__*/React.createRef());
+        const ref = (_this$handleRefs$hand = this.handleRefs[handleAxis]) != null ? _this$handleRefs$hand : this.handleRefs[handleAxis] = /*#__PURE__*/React.createRef();
         return /*#__PURE__*/React.createElement(_reactDraggable.DraggableCore, _extends({}, draggableOpts, {
           nodeRef: ref,
-          key: `resizableHandle-${handleAxis}`,
+          key: "resizableHandle-" + handleAxis,
           onStop: this.resizeHandler('onResizeStop', handleAxis),
           onStart: this.resizeHandler('onResizeStart', handleAxis),
           onDrag: this.resizeHandler('onResize', handleAxis)

package/build/Resizable.js.flow

@@ -127,8 +127,12 @@ export default class Resizable extends React.Component<Props, void> {
       if (axisV === 'n') deltaY = -deltaY;
 
       // Update w/h by the deltas. Also factor in transformScale.
-      let width = this.props.width + (canDragX ? deltaX / this.props.transformScale : 0);
-      let height = this.props.height + (canDragY ? deltaY / this.props.transformScale : 0);
+      // Use lastSize (if available) instead of props to avoid losing deltas
+      // when React can't re-render between consecutive mouse events.
+      const baseWidth = this.lastSize?.width ?? this.props.width;
+      const baseHeight = this.lastSize?.height ?? this.props.height;
+      let width = baseWidth + (canDragX ? deltaX / this.props.transformScale : 0);
+      let height = baseHeight + (canDragY ? deltaY / this.props.transformScale : 0);
 
       // Run user-provided constraints.
       [width, height] = this.runConstraints(width, height);
@@ -139,7 +143,10 @@ export default class Resizable extends React.Component<Props, void> {
         ({width, height} = this.lastSize);
       }
 
-      const dimensionsChanged = width !== this.props.width || height !== this.props.height;
+      // Compare against the base (lastSize-or-props) so that callbacks correctly
+      // suppress when the net delta is zero, even if props are stale relative to
+      // the accumulated lastSize.
+      const dimensionsChanged = width !== baseWidth || height !== baseHeight;
 
       // Store the size for use in onResizeStop. We do this after the onResizeStop check
       // above so we don't overwrite the stored value with a potentially stale calculation.

package/build/ResizableBox.js

@@ -15,7 +15,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var 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); }
-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; }
 // ElementConfig gives us an object type where all items present in `defaultProps` are made optional.
 // <ResizableBox> does not have defaultProps, so we can use this type to tell Flow that we don't
@@ -32,11 +31,9 @@ class ResizableBox extends React.Component {
       propsHeight: this.props.height
     };
     this.onResize = (e, data) => {
-      const {
-        size
-      } = data;
+      const size = data.size;
       if (this.props.onResize) {
-        e.persist?.();
+        e.persist == null || e.persist();
         this.setState(size, () => this.props.onResize && this.props.onResize(e, data));
       } else {
         this.setState(size);
@@ -60,24 +57,22 @@ class ResizableBox extends React.Component {
     // If you use Resizable directly, you are responsible for updating the child component
     // with a new width and height.
     const _this$props = this.props,
-      {
-        handle,
-        handleSize,
-        onResize,
-        onResizeStart,
-        onResizeStop,
-        draggableOpts,
-        minConstraints,
-        maxConstraints,
-        lockAspectRatio,
-        axis,
-        width,
-        height,
-        resizeHandles,
-        style,
-        transformScale
-      } = _this$props,
-      props = _objectWithoutProperties(_this$props, _excluded);
+      handle = _this$props.handle,
+      handleSize = _this$props.handleSize,
+      onResize = _this$props.onResize,
+      onResizeStart = _this$props.onResizeStart,
+      onResizeStop = _this$props.onResizeStop,
+      draggableOpts = _this$props.draggableOpts,
+      minConstraints = _this$props.minConstraints,
+      maxConstraints = _this$props.maxConstraints,
+      lockAspectRatio = _this$props.lockAspectRatio,
+      axis = _this$props.axis,
+      width = _this$props.width,
+      height = _this$props.height,
+      resizeHandles = _this$props.resizeHandles,
+      style = _this$props.style,
+      transformScale = _this$props.transformScale,
+      props = _objectWithoutPropertiesLoose(_this$props, _excluded);
     return /*#__PURE__*/React.createElement(_Resizable.default, {
       axis: axis,
       draggableOpts: draggableOpts,

package/build/propTypes.js

@@ -48,7 +48,7 @@ const resizableProps = exports.resizableProps = {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    const [props] = args;
+    const props = args[0];
     // Required if resizing height or both
     if (props.axis === 'both' || props.axis === 'y') {
       return _propTypes.default.number.isRequired(...args);
@@ -107,7 +107,7 @@ const resizableProps = exports.resizableProps = {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    const [props] = args;
+    const props = args[0];
     // Required if resizing width or both
     if (props.axis === 'both' || props.axis === 'x') {
       return _propTypes.default.number.isRequired(...args);

package/build/utils.js

@@ -15,7 +15,7 @@ function cloneElement(element, props) {
     props.style = _objectSpread(_objectSpread({}, element.props.style), props.style);
   }
   if (props.className && element.props.className) {
-    props.className = `${element.props.className} ${props.className}`;
+    props.className = element.props.className + " " + props.className;
   }
   return /*#__PURE__*/_react.default.cloneElement(element, props);
 }

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "react-resizable",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "A component that is resizable with handles.",
   "main": "index.js",
+  "files": [
+    "build/",
+    "css/",
+    "index.js"
+  ],
   "scripts": {
     "lint": "eslint lib/ __tests__/ setupTests/; flow",
     "test": "jest --coverage",
@@ -32,35 +37,36 @@
   },
   "homepage": "https://github.com/react-grid-layout/react-resizable",
   "devDependencies": {
-    "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.5",
-    "@babel/eslint-parser": "^7.28.5",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/eslint-parser": "^7.28.6",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-env": "^7.29.5",
     "@babel/preset-flow": "^7.27.1",
     "@babel/preset-react": "^7.28.5",
+    "@eslint/js": "^9.39.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.1.0",
-    "@testing-library/react": "^16.3.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.0",
-    "babel-loader": "^10.0.0",
+    "babel-loader": "^10.1.1",
     "cross-env": "^10.1.0",
-    "css-loader": "^7.1.2",
-    "eslint": "^9.39.2",
-    "eslint-plugin-jest": "^29.11.3",
+    "css-loader": "^7.1.4",
+    "eslint": "^9.39.4",
+    "eslint-plugin-jest": "^29.15.2",
     "eslint-plugin-react": "^7.37.5",
     "flow-bin": "^0.153.0",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "lodash": "^4.17.20",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
+    "lodash": "^4.18.1",
     "pre-commit": "^1.1.2",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "style-loader": "^4.0.0",
-    "webpack": "^5.104.1",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2"
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2",
+    "webpack-dev-server": "^5.2.4"
   },
   "dependencies": {
     "prop-types": "15.x",

package/.babelrc

@@ -1,16 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "loose": true
-      }
-    ],
-    "@babel/preset-react",
-    "@babel/preset-flow"
-  ],
-  "plugins": [
-    ["@babel/plugin-proposal-class-properties", {"loose": true}],
-    "@babel/plugin-proposal-object-rest-spread"
-  ]
-}

package/.browserslistrc

@@ -1,3 +0,0 @@
-> 0.25%
-ie 11
-not dead

package/.claude/commands/fix-issue.md

@@ -1,110 +0,0 @@
-# Fix GitHub Issue
-
-Analyze and fix GitHub issue #$ARGUMENTS for react-grid-layout.
-
-## Workflow
-
-Follow these steps precisely:
-
-### 1. Understand the Issue
-
-Fetch and analyze the issue:
-
-```bash
-gh issue view $ARGUMENTS
-```
-
-Determine:
-
-- What is the bug? (not feature requests or questions)
-- Is there a CodeSandbox reproduction?
-- Which component/hook is affected?
-- Is this fixable? (has clear reproduction, is actually a bug)
-
-If not actionable, explain why and stop.
-
-### 2. Investigate
-
-- Search for relevant code using Grep/Glob
-- Read the affected files
-- Identify the root cause
-- Check existing tests in `test/spec/`
-
-### 3. Write a Failing Test FIRST
-
-**CRITICAL: The test must fail before implementing the fix.**
-
-Add a test to the appropriate file in `test/spec/` that:
-
-- Reproduces the exact bug behavior
-- Includes comment `// #$ARGUMENTS`
-- Actually FAILS when run
-
-Verify it fails:
-
-```bash
-NODE_ENV=test npx jest --testPathPatterns="<test-file>"
-```
-
-If test passes, it's invalid - revise until it fails.
-
-### 4. Implement the Fix
-
-- Make minimal changes to fix the bug
-- Add comments explaining non-obvious fixes
-- Reference the issue number
-
-Verify test now passes:
-
-```bash
-NODE_ENV=test npx jest --testPathPatterns="<test-file>"
-```
-
-### 5. Validate
-
-Run in order:
-
-```bash
-yarn test
-yarn lint
-yarn fmt
-```
-
-Fix any failures before proceeding.
-
-### 6. Commit and PR
-
-```bash
-git checkout -b fix/issue-$ARGUMENTS-<short-desc>
-git add <files>
-git commit -m "fix: <description> (#$ARGUMENTS)"
-git push -u origin fix/issue-$ARGUMENTS-<short-desc>
-gh pr create --title "fix: <description> (#$ARGUMENTS)" --body "Fixes #$ARGUMENTS
-
-## Summary
-<root cause>
-
-## Fix
-<what changed>
-
-## Test plan
-- [x] Test fails without fix
-- [x] Test passes with fix
-- [x] All tests pass"
-```
-
-### 7. Wait and Merge
-
-```bash
-gh pr checks <pr-number> --watch
-gh pr merge <pr-number> --squash --delete-branch
-git checkout master && git pull
-```
-
-## Key Files
-
-- `src/core/` - Pure algorithms
-- `src/react/components/` - React components
-- `src/react/hooks/` - React hooks
-- `src/legacy/` - v1 compatibility
-- `test/spec/` - Tests

package/.claude/settings.local.json

@@ -1,18 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "WebFetch(domain:github.com)",
-      "Bash(npx jest:*)",
-      "Bash(git tag:*)",
-      "Bash(gh release create:*)",
-      "Bash(gh issue close:*)",
-      "Bash(gh search:*)",
-      "WebFetch(domain:raw.githubusercontent.com)",
-      "Bash(curl:*)"
-    ]
-  },
-  "enableAllProjectMcpServers": true,
-  "enabledMcpjsonServers": [
-    "messenger"
-  ]
-}

package/.flowconfig

@@ -1,25 +0,0 @@
-[version]
-^0.153.0
-
-[ignore]
-.*/node_modules/@babel.*
-.*/node_modules/.*/malformed_package_json/.*
-<PROJECT_ROOT>/build/.*
-
-[include]
-
-[libs]
-flow-typed
-
-[lints]
-all=warn
-implicit-inexact-object=error
-
-[options]
-suppress_type=$FlowFixMe
-experimental.strict_call_arity=true
-module.system.node.allow_root_relative=true
-module.use_strict=true
-server.max_workers=6
-exact_by_default=true
-sharedmemory.heap_size=3221225472