react-resizable 3.2.0 → 4.0.0

package/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 />
 }
 ```
 

package/build/Resizable.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { ResizeHandleAxis, DefaultProps, Props, DragCallbackData } from './propTypes';
+export default class Resizable extends React.Component<Props, {}> {
+    static propTypes: {
+        [key: string]: any;
+    };
+    static defaultProps: DefaultProps;
+    handleRefs: {
+        [key in ResizeHandleAxis]?: React.RefObject<HTMLElement>;
+    };
+    lastHandleRect: DOMRect | null;
+    slack: [number, number] | null;
+    lastSize: {
+        width: number;
+        height: number;
+    } | null;
+    componentWillUnmount(): void;
+    resetData(): void;
+    runConstraints(width: number, height: number): [number, number];
+    /**
+     * Wrapper around drag events to provide more useful data.
+     *
+     * @param  {String} handlerName Handler name to wrap.
+     * @return {Function}           Handler function.
+     */
+    resizeHandler(handlerName: 'onResize' | 'onResizeStart' | 'onResizeStop', axis: ResizeHandleAxis): (e: React.SyntheticEvent, data: DragCallbackData) => void;
+    renderResizeHandle(handleAxis: ResizeHandleAxis, ref: React.RefObject<HTMLElement>): React.ReactNode;
+    render(): React.ReactNode;
+}

package/build/Resizable.js

@@ -63,7 +63,7 @@ class Resizable extends React.Component {
     // 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 _ref = this.slack || [0, 0],
+    const _ref = this.slack || [0, 0],
       slackW = _ref[0],
       slackH = _ref[1];
     width += slackW;
@@ -213,7 +213,6 @@ class Resizable extends React.Component {
   }
   render() {
     // Pass along only props not meant for the `<Resizable>`.`
-    // eslint-disable-next-line no-unused-vars
     const _this$props2 = this.props,
       children = _this$props2.children,
       className = _this$props2.className,

package/build/ResizableBox.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import type { Props as ResizableProps, ResizeCallbackData, ResizableBoxState } from './propTypes';
+type ResizableBoxProps = Omit<ResizableProps, 'children'> & {
+    style?: React.CSSProperties;
+    children?: React.ReactElement<any>;
+    className?: string | null;
+};
+export default class ResizableBox extends React.Component<ResizableBoxProps, ResizableBoxState> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    };
+    state: ResizableBoxState;
+    static getDerivedStateFromProps(props: ResizableBoxProps, state: ResizableBoxState): ResizableBoxState | null;
+    onResize: (e: React.SyntheticEvent, data: ResizeCallbackData) => void;
+    render(): React.ReactNode;
+}
+export {};

package/build/ResizableBox.js

