react-resizable 3.1.0 → 3.1.2

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

@@ -0,0 +1,110 @@
+# 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

@@ -2,7 +2,13 @@
   "permissions": {
     "allow": [
       "WebFetch(domain:github.com)",
-      "Bash(npx jest:*)"
+      "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,

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+### 3.1.2 (Jan 1, 2026)
+
+- 🐛 Bugfix: Fix SSR crash where `Element` is not defined in Node.js environments. [#251](https://github.com/react-grid-layout/react-resizable/issues/251)
+
+### 3.1.1 (Dec 30, 2025)
+
+- 🐛 Bugfix: Fix crash when `Resizable` child has a single child element (was not iterable). [#219](https://github.com/react-grid-layout/react-resizable/issues/219)
+- 🐛 Bugfix: Fix `offsetParent` propType from `PropTypes.node` to `PropTypes.instanceOf(Element)`. [#220](https://github.com/react-grid-layout/react-resizable/pull/220)
+- ✏ Chore: Update GitHub Actions workflows to latest versions.
+- ✏ Chore: Add version display to demo page.
+
 ### 3.1.0 (Dec 30, 2025)
 
 - 🐛 Bugfix: Fix `onResizeStop` reporting stale size data due to React's batched state updates. The callback now uses the stored size from the last `onResize` call. [#250](https://github.com/react-grid-layout/react-resizable/pull/250)

package/README.md

@@ -1,84 +1,118 @@
-### React-Resizable
+# React-Resizable
 
-[View the Demo](https://react-grid-layout.github.io/react-resizable/index.html)
+[![npm version](https://img.shields.io/npm/v/react-resizable.svg)](https://www.npmjs.com/package/react-resizable)
+[![npm downloads](https://img.shields.io/npm/dm/react-resizable.svg)](https://www.npmjs.com/package/react-resizable)
+[![Build Status](https://github.com/react-grid-layout/react-resizable/actions/workflows/test.yml/badge.svg)](https://github.com/react-grid-layout/react-resizable/actions/workflows/test.yml)
+
+[**View the Demo**](https://react-grid-layout.github.io/react-resizable/examples/)
 
 A simple widget that can be resized via one or more handles.
 
 You can either use the `<Resizable>` element directly, or use the much simpler `<ResizableBox>` element.
 
-See the example and associated code in [ExampleLayout](/examples/ExampleLayout.js) and
-[ResizableBox](/lib/ResizableBox.js) for more details.
+See the example and associated code in [ExampleLayout](https://github.com/react-grid-layout/react-resizable/blob/master/examples/ExampleLayout.js) and
+[ResizableBox](https://github.com/react-grid-layout/react-resizable/blob/master/lib/ResizableBox.js) for more details.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Compatibility](#compatibility)
+- [Usage](#usage)
+  - [Resizable](#resizable)
+  - [ResizableBox](#resizablebox)
+- [Props](#props)
+- [Extracting Styles](#extracting-styles)
+- [Custom Resize Handles](#resize-handle)
+
+## Installation
+
+```bash
+$ npm install --save react-resizable
+```
+
+## Extracting Styles
+
+You **must** include the associated styles in your application, otherwise the resize handles will not be visible and will not work properly.
 
-Make sure you use the associated styles in [/css/styles.css](/css/styles.css), as without them, you will have
-problems with handle placement and visibility.
+```js
+// In your JS/TS entry point:
+import 'react-resizable/css/styles.css';
+```
 
-You can pass options directly to the underlying `DraggableCore` instance by using the prop `draggableOpts`.
-See the [demo](/examples/TestLayout.js) for more on this.
+Or import it in your CSS:
 
-### Installation
+```css
+@import 'react-resizable/css/styles.css';
+```
 
-    $ npm install --save react-resizable
+If you're using a bundler that doesn't support CSS imports, you can find the styles at `node_modules/react-resizable/css/styles.css` and include them manually.
 
-### Compatibility
+## Compatibility
 
-[React-Resizable 3.x](/CHANGELOG.md#3.0.0) is compatible with React `>= 16.3`.
-React-Resizable 2.x has been skipped.
-[React-Resizable 1.x](/CHANGELOG.md#1.11.1) is compatible with React `14-17`.
+| Version | React Version |
+|---------|---------------|
+| [3.x](https://github.com/react-grid-layout/react-resizable/blob/master/CHANGELOG.md#300-may-10-2021) | `>= 16.3` |
+| 2.x | Skipped |
+| [1.x](https://github.com/react-grid-layout/react-resizable/blob/master/CHANGELOG.md#1111-mar-5-2021) | `14 - 17` |
 
-### Usage
+## Usage
 
 This package has two major exports:
 
-* [`<Resizable>`](/lib/Resizable.js): A raw component that does not have state. Use as a building block for larger components, by listening to its
-  callbacks and setting its props.
-* [`<ResizableBox>`](/lib/ResizableBox.js): A simple `<div {...props} />` element that manages basic state. Convenient for simple use-cases.
+* [`<Resizable>`](https://github.com/react-grid-layout/react-resizable/blob/master/lib/Resizable.js): A raw component that does not have state. Use as a building block for larger components, by listening to its callbacks and setting its props.
+* [`<ResizableBox>`](https://github.com/react-grid-layout/react-resizable/blob/master/lib/ResizableBox.js): A simple `<div {...props} />` element that manages basic state. Convenient for simple use-cases.
 
+### `<Resizable>`
 
-#### `<Resizable>`
 ```js
-const {Resizable} = require('react-resizable');
-
-// ES6
 import { Resizable } from 'react-resizable';
+import 'react-resizable/css/styles.css';
 
-// ...
 class Example extends React.Component {
   state = {
     width: 200,
     height: 200,
   };
 
-  // On top layout
   onResize = (event, {node, size, handle}) => {
     this.setState({width: size.width, height: size.height});
   };
 
   render() {
     return (
-      <Resizable height={this.state.height} width={this.state.width} onResize={this.onResize}>
-        <div className="box" style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
+      <Resizable
+        height={this.state.height}
+        width={this.state.width}
+        onResize={this.onResize}
+      >
+        <div
+          className="box"
+          style={{width: this.state.width + 'px', height: this.state.height + 'px'}}
+        >
           <span>Contents</span>
         </div>
       </Resizable>
     );
   }
 }
-
 ```
 
+### `<ResizableBox>`
 
-#### `<ResizableBox>`
 ```js
-const {ResizableBox} = require('react-resizable');
-
-// ES6
 import { ResizableBox } from 'react-resizable';
+import 'react-resizable/css/styles.css';
 
 class Example extends React.Component {
   render() {
     return (
-      <ResizableBox width={200} height={200} draggableOpts={{grid: [25, 25]}}
-          minConstraints={[100, 100]} maxConstraints={[300, 300]}>
+      <ResizableBox
+        width={200}
+        height={200}
+        draggableOpts={{grid: [25, 25]}}
+        minConstraints={[100, 100]}
+        maxConstraints={[300, 300]}
+      >
         <span>Contents</span>
       </ResizableBox>
     );
@@ -86,7 +120,7 @@ class Example extends React.Component {
 }
 ```
 
-### Props
+## Props
 
 These props apply to both `<Resizable>` and `<ResizableBox>`. Unknown props that are not in the list below will be passed to the child component.
 
@@ -96,14 +130,15 @@ type ResizeCallbackData = {
   size: {width: number, height: number},
   handle: ResizeHandleAxis
 };
+
 type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
 
-type ResizableProps =
-{
+type ResizableProps = {
   children: React.Element<any>,
   width: number,
   height: number,
-  // Either a ReactElement to be used as handle, or a function returning an element that is fed the handle's location as its first argument.
+  // Either a ReactElement to be used as handle, or a function
+  // returning an element that is fed the handle's location as its first argument.
   handle: ReactElement<any> | (resizeHandle: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>,
   // If you change this, be sure to update your css
   handleSize: [number, number] = [10, 10],
@@ -115,7 +150,9 @@ type ResizableProps =
   onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   draggableOpts?: ?Object,
-  resizeHandles?: ?Array<ResizeHandleAxis> = ['se']
+  resizeHandles?: ?Array<ResizeHandleAxis> = ['se'],
+  // If `transform: scale(n)` is set on the parent, this should be set to `n`.
+  transformScale?: number = 1
 };
 ```
 
@@ -129,15 +166,17 @@ The following props can also be used on `<ResizableBox>`:
 
 If a `width` or `height` is passed to `<ResizableBox>`'s `style` prop, it will be ignored as it is required for internal function.
 
-#### Resize Handle
+You can pass options directly to the underlying `DraggableCore` instance by using the prop `draggableOpts`. See the [demo](https://react-grid-layout.github.io/react-resizable/examples/) for more on this.
+
+## Resize Handle
 
-If you override the resize handle, we expect that any `ref` passed to your new handle with represent the underlying DOM element.
+If you override the resize handle, we expect that any `ref` passed to your new handle will represent the underlying DOM element.
 
 This is required, as `react-resizable` must be able to access the underlying DOM node to attach handlers and measure position deltas.
 
 There are a few ways to do this:
 
-##### Native DOM Element
+### Native DOM Element
 
 This requires no special treatment.
 
@@ -145,11 +184,11 @@ This requires no special treatment.
 <Resizable handle={<div className="foo" />} />
 ```
 
-##### Custom React Component
+### Custom React Component
 
 You must [forward the ref](https://reactjs.org/docs/forwarding-refs.html) and props to the underlying DOM element.
 
-###### Class Components
+#### Class Components
 
 ```js
 class MyHandleComponent extends React.Component {
@@ -163,7 +202,7 @@ const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={r
 <Resizable handle={<MyHandle />} />
 ```
 
-###### Functional Components
+#### Functional Components
 
 ```js
 const MyHandle = React.forwardRef((props, ref) => {
@@ -174,7 +213,7 @@ const MyHandle = React.forwardRef((props, ref) => {
 <Resizable handle={<MyHandle />} />
 ```
 
-##### Custom Function
+### Custom Function
 
 You can define a function as a handle, which will simply receive an axis (see above `ResizeHandleAxis` type) and ref. This may be more clear to read, depending on your coding style.
 
@@ -183,5 +222,9 @@ const MyHandle = (props) => {
   return <div ref={props.innerRef} className="foo" {...props} />;
 };
 
-<Resizable handle={(handleAxis, ref) => <MyHandle innerRef={ref} className={`foo handle-${handleAxis}`} {...props} />} />
-```
+<Resizable handle={(handleAxis, ref) => <MyHandle innerRef={ref} className={`foo handle-${handleAxis}`} />} />
+```
+
+## License
+
+MIT

package/build/Resizable.js

@@ -235,7 +235,7 @@ class Resizable extends React.Component {
     // 2. One or more draggable handles.
     return (0, _utils.cloneElement)(children, _objectSpread(_objectSpread({}, p), {}, {
       className: `${className ? `${className} ` : ''}react-resizable`,
-      children: [...children.props.children, ...resizeHandles.map(handleAxis => {
+      children: [...React.Children.toArray(children.props.children), ...resizeHandles.map(handleAxis => {
         // 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());
         return /*#__PURE__*/React.createElement(_reactDraggable.DraggableCore, _extends({}, draggableOpts, {

package/build/Resizable.js.flow

@@ -201,7 +201,7 @@ export default class Resizable extends React.Component<Props, void> {
       ...p,
       className: `${className ? `${className} ` : ''}react-resizable`,
       children: [
-        ...children.props.children,
+        ...React.Children.toArray(children.props.children),
         ...resizeHandles.map((handleAxis) => {
           // Create a ref to the handle so that `<DraggableCore>` doesn't have to use ReactDOM.findDOMNode().
           const ref = (this.handleRefs[handleAxis]) ?? (this.handleRefs[handleAxis] = React.createRef());

package/build/propTypes.js

@@ -5,6 +5,7 @@ exports.resizableProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDraggable = require("react-draggable");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* global Element */
 // <Resizable>
 const resizableProps = exports.resizableProps = {
   /*
@@ -29,7 +30,8 @@ const resizableProps = exports.resizableProps = {
     children: _propTypes.default.node,
     disabled: _propTypes.default.bool,
     enableUserSelectHack: _propTypes.default.bool,
-    offsetParent: _propTypes.default.node,
+    // #251: Check for Element to support SSR environments where DOM globals don't exist
+    offsetParent: typeof Element !== 'undefined' ? _propTypes.default.instanceOf(Element) : _propTypes.default.any,
     grid: _propTypes.default.arrayOf(_propTypes.default.number),
     handle: _propTypes.default.string,
     nodeRef: _propTypes.default.object,

package/build/propTypes.js.flow

@@ -1,4 +1,5 @@
 // @flow
+/* global Element */
 import PropTypes from 'prop-types';
 import {DraggableCore} from "react-draggable";
 import type {Element as ReactElement, ElementConfig} from 'react';
@@ -75,7 +76,8 @@ export const resizableProps: Object = {
     children: PropTypes.node,
     disabled: PropTypes.bool,
     enableUserSelectHack: PropTypes.bool,
-    offsetParent: PropTypes.node,
+    // #251: Check for Element to support SSR environments where DOM globals don't exist
+    offsetParent: typeof Element !== 'undefined' ? PropTypes.instanceOf(Element) : PropTypes.any,
     grid: PropTypes.arrayOf(PropTypes.number),
     handle: PropTypes.string,
     nodeRef: PropTypes.object,