text: 'use strict';
  
  Object.defineProperty(exports, '__esModule', { value: true });
  
  function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
  
  var React = require('react');
  var memoize = _interopDefault(require('fast-memoize'));
  
  /*! *****************************************************************************
  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
  
  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.
  
  See the Apache Version 2.0 License for specific language governing permissions
  and limitations under the License.
  ***************************************************************************** */
  /* global Reflect, Promise */
  
  var extendStatics = function(d, b) {
      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]; };
      return extendStatics(d, b);
  };
  
  function __extends(d, b) {
      extendStatics(d, b);
      function __() { this.constructor = d; }
      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  }
  
  var __assign = function() {
      __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];
          }
          return t;
      };
      return __assign.apply(this, arguments);
  };
  
  var styles = {
      top: {
          width: '100%',
          height: '10px',
          top: '-5px',
          left: '0px',
          cursor: 'row-resize',
      },
      right: {
          width: '10px',
          height: '100%',
          top: '0px',
          right: '-5px',
          cursor: 'col-resize',
      },
      bottom: {
          width: '100%',
          height: '10px',
          bottom: '-5px',
          left: '0px',
          cursor: 'row-resize',
      },
      left: {
          width: '10px',
          height: '100%',
          top: '0px',
          left: '-5px',
          cursor: 'col-resize',
      },
      topRight: {
          width: '20px',
          height: '20px',
          position: 'absolute',
          right: '-10px',
          top: '-10px',
          cursor: 'ne-resize',
      },
      bottomRight: {
          width: '20px',
          height: '20px',
          position: 'absolute',
          right: '-10px',
          bottom: '-10px',
          cursor: 'se-resize',
      },
      bottomLeft: {
          width: '20px',
          height: '20px',
          position: 'absolute',
          left: '-10px',
          bottom: '-10px',
          cursor: 'sw-resize',
      },
      topLeft: {
          width: '20px',
          height: '20px',
          position: 'absolute',
          left: '-10px',
          top: '-10px',
          cursor: 'nw-resize',
      },
  };
  function Resizer(props) {
      return (React.createElement("div", { className: props.className || '', style: __assign({ position: 'absolute', userSelect: 'none' }, styles[props.direction], (props.replaceStyles || {})), onMouseDown: function (e) {
              props.onResizeStart(e, props.direction);
          }, onTouchStart: function (e) {
              props.onResizeStart(e, props.direction);
          } }, props.children));
  }
  
  var DEFAULT_SIZE = {
      width: 'auto',
      height: 'auto',
  };
  var clamp = memoize(function (n, min, max) { return Math.max(Math.min(n, max), min); });
  var snap = memoize(function (n, size) { return Math.round(n / size) * size; });
  var hasDirection = memoize(function (dir, target) { return new RegExp(dir, 'i').test(target); });
  var findClosestSnap = memoize(function (n, snapArray, snapGap) {
      if (snapGap === void 0) { snapGap = 0; }
      var closestGapIndex = snapArray.reduce(function (prev, curr, index) { return (Math.abs(curr - n) < Math.abs(snapArray[prev] - n) ? index : prev); }, 0);
      var gap = Math.abs(snapArray[closestGapIndex] - n);
      return snapGap === 0 || gap < snapGap ? snapArray[closestGapIndex] : n;
  });
  var endsWith = memoize(function (str, searchStr) {
      return str.substr(str.length - searchStr.length, searchStr.length) === searchStr;
  });
  var getStringSize = memoize(function (n) {
      n = n.toString();
      if (n === 'auto') {
          return n;
      }
      if (endsWith(n, 'px')) {
          return n;
      }
      if (endsWith(n, '%')) {
          return n;
      }
      if (endsWith(n, 'vh')) {
          return n;
      }
      if (endsWith(n, 'vw')) {
          return n;
      }
      if (endsWith(n, 'vmax')) {
          return n;
      }
      if (endsWith(n, 'vmin')) {
          return n;
      }
      return n + "px";
  });
  var calculateNewMax = memoize(function (parentSize, maxWidth, maxHeight, minWidth, minHeight) {
      if (maxWidth && typeof maxWidth === 'string' && endsWith(maxWidth, '%')) {
          var ratio = Number(maxWidth.replace('%', '')) / 100;
          maxWidth = parentSize.width * ratio;
      }
      if (maxHeight && typeof maxHeight === 'string' && endsWith(maxHeight, '%')) {
          var ratio = Number(maxHeight.replace('%', '')) / 100;
          maxHeight = parentSize.height * ratio;
      }
      if (minWidth && typeof minWidth === 'string' && endsWith(minWidth, '%')) {
          var ratio = Number(minWidth.replace('%', '')) / 100;
          minWidth = parentSize.width * ratio;
      }
      if (minHeight && typeof minHeight === 'string' && endsWith(minHeight, '%')) {
          var ratio = Number(minHeight.replace('%', '')) / 100;
          minHeight = parentSize.height * ratio;
      }
      return {
          maxWidth: typeof maxWidth === 'undefined' ? undefined : Number(maxWidth),
          maxHeight: typeof maxHeight === 'undefined' ? undefined : Number(maxHeight),
          minWidth: typeof minWidth === 'undefined' ? undefined : Number(minWidth),
          minHeight: typeof minHeight === 'undefined' ? undefined : Number(minHeight),
      };
  });
  var definedProps = [
      'style',
      'className',
      'grid',
      'snap',
      'bounds',
      'size',
      'defaultSize',
      'minWidth',
      'minHeight',
      'maxWidth',
      'maxHeight',
      'lockAspectRatio',
      'lockAspectRatioExtraWidth',
      'lockAspectRatioExtraHeight',
      'enable',
      'handleStyles',
      'handleClasses',
      'handleWrapperStyle',
      'handleWrapperClass',
      'children',
      'onResizeStart',
      'onResize',
      'onResizeStop',
      'handleComponent',
      'scale',
      'resizeRatio',
      'snapGap',
  ];
  // HACK: This class is used to calculate % size.
  var baseClassName = '__resizable_base__';
  var Resizable = /** @class */ (function (_super) {
      __extends(Resizable, _super);
      function Resizable(props) {
          var _this = _super.call(this, props) || this;
          _this.ratio = 1;
          _this.resizable = null;
          _this.extendsProps = {};
          // For parent boundary
          _this.parentLeft = 0;
          _this.parentTop = 0;
          // For boundary
          _this.resizableLeft = 0;
          _this.resizableTop = 0;
          // For target boundary
          _this.targetLeft = 0;
          _this.targetTop = 0;
          _this.state = {
              isResizing: false,
              resizeCursor: 'auto',
              width: typeof (_this.propsSize && _this.propsSize.width) === 'undefined'
                  ? 'auto'
                  : _this.propsSize && _this.propsSize.width,
              height: typeof (_this.propsSize && _this.propsSize.height) === 'undefined'
                  ? 'auto'
                  : _this.propsSize && _this.propsSize.height,
              direction: 'right',
              original: {
                  x: 0,
                  y: 0,
                  width: 0,
                  height: 0,
              },
          };
          _this.updateExtendsProps(props);
          _this.onResizeStart = _this.onResizeStart.bind(_this);
          _this.onMouseMove = _this.onMouseMove.bind(_this);
          _this.onMouseUp = _this.onMouseUp.bind(_this);
          if (typeof window !== 'undefined') {
              window.addEventListener('mouseup', _this.onMouseUp);
              window.addEventListener('mousemove', _this.onMouseMove);
              window.addEventListener('mouseleave', _this.onMouseUp);
              window.addEventListener('touchmove', _this.onMouseMove);
              window.addEventListener('touchend', _this.onMouseUp);
          }
          return _this;
      }
      Object.defineProperty(Resizable.prototype, "parentNode", {
          get: function () {
              if (!this.resizable) {
                  return null;
              }
              return this.resizable.parentNode;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(Resizable.prototype, "propsSize", {
          get: function () {
              return this.props.size || this.props.defaultSize || DEFAULT_SIZE;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(Resizable.prototype, "base", {
          get: function () {
              var parent = this.parentNode;
              if (!parent) {
                  return undefined;
              }
              var children = [].slice.call(parent.children);
              for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
                  var n = children_1[_i];
                  if (n instanceof HTMLElement) {
                      if (n.classList.contains(baseClassName)) {
                          return n;
                      }
                  }
              }
              return undefined;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(Resizable.prototype, "size", {
          get: function () {
              var width = 0;
              var height = 0;
              if (typeof window !== 'undefined' && this.resizable) {
                  var orgWidth = this.resizable.offsetWidth;
                  var orgHeight = this.resizable.offsetHeight;
                  // HACK: Set position `relative` to get parent size.
                  //       This is because when re-resizable set `absolute`, I can not get base width correctly.
                  var orgPosition = this.resizable.style.position;
                  if (orgPosition !== 'relative') {
                      this.resizable.style.position = 'relative';
                  }
                  // INFO: Use original width or height if set auto.
                  width = this.resizable.style.width !== 'auto' ? this.resizable.offsetWidth : orgWidth;
                  height = this.resizable.style.height !== 'auto' ? this.resizable.offsetHeight : orgHeight;
                  // Restore original position
                  this.resizable.style.position = orgPosition;
              }
              return { width: width, height: height };
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(Resizable.prototype, "sizeStyle", {
          get: function () {
              var _this = this;
              var size = this.props.size;
              var getSize = function (key) {
                  if (typeof _this.state[key] === 'undefined' || _this.state[key] === 'auto') {
                      return 'auto';
                  }
                  if (_this.propsSize && _this.propsSize[key] && endsWith(_this.propsSize[key].toString(), '%')) {
                      if (endsWith(_this.state[key].toString(), '%')) {
                          return _this.state[key].toString();
                      }
                      var parentSize = _this.getParentSize();
                      var value = Number(_this.state[key].toString().replace('px', ''));
                      var percent = (value / parentSize[key]) * 100;
                      return percent + "%";
                  }
                  return getStringSize(_this.state[key]);
              };
              var width = size && typeof size.width !== 'undefined' && !this.state.isResizing
                  ? getStringSize(size.width)
                  : getSize('width');
              var height = size && typeof size.height !== 'undefined' && !this.state.isResizing
                  ? getStringSize(size.height)
                  : getSize('height');
              return { width: width, height: height };
          },
          enumerable: true,
          configurable: true
      });
      Resizable.prototype.updateExtendsProps = function (props) {
          this.extendsProps = Object.keys(props).reduce(function (acc, key) {
              if (definedProps.indexOf(key) !== -1) {
                  return acc;
              }
              acc[key] = props[key];
              return acc;
          }, {});
      };
      Resizable.prototype.getParentSize = function () {
          if (!this.base || !this.parentNode) {
              return { width: window.innerWidth, height: window.innerHeight };
          }
          // INFO: To calculate parent width with flex layout
          var wrapChanged = false;
          var wrap = this.parentNode.style.flexWrap;
          var minWidth = this.base.style.minWidth;
          if (wrap !== 'wrap') {
              wrapChanged = true;
              this.parentNode.style.flexWrap = 'wrap';
              // HACK: Use relative to get parent padding size
          }
          this.base.style.position = 'relative';
          this.base.style.minWidth = '100%';
          var size = {
              width: this.base.offsetWidth,
              height: this.base.offsetHeight,
          };
          this.base.style.position = 'absolute';
          if (wrapChanged) {
              this.parentNode.style.flexWrap = wrap;
          }
          this.base.style.minWidth = minWidth;
          return size;
      };
      Resizable.prototype.componentDidMount = function () {
          this.setState({
              width: this.state.width || this.size.width,
              height: this.state.height || this.size.height,
          });
          var parent = this.parentNode;
          if (!(parent instanceof HTMLElement)) {
              return;
          }
          if (this.base) {
              return;
          }
          var element = document.createElement('div');
          element.style.width = '100%';
          element.style.height = '100%';
          element.style.position = 'absolute';
          element.style.transform = 'scale(0, 0)';
          element.style.left = '0';
          element.style.flex = '0';
          if (element.classList) {
              element.classList.add(baseClassName);
          }
          else {
              element.className += baseClassName;
          }
          parent.appendChild(element);
      };
      Resizable.prototype.componentWillReceiveProps = function (next) {
          this.updateExtendsProps(next);
      };
      Resizable.prototype.componentWillUnmount = function () {
          if (typeof window !== 'undefined') {
              window.removeEventListener('mouseup', this.onMouseUp);
              window.removeEventListener('mousemove', this.onMouseMove);
              window.removeEventListener('mouseleave', this.onMouseUp);
              window.removeEventListener('touchmove', this.onMouseMove);
              window.removeEventListener('touchend', this.onMouseUp);
              var parent_1 = this.parentNode;
              if (!this.base || !parent_1) {
                  return;
              }
              if (!(parent_1 instanceof HTMLElement) || !(this.base instanceof Node)) {
                  return;
              }
              parent_1.removeChild(this.base);
          }
      };
      Resizable.prototype.createSizeForCssProperty = function (newSize, kind) {
          var propsSize = this.propsSize && this.propsSize[kind];
          return this.state[kind] === 'auto' &&
              this.state.original[kind] === newSize &&
              (typeof propsSize === 'undefined' || propsSize === 'auto')
              ? 'auto'
              : newSize;
      };
      Resizable.prototype.calculateNewMaxFromBoundary = function (maxWidth, maxHeight) {
          if (this.props.bounds === 'parent') {
              var parent_2 = this.parentNode;
              if (parent_2 instanceof HTMLElement) {
                  var boundWidth = parent_2.offsetWidth + (this.parentLeft - this.resizableLeft);
                  var boundHeight = parent_2.offsetHeight + (this.parentTop - this.resizableTop);
                  maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
                  maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
              }
          }
          else if (this.props.bounds === 'window') {
              if (typeof window !== 'undefined') {
                  var boundWidth = window.innerWidth - this.resizableLeft;
                  var boundHeight = window.innerHeight - this.resizableTop;
                  maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
                  maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
              }
          }
          else if (this.props.bounds instanceof HTMLElement) {
              var boundWidth = this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft);
              var boundHeight = this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop);
              maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
              maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
          }
          return { maxWidth: maxWidth, maxHeight: maxHeight };
      };
      Resizable.prototype.calculateNewSizeFromDirection = function (clientX, clientY) {
          var scale = this.props.scale || 1;
          var resizeRatio = this.props.resizeRatio || 1;
          var _a = this.state, direction = _a.direction, original = _a.original;
          var _b = this.props, lockAspectRatio = _b.lockAspectRatio, lockAspectRatioExtraHeight = _b.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _b.lockAspectRatioExtraWidth;
          var newWidth = original.width;
          var newHeight = original.height;
          var extraHeight = lockAspectRatioExtraHeight || 0;
          var extraWidth = lockAspectRatioExtraWidth || 0;
          if (hasDirection('right', direction)) {
              newWidth = original.width + ((clientX - original.x) * resizeRatio) / scale;
              if (lockAspectRatio) {
                  newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
              }
          }
          if (hasDirection('left', direction)) {
              newWidth = original.width - ((clientX - original.x) * resizeRatio) / scale;
              if (lockAspectRatio) {
                  newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
              }
          }
          if (hasDirection('bottom', direction)) {
              newHeight = original.height + ((clientY - original.y) * resizeRatio) / scale;
              if (lockAspectRatio) {
                  newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
              }
          }
          if (hasDirection('top', direction)) {
              newHeight = original.height - ((clientY - original.y) * resizeRatio) / scale;
              if (lockAspectRatio) {
                  newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
              }
          }
          return { newWidth: newWidth, newHeight: newHeight };
      };
      Resizable.prototype.calculateNewSizeFromAspectRatio = function (newWidth, newHeight, max, min) {
          var _a = this.props, lockAspectRatio = _a.lockAspectRatio, lockAspectRatioExtraHeight = _a.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _a.lockAspectRatioExtraWidth;
          var computedMinWidth = typeof min.width === 'undefined' ? 10 : min.width;
          var computedMaxWidth = typeof max.width === 'undefined' || max.width < 0 ? newWidth : max.width;
          var computedMinHeight = typeof min.height === 'undefined' ? 10 : min.height;
          var computedMaxHeight = typeof max.height === 'undefined' || max.height < 0 ? newHeight : max.height;
          var extraHeight = lockAspectRatioExtraHeight || 0;
          var extraWidth = lockAspectRatioExtraWidth || 0;
          if (lockAspectRatio) {
              var extraMinWidth = (computedMinHeight - extraHeight) * this.ratio + extraWidth;
              var extraMaxWidth = (computedMaxHeight - extraHeight) * this.ratio + extraWidth;
              var extraMinHeight = (computedMinWidth - extraWidth) / this.ratio + extraHeight;
              var extraMaxHeight = (computedMaxWidth - extraWidth) / this.ratio + extraHeight;
              var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth);
              var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth);
              var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight);
              var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight);
              newWidth = clamp(newWidth, lockedMinWidth, lockedMaxWidth);
              newHeight = clamp(newHeight, lockedMinHeight, lockedMaxHeight);
          }
          else {
              newWidth = clamp(newWidth, computedMinWidth, computedMaxWidth);
              newHeight = clamp(newHeight, computedMinHeight, computedMaxHeight);
          }
          return { newWidth: newWidth, newHeight: newHeight };
      };
      Resizable.prototype.setBoundingClientRect = function () {
          // For parent boundary
          if (this.props.bounds === 'parent') {
              var parent_3 = this.parentNode;
              if (parent_3 instanceof HTMLElement) {
                  var parentRect = parent_3.getBoundingClientRect();
                  this.parentLeft = parentRect.left;
                  this.parentTop = parentRect.top;
              }
          }
          // For target(html element) boundary
          if (this.props.bounds instanceof HTMLElement) {
              var targetRect = this.props.bounds.getBoundingClientRect();
              this.targetLeft = targetRect.left;
              this.targetTop = targetRect.top;
          }
          // For boundary
          if (this.resizable) {
              var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top;
              this.resizableLeft = left;
              this.resizableTop = top_1;
          }
      };
      Resizable.prototype.onResizeStart = function (event, direction) {
          var clientX = 0;
          var clientY = 0;
          if (event.nativeEvent instanceof MouseEvent) {
              clientX = event.nativeEvent.clientX;
              clientY = event.nativeEvent.clientY;
              // When user click with right button the resize is stuck in resizing mode
              // until users clicks again, dont continue if right click is used.
              // HACK: MouseEvent does not have `which` from flow-bin v0.68.
              if (event.nativeEvent.which === 3) {
                  return;
              }
          }
          else if (event.nativeEvent instanceof TouchEvent) {
              clientX = event.nativeEvent.touches[0].clientX;
              clientY = event.nativeEvent.touches[0].clientY;
          }
          if (this.props.onResizeStart) {
              if (this.resizable) {
                  this.props.onResizeStart(event, direction, this.resizable);
              }
          }
          // Fix #168
          if (this.props.size) {
              if (typeof this.props.size.height !== 'undefined' && this.props.size.height !== this.state.height) {
                  this.setState({ height: this.props.size.height });
              }
              if (typeof this.props.size.width !== 'undefined' && this.props.size.width !== this.state.width) {
                  this.setState({ width: this.props.size.width });
              }
          }
          // For lockAspectRatio case
          this.ratio =
              typeof this.props.lockAspectRatio === 'number' ? this.props.lockAspectRatio : this.size.width / this.size.height;
          // For boundary
          this.setBoundingClientRect();
          this.setState({
              original: {
                  x: clientX,
                  y: clientY,
                  width: this.size.width,
                  height: this.size.height,
              },
              isResizing: true,
              resizeCursor: window.getComputedStyle(event.target).cursor || 'auto',
              direction: direction,
          });
      };
      Resizable.prototype.onMouseMove = function (event) {
          if (!this.state.isResizing || !this.resizable) {
              return;
          }
          var _a = this.props, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, minWidth = _a.minWidth, minHeight = _a.minHeight;
          var clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
          var clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
          var _b = this.state, direction = _b.direction, original = _b.original, width = _b.width, height = _b.height;
          var parentSize = this.getParentSize();
          var max = calculateNewMax(parentSize, maxWidth, maxHeight, minWidth, minHeight);
          maxWidth = max.maxWidth;
          maxHeight = max.maxHeight;
          minWidth = max.minWidth;
          minHeight = max.minHeight;
          // Calculate new size
          var _c = this.calculateNewSizeFromDirection(clientX, clientY), newHeight = _c.newHeight, newWidth = _c.newWidth;
          // Calculate max size from boundary settings
          var boundaryMax = this.calculateNewMaxFromBoundary(maxWidth, maxHeight);
          // Calculate new size from aspect ratio
          var newSize = this.calculateNewSizeFromAspectRatio(newWidth, newHeight, { width: boundaryMax.maxWidth, height: boundaryMax.maxHeight }, { width: minWidth, height: minHeight });
          newWidth = newSize.newWidth;
          newHeight = newSize.newHeight;
          if (this.props.grid) {
              var newGridWidth = snap(newWidth, this.props.grid[0]);
              var newGridHeight = snap(newHeight, this.props.grid[1]);
              var gap = this.props.snapGap || 0;
              newWidth = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth;
              newHeight = gap === 0 || Math.abs(newGridHeight - newHeight) <= gap ? newGridHeight : newHeight;
          }
          if (this.props.snap && this.props.snap.x) {
              newWidth = findClosestSnap(newWidth, this.props.snap.x, this.props.snapGap);
          }
          if (this.props.snap && this.props.snap.y) {
              newHeight = findClosestSnap(newHeight, this.props.snap.y, this.props.snapGap);
          }
          var delta = {
              width: newWidth - original.width,
              height: newHeight - original.height,
          };
          if (width && typeof width === 'string') {
              if (endsWith(width, '%')) {
                  var percent = (newWidth / parentSize.width) * 100;
                  newWidth = percent + "%";
              }
              else if (endsWith(width, 'vw')) {
                  var vw = (newWidth / window.innerWidth) * 100;
                  newWidth = vw + "vw";
              }
              else if (endsWith(width, 'vh')) {
                  var vh = (newWidth / window.innerHeight) * 100;
                  newWidth = vh + "vh";
              }
          }
          if (height && typeof height === 'string') {
              if (endsWith(height, '%')) {
                  var percent = (newHeight / parentSize.height) * 100;
                  newHeight = percent + "%";
              }
              else if (endsWith(height, 'vw')) {
                  var vw = (newHeight / window.innerWidth) * 100;
                  newHeight = vw + "vw";
              }
              else if (endsWith(height, 'vh')) {
                  var vh = (newHeight / window.innerHeight) * 100;
                  newHeight = vh + "vh";
              }
          }
          this.setState({
              width: this.createSizeForCssProperty(newWidth, 'width'),
              height: this.createSizeForCssProperty(newHeight, 'height'),
          });
          if (this.props.onResize) {
              this.props.onResize(event, direction, this.resizable, delta);
          }
      };
      Resizable.prototype.onMouseUp = function (event) {
          var _a = this.state, isResizing = _a.isResizing, direction = _a.direction, original = _a.original;
          if (!isResizing || !this.resizable) {
              return;
          }
          var delta = {
              width: this.size.width - original.width,
              height: this.size.height - original.height,
          };
          if (this.props.onResizeStop) {
              this.props.onResizeStop(event, direction, this.resizable, delta);
          }
          if (this.props.size) {
              this.setState(this.props.size);
          }
          this.setState({ isResizing: false, resizeCursor: 'auto' });
      };
      Resizable.prototype.updateSize = function (size) {
          this.setState({ width: size.width, height: size.height });
      };
      Resizable.prototype.renderResizer = function () {
          var _this = this;
          var _a = this.props, enable = _a.enable, handleStyles = _a.handleStyles, handleClasses = _a.handleClasses, handleWrapperStyle = _a.handleWrapperStyle, handleWrapperClass = _a.handleWrapperClass, handleComponent = _a.handleComponent;
          if (!enable) {
              return null;
          }
          var resizers = Object.keys(enable).map(function (dir) {
              if (enable[dir] !== false) {
                  return (React.createElement(Resizer, { key: dir, direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir] }, handleComponent && handleComponent[dir] ? handleComponent[dir] : null));
              }
              return null;
          });
          // #93 Wrap the resize box in span (will not break 100% width/height)
          return (React.createElement("span", { className: handleWrapperClass, style: handleWrapperStyle }, resizers));
      };
      Resizable.prototype.render = function () {
          var _this = this;
          return (React.createElement("div", __assign({ ref: function (c) {
                  if (c) {
                      _this.resizable = c;
                  }
              }, style: __assign({ position: 'relative', userSelect: this.state.isResizing ? 'none' : 'auto' }, this.props.style, this.sizeStyle, { maxWidth: this.props.maxWidth, maxHeight: this.props.maxHeight, minWidth: this.props.minWidth, minHeight: this.props.minHeight, boxSizing: 'border-box' }), className: this.props.className }, this.extendsProps),
              this.state.isResizing && (React.createElement("div", { style: {
                      height: '100%',
                      width: '100%',
                      backgroundColor: 'rgba(0,0,0,0)',
                      cursor: "" + (this.state.resizeCursor || 'auto'),
                      opacity: 0,
                      position: 'fixed',
                      zIndex: 9999,
                      top: '0',
                      left: '0',
                      bottom: '0',
                      right: '0',
                  } })),
              this.props.children,
              this.renderResizer()));
      };
      Resizable.defaultProps = {
          onResizeStart: function () { },
          onResize: function () { },
          onResizeStop: function () { },
          enable: {
              top: true,
              right: true,
              bottom: true,
              left: true,
              topRight: true,
              bottomRight: true,
              bottomLeft: true,
              topLeft: true,
          },
          style: {},
          grid: [1, 1],
          lockAspectRatio: false,
          lockAspectRatioExtraWidth: 0,
          lockAspectRatioExtraHeight: 0,
          scale: 1,
          resizeRatio: 1,
          snapGap: 0,
      };
      return Resizable;
  }(React.Component));
  
  exports.Resizable = Resizable;
  