chore(release): prep 4.0.0 — changelog, readme, CI, integration tests

- CHANGELOG.md: add 4.0.0 entry covering the Flow->TS migration. Mark the
  types-delivery change as breaking and point Flow users at the last
  Flow-annotated source by SHA (db2e37e, the 3.2.0 tag). Backfill the
  missing 3.2.0 entry (PR #255 fix + ESLint pin).
- README.md: new TypeScript section (bundled types ship from build/*.d.ts,
  remove @types/react-resizable). Flow-removal note with the same SHA link.
  Refresh lib/*.js references to *.tsx. Rewrite the Flow-flavored Props
  block in TypeScript. Compatibility table gains a Types column.
- CI (.github/workflows/test.yml): now runs lint, typecheck, test, build,
  and a build-artifact smoke test on every push and PR. Bump checkout/
  setup-node to v4 and add yarn caching.
- __tests__/integration/smoke.cjs: plain CJS smoke test for the published
  shape — root entry resolves, named exports are constructible, defaultProps
  and propTypes preserved, bundled .d.ts files exist with expected symbols,
  legacy require()() guard throws, files whitelist correct.
- __tests__/integration/end-to-end.test.tsx: 32 Jest integration tests
  driving real DOM events through DraggableCore. Same suite runs twice —
  against the TS source and against the built CJS root entry (gated on
  build/ existing). Covers drag-driven size changes, controlled-mode
  callbacks, the #255 regression (mid-drag prop staleness), zero-delta
  suppression, min/max constraints, lockAspectRatio, axis restrictions,
  transformScale, all 8 handle axes, and custom-function handles.

Coverage on Resizable.tsx is now 98.76% lines, ResizableBox.tsx 100%.

Author: STRML

.github/workflows/test.yml

@@ -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

CHANGELOG.md

@@ -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.

README.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 />
 }
 ```