react-resizable 3.0.0 → 3.0.4

package/.eslintrc

@@ -5,7 +5,8 @@
     "react"
   ],
   "extends": [
-    "eslint:recommended"
+    "eslint:recommended",
+    "plugin:jest/recommended"
   ],
   "rules": {
     "strict": 0,

package/.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.150.1
+^0.153.0
 
 [ignore]
 .*/node_modules/@babel.*

package/CHANGELOG.md

@@ -1,16 +1,36 @@
 # Changelog
 
+### 3.0.4 (Jun 15, 2021)
+
+- 🐛 Bugfix: Fix incorrect fix for `handleAxis` on DOM elements. [#175](https://github.com/react-grid-layout/react-resizable/issues/175)
+- ✏ Chore:Upgrade dependencies.
+
+### 3.0.3 (Jun 14, 2021)
+
+- 🐛 Bugfix: Remove unknown prop `handleAxis` making it to DOM elements, causing a warning in dev.
+- ✏ Chore:Rewrote `lockAspectRatio` logic to be more accurate and shorter.
+
+### 3.0.2 (Jun 8, 2021)
+
+- ✏ Chore:Add documentation for resize handles and fix a mistake where the `handleAxis` prop was not being passed to custom components.
+  - See [Resize Handles](README.md#resize-handle)
+
+### 3.0.1 (May 10, 2021)
+
+- ✏ Chore: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:
+
+- 🐛 Bugfix: 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.
+- ✏ Chore: Added React 17 to peerDependencies.
 
 ### 1.11.0 (Sep 3, 2020)
 

package/README.md

@@ -1,6 +1,6 @@
 ### React-Resizable
 
-[View the Demo](https://react-grid-layout.github.io/react-resizable/examples/1.html)
+[View the Demo](https://react-grid-layout.github.io/react-resizable/index.html)
 
 A simple widget that can be resized via one or more handles.
 
@@ -115,7 +115,7 @@ type ResizableProps =
   onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   draggableOpts?: ?Object,
-  resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
+  resizeHandles?: ?Array<ResizeHandleAxis> = ['se']
 };
 ```
 
@@ -127,4 +127,61 @@ The following props can also be used on `<ResizableBox>`:
 }
 ```
 
-If a `width` or `height` is passed to `<ResizableBox>`'s `style` prop, it will be ignored as it is required for internal function.
+If a `width` or `height` is passed to `<ResizableBox>`'s `style` prop, it will be ignored as it is required for internal function.
+
+#### Resize Handle
+
+If you override the resize handle, we expect that any `ref` passed to your new handle with represent the underlying DOM element.
+
+This is required, as `react-resizable` must be able to access the underlying DOM node to attach handlers and measure position deltas.
+
+There are a few ways to do this:
+
+##### Native DOM Element
+
+This requires no special treatment.
+
+```js
+<Resizable handle={<div className="foo" />} />
+```
+
+##### Custom React Component
+
+You must [forward the ref](https://reactjs.org/docs/forwarding-refs.html) and props to the underlying DOM element.
+
+###### Class Components
+
+```js
+class MyHandleComponent extends React.Component {
+  render() {
+    const {handleAxis, innerRef, ...props} = this.props;
+    return <div ref={innerRef} className={`foo handle-${handleAxis}`} {...props} />
+  }
+}
+const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={ref} {...props} />);
+
+<Resizable handle={<MyHandle />} />
+```
+
+###### Functional Components
+
+```js
+const MyHandle = React.forwardRef((props, ref) => {
+  const {handleAxis, ...restProps} = props;
+  return <div ref={ref} className={`foo handle-${handleAxis}`} {...restProps} />;
+});
+
+<Resizable handle={<MyHandle />} />
+```
+
+##### Custom Function
+
+You can define a function as a handle, which will simply receive an axis (see above `ResizeHandleAxis` type) and ref. This may be more clear to read, depending on your coding style.
+
+```js
+const MyHandle = (props) => {
+  return <div ref={props.innerRef} className="foo" {...props} />;
+};
+
+<Resizable handle={(handleAxis, ref) => <MyHandle innerRef={ref} className={`foo handle-${handleAxis}`} {...props} />} />
+```

package/build/Resizable.js

@@ -11,20 +11,22 @@ var _utils = require("./utils");
 
 var _propTypes = require("./propTypes");
 
+var _excluded = ["children", "className", "draggableOpts", "width", "height", "handle", "handleSize", "lockAspectRatio", "axis", "minConstraints", "maxConstraints", "onResize", "onResizeStop", "onResizeStart", "resizeHandles", "transformScale"];
+
 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 _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 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 _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 _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; _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
@@ -54,37 +56,31 @@ var Resizable = /*#__PURE__*/function (_React$Component) {
     this.resetData();
   };
 
-  _proto.lockAspectRatio = function lockAspectRatio(width, height, aspectRatio) {
-    height = width / aspectRatio;
-    width = height * aspectRatio;
-    return [width, height];
-  };
-
   _proto.resetData = function resetData() {
     this.lastHandleRect = this.slack = null;
   } // Clamp width and height within provided constraints
   ;
 
   _proto.runConstraints = function runConstraints(width, height) {
-    var _ref = [this.props.minConstraints, this.props.maxConstraints],
-        min = _ref[0],
-        max = _ref[1];
-    if (!min && !max) return [width, height]; // If constraining to min and max, we need to also fit width and height to aspect ratio.
+    var _this$props = this.props,
+        minConstraints = _this$props.minConstraints,
+        maxConstraints = _this$props.maxConstraints,
+        lockAspectRatio = _this$props.lockAspectRatio; // 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 (this.props.lockAspectRatio) {
-      var resizingHorizontally = height === this.props.height;
+    if (lockAspectRatio) {
+      var ratio = this.props.width / this.props.height;
+      var deltaW = width - this.props.width;
+      var 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 (resizingHorizontally) {
-        var ratio = this.props.width / this.props.height;
+      if (Math.abs(deltaW) > Math.abs(deltaH * ratio)) {
         height = width / ratio;
-        width = height * ratio;
       } else {
-        // Take into account vertical resize with N/S handles on locked aspect
-        // ratio. Calculate the change height-first, instead of width-first
-        var _ratio = this.props.height / this.props.width;
-
-        width = height / _ratio;
-        height = width * _ratio;
+        width = height * ratio;
       }
     }
 
@@ -93,21 +89,21 @@ var Resizable = /*#__PURE__*/function (_React$Component) {
     // we start removing slack, the element won't react to it right away until it's been
     // completely removed.
 
-    var _ref2 = this.slack || [0, 0],
-        slackW = _ref2[0],
-        slackH = _ref2[1];
+    var _ref = this.slack || [0, 0],
+        slackW = _ref[0],
+        slackH = _ref[1];
 
     width += slackW;
     height += slackH;
 
-    if (min) {
-      width = Math.max(min[0], width);
-      height = Math.max(min[1], height);
+    if (minConstraints) {
+      width = Math.max(minConstraints[0], width);
+      height = Math.max(minConstraints[1], height);
     }
 
-    if (max) {
-      width = Math.min(max[0], width);
-      height = Math.min(max[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.
 
 
@@ -125,10 +121,10 @@ var Resizable = /*#__PURE__*/function (_React$Component) {
   _proto.resizeHandler = function resizeHandler(handlerName, axis) {
     var _this2 = this;
 
-    return function (e, _ref3) {
-      var node = _ref3.node,
-          deltaX = _ref3.deltaX,
-          deltaY = _ref3.deltaY;
+    return function (e, _ref2) {
+      var node = _ref2.node,
+          deltaX = _ref2.deltaX,
+          deltaY = _ref2.deltaY;
       // Reset data in case it was left over somehow (should not be possible)
       if (handlerName === 'onResizeStart') _this2.resetData(); // Axis restrictions
 
@@ -180,7 +176,7 @@ var Resizable = /*#__PURE__*/function (_React$Component) {
       var shouldSkipCb = handlerName === 'onResize' && !dimensionsChanged;
 
       if (cb && !shouldSkipCb) {
-        if (typeof e.persist === 'function') e.persist();
+        e.persist == null ? void 0 : e.persist();
         cb(e, {
           node: node,
           size: {
@@ -194,26 +190,36 @@ var Resizable = /*#__PURE__*/function (_React$Component) {
 
       if (handlerName === 'onResizeStop') _this2.resetData();
     };
-  } // Render a resize handle given an axis & DOM ref.
+  } // Render a resize handle given an axis & DOM ref. Ref *must* be attached for
+  // the underlying draggable library to work properly.
   ;
 
   _proto.renderResizeHandle = function renderResizeHandle(handleAxis, ref) {
-    var handle = this.props.handle;
-
-    if (handle) {
-      if (typeof handle === 'function') {
-        return handle(handleAxis, ref);
-      }
+    var handle = this.props.handle; // No handle provided, make the default
 
-      return /*#__PURE__*/React.cloneElement(handle, {
+    if (!handle) {
+      return /*#__PURE__*/React.createElement("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).
 
-    return /*#__PURE__*/React.createElement("span", {
-      className: "react-resizable-handle react-resizable-handle-" + handleAxis,
+
+    var isDOMElement = typeof handle.type === 'string';
+
+    var props = _objectSpread({
       ref: ref
+    }, isDOMElement ? {} : {
+      handleAxis: handleAxis
     });
+
+    return /*#__PURE__*/React.cloneElement(handle, props);
   };
 
   _proto.render = function render() {
@@ -221,27 +227,27 @@ var Resizable = /*#__PURE__*/function (_React$Component) {
 
     // Pass along only props not meant for the `<Resizable>`.`
     // eslint-disable-next-line no-unused-vars
-    var _this$props = this.props,
-        children = _this$props.children,
-        className = _this$props.className,
-        draggableOpts = _this$props.draggableOpts,
-        width = _this$props.width,
-        height = _this$props.height,
-        handle = _this$props.handle,
-        handleSize = _this$props.handleSize,
-        lockAspectRatio = _this$props.lockAspectRatio,
-        axis = _this$props.axis,
-        minConstraints = _this$props.minConstraints,
-        maxConstraints = _this$props.maxConstraints,
-        onResize = _this$props.onResize,
-        onResizeStop = _this$props.onResizeStop,
-        onResizeStart = _this$props.onResizeStart,
-        resizeHandles = _this$props.resizeHandles,
-        transformScale = _this$props.transformScale,
-        p = _objectWithoutPropertiesLoose(_this$props, ["children", "className", "draggableOpts", "width", "height", "handle", "handleSize", "lockAspectRatio", "axis", "minConstraints", "maxConstraints", "onResize", "onResizeStop", "onResizeStart", "resizeHandles", "transformScale"]); // What we're doing here is getting the child of this element, and cloning it with this element's props.
+    var _this$props2 = this.props,
+        children = _this$props2.children,
+        className = _this$props2.className,
+        draggableOpts = _this$props2.draggableOpts,
+        width = _this$props2.width,
+        height = _this$props2.height,
+        handle = _this$props2.handle,
+        handleSize = _this$props2.handleSize,
+        lockAspectRatio = _this$props2.lockAspectRatio,
+        axis = _this$props2.axis,
+        minConstraints = _this$props2.minConstraints,
+        maxConstraints = _this$props2.maxConstraints,
+        onResize = _this$props2.onResize,
+        onResizeStop = _this$props2.onResizeStop,
+        onResizeStart = _this$props2.onResizeStart,
+        resizeHandles = _this$props2.resizeHandles,
+        transformScale = _this$props2.transformScale,
+        p = _objectWithoutPropertiesLoose(_this$props2, _excluded); // 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:
-    // Its original children (resizable's child's children), and
-    // One or more draggable handles.
+    // 1. Its original children (resizable's child's children), and
+    // 2. One or more draggable handles.
 
 
     return (0, _utils.cloneElement)(children, _objectSpread(_objectSpread({}, p), {}, {

package/build/Resizable.js.flow

@@ -29,34 +29,30 @@ export default class Resizable extends React.Component<Props, void> {
     this.resetData();
   }
 
-  lockAspectRatio(width: number, height: number, aspectRatio: number): [number, number] {
-    height = width / aspectRatio;
-    width = height * aspectRatio;
-    return [width, height];
-  }
-
   resetData() {
     this.lastHandleRect = this.slack = null;
   }
 
   // Clamp width and height within provided constraints
   runConstraints(width: number, height: number): [number, number] {
-    const [min, max] = [this.props.minConstraints, this.props.maxConstraints];
-    if (!min && !max) return [width, height];
+    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 (this.props.lockAspectRatio) {
-      const resizingHorizontally = height === this.props.height;
-      if (resizingHorizontally) {
-        const ratio = this.props.width / this.props.height;
+    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;
-        width = height * ratio;
       } else {
-        // Take into account vertical resize with N/S handles on locked aspect
-        // ratio. Calculate the change height-first, instead of width-first
-        const ratio = this.props.height / this.props.width;
-        width = height / ratio;
-        height = width * ratio;
+        width = height * ratio;
       }
     }
 
@@ -69,13 +65,13 @@ export default class Resizable extends React.Component<Props, void> {
     width += slackW;
     height += slackH;
 
-    if (min) {
-      width = Math.max(min[0], width);
-      height = Math.max(min[1], height);
+    if (minConstraints) {
+      width = Math.max(minConstraints[0], width);
+      height = Math.max(minConstraints[1], height);
     }
-    if (max) {
-      width = Math.min(max[0], width);
-      height = Math.min(max[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.
@@ -143,7 +139,7 @@ export default class Resizable extends React.Component<Props, void> {
       // Don't call 'onResize' if dimensions haven't changed.
       const shouldSkipCb = handlerName === 'onResize' && !dimensionsChanged;
       if (cb && !shouldSkipCb) {
-        if (typeof e.persist === 'function') e.persist();
+        e.persist?.();
         cb(e, {node, size: {width, height}, handle: axis});
       }
 
@@ -152,16 +148,29 @@ export default class Resizable extends React.Component<Props, void> {
     };
   }
 
-  // Render a resize handle given an axis & DOM ref.
+  // 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;
-    if (handle) {
-      if (typeof handle === 'function') {
-        return handle(handleAxis, ref);
-      }
-      return React.cloneElement(handle, {ref});
+    // 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);
     }
-    return <span className={`react-resizable-handle react-resizable-handle-${handleAxis}`} ref={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 {
@@ -173,8 +182,8 @@ export default class Resizable extends React.Component<Props, void> {
 
     // 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:
-    // Its original children (resizable's child's children), and
-    // One or more draggable handles.
+    // 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`,

package/build/ResizableBox.js

@@ -11,6 +11,8 @@ var _Resizable = _interopRequireDefault(require("./Resizable"));
 
 var _propTypes2 = require("./propTypes");
 
+var _excluded = ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"];
+
 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); }
@@ -53,7 +55,7 @@ var ResizableBox = /*#__PURE__*/function (_React$Component) {
       var size = data.size;
 
       if (_this.props.onResize) {
-        e.persist && e.persist();
+        e.persist == null ? void 0 : e.persist();
 
         _this.setState(size, function () {
           return _this.props.onResize && _this.props.onResize(e, data);
@@ -102,7 +104,7 @@ var ResizableBox = /*#__PURE__*/function (_React$Component) {
         resizeHandles = _this$props.resizeHandles,
         style = _this$props.style,
         transformScale = _this$props.transformScale,
-        props = _objectWithoutPropertiesLoose(_this$props, ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"]);
+        props = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
     return /*#__PURE__*/React.createElement(_Resizable.default, {
       axis: axis,

package/build/ResizableBox.js.flow

@@ -44,7 +44,7 @@ export default class ResizableBox extends React.Component<ResizableBoxProps, Res
   onResize: (e: SyntheticEvent<>, data: ResizeCallbackData) => void = (e, data) => {
     const {size} = data;
     if (this.props.onResize) {
-      e.persist && e.persist();
+      e.persist?.();
       this.setState(size, () => this.props.onResize && this.props.onResize(e, data));
     } else {
       this.setState(size);