From 028ac2d1db88231c6d6c986e82a518010906159f Mon Sep 17 00:00:00 2001 From: Youssouf Elazizi Date: Fri, 13 Apr 2018 02:18:22 +0100 Subject: [PATCH] release 1.0.7 fix #5 --- lib/package.json | 2 +- lib/reactjs-popup.cjs.js | 12 +++++++----- lib/reactjs-popup.es.js | 12 +++++++----- lib/reactjs-popup.js | 12 +++++++----- lib/reactjs-popup.min.js | 4 ++-- lib/reactjs-popup.min.js.map | 2 +- package.json | 2 +- 7 files changed, 26 insertions(+), 20 deletions(-) diff --git a/lib/package.json b/lib/package.json index 051303f..ef54a84 100644 --- a/lib/package.json +++ b/lib/package.json @@ -1,6 +1,6 @@ { "name": "reactjs-popup", - "version": "1.0.6", + "version": "1.0.7", "description": "React Popup Component - Modals,Tooltips and Menus —  All in one", "main": "reactjs-popup.es.js", "module": "reactjs-popup.es.js", diff --git a/lib/reactjs-popup.cjs.js b/lib/reactjs-popup.cjs.js index a77c499..236ef70 100644 --- a/lib/reactjs-popup.cjs.js +++ b/lib/reactjs-popup.cjs.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.0.6 + * reactjs-popup v1.0.7 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -423,11 +423,13 @@ class Popup extends React.PureComponent { render() { const { overlayStyle, - closeOnDocumentClick + closeOnDocumentClick, + on } = this.props; const { modal } = this.state; + const overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick; const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; return [this.state.isOpen && React.createElement("div", { key: "H", @@ -437,11 +439,11 @@ class Popup extends React.PureComponent { left: "0px" }, ref: this.setHelperRef - }), this.state.isOpen && React.createElement("div", { + }), overlay && React.createElement("div", { key: "O", className: "popup-overlay", style: Object.assign({}, ovStyle, overlayStyle), - onClick: closeOnDocumentClick ? this.closePopup : undefined + onClick: this.closePopup }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, { innerRef: this.setTriggerRef, key: "R" @@ -460,7 +462,7 @@ Object.defineProperty(Popup, "defaultProps", { onClose: () => {}, defaultOpen: false, open: false, - closeOnDocumentClick: false, + closeOnDocumentClick: true, closeOnEscape: true, on: ["click"], contentStyle: {}, diff --git a/lib/reactjs-popup.es.js b/lib/reactjs-popup.es.js index 2ae636b..8871e8b 100644 --- a/lib/reactjs-popup.es.js +++ b/lib/reactjs-popup.es.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.0.6 + * reactjs-popup v1.0.7 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -419,11 +419,13 @@ class Popup extends React.PureComponent { render() { const { overlayStyle, - closeOnDocumentClick + closeOnDocumentClick, + on } = this.props; const { modal } = this.state; + const overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick; const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; return [this.state.isOpen && React.createElement("div", { key: "H", @@ -433,11 +435,11 @@ class Popup extends React.PureComponent { left: "0px" }, ref: this.setHelperRef - }), this.state.isOpen && React.createElement("div", { + }), overlay && React.createElement("div", { key: "O", className: "popup-overlay", style: Object.assign({}, ovStyle, overlayStyle), - onClick: closeOnDocumentClick ? this.closePopup : undefined + onClick: this.closePopup }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, { innerRef: this.setTriggerRef, key: "R" @@ -456,7 +458,7 @@ Object.defineProperty(Popup, "defaultProps", { onClose: () => {}, defaultOpen: false, open: false, - closeOnDocumentClick: false, + closeOnDocumentClick: true, closeOnEscape: true, on: ["click"], contentStyle: {}, diff --git a/lib/reactjs-popup.js b/lib/reactjs-popup.js index f8c31c7..3fcfb7d 100644 --- a/lib/reactjs-popup.js +++ b/lib/reactjs-popup.js @@ -1,5 +1,5 @@ /*! - * reactjs-popup v1.0.6 + * reactjs-popup v1.0.7 * (c) 2018-present Youssouf EL AZIZI * Released under the MIT License. */ @@ -424,11 +424,13 @@ render() { const { overlayStyle, - closeOnDocumentClick + closeOnDocumentClick, + on } = this.props; const { modal } = this.state; + const overlay = this.state.isOpen && !on.includes("hover") && closeOnDocumentClick; const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; return [this.state.isOpen && React.createElement("div", { key: "H", @@ -438,11 +440,11 @@ left: "0px" }, ref: this.setHelperRef - }), this.state.isOpen && React.createElement("div", { + }), overlay && React.createElement("div", { key: "O", className: "popup-overlay", style: Object.assign({}, ovStyle, overlayStyle), - onClick: closeOnDocumentClick ? this.closePopup : undefined + onClick: this.closePopup }, modal && this.renderContent()), this.state.isOpen && !modal && this.renderContent(), !!this.props.trigger && React.createElement(Ref, { innerRef: this.setTriggerRef, key: "R" @@ -461,7 +463,7 @@ onClose: () => {}, defaultOpen: false, open: false, - closeOnDocumentClick: false, + closeOnDocumentClick: true, closeOnEscape: true, on: ["click"], contentStyle: {}, diff --git a/lib/reactjs-popup.min.js b/lib/reactjs-popup.min.js index e6095ab..da8144f 100644 --- a/lib/reactjs-popup.min.js +++ b/lib/reactjs-popup.min.js @@ -1,7 +1,7 @@ /*! - * reactjs-popup v1.0.6 + * reactjs-popup v1.0.7 * (c) 2018-present Youssouf EL AZIZI * 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(){return(o=Object.assign||function(e){for(var t=1;t{this.state.modal&&this.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")}}),Object.defineProperty(this,"resetScroll",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.modal&&this.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="auto")}}),Object.defineProperty(this,"togglePopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen?this.closePopup():this.openPopup()}}),Object.defineProperty(this,"openPopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen||this.setState({isOpen:!0},()=>{this.setPosition(),this.props.onOpen(),this.lockScroll()})}}),Object.defineProperty(this,"closePopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen&&this.setState({isOpen:!1},()=>{this.props.onClose(),this.resetScroll()})}}),Object.defineProperty(this,"onMouseEnter",{configurable:!0,enumerable:!0,writable:!0,value:()=>{clearTimeout(this.timeOut);const{mouseEnterDelay:e}=this.props;this.timeOut=setTimeout(()=>this.openPopup(),e)}}),Object.defineProperty(this,"onMouseLeave",{configurable:!0,enumerable:!0,writable:!0,value:()=>{clearTimeout(this.timeOut);const{mouseLeaveDelay:e}=this.props;this.timeOut=setTimeout(()=>this.closePopup(),e)}}),Object.defineProperty(this,"setPosition",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{arrow:e,position:t,offsetX:o,offsetY:r}=this.props,{modal:s}=this.state;if(s)return;const i=this.HelperEl.getBoundingClientRect(),n=function(e,t,o,r,s){const i=r?8:0,n=i+s.offsetX,l=i+s.offsetY,p=o.split(" "),a=e.top+e.height/2,c=e.left+e.width/2,{height:h,width:u}=t;let d=a-h/2,f=c-u/2,g="",b="0%",m="0%";switch(p[0]){case"top":d-=h/2+e.height/2+l,g="rotate(45deg)",b="100%",m="50%";break;case"bottom":d+=h/2+e.height/2+l,g="rotate(225deg)",m="50%";break;case"left":f-=u/2+e.width/2+n,g=" rotate(-45deg)",m="100%",b="50%";break;case"right":f+=u/2+e.width/2+n,g="rotate(135deg)",b="50%"}switch(p[1]){case"top":d=e.top,b=e.height/2+"px";break;case"bottom":d=e.top-h+e.height,b=h-e.height/2+"px";break;case"left":f=e.left,m=e.width/2+"px";break;case"right":f=e.left-u+e.width,m=u-e.width/2+"px"}return{top:d,left:f,transform:g,arrowLeft:m,arrowTop:b}}(this.TriggerEl.getBoundingClientRect(),this.ContentEl.getBoundingClientRect(),t,e,{offsetX:o,offsetY:r});this.ContentEl.style.top=n.top-i.top+"px",this.ContentEl.style.left=n.left-i.left+"px",e&&(this.ArrowEl.style.transform=n.transform,this.ArrowEl.style["-ms-transform"]=n.transform,this.ArrowEl.style["-webkit-transform"]=n.transform,this.ArrowEl.style.top=n.arrowTop,this.ArrowEl.style.left=n.arrowLeft),"static"!=window.getComputedStyle(this.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(this.TriggerEl,null).getPropertyValue("position")||(this.TriggerEl.style.position="relative")}}),Object.defineProperty(this,"addWarperAction",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{contentStyle:e,className:t,on:o}=this.props,{modal:s}=this.state,i=s?r.popupContent.modal:r.popupContent.tooltip,n={className:`popup-content ${t}`,style:Object.assign({},i,e),ref:this.setContentRef,onClick:e=>{e.stopPropagation()}};return!s&&o.includes("hover")&&(n.onMouseEnter=this.onMouseEnter,n.onMouseLeave=this.onMouseLeave),n}}),Object.defineProperty(this,"renderTrigger",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const t={key:"T"},{on:o,trigger:r}=this.props,s=Array.isArray(o)?o:[o];for(let e=0,o=s.length;e{const{arrow:t,arrowStyle:s}=this.props,{modal:i}=this.state;return e.createElement("div",o({},this.addWarperAction(),{key:"C"}),t&&!i&&e.createElement("div",{ref:this.setArrowRef,style:Object.assign({},r.popupArrow,s)}),"function"==typeof this.props.children?this.props.children(this.closePopup,this.state.isOpen):this.props.children)}}),this.setTriggerRef=(e=>this.TriggerEl=e),this.setContentRef=(e=>this.ContentEl=e),this.setArrowRef=(e=>this.ArrowEl=e),this.setHelperRef=(e=>this.HelperEl=e),this.timeOut=0}componentDidMount(){const{closeOnEscape:e,defaultOpen:t}=this.props;t&&this.setPosition(),e&&window.addEventListener("keyup",e=>{"Escape"===e.key&&this.closePopup()})}componentWillReceiveProps(e){this.props.open!==e.open&&(e.open?this.openPopup():this.closePopup())}componentWillUnmount(){clearTimeout(this.timeOut)}render(){const{overlayStyle:t,closeOnDocumentClick:o}=this.props,{modal:s}=this.state,n=s?r.overlay.modal:r.overlay.tooltip;return[this.state.isOpen&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),this.state.isOpen&&e.createElement("div",{key:"O",className:"popup-overlay",style:Object.assign({},n,t),onClick:o?this.closePopup:void 0},s&&this.renderContent()),this.state.isOpen&&!s&&this.renderContent(),!!this.props.trigger&&e.createElement(i,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}Object.defineProperty(s,"defaultProps",{configurable:!0,enumerable:!0,writable:!0,value:{children:()=>e.createElement("span",null," Your Content Here !!"),trigger:null,onOpen:()=>{},onClose:()=>{},defaultOpen:!1,open:!1,closeOnDocumentClick:!1,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!0,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100}});class i extends e.PureComponent{constructor(e){super(e)}componentDidMount(){const{innerRef:e}=this.props;e&&e(t.findDOMNode(this))}render(){const{children:t}=this.props;return e.Children.only(t)}}return s}); +!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(){return(o=Object.assign||function(e){for(var t=1;t{this.state.modal&&this.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="hidden")}}),Object.defineProperty(this,"resetScroll",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.modal&&this.props.lockScroll&&(document.getElementsByTagName("body")[0].style.overflow="auto")}}),Object.defineProperty(this,"togglePopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen?this.closePopup():this.openPopup()}}),Object.defineProperty(this,"openPopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen||this.setState({isOpen:!0},()=>{this.setPosition(),this.props.onOpen(),this.lockScroll()})}}),Object.defineProperty(this,"closePopup",{configurable:!0,enumerable:!0,writable:!0,value:()=>{this.state.isOpen&&this.setState({isOpen:!1},()=>{this.props.onClose(),this.resetScroll()})}}),Object.defineProperty(this,"onMouseEnter",{configurable:!0,enumerable:!0,writable:!0,value:()=>{clearTimeout(this.timeOut);const{mouseEnterDelay:e}=this.props;this.timeOut=setTimeout(()=>this.openPopup(),e)}}),Object.defineProperty(this,"onMouseLeave",{configurable:!0,enumerable:!0,writable:!0,value:()=>{clearTimeout(this.timeOut);const{mouseLeaveDelay:e}=this.props;this.timeOut=setTimeout(()=>this.closePopup(),e)}}),Object.defineProperty(this,"setPosition",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{arrow:e,position:t,offsetX:o,offsetY:r}=this.props,{modal:s}=this.state;if(s)return;const i=this.HelperEl.getBoundingClientRect(),n=function(e,t,o,r,s){const i=r?8:0,n=i+s.offsetX,l=i+s.offsetY,p=o.split(" "),a=e.top+e.height/2,c=e.left+e.width/2,{height:h,width:u}=t;let d=a-h/2,f=c-u/2,g="",b="0%",m="0%";switch(p[0]){case"top":d-=h/2+e.height/2+l,g="rotate(45deg)",b="100%",m="50%";break;case"bottom":d+=h/2+e.height/2+l,g="rotate(225deg)",m="50%";break;case"left":f-=u/2+e.width/2+n,g=" rotate(-45deg)",m="100%",b="50%";break;case"right":f+=u/2+e.width/2+n,g="rotate(135deg)",b="50%"}switch(p[1]){case"top":d=e.top,b=e.height/2+"px";break;case"bottom":d=e.top-h+e.height,b=h-e.height/2+"px";break;case"left":f=e.left,m=e.width/2+"px";break;case"right":f=e.left-u+e.width,m=u-e.width/2+"px"}return{top:d,left:f,transform:g,arrowLeft:m,arrowTop:b}}(this.TriggerEl.getBoundingClientRect(),this.ContentEl.getBoundingClientRect(),t,e,{offsetX:o,offsetY:r});this.ContentEl.style.top=n.top-i.top+"px",this.ContentEl.style.left=n.left-i.left+"px",e&&(this.ArrowEl.style.transform=n.transform,this.ArrowEl.style["-ms-transform"]=n.transform,this.ArrowEl.style["-webkit-transform"]=n.transform,this.ArrowEl.style.top=n.arrowTop,this.ArrowEl.style.left=n.arrowLeft),"static"!=window.getComputedStyle(this.TriggerEl,null).getPropertyValue("position")&&""!=window.getComputedStyle(this.TriggerEl,null).getPropertyValue("position")||(this.TriggerEl.style.position="relative")}}),Object.defineProperty(this,"addWarperAction",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const{contentStyle:e,className:t,on:o}=this.props,{modal:s}=this.state,i=s?r.popupContent.modal:r.popupContent.tooltip,n={className:`popup-content ${t}`,style:Object.assign({},i,e),ref:this.setContentRef,onClick:e=>{e.stopPropagation()}};return!s&&o.includes("hover")&&(n.onMouseEnter=this.onMouseEnter,n.onMouseLeave=this.onMouseLeave),n}}),Object.defineProperty(this,"renderTrigger",{configurable:!0,enumerable:!0,writable:!0,value:()=>{const t={key:"T"},{on:o,trigger:r}=this.props,s=Array.isArray(o)?o:[o];for(let e=0,o=s.length;e{const{arrow:t,arrowStyle:s}=this.props,{modal:i}=this.state;return e.createElement("div",o({},this.addWarperAction(),{key:"C"}),t&&!i&&e.createElement("div",{ref:this.setArrowRef,style:Object.assign({},r.popupArrow,s)}),"function"==typeof this.props.children?this.props.children(this.closePopup,this.state.isOpen):this.props.children)}}),this.setTriggerRef=(e=>this.TriggerEl=e),this.setContentRef=(e=>this.ContentEl=e),this.setArrowRef=(e=>this.ArrowEl=e),this.setHelperRef=(e=>this.HelperEl=e),this.timeOut=0}componentDidMount(){const{closeOnEscape:e,defaultOpen:t}=this.props;t&&this.setPosition(),e&&window.addEventListener("keyup",e=>{"Escape"===e.key&&this.closePopup()})}componentWillReceiveProps(e){this.props.open!==e.open&&(e.open?this.openPopup():this.closePopup())}componentWillUnmount(){clearTimeout(this.timeOut)}render(){const{overlayStyle:t,closeOnDocumentClick:o,on:s}=this.props,{modal:n}=this.state,l=this.state.isOpen&&!s.includes("hover")&&o,p=n?r.overlay.modal:r.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({},p,t),onClick:this.closePopup},n&&this.renderContent()),this.state.isOpen&&!n&&this.renderContent(),!!this.props.trigger&&e.createElement(i,{innerRef:this.setTriggerRef,key:"R"},this.renderTrigger())]}}Object.defineProperty(s,"defaultProps",{configurable:!0,enumerable:!0,writable:!0,value:{children:()=>e.createElement("span",null," Your Content Here !!"),trigger:null,onOpen:()=>{},onClose:()=>{},defaultOpen:!1,open:!1,closeOnDocumentClick:!0,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!0,arrow:!0,offsetX:0,offsetY:0,mouseEnterDelay:100,mouseLeaveDelay:100}});class i extends e.PureComponent{constructor(e){super(e)}componentDidMount(){const{innerRef:e}=this.props;e&&e(t.findDOMNode(this))}render(){const{children:t}=this.props;return e.Children.only(t)}}return s}); //# sourceMappingURL=reactjs-popup.min.js.map diff --git a/lib/reactjs-popup.min.js.map b/lib/reactjs-popup.min.js.map index e96405a..aac7f63 100644 --- a/lib/reactjs-popup.min.js.map +++ b/lib/reactjs-popup.min.js.map @@ -1 +1 @@ -{"version":3,"file":"reactjs-popup.min.js","sources":["../src/popup.css.js","../src/Popup.js","../src/Utils.js"],"sourcesContent":["export default {\n popupContent: {\n tooltip: {\n position: \"absolute\",\n zIndex: \"2\",\n width: \"200px\",\n background: `rgb(255, 255, 255)`,\n border: `1px solid rgb(187, 187, 187)`,\n boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,\n padding: \"5px\"\n },\n modal: {\n position: \"relative\",\n background: `rgb(255, 255, 255)`,\n width: \"50%\",\n margin: \"auto\",\n border: `1px solid rgb(187, 187, 187)`,\n padding: \"5px\"\n }\n },\n popupArrow: {\n height: \"10px\",\n width: \"10px\",\n position: \"absolute\",\n background: \"rgb(255, 255, 255)\",\n transform: \"rotate(45deg)\",\n margin: \"-5px\",\n zIndex: \"-1\",\n boxShadow: \"rgba(0, 0, 0, 0.2) 1px 1px 1px\"\n },\n overlay: {\n tooltip: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\"\n },\n modal: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\",\n background: `rgba(0, 0, 0,0.5)`,\n display: \"flex\",\n zIndex: \"999\"\n }\n }\n};\n","import React from \"react\";\nimport { findDOMNode } from \"react-dom\";\nimport calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\n\nexport default class Popup extends React.PureComponent {\n static defaultProps = {\n children: () => Your Content Here !!,\n trigger: null,\n onOpen: () => {},\n onClose: () => {},\n defaultOpen: false,\n open: false,\n closeOnDocumentClick: false,\n closeOnEscape: true,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n lockScroll: true,\n arrow: true,\n offsetX: 0,\n offsetY: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.open || this.props.defaultOpen,\n modal: this.props.modal ? true : !this.props.trigger\n // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe\n };\n\n constructor(props) {\n super(props);\n this.setTriggerRef = r => (this.TriggerEl = r);\n this.setContentRef = r => (this.ContentEl = r);\n this.setArrowRef = r => (this.ArrowEl = r);\n this.setHelperRef = r => (this.HelperEl = r);\n this.timeOut = 0;\n }\n\n componentDidMount() {\n const { closeOnEscape, defaultOpen } = this.props;\n if (defaultOpen) this.setPosition();\n if (closeOnEscape) {\n window.addEventListener(\"keyup\", e => {\n if (e.key === \"Escape\") this.closePopup();\n });\n }\n }\n componentWillReceiveProps(nextProps) {\n if (this.props.open === nextProps.open) return;\n if (nextProps.open) this.openPopup();\n else this.closePopup();\n }\n componentWillUnmount() {\n // kill any function to execute if the component is unmounted\n clearTimeout(this.timeOut);\n }\n\n lockScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n };\n resetScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"auto\";\n };\n\n togglePopup = () => {\n if (this.state.isOpen) this.closePopup();\n else this.openPopup();\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n this.lockScroll();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, () => {\n this.props.onClose();\n this.resetScroll();\n });\n };\n onMouseEnter = () => {\n clearTimeout(this.timeOut);\n const { mouseEnterDelay } = this.props;\n this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);\n };\n onMouseLeave = () => {\n clearTimeout(this.timeOut);\n const { mouseLeaveDelay } = this.props;\n this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);\n };\n\n setPosition = () => {\n const { arrow, position, offsetX, offsetY } = this.props;\n const { modal } = this.state;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, {\n offsetX,\n offsetY\n });\n this.ContentEl.style.top = cords.top - helper.top + \"px\";\n this.ContentEl.style.left = cords.left - helper.left + \"px\";\n if (arrow) {\n this.ArrowEl.style[\"transform\"] = cords.transform;\n this.ArrowEl.style[\"-ms-transform\"] = cords.transform;\n this.ArrowEl.style[\"-webkit-transform\"] = cords.transform;\n this.ArrowEl.style.top = cords.arrowTop;\n this.ArrowEl.style.left = cords.arrowLeft;\n }\n if (\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"static\" ||\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, on } = this.props;\n const { modal } = this.state;\n const popupContentStyle = modal\n ? styles.popupContent.modal\n : styles.popupContent.tooltip;\n\n const childrenElementProps = {\n className: `popup-content ${className}`,\n style: Object.assign({}, popupContentStyle, contentStyle),\n ref: this.setContentRef,\n onClick: e => {\n e.stopPropagation();\n }\n };\n if (!modal && on.includes(\"hover\")) {\n childrenElementProps.onMouseEnter = this.onMouseEnter;\n childrenElementProps.onMouseLeave = this.onMouseLeave;\n }\n return childrenElementProps;\n };\n renderTrigger = () => {\n const triggerProps = { key: \"T\" };\n const { on, trigger } = this.props;\n const onAsArray = Array.isArray(on) ? on : [on];\n for (let i = 0, len = onAsArray.length; i < len; i++) {\n switch (onAsArray[i]) {\n case \"click\":\n triggerProps.onClick = this.togglePopup;\n break;\n case \"hover\":\n triggerProps.onMouseEnter = this.onMouseEnter;\n triggerProps.onMouseLeave = this.onMouseLeave;\n case \"focus\":\n triggerProps.onFocus = this.onMouseEnter;\n break;\n }\n }\n\n if (typeof trigger === \"function\")\n return React.cloneElement(trigger(this.state.isOpen), triggerProps);\n\n return React.cloneElement(trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, arrowStyle } = this.props;\n const { modal } = this.state;\n return (\n
\n {arrow &&\n !modal && (\n \n )}\n {typeof this.props.children === \"function\"\n ? this.props.children(this.closePopup, this.state.isOpen)\n : this.props.children}\n
\n );\n };\n\n render() {\n const { overlayStyle, closeOnDocumentClick } = this.props;\n const { modal } = this.state;\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n this.state.isOpen && ,\n this.state.isOpen && (\n \n {modal && this.renderContent()}\n \n ),\n this.state.isOpen && !modal && this.renderContent(),\n !!this.props.trigger && (\n \n {this.renderTrigger()}\n \n )\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\n\n Popup.propTypes = {\n arrowStyle: PropTypes.object,\n contentStyle: PropTypes.object,\n overlayStyle: PropTypes.object,\n className: PropTypes.string,\n modal: PropTypes.bool,\n closeOnDocumentClick: PropTypes.bool,\n lockScroll: PropTypes.bool,\n offsetX: PropTypes.number,\n offsetY: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n open: PropTypes.bool,\n defaultOpen: PropTypes.bool,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element\n on: PropTypes.oneOfType([\n PropTypes.oneOf([\"hover\", \"click\", \"focus\"]),\n PropTypes.arrayOf(PropTypes.oneOf([\"hover\", \"click\", \"focus\"]))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOf([\n \"top left\",\n \"top center\",\n \"top right\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n ])\n };\n}\n\nclass Ref extends React.PureComponent {\n constructor(props) {\n super(props);\n }\n componentDidMount() {\n const { innerRef } = this.props;\n if (innerRef) innerRef(findDOMNode(this));\n }\n render() {\n const { children } = this.props;\n return React.Children.only(children);\n }\n}\n","/* Algo to calculate position \n 1. center position for popup content : the center of the trigger will be the center of the content content\n so the popup content position will be like this :\n top => the y of the center for the trigger element : trigger.top + trigger.height/2\n left => the x of the center for the trigger element : trigger.left + trigger.width/2\n\n 2. translate position according to the first position attribute passed in the function argument \n for example :\n position = 'left top'\n 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\n \n 3.translate position according to the first position attribute passed in the function argument \n for example :\n position = 'left top'\n the second argument 'top' => translate popup content by + content.height*4/5\n\n*/\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n offset\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const MarginX = margin + offset.offsetX;\n const MarginY = margin + offset.offsetY;\n const args = position.split(\" \");\n // the step N 1 : center the popup content => ok\n const CenterTop = triggerBounding.top + triggerBounding.height / 2;\n const CenterLeft = triggerBounding.left + triggerBounding.width / 2;\n const { height, width } = ContentBounding;\n let top = CenterTop - height / 2;\n let left = CenterLeft - width / 2;\n let transform = \"\";\n let arrowTop = \"0%\";\n let arrowLeft = \"0%\";\n // the step N 2 : => ok\n switch (args[0]) {\n case \"top\":\n top -= height / 2 + triggerBounding.height / 2 + MarginY;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + MarginY;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + MarginX;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + MarginX;\n transform = `rotate(135deg)`;\n arrowTop = \"50%\";\n\n break;\n }\n switch (args[1]) {\n case \"top\":\n top = triggerBounding.top;\n arrowTop = triggerBounding.height / 2 + \"px\";\n break;\n case \"bottom\":\n top = triggerBounding.top - height + triggerBounding.height;\n arrowTop = height - triggerBounding.height / 2 + \"px\";\n break;\n case \"left\":\n left = triggerBounding.left;\n arrowLeft = triggerBounding.width / 2 + \"px\";\n break;\n case \"right\":\n left = triggerBounding.left - width + triggerBounding.width;\n arrowLeft = width - triggerBounding.width / 2 + \"px\";\n break;\n }\n\n return { top, left, transform, arrowLeft, arrowTop };\n}\n"],"names":["Popup","React","PureComponent","props","this","open","defaultOpen","modal","trigger","state","lockScroll","document","getElementsByTagName","style","overflow","isOpen","closePopup","openPopup","setState","setPosition","onOpen","onClose","resetScroll","timeOut","mouseEnterDelay","setTimeout","mouseLeaveDelay","arrow","position","offsetX","offsetY","helper","HelperEl","getBoundingClientRect","cords","triggerBounding","ContentBounding","offset","margin","MarginX","MarginY","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","calculatePosition","TriggerEl","ContentEl","ArrowEl","window","getComputedStyle","getPropertyValue","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","e","stopPropagation","includes","onMouseEnter","onMouseLeave","triggerProps","onAsArray","Array","isArray","i","len","length","onClick","togglePopup","onFocus","cloneElement","arrowStyle","addWarperAction","setArrowRef","popupArrow","children","setTriggerRef","r","setHelperRef","closeOnEscape","addEventListener","key","nextProps","overlayStyle","closeOnDocumentClick","ovStyle","overlay","undefined","renderContent","Ref","renderTrigger","innerRef","findDOMNode","Children","only"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"reactjs-popup.min.js","sources":["../src/popup.css.js","../src/Popup.js","../src/Utils.js"],"sourcesContent":["export default {\n popupContent: {\n tooltip: {\n position: \"absolute\",\n zIndex: \"2\",\n width: \"200px\",\n background: `rgb(255, 255, 255)`,\n border: `1px solid rgb(187, 187, 187)`,\n boxShadow: `rgba(0, 0, 0, 0.2) 0px 1px 3px`,\n padding: \"5px\"\n },\n modal: {\n position: \"relative\",\n background: `rgb(255, 255, 255)`,\n width: \"50%\",\n margin: \"auto\",\n border: `1px solid rgb(187, 187, 187)`,\n padding: \"5px\"\n }\n },\n popupArrow: {\n height: \"10px\",\n width: \"10px\",\n position: \"absolute\",\n background: \"rgb(255, 255, 255)\",\n transform: \"rotate(45deg)\",\n margin: \"-5px\",\n zIndex: \"-1\",\n boxShadow: \"rgba(0, 0, 0, 0.2) 1px 1px 1px\"\n },\n overlay: {\n tooltip: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\"\n },\n modal: {\n position: \"fixed\",\n top: \"0\",\n bottom: \"0\",\n left: \"0\",\n right: \"0\",\n background: `rgba(0, 0, 0,0.5)`,\n display: \"flex\",\n zIndex: \"999\"\n }\n }\n};\n","import React from \"react\";\nimport { findDOMNode } from \"react-dom\";\nimport calculatePosition from \"./Utils\";\n\nimport styles from \"./popup.css.js\";\n\nexport default class Popup extends React.PureComponent {\n static defaultProps = {\n children: () => Your Content Here !!,\n trigger: null,\n onOpen: () => {},\n onClose: () => {},\n defaultOpen: false,\n open: false,\n closeOnDocumentClick: true,\n closeOnEscape: true,\n on: [\"click\"],\n contentStyle: {},\n arrowStyle: {},\n overlayStyle: {},\n className: \"\",\n position: \"bottom center\",\n modal: false,\n lockScroll: true,\n arrow: true,\n offsetX: 0,\n offsetY: 0,\n mouseEnterDelay: 100,\n mouseLeaveDelay: 100\n };\n state = {\n isOpen: this.props.open || this.props.defaultOpen,\n modal: this.props.modal ? true : !this.props.trigger\n // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe\n };\n\n constructor(props) {\n super(props);\n this.setTriggerRef = r => (this.TriggerEl = r);\n this.setContentRef = r => (this.ContentEl = r);\n this.setArrowRef = r => (this.ArrowEl = r);\n this.setHelperRef = r => (this.HelperEl = r);\n this.timeOut = 0;\n }\n\n componentDidMount() {\n const { closeOnEscape, defaultOpen } = this.props;\n if (defaultOpen) this.setPosition();\n if (closeOnEscape) {\n window.addEventListener(\"keyup\", e => {\n if (e.key === \"Escape\") this.closePopup();\n });\n }\n }\n componentWillReceiveProps(nextProps) {\n if (this.props.open === nextProps.open) return;\n if (nextProps.open) this.openPopup();\n else this.closePopup();\n }\n componentWillUnmount() {\n // kill any function to execute if the component is unmounted\n clearTimeout(this.timeOut);\n }\n\n lockScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"hidden\";\n };\n resetScroll = () => {\n if (this.state.modal && this.props.lockScroll)\n document.getElementsByTagName(\"body\")[0].style.overflow = \"auto\";\n };\n\n togglePopup = () => {\n if (this.state.isOpen) this.closePopup();\n else this.openPopup();\n };\n openPopup = () => {\n if (this.state.isOpen) return;\n this.setState({ isOpen: true }, () => {\n this.setPosition();\n this.props.onOpen();\n this.lockScroll();\n });\n };\n closePopup = () => {\n if (!this.state.isOpen) return;\n this.setState({ isOpen: false }, () => {\n this.props.onClose();\n this.resetScroll();\n });\n };\n onMouseEnter = () => {\n clearTimeout(this.timeOut);\n const { mouseEnterDelay } = this.props;\n this.timeOut = setTimeout(() => this.openPopup(), mouseEnterDelay);\n };\n onMouseLeave = () => {\n clearTimeout(this.timeOut);\n const { mouseLeaveDelay } = this.props;\n this.timeOut = setTimeout(() => this.closePopup(), mouseLeaveDelay);\n };\n\n setPosition = () => {\n const { arrow, position, offsetX, offsetY } = this.props;\n const { modal } = this.state;\n if (modal) return;\n const helper = this.HelperEl.getBoundingClientRect();\n const trigger = this.TriggerEl.getBoundingClientRect();\n const content = this.ContentEl.getBoundingClientRect();\n const cords = calculatePosition(trigger, content, position, arrow, {\n offsetX,\n offsetY\n });\n this.ContentEl.style.top = cords.top - helper.top + \"px\";\n this.ContentEl.style.left = cords.left - helper.left + \"px\";\n if (arrow) {\n this.ArrowEl.style[\"transform\"] = cords.transform;\n this.ArrowEl.style[\"-ms-transform\"] = cords.transform;\n this.ArrowEl.style[\"-webkit-transform\"] = cords.transform;\n this.ArrowEl.style.top = cords.arrowTop;\n this.ArrowEl.style.left = cords.arrowLeft;\n }\n if (\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"static\" ||\n window\n .getComputedStyle(this.TriggerEl, null)\n .getPropertyValue(\"position\") == \"\"\n )\n this.TriggerEl.style.position = \"relative\";\n };\n\n addWarperAction = () => {\n const { contentStyle, className, on } = this.props;\n const { modal } = this.state;\n const popupContentStyle = modal\n ? styles.popupContent.modal\n : styles.popupContent.tooltip;\n\n const childrenElementProps = {\n className: `popup-content ${className}`,\n style: Object.assign({}, popupContentStyle, contentStyle),\n ref: this.setContentRef,\n onClick: e => {\n e.stopPropagation();\n }\n };\n if (!modal && on.includes(\"hover\")) {\n childrenElementProps.onMouseEnter = this.onMouseEnter;\n childrenElementProps.onMouseLeave = this.onMouseLeave;\n }\n return childrenElementProps;\n };\n renderTrigger = () => {\n const triggerProps = { key: \"T\" };\n const { on, trigger } = this.props;\n const onAsArray = Array.isArray(on) ? on : [on];\n for (let i = 0, len = onAsArray.length; i < len; i++) {\n switch (onAsArray[i]) {\n case \"click\":\n triggerProps.onClick = this.togglePopup;\n break;\n case \"hover\":\n triggerProps.onMouseEnter = this.onMouseEnter;\n triggerProps.onMouseLeave = this.onMouseLeave;\n case \"focus\":\n triggerProps.onFocus = this.onMouseEnter;\n break;\n }\n }\n\n if (typeof trigger === \"function\")\n return React.cloneElement(trigger(this.state.isOpen), triggerProps);\n\n return React.cloneElement(trigger, triggerProps);\n };\n\n renderContent = () => {\n const { arrow, arrowStyle } = this.props;\n const { modal } = this.state;\n return (\n
\n {arrow &&\n !modal && (\n \n )}\n {typeof this.props.children === \"function\"\n ? this.props.children(this.closePopup, this.state.isOpen)\n : this.props.children}\n
\n );\n };\n\n render() {\n const { overlayStyle, closeOnDocumentClick, on } = this.props;\n const { modal } = this.state;\n const overlay =\n this.state.isOpen && !on.includes(\"hover\") && closeOnDocumentClick;\n const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip;\n return [\n this.state.isOpen && (\n \n ),\n overlay && (\n \n {modal && this.renderContent()}\n \n ),\n this.state.isOpen && !modal && this.renderContent(),\n !!this.props.trigger && (\n \n {this.renderTrigger()}\n \n )\n ];\n }\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n const PropTypes = require(\"prop-types\");\n\n Popup.propTypes = {\n arrowStyle: PropTypes.object,\n contentStyle: PropTypes.object,\n overlayStyle: PropTypes.object,\n className: PropTypes.string,\n modal: PropTypes.bool,\n closeOnDocumentClick: PropTypes.bool,\n lockScroll: PropTypes.bool,\n offsetX: PropTypes.number,\n offsetY: PropTypes.number,\n mouseEnterDelay: PropTypes.number,\n mouseLeaveDelay: PropTypes.number,\n onOpen: PropTypes.func,\n onClose: PropTypes.func,\n open: PropTypes.bool,\n defaultOpen: PropTypes.bool,\n trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // for uncontrolled component we don't need the trigger Element\n on: PropTypes.oneOfType([\n PropTypes.oneOf([\"hover\", \"click\", \"focus\"]),\n PropTypes.arrayOf(PropTypes.oneOf([\"hover\", \"click\", \"focus\"]))\n ]),\n children: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.element,\n PropTypes.string\n ]).isRequired,\n position: PropTypes.oneOf([\n \"top left\",\n \"top center\",\n \"top right\",\n \"bottom left\",\n \"bottom center\",\n \"bottom right\",\n \"right top\",\n \"right center\",\n \"right bottom\",\n \"left top\",\n \"left center\",\n \"left bottom\"\n ])\n };\n}\n\nclass Ref extends React.PureComponent {\n constructor(props) {\n super(props);\n }\n componentDidMount() {\n const { innerRef } = this.props;\n if (innerRef) innerRef(findDOMNode(this));\n }\n render() {\n const { children } = this.props;\n return React.Children.only(children);\n }\n}\n","/* Algo to calculate position \n 1. center position for popup content : the center of the trigger will be the center of the content content\n so the popup content position will be like this :\n top => the y of the center for the trigger element : trigger.top + trigger.height/2\n left => the x of the center for the trigger element : trigger.left + trigger.width/2\n\n 2. translate position according to the first position attribute passed in the function argument \n for example :\n position = 'left top'\n 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\n \n 3.translate position according to the first position attribute passed in the function argument \n for example :\n position = 'left top'\n the second argument 'top' => translate popup content by + content.height*4/5\n\n*/\n\nexport default function calculatePosition(\n triggerBounding,\n ContentBounding,\n position,\n arrow,\n offset\n) {\n const style = {};\n const margin = arrow ? 8 : 0;\n const MarginX = margin + offset.offsetX;\n const MarginY = margin + offset.offsetY;\n const args = position.split(\" \");\n // the step N 1 : center the popup content => ok\n const CenterTop = triggerBounding.top + triggerBounding.height / 2;\n const CenterLeft = triggerBounding.left + triggerBounding.width / 2;\n const { height, width } = ContentBounding;\n let top = CenterTop - height / 2;\n let left = CenterLeft - width / 2;\n let transform = \"\";\n let arrowTop = \"0%\";\n let arrowLeft = \"0%\";\n // the step N 2 : => ok\n switch (args[0]) {\n case \"top\":\n top -= height / 2 + triggerBounding.height / 2 + MarginY;\n transform = `rotate(45deg)`;\n arrowTop = \"100%\";\n arrowLeft = \"50%\";\n break;\n case \"bottom\":\n top += height / 2 + triggerBounding.height / 2 + MarginY;\n transform = `rotate(225deg)`;\n arrowLeft = \"50%\";\n break;\n case \"left\":\n left -= width / 2 + triggerBounding.width / 2 + MarginX;\n transform = ` rotate(-45deg)`;\n arrowLeft = \"100%\";\n arrowTop = \"50%\";\n break;\n case \"right\":\n left += width / 2 + triggerBounding.width / 2 + MarginX;\n transform = `rotate(135deg)`;\n arrowTop = \"50%\";\n\n break;\n }\n switch (args[1]) {\n case \"top\":\n top = triggerBounding.top;\n arrowTop = triggerBounding.height / 2 + \"px\";\n break;\n case \"bottom\":\n top = triggerBounding.top - height + triggerBounding.height;\n arrowTop = height - triggerBounding.height / 2 + \"px\";\n break;\n case \"left\":\n left = triggerBounding.left;\n arrowLeft = triggerBounding.width / 2 + \"px\";\n break;\n case \"right\":\n left = triggerBounding.left - width + triggerBounding.width;\n arrowLeft = width - triggerBounding.width / 2 + \"px\";\n break;\n }\n\n return { top, left, transform, arrowLeft, arrowTop };\n}\n"],"names":["Popup","React","PureComponent","props","this","open","defaultOpen","modal","trigger","state","lockScroll","document","getElementsByTagName","style","overflow","isOpen","closePopup","openPopup","setState","setPosition","onOpen","onClose","resetScroll","timeOut","mouseEnterDelay","setTimeout","mouseLeaveDelay","arrow","position","offsetX","offsetY","helper","HelperEl","getBoundingClientRect","cords","triggerBounding","ContentBounding","offset","margin","MarginX","MarginY","args","split","CenterTop","top","height","CenterLeft","left","width","transform","arrowTop","arrowLeft","calculatePosition","TriggerEl","ContentEl","ArrowEl","window","getComputedStyle","getPropertyValue","contentStyle","className","on","popupContentStyle","styles","popupContent","tooltip","childrenElementProps","Object","assign","setContentRef","e","stopPropagation","includes","onMouseEnter","onMouseLeave","triggerProps","onAsArray","Array","isArray","i","len","length","onClick","togglePopup","onFocus","cloneElement","arrowStyle","addWarperAction","setArrowRef","popupArrow","children","setTriggerRef","r","setHelperRef","closeOnEscape","addEventListener","key","nextProps","overlayStyle","closeOnDocumentClick","overlay","ovStyle","renderContent","Ref","renderTrigger","innerRef","findDOMNode","Children","only"],"mappings":"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"} \ No newline at end of file diff --git a/package.json b/package.json index d3a7e81..0c336fa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reactjs-popup", - "version": "1.0.6", + "version": "1.0.7", "description": "React Popup Component - Modals,Tooltips and Menus —  All in one", "main": "reactjs-popup.es.js",