react-rnd - npm Package Compare versions

Comparing version 8.0.0-beta.0 to 8.0.0-beta.1

lib/index.es5.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
@@ -11,410 +9,314 @@
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
 
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
 
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
 
-var _extends = Object.assign || function (target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i];
+var extendStatics = Object.setPrototypeOf ||
+    ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+    function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
 
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        target[key] = source[key];
-      }
-    }
-  }
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
 
-  return target;
-};
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
+var __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+    return t;
 };
 
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
 var resizableStyle = {
-  width: 'auto',
-  height: 'auto',
-  display: 'inline-block',
-  position: 'absolute',
-  top: 0,
-  left: 0
+    width: "auto",
+    height: "auto",
+    display: "inline-block",
+    position: "absolute",
+    top: 0,
+    left: 0,
 };
-
-var Rnd = function (_React$Component) {
-  inherits(Rnd, _React$Component);
-
-  function Rnd(props) {
-    classCallCheck(this, Rnd);
-
-    var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
-
-    _this.state = {
-      original: {
-        x: 0,
-        y: 0
-      },
-      bounds: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0
-      },
-      maxWidth: props.maxWidth,
-      maxHeight: props.maxHeight
-    };
-    _this.onResizeStart = _this.onResizeStart.bind(_this);
-    _this.onResize = _this.onResize.bind(_this);
-    _this.onResizeStop = _this.onResizeStop.bind(_this);
-    _this.onDragStart = _this.onDragStart.bind(_this);
-    _this.onDrag = _this.onDrag.bind(_this);
-    _this.onDragStop = _this.onDragStop.bind(_this);
-    _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this);
-    return _this;
-  }
-
-  createClass(Rnd, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      if (this.props.default) {
-        var _getOffsetFromParent = this.getOffsetFromParent(),
-            _left = _getOffsetFromParent.left,
-            _top = _getOffsetFromParent.top;
-
-        var _draggable$state = this.draggable.state,
-            _x = _draggable$state.x,
-            _y = _draggable$state.y;
-
+var Rnd = /** @class */ (function (_super) {
+    __extends(Rnd, _super);
+    function Rnd(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            original: {
+                x: 0,
+                y: 0,
+            },
+            bounds: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+            },
+            maxWidth: props.maxWidth,
+            maxHeight: props.maxHeight,
+        };
+        _this.onResizeStart = _this.onResizeStart.bind(_this);
+        _this.onResize = _this.onResize.bind(_this);
+        _this.onResizeStop = _this.onResizeStop.bind(_this);
+        _this.onDragStart = _this.onDragStart.bind(_this);
+        _this.onDrag = _this.onDrag.bind(_this);
+        _this.onDragStop = _this.onDragStop.bind(_this);
+        _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this);
+        return _this;
+    }
+    Rnd.prototype.componentDidMount = function () {
+        var _a = this.getOffsetFromParent(), left = _a.left, top = _a.top;
+        var _b = this.getDraggablePosition(), x = _b.x, y = _b.y;
         this.draggable.setState({
-          x: _x - _left,
-          y: _y - _top
+            x: x - left,
+            y: y - top,
         });
-      }
-    }
-  }, {
-    key: 'getParentSize',
-    value: function getParentSize() {
-      return this.resizable.getParentSize();
-    }
-  }, {
-    key: 'getMaxSizesFromProps',
-    value: function getMaxSizesFromProps() {
-      var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;
-      var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;
-      return { maxWidth: maxWidth, maxHeight: maxHeight };
-    }
-  }, {
-    key: 'getSelfElement',
-    value: function getSelfElement() {
-      return this.resizable && this.resizable.resizable;
-    }
-  }, {
-    key: 'onDragStart',
-    value: function onDragStart(e, data) {
-      if (this.props.onDragStart) {
-        this.props.onDragStart(e, data);
-      }
-      if (!this.props.bounds) return;
-      var parent = this.resizable && this.resizable.parentNode;
-      var boundary = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
-      if (!(boundary instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
-        return;
-      }
-      var boundaryRect = boundary.getBoundingClientRect();
-      var boundaryLeft = boundaryRect.left;
-      var boundaryTop = boundaryRect.top;
-      var parentRect = parent.getBoundingClientRect();
-      var parentLeft = parentRect.left;
-      var parentTop = parentRect.top;
-      var left = boundaryLeft - parentLeft;
-      var top = boundaryTop - parentTop;
-      if (!this.resizable) return;
-      var offset = this.getOffsetFromParent();
-      this.setState({
-        bounds: {
-          top: top - offset.top,
-          right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left,
-          bottom: top + (boundary.offsetHeight - this.resizable.size.height) - offset.top,
-          left: left - offset.left
+        // HACK: Apply position adjustment
+        this.forceUpdate();
+    };
+    // HACK: To get `react-draggable` state x and y.
+    Rnd.prototype.getDraggablePosition = function () {
+        var _a = this.draggable.state, x = _a.x, y = _a.y;
+        return { x: x, y: y };
+    };
+    Rnd.prototype.getParent = function () {
+        return this.resizable && this.resizable.parentNode;
+    };
+    Rnd.prototype.getParentSize = function () {
+        return this.resizable.getParentSize();
+    };
+    Rnd.prototype.getMaxSizesFromProps = function () {
+        var maxWidth = typeof this.props.maxWidth === "undefined" ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;
+        var maxHeight = typeof this.props.maxHeight === "undefined" ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;
+        return { maxWidth: maxWidth, maxHeight: maxHeight };
+    };
+    Rnd.prototype.getSelfElement = function () {
+        return this.resizable && this.resizable.resizable;
+    };
+    Rnd.prototype.onDragStart = function (e, data) {
+        if (this.props.onDragStart) {
+            this.props.onDragStart(e, data);
         }
-      });
-    }
-  }, {
-    key: 'onDrag',
-    value: function onDrag(e, data) {
-      if (this.props.onDrag) {
-        this.props.onDrag(e, data);
-      }
-    }
-  }, {
-    key: 'onDragStop',
-    value: function onDragStop(e, data) {
-      if (this.props.onDragStop) {
-        this.props.onDragStop(e, data);
-      }
-    }
-  }, {
-    key: 'onResizeStart',
-    value: function onResizeStart(e, dir, refToElement) {
-      e.stopPropagation();
-      this.setState({
-        original: { x: this.draggable.state.x, y: this.draggable.state.y }
-      });
-      if (this.props.bounds) {
-        var parent = this.resizable && this.resizable.parentNode;
-        var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
-        var self = this.getSelfElement();
-        if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {
-          var _getMaxSizesFromProps = this.getMaxSizesFromProps(),
-              _maxWidth = _getMaxSizesFromProps.maxWidth,
-              _maxHeight = _getMaxSizesFromProps.maxHeight;
-
-          var parentSize = this.getParentSize();
-          if (_maxWidth && typeof _maxWidth === 'string') {
-            if (_maxWidth.endsWith('%')) {
-              var ratio = Number(_maxWidth.replace('%', '')) / 100;
-              _maxWidth = parentSize.width * ratio;
-            } else if (_maxWidth.endsWith('px')) {
-              _maxWidth = Number(_maxWidth.replace('px', ''));
+        if (!this.props.bounds)
+            return;
+        var parent = this.getParent();
+        var boundary = this.props.bounds === "parent" ? parent : document.querySelector(this.props.bounds);
+        if (!(boundary instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
+            return;
+        }
+        var boundaryRect = boundary.getBoundingClientRect();
+        var boundaryLeft = boundaryRect.left;
+        var boundaryTop = boundaryRect.top;
+        var parentRect = parent.getBoundingClientRect();
+        var parentLeft = parentRect.left;
+        var parentTop = parentRect.top;
+        var left = boundaryLeft - parentLeft;
+        var top = boundaryTop - parentTop;
+        if (!this.resizable)
+            return;
+        var offset = this.getOffsetFromParent();
+        this.setState({
+            bounds: {
+                top: top - offset.top,
+                right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left,
+                bottom: top + (boundary.offsetHeight - this.resizable.size.height) - offset.top,
+                left: left - offset.left,
+            },
+        });
+    };
+    Rnd.prototype.onDrag = function (e, data) {
+        if (this.props.onDrag) {
+            var offset = this.getOffsetFromParent();
+            this.props.onDrag(e, __assign({}, data, { x: data.x - offset.left, y: data.y - offset.top }));
+        }
+    };
+    Rnd.prototype.onDragStop = function (e, data) {
+        if (this.props.onDragStop) {
+            var _a = this.getOffsetFromParent(), left = _a.left, top_1 = _a.top;
+            this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_1 }));
+        }
+    };
+    Rnd.prototype.onResizeStart = function (e, dir, elementRef) {
+        e.stopPropagation();
+        this.setState({
+            original: this.getDraggablePosition(),
+        });
+        if (this.props.bounds) {
+            var parent_1 = this.getParent();
+            var target = this.props.bounds === "parent" ? parent_1 : document.querySelector(this.props.bounds);
+            var self_1 = this.getSelfElement();
+            if (self_1 instanceof Element && target instanceof HTMLElement && parent_1 instanceof HTMLElement) {
+                var _a = this.getMaxSizesFromProps(), maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
+                var parentSize = this.getParentSize();
+                if (maxWidth && typeof maxWidth === "string") {
+                    if (maxWidth.endsWith("%")) {
+                        var ratio = Number(maxWidth.replace("%", "")) / 100;
+                        maxWidth = parentSize.width * ratio;
+                    }
+                    else if (maxWidth.endsWith("px")) {
+                        maxWidth = Number(maxWidth.replace("px", ""));
+                    }
+                }
+                if (maxHeight && typeof maxHeight === "string") {
+                    if (maxHeight.endsWith("%")) {
+                        var ratio = Number(maxHeight.replace("%", "")) / 100;
+                        maxHeight = parentSize.width * ratio;
+                    }
+                    else if (maxHeight.endsWith("px")) {
+                        maxHeight = Number(maxHeight.replace("px", ""));
+                    }
+                }
+                var selfRect = self_1.getBoundingClientRect();
+                var selfLeft = selfRect.left;
+                var selfTop = selfRect.top;
+                var targetRect = target.getBoundingClientRect();
+                var targetLeft = targetRect.left;
+                var targetTop = targetRect.top;
+                if (/left/i.test(dir) && this.resizable) {
+                    var max = selfLeft - targetLeft + this.resizable.size.width;
+                    this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
+                }
+                if (/right/i.test(dir)) {
+                    var max = target.offsetWidth + (targetLeft - selfLeft);
+                    this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
+                }
+                if (/top/i.test(dir) && this.resizable) {
+                    var max = selfTop - targetTop + this.resizable.size.height;
+                    this.setState({
+                        maxHeight: max > Number(maxHeight) ? maxHeight : max,
+                    });
+                }
+                if (/bottom/i.test(dir)) {
+                    var max = target.offsetHeight + (targetTop - selfTop);
+                    this.setState({
+                        maxHeight: max > Number(maxHeight) ? maxHeight : max,
+                    });
+                }
             }
-          }
-          if (_maxHeight && typeof _maxHeight === 'string') {
-            if (_maxHeight.endsWith('%')) {
-              var _ratio = Number(_maxHeight.replace('%', '')) / 100;
-              _maxHeight = parentSize.width * _ratio;
-            } else if (_maxHeight.endsWith('px')) {
-              _maxHeight = Number(_maxHeight.replace('px', ''));
-            }
-          }
-          var selfRect = self.getBoundingClientRect();
-          var selfLeft = selfRect.left;
-          var selfTop = selfRect.top;
-          var targetRect = target.getBoundingClientRect();
-          var targetLeft = targetRect.left;
-          var targetTop = targetRect.top;
-          if (/left/i.test(dir) && this.resizable) {
-            var max = selfLeft - targetLeft + this.resizable.size.width;
-            this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max });
-          }
-          if (/right/i.test(dir)) {
-            var _max = target.offsetWidth + (targetLeft - selfLeft);
-            this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max });
-          }
-          if (/top/i.test(dir) && this.resizable) {
-            var _max2 = selfTop - targetTop + this.resizable.size.height;
+        }
+        else {
             this.setState({
-              maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2
+                maxWidth: this.props.maxWidth,
+                maxHeight: this.props.maxHeight,
             });
-          }
-          if (/bottom/i.test(dir)) {
-            var _max3 = target.offsetHeight + (targetTop - selfTop);
-            this.setState({
-              maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3
+        }
+        if (this.props.onResizeStart) {
+            this.props.onResizeStart(e, dir, elementRef);
+        }
+    };
+    Rnd.prototype.onResize = function (e, direction, elementRef, delta) {
+        var x;
+        var y;
+        var offset = this.getOffsetFromParent();
+        if (/left/i.test(direction)) {
+            x = this.state.original.x - delta.width;
+            // INFO: If uncontrolled component, apply x position by resize to draggable.
+            if (!this.props.position) {
+                this.draggable.setState({ x: x });
+            }
+            x += offset.left;
+        }
+        if (/top/i.test(direction)) {
+            y = this.state.original.y - delta.height;
+            // INFO: If uncontrolled component, apply y position by resize to draggable.
+            if (!this.props.position) {
+                this.draggable.setState({ y: y });
+            }
+            y += offset.top;
+        }
+        if (this.props.onResize) {
+            if (typeof x === "undefined") {
+                x = this.getDraggablePosition().x + offset.left;
+            }
+            if (typeof y === "undefined") {
+                y = this.getDraggablePosition().y + offset.top;
+            }
+            this.props.onResize(e, direction, elementRef, delta, {
+                x: x,
+                y: y,
             });
-          }
         }
-      } else {
-        this.setState({
-          maxWidth: this.props.maxWidth,
-          maxHeight: this.props.maxHeight
-        });
-      }
-      if (this.props.onResizeStart) {
-        this.props.onResizeStart(e, dir, refToElement);
-      }
-    }
-  }, {
-    key: 'onResize',
-    value: function onResize(e, direction, refToResizableElement, delta) {
-      var x = void 0;
-      var y = void 0;
-      if (/left/i.test(direction)) {
-        x = this.state.original.x - delta.width;
-        this.draggable.setState({ x: x });
-      }
-      if (/top/i.test(direction)) {
-        y = this.state.original.y - delta.height;
-        this.draggable.setState({ y: y });
-      }
-      if (this.props.onResize) {
-        this.props.onResize(e, direction, refToResizableElement, delta, {
-          x: x || this.draggable.state.x,
-          y: y || this.draggable.state.y
-        });
-      }
-    }
-  }, {
-    key: 'onResizeStop',
-    value: function onResizeStop(e, direction, refToResizableElement, delta) {
-      var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(),
-          maxWidth = _getMaxSizesFromProps2.maxWidth,
-          maxHeight = _getMaxSizesFromProps2.maxHeight;
-
-      this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
-      if (this.props.onResizeStop) {
-        var _position = {
-          x: this.draggable.state.x,
-          y: this.draggable.state.y
-        };
-        this.props.onResizeStop(e, direction, refToResizableElement, delta, _position);
-      }
-    }
-  }, {
-    key: 'updateSize',
-    value: function updateSize(size) {
-      if (!this.resizable) return;
-      this.resizable.updateSize({ width: size.width, height: size.height });
-    }
-  }, {
-    key: 'updatePosition',
-    value: function updatePosition(position) {
-      this.draggable.setState(position);
-    }
-  }, {
-    key: 'getOffsetFromParent',
-    value: function getOffsetFromParent() {
-      var parent = this.resizable && this.resizable.parentNode;
-      if (!parent) {
+    };
+    Rnd.prototype.onResizeStop = function (e, direction, elementRef, delta) {
+        var _a = this.getMaxSizesFromProps(), maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
+        this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
+        if (this.props.onResizeStop) {
+            var position = this.getDraggablePosition();
+            this.props.onResizeStop(e, direction, elementRef, delta, position);
+        }
+    };
+    Rnd.prototype.updateSize = function (size) {
+        if (!this.resizable)
+            return;
+        this.resizable.updateSize({ width: size.width, height: size.height });
+    };
+    Rnd.prototype.updatePosition = function (position) {
+        this.draggable.setState(position);
+    };
+    Rnd.prototype.getOffsetFromParent = function () {
+        var parent = this.getParent();
+        if (!parent) {
+            return {
+                top: 0,
+                left: 0,
+            };
+        }
+        var parentRect = parent.getBoundingClientRect();
+        var parentLeft = parentRect.left;
+        var parentTop = parentRect.top;
+        var selfRect = this.getSelfElement().getBoundingClientRect();
+        var position = this.getDraggablePosition();
         return {
-          top: 0,
-          left: 0
+            left: selfRect.left - parentLeft - position.x,
+            top: selfRect.top - parentTop - position.y,
         };
-      }
-      var parentRect = parent.getBoundingClientRect();
-      var parentLeft = parentRect.left;
-      var parentTop = parentRect.top;
-      var selfRect = this.getSelfElement().getBoundingClientRect();
-      return {
-        left: selfRect.left - parentLeft - this.draggable.state.x,
-        top: selfRect.top - parentTop - this.draggable.state.y
-      };
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
+    };
+    Rnd.prototype.render = function () {
+        var _this = this;
+        var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: "normal" } : { cursor: "move" };
+        var innerStyle = __assign({}, resizableStyle, cursorStyle, this.props.style);
+        var _a = this.getOffsetFromParent(), left = _a.left, top = _a.top;
+        var position;
+        if (this.props.position) {
+            position = {
+                x: this.props.position.x - left,
+                y: this.props.position.y - top,
+            };
+        }
+        return (React.createElement(Draggable, { ref: function (c) {
+                if (c) {
+                    _this.draggable = c;
+                }
+            }, handle: this.props.dragHandleClassName, defaultPosition: this.props.default, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: this.props.dragAxis, disabled: this.props.disableDragging, grid: this.props.dragGrid, bounds: this.props.bounds ? this.state.bounds : undefined, position: position, enableUserSelectHack: this.props.enableUserSelectHack, cancel: this.props.cancel },
+            React.createElement(Resizable, __assign({}, this.props.extendsProps, { className: this.props.className, ref: function (c) {
+                    if (c) {
+                        _this.resizable = c;
+                    }
+                }, defaultSize: this.props.default, size: this.props.size, enable: this.props.enableResizing, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, style: innerStyle, minWidth: this.props.minWidth, minHeight: this.props.minHeight, maxWidth: this.state.maxWidth, maxHeight: this.state.maxHeight, grid: this.props.resizeGrid, handleWrapperClass: this.props.resizeHandleWrapperClass, handleWrapperStyle: this.props.resizeHandleWrapperStyle, lockAspectRatio: this.props.lockAspectRatio, lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, handleStyles: this.props.resizeHandleStyles, handleClasses: this.props.resizeHandleClasses }), this.props.children)));
+    };
+    Rnd.defaultProps = {
+        maxWidth: Number.MAX_SAFE_INTEGER,
+        maxHeight: Number.MAX_SAFE_INTEGER,
+        onResizeStart: function () { },
+        onResize: function () { },
+        onResizeStop: function () { },
+        onDragStart: function () { },
+        onDrag: function () { },
+        onDragStop: function () { },
+    };
+    return Rnd;
+}(React.Component));
 