@@ -16,10 +16,8 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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 _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
-// care about that and will handle it in <Resizable> instead.
-// A <ResizableBox> can also have a `style` property.
+// <ResizableBox> does not have defaultProps, so we make all of <Resizable>'s defaults optional here
+// and add an optional `style` property.
 
 class ResizableBox extends React.Component {
   constructor() {

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Resizable } from './Resizable';
+export { default as ResizableBox } from './ResizableBox';
+export type { Axis, DefaultProps, DragCallbackData, Props, ReactRef, ResizableBoxState, ResizableState, ResizeCallbackData, ResizeHandleAxis, } from './propTypes';

package/build/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.ResizableBox = exports.Resizable = void 0;
+var _Resizable = _interopRequireDefault(require("./Resizable"));
+exports.Resizable = _Resizable.default;
+var _ResizableBox = _interopRequireDefault(require("./ResizableBox"));
+exports.ResizableBox = _ResizableBox.default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/build/propTypes.d.ts

@@ -0,0 +1,55 @@
+import type * as React from 'react';
+import type { DraggableCore } from 'react-draggable';
+export type ReactRef<T extends HTMLElement> = {
+    current: T | null;
+};
+export type Axis = 'both' | 'x' | 'y' | 'none';
+export type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
+export type ResizableState = {};
+export type ResizableBoxState = {
+    width: number;
+    height: number;
+    propsWidth: number;
+    propsHeight: number;
+};
+export type DragCallbackData = {
+    node: HTMLElement;
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    lastX: number;
+    lastY: number;
+};
+export type ResizeCallbackData = {
+    node: HTMLElement;
+    size: {
+        width: number;
+        height: number;
+    };
+    handle: ResizeHandleAxis;
+};
+export type DefaultProps = {
+    axis: Axis;
+    handleSize: [number, number];
+    lockAspectRatio: boolean;
+    minConstraints: [number, number];
+    maxConstraints: [number, number];
+    resizeHandles: ResizeHandleAxis[];
+    transformScale: number;
+};
+export type ResizeHandleFn = (resizeHandleAxis: ResizeHandleAxis, ref: React.RefObject<HTMLElement>) => React.ReactElement<any>;
+export type Props = DefaultProps & {
+    children: React.ReactElement<any>;
+    className?: string | null;
+    draggableOpts?: Partial<React.ComponentProps<typeof DraggableCore>> | null;
+    height: number;
+    handle?: React.ReactElement<any> | ResizeHandleFn;
+    onResizeStop?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | null;
+    onResizeStart?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | null;
+    onResize?: ((e: React.SyntheticEvent, data: ResizeCallbackData) => any) | null;
+    width: number;
+};
+export declare const resizableProps: {
+    [key: string]: any;
+};

package/build/propTypes.js

@@ -3,10 +3,9 @@
 exports.__esModule = true;
 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 = {
   /*
   * Restricts resizing to a particular axis (default: 'both')

package/build/utils.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function cloneElement(element: React.ReactElement<any>, props: Record<string, any>): React.ReactElement<any>;

package/package.json

@@ -1,25 +1,26 @@
 {
   "name": "react-resizable",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "description": "A component that is resizable with handles.",
   "main": "index.js",
+  "types": "./build/index.d.ts",
   "files": [
     "build/",
     "css/",
     "index.js"
   ],
   "scripts": {
-    "lint": "eslint lib/ __tests__/ setupTests/; flow",
+    "lint": "eslint lib/ __tests__/ setupTests/",
+    "typecheck": "tsc --noEmit",
     "test": "jest --coverage",
     "unit": "jest --watch --verbose",
     "build": "bash build.sh",
     "build-example": "webpack",
     "dev": "webpack serve --open",
     "prepublishOnly": "npm run build",
-    "preversion": "npm run lint",
+    "preversion": "npm run lint && npm run typecheck",
     "version": "git add CHANGELOG.md",
-    "postversion": "git push && git push --tags",
-    "flow": "flow"
+    "postversion": "git push && git push --tags"
   },
   "repository": {
     "type": "git",
@@ -39,24 +40,28 @@
   "devDependencies": {
     "@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.29.5",
-    "@babel/preset-flow": "^7.27.1",
     "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^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.2",
     "@testing-library/user-event": "^14.5.0",
+    "@types/jest": "^30.0.0",
+    "@types/prop-types": "^15.7.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "babel-loader": "^10.1.1",
     "cross-env": "^10.1.0",
     "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.4.2",
     "jest-environment-jsdom": "^30.4.1",
     "lodash": "^4.18.1",
@@ -64,6 +69,7 @@
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "style-loader": "^4.0.0",
+    "typescript": "^5.6.0",
     "webpack": "^5.106.2",
     "webpack-cli": "^7.0.2",
     "webpack-dev-server": "^5.2.4"

package/build/Resizable.js.flow

@@ -1,231 +0,0 @@
-// @flow
-import * as React from 'react';
-import type {Node as ReactNode} from 'react';
-import {DraggableCore} from 'react-draggable';
-import {cloneElement} from './utils';
-import {resizableProps} from "./propTypes";
-import type {ResizeHandleAxis, DefaultProps, Props, ReactRef, DragCallbackData} from './propTypes';
-
-// The base <Resizable> component.
-// This component does not have state and relies on the parent to set its props based on callback data.
-export default class Resizable extends React.Component<Props, void> {
-  static propTypes = resizableProps;
-
-  static defaultProps: DefaultProps =  {
-    axis: 'both',
-    handleSize: [20, 20],
-    lockAspectRatio: false,
-    minConstraints: [20, 20],
-    maxConstraints: [Infinity, Infinity],
-    resizeHandles: ['se'],
-    transformScale: 1
-  };
-
-  handleRefs: {[key: ResizeHandleAxis]: ReactRef<HTMLElement>} = {};
-  lastHandleRect: ?ClientRect = null;
-  slack: ?[number, number] = null;
-  lastSize: ?{width: number, height: number} = null;
-
-  componentWillUnmount() {
-    this.resetData();
-  }
-
-  resetData() {
-    this.lastHandleRect = this.slack = this.lastSize = null;
-  }
-
-  // Clamp width and height within provided constraints
-  runConstraints(width: number, height: number): [number, number] {
-    const {minConstraints, maxConstraints, lockAspectRatio} = this.props;
-    // short circuit
-    if (!minConstraints && !maxConstraints && !lockAspectRatio) return [width, height];
-
-    // If constraining to min and max, we need to also fit width and height to aspect ratio.
-    if (lockAspectRatio) {
-      const ratio = this.props.width / this.props.height;
-      const deltaW = width - this.props.width;
-      const deltaH = height - this.props.height;
-
-      // Find which coordinate was greater and should push the other toward it.
-      // E.g.:
-      // ratio = 1, deltaW = 10, deltaH = 5, deltaH should become 10.
-      // ratio = 2, deltaW = 10, deltaH = 6, deltaW should become 12.
-      if (Math.abs(deltaW) > Math.abs(deltaH * ratio)) {
-        height = width / ratio;
-      } else {
-        width = height * ratio;
-      }
-    }
-
-    const [oldW, oldH] = [width, 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];
-    width += slackW;
-    height += slackH;
-
-    if (minConstraints) {
-      width = Math.max(minConstraints[0], width);
-      height = Math.max(minConstraints[1], height);
-    }
-    if (maxConstraints) {
-      width = Math.min(maxConstraints[0], width);
-      height = Math.min(maxConstraints[1], height);
-    }
-
-    // If the width or height changed, we must have introduced some slack. Record it for the next iteration.
-    this.slack = [slackW + (oldW - width), slackH + (oldH - height)];
-
-    return [width, height];
-  }
-
-  /**
-   * Wrapper around drag events to provide more useful data.
-   *
-   * @param  {String} handlerName Handler name to wrap.
-   * @return {Function}           Handler function.
-   */
-  resizeHandler(handlerName: 'onResize' | 'onResizeStart' | 'onResizeStop', axis: ResizeHandleAxis): Function {
-    return (e: SyntheticEvent<>, {node, deltaX, deltaY}: DragCallbackData) => {
-      // Reset data in case it was left over somehow (should not be possible)
-      if (handlerName === 'onResizeStart') this.resetData();
-
-      // Axis restrictions
-      const canDragX = (this.props.axis === 'both' || this.props.axis === 'x') && axis !== 'n' && axis !== 's';
-      const canDragY = (this.props.axis === 'both' || this.props.axis === 'y') && axis !== 'e' && axis !== 'w';
-      // No dragging possible.
-      if (!canDragX && !canDragY) return;
-
-      // Decompose axis for later use
-      const axisV = axis[0];
-      const axisH = axis[axis.length - 1]; // intentionally not axis[1], so that this catches axis === 'w' for example
-
-      // Track the element being dragged to account for changes in position.
-      // If a handle's position is changed between callbacks, we need to factor this in to the next callback.
-      // Failure to do so will cause the element to "skip" when resized upwards or leftwards.
-      const handleRect = node.getBoundingClientRect();
-      if (this.lastHandleRect != null) {
-        // If the handle has repositioned on either axis since last render,
-        // we need to increase our callback values by this much.
-        // Only checking 'n', 'w' since resizing by 's', 'w' won't affect the overall position on page,
-        if (axisH === 'w') {
-          const deltaLeftSinceLast = handleRect.left - this.lastHandleRect.left;
-          deltaX += deltaLeftSinceLast;
-        }
-        if (axisV === 'n') {
-          const deltaTopSinceLast = handleRect.top - this.lastHandleRect.top;
-          deltaY += deltaTopSinceLast;
-        }
-      }
-      // Storage of last rect so we know how much it has really moved.
-      this.lastHandleRect = handleRect;
-
-      // Reverse delta if using top or left drag handles.
-      if (axisH === 'w') deltaX = -deltaX;
-      if (axisV === 'n') deltaY = -deltaY;
-
-      // Update w/h by the deltas. Also factor in transformScale.
-      // 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);
-
-      // 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.
-      if (handlerName === 'onResizeStop' && this.lastSize) {
-        ({width, height} = this.lastSize);
-      }
-
-      // 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.
-      if (handlerName !== 'onResizeStop') {
-        this.lastSize = {width, height};
-      }
-
-      // Call user-supplied callback if present.
-      const cb = typeof this.props[handlerName] === 'function' ? this.props[handlerName] : null;
-      // Don't call 'onResize' if dimensions haven't changed.
-      const shouldSkipCb = handlerName === 'onResize' && !dimensionsChanged;
-      if (cb && !shouldSkipCb) {
-        e.persist?.();
-        cb(e, {node, size: {width, height}, handle: axis});
-      }
-
-      // Reset internal data
-      if (handlerName === 'onResizeStop') this.resetData();
-    };
-  }
-
-  // Render a resize handle given an axis & DOM ref. Ref *must* be attached for
-  // the underlying draggable library to work properly.
-  renderResizeHandle(handleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>): ReactNode {
-    const {handle} = this.props;
-    // No handle provided, make the default
-    if (!handle) {
-      return <span className={`react-resizable-handle react-resizable-handle-${handleAxis}`} ref={ref} />;
-    }
-    // Handle is a function, such as:
-    // `handle={(handleAxis) => <span className={...} />}`
-    if (typeof handle === 'function') {
-      return handle(handleAxis, ref);
-    }
-    // Handle is a React component (composite or DOM).
-    const isDOMElement = typeof handle.type === 'string';
-    const props = {
-      ref,
-      // Add `handleAxis` prop iff this is not a DOM element,
-      // otherwise we'll get an unknown property warning
-      ...(isDOMElement ? {} : {handleAxis})
-    };
-    return React.cloneElement(handle, props);
-
-  }
-
-  render(): ReactNode {
-    // Pass along only props not meant for the `<Resizable>`.`
-    // eslint-disable-next-line no-unused-vars
-    const {children, className, draggableOpts, width, height, handle, handleSize,
-            lockAspectRatio, axis, minConstraints, maxConstraints, onResize,
-            onResizeStop, onResizeStart, resizeHandles, transformScale, ...p} = this.props;
-
-    // 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 cloneElement(children, {
-      ...p,
-      className: `${className ? `${className} ` : ''}react-resizable`,
-      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());
-          return (
-            <DraggableCore
-              {...draggableOpts}
-              nodeRef={ref}
-              key={`resizableHandle-${handleAxis}`}
-              onStop={this.resizeHandler('onResizeStop', handleAxis)}
-              onStart={this.resizeHandler('onResizeStart', handleAxis)}
-              onDrag={this.resizeHandler('onResize', handleAxis)}
-            >
-              {this.renderResizeHandle(handleAxis, ref)}
-            </DraggableCore>
-          );
-        })
-      ]
-    });
-  }
-}

