reactjs-popup - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

package.json

 {
   "name": "reactjs-popup",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "React Popup Component - Modals,Tooltips and Menus —  All in one",
@@ -5,0 +5,0 @@ "main": "reactjs-popup.cjs.js",

reactjs-popup.cjs.js

 /*!
- * reactjs-popup v1.1.1
+ * reactjs-popup v1.1.2
  * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
@@ -35,2 +35,17 @@ * Released under the MIT License.
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _extends() {
@@ -59,13 +74,24 @@ _extends = Object.assign || function (target) {
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  _setPrototypeOf(subClass.prototype, superClass && superClass.prototype);
+
+  if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) {
+    return o.__proto__;
+  };
+
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
 function _assertThisInitialized(self) {
@@ -87,3 +113,3 @@ if (self === void 0) {
 
-/* Algo to calculate position 
+/* Algo to calculate position
   1. center position for popup content : the center of the trigger will be the center of the content content
@@ -94,8 +120,8 @@ so the popup content position will be like this :
 
-  2. translate position according to the first  position attribute  passed  in the function argument 
+  2. translate position according to the first  position attribute  passed  in the function argument
       for example :
         position = 'left top'
         we need to handle the first argument in the position: 'left' => that's mean we need to translate the popup content according to the X axis by - content.width/2
-      
-  3.translate position according to the first  position attribute  passed  in the function argument 
+
+  3.translate position according to the first  position attribute  passed  in the function argument
     for example :
@@ -106,6 +132,6 @@ position = 'left top'
 */
-function calculatePosition(triggerBounding, ContentBounding, position, arrow, offset) {
+function calculatePosition(triggerBounding, ContentBounding, position, arrow, _ref) {
+  var offsetX = _ref.offsetX,
+      offsetY = _ref.offsetY;
   var margin = arrow ? 8 : 0;
-  var MarginX = margin + offset.offsetX;
-  var MarginY = margin + offset.offsetY;
   var args = position.split(" "); // the step N 1 : center the popup content => ok
@@ -125,3 +151,3 @@
     case "top":
-      top -= height / 2 + triggerBounding.height / 2 + MarginY;
+      top -= height / 2 + triggerBounding.height / 2 + margin;
       transform = "rotate(45deg)";
@@ -133,3 +159,3 @@ arrowTop = "100%";
     case "bottom":
-      top += height / 2 + triggerBounding.height / 2 + MarginY;
+      top += height / 2 + triggerBounding.height / 2 + margin;
       transform = "rotate(225deg)";
@@ -140,3 +166,3 @@ arrowLeft = "50%";
     case "left":
-      left -= width / 2 + triggerBounding.width / 2 + MarginX;
+      left -= width / 2 + triggerBounding.width / 2 + margin;
       transform = " rotate(-45deg)";
@@ -148,3 +174,3 @@ arrowLeft = "100%";
     case "right":
-      left += width / 2 + triggerBounding.width / 2 + MarginX;
+      left += width / 2 + triggerBounding.width / 2 + margin;
       transform = "rotate(135deg)";
@@ -158,3 +184,3 @@ arrowTop = "50%";
       top = triggerBounding.top;
-      arrowTop = triggerBounding.height / 2 + "px";
+      arrowTop = triggerBounding.height / 2;
       break;
@@ -164,3 +190,3 @@
       top = triggerBounding.top - height + triggerBounding.height;
-      arrowTop = height - triggerBounding.height / 2 + "px";
+      arrowTop = height - triggerBounding.height / 2;
       break;
@@ -170,3 +196,3 @@
       left = triggerBounding.left;
-      arrowLeft = triggerBounding.width / 2 + "px";
+      arrowLeft = triggerBounding.width / 2;
       break;
@@ -176,6 +202,8 @@
       left = triggerBounding.left - width + triggerBounding.width;
-      arrowLeft = width - triggerBounding.width / 2 + "px";
+      arrowLeft = width - triggerBounding.width / 2;
       break;
   }
 
+  top = args[0] === "top" ? top - offsetY : top + offsetY;
+  left = args[0] === "left" ? left - offsetX : left + offsetX;
   return {
@@ -244,4 +272,2 @@ top: top,
 function (_React$PureComponent) {
-  _inherits(Popup, _React$PureComponent);
-
   function Popup(props) {
@@ -252,210 +278,140 @@ var _this;
 
-    _this = _possibleConstructorReturn(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).call(this, props));
-    Object.defineProperty(_assertThisInitialized(_this), "state", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: {
-        isOpen: _this.props.open || _this.props.defaultOpen,
-        modal: _this.props.modal ? true : !_this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Popup).call(this, props));
 
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "lockScroll", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "resetScroll", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "togglePopup", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "openPopup", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        if (_this.state.isOpen) return;
+    _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+      isOpen: _this.props.open || _this.props.defaultOpen,
+      modal: _this.props.modal ? true : !_this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't exist
 
-        _this.setState({
-          isOpen: true
-        }, function () {
-          _this.setPosition();
+    }), "lockScroll", function () {
+      if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
+    }), "resetScroll", function () {
+      if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
+    }), "togglePopup", function () {
+      if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
+    }), "openPopup", function () {
+      if (_this.state.isOpen) return;
 
-          _this.props.onOpen();
+      _this.setState({
+        isOpen: true
+      }, function () {
+        _this.setPosition();
 
-          _this.lockScroll();
-        });
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "closePopup", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        if (!_this.state.isOpen) return;
+        _this.props.onOpen();
 
-        _this.setState({
-          isOpen: false
-        }, function () {
-          _this.props.onClose();
+        _this.lockScroll();
+      });
+    }), "closePopup", function () {
+      if (!_this.state.isOpen) return;
 
-          _this.resetScroll();
-        });
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "onMouseEnter", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        clearTimeout(_this.timeOut);
-        var mouseEnterDelay = _this.props.mouseEnterDelay;
-        _this.timeOut = setTimeout(function () {
-          return _this.openPopup();
-        }, mouseEnterDelay);
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "onMouseLeave", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        clearTimeout(_this.timeOut);
-        var mouseLeaveDelay = _this.props.mouseLeaveDelay;
-        _this.timeOut = setTimeout(function () {
-          return _this.closePopup();
-        }, mouseLeaveDelay);
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "setPosition", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        var _this$props = _this.props,
-            arrow = _this$props.arrow,
-            position = _this$props.position,
-            offsetX = _this$props.offsetX,
-            offsetY = _this$props.offsetY;
-        var modal = _this.state.modal;
-        if (modal) return;
+      _this.setState({
+        isOpen: false
+      }, function () {
+        _this.props.onClose();
 
-        var helper = _this.HelperEl.getBoundingClientRect();
+        _this.resetScroll();
+      });
+    }), "onMouseEnter", function () {
+      clearTimeout(_this.timeOut);
+      var mouseEnterDelay = _this.props.mouseEnterDelay;
+      _this.timeOut = setTimeout(function () {
+        return _this.openPopup();
+      }, mouseEnterDelay);
+    }), "onMouseLeave", function () {
+      clearTimeout(_this.timeOut);
+      var mouseLeaveDelay = _this.props.mouseLeaveDelay;
+      _this.timeOut = setTimeout(function () {
+        return _this.closePopup();
+      }, mouseLeaveDelay);
+    }), "setPosition", function () {
+      var _this$props = _this.props,
+          arrow = _this$props.arrow,
+          position = _this$props.position,
+          offsetX = _this$props.offsetX,
+          offsetY = _this$props.offsetY;
+      var modal = _this.state.modal;
+      if (modal) return;
 
-        var trigger = _this.TriggerEl.getBoundingClientRect();
+      var helper = _this.HelperEl.getBoundingClientRect();
 
-        var content = _this.ContentEl.getBoundingClientRect();
+      var trigger = _this.TriggerEl.getBoundingClientRect();
 
-        var cords = calculatePosition(trigger, content, position, arrow, {
-          offsetX: offsetX,
-          offsetY: offsetY
-        });
-        _this.ContentEl.style.top = cords.top - helper.top + "px";
-        _this.ContentEl.style.left = cords.left - helper.left + "px";
+      var content = _this.ContentEl.getBoundingClientRect();
 
-        if (arrow) {
-          _this.ArrowEl.style["transform"] = cords.transform;
-          _this.ArrowEl.style["-ms-transform"] = cords.transform;
-          _this.ArrowEl.style["-webkit-transform"] = cords.transform;
-          _this.ArrowEl.style.top = cords.arrowTop;
-          _this.ArrowEl.style.left = cords.arrowLeft;
-        }
+      var cords = calculatePosition(trigger, content, position, arrow, {
+        offsetX: offsetX,
+        offsetY: offsetY
+      });
+      _this.ContentEl.style.top = cords.top - helper.top + "px";
+      _this.ContentEl.style.left = cords.left - helper.left + "px";
 
-        if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
+      if (arrow) {
+        _this.ArrowEl.style["transform"] = cords.transform;
+        _this.ArrowEl.style["-ms-transform"] = cords.transform;
+        _this.ArrowEl.style["-webkit-transform"] = cords.transform;
+        _this.ArrowEl.style.top = cords.arrowTop;
+        _this.ArrowEl.style.left = cords.arrowLeft;
       }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "addWarperAction", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        var _this$props2 = _this.props,
-            contentStyle = _this$props2.contentStyle,
-            className = _this$props2.className,
-            on = _this$props2.on;
-        var modal = _this.state.modal;
-        var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
-        var childrenElementProps = {
-          className: "popup-content ".concat(className),
-          style: Object.assign({}, popupContentStyle, contentStyle),
-          ref: _this.setContentRef,
-          onClick: function onClick(e) {
-            e.stopPropagation();
-          }
-        };
 
-        if (!modal && on.indexOf("hover") >= 0) {
-          childrenElementProps.onMouseEnter = _this.onMouseEnter;
-          childrenElementProps.onMouseLeave = _this.onMouseLeave;
+      if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
+    }), "addWarperAction", function () {
+      var _this$props2 = _this.props,
+          contentStyle = _this$props2.contentStyle,
+          className = _this$props2.className,
+          on = _this$props2.on;
+      var modal = _this.state.modal;
+      var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
+      var childrenElementProps = {
+        className: "popup-content ".concat(className),
+        style: Object.assign({}, popupContentStyle, contentStyle),
+        ref: _this.setContentRef,
+        onClick: function onClick(e) {
+          e.stopPropagation();
         }
+      };
 
-        return childrenElementProps;
+      if (!modal && on.indexOf("hover") >= 0) {
+        childrenElementProps.onMouseEnter = _this.onMouseEnter;
+        childrenElementProps.onMouseLeave = _this.onMouseLeave;
       }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "renderTrigger", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        var triggerProps = {
-          key: "T"
-        };
-        var _this$props3 = _this.props,
-            on = _this$props3.on,
-            trigger = _this$props3.trigger;
-        var onAsArray = Array.isArray(on) ? on : [on];
 
-        for (var i = 0, len = onAsArray.length; i < len; i++) {
-          switch (onAsArray[i]) {
-            case "click":
-              triggerProps.onClick = _this.togglePopup;
-              break;
+      return childrenElementProps;
+    }), "renderTrigger", function () {
+      var triggerProps = {
+        key: "T"
+      };
+      var _this$props3 = _this.props,
+          on = _this$props3.on,
+          trigger = _this$props3.trigger;
+      var onAsArray = Array.isArray(on) ? on : [on];
 
-            case "hover":
-              triggerProps.onMouseEnter = _this.onMouseEnter;
-              triggerProps.onMouseLeave = _this.onMouseLeave;
+      for (var i = 0, len = onAsArray.length; i < len; i++) {
+        switch (onAsArray[i]) {
+          case "click":
+            triggerProps.onClick = _this.togglePopup;
+            break;
 
-            case "focus":
-              triggerProps.onFocus = _this.onMouseEnter;
-              break;
-          }
+          case "hover":
+            triggerProps.onMouseEnter = _this.onMouseEnter;
+            triggerProps.onMouseLeave = _this.onMouseLeave;
+
+          case "focus":
+            triggerProps.onFocus = _this.onMouseEnter;
+            break;
         }
+      }
 
-        if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
-        return React.cloneElement(trigger, triggerProps);
-      }
+      if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
+      return React.cloneElement(trigger, triggerProps);
+    }), "renderContent", function () {
+      var _this$props4 = _this.props,
+          arrow = _this$props4.arrow,
+          arrowStyle = _this$props4.arrowStyle;
+      var modal = _this.state.modal;
+      return React.createElement("div", _extends({}, _this.addWarperAction(), {
+        key: "C"
+      }), arrow && !modal && React.createElement("div", {
+        ref: _this.setArrowRef,
+        style: Object.assign({}, styles.popupArrow, arrowStyle)
+      }), typeof _this.props.children === "function" ? _this.props.children(_this.closePopup, _this.state.isOpen) : _this.props.children);
     });
-    Object.defineProperty(_assertThisInitialized(_this), "renderContent", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        var _this$props4 = _this.props,
-            arrow = _this$props4.arrow,
-            arrowStyle = _this$props4.arrowStyle;
-        var modal = _this.state.modal;
-        return React.createElement("div", _extends({}, _this.addWarperAction(), {
-          key: "C"
-        }), arrow && !modal && React.createElement("div", {
-          ref: _this.setArrowRef,
-          style: Object.assign({}, styles.popupArrow, arrowStyle)
-        }), typeof _this.props.children === "function" ? _this.props.children(_this.closePopup, _this.state.isOpen) : _this.props.children);
-      }
-    });
 
@@ -487,5 +443,5 @@ _this.setTriggerRef = function (r) {
 
-      var _props = this.props,
-          closeOnEscape = _props.closeOnEscape,
-          defaultOpen = _props.defaultOpen;
+      var _this$props5 = this.props,
+          closeOnEscape = _this$props5.closeOnEscape,
+          defaultOpen = _this$props5.defaultOpen;
       if (defaultOpen) this.setPosition();
@@ -514,6 +470,6 @@
     value: function render() {
-      var _props2 = this.props,
-          overlayStyle = _props2.overlayStyle,
-          closeOnDocumentClick = _props2.closeOnDocumentClick,
-          on = _props2.on;
+      var _this$props6 = this.props,
+          overlayStyle = _this$props6.overlayStyle,
+          closeOnDocumentClick = _this$props6.closeOnDocumentClick,
+          on = _this$props6.on;
       var modal = this.state.modal;
@@ -542,34 +498,31 @@ var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0);
 
+  _inherits(Popup, _React$PureComponent);
+
   return Popup;
 }(React.PureComponent);
 
-Object.defineProperty(Popup, "defaultProps", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: {
-    children: function children() {
-      return React.createElement("span", null, " Your Content Here !!");
-    },
-    trigger: null,
-    onOpen: function onOpen() {},
-    onClose: function onClose() {},
-    defaultOpen: false,
-    open: false,
-    closeOnDocumentClick: true,
-    closeOnEscape: true,
-    on: ["click"],
-    contentStyle: {},
-    arrowStyle: {},
-    overlayStyle: {},
-    className: "",
-    position: "bottom center",
-    modal: false,
-    lockScroll: false,
-    arrow: true,
-    offsetX: 0,
-    offsetY: 0,
-    mouseEnterDelay: 100,
-    mouseLeaveDelay: 100
-  }
+_defineProperty(Popup, "defaultProps", {
+  children: function children() {
+    return React.createElement("span", null, " Your Content Here !!");
+  },
+  trigger: null,
+  onOpen: function onOpen() {},
+  onClose: function onClose() {},
+  defaultOpen: false,
+  open: false,
+  closeOnDocumentClick: true,
+  closeOnEscape: true,
+  on: ["click"],
+  contentStyle: {},
+  arrowStyle: {},
+  overlayStyle: {},
+  className: "",
+  position: "bottom center",
+  modal: false,
+  lockScroll: false,
+  arrow: true,
+  offsetX: 0,
+  offsetY: 0,
+  mouseEnterDelay: 100,
+  mouseLeaveDelay: 100
 });
@@ -607,8 +560,6 @@
 function (_React$PureComponent2) {
-  _inherits(Ref, _React$PureComponent2);
-
   function Ref(props) {
     _classCallCheck(this, Ref);
 
-    return _possibleConstructorReturn(this, (Ref.__proto__ || Object.getPrototypeOf(Ref)).call(this, props));
+    return _possibleConstructorReturn(this, _getPrototypeOf(Ref).call(this, props));
   }
@@ -630,2 +581,4 @@
 
+  _inherits(Ref, _React$PureComponent2);
+
   return Ref;
@@ -632,0 +585,0 @@ }(React.PureComponent);

reactjs-popup.es.js

 /*!
- * reactjs-popup v1.1.1
+ * reactjs-popup v1.1.2
  * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
@@ -31,2 +31,17 @@ * Released under the MIT License.
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _extends() {
@@ -55,13 +70,24 @@ _extends = Object.assign || function (target) {
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  _setPrototypeOf(subClass.prototype, superClass && superClass.prototype);
+
+  if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) {
+    return o.__proto__;
+  };
+
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
 function _assertThisInitialized(self) {
@@ -83,3 +109,3 @@ if (self === void 0) {
 
-/* Algo to calculate position 
+/* Algo to calculate position
   1. center position for popup content : the center of the trigger will be the center of the content content
@@ -90,8 +116,8 @@ so the popup content position will be like this :
 
-  2. translate position according to the first  position attribute  passed  in the function argument 
+  2. translate position according to the first  position attribute  passed  in the function argument
       for example :
         position = 'left top'
         we need to handle the first argument in the position: 'left' => that's mean we need to translate the popup content according to the X axis by - content.width/2
-      
-  3.translate position according to the first  position attribute  passed  in the function argument 
+
+  3.translate position according to the first  position attribute  passed  in the function argument
     for example :
@@ -102,6 +128,6 @@ position = 'left top'
 */
-function calculatePosition(triggerBounding, ContentBounding, position, arrow, offset) {
+function calculatePosition(triggerBounding, ContentBounding, position, arrow, _ref) {
+  var offsetX = _ref.offsetX,
+      offsetY = _ref.offsetY;
   var margin = arrow ? 8 : 0;
-  var MarginX = margin + offset.offsetX;
-  var MarginY = margin + offset.offsetY;
   var args = position.split(" "); // the step N 1 : center the popup content => ok
@@ -121,3 +147,3 @@
     case "top":
-      top -= height / 2 + triggerBounding.height / 2 + MarginY;
+      top -= height / 2 + triggerBounding.height / 2 + margin;
       transform = "rotate(45deg)";
@@ -129,3 +155,3 @@ arrowTop = "100%";
     case "bottom":
-      top += height / 2 + triggerBounding.height / 2 + MarginY;
+      top += height / 2 + triggerBounding.height / 2 + margin;
       transform = "rotate(225deg)";
@@ -136,3 +162,3 @@ arrowLeft = "50%";
     case "left":
-      left -= width / 2 + triggerBounding.width / 2 + MarginX;
+      left -= width / 2 + triggerBounding.width / 2 + margin;
       transform = " rotate(-45deg)";
@@ -144,3 +170,3 @@ arrowLeft = "100%";
     case "right":
-      left += width / 2 + triggerBounding.width / 2 + MarginX;
+      left += width / 2 + triggerBounding.width / 2 + margin;
       transform = "rotate(135deg)";
@@ -154,3 +180,3 @@ arrowTop = "50%";
       top = triggerBounding.top;
-      arrowTop = triggerBounding.height / 2 + "px";
+      arrowTop = triggerBounding.height / 2;
       break;
@@ -160,3 +186,3 @@
       top = triggerBounding.top - height + triggerBounding.height;
-      arrowTop = height - triggerBounding.height / 2 + "px";
+      arrowTop = height - triggerBounding.height / 2;
       break;
@@ -166,3 +192,3 @@
       left = triggerBounding.left;
-      arrowLeft = triggerBounding.width / 2 + "px";
+      arrowLeft = triggerBounding.width / 2;
       break;
@@ -172,6 +198,8 @@
       left = triggerBounding.left - width + triggerBounding.width;
-      arrowLeft = width - triggerBounding.width / 2 + "px";
+      arrowLeft = width - triggerBounding.width / 2;
       break;
   }
 
+  top = args[0] === "top" ? top - offsetY : top + offsetY;
+  left = args[0] === "left" ? left - offsetX : left + offsetX;
   return {
@@ -240,4 +268,2 @@ top: top,
 function (_React$PureComponent) {
-  _inherits(Popup, _React$PureComponent);
-
   function Popup(props) {
@@ -248,210 +274,140 @@ var _this;
 
-    _this = _possibleConstructorReturn(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).call(this, props));
-    Object.defineProperty(_assertThisInitialized(_this), "state", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: {
-        isOpen: _this.props.open || _this.props.defaultOpen,
-        modal: _this.props.modal ? true : !_this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Popup).call(this, props));
 
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "lockScroll", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "resetScroll", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "togglePopup", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "openPopup", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        if (_this.state.isOpen) return;
+    _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+      isOpen: _this.props.open || _this.props.defaultOpen,
+      modal: _this.props.modal ? true : !_this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't exist
 
-        _this.setState({
-          isOpen: true
-        }, function () {
-          _this.setPosition();
+    }), "lockScroll", function () {
+      if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
+    }), "resetScroll", function () {
+      if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
+    }), "togglePopup", function () {
+      if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
+    }), "openPopup", function () {
+      if (_this.state.isOpen) return;
 
-          _this.props.onOpen();
+      _this.setState({
+        isOpen: true
+      }, function () {
+        _this.setPosition();
 
-          _this.lockScroll();
-        });
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "closePopup", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        if (!_this.state.isOpen) return;
+        _this.props.onOpen();
 
-        _this.setState({
-          isOpen: false
-        }, function () {
-          _this.props.onClose();
+        _this.lockScroll();
+      });
+    }), "closePopup", function () {
+      if (!_this.state.isOpen) return;
 
-          _this.resetScroll();
-        });
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "onMouseEnter", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        clearTimeout(_this.timeOut);
-        var mouseEnterDelay = _this.props.mouseEnterDelay;
-        _this.timeOut = setTimeout(function () {
-          return _this.openPopup();
-        }, mouseEnterDelay);
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "onMouseLeave", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        clearTimeout(_this.timeOut);
-        var mouseLeaveDelay = _this.props.mouseLeaveDelay;
-        _this.timeOut = setTimeout(function () {
-          return _this.closePopup();
-        }, mouseLeaveDelay);
-      }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "setPosition", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        var _this$props = _this.props,
-            arrow = _this$props.arrow,
-            position = _this$props.position,
-            offsetX = _this$props.offsetX,
-            offsetY = _this$props.offsetY;
-        var modal = _this.state.modal;
-        if (modal) return;
+      _this.setState({
+        isOpen: false
+      }, function () {
+        _this.props.onClose();
 
-        var helper = _this.HelperEl.getBoundingClientRect();
+        _this.resetScroll();
+      });
+    }), "onMouseEnter", function () {
+      clearTimeout(_this.timeOut);
+      var mouseEnterDelay = _this.props.mouseEnterDelay;
+      _this.timeOut = setTimeout(function () {
+        return _this.openPopup();
+      }, mouseEnterDelay);
+    }), "onMouseLeave", function () {
+      clearTimeout(_this.timeOut);
+      var mouseLeaveDelay = _this.props.mouseLeaveDelay;
+      _this.timeOut = setTimeout(function () {
+        return _this.closePopup();
+      }, mouseLeaveDelay);
+    }), "setPosition", function () {
+      var _this$props = _this.props,
+          arrow = _this$props.arrow,
+          position = _this$props.position,
+          offsetX = _this$props.offsetX,
+          offsetY = _this$props.offsetY;
+      var modal = _this.state.modal;
+      if (modal) return;
 
-        var trigger = _this.TriggerEl.getBoundingClientRect();
+      var helper = _this.HelperEl.getBoundingClientRect();
 
-        var content = _this.ContentEl.getBoundingClientRect();
+      var trigger = _this.TriggerEl.getBoundingClientRect();
 
-        var cords = calculatePosition(trigger, content, position, arrow, {
-          offsetX: offsetX,
-          offsetY: offsetY
-        });
-        _this.ContentEl.style.top = cords.top - helper.top + "px";
-        _this.ContentEl.style.left = cords.left - helper.left + "px";
+      var content = _this.ContentEl.getBoundingClientRect();
 
-        if (arrow) {
-          _this.ArrowEl.style["transform"] = cords.transform;
-          _this.ArrowEl.style["-ms-transform"] = cords.transform;
-          _this.ArrowEl.style["-webkit-transform"] = cords.transform;
-          _this.ArrowEl.style.top = cords.arrowTop;
-          _this.ArrowEl.style.left = cords.arrowLeft;
-        }
+      var cords = calculatePosition(trigger, content, position, arrow, {
+        offsetX: offsetX,
+        offsetY: offsetY
+      });
+      _this.ContentEl.style.top = cords.top - helper.top + "px";
+      _this.ContentEl.style.left = cords.left - helper.left + "px";
 
-        if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
+      if (arrow) {
+        _this.ArrowEl.style["transform"] = cords.transform;
+        _this.ArrowEl.style["-ms-transform"] = cords.transform;
+        _this.ArrowEl.style["-webkit-transform"] = cords.transform;
+        _this.ArrowEl.style.top = cords.arrowTop;
+        _this.ArrowEl.style.left = cords.arrowLeft;
       }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "addWarperAction", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        var _this$props2 = _this.props,
-            contentStyle = _this$props2.contentStyle,
-            className = _this$props2.className,
-            on = _this$props2.on;
-        var modal = _this.state.modal;
-        var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
-        var childrenElementProps = {
-          className: "popup-content ".concat(className),
-          style: Object.assign({}, popupContentStyle, contentStyle),
-          ref: _this.setContentRef,
-          onClick: function onClick(e) {
-            e.stopPropagation();
-          }
-        };
 
-        if (!modal && on.indexOf("hover") >= 0) {
-          childrenElementProps.onMouseEnter = _this.onMouseEnter;
-          childrenElementProps.onMouseLeave = _this.onMouseLeave;
+      if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
+    }), "addWarperAction", function () {
+      var _this$props2 = _this.props,
+          contentStyle = _this$props2.contentStyle,
+          className = _this$props2.className,
+          on = _this$props2.on;
+      var modal = _this.state.modal;
+      var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
+      var childrenElementProps = {
+        className: "popup-content ".concat(className),
+        style: Object.assign({}, popupContentStyle, contentStyle),
+        ref: _this.setContentRef,
+        onClick: function onClick(e) {
+          e.stopPropagation();
         }
+      };
 
-        return childrenElementProps;
+      if (!modal && on.indexOf("hover") >= 0) {
+        childrenElementProps.onMouseEnter = _this.onMouseEnter;
+        childrenElementProps.onMouseLeave = _this.onMouseLeave;
       }
-    });
-    Object.defineProperty(_assertThisInitialized(_this), "renderTrigger", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        var triggerProps = {
-          key: "T"
-        };
-        var _this$props3 = _this.props,
-            on = _this$props3.on,
-            trigger = _this$props3.trigger;
-        var onAsArray = Array.isArray(on) ? on : [on];
 
-        for (var i = 0, len = onAsArray.length; i < len; i++) {
-          switch (onAsArray[i]) {
-            case "click":
-              triggerProps.onClick = _this.togglePopup;
-              break;
+      return childrenElementProps;
+    }), "renderTrigger", function () {
+      var triggerProps = {
+        key: "T"
+      };
+      var _this$props3 = _this.props,
+          on = _this$props3.on,
+          trigger = _this$props3.trigger;
+      var onAsArray = Array.isArray(on) ? on : [on];
 
-            case "hover":
-              triggerProps.onMouseEnter = _this.onMouseEnter;
-              triggerProps.onMouseLeave = _this.onMouseLeave;
+      for (var i = 0, len = onAsArray.length; i < len; i++) {
+        switch (onAsArray[i]) {
+          case "click":
+            triggerProps.onClick = _this.togglePopup;
+            break;
 
-            case "focus":
-              triggerProps.onFocus = _this.onMouseEnter;
-              break;
-          }
+          case "hover":
+            triggerProps.onMouseEnter = _this.onMouseEnter;
+            triggerProps.onMouseLeave = _this.onMouseLeave;
+
+          case "focus":
+            triggerProps.onFocus = _this.onMouseEnter;
+            break;
         }
+      }
 
-        if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
-        return React.cloneElement(trigger, triggerProps);
-      }
+      if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
+      return React.cloneElement(trigger, triggerProps);
+    }), "renderContent", function () {
+      var _this$props4 = _this.props,
+          arrow = _this$props4.arrow,
+          arrowStyle = _this$props4.arrowStyle;
+      var modal = _this.state.modal;
+      return React.createElement("div", _extends({}, _this.addWarperAction(), {
+        key: "C"
+      }), arrow && !modal && React.createElement("div", {
+        ref: _this.setArrowRef,
+        style: Object.assign({}, styles.popupArrow, arrowStyle)
+      }), typeof _this.props.children === "function" ? _this.props.children(_this.closePopup, _this.state.isOpen) : _this.props.children);
     });
-    Object.defineProperty(_assertThisInitialized(_this), "renderContent", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function value() {
-        var _this$props4 = _this.props,
-            arrow = _this$props4.arrow,
-            arrowStyle = _this$props4.arrowStyle;
-        var modal = _this.state.modal;
-        return React.createElement("div", _extends({}, _this.addWarperAction(), {
-          key: "C"
-        }), arrow && !modal && React.createElement("div", {
-          ref: _this.setArrowRef,
-          style: Object.assign({}, styles.popupArrow, arrowStyle)
-        }), typeof _this.props.children === "function" ? _this.props.children(_this.closePopup, _this.state.isOpen) : _this.props.children);
-      }
-    });
 
@@ -483,5 +439,5 @@ _this.setTriggerRef = function (r) {
 
-      var _props = this.props,
-          closeOnEscape = _props.closeOnEscape,
-          defaultOpen = _props.defaultOpen;
+      var _this$props5 = this.props,
+          closeOnEscape = _this$props5.closeOnEscape,
+          defaultOpen = _this$props5.defaultOpen;
       if (defaultOpen) this.setPosition();
@@ -510,6 +466,6 @@
     value: function render() {
-      var _props2 = this.props,
-          overlayStyle = _props2.overlayStyle,
-          closeOnDocumentClick = _props2.closeOnDocumentClick,
-          on = _props2.on;
+      var _this$props6 = this.props,
+          overlayStyle = _this$props6.overlayStyle,
+          closeOnDocumentClick = _this$props6.closeOnDocumentClick,
+          on = _this$props6.on;
       var modal = this.state.modal;
@@ -538,34 +494,31 @@ var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0);
 
+  _inherits(Popup, _React$PureComponent);
+
   return Popup;
 }(React.PureComponent);
 
-Object.defineProperty(Popup, "defaultProps", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: {
-    children: function children() {
-      return React.createElement("span", null, " Your Content Here !!");
-    },
-    trigger: null,
-    onOpen: function onOpen() {},
-    onClose: function onClose() {},
-    defaultOpen: false,
-    open: false,
-    closeOnDocumentClick: true,
-    closeOnEscape: true,
-    on: ["click"],
-    contentStyle: {},
-    arrowStyle: {},
-    overlayStyle: {},
-    className: "",
-    position: "bottom center",
-    modal: false,
-    lockScroll: false,
-    arrow: true,
-    offsetX: 0,
-    offsetY: 0,
-    mouseEnterDelay: 100,
-    mouseLeaveDelay: 100
-  }
+_defineProperty(Popup, "defaultProps", {
+  children: function children() {
+    return React.createElement("span", null, " Your Content Here !!");
+  },
+  trigger: null,
+  onOpen: function onOpen() {},
+  onClose: function onClose() {},
+  defaultOpen: false,
+  open: false,
+  closeOnDocumentClick: true,
+  closeOnEscape: true,
+  on: ["click"],
+  contentStyle: {},
+  arrowStyle: {},
+  overlayStyle: {},
+  className: "",
+  position: "bottom center",
+  modal: false,
+  lockScroll: false,
+  arrow: true,
+  offsetX: 0,
+  offsetY: 0,
+  mouseEnterDelay: 100,
+  mouseLeaveDelay: 100
 });
@@ -603,8 +556,6 @@
 function (_React$PureComponent2) {
-  _inherits(Ref, _React$PureComponent2);
-
   function Ref(props) {
     _classCallCheck(this, Ref);
 
-    return _possibleConstructorReturn(this, (Ref.__proto__ || Object.getPrototypeOf(Ref)).call(this, props));
+    return _possibleConstructorReturn(this, _getPrototypeOf(Ref).call(this, props));
   }
@@ -626,2 +577,4 @@
 
+  _inherits(Ref, _React$PureComponent2);
+
   return Ref;
@@ -628,0 +581,0 @@ }(React.PureComponent);

reactjs-popup.js

 /*!
- * reactjs-popup v1.1.1
+ * reactjs-popup v1.1.2
  * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
@@ -36,2 +36,17 @@ * Released under the MIT License.
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
   function _extends() {
@@ -60,13 +75,24 @@ _extends = Object.assign || function (target) {
 
-    subClass.prototype = Object.create(superClass && superClass.prototype, {
-      constructor: {
-        value: subClass,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    });
-    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+    _setPrototypeOf(subClass.prototype, superClass && superClass.prototype);
+
+    if (superClass) _setPrototypeOf(subClass, superClass);
   }
 
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) {
+      return o.__proto__;
+    };
+
+    return _getPrototypeOf(o);
+  }
+
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
   function _assertThisInitialized(self) {
@@ -88,3 +114,3 @@ if (self === void 0) {
 
-  /* Algo to calculate position 
+  /* Algo to calculate position
     1. center position for popup content : the center of the trigger will be the center of the content content
@@ -95,8 +121,8 @@ so the popup content position will be like this :
 
-    2. translate position according to the first  position attribute  passed  in the function argument 
+    2. translate position according to the first  position attribute  passed  in the function argument
         for example :
           position = 'left top'
           we need to handle the first argument in the position: 'left' => that's mean we need to translate the popup content according to the X axis by - content.width/2
-        
-    3.translate position according to the first  position attribute  passed  in the function argument 
+
+    3.translate position according to the first  position attribute  passed  in the function argument
       for example :
@@ -107,6 +133,6 @@ position = 'left top'
   */
-  function calculatePosition(triggerBounding, ContentBounding, position, arrow, offset) {
+  function calculatePosition(triggerBounding, ContentBounding, position, arrow, _ref) {
+    var offsetX = _ref.offsetX,
+        offsetY = _ref.offsetY;
     var margin = arrow ? 8 : 0;
-    var MarginX = margin + offset.offsetX;
-    var MarginY = margin + offset.offsetY;
     var args = position.split(" "); // the step N 1 : center the popup content => ok
@@ -126,3 +152,3 @@
       case "top":
-        top -= height / 2 + triggerBounding.height / 2 + MarginY;
+        top -= height / 2 + triggerBounding.height / 2 + margin;
         transform = "rotate(45deg)";
@@ -134,3 +160,3 @@ arrowTop = "100%";
       case "bottom":
-        top += height / 2 + triggerBounding.height / 2 + MarginY;
+        top += height / 2 + triggerBounding.height / 2 + margin;
         transform = "rotate(225deg)";
@@ -141,3 +167,3 @@ arrowLeft = "50%";
       case "left":
-        left -= width / 2 + triggerBounding.width / 2 + MarginX;
+        left -= width / 2 + triggerBounding.width / 2 + margin;
         transform = " rotate(-45deg)";
@@ -149,3 +175,3 @@ arrowLeft = "100%";
       case "right":
-        left += width / 2 + triggerBounding.width / 2 + MarginX;
+        left += width / 2 + triggerBounding.width / 2 + margin;
         transform = "rotate(135deg)";
@@ -159,3 +185,3 @@ arrowTop = "50%";
         top = triggerBounding.top;
-        arrowTop = triggerBounding.height / 2 + "px";
+        arrowTop = triggerBounding.height / 2;
         break;
@@ -165,3 +191,3 @@
         top = triggerBounding.top - height + triggerBounding.height;
-        arrowTop = height - triggerBounding.height / 2 + "px";
+        arrowTop = height - triggerBounding.height / 2;
         break;
@@ -171,3 +197,3 @@
         left = triggerBounding.left;
-        arrowLeft = triggerBounding.width / 2 + "px";
+        arrowLeft = triggerBounding.width / 2;
         break;
@@ -177,6 +203,8 @@
         left = triggerBounding.left - width + triggerBounding.width;
-        arrowLeft = width - triggerBounding.width / 2 + "px";
+        arrowLeft = width - triggerBounding.width / 2;
         break;
     }
 
+    top = args[0] === "top" ? top - offsetY : top + offsetY;
+    left = args[0] === "left" ? left - offsetX : left + offsetX;
     return {
@@ -245,4 +273,2 @@ top: top,
   function (_React$PureComponent) {
-    _inherits(Popup, _React$PureComponent);
-
     function Popup(props) {
@@ -253,210 +279,140 @@ var _this;
 
-      _this = _possibleConstructorReturn(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).call(this, props));
-      Object.defineProperty(_assertThisInitialized(_this), "state", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: {
-          isOpen: _this.props.open || _this.props.defaultOpen,
-          modal: _this.props.modal ? true : !_this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(Popup).call(this, props));
 
-        }
-      });
-      Object.defineProperty(_assertThisInitialized(_this), "lockScroll", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function value() {
-          if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
-        }
-      });
-      Object.defineProperty(_assertThisInitialized(_this), "resetScroll", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function value() {
-          if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
-        }
-      });
-      Object.defineProperty(_assertThisInitialized(_this), "togglePopup", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function value() {
-          if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
-        }
-      });
-      Object.defineProperty(_assertThisInitialized(_this), "openPopup", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function value() {
-          if (_this.state.isOpen) return;
+      _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+        isOpen: _this.props.open || _this.props.defaultOpen,
+        modal: _this.props.modal ? true : !_this.props.trigger // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't exist
 
-          _this.setState({
-            isOpen: true
-          }, function () {
-            _this.setPosition();
+      }), "lockScroll", function () {
+        if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "hidden";
+      }), "resetScroll", function () {
+        if (_this.state.modal && _this.props.lockScroll) document.getElementsByTagName("body")[0].style.overflow = "auto";
+      }), "togglePopup", function () {
+        if (_this.state.isOpen) _this.closePopup();else _this.openPopup();
+      }), "openPopup", function () {
+        if (_this.state.isOpen) return;
 
-            _this.props.onOpen();
+        _this.setState({
+          isOpen: true
+        }, function () {
+          _this.setPosition();
 
-            _this.lockScroll();
-          });
-        }
-      });
-      Object.defineProperty(_assertThisInitialized(_this), "closePopup", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function value() {
-          if (!_this.state.isOpen) return;
+          _this.props.onOpen();
 
-          _this.setState({
-            isOpen: false
-          }, function () {
-            _this.props.onClose();
+          _this.lockScroll();
+        });
+      }), "closePopup", function () {
+        if (!_this.state.isOpen) return;
 
-            _this.resetScroll();
-          });
-        }
-      });
-      Object.defineProperty(_assertThisInitialized(_this), "onMouseEnter", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function value() {
-          clearTimeout(_this.timeOut);
-          var mouseEnterDelay = _this.props.mouseEnterDelay;
-          _this.timeOut = setTimeout(function () {
-            return _this.openPopup();
-          }, mouseEnterDelay);
-        }
-      });
-      Object.defineProperty(_assertThisInitialized(_this), "onMouseLeave", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function value() {
-          clearTimeout(_this.timeOut);
-          var mouseLeaveDelay = _this.props.mouseLeaveDelay;
-          _this.timeOut = setTimeout(function () {
-            return _this.closePopup();
-          }, mouseLeaveDelay);
-        }
-      });
-      Object.defineProperty(_assertThisInitialized(_this), "setPosition", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function value() {
-          var _this$props = _this.props,
-              arrow = _this$props.arrow,
-              position = _this$props.position,
-              offsetX = _this$props.offsetX,
-              offsetY = _this$props.offsetY;
-          var modal = _this.state.modal;
-          if (modal) return;
+        _this.setState({
+          isOpen: false
+        }, function () {
+          _this.props.onClose();
 
-          var helper = _this.HelperEl.getBoundingClientRect();
+          _this.resetScroll();
+        });
+      }), "onMouseEnter", function () {
+        clearTimeout(_this.timeOut);
+        var mouseEnterDelay = _this.props.mouseEnterDelay;
+        _this.timeOut = setTimeout(function () {
+          return _this.openPopup();
+        }, mouseEnterDelay);
+      }), "onMouseLeave", function () {
+        clearTimeout(_this.timeOut);
+        var mouseLeaveDelay = _this.props.mouseLeaveDelay;
+        _this.timeOut = setTimeout(function () {
+          return _this.closePopup();
+        }, mouseLeaveDelay);
+      }), "setPosition", function () {
+        var _this$props = _this.props,
+            arrow = _this$props.arrow,
+            position = _this$props.position,
+            offsetX = _this$props.offsetX,
+            offsetY = _this$props.offsetY;
+        var modal = _this.state.modal;
+        if (modal) return;
 
-          var trigger = _this.TriggerEl.getBoundingClientRect();
+        var helper = _this.HelperEl.getBoundingClientRect();
 
-          var content = _this.ContentEl.getBoundingClientRect();
+        var trigger = _this.TriggerEl.getBoundingClientRect();
 
-          var cords = calculatePosition(trigger, content, position, arrow, {
-            offsetX: offsetX,
-            offsetY: offsetY
-          });
-          _this.ContentEl.style.top = cords.top - helper.top + "px";
-          _this.ContentEl.style.left = cords.left - helper.left + "px";
+        var content = _this.ContentEl.getBoundingClientRect();
 
-          if (arrow) {
-            _this.ArrowEl.style["transform"] = cords.transform;
-            _this.ArrowEl.style["-ms-transform"] = cords.transform;
-            _this.ArrowEl.style["-webkit-transform"] = cords.transform;
-            _this.ArrowEl.style.top = cords.arrowTop;
-            _this.ArrowEl.style.left = cords.arrowLeft;
-          }
+        var cords = calculatePosition(trigger, content, position, arrow, {
+          offsetX: offsetX,
+          offsetY: offsetY
+        });
+        _this.ContentEl.style.top = cords.top - helper.top + "px";
+        _this.ContentEl.style.left = cords.left - helper.left + "px";
 
-          if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
+        if (arrow) {
+          _this.ArrowEl.style["transform"] = cords.transform;
+          _this.ArrowEl.style["-ms-transform"] = cords.transform;
+          _this.ArrowEl.style["-webkit-transform"] = cords.transform;
+          _this.ArrowEl.style.top = cords.arrowTop;
+          _this.ArrowEl.style.left = cords.arrowLeft;
         }
-      });
-      Object.defineProperty(_assertThisInitialized(_this), "addWarperAction", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function value() {
-          var _this$props2 = _this.props,
-              contentStyle = _this$props2.contentStyle,
-              className = _this$props2.className,
-              on = _this$props2.on;
-          var modal = _this.state.modal;
-          var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
-          var childrenElementProps = {
-            className: "popup-content ".concat(className),
-            style: Object.assign({}, popupContentStyle, contentStyle),
-            ref: _this.setContentRef,
-            onClick: function onClick(e) {
-              e.stopPropagation();
-            }
-          };
 
-          if (!modal && on.indexOf("hover") >= 0) {
-            childrenElementProps.onMouseEnter = _this.onMouseEnter;
-            childrenElementProps.onMouseLeave = _this.onMouseLeave;
+        if (window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "static" || window.getComputedStyle(_this.TriggerEl, null).getPropertyValue("position") == "") _this.TriggerEl.style.position = "relative";
+      }), "addWarperAction", function () {
+        var _this$props2 = _this.props,
+            contentStyle = _this$props2.contentStyle,
+            className = _this$props2.className,
+            on = _this$props2.on;
+        var modal = _this.state.modal;
+        var popupContentStyle = modal ? styles.popupContent.modal : styles.popupContent.tooltip;
+        var childrenElementProps = {
+          className: "popup-content ".concat(className),
+          style: Object.assign({}, popupContentStyle, contentStyle),
+          ref: _this.setContentRef,
+          onClick: function onClick(e) {
+            e.stopPropagation();
           }
+        };
 
-          return childrenElementProps;
+        if (!modal && on.indexOf("hover") >= 0) {
+          childrenElementProps.onMouseEnter = _this.onMouseEnter;
+          childrenElementProps.onMouseLeave = _this.onMouseLeave;
         }
-      });
-      Object.defineProperty(_assertThisInitialized(_this), "renderTrigger", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function value() {
-          var triggerProps = {
-            key: "T"
-          };
-          var _this$props3 = _this.props,
-              on = _this$props3.on,
-              trigger = _this$props3.trigger;
-          var onAsArray = Array.isArray(on) ? on : [on];
 
-          for (var i = 0, len = onAsArray.length; i < len; i++) {
-            switch (onAsArray[i]) {
-              case "click":
-                triggerProps.onClick = _this.togglePopup;
-                break;
+        return childrenElementProps;
+      }), "renderTrigger", function () {
+        var triggerProps = {
+          key: "T"
+        };
+        var _this$props3 = _this.props,
+            on = _this$props3.on,
+            trigger = _this$props3.trigger;
+        var onAsArray = Array.isArray(on) ? on : [on];
 
-              case "hover":
-                triggerProps.onMouseEnter = _this.onMouseEnter;
-                triggerProps.onMouseLeave = _this.onMouseLeave;
+        for (var i = 0, len = onAsArray.length; i < len; i++) {
+          switch (onAsArray[i]) {
+            case "click":
+              triggerProps.onClick = _this.togglePopup;
+              break;
 
-              case "focus":
-                triggerProps.onFocus = _this.onMouseEnter;
-                break;
-            }
+            case "hover":
+              triggerProps.onMouseEnter = _this.onMouseEnter;
+              triggerProps.onMouseLeave = _this.onMouseLeave;
+
+            case "focus":
+              triggerProps.onFocus = _this.onMouseEnter;
+              break;
           }
+        }
 
-          if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
-          return React.cloneElement(trigger, triggerProps);
-        }
+        if (typeof trigger === "function") return React.cloneElement(trigger(_this.state.isOpen), triggerProps);
+        return React.cloneElement(trigger, triggerProps);
+      }), "renderContent", function () {
+        var _this$props4 = _this.props,
+            arrow = _this$props4.arrow,
+            arrowStyle = _this$props4.arrowStyle;
+        var modal = _this.state.modal;
+        return React.createElement("div", _extends({}, _this.addWarperAction(), {
+          key: "C"
+        }), arrow && !modal && React.createElement("div", {
+          ref: _this.setArrowRef,
+          style: Object.assign({}, styles.popupArrow, arrowStyle)
+        }), typeof _this.props.children === "function" ? _this.props.children(_this.closePopup, _this.state.isOpen) : _this.props.children);
       });
-      Object.defineProperty(_assertThisInitialized(_this), "renderContent", {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-        value: function value() {
-          var _this$props4 = _this.props,
-              arrow = _this$props4.arrow,
-              arrowStyle = _this$props4.arrowStyle;
-          var modal = _this.state.modal;
-          return React.createElement("div", _extends({}, _this.addWarperAction(), {
-            key: "C"
-          }), arrow && !modal && React.createElement("div", {
-            ref: _this.setArrowRef,
-            style: Object.assign({}, styles.popupArrow, arrowStyle)
-          }), typeof _this.props.children === "function" ? _this.props.children(_this.closePopup, _this.state.isOpen) : _this.props.children);
-        }
-      });
 
@@ -488,5 +444,5 @@ _this.setTriggerRef = function (r) {
 
-        var _props = this.props,
-            closeOnEscape = _props.closeOnEscape,
-            defaultOpen = _props.defaultOpen;
+        var _this$props5 = this.props,
+            closeOnEscape = _this$props5.closeOnEscape,
+            defaultOpen = _this$props5.defaultOpen;
         if (defaultOpen) this.setPosition();
@@ -515,6 +471,6 @@
       value: function render() {
-        var _props2 = this.props,
-            overlayStyle = _props2.overlayStyle,
-            closeOnDocumentClick = _props2.closeOnDocumentClick,
-            on = _props2.on;
+        var _this$props6 = this.props,
+            overlayStyle = _this$props6.overlayStyle,
+            closeOnDocumentClick = _this$props6.closeOnDocumentClick,
+            on = _this$props6.on;
         var modal = this.state.modal;
@@ -543,34 +499,31 @@ var overlay = this.state.isOpen && !(on.indexOf("hover") >= 0);
 
+    _inherits(Popup, _React$PureComponent);
+
     return Popup;
   }(React.PureComponent);
 
-  Object.defineProperty(Popup, "defaultProps", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: {
-      children: function children() {
-        return React.createElement("span", null, " Your Content Here !!");
-      },
-      trigger: null,
-      onOpen: function onOpen() {},
-      onClose: function onClose() {},
-      defaultOpen: false,
-      open: false,
-      closeOnDocumentClick: true,
-      closeOnEscape: true,
-      on: ["click"],
-      contentStyle: {},
-      arrowStyle: {},
-      overlayStyle: {},
-      className: "",
-      position: "bottom center",
-      modal: false,
-      lockScroll: false,
-      arrow: true,
-      offsetX: 0,
-      offsetY: 0,
-      mouseEnterDelay: 100,
-      mouseLeaveDelay: 100
-    }
+  _defineProperty(Popup, "defaultProps", {
+    children: function children() {
+      return React.createElement("span", null, " Your Content Here !!");
+    },
+    trigger: null,
+    onOpen: function onOpen() {},
+    onClose: function onClose() {},
+    defaultOpen: false,
+    open: false,
+    closeOnDocumentClick: true,
+    closeOnEscape: true,
+    on: ["click"],
+    contentStyle: {},
+    arrowStyle: {},
+    overlayStyle: {},
+    className: "",
+    position: "bottom center",
+    modal: false,
+    lockScroll: false,
+    arrow: true,
+    offsetX: 0,
+    offsetY: 0,
+    mouseEnterDelay: 100,
+    mouseLeaveDelay: 100
   });
@@ -608,8 +561,6 @@
   function (_React$PureComponent2) {
-    _inherits(Ref, _React$PureComponent2);
-
     function Ref(props) {
       _classCallCheck(this, Ref);
 
-      return _possibleConstructorReturn(this, (Ref.__proto__ || Object.getPrototypeOf(Ref)).call(this, props));
+      return _possibleConstructorReturn(this, _getPrototypeOf(Ref).call(this, props));
     }
@@ -631,2 +582,4 @@
 
+    _inherits(Ref, _React$PureComponent2);
+
     return Ref;
@@ -633,0 +586,0 @@ }(React.PureComponent);

reactjs-popup.min.js

 /*!
- * reactjs-popup v1.1.1
+ * reactjs-popup v1.1.2
  * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
  * Released under the MIT License.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):e.reactjsPopup=t(e.React,e.reactDom)}(this,function(e,t){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function n(e,t,o){return t&&r(e.prototype,t),o&&r(e,o),e}function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function p(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?a(e):t}e=e&&e.hasOwnProperty("default")?e.default:e;var s={popupContent:{tooltip:{position:"absolute",zIndex:"2",width:"200px",background:"rgb(255, 255, 255)",border:"1px solid rgb(187, 187, 187)",boxShadow:"rgba(0, 0, 0, 0.2) 0px 1px 3px",padding:"5px"},modal:{position:"relative",background:"rgb(255, 255, 255)",width:"50%",margin:"auto",border:"1px solid rgb(187, 187, 187)",padding:"5px"}},popupArrow:{height:"10px",width:"10px",position:"absolute",background:"rgb(255, 255, 255)",transform:"rotate(45deg)",margin:"-5px",zIndex:"-1",boxShadow:"rgba(0, 0, 0, 0.2) 1px 1px 1px"},overlay:{tooltip:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0"},modal:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0",background:"rgba(0, 0, 0,0.5)",display:"flex",zIndex:"999"}}},u=function(t){function r(t){var n;return o(this,r),n=p(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,t)),Object.defineProperty(a(n),"state",{configurable:!0,enumerable:!0,writable:!0,value:{isOpen:n.props.open||n.props.defaultOpen,modal:!!n.props.modal||!n.props.trigger}}),Object.defineProperty(a(n),"lockScroll",{configurable:!0,enumerable:!0,writable:!0,value:function(){n.state.modal&&n.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")}}),Object.defineProperty(a(n),"resetScroll",{configurable:!0,enumerable:!0,writable:!0,value:function(){n.state.modal&&n.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="auto")}}),Object.defineProperty(a(n),"togglePopup",{configurable:!0,enumerable:!0,writable:!0,value:function(){n.state.isOpen?n.closePopup():n.openPopup()}}),Object.defineProperty(a(n),"openPopup",{configurable:!0,enumerable:!0,writable:!0,value:function(){n.state.isOpen||n.setState({isOpen:!0},function(){n.setPosition(),n.props.onOpen(),n.lockScroll()})}}),Object.defineProperty(a(n),"closePopup",{configurable:!0,enumerable:!0,writable:!0,value:function(){n.state.isOpen&&n.setState({isOpen:!1},function(){n.props.onClose(),n.resetScroll()})}}),Object.defineProperty(a(n),"onMouseEnter",{configurable:!0,enumerable:!0,writable:!0,value:function(){clearTimeout(n.timeOut);var e=n.props.mouseEnterDelay;n.timeOut=setTimeout(function(){return n.openPopup()},e)}}),Object.defineProperty(a(n),"onMouseLeave",{configurable:!0,enumerable:!0,writable:!0,value:function(){clearTimeout(n.timeOut);var e=n.props.mouseLeaveDelay;n.timeOut=setTimeout(function(){return n.closePopup()},e)}}),Object.defineProperty(a(n),"setPosition",{configurable:!0,enumerable:!0,writable:!0,value:function(){var e=n.props,t=e.arrow,o=e.position,r=e.offsetX,i=e.offsetY;if(!n.state.modal){var l=n.HelperEl.getBoundingClientRect(),a=function(e,t,o,r,n){var i=r?8:0,l=i+n.offsetX,a=i+n.offsetY,p=o.split(" "),s=e.top+e.height/2,u=e.left+e.width/2,c=t.height,f=t.width,d=s-c/2,b=u-f/2,g="",m="0%",y="0%";switch(p[0]){case"top":d-=c/2+e.height/2+a,g="rotate(45deg)",m="100%",y="50%";break;case"bottom":d+=c/2+e.height/2+a,g="rotate(225deg)",y="50%";break;case"left":b-=f/2+e.width/2+l,g=" rotate(-45deg)",y="100%",m="50%";break;case"right":b+=f/2+e.width/2+l,g="rotate(135deg)",m="50%"}switch(p[1]){case"top":d=e.top,m=e.height/2+"px";break;case"bottom":d=e.top-c+e.height,m=c-e.height/2+"px";break;case"left":b=e.left,y=e.width/2+"px";break;case"right":b=e.left-f+e.width,y=f-e.width/2+"px"}return{top:d,left:b,transform:g,arrowLeft:y,arrowTop:m}}(n.TriggerEl.getBoundingClientRect(),n.ContentEl.getBoundingClientRect(),o,t,{offsetX:r,offsetY:i});n.ContentEl.style.top=a.top-l.top+"px",n.ContentEl.style.left=a.left-l.left+"px",t&&(n.ArrowEl.style.transform=a.transform,n.ArrowEl.style["-ms-transform"]=a.transform,n.ArrowEl.style["-webkit-transform"]=a.transform,n.ArrowEl.style.top=a.arrowTop,n.ArrowEl.style.left=a.arrowLeft),"static"!=window.getComputedStyle(n.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(n.TriggerEl,null).getPropertyValue("position")||(n.TriggerEl.style.position="relative")}}}),Object.defineProperty(a(n),"addWarperAction",{configurable:!0,enumerable:!0,writable:!0,value:function(){var e=n.props,t=e.contentStyle,o=e.className,r=e.on,i=n.state.modal,l=i?s.popupContent.modal:s.popupContent.tooltip,a={className:"popup-content ".concat(o),style:Object.assign({},l,t),ref:n.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&r.indexOf("hover")>=0&&(a.onMouseEnter=n.onMouseEnter,a.onMouseLeave=n.onMouseLeave),a}}),Object.defineProperty(a(n),"renderTrigger",{configurable:!0,enumerable:!0,writable:!0,value:function(){for(var t={key:"T"},o=n.props,r=o.on,i=o.trigger,l=Array.isArray(r)?r:[r],a=0,p=l.length;a<p;a++)switch(l[a]){case"click":t.onClick=n.togglePopup;break;case"hover":t.onMouseEnter=n.onMouseEnter,t.onMouseLeave=n.onMouseLeave;case"focus":t.onFocus=n.onMouseEnter}return"function"==typeof i?e.cloneElement(i(n.state.isOpen),t):e.cloneElement(i,t)}}),Object.defineProperty(a(n),"renderContent",{configurable:!0,enumerable:!0,writable:!0,value:function(){var t=n.props,o=t.arrow,r=t.arrowStyle,l=n.state.modal;return e.createElement("div",i({},n.addWarperAction(),{key:"C"}),o&&!l&&e.createElement("div",{ref:n.setArrowRef,style:Object.assign({},s.popupArrow,r)}),"function"==typeof n.props.children?n.props.children(n.closePopup,n.state.isOpen):n.props.children)}}),n.setTriggerRef=function(e){return n.TriggerEl=e},n.setContentRef=function(e){return n.ContentEl=e},n.setArrowRef=function(e){return n.ArrowEl=e},n.setHelperRef=function(e){return n.HelperEl=e},n.timeOut=0,n}return l(r,e.PureComponent),n(r,[{key:"componentDidMount",value:function(){var e=this,t=this.props,o=t.closeOnEscape;t.defaultOpen&&this.setPosition(),o&&window.addEventListener("keyup",function(t){"Escape"===t.key&&e.closePopup()})}},{key:"componentWillReceiveProps",value:function(e){this.props.open!==e.open&&(e.open?this.openPopup():this.closePopup())}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeOut)}},{key:"render",value:function(){var t=this.props,o=t.overlayStyle,r=t.closeOnDocumentClick,n=t.on,i=this.state.modal,l=this.state.isOpen&&!(n.indexOf("hover")>=0),a=i?s.overlay.modal:s.overlay.tooltip;return[this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),l&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},a,o),onClick:r?this.closePopup:void 0},i&&this.renderContent()),this.state.isOpen&&!i&&this.renderContent(),!!this.props.trigger&&e.createElement(c,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}]),r}();Object.defineProperty(u,"defaultProps",{configurable:!0,enumerable:!0,writable:!0,value:{children:function(){return e.createElement("span",null," Your Content Here !!")},trigger:null,onOpen:function(){},onClose:function(){},defaultOpen:!1,open:!1,closeOnDocumentClick:!0,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!1,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100}});var c=function(r){function i(e){return o(this,i),p(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,e))}return l(i,e.PureComponent),n(i,[{key:"componentDidMount",value:function(){var e=this.props.innerRef;e&&e(t.findDOMNode(this))}},{key:"render",value:function(){var t=this.props.children;return e.Children.only(t)}}]),i}();return u});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):e.reactjsPopup=t(e.React,e.reactDom)}(this,function(e,t){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function r(e,t,o){return t&&n(e.prototype,t),o&&n(e,o),e}function i(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}function p(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");a(e.prototype,t&&t.prototype),t&&a(e,t)}function l(e){return(l=Object.getPrototypeOf||function(e){return e.__proto__})(e)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function c(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?u(e):t}var f={popupContent:{tooltip:{position:"absolute",zIndex:"2",width:"200px",background:"rgb(255, 255, 255)",border:"1px solid rgb(187, 187, 187)",boxShadow:"rgba(0, 0, 0, 0.2) 0px 1px 3px",padding:"5px"},modal:{position:"relative",background:"rgb(255, 255, 255)",width:"50%",margin:"auto",border:"1px solid rgb(187, 187, 187)",padding:"5px"}},popupArrow:{height:"10px",width:"10px",position:"absolute",background:"rgb(255, 255, 255)",transform:"rotate(45deg)",margin:"-5px",zIndex:"-1",boxShadow:"rgba(0, 0, 0, 0.2) 1px 1px 1px"},overlay:{tooltip:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0"},modal:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0",background:"rgba(0, 0, 0,0.5)",display:"flex",zIndex:"999"}}},d=function(t){function n(t){var r;return o(this,n),i(i(i(i(i(i(i(i(i(i(i(i(u(u(r=c(this,l(n).call(this,t)))),"state",{isOpen:r.props.open||r.props.defaultOpen,modal:!!r.props.modal||!r.props.trigger}),"lockScroll",function(){r.state.modal&&r.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")}),"resetScroll",function(){r.state.modal&&r.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="auto")}),"togglePopup",function(){r.state.isOpen?r.closePopup():r.openPopup()}),"openPopup",function(){r.state.isOpen||r.setState({isOpen:!0},function(){r.setPosition(),r.props.onOpen(),r.lockScroll()})}),"closePopup",function(){r.state.isOpen&&r.setState({isOpen:!1},function(){r.props.onClose(),r.resetScroll()})}),"onMouseEnter",function(){clearTimeout(r.timeOut);var e=r.props.mouseEnterDelay;r.timeOut=setTimeout(function(){return r.openPopup()},e)}),"onMouseLeave",function(){clearTimeout(r.timeOut);var e=r.props.mouseLeaveDelay;r.timeOut=setTimeout(function(){return r.closePopup()},e)}),"setPosition",function(){var e=r.props,t=e.arrow,o=e.position,n=e.offsetX,i=e.offsetY;if(!r.state.modal){var s=r.HelperEl.getBoundingClientRect(),p=function(e,t,o,n,r){var i=r.offsetX,s=r.offsetY,p=n?8:0,l=o.split(" "),a=e.top+e.height/2,u=e.left+e.width/2,c=t.height,f=t.width,d=a-c/2,g=u-f/2,h="",m="0%",y="0%";switch(l[0]){case"top":d-=c/2+e.height/2+p,h="rotate(45deg)",m="100%",y="50%";break;case"bottom":d+=c/2+e.height/2+p,h="rotate(225deg)",y="50%";break;case"left":g-=f/2+e.width/2+p,h=" rotate(-45deg)",y="100%",m="50%";break;case"right":g+=f/2+e.width/2+p,h="rotate(135deg)",m="50%"}switch(l[1]){case"top":d=e.top,m=e.height/2;break;case"bottom":d=e.top-c+e.height,m=c-e.height/2;break;case"left":g=e.left,y=e.width/2;break;case"right":g=e.left-f+e.width,y=f-e.width/2}return{top:d="top"===l[0]?d-s:d+s,left:g="left"===l[0]?g-i:g+i,transform:h,arrowLeft:y,arrowTop:m}}(r.TriggerEl.getBoundingClientRect(),r.ContentEl.getBoundingClientRect(),o,t,{offsetX:n,offsetY:i});r.ContentEl.style.top=p.top-s.top+"px",r.ContentEl.style.left=p.left-s.left+"px",t&&(r.ArrowEl.style.transform=p.transform,r.ArrowEl.style["-ms-transform"]=p.transform,r.ArrowEl.style["-webkit-transform"]=p.transform,r.ArrowEl.style.top=p.arrowTop,r.ArrowEl.style.left=p.arrowLeft),"static"!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")||(r.TriggerEl.style.position="relative")}}),"addWarperAction",function(){var e=r.props,t=e.contentStyle,o=e.className,n=e.on,i=r.state.modal,s=i?f.popupContent.modal:f.popupContent.tooltip,p={className:"popup-content ".concat(o),style:Object.assign({},s,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&n.indexOf("hover")>=0&&(p.onMouseEnter=r.onMouseEnter,p.onMouseLeave=r.onMouseLeave),p}),"renderTrigger",function(){for(var t={key:"T"},o=r.props,n=o.on,i=o.trigger,s=Array.isArray(n)?n:[n],p=0,l=s.length;p<l;p++)switch(s[p]){case"click":t.onClick=r.togglePopup;break;case"hover":t.onMouseEnter=r.onMouseEnter,t.onMouseLeave=r.onMouseLeave;case"focus":t.onFocus=r.onMouseEnter}return"function"==typeof i?e.cloneElement(i(r.state.isOpen),t):e.cloneElement(i,t)}),"renderContent",function(){var t=r.props,o=t.arrow,n=t.arrowStyle,i=r.state.modal;return e.createElement("div",s({},r.addWarperAction(),{key:"C"}),o&&!i&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},f.popupArrow,n)}),"function"==typeof r.props.children?r.props.children(r.closePopup,r.state.isOpen):r.props.children)}),r.setTriggerRef=function(e){return r.TriggerEl=e},r.setContentRef=function(e){return r.ContentEl=e},r.setArrowRef=function(e){return r.ArrowEl=e},r.setHelperRef=function(e){return r.HelperEl=e},r.timeOut=0,r}return r(n,[{key:"componentDidMount",value:function(){var e=this,t=this.props,o=t.closeOnEscape;t.defaultOpen&&this.setPosition(),o&&window.addEventListener("keyup",function(t){"Escape"===t.key&&e.closePopup()})}},{key:"componentWillReceiveProps",value:function(e){this.props.open!==e.open&&(e.open?this.openPopup():this.closePopup())}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeOut)}},{key:"render",value:function(){var t=this.props,o=t.overlayStyle,n=t.closeOnDocumentClick,r=t.on,i=this.state.modal,s=this.state.isOpen&&!(r.indexOf("hover")>=0),p=i?f.overlay.modal:f.overlay.tooltip;return[this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),s&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},p,o),onClick:n?this.closePopup:void 0},i&&this.renderContent()),this.state.isOpen&&!i&&this.renderContent(),!!this.props.trigger&&e.createElement(g,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}]),p(n,t),n}((e=e&&e.hasOwnProperty("default")?e.default:e).PureComponent);i(d,"defaultProps",{children:function(){return e.createElement("span",null," Your Content Here !!")},trigger:null,onOpen:function(){},onClose:function(){},defaultOpen:!1,open:!1,closeOnDocumentClick:!0,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!1,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100});var g=function(n){function i(e){return o(this,i),c(this,l(i).call(this,e))}return r(i,[{key:"componentDidMount",value:function(){var e=this.props.innerRef;e&&e(t.findDOMNode(this))}},{key:"render",value:function(){var t=this.props.children;return e.Children.only(t)}}]),p(i,n),i}(e.PureComponent);return d});
 //# sourceMappingURL=reactjs-popup.min.js.map

README.md

@@ -22,9 +22,10 @@ # Reactjs-popup
 
-* Built with react fragment that’s mean no additional wrapper Divs in your code or in the trigger element. 😮
-* Does not inject HTML outside your app root. 📦
-* Function as children pattern to take control over your popup anywhere in your code. 💪
-* Modal, Tooltip, Menu : All in one 🏋️
-* Full style customization 👌
-* Easy to use. 🚀
-* All these clocks in at around 3 kB zipped. ⚡️
+- Built with react fragment that’s mean no additional wrapper Divs in your code or in the trigger element. 😮
+- Does not inject HTML outside your app root. 📦
+- Function as children pattern to take control over your popup anywhere in your code. 💪
+- Modal, Tooltip, Menu : All in one 🏋️
+- Full style customization 👌
+- Easy to use. 🚀
+- IE Support.
+- All these clocks in at around 3 kB zipped. ⚡️
 
@@ -41,11 +42,11 @@ Requires React >= 16.0
 
-* [x] Create repository && publish package
-* [x] Create reactjs-popup Home page
-* [x] Tooltip Support
-* [x] Modal Support
-* [x] Menu & Nested Menu Support
-* [x] Add Live examples
-* [ ] Animation API
-* [ ] Toast Support
-* [ ] suggest a feature [here](https://github.com/yjose/reactjs-popup/labels/Features)
+- [x] Create repository && publish package
+- [x] Create reactjs-popup Home page
+- [x] Tooltip Support
+- [x] Modal Support
+- [x] Menu & Nested Menu Support
+- [x] Add Live examples
+- [ ] Animation API
+- [ ] Toast Support
+- [ ] suggest a feature [here](https://github.com/yjose/reactjs-popup/labels/Features)
 
@@ -52,0 +53,0 @@ ## Installing / Getting started

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

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

Improved metrics

Number of lines in readme file

149

increased by0.68%

Worsened metrics

Total package byte prevSize

87480

decreased by-5.86%

Lines of code

1504

decreased by-10.1%

No dependency changes