-      var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
-      var innerStyle = _extends({}, resizableStyle, cursorStyle, this.props.style);
-
-      var _getOffsetFromParent2 = this.getOffsetFromParent(),
-          left = _getOffsetFromParent2.left,
-          top = _getOffsetFromParent2.top;
-
-      var position = void 0;
-      if (this.props.position) {
-        position = {
-          x: this.props.position.x - left,
-          y: this.props.position.y - top
-        };
-      }
-      return React.createElement(
-        Draggable,
-        {
-          ref: function ref(c) {
-            if (c) {
-              _this2.draggable = c;
-            }
-          },
-          handle: this.props.dragHandleClassName,
-          defaultPosition: this.props.default,
-          onStart: this.onDragStart,
-          onDrag: this.onDrag,
-          onStop: this.onDragStop,
-          axis: this.props.dragAxis,
-          disabled: this.props.disableDragging,
-          grid: this.props.dragGrid,
-          bounds: this.props.bounds ? this.state.bounds : undefined,
-          position: position,
-          enableUserSelectHack: this.props.enableUserSelectHack,
-          cancel: this.props.cancel
-        },
-        React.createElement(
-          Resizable,
-          _extends({}, this.props.extendsProps, {
-            className: this.props.className,
-            ref: function ref(c) {
-              if (c) {
-                _this2.resizable = c;
-              }
-            },
-            defaultSize: this.props.default,
-            size: this.props.size,
-            enable: this.props.enableResizing,
-            onResizeStart: this.onResizeStart,
-            onResize: this.onResize,
-            onResizeStop: this.onResizeStop,
-            style: innerStyle,
-            minWidth: this.props.minWidth,
-            minHeight: this.props.minHeight,
-            maxWidth: this.state.maxWidth,
-            maxHeight: this.state.maxHeight,
-            grid: this.props.resizeGrid,
-            handleWrapperClass: this.props.resizeHandleWrapperClass,
-            handleWrapperStyle: this.props.resizeHandleWrapperStyle,
-            lockAspectRatio: this.props.lockAspectRatio,
-            lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth,
-            lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight,
-            handleStyles: this.props.resizeHandleStyles,
-            handleClasses: this.props.resizeHandleClasses
-          }),
-          this.props.children
-        )
-      );
-    }
-  }]);
-  return Rnd;
-}(React.Component);
-
-Rnd.defaultProps = {
-  maxWidth: Number.MAX_SAFE_INTEGER,
-  maxHeight: Number.MAX_SAFE_INTEGER,
-  onResizeStart: function onResizeStart() {},
-  onResize: function onResize() {},
-  onResizeStop: function onResizeStop() {},
-  onDragStart: function onDragStart() {},
-  onDrag: function onDrag() {},
-  onDragStop: function onDragStop() {}
-};
-
-exports.default = Rnd;
-//# sourceMappingURL=index.es5.js.map
+module.exports = Rnd;