package/build/ResizableBox.js.flow

@@ -1,98 +0,0 @@
-// @flow
-import * as React from 'react';
-import type {Node as ReactNode, Element as ReactElement} from 'react';
-import PropTypes from 'prop-types';
-
-import Resizable from './Resizable';
-import {resizableProps} from "./propTypes";
-import type {ResizeCallbackData, ResizableBoxState} from './propTypes';
-
-// 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
-// care about that and will handle it in <Resizable> instead.
-// A <ResizableBox> can also have a `style` property.
-type ResizableBoxProps = {|...React.ElementConfig<typeof Resizable>, style?: Object, children?: ReactElement<any>|};
-
-export default class ResizableBox extends React.Component<ResizableBoxProps, ResizableBoxState> {
-
-  // PropTypes are identical to <Resizable>, except that children are not strictly required to be present.
-  static propTypes = {
-    ...resizableProps,
-    children: PropTypes.element,
-  };
-
-  state: ResizableBoxState = {
-    width: this.props.width,
-    height: this.props.height,
-    propsWidth: this.props.width,
-    propsHeight: this.props.height,
-  };
-
-  static getDerivedStateFromProps(props: ResizableBoxProps, state: ResizableBoxState): ?ResizableBoxState {
-    // If parent changes height/width, set that in our state.
-    if (state.propsWidth !== props.width || state.propsHeight !== props.height) {
-      return {
-        width: props.width,
-        height: props.height,
-        propsWidth: props.width,
-        propsHeight: props.height,
-      };
-    }
-    return null;
-  }
-
-  onResize: (e: SyntheticEvent<>, data: ResizeCallbackData) => void = (e, data) => {
-    const {size} = data;
-    if (this.props.onResize) {
-      e.persist?.();
-      this.setState(size, () => this.props.onResize && this.props.onResize(e, data));
-    } else {
-      this.setState(size);
-    }
-  };
-
-  render(): ReactNode {
-    // Basic wrapper around a Resizable instance.
-    // If you use Resizable directly, you are responsible for updating the child component
-    // with a new width and height.
-    const {
-      handle,
-      handleSize,
-      onResize,
-      onResizeStart,
-      onResizeStop,
-      draggableOpts,
-      minConstraints,
-      maxConstraints,
-      lockAspectRatio,
-      axis,
-      width,
-      height,
-      resizeHandles,
-      style,
-      transformScale,
-      ...props
-    } = this.props;
-
-    return (
-      <Resizable
-        axis={axis}
-        draggableOpts={draggableOpts}
-        handle={handle}
-        handleSize={handleSize}
-        height={this.state.height}
-        lockAspectRatio={lockAspectRatio}
-        maxConstraints={maxConstraints}
-        minConstraints={minConstraints}
-        onResizeStart={onResizeStart}
-        onResize={this.onResize}
-        onResizeStop={onResizeStop}
-        resizeHandles={resizeHandles}
-        transformScale={transformScale}
-        width={this.state.width}
-      >
-        <div {...props} style={{...style, width: this.state.width + 'px', height: this.state.height + 'px'}} />
-      </Resizable>
-    );
-  }
-}

