react-resizable 1.11.0 → 3.0.1

package/.babelrc

@@ -10,7 +10,7 @@
     "@babel/preset-flow"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties",
+    ["@babel/plugin-proposal-class-properties", {"loose": true}],
     "@babel/plugin-proposal-object-rest-spread"
   ]
 }

package/.eslintrc

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "plugins": [
     "react"
   ],

package/.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.133.0
+^0.150.1
 
 [ignore]
 .*/node_modules/@babel.*
@@ -18,12 +18,9 @@ implicit-inexact-object=error
 
 [options]
 suppress_type=$FlowFixMe
-esproposal.class_static_fields=enable
-esproposal.class_instance_fields=enable
-esproposal.decorators=ignore
-esproposal.export_star_as=enable
 experimental.strict_call_arity=true
 module.system.node.allow_root_relative=true
 module.use_strict=true
 server.max_workers=6
-exact_by_default=true
+exact_by_default=true
+sharedmemory.heap_size=3221225472

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+### 3.0.1 (May 10, 2021)
+
+- Reduce package size through `.npmignore`.
+
+### 3.0.0 (May 10, 2021)
+
+#### Breaking
+- Fixed handling of the `nodeRef` that needs to be passed to `<DraggableCore>` to avoid use of ReactDOM. This means that vanilla usage of `react-resizable` no longer requires ReactDOM. No code changes are needed in the usual case, except:
+  * React `>= 16.3` is required due to use of `React.createRef()`, and
+  * The `handle` prop now sends a `ReactRef<HTMLElement>` as its second argument and expects it to be used on your returned component.
+    * If you do not attach the `ref`, you will receive the following error: `"<DraggableCore> not mounted on DragStart!"` This is due to the ref being present but not attached to any node.
+
+### 1.11.1 (Mar 5, 2021)
+
+- Added React 17 to peerDependencies.
+
 ### 1.11.0 (Sep 3, 2020)
 
 - ⚠ Important Notice!

package/README.md

@@ -1,6 +1,6 @@
 ### React-Resizable
 
-[View the Demo](https://strml.github.io/react-resizable/examples/1.html)
+[View the Demo](https://react-grid-layout.github.io/react-resizable/examples/1.html)
 
 A simple widget that can be resized via one or more handles.
 
@@ -17,27 +17,72 @@ See the [demo](/examples/TestLayout.js) for more on this.
 
 ### Installation
 
-Using [npm](https://www.npmjs.com/):
-
     $ npm install --save react-resizable
 
+### 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`.
+
 ### 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>`
 ```js
-const Resizable = require('react-resizable').Resizable; // or,
-const ResizableBox = require('react-resizable').ResizableBox;
+const {Resizable} = require('react-resizable');
 
 // ES6
-import { Resizable, ResizableBox } from 'react-resizable';
+import { Resizable } from 'react-resizable';
 
 // ...
-render() {
-  return (
-    <ResizableBox width={200} height={200} draggableOpts={{...}}
-        minConstraints={[100, 100]} maxConstraints={[300, 300]}>
-      <span>Contents</span>
-    </ResizableBox>
-  );
+class Example extends React.Component {
+  state = {
+    width: 200,
+    height: 200,
+  };
+
+  // On top layout
+  onResize = (event, {element, 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'}}>
+          <span>Contents</span>
+        </div>
+      </Resizable>
+    );
+  }
+}
+
+```
+
+
+#### `<ResizableBox>`
+```js
+const {ResizableBox} = require('react-resizable');
+
+// ES6
+import { ResizableBox } from 'react-resizable';
+
+class Example extends React.Component {
+  render() {
+    return (
+      <ResizableBox width={200} height={200} draggableOpts={{...}}
+          minConstraints={[100, 100]} maxConstraints={[300, 300]}>
+        <span>Contents</span>
+      </ResizableBox>
+    );
+  }
 }
 ```
 
@@ -46,12 +91,20 @@ render() {
 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
+type ResizeCallbackData = {
+  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,
   // 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: 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne') => ReactElement<any>,
+  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,
@@ -70,7 +123,7 @@ The following props can also be used on `<ResizableBox>`:
 
 ```js
 {
-  style?: Object
+  style?: Object // styles the returned <div />
 }
 ```
 

package/build/Resizable.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
 var _reactDraggable = require("react-draggable");
 
@@ -11,22 +11,26 @@ var _utils = require("./utils");
 
 var _propTypes = require("./propTypes");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
+// The base <Resizable> component.
+// This component does not have state and relies on the parent to set its props based on callback data.
 var Resizable = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Resizable, _React$Component);
 
@@ -38,13 +42,9 @@ var Resizable = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "state", undefined);
-
-    _defineProperty(_assertThisInitialized(_this), "lastHandleRect", null);
-
-    _defineProperty(_assertThisInitialized(_this), "slack", null);
-
+    _this.handleRefs = {};
+    _this.lastHandleRect = null;
+    _this.slack = null;
     return _this;
   }
 
@@ -194,21 +194,25 @@ var Resizable = /*#__PURE__*/function (_React$Component) {
 
       if (handlerName === 'onResizeStop') _this2.resetData();
     };
-  };
+  } // Render a resize handle given an axis & DOM ref.
+  ;
 
-  _proto.renderResizeHandle = function renderResizeHandle(resizeHandleAxis) {
+  _proto.renderResizeHandle = function renderResizeHandle(handleAxis, ref) {
     var handle = this.props.handle;
 
     if (handle) {
       if (typeof handle === 'function') {
-        return handle(resizeHandleAxis);
+        return handle(handleAxis, ref);
       }
 
-      return handle;
+      return /*#__PURE__*/React.cloneElement(handle, {
+        ref: ref
+      });
     }
 
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: "react-resizable-handle react-resizable-handle-" + resizeHandleAxis
+    return /*#__PURE__*/React.createElement("span", {
+      className: "react-resizable-handle react-resizable-handle-" + handleAxis,
+      ref: ref
     });
   };
 
@@ -243,29 +247,32 @@ var Resizable = /*#__PURE__*/function (_React$Component) {
     return (0, _utils.cloneElement)(children, _objectSpread(_objectSpread({}, p), {}, {
       className: (className ? className + " " : '') + "react-resizable",
       children: [].concat(children.props.children, resizeHandles.map(function (handleAxis) {
-        return /*#__PURE__*/_react.default.createElement(_reactDraggable.DraggableCore, _extends({}, draggableOpts, {
+        var _this3$handleRefs$han;
+
+        // Create a ref to the handle so that `<DraggableCore>` doesn't have to use ReactDOM.findDOMNode().
+        var ref = (_this3$handleRefs$han = _this3.handleRefs[handleAxis]) != null ? _this3$handleRefs$han : _this3.handleRefs[handleAxis] = /*#__PURE__*/React.createRef();
+        return /*#__PURE__*/React.createElement(_reactDraggable.DraggableCore, _extends({}, draggableOpts, {
+          nodeRef: ref,
           key: "resizableHandle-" + handleAxis,
           onStop: _this3.resizeHandler('onResizeStop', handleAxis),
           onStart: _this3.resizeHandler('onResizeStart', handleAxis),
           onDrag: _this3.resizeHandler('onResize', handleAxis)
-        }), _this3.renderResizeHandle(handleAxis));
+        }), _this3.renderResizeHandle(handleAxis, ref));
       }))
     }));
   };
 
   return Resizable;
-}(_react.default.Component);
+}(React.Component);
 
 exports.default = Resizable;
-
-_defineProperty(Resizable, "propTypes", _propTypes.resizableProps);
-
-_defineProperty(Resizable, "defaultProps", {
+Resizable.propTypes = _propTypes.resizableProps;
+Resizable.defaultProps = {
+  axis: 'both',
   handleSize: [20, 20],
   lockAspectRatio: false,
-  axis: 'both',
   minConstraints: [20, 20],
   maxConstraints: [Infinity, Infinity],
   resizeHandles: ['se'],
   transformScale: 1
-});
+};

package/build/Resizable.js.flow

@@ -1,26 +1,27 @@
 // @flow
-import React from 'react';
+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, Props, ResizableState, DragCallbackData} from './propTypes';
+import type {ResizeHandleAxis, DefaultProps, Props, ReactRef, DragCallbackData} from './propTypes';
 
-export default class Resizable extends React.Component<Props, ResizableState> {
+// 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 =  {
+  static defaultProps: DefaultProps =  {
+    axis: 'both',
     handleSize: [20, 20],
     lockAspectRatio: false,
-    axis: 'both',
     minConstraints: [20, 20],
     maxConstraints: [Infinity, Infinity],
     resizeHandles: ['se'],
     transformScale: 1
   };
 
-  state: ResizableState = undefined;
-
+  handleRefs: {[key: ResizeHandleAxis]: ReactRef<HTMLElement>} = {};
   lastHandleRect: ?ClientRect = null;
   slack: ?[number, number] = null;
 
@@ -151,15 +152,16 @@ export default class Resizable extends React.Component<Props, ResizableState> {
     };
   }
 
-  renderResizeHandle(resizeHandleAxis: ResizeHandleAxis): ReactNode {
+  // Render a resize handle given an axis & DOM ref.
+  renderResizeHandle(handleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>): ReactNode {
     const {handle} = this.props;
     if (handle) {
       if (typeof handle === 'function') {
-        return handle(resizeHandleAxis);
+        return handle(handleAxis, ref);
       }
-      return handle;
+      return React.cloneElement(handle, {ref});
     }
-    return <span className={`react-resizable-handle react-resizable-handle-${resizeHandleAxis}`} />;
+    return <span className={`react-resizable-handle react-resizable-handle-${handleAxis}`} ref={ref} />;
   }
 
   render(): ReactNode {
@@ -178,17 +180,22 @@ export default class Resizable extends React.Component<Props, ResizableState> {
       className: `${className ? `${className} ` : ''}react-resizable`,
       children: [
         ...children.props.children,
-        ...resizeHandles.map((handleAxis) => (
-          <DraggableCore
-            {...draggableOpts}
-            key={`resizableHandle-${handleAxis}`}
-            onStop={this.resizeHandler('onResizeStop', handleAxis)}
-            onStart={this.resizeHandler('onResizeStart', handleAxis)}
-            onDrag={this.resizeHandler('onResize', handleAxis)}
-          >
-            {this.renderResizeHandle(handleAxis)}
-          </DraggableCore>
-        ))
+        ...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

@@ -13,23 +13,23 @@ var _propTypes2 = require("./propTypes");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 var ResizableBox = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ResizableBox, _React$Component);
@@ -42,15 +42,14 @@ var ResizableBox = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _this.state = {
       width: _this.props.width,
       height: _this.props.height,
       propsWidth: _this.props.width,
       propsHeight: _this.props.height
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "onResize", function (e, data) {
+    _this.onResize = function (e, data) {
       var size = data.size;
 
       if (_this.props.onResize) {
@@ -62,7 +61,7 @@ var ResizableBox = /*#__PURE__*/function (_React$Component) {
       } else {
         _this.setState(size);
       }
-    });
+    };
 
     return _this;
   }
@@ -132,7 +131,6 @@ var ResizableBox = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 exports.default = ResizableBox;
-
-_defineProperty(ResizableBox, "propTypes", _objectSpread(_objectSpread({}, _propTypes2.resizableProps), {}, {
+ResizableBox.propTypes = _objectSpread(_objectSpread({}, _propTypes2.resizableProps), {}, {
   children: _propTypes.default.element
-}));
+});

package/build/ResizableBox.js.flow

@@ -28,7 +28,7 @@ export default class ResizableBox extends React.Component<ResizableBoxProps, Res
     propsHeight: this.props.height,
   };
 
-  static getDerivedStateFromProps(props: ResizableBoxProps, state: ResizableBoxState) {
+  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 {
@@ -41,7 +41,7 @@ export default class ResizableBox extends React.Component<ResizableBoxProps, Res
     return null;
   }
 
-  onResize = (e: SyntheticEvent<>, data: ResizeCallbackData) => {
+  onResize: (e: SyntheticEvent<>, data: ResizeCallbackData) => void = (e, data) => {
     const {size} = data;
     if (this.props.onResize) {
       e.persist && e.persist();

package/build/propTypes.js.flow

@@ -3,46 +3,56 @@ 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 = {|
+export type ResizableBoxState = {
   width: number, height: number,
   propsWidth: number, propsHeight: number
-|};
-export type DragCallbackData = {|
+};
+export type DragCallbackData = {
   node: HTMLElement,
   x: number, y: number,
   deltaX: number, deltaY: number,
   lastX: number, lastY: number
-|};
-export type ResizeCallbackData = {|
+};
+export type ResizeCallbackData = {
   node: HTMLElement,
-  size: {|width: number, height: number|},
+  size: {width: number, height: number},
   handle: ResizeHandleAxis
-|};
+};
 
 // <Resizable>
-export type Props = {|
+export type DefaultProps = {
   axis: Axis,
-  children: ReactElement<any>,
-  className?: ?string,
-  draggableOpts?: ?ElementConfig<typeof DraggableCore>,
-  height: number,
-  handle?: ReactElement<any> | (resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>,
   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,
-  resizeHandles: ResizeHandleAxis[],
-  transformScale: number,
   width: number,
-|};
+};
+
+
 
-export const resizableProps = {
+export const resizableProps: Object = {
   /*
   * Restricts resizing to a particular axis (default: 'both')
   * 'both' - allows resizing by width or height

package/build/utils.js

@@ -7,7 +7,7 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable",
-  "version": "1.11.0",
+  "version": "3.0.1",
   "description": "A component that is resizable with handles.",
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git@github.com:STRML/react-resizable.git"
+    "url": "git@github.com:react-grid-layout/react-resizable.git"
   },
   "keywords": [
     "react",
@@ -30,18 +30,18 @@
   "author": "Samuel Reed <samuel.trace.reed@gmail.com> (http://strml.net/)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/STRML/react-resizable/issues"
+    "url": "https://github.com/react-grid-layout/react-resizable/issues"
   },
-  "homepage": "https://github.com/STRML/react-resizable",
+  "homepage": "https://github.com/react-grid-layout/react-resizable",
   "devDependencies": {
     "@babel/cli": "^7.11.6",
     "@babel/core": "^7.11.6",
+    "@babel/eslint-parser": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
-    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.2",
@@ -49,7 +49,7 @@
     "enzyme-adapter-react-16": "^1.15.4",
     "eslint": "^7.8.1",
     "eslint-plugin-react": "^7.20.6",
-    "flow-bin": "^0.133.0",
+    "flow-bin": "^0.150.1",
     "jest": "^26.4.2",
     "lodash": "^4.17.20",
     "pre-commit": "^1.1.2",
@@ -66,8 +66,7 @@
     "react-draggable": "^4.0.3"
   },
   "peerDependencies": {
-    "react": "0.14.x || 15.x || 16.x",
-    "react-dom": "0.14.x || 15.x || 16.x"
+    "react": ">= 16.3"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"