lib/index.js

@@ -5,410 +5,314 @@ import { createElement, Component } from 'react';
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
 
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
 
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
 
-var _extends = Object.assign || function (target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i];
+var extendStatics = Object.setPrototypeOf ||
+    ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+    function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
 
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        target[key] = source[key];
-      }
-    }
-  }
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
 
-  return target;
-};
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
+var __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+    return t;
 };
 
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
 var resizableStyle = {
-  width: 'auto',
-  height: 'auto',
-  display: 'inline-block',
-  position: 'absolute',
-  top: 0,
-  left: 0
+    width: "auto",
+    height: "auto",
+    display: "inline-block",
+    position: "absolute",
+    top: 0,
+    left: 0,
 };
-
-var Rnd = function (_React$Component) {
-  inherits(Rnd, _React$Component);
-
-  function Rnd(props) {
-    classCallCheck(this, Rnd);
-
-    var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
-
-    _this.state = {
-      original: {
-        x: 0,
-        y: 0
-      },
-      bounds: {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0
-      },
-      maxWidth: props.maxWidth,
-      maxHeight: props.maxHeight
-    };
-    _this.onResizeStart = _this.onResizeStart.bind(_this);
-    _this.onResize = _this.onResize.bind(_this);
-    _this.onResizeStop = _this.onResizeStop.bind(_this);
-    _this.onDragStart = _this.onDragStart.bind(_this);
-    _this.onDrag = _this.onDrag.bind(_this);
-    _this.onDragStop = _this.onDragStop.bind(_this);
-    _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this);
-    return _this;
-  }
-
-  createClass(Rnd, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      if (this.props.default) {
-        var _getOffsetFromParent = this.getOffsetFromParent(),
-            _left = _getOffsetFromParent.left,
-            _top = _getOffsetFromParent.top;
-
-        var _draggable$state = this.draggable.state,
-            _x = _draggable$state.x,
-            _y = _draggable$state.y;
-
+var Rnd = /** @class */ (function (_super) {
+    __extends(Rnd, _super);
+    function Rnd(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            original: {
+                x: 0,
+                y: 0,
+            },
+            bounds: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+            },
+            maxWidth: props.maxWidth,
+            maxHeight: props.maxHeight,
+        };
+        _this.onResizeStart = _this.onResizeStart.bind(_this);
+        _this.onResize = _this.onResize.bind(_this);
+        _this.onResizeStop = _this.onResizeStop.bind(_this);
+        _this.onDragStart = _this.onDragStart.bind(_this);
+        _this.onDrag = _this.onDrag.bind(_this);
+        _this.onDragStop = _this.onDragStop.bind(_this);
+        _this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this);
+        return _this;
+    }
+    Rnd.prototype.componentDidMount = function () {
+        var _a = this.getOffsetFromParent(), left = _a.left, top = _a.top;
+        var _b = this.getDraggablePosition(), x = _b.x, y = _b.y;
         this.draggable.setState({
-          x: _x - _left,
-          y: _y - _top
+            x: x - left,
+            y: y - top,
         });
-      }
-    }
-  }, {
-    key: 'getParentSize',
-    value: function getParentSize() {
-      return this.resizable.getParentSize();
-    }
-  }, {
-    key: 'getMaxSizesFromProps',
-    value: function getMaxSizesFromProps() {
-      var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;
-      var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;
-      return { maxWidth: maxWidth, maxHeight: maxHeight };
-    }
-  }, {
-    key: 'getSelfElement',
-    value: function getSelfElement() {
-      return this.resizable && this.resizable.resizable;
-    }
-  }, {
-    key: 'onDragStart',
-    value: function onDragStart(e, data) {
-      if (this.props.onDragStart) {
-        this.props.onDragStart(e, data);
-      }
-      if (!this.props.bounds) return;
-      var parent = this.resizable && this.resizable.parentNode;
-      var boundary = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
-      if (!(boundary instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
-        return;
-      }
-      var boundaryRect = boundary.getBoundingClientRect();
-      var boundaryLeft = boundaryRect.left;
-      var boundaryTop = boundaryRect.top;
-      var parentRect = parent.getBoundingClientRect();
-      var parentLeft = parentRect.left;
-      var parentTop = parentRect.top;
-      var left = boundaryLeft - parentLeft;
-      var top = boundaryTop - parentTop;
-      if (!this.resizable) return;
-      var offset = this.getOffsetFromParent();
-      this.setState({
-        bounds: {
-          top: top - offset.top,
-          right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left,
-          bottom: top + (boundary.offsetHeight - this.resizable.size.height) - offset.top,
-          left: left - offset.left
+        // HACK: Apply position adjustment
+        this.forceUpdate();
+    };
+    // HACK: To get `react-draggable` state x and y.
+    Rnd.prototype.getDraggablePosition = function () {
+        var _a = this.draggable.state, x = _a.x, y = _a.y;
+        return { x: x, y: y };
+    };
+    Rnd.prototype.getParent = function () {
+        return this.resizable && this.resizable.parentNode;
+    };
+    Rnd.prototype.getParentSize = function () {
+        return this.resizable.getParentSize();
+    };
+    Rnd.prototype.getMaxSizesFromProps = function () {
+        var maxWidth = typeof this.props.maxWidth === "undefined" ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;
+        var maxHeight = typeof this.props.maxHeight === "undefined" ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;
+        return { maxWidth: maxWidth, maxHeight: maxHeight };
+    };
+    Rnd.prototype.getSelfElement = function () {
+        return this.resizable && this.resizable.resizable;
+    };
+    Rnd.prototype.onDragStart = function (e, data) {
+        if (this.props.onDragStart) {
+            this.props.onDragStart(e, data);
         }
-      });
-    }
-  }, {
-    key: 'onDrag',
-    value: function onDrag(e, data) {
-      if (this.props.onDrag) {
-        this.props.onDrag(e, data);
-      }
-    }
-  }, {
-    key: 'onDragStop',
-    value: function onDragStop(e, data) {
-      if (this.props.onDragStop) {
-        this.props.onDragStop(e, data);
-      }
-    }
-  }, {
-    key: 'onResizeStart',
-    value: function onResizeStart(e, dir, refToElement) {
-      e.stopPropagation();
-      this.setState({
-        original: { x: this.draggable.state.x, y: this.draggable.state.y }
-      });
-      if (this.props.bounds) {
-        var parent = this.resizable && this.resizable.parentNode;
-        var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
-        var self = this.getSelfElement();
-        if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {
-          var _getMaxSizesFromProps = this.getMaxSizesFromProps(),
-              _maxWidth = _getMaxSizesFromProps.maxWidth,
-              _maxHeight = _getMaxSizesFromProps.maxHeight;
-
-          var parentSize = this.getParentSize();
-          if (_maxWidth && typeof _maxWidth === 'string') {
-            if (_maxWidth.endsWith('%')) {
-              var ratio = Number(_maxWidth.replace('%', '')) / 100;
-              _maxWidth = parentSize.width * ratio;
-            } else if (_maxWidth.endsWith('px')) {
-              _maxWidth = Number(_maxWidth.replace('px', ''));
+        if (!this.props.bounds)
+            return;
+        var parent = this.getParent();
+        var boundary = this.props.bounds === "parent" ? parent : document.querySelector(this.props.bounds);
+        if (!(boundary instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
+            return;
+        }
+        var boundaryRect = boundary.getBoundingClientRect();
+        var boundaryLeft = boundaryRect.left;
+        var boundaryTop = boundaryRect.top;
+        var parentRect = parent.getBoundingClientRect();
+        var parentLeft = parentRect.left;
+        var parentTop = parentRect.top;
+        var left = boundaryLeft - parentLeft;
+        var top = boundaryTop - parentTop;
+        if (!this.resizable)
+            return;
+        var offset = this.getOffsetFromParent();
+        this.setState({
+            bounds: {
+                top: top - offset.top,
+                right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left,
+                bottom: top + (boundary.offsetHeight - this.resizable.size.height) - offset.top,
+                left: left - offset.left,
+            },
+        });
+    };
+    Rnd.prototype.onDrag = function (e, data) {
+        if (this.props.onDrag) {
+            var offset = this.getOffsetFromParent();
+            this.props.onDrag(e, __assign({}, data, { x: data.x - offset.left, y: data.y - offset.top }));
+        }
+    };
+    Rnd.prototype.onDragStop = function (e, data) {
+        if (this.props.onDragStop) {
+            var _a = this.getOffsetFromParent(), left = _a.left, top_1 = _a.top;
+            this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_1 }));
+        }
+    };
+    Rnd.prototype.onResizeStart = function (e, dir, elementRef) {
+        e.stopPropagation();
+        this.setState({
+            original: this.getDraggablePosition(),
+        });
+        if (this.props.bounds) {
+            var parent_1 = this.getParent();
+            var target = this.props.bounds === "parent" ? parent_1 : document.querySelector(this.props.bounds);
+            var self_1 = this.getSelfElement();
+            if (self_1 instanceof Element && target instanceof HTMLElement && parent_1 instanceof HTMLElement) {
+                var _a = this.getMaxSizesFromProps(), maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
+                var parentSize = this.getParentSize();
+                if (maxWidth && typeof maxWidth === "string") {
+                    if (maxWidth.endsWith("%")) {
+                        var ratio = Number(maxWidth.replace("%", "")) / 100;
+                        maxWidth = parentSize.width * ratio;
+                    }
+                    else if (maxWidth.endsWith("px")) {
+                        maxWidth = Number(maxWidth.replace("px", ""));
+                    }
+                }
+                if (maxHeight && typeof maxHeight === "string") {
+                    if (maxHeight.endsWith("%")) {
+                        var ratio = Number(maxHeight.replace("%", "")) / 100;
+                        maxHeight = parentSize.width * ratio;
+                    }
+                    else if (maxHeight.endsWith("px")) {
+                        maxHeight = Number(maxHeight.replace("px", ""));
+                    }
+                }
+                var selfRect = self_1.getBoundingClientRect();
+                var selfLeft = selfRect.left;
+                var selfTop = selfRect.top;
+                var targetRect = target.getBoundingClientRect();
+                var targetLeft = targetRect.left;
+                var targetTop = targetRect.top;
+                if (/left/i.test(dir) && this.resizable) {
+                    var max = selfLeft - targetLeft + this.resizable.size.width;
+                    this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
+                }
+                if (/right/i.test(dir)) {
+                    var max = target.offsetWidth + (targetLeft - selfLeft);
+                    this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
+                }
+                if (/top/i.test(dir) && this.resizable) {
+                    var max = selfTop - targetTop + this.resizable.size.height;
+                    this.setState({
+                        maxHeight: max > Number(maxHeight) ? maxHeight : max,
+                    });
+                }
+                if (/bottom/i.test(dir)) {
+                    var max = target.offsetHeight + (targetTop - selfTop);
+                    this.setState({
+                        maxHeight: max > Number(maxHeight) ? maxHeight : max,
+                    });
+                }
             }
-          }
-          if (_maxHeight && typeof _maxHeight === 'string') {
-            if (_maxHeight.endsWith('%')) {
-              var _ratio = Number(_maxHeight.replace('%', '')) / 100;
-              _maxHeight = parentSize.width * _ratio;
-            } else if (_maxHeight.endsWith('px')) {
-              _maxHeight = Number(_maxHeight.replace('px', ''));
-            }
-          }
-          var selfRect = self.getBoundingClientRect();
-          var selfLeft = selfRect.left;
-          var selfTop = selfRect.top;
-          var targetRect = target.getBoundingClientRect();
-          var targetLeft = targetRect.left;
-          var targetTop = targetRect.top;
-          if (/left/i.test(dir) && this.resizable) {
-            var max = selfLeft - targetLeft + this.resizable.size.width;
-            this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max });
-          }
-          if (/right/i.test(dir)) {
-            var _max = target.offsetWidth + (targetLeft - selfLeft);
-            this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max });
-          }
-          if (/top/i.test(dir) && this.resizable) {
-            var _max2 = selfTop - targetTop + this.resizable.size.height;
+        }
+        else {
             this.setState({
-              maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2
+                maxWidth: this.props.maxWidth,
+                maxHeight: this.props.maxHeight,
             });
-          }
-          if (/bottom/i.test(dir)) {
-            var _max3 = target.offsetHeight + (targetTop - selfTop);
-            this.setState({
-              maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3
+        }
+        if (this.props.onResizeStart) {
+            this.props.onResizeStart(e, dir, elementRef);
+        }
+    };
+    Rnd.prototype.onResize = function (e, direction, elementRef, delta) {
+        var x;
+        var y;
+        var offset = this.getOffsetFromParent();
+        if (/left/i.test(direction)) {
+            x = this.state.original.x - delta.width;
+            // INFO: If uncontrolled component, apply x position by resize to draggable.
+            if (!this.props.position) {
+                this.draggable.setState({ x: x });
+            }
+            x += offset.left;
+        }
+        if (/top/i.test(direction)) {
+            y = this.state.original.y - delta.height;
+            // INFO: If uncontrolled component, apply y position by resize to draggable.
+            if (!this.props.position) {
+                this.draggable.setState({ y: y });
+            }
+            y += offset.top;
+        }
+        if (this.props.onResize) {
+            if (typeof x === "undefined") {
+                x = this.getDraggablePosition().x + offset.left;
+            }
+            if (typeof y === "undefined") {
+                y = this.getDraggablePosition().y + offset.top;
+            }
+            this.props.onResize(e, direction, elementRef, delta, {
+                x: x,
+                y: y,
             });
-          }
         }
-      } else {
-        this.setState({
-          maxWidth: this.props.maxWidth,
-          maxHeight: this.props.maxHeight
-        });
-      }
-      if (this.props.onResizeStart) {
-        this.props.onResizeStart(e, dir, refToElement);
-      }
-    }
-  }, {
-    key: 'onResize',
-    value: function onResize(e, direction, refToResizableElement, delta) {
-      var x = void 0;
-      var y = void 0;
-      if (/left/i.test(direction)) {
-        x = this.state.original.x - delta.width;
-        this.draggable.setState({ x: x });
-      }
-      if (/top/i.test(direction)) {
-        y = this.state.original.y - delta.height;
-        this.draggable.setState({ y: y });
-      }
-      if (this.props.onResize) {
-        this.props.onResize(e, direction, refToResizableElement, delta, {
-          x: x || this.draggable.state.x,
-          y: y || this.draggable.state.y
-        });
-      }
-    }
-  }, {
-    key: 'onResizeStop',
-    value: function onResizeStop(e, direction, refToResizableElement, delta) {
-      var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(),
-          maxWidth = _getMaxSizesFromProps2.maxWidth,
-          maxHeight = _getMaxSizesFromProps2.maxHeight;
-
-      this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
-      if (this.props.onResizeStop) {
-        var _position = {
-          x: this.draggable.state.x,
-          y: this.draggable.state.y
-        };
-        this.props.onResizeStop(e, direction, refToResizableElement, delta, _position);
-      }
-    }
-  }, {
-    key: 'updateSize',
-    value: function updateSize(size) {
-      if (!this.resizable) return;
-      this.resizable.updateSize({ width: size.width, height: size.height });
-    }
-  }, {
-    key: 'updatePosition',
-    value: function updatePosition(position) {
-      this.draggable.setState(position);
-    }
-  }, {
-    key: 'getOffsetFromParent',
-    value: function getOffsetFromParent() {
-      var parent = this.resizable && this.resizable.parentNode;
-      if (!parent) {
+    };
+    Rnd.prototype.onResizeStop = function (e, direction, elementRef, delta) {
+        var _a = this.getMaxSizesFromProps(), maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
+        this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
+        if (this.props.onResizeStop) {
+            var position = this.getDraggablePosition();
+            this.props.onResizeStop(e, direction, elementRef, delta, position);
+        }
+    };
+    Rnd.prototype.updateSize = function (size) {
+        if (!this.resizable)
+            return;
+        this.resizable.updateSize({ width: size.width, height: size.height });
+    };
+    Rnd.prototype.updatePosition = function (position) {
+        this.draggable.setState(position);
+    };
+    Rnd.prototype.getOffsetFromParent = function () {
+        var parent = this.getParent();
+        if (!parent) {
+            return {
+                top: 0,
+                left: 0,
+            };
+        }
+        var parentRect = parent.getBoundingClientRect();
+        var parentLeft = parentRect.left;
+        var parentTop = parentRect.top;
+        var selfRect = this.getSelfElement().getBoundingClientRect();
+        var position = this.getDraggablePosition();
         return {
-          top: 0,
-          left: 0
+            left: selfRect.left - parentLeft - position.x,
+            top: selfRect.top - parentTop - position.y,
         };
-      }
-      var parentRect = parent.getBoundingClientRect();
-      var parentLeft = parentRect.left;
-      var parentTop = parentRect.top;
-      var selfRect = this.getSelfElement().getBoundingClientRect();
-      return {
-        left: selfRect.left - parentLeft - this.draggable.state.x,
-        top: selfRect.top - parentTop - this.draggable.state.y
-      };
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
+    };
+    Rnd.prototype.render = function () {
+        var _this = this;
+        var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: "normal" } : { cursor: "move" };
+        var innerStyle = __assign({}, resizableStyle, cursorStyle, this.props.style);
+        var _a = this.getOffsetFromParent(), left = _a.left, top = _a.top;
+        var position;
+        if (this.props.position) {
+            position = {
+                x: this.props.position.x - left,
+                y: this.props.position.y - top,
+            };
+        }
+        return (createElement(Draggable, { ref: function (c) {
+                if (c) {
+                    _this.draggable = c;
+                }
+            }, handle: this.props.dragHandleClassName, defaultPosition: this.props.default, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: this.props.dragAxis, disabled: this.props.disableDragging, grid: this.props.dragGrid, bounds: this.props.bounds ? this.state.bounds : undefined, position: position, enableUserSelectHack: this.props.enableUserSelectHack, cancel: this.props.cancel },
+            createElement(Resizable, __assign({}, this.props.extendsProps, { className: this.props.className, ref: function (c) {
+                    if (c) {
+                        _this.resizable = c;
+                    }
+                }, defaultSize: this.props.default, size: this.props.size, enable: this.props.enableResizing, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, style: innerStyle, minWidth: this.props.minWidth, minHeight: this.props.minHeight, maxWidth: this.state.maxWidth, maxHeight: this.state.maxHeight, grid: this.props.resizeGrid, handleWrapperClass: this.props.resizeHandleWrapperClass, handleWrapperStyle: this.props.resizeHandleWrapperStyle, lockAspectRatio: this.props.lockAspectRatio, lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, handleStyles: this.props.resizeHandleStyles, handleClasses: this.props.resizeHandleClasses }), this.props.children)));
+    };
+    Rnd.defaultProps = {
+        maxWidth: Number.MAX_SAFE_INTEGER,
+        maxHeight: Number.MAX_SAFE_INTEGER,
+        onResizeStart: function () { },
+        onResize: function () { },
+        onResizeStop: function () { },
+        onDragStart: function () { },
+        onDrag: function () { },
+        onDragStop: function () { },
+    };
+    return Rnd;
+}(Component));
 
-      var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
-      var innerStyle = _extends({}, resizableStyle, cursorStyle, this.props.style);
-
-      var _getOffsetFromParent2 = this.getOffsetFromParent(),
-          left = _getOffsetFromParent2.left,
-          top = _getOffsetFromParent2.top;
-
-      var position = void 0;
-      if (this.props.position) {
-        position = {
-          x: this.props.position.x - left,
-          y: this.props.position.y - top
-        };
-      }
-      return createElement(
-        Draggable,
-        {
-          ref: function ref(c) {
-            if (c) {
-              _this2.draggable = c;
-            }
-          },
-          handle: this.props.dragHandleClassName,
-          defaultPosition: this.props.default,
-          onStart: this.onDragStart,
-          onDrag: this.onDrag,
-          onStop: this.onDragStop,
-          axis: this.props.dragAxis,
-          disabled: this.props.disableDragging,
-          grid: this.props.dragGrid,
-          bounds: this.props.bounds ? this.state.bounds : undefined,
-          position: position,
-          enableUserSelectHack: this.props.enableUserSelectHack,
-          cancel: this.props.cancel
-        },
-        createElement(
-          Resizable,
-          _extends({}, this.props.extendsProps, {
-            className: this.props.className,
-            ref: function ref(c) {
-              if (c) {
-                _this2.resizable = c;
-              }
-            },
-            defaultSize: this.props.default,
-            size: this.props.size,
-            enable: this.props.enableResizing,
-            onResizeStart: this.onResizeStart,
-            onResize: this.onResize,
-            onResizeStop: this.onResizeStop,
-            style: innerStyle,
-            minWidth: this.props.minWidth,
-            minHeight: this.props.minHeight,
-            maxWidth: this.state.maxWidth,
-            maxHeight: this.state.maxHeight,
-            grid: this.props.resizeGrid,
-            handleWrapperClass: this.props.resizeHandleWrapperClass,
-            handleWrapperStyle: this.props.resizeHandleWrapperStyle,
-            lockAspectRatio: this.props.lockAspectRatio,
-            lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth,
-            lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight,
-            handleStyles: this.props.resizeHandleStyles,
-            handleClasses: this.props.resizeHandleClasses
-          }),
-          this.props.children
-        )
-      );
-    }
-  }]);
-  return Rnd;
-}(Component);
-
-Rnd.defaultProps = {
-  maxWidth: Number.MAX_SAFE_INTEGER,
-  maxHeight: Number.MAX_SAFE_INTEGER,
-  onResizeStart: function onResizeStart() {},
-  onResize: function onResize() {},
-  onResizeStop: function onResizeStop() {},
-  onDragStart: function onDragStart() {},
-  onDrag: function onDrag() {},
-  onDragStop: function onDragStop() {}
-};
-
 export default Rnd;
-//# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-rnd",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "description": "",
@@ -9,2 +9,3 @@ "title": "react-rnd",
   "jsnext:main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "keywords": [
@@ -18,16 +19,15 @@ "react",
   "scripts": {
-    "lint": "eslint src",
+    "lint": "tslint -c tslint.json 'src/**/*.tsx'",
     "flow": "flow",
+    "tsc": "tsc",
     "build:prod:main": "rollup -c scripts/prod.js",
     "build:prod:es5": "rollup -c scripts/prod.es5.js",
-    "build:prod:umd": "rollup -c scripts/prod.umd.js",
-    "build": "npm-run-all --parallel build:prod:*",
-    "test": "NODE_ENV='test' avaron src/index.test.js --renderer",
+    "build": "npm-run-all --serial build:prod:* copy:flow",
+    "test": "NODE_ENV='test' tsc && avaron lib/index.test.js --renderer",
+    "copy:flow": "cpy src/index.js.flow lib && cpy src/index.js.flow lib --rename index.es5.js.flow",
     "test:ci": "npm run flow && npm run build",
-    "flow-copy": "flow-copy-source -v src lib && cp lib/index.js.flow lib/index.es5.js.flow ",
-    "prepublish": "npm run build && npm run flow-copy",
-    "format": "prettier-eslint --write --single-quote --semi=true \"src/**/*.js\" ",
+    "prepublish": "npm run build",
     "storybook": "start-storybook -p 6016",
-    "build-storybook": "build-storybook",
-    "deploy": "npm run build-storybook && gh-pages -d storybook-static"
+    "build-storybook": "build-storybook -o docs/stories",
+    "deploy": "npm run build-storybook && gh-pages -d docs"
   },
@@ -48,30 +48,17 @@ "repository": {
     "@storybook/react": "3.4.8",
+    "@types/enzyme": "3.1.11",
+    "@types/enzyme-adapter-react-16": "1.0.2",
+    "@types/react": "16.4.1",
+    "@types/react-dom": "16.0.6",
+    "@types/sinon": "5.0.1",
+    "@types/storybook__addon-actions": "3.0.3",
+    "@types/storybook__react": "3.0.7",
     "avaron": "0.2.0",
-    "babel-eslint": "8.2.3",
-    "babel-plugin-external-helpers": "6.22.0",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-object-assign": "6.22.0",
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-polyfill": "6.26.0",
-    "babel-preset-env": "1.7.0",
-    "babel-preset-es2015": "6.24.1",
-    "babel-preset-flow": "6.23.0",
-    "babel-preset-react": "6.24.1",
-    "babel-register": "6.26.0",
+    "cpy-cli": "2.0.0",
     "enzyme": "3.3.0",
     "enzyme-adapter-react-16": "1.1.1",
-    "eslint": "4.19.1",
-    "eslint-config-airbnb": "16.1.0",
-    "eslint-plugin-flowtype": "2.49.3",
-    "eslint-plugin-import": "2.12.0",
-    "eslint-plugin-jsx-a11y": "6.0.3",
-    "eslint-plugin-react": "7.9.1",
-    "flow-bin": "0.75.0",
-    "flow-copy-source": "1.3.0",
-    "flow-typed": "2.4.0",
     "gh-pages": "1.2.0",
+    "light-ts-loader": "1.1.2",
     "npm-run-all": "4.1.3",
     "prettier": "1.13.5",
-    "prettier-eslint": "8.8.1",
-    "prettier-eslint-cli": "4.7.1",
     "react": "16.4.1",
@@ -86,4 +73,10 @@ "react-dom": "16.4.1",
     "rollup-plugin-replace": "2.0.0",
+    "rollup-plugin-typescript2": "0.15.0",
     "rollup-watch": "4.3.1",
-    "sinon": "6.0.0"
+    "sinon": "6.0.0",
+    "tslint": "^5.10.0",
+    "tslint-eslint-rules": "^5.3.1",
+    "tslint-plugin-prettier": "^1.3.0",
+    "tslint-react": "^3.6.0",
+    "typescript": "2.9.2"
   },
@@ -94,13 +87,9 @@ "files": [
   "avaron": {
-    "babel": "inherit",
-    "require": [
-      "babel-polyfill",
-      "babel-register"
-    ],
     "fixture": "./fixture.html"
   },
   "dependencies": {
-    "re-resizable": "4.5.1",
-    "react-draggable": "^3.0.5"
+    "re-resizable": "4.6.1",
+    "react-draggable": "3.0.5",
+    "tslib": "1.9.3"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

35

decreased by-16.67%

Lines of code

1579

increased by34.61%

Worsened metrics

Total package byte prevSize

97828

decreased by-49.96%

Dependency count

3

increased by50%

Number of package files

10

decreased by-23.08%

Number of low license alerts

1

increased byInfinity%

Dependency changes

• + Addedtslib@1.9.3

• + Addedre-resizable@4.6.1(transitive)

• + Addedreact-draggable@3.0.5(transitive)

• + Addedtslib@1.9.3(transitive)

• - Removedre-resizable@4.5.1(transitive)

• - Removedreact-draggable@3.3.2(transitive)

• Updatedre-resizable@4.6.1

• Updatedreact-draggable@3.0.5