react-resizable 3.0.4 → 3.1.0

package/.claude/settings.local.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:github.com)",
+      "Bash(npx jest:*)"
+    ]
+  },
+  "enableAllProjectMcpServers": true,
+  "enabledMcpjsonServers": [
+    "messenger"
+  ]
+}

package/.flowconfig

@@ -3,8 +3,7 @@
 
 [ignore]
 .*/node_modules/@babel.*
-.*/node_modules/express/.*
-.*/node_modules/serve-index/.*
+.*/node_modules/.*/malformed_package_json/.*
 <PROJECT_ROOT>/build/.*
 
 [include]

package/.packj.yaml

@@ -0,0 +1,153 @@
+#
+# Audit policies
+#
+audit:
+  alerts:
+    #
+    # category: malicious packages (publicly known and unknown)
+    #
+    malicious:
+      contains known malware:
+        - reason: package is known to contain a dangerous malware
+        - enabled: true
+      typo-squatting or repo-jacking package:
+        - reason: package impersonates another popular package to propagate malware
+        - enabled: true
+
+    #
+    # alert category: suspicious packages (potentially malicious)
+    #
+    suspicious:
+      inconsistent with repo source:
+        - reason: package code inconsistent with the public repo source code
+        - enabled: false # WIP
+      overwrites system binaries:
+        - reason: package code inconsistent with the public repo source code
+        - enabled: false # WIP
+
+    #
+    # alert category: packages vulnerable to code exploits
+    #
+    vulnerable:
+      contains known vulnerabilities:
+        - reason: known vulnerabilities (CVEs) in package code could be exploited
+        - enabled: true
+      insecure network communication:
+        - reason: package code uses insecure network communication (not https)
+        - enabled: false # WIP
+
+    #
+    # packages with undesirable or "risky" attributes
+    #
+    undesirable:
+      package is old or abandoned:
+        - reason: old or abandoned packages receive no security updates and are risky
+        - enabled: true
+
+      invalid or no author email:
+        - reason: a package with lack of or invalid author email suggests 2FA not enabled
+        - enabled: true
+
+      invalid or no homepage:
+        - reason: a package with no or invalid homepage may not be preferable
+        - enabled: false
+
+      no source repo:
+        - reason: lack of public source repo may suggest malicious intention
+        - enabled: true
+
+      fewer downloads:
+        - reason: a package with few downloads may not be preferable
+        - enabled: true
+
+      no or insufficient readme:
+        - reason: a package with lack of documentation may not be preferable
+        - enabled: false
+
+      fewer versions or releases:
+        - reason: few versions suggest unstable or inactive project
+        - enabled: true
+
+      too many dependencies:
+        - reason: too many dependencies increase attack surface
+        - enabled: false
+
+      version release after a long gap:
+        - reason: a release after a long time may indicate account hijacking
+        - enabled: false
+
+      contains custom installation hooks:
+        - reason: custom installation hooks may download or execute malicious code
+        - enabled: false # WIP
+
+      #
+      # type: repo stats
+      #
+      few source repo stars:
+        - reason: a package with few repo stars may not be preferable
+        - enabled: false
+
+      few source repo forks:
+        - reason: a package with few repo forks may not be preferable
+        - enabled: false
+
+      forked source repo:
+        - reason: a forked copy of a popular package may contain malicious code
+        - enabled: true
+
+      #
+      # type: APIs and permissions
+      #
+      generates new code:
+        - reason: package generates new code at runtime, which could be malicious
+        - enabled: false
+      forks or exits OS processes:
+        - reason: package spawns new operating system processes, which could be malicious
+        - enabled: false
+      accesses obfuscated (hidden) code:
+        - enabled: true
+      accesses environment variables:
+        - enabled: false
+      changes system/environment variables:
+        - enabled: false
+      accesses files and dirs:
+        - enabled: false
+      communicates with external network:
+        - enabled: false
+      reads user input:
+        - enabled: false
+
+#
+# Sandboxing policies
+#
+sandbox:
+  rules:
+    #
+    # File system (allow or block accesses to file/dirs)
+    #
+    #   ~/ represents home dir
+    #   . represents cwd dir
+    #
+    # NOTE: only ONE 'allow' and 'block' lines are allowed
+    #
+    fs:
+      # TODO: customize as per your threat model
+
+      # block access to home dir and all other locations (except the ones below)
+      block: ~/, /
+      allow: ., ~/.cache, ~/.npm, ~/.local, ~/.ruby, /tmp, /proc, /etc, /var, /bin, /usr/include, /usr/local, /usr/bin, /usr/lib, /usr/share, /lib
+
+    #
+    # Network (allow or block domains/ports)
+    #
+    # NOTE: only ONE 'allow' and 'block' lines are allowed
+    #
+    network:
+
+      # TODO: customize as per your threat model
+
+      # block all external network communication (except the ones below)
+      block: 0.0.0.0
+
+      # For NPM packages
+      allow: registry.yarnpkg.com:0, npmjs.org:0, npmjs.com:0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+### 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)
+- ➕ Feature: React 18 support.
+- ✏ Chore: Migrate test suite from Enzyme to React Testing Library. [#249](https://github.com/react-grid-layout/react-resizable/pull/249)
+- ✏ Chore: Update `react-draggable` to ^4.5.0.
+- ✏ Chore: Update `react-test-renderer` to ^18.
+
+### 3.0.5 (Mar 21, 2023)
+
+- 🐛 Bugfix: Make `width` and `height` conditionally required if an `axis` is set. See [#196](https://github.com/react-grid-layout/react-resizable/issues/196)
+- ✏ Chore: Minor dependency upgrades.
+- ✏ Chore: Fix documentation of `onResize` callback arity.
+
 ### 3.0.4 (Jun 15, 2021)
 
 - 🐛 Bugfix: Fix incorrect fix for `handleAxis` on DOM elements. [#175](https://github.com/react-grid-layout/react-resizable/issues/175)
@@ -8,16 +22,16 @@
 ### 3.0.3 (Jun 14, 2021)
 
 - 🐛 Bugfix: Remove unknown prop `handleAxis` making it to DOM elements, causing a warning in dev.
-- ✏ Chore:Rewrote `lockAspectRatio` logic to be more accurate and shorter.
+- ✏ Chore: Rewrote `lockAspectRatio` logic to be more accurate and shorter.
 
 ### 3.0.2 (Jun 8, 2021)
 
-- ✏ Chore:Add documentation for resize handles and fix a mistake where the `handleAxis` prop was not being passed to custom components.
+- ✏ Chore: Add documentation for resize handles and fix a mistake where the `handleAxis` prop was not being passed to custom components.
   - See [Resize Handles](README.md#resize-handle)
 
 ### 3.0.1 (May 10, 2021)
 
-- ✏ Chore:Reduce package size through `.npmignore`.
+- ✏ Chore: Reduce package size through `.npmignore`.
 
 ### 3.0.0 (May 10, 2021)
 

package/CLAUDE.md

@@ -0,0 +1,71 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+# Install dependencies
+yarn
+
+# Run tests with coverage
+yarn test
+
+# Run tests in watch mode
+yarn unit
+
+# Lint (ESLint + Flow)
+yarn lint
+
+# Type check only
+yarn flow
+
+# Build (transpile lib/ to build/)
+yarn build
+
+# Run dev server with examples
+yarn dev
+
+# Build examples for production
+yarn build-example
+```
+
+Run a single test file:
+```bash
+npx jest __tests__/Resizable.test.js
+```
+
+Run tests matching a pattern:
+```bash
+npx jest --testNamePattern="snapshot"
+```
+
+## Architecture
+
+This is a React component library providing resizable functionality via two main components:
+
+### Core Components (`lib/`)
+
+- **Resizable.js** - Stateless base component. Wraps a child element with draggable resize handles using `react-draggable`'s `DraggableCore`. Computes size changes from drag deltas, applies constraints, and invokes callbacks. Does not manage state - parent must set `width`/`height` props from callback data.
+
+- **ResizableBox.js** - Stateful wrapper around `<Resizable>`. Manages width/height state internally and renders a `<div>` with those dimensions. Simpler API for common use cases.
+
+- **propTypes.js** - Shared Flow types and PropTypes definitions. Exports `resizableProps` object and types like `ResizeHandleAxis`, `ResizeCallbackData`, etc.
+
+- **utils.js** - Helper `cloneElement()` that merges `style` and `className` when cloning React elements.
+
+### Key Implementation Details
+
+- Resize handles are rendered as `<DraggableCore>` wrappers around handle elements
+- Handle positions: `'s'`, `'w'`, `'e'`, `'n'`, `'sw'`, `'nw'`, `'se'`, `'ne'`
+- The `runConstraints()` method applies min/max constraints and aspect ratio locking with slack tracking
+- Position tracking via `lastHandleRect` compensates for element repositioning during north/west drags
+- `transformScale` prop adjusts deltas when parent has CSS transform scaling
+
+### Build Output
+
+`yarn build` transpiles `lib/*.js` to `build/` and copies source files as `*.js.flow` for Flow consumers.
+
+## Testing
+
+Tests use Jest with Enzyme for shallow/mount rendering. Test files in `__tests__/` mirror the lib structure. Snapshot tests verify render output; unit tests verify resize behavior, constraint handling, and callback data.

package/README.md

@@ -6,7 +6,7 @@ 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 [TestLayout](/examples/TestLayout.js) and
+See the example and associated code in [ExampleLayout](/examples/ExampleLayout.js) and
 [ResizableBox](/lib/ResizableBox.js) for more details.
 
 Make sure you use the associated styles in [/css/styles.css](/css/styles.css), as without them, you will have
@@ -49,7 +49,7 @@ class Example extends React.Component {
   };
 
   // On top layout
-  onResize = (event, {element, size, handle}) => {
+  onResize = (event, {node, size, handle}) => {
     this.setState({width: size.width, height: size.height});
   };
 
@@ -77,7 +77,7 @@ import { ResizableBox } from 'react-resizable';
 class Example extends React.Component {
   render() {
     return (
-      <ResizableBox width={200} height={200} draggableOpts={{...}}
+      <ResizableBox width={200} height={200} draggableOpts={{grid: [25, 25]}}
           minConstraints={[100, 100]} maxConstraints={[300, 300]}>
         <span>Contents</span>
       </ResizableBox>