package/build/propTypes.js.flow

@@ -1,161 +0,0 @@
-// @flow
-/* global Element */
-import PropTypes from 'prop-types';
-import {DraggableCore} from "react-draggable";
-import type {Element as ReactElement, ElementConfig} from 'react';
-
-export type ReactRef<T: HTMLElement> = {
-  current: T | null
-};
-
-export type Axis = 'both' | 'x' | 'y' | 'none';
-export type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
-export type ResizableState = void;
-export type ResizableBoxState = {
-  width: number, height: number,
-  propsWidth: number, propsHeight: number
-};
-export type DragCallbackData = {
-  node: HTMLElement,
-  x: number, y: number,
-  deltaX: number, deltaY: number,
-  lastX: number, lastY: number
-};
-export type ResizeCallbackData = {
-  node: HTMLElement,
-  size: {width: number, height: number},
-  handle: ResizeHandleAxis
-};
-
-// <Resizable>
-export type DefaultProps = {
-  axis: Axis,
-  handleSize: [number, number],
-  lockAspectRatio: boolean,
-  minConstraints: [number, number],
-  maxConstraints: [number, number],
-  resizeHandles: ResizeHandleAxis[],
-  transformScale: number,
-};
-
-export type Props = {
-  ...DefaultProps,
-  children: ReactElement<any>,
-  className?: ?string,
-  draggableOpts?: ?ElementConfig<typeof DraggableCore>,
-  height: number,
-  handle?: ReactElement<any> | (resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>,
-  onResizeStop?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
-  onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
-  onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
-  width: number,
-};
-
-
-
-export const resizableProps: Object = {
-  /*
-  * Restricts resizing to a particular axis (default: 'both')
-  * 'both' - allows resizing by width or height
-  * 'x' - only allows the width to be changed
-  * 'y' - only allows the height to be changed
-  * 'none' - disables resizing altogether
-  * */
-  axis: PropTypes.oneOf(['both', 'x', 'y', 'none']),
-  className: PropTypes.string,
-  /*
-  * Require that one and only one child be present.
-  * */
-  children: PropTypes.element.isRequired,
-  /*
-  * These will be passed wholesale to react-draggable's DraggableCore
-  * */
-  draggableOpts: PropTypes.shape({
-    allowAnyClick: PropTypes.bool,
-    cancel: PropTypes.string,
-    children: PropTypes.node,
-    disabled: PropTypes.bool,
-    enableUserSelectHack: PropTypes.bool,
-    // #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,
-    onStart: PropTypes.func,
-    onDrag: PropTypes.func,
-    onStop: PropTypes.func,
-    onMouseDown: PropTypes.func,
-    scale: PropTypes.number,
-  }),
-  /*
-  * Initial height
-  * */
-  height: (...args) => {
-    const [props] = args;
-    // Required if resizing height or both
-    if (props.axis === 'both' || props.axis === 'y') {
-      return PropTypes.number.isRequired(...args);
-    }
-    return PropTypes.number(...args);
-  },
-  /*
-  * Customize cursor resize handle
-  * */
-  handle: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.func
-  ]),
-  /*
-  * If you change this, be sure to update your css
-  * */
-  handleSize: PropTypes.arrayOf(PropTypes.number),
-  lockAspectRatio: PropTypes.bool,
-  /*
-  * Max X & Y measure
-  * */
-  maxConstraints: PropTypes.arrayOf(PropTypes.number),
-  /*
-  * Min X & Y measure
-  * */
-  minConstraints: PropTypes.arrayOf(PropTypes.number),
-  /*
-  * Called on stop resize event
-  * */
-  onResizeStop: PropTypes.func,
-  /*
-  * Called on start resize event
-  * */
-  onResizeStart: PropTypes.func,
-  /*
-  * Called on resize event
-  * */
-  onResize: PropTypes.func,
-  /*
-  * Defines which resize handles should be rendered (default: 'se')
-  * 's' - South handle (bottom-center)
-  * 'w' - West handle (left-center)
-  * 'e' - East handle (right-center)
-  * 'n' - North handle (top-center)
-  * 'sw' - Southwest handle (bottom-left)
-  * 'nw' - Northwest handle (top-left)
-  * 'se' - Southeast handle (bottom-right)
-  * 'ne' - Northeast handle (top-center)
-  * */
-  resizeHandles: PropTypes.arrayOf(PropTypes.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
-
-  /*
-  * If `transform: scale(n)` is set on the parent, this should be set to `n`.
-  * */
-  transformScale: PropTypes.number,
-  /*
-   * Initial width
-   */
-  width: (...args) => {
-    const [props] = args;
-    // Required if resizing width or both
-    if (props.axis === 'both' || props.axis === 'x') {
-      return PropTypes.number.isRequired(...args);
-    }
-    return PropTypes.number(...args);
-  },
-};

package/build/utils.js.flow

@@ -1,14 +0,0 @@
-// @flow
-import React from 'react';
-import type {Element as ReactElement} from 'react';
-
-// React.addons.cloneWithProps look-alike that merges style & className.
-export function cloneElement(element: ReactElement<any>, props: Object): ReactElement<any> {
-  if (props.style && element.props.style) {
-    props.style = {...element.props.style, ...props.style};
-  }
-  if (props.className && element.props.className) {
-    props.className = `${element.props.className} ${props.className}`;
-  }
-  return React.cloneElement(element, props);
-}