Merge branch '2026-05-typescript-conversion' into master

Convert the library from Flow to TypeScript and prep the 4.0.0 release.

Public runtime API is unchanged. Type-delivery channel changes:
- Bundled .d.ts now ships in build/ (via package.json#types).
- *.js.flow shims removed. Flow is no longer supported.
- @types/react-resizable on DefinitelyTyped is no longer needed.

See CHANGELOG.md (4.0.0) for migration notes and the link to the last
Flow-annotated source for users who still need to vendor Flow types.

Author: STRML

.babelrc

@@ -7,7 +7,7 @@
       }
     ],
     "@babel/preset-react",
-    "@babel/preset-flow"
+    "@babel/preset-typescript"
   ],
   "plugins": [
     ["@babel/plugin-proposal-class-properties", {"loose": true}],

.claude/commands/goal.md

@@ -0,0 +1,62 @@
+---
+description: Convert react-resizable from Flow to TypeScript
+---
+
+# Goal: Convert react-resizable from Flow to TypeScript
+
+## Why
+
+The repo is currently typed with Flow (v0.153.0, pinned to a 2020 version). Flow is no longer well-supported in the React ecosystem and most consumers expect TypeScript declarations. Convert the library source, tests, and build pipeline to TypeScript while preserving all public runtime behavior (including PropTypes) and the existing build output shape (CommonJS lib + ambient declarations consumed via `build/`).
+
+## Constraints
+
+- No behavior changes. Snapshots and unit tests must continue to pass.
+- The public API surface is unchanged. `require('react-resizable').Resizable` and `.ResizableBox` must keep working.
+- Keep `prop-types` runtime validation in place (downstream JS consumers rely on it).
+- Continue to emit a CommonJS bundle from `build/` plus type declarations next to each module.
+- Drop Flow (`flow-bin`, `.flowconfig`, `flow-typed/`, `@babel/preset-flow`, `// @flow` pragmas).
+
+## Acceptance criteria
+
+- [ ] `yarn install` succeeds.
+- [ ] `yarn typecheck` (tsc --noEmit) passes with no errors.
+- [ ] `yarn lint` passes (ESLint with @typescript-eslint).
+- [ ] `yarn test` passes (all existing tests, including snapshots).
+- [ ] `yarn build` produces `build/Resizable.js`, `build/ResizableBox.js`, `build/utils.js`, `build/propTypes.js` plus matching `.d.ts` declaration files.
+- [ ] `index.js` still resolves to the built output.
+- [ ] `package.json` advertises `"types": "./build/index.d.ts"` (or equivalent) so TS consumers get IntelliSense.
+- [ ] No `.flow` files remain in `lib/`. No `// @flow` pragmas.
+
+## Plan
+
+1. **Tooling**: add `typescript`, `@types/react`, `@types/react-dom`, `@types/prop-types`, `@types/jest`, `@babel/preset-typescript`, `@typescript-eslint/parser`, `@typescript-eslint/eslint-plugin`. Remove `flow-bin`, `@babel/preset-flow`. Write `tsconfig.json` (target ES2020, jsx react, declaration true, declarationDir ./build, noEmit configurable via separate `tsconfig.build.json`).
+2. **Babel**: replace `@babel/preset-flow` with `@babel/preset-typescript` in `.babelrc`.
+3. **Source conversion (`lib/`)**:
+   - `utils.js` → `utils.ts`
+   - `propTypes.js` → `propTypes.ts` (keep runtime PropTypes; export TS types alongside)
+   - `Resizable.js` → `Resizable.tsx`
+   - `ResizableBox.js` → `ResizableBox.tsx`
+   - Map Flow types: `?T` → `T | null | undefined`, `SyntheticEvent<>` → `React.SyntheticEvent`, `Node as ReactNode` → `React.ReactNode`, `Element as ReactElement` → `React.ReactElement`, `ElementConfig<typeof X>` → `React.ComponentProps<typeof X>`, `ReactRef<T>` → `React.RefObject<T>`.
+   - Strip `// @flow` pragmas.
+4. **Tests (`__tests__/`)**:
+   - Rename `.test.js` → `.test.tsx` where JSX is used, otherwise `.test.ts`.
+   - Fix any test typings that need help (e.g., enzyme/testing-library queries).
+   - Re-record snapshots only if structural output is unchanged.
+5. **Build pipeline**:
+   - `build.sh` runs babel (transpile .ts/.tsx → JS) and `tsc --emitDeclarationOnly` for .d.ts files.
+   - Drop the `cp *.js *.js.flow` step.
+6. **package.json scripts**:
+   - `lint`: ESLint over `.ts,.tsx`.
+   - `typecheck`: `tsc --noEmit`.
+   - Remove the `flow` script.
+7. **ESLint**: update `eslint.config.js` to parse TS with `@typescript-eslint/parser` and include `@typescript-eslint` rules at "recommended" level. Keep existing react/jest plugins.
+8. **Examples**: keep `examples/example.js` as JS — out of scope for this conversion. Update webpack to still build it.
+9. **Run the acceptance gate**: `yarn install && yarn typecheck && yarn lint && yarn test && yarn build`. Fix everything until green.
+10. **Commit**: one commit, message `chore: convert library from Flow to TypeScript`.
+
+## Out of scope
+
+- Examples directory (`examples/*.js`).
+- API/behavior changes.
+- Bumping major dependency versions beyond what's needed for TS to work.
+- Migrating ESLint plugins beyond what's needed for TS parsing.

.flowconfig

@@ -13,15 +13,28 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 24
+          cache: yarn
 
       - name: Install Node.js dependencies
-        run: yarn
+        run: yarn install --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Type-check
+        run: yarn typecheck
 
       - name: Run tests
         run: yarn test
+
+      - name: Build (verify .d.ts emission)
+        run: yarn build
+
+      - name: Smoke-test built artifact
+        run: node ./__tests__/integration/smoke.cjs

.github/workflows/test.yml

@@ -1,5 +1,60 @@
 # Changelog
 
+### 4.0.0 (May 12, 2026)
+
+This release converts the library from Flow to TypeScript and ships bundled
+type declarations. The runtime API and on-screen behavior are unchanged. The
+major version bump is to flag two things consumers may need to act on.
+
+**Breaking — types delivery**
+
+- The library is now authored in TypeScript. Bundled type declarations ship
+  in `build/*.d.ts` and are resolved via the `"types"` field in
+  `package.json`. No `@types/react-resizable` install is needed; if you have
+  one installed, remove it — TypeScript prefers the bundled types and the
+  DefinitelyTyped package is no longer required.
+- The `*.js.flow` shims previously emitted by `build.sh` have been removed.
+  Flow is no longer supported.
+
+  Flow users who still need types can copy the last Flow-annotated source
+  from the `3.2.0` tag:
+  [`react-grid-layout/react-resizable@db2e37e/lib`](https://github.com/react-grid-layout/react-resizable/tree/db2e37eda85fb21b1864e36b01c4922452f28418/lib)
+  ([`lib/Resizable.js`](https://github.com/react-grid-layout/react-resizable/blob/db2e37eda85fb21b1864e36b01c4922452f28418/lib/Resizable.js),
+  [`lib/ResizableBox.js`](https://github.com/react-grid-layout/react-resizable/blob/db2e37eda85fb21b1864e36b01c4922452f28418/lib/ResizableBox.js),
+  [`lib/propTypes.js`](https://github.com/react-grid-layout/react-resizable/blob/db2e37eda85fb21b1864e36b01c4922452f28418/lib/propTypes.js),
+  [`lib/utils.js`](https://github.com/react-grid-layout/react-resizable/blob/db2e37eda85fb21b1864e36b01c4922452f28418/lib/utils.js)).
+  These files were the input to the published `.js.flow` artifacts in
+  `react-resizable@3.2.0` on npm; you can vendor them as a local Flow shim.
+  They will not be updated, and any fix landing on `master` after `4.0.0`
+  will not be backported into a Flow form.
+
+**Internal**
+
+- ✏ Chore: Migrate `lib/` and `__tests__/` from Flow to TypeScript
+  (`*.ts`/`*.tsx`). Public runtime API unchanged.
+- ✏ Chore: Replace `@babel/preset-flow` with `@babel/preset-typescript`;
+  drop `flow-bin`, `flow-typed/`, `.flowconfig`.
+- ✏ Chore: Add `tsconfig.json` (typecheck), `tsconfig.build.json`
+  (declaration emit), `tsconfig.test.json`.
+- ✏ Chore: `build.sh` now runs `babel` for the JS transform and
+  `tsc --emitDeclarationOnly` for the `.d.ts` files.
+- ✏ Chore: ESLint now uses `@typescript-eslint/parser`.
+- ✏ Chore: CI now runs `yarn lint`, `yarn typecheck`, `yarn test`, and a
+  build-artifact smoke test on every push and PR.
+- ✏ Chore: Add an integration smoke test that imports the built CJS entry
+  point and asserts the public surface (`Resizable`, `ResizableBox`).
+
+### 3.2.0 (May 11, 2026)
+
+- 🐛 Bugfix: Prevent resize drift caused by stale props between renders.
+  The component now accumulates deltas from `lastSize` rather than
+  `this.props.width/height`, and `dimensionsChanged` is compared against
+  that same base so zero-delta callbacks are still suppressed correctly.
+  [#255](https://github.com/react-grid-layout/react-resizable/pull/255)
+- ✏ Chore: Pin ESLint to `^9.x`. ESLint 10 removes `scopeManager.addGlobals`,
+  which `@babel/eslint-parser` 7.x still calls; the parser fix is only
+  available in unreleased v8 RCs that require an unreleased Babel core v8.
+
 ### 3.1.3 (Jan 1, 2026)
 
 - ✏ Chore: Add `files` whitelist to package.json to reduce package size and exclude unnecessary files.

CHANGELOG.md

@@ -11,11 +11,12 @@ 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](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.
+[ResizableBox](https://github.com/react-grid-layout/react-resizable/blob/master/lib/ResizableBox.tsx) for more details.
 
 ## Table of Contents
 
 - [Installation](#installation)
+- [TypeScript](#typescript)
 - [Compatibility](#compatibility)
 - [Usage](#usage)
   - [Resizable](#resizable)
@@ -47,20 +48,59 @@ Or import it in your CSS:
 
 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.
 
+## TypeScript
+
+As of `4.0.0`, the library is authored in TypeScript and ships bundled type
+declarations in `build/*.d.ts`. You **do not** need to install
+`@types/react-resizable`; if you previously installed it, remove it so the
+bundled types take precedence:
+
+```bash
+npm uninstall @types/react-resizable
+# or
+yarn remove @types/react-resizable
+```
+
+Public types are re-exported from the package root:
+
+```ts
+import {
+  Resizable,
+  ResizableBox,
+  // types
+  type ResizeCallbackData,
+  type ResizeHandleAxis,
+  type Axis,
+  type Props as ResizableProps,
+} from 'react-resizable';
+```
+
+### Flow
+
+Flow is no longer supported as of `4.0.0`. Earlier versions shipped
+`*.js.flow` sidecar files generated from the Flow-annotated source; those
+have been removed.
+
+If you still need Flow types, you can vendor the last Flow-annotated source
+locally from the [`3.2.0` tag](https://github.com/react-grid-layout/react-resizable/tree/db2e37eda85fb21b1864e36b01c4922452f28418/lib).
+They will not be updated to reflect changes landing after `4.0.0`. The
+official recommendation is to migrate to TypeScript.
+
 ## Compatibility
 
-| 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` |
+| Version | React Version | Types          |
+|---------|---------------|----------------|
+| [4.x](https://github.com/react-grid-layout/react-resizable/blob/master/CHANGELOG.md#400-may-12-2026) | `>= 16.3` | TypeScript (bundled) |
+| [3.x](https://github.com/react-grid-layout/react-resizable/blob/master/CHANGELOG.md#300-may-10-2021) | `>= 16.3` | Flow (`*.js.flow`) |
+| 2.x | Skipped | — |
+| [1.x](https://github.com/react-grid-layout/react-resizable/blob/master/CHANGELOG.md#1111-mar-5-2021) | `14 - 17` | Flow |
 
 ## Usage
 
 This package has two major exports:
 
-* [`<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>`](https://github.com/react-grid-layout/react-resizable/blob/master/lib/Resizable.tsx): 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.tsx): A simple `<div {...props} />` element that manages basic state. Convenient for simple use-cases.
 
 ### `<Resizable>`
 
@@ -124,43 +164,46 @@ class Example extends React.Component {
 
 These props apply to both `<Resizable>` and `<ResizableBox>`. Unknown props that are not in the list below will be passed to the child component.
 
-```js
+```ts
 type ResizeCallbackData = {
-  node: HTMLElement,
-  size: {width: number, height: number},
-  handle: ResizeHandleAxis
+  node: HTMLElement;
+  size: {width: number; height: number};
+  handle: ResizeHandleAxis;
 };
 
 type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
 
 type ResizableProps = {
-  children: React.Element<any>,
-  width: number,
-  height: number,
+  children: React.ReactElement<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.
-  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],
-  lockAspectRatio: boolean = false,
-  axis: 'both' | 'x' | 'y' | 'none' = 'both',
-  minConstraints: [number, number] = [10, 10],
-  maxConstraints: [number, number] = [Infinity, Infinity],
-  onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
-  onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
-  onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
-  draggableOpts?: ?Object,
-  resizeHandles?: ?Array<ResizeHandleAxis> = ['se'],
+  handle?:
+    | React.ReactElement<any>
+    | ((resizeHandle: ResizeHandleAxis, ref: React.RefObject<HTMLElement>) => React.ReactElement<any>);
+  // If you change this, be sure to update your css. Default: [20, 20].
+  handleSize?: [number, number];
+  lockAspectRatio?: boolean;                       // default: false
+  axis?: 'both' | 'x' | 'y' | 'none';              // default: 'both'
+  minConstraints?: [number, number];               // default: [20, 20]
+  maxConstraints?: [number, number];               // default: [Infinity, Infinity]
+  onResizeStop?:  (e: React.SyntheticEvent, data: ResizeCallbackData) => any;
+  onResizeStart?: (e: React.SyntheticEvent, data: ResizeCallbackData) => any;
+  onResize?:      (e: React.SyntheticEvent, data: ResizeCallbackData) => any;
+  // Forwarded to react-draggable's <DraggableCore>.
+  draggableOpts?: Partial<React.ComponentProps<typeof import('react-draggable').DraggableCore>>;
+  resizeHandles?: ResizeHandleAxis[];              // default: ['se']
   // If `transform: scale(n)` is set on the parent, this should be set to `n`.
-  transformScale?: number = 1
+  transformScale?: number;                         // default: 1
 };
 ```
 
 The following props can also be used on `<ResizableBox>`:
 
-```js
+```ts
 {
-  style?: Object // styles the returned <div />
+  style?: React.CSSProperties; // styles the returned <div />
 }
 ```
 

README.md

@@ -8,7 +8,7 @@ describe('render ResizableBox', () => {
   const props = {
     axis: 'x',
     draggableOpts: {},
-    handle: (jest.fn((resizeHandle, ref) => <span className={`test-class-${resizeHandle}`} ref={ref} />): Function),
+    handle: jest.fn((resizeHandle, ref) => <span className={`test-class-${resizeHandle}`} ref={ref} />) as any,
     handleSize: [20, 20],
     height: 50,
     lockAspectRatio: false,