reactjs-popup - npm Package Compare versions

Comparing version 1.1.4 to 1.2.0

package.json

 {
   "name": "reactjs-popup",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "React Popup Component - Modals,Tooltips and Menus —  All in one",
@@ -15,3 +15,3 @@ "main": "reactjs-popup.cjs.js",
   "jest": {
-    "testEnvironment": "node"
+    "testEnvironment": "jsdom"
   },
@@ -18,0 +18,0 @@ "repository": {

reactjs-popup.cjs.js

 /*!
- * reactjs-popup v1.1.4
+ * reactjs-popup v1.2.0
  * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
@@ -111,2 +111,22 @@ * Released under the MIT License.
 
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+}
+
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
 /* Algo to calculate position
@@ -128,4 +148,5 @@ 1. center position for popup content : the center of the trigger will be the center of the content content
 
+  4. check if calculated position is going out of bounds of wrapper box or not. If yes repeat 1-3 for next position enum. By default wrapper box is window element
 */
-function calculatePosition(triggerBounding, ContentBounding, position, arrow, _ref) {
+function getCoordinatesForPosition(triggerBounding, ContentBounding, position, arrow, _ref) {
   var offsetX = _ref.offsetX,
@@ -206,8 +227,31 @@ offsetY = _ref.offsetY;
 }
-/*
 
+function calculatePosition(triggerBounding, ContentBounding, positions, arrow, _ref2, wrapperBox) {
+  var offsetX = _ref2.offsetX,
+      offsetY = _ref2.offsetY;
+  var bestCoords;
+  var i = 0;
 
+  while (i < positions.length) {
+    bestCoords = getCoordinatesForPosition(triggerBounding, ContentBounding, positions[i], arrow, {
+      offsetX: offsetX,
+      offsetY: offsetY
+    });
+    var contentBox = {
+      top: bestCoords.top,
+      left: bestCoords.left,
+      width: ContentBounding.width,
+      height: ContentBounding.height
+    };
 
-*/
+    if (contentBox.top <= wrapperBox.top || contentBox.left <= wrapperBox.left || contentBox.top + contentBox.height >= wrapperBox.top + wrapperBox.height || contentBox.left + contentBox.width >= wrapperBox.left + wrapperBox.width) {
+      i++;
+    } else {
+      break;
+    }
+  }
 
+  return bestCoords;
+}
+
 var styles = {
@@ -264,2 +308,4 @@ popupContent: {
 
+var POSITION_TYPES = ["top left", "top center", "top right", "right top", "right center", "right bottom", "bottom left", "bottom center", "bottom right", "left top", "left center", "left bottom"];
+
 var Popup =
@@ -275,3 +321,3 @@ /*#__PURE__*/
 
-    _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+    _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
       isOpen: _this.props.open || _this.props.defaultOpen,
@@ -320,2 +366,22 @@ 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
       }, mouseLeaveDelay);
+    }), "getTooltipBoundary", function () {
+      var keepTooltipInside = _this.props.keepTooltipInside;
+      var boundingBox = {
+        top: 0,
+        left: 0,
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+
+      if (typeof keepTooltipInside === "string") {
+        var selector = document.querySelector(keepTooltipInside);
+
+        if (process.env.NODE_ENV !== "production") {
+          if (selector === null) throw new Error("".concat(keepTooltipInside, " selector is not exist : keepTooltipInside must be a valid html selector 'class' or 'Id'  or a boolean value"));
+        }
+
+        boundingBox = selector.getBoundingClientRect();
+      }
+
+      return boundingBox;
     }), "setPosition", function () {
@@ -326,3 +392,4 @@ var _this$props = _this.props,
           offsetX = _this$props.offsetX,
-          offsetY = _this$props.offsetY;
+          offsetY = _this$props.offsetY,
+          keepTooltipInside = _this$props.keepTooltipInside;
       var modal = _this.state.modal;
@@ -337,6 +404,11 @@ if (modal) return;
 
-      var cords = calculatePosition(trigger, content, position, arrow, {
+      var boundingBox = _this.getTooltipBoundary();
+
+      var positions = Array.isArray(position) ? position : [position]; // keepTooltipInside would be activated if the  keepTooltipInside exist or the position is Array
+
+      if (keepTooltipInside || Array.isArray(position)) positions = _toConsumableArray(positions).concat(POSITION_TYPES);
+      var cords = calculatePosition(trigger, content, positions, arrow, {
         offsetX: offsetX,
         offsetY: offsetY
-      });
+      }, boundingBox);
       _this.ContentEl.style.top = cords.top - helper.top + "px";
@@ -522,3 +594,4 @@ _this.ContentEl.style.left = cords.left - helper.left + "px";
   mouseEnterDelay: 100,
-  mouseLeaveDelay: 100
+  mouseLeaveDelay: 100,
+  keepTooltipInside: false
 });
@@ -529,2 +602,3 @@
 
+  var TRIGGER_TYPES = ["hover", "click", "focus"];
   Popup.propTypes = {
@@ -548,5 +622,6 @@ arrowStyle: PropTypes.object,
     // for uncontrolled component we don't need the trigger Element
-    on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]),
+    on: PropTypes.oneOfType([PropTypes.oneOf(TRIGGER_TYPES), PropTypes.arrayOf(PropTypes.oneOf(TRIGGER_TYPES))]),
     children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired,
-    position: PropTypes.oneOf(["top left", "top center", "top right", "bottom left", "bottom center", "bottom right", "right top", "right center", "right bottom", "left top", "left center", "left bottom"])
+    position: PropTypes.oneOfType([PropTypes.oneOf(POSITION_TYPES), PropTypes.arrayOf(PropTypes.oneOf(POSITION_TYPES))]),
+    keepTooltipInside: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
   };
@@ -553,0 +628,0 @@ }

reactjs-popup.es.js

 /*!
- * reactjs-popup v1.1.4
+ * reactjs-popup v1.2.0
  * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
@@ -107,2 +107,22 @@ * Released under the MIT License.
 
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+}
+
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
 /* Algo to calculate position
@@ -124,4 +144,5 @@ 1. center position for popup content : the center of the trigger will be the center of the content content
 
+  4. check if calculated position is going out of bounds of wrapper box or not. If yes repeat 1-3 for next position enum. By default wrapper box is window element
 */
-function calculatePosition(triggerBounding, ContentBounding, position, arrow, _ref) {
+function getCoordinatesForPosition(triggerBounding, ContentBounding, position, arrow, _ref) {
   var offsetX = _ref.offsetX,
@@ -202,8 +223,31 @@ offsetY = _ref.offsetY;
 }
-/*
 
+function calculatePosition(triggerBounding, ContentBounding, positions, arrow, _ref2, wrapperBox) {
+  var offsetX = _ref2.offsetX,
+      offsetY = _ref2.offsetY;
+  var bestCoords;
+  var i = 0;
 
+  while (i < positions.length) {
+    bestCoords = getCoordinatesForPosition(triggerBounding, ContentBounding, positions[i], arrow, {
+      offsetX: offsetX,
+      offsetY: offsetY
+    });
+    var contentBox = {
+      top: bestCoords.top,
+      left: bestCoords.left,
+      width: ContentBounding.width,
+      height: ContentBounding.height
+    };
 
-*/
+    if (contentBox.top <= wrapperBox.top || contentBox.left <= wrapperBox.left || contentBox.top + contentBox.height >= wrapperBox.top + wrapperBox.height || contentBox.left + contentBox.width >= wrapperBox.left + wrapperBox.width) {
+      i++;
+    } else {
+      break;
+    }
+  }
 
+  return bestCoords;
+}
+
 var styles = {
@@ -260,2 +304,4 @@ popupContent: {
 
+var POSITION_TYPES = ["top left", "top center", "top right", "right top", "right center", "right bottom", "bottom left", "bottom center", "bottom right", "left top", "left center", "left bottom"];
+
 var Popup =
@@ -271,3 +317,3 @@ /*#__PURE__*/
 
-    _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+    _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
       isOpen: _this.props.open || _this.props.defaultOpen,
@@ -316,2 +362,22 @@ 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
       }, mouseLeaveDelay);
+    }), "getTooltipBoundary", function () {
+      var keepTooltipInside = _this.props.keepTooltipInside;
+      var boundingBox = {
+        top: 0,
+        left: 0,
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+
+      if (typeof keepTooltipInside === "string") {
+        var selector = document.querySelector(keepTooltipInside);
+
+        if (process.env.NODE_ENV !== "production") {
+          if (selector === null) throw new Error("".concat(keepTooltipInside, " selector is not exist : keepTooltipInside must be a valid html selector 'class' or 'Id'  or a boolean value"));
+        }
+
+        boundingBox = selector.getBoundingClientRect();
+      }
+
+      return boundingBox;
     }), "setPosition", function () {
@@ -322,3 +388,4 @@ var _this$props = _this.props,
           offsetX = _this$props.offsetX,
-          offsetY = _this$props.offsetY;
+          offsetY = _this$props.offsetY,
+          keepTooltipInside = _this$props.keepTooltipInside;
       var modal = _this.state.modal;
@@ -333,6 +400,11 @@ if (modal) return;
 
-      var cords = calculatePosition(trigger, content, position, arrow, {
+      var boundingBox = _this.getTooltipBoundary();
+
+      var positions = Array.isArray(position) ? position : [position]; // keepTooltipInside would be activated if the  keepTooltipInside exist or the position is Array
+
+      if (keepTooltipInside || Array.isArray(position)) positions = _toConsumableArray(positions).concat(POSITION_TYPES);
+      var cords = calculatePosition(trigger, content, positions, arrow, {
         offsetX: offsetX,
         offsetY: offsetY
-      });
+      }, boundingBox);
       _this.ContentEl.style.top = cords.top - helper.top + "px";
@@ -518,3 +590,4 @@ _this.ContentEl.style.left = cords.left - helper.left + "px";
   mouseEnterDelay: 100,
-  mouseLeaveDelay: 100
+  mouseLeaveDelay: 100,
+  keepTooltipInside: false
 });
@@ -525,2 +598,3 @@
 
+  var TRIGGER_TYPES = ["hover", "click", "focus"];
   Popup.propTypes = {
@@ -544,5 +618,6 @@ arrowStyle: PropTypes.object,
     // for uncontrolled component we don't need the trigger Element
-    on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]),
+    on: PropTypes.oneOfType([PropTypes.oneOf(TRIGGER_TYPES), PropTypes.arrayOf(PropTypes.oneOf(TRIGGER_TYPES))]),
     children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired,
-    position: PropTypes.oneOf(["top left", "top center", "top right", "bottom left", "bottom center", "bottom right", "right top", "right center", "right bottom", "left top", "left center", "left bottom"])
+    position: PropTypes.oneOfType([PropTypes.oneOf(POSITION_TYPES), PropTypes.arrayOf(PropTypes.oneOf(POSITION_TYPES))]),
+    keepTooltipInside: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
   };
@@ -549,0 +624,0 @@ }

reactjs-popup.js

 /*!
- * reactjs-popup v1.1.4
+ * reactjs-popup v1.2.0
  * (c) 2018-present Youssouf EL AZIZI <[e-mail]>
@@ -112,2 +112,22 @@ * Released under the MIT License.
 
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) {
+      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+      return arr2;
+    }
+  }
+
+  function _iterableToArray(iter) {
+    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+  }
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance");
+  }
+
   /* Algo to calculate position
@@ -129,4 +149,5 @@ 1. center position for popup content : the center of the trigger will be the center of the content content
 
+    4. check if calculated position is going out of bounds of wrapper box or not. If yes repeat 1-3 for next position enum. By default wrapper box is window element
   */
-  function calculatePosition(triggerBounding, ContentBounding, position, arrow, _ref) {
+  function getCoordinatesForPosition(triggerBounding, ContentBounding, position, arrow, _ref) {
     var offsetX = _ref.offsetX,
@@ -207,8 +228,31 @@ offsetY = _ref.offsetY;
   }
-  /*
 
+  function calculatePosition(triggerBounding, ContentBounding, positions, arrow, _ref2, wrapperBox) {
+    var offsetX = _ref2.offsetX,
+        offsetY = _ref2.offsetY;
+    var bestCoords;
+    var i = 0;
 
+    while (i < positions.length) {
+      bestCoords = getCoordinatesForPosition(triggerBounding, ContentBounding, positions[i], arrow, {
+        offsetX: offsetX,
+        offsetY: offsetY
+      });
+      var contentBox = {
+        top: bestCoords.top,
+        left: bestCoords.left,
+        width: ContentBounding.width,
+        height: ContentBounding.height
+      };
 
-  */
+      if (contentBox.top <= wrapperBox.top || contentBox.left <= wrapperBox.left || contentBox.top + contentBox.height >= wrapperBox.top + wrapperBox.height || contentBox.left + contentBox.width >= wrapperBox.left + wrapperBox.width) {
+        i++;
+      } else {
+        break;
+      }
+    }
 
+    return bestCoords;
+  }
+
   var styles = {
@@ -265,2 +309,4 @@ popupContent: {
 
+  var POSITION_TYPES = ["top left", "top center", "top right", "right top", "right center", "right bottom", "bottom left", "bottom center", "bottom right", "left top", "left center", "left bottom"];
+
   var Popup =
@@ -276,3 +322,3 @@ /*#__PURE__*/
 
-      _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+      _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
         isOpen: _this.props.open || _this.props.defaultOpen,
@@ -321,2 +367,22 @@ 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
         }, mouseLeaveDelay);
+      }), "getTooltipBoundary", function () {
+        var keepTooltipInside = _this.props.keepTooltipInside;
+        var boundingBox = {
+          top: 0,
+          left: 0,
+          width: window.innerWidth,
+          height: window.innerHeight
+        };
+
+        if (typeof keepTooltipInside === "string") {
+          var selector = document.querySelector(keepTooltipInside);
+
+          {
+            if (selector === null) throw new Error("".concat(keepTooltipInside, " selector is not exist : keepTooltipInside must be a valid html selector 'class' or 'Id'  or a boolean value"));
+          }
+
+          boundingBox = selector.getBoundingClientRect();
+        }
+
+        return boundingBox;
       }), "setPosition", function () {
@@ -327,3 +393,4 @@ var _this$props = _this.props,
             offsetX = _this$props.offsetX,
-            offsetY = _this$props.offsetY;
+            offsetY = _this$props.offsetY,
+            keepTooltipInside = _this$props.keepTooltipInside;
         var modal = _this.state.modal;
@@ -338,6 +405,11 @@ if (modal) return;
 
-        var cords = calculatePosition(trigger, content, position, arrow, {
+        var boundingBox = _this.getTooltipBoundary();
+
+        var positions = Array.isArray(position) ? position : [position]; // keepTooltipInside would be activated if the  keepTooltipInside exist or the position is Array
+
+        if (keepTooltipInside || Array.isArray(position)) positions = _toConsumableArray(positions).concat(POSITION_TYPES);
+        var cords = calculatePosition(trigger, content, positions, arrow, {
           offsetX: offsetX,
           offsetY: offsetY
-        });
+        }, boundingBox);
         _this.ContentEl.style.top = cords.top - helper.top + "px";
@@ -523,3 +595,4 @@ _this.ContentEl.style.left = cords.left - helper.left + "px";
     mouseEnterDelay: 100,
-    mouseLeaveDelay: 100
+    mouseLeaveDelay: 100,
+    keepTooltipInside: false
   });
@@ -530,2 +603,3 @@
 
+    var TRIGGER_TYPES = ["hover", "click", "focus"];
     Popup.propTypes = {
@@ -549,5 +623,6 @@ arrowStyle: PropTypes.object,
       // for uncontrolled component we don't need the trigger Element
-      on: PropTypes.oneOfType([PropTypes.oneOf(["hover", "click", "focus"]), PropTypes.arrayOf(PropTypes.oneOf(["hover", "click", "focus"]))]),
+      on: PropTypes.oneOfType([PropTypes.oneOf(TRIGGER_TYPES), PropTypes.arrayOf(PropTypes.oneOf(TRIGGER_TYPES))]),
       children: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]).isRequired,
-      position: PropTypes.oneOf(["top left", "top center", "top right", "bottom left", "bottom center", "bottom right", "right top", "right center", "right bottom", "left top", "left center", "left bottom"])
+      position: PropTypes.oneOfType([PropTypes.oneOf(POSITION_TYPES), PropTypes.arrayOf(PropTypes.oneOf(POSITION_TYPES))]),
+      keepTooltipInside: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
     };
@@ -554,0 +629,0 @@ }

reactjs-popup.min.js

 /*!
- * reactjs-popup v1.1.4
+ * reactjs-popup v1.2.0
  * (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 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.props.onClose(),r.setState({isOpen:!1},function(){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+"px";break;case"bottom":d=e.top-c+e.height,m=c-e.height/2+"px";break;case"left":g=e.left,y=e.width/2+"px";break;case"right":g=e.left-f+e.width,y=f-e.width/2+"px"}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});
+!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 p(){return(p=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 s(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}function f(e){return function(e){if(Array.isArray(e)){for(var t=0,o=new Array(e.length);t<e.length;t++)o[t]=e[t];return o}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function d(e,t,o,n,r){var i=r.offsetX,p=r.offsetY,s=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,h=u-f/2,g="",m="0%",y="0%";switch(l[0]){case"top":d-=c/2+e.height/2+s,g="rotate(45deg)",m="100%",y="50%";break;case"bottom":d+=c/2+e.height/2+s,g="rotate(225deg)",y="50%";break;case"left":h-=f/2+e.width/2+s,g=" rotate(-45deg)",y="100%",m="50%";break;case"right":h+=f/2+e.width/2+s,g="rotate(135deg)",m="50%"}switch(l[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":h=e.left,y=e.width/2+"px";break;case"right":h=e.left-f+e.width,y=f-e.width/2+"px"}return{top:d="top"===l[0]?d-p:d+p,left:h="left"===l[0]?h-i:h+i,transform:g,arrowLeft:y,arrowTop:m}}var h={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"}}},g=["top left","top center","top right","right top","right center","right bottom","bottom left","bottom center","bottom right","left top","left center","left bottom"],m=function(t){function n(t){var r;return o(this,n),i(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.props.onClose(),r.setState({isOpen:!1},function(){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)}),"getTooltipBoundary",function(){var e=r.props.keepTooltipInside,t={top:0,left:0,width:window.innerWidth,height:window.innerHeight};"string"==typeof e&&(t=document.querySelector(e).getBoundingClientRect());return t}),"setPosition",function(){var e=r.props,t=e.arrow,o=e.position,n=e.offsetX,i=e.offsetY,p=e.keepTooltipInside;if(!r.state.modal){var s=r.HelperEl.getBoundingClientRect(),l=r.TriggerEl.getBoundingClientRect(),a=r.ContentEl.getBoundingClientRect(),u=r.getTooltipBoundary(),c=Array.isArray(o)?o:[o];(p||Array.isArray(o))&&(c=f(c).concat(g));var h=function(e,t,o,n,r,i){for(var p,s=r.offsetX,l=r.offsetY,a=0;a<o.length;){var u={top:(p=d(e,t,o[a],n,{offsetX:s,offsetY:l})).top,left:p.left,width:t.width,height:t.height};if(!(u.top<=i.top||u.left<=i.left||u.top+u.height>=i.top+i.height||u.left+u.width>=i.left+i.width))break;a++}return p}(l,a,c,t,{offsetX:n,offsetY:i},u);r.ContentEl.style.top=h.top-s.top+"px",r.ContentEl.style.left=h.left-s.left+"px",t&&(r.ArrowEl.style.transform=h.transform,r.ArrowEl.style["-ms-transform"]=h.transform,r.ArrowEl.style["-webkit-transform"]=h.transform,r.ArrowEl.style.top=h.arrowTop,r.ArrowEl.style.left=h.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,p=i?h.popupContent.modal:h.popupContent.tooltip,s={className:"popup-content ".concat(o),style:Object.assign({},p,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&n.indexOf("hover")>=0&&(s.onMouseEnter=r.onMouseEnter,s.onMouseLeave=r.onMouseLeave),s}),"renderTrigger",function(){for(var t={key:"T"},o=r.props,n=o.on,i=o.trigger,p=Array.isArray(n)?n:[n],s=0,l=p.length;s<l;s++)switch(p[s]){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",p({},r.addWarperAction(),{key:"C"}),o&&!i&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},h.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,p=this.state.isOpen&&!(r.indexOf("hover")>=0),s=i?h.overlay.modal:h.overlay.tooltip;return[this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),p&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},s,o),onClick:n?this.closePopup:void 0},i&&this.renderContent()),this.state.isOpen&&!i&&this.renderContent(),!!this.props.trigger&&e.createElement(y,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}]),s(n,t),n}((e=e&&e.hasOwnProperty("default")?e.default:e).PureComponent);i(m,"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,keepTooltipInside:!1});var y=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)}}]),s(i,n),i}(e.PureComponent);return m});
 //# sourceMappingURL=reactjs-popup.min.js.map

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

Total package byte prevSize

101265

increased by15.43%

Lines of code

1704

increased by12.77%

Worsened metrics

Number of low supply chain risk alerts

4

increased by100%

No dependency changes