react-popper - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.umd.js

@@ -1094,20 +1094,2 @@ (function (global, factory) {
 
-	var createClass = function () {
-	  function defineProperties(target, props) {
-	    for (var i = 0; i < props.length; i++) {
-	      var descriptor = props[i];
-	      descriptor.enumerable = descriptor.enumerable || false;
-	      descriptor.configurable = true;
-	      if ("value" in descriptor) descriptor.writable = true;
-	      Object.defineProperty(target, descriptor.key, descriptor);
-	    }
-	  }
-
-	  return function (Constructor, protoProps, staticProps) {
-	    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-	    if (staticProps) defineProperties(Constructor, staticProps);
-	    return Constructor;
-	  };
-	}();
-
 	var _extends = Object.assign || function (target) {
@@ -1151,12 +1133,2 @@ for (var i = 1; i < arguments.length; i++) {
 
-	var toConsumableArray = function (arr) {
-	  if (Array.isArray(arr)) {
-	    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-	    return arr2;
-	  } else {
-	    return Array.from(arr);
-	  }
-	};
-
 	var ManagerContext = createContext({ getReferenceRef: undefined, referenceNode: undefined });
@@ -1170,3 +1142,3 @@
 
-	    var _this = possibleConstructorReturn(this, (Manager.__proto__ || Object.getPrototypeOf(Manager)).call(this));
+	    var _this = possibleConstructorReturn(this, _React$Component.call(this));
 
@@ -1191,12 +1163,10 @@ _this.getReferenceRef = function (referenceNode) {
 
-	  createClass(Manager, [{
-	    key: "render",
-	    value: function render() {
-	      return React.createElement(
-	        ManagerContext.Provider,
-	        { value: this.state.context },
-	        this.props.children
-	      );
-	    }
-	  }]);
+	  Manager.prototype.render = function render() {
+	    return React.createElement(
+	      ManagerContext.Provider,
+	      { value: this.state.context },
+	      this.props.children
+	    );
+	  };
+
 	  return Manager;
@@ -1223,3 +1193,3 @@ }(React.Component);
 	  if (typeof fn === "function") {
-	    return fn.apply(undefined, toConsumableArray(args));
+	    return fn.apply(undefined, args);
 	  }
@@ -1242,4 +1212,2 @@ };
 	  function InnerPopper() {
-	    var _ref;
-
 	    var _temp, _this, _ret;
@@ -1253,12 +1221,17 @@
 
-	    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = InnerPopper.__proto__ || Object.getPrototypeOf(InnerPopper)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-	      popperNode: undefined,
-	      arrowNode: undefined,
-	      popperInstance: undefined,
-	      data: undefined
-	    }, _this.setPopperNode = function (popperNode) {
+	    return _ret = (_temp = (_this = possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
+	      data: undefined,
+	      placement: undefined
+	    }, _this.popperNode = null, _this.arrowNode = null, _this.setPopperNode = function (popperNode) {
+	      if (_this.popperNode === popperNode) return;
+
 	      safeInvoke(_this.props.innerRef, popperNode);
-	      _this.setState({ popperNode: popperNode });
+	      _this.popperNode = popperNode;
+
+	      if (!_this.popperInstance) _this.updatePopperInstance();
 	    }, _this.setArrowNode = function (arrowNode) {
-	      return _this.setState({ arrowNode: arrowNode });
+	      if (_this.arrowNode === arrowNode) return;
+	      _this.arrowNode = arrowNode;
+
+	      if (!_this.popperInstance) _this.updatePopperInstance();
 	    }, _this.updateStateModifier = {
@@ -1268,3 +1241,5 @@ enabled: true,
 	      fn: function fn(data) {
-	        _this.setState({ data: data });
+	        var placement = data.placement;
+
+	        _this.setState({ data: data, placement: placement }, placement !== _this.state.placement ? _this.scheduleUpdate : undefined);
 	        return data;
@@ -1279,4 +1254,4 @@ }
 	          arrow: {
-	            enabled: !!_this.state.arrowNode,
-	            element: _this.state.arrowNode
+	            enabled: !!_this.arrowNode,
+	            element: _this.arrowNode
 	          },
@@ -1288,37 +1263,30 @@ applyStyle: { enabled: false },
 	    }, _this.getPopperStyle = function () {
-	      return !_this.state.popperNode || !_this.state.data ? initialStyle : _extends({
+	      return !_this.popperNode || !_this.state.data ? initialStyle : _extends({
 	        position: _this.state.data.offsets.popper.position
 	      }, _this.state.data.styles);
 	    }, _this.getPopperPlacement = function () {
-	      return !_this.state.data ? undefined : _this.state.data.placement;
+	      return !_this.state.data ? undefined : _this.state.placement;
 	    }, _this.getArrowStyle = function () {
-	      return !_this.state.arrowNode || !_this.state.data ? initialArrowStyle : _this.state.data.arrowStyles;
+	      return !_this.arrowNode || !_this.state.data ? initialArrowStyle : _this.state.data.arrowStyles;
 	    }, _this.getOutOfBoundariesState = function () {
 	      return _this.state.data ? _this.state.data.hide : undefined;
-	    }, _this.initPopperInstance = function () {
+	    }, _this.destroyPopperInstance = function () {
+	      if (!_this.popperInstance) return;
+
+	      _this.popperInstance.destroy();
+	      _this.popperInstance = null;
+	    }, _this.updatePopperInstance = function () {
+	      _this.destroyPopperInstance();
+
+	      var _this2 = _this,
+	          popperNode = _this2.popperNode;
 	      var referenceElement = _this.props.referenceElement;
-	      var _this$state = _this.state,
-	          popperNode = _this$state.popperNode,
-	          popperInstance = _this$state.popperInstance;
 
-	      if (referenceElement && popperNode && !popperInstance) {
-	        var _popperInstance = new PopperJS(referenceElement, popperNode, _this.getOptions());
-	        _this.setState({ popperInstance: _popperInstance });
-	        return true;
-	      }
-	      return false;
-	    }, _this.destroyPopperInstance = function (callback) {
-	      if (_this.state.popperInstance) {
-	        _this.state.popperInstance.destroy();
-	      }
-	      _this.setState({ popperInstance: undefined }, callback);
-	    }, _this.updatePopperInstance = function () {
-	      if (_this.state.popperInstance) {
-	        _this.destroyPopperInstance(function () {
-	          return _this.initPopperInstance();
-	        });
-	      }
+
+	      if (!referenceElement || !popperNode) return;
+
+	      _this.popperInstance = new PopperJS(referenceElement, popperNode, _this.getOptions());
 	    }, _this.scheduleUpdate = function () {
-	      if (_this.state.popperInstance) {
-	        _this.state.popperInstance.scheduleUpdate();
+	      if (_this.popperInstance) {
+	        _this.popperInstance.scheduleUpdate();
 	      }
@@ -1328,39 +1296,36 @@ }, _temp), possibleConstructorReturn(_this, _ret);
 
-	  createClass(InnerPopper, [{
-	    key: 'componentDidUpdate',
-	    value: function componentDidUpdate(prevProps, prevState) {
-	      // If needed, initialize the Popper.js instance
-	      // it will return `true` if it initialized a new instance, or `false` otherwise
-	      // if it returns `false`, we make sure Popper props haven't changed, and update
-	      // the Popper.js instance if needed
-	      if (!this.initPopperInstance()) {
-	        // If the Popper.js options have changed, update the instance (destroy + create)
-	        if (this.props.placement !== prevProps.placement || this.props.eventsEnabled !== prevProps.eventsEnabled || this.state.arrowNode !== prevState.arrowNode || this.state.popperNode !== prevState.popperNode || this.props.referenceElement !== prevProps.referenceElement || this.props.positionFixed !== prevProps.positionFixed) {
-	          this.updatePopperInstance();
-	        }
-	      }
+	  InnerPopper.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+	    // If the Popper.js options have changed, update the instance (destroy + create)
+	    if (this.props.placement !== prevProps.placement || this.props.eventsEnabled !== prevProps.eventsEnabled || this.props.referenceElement !== prevProps.referenceElement || this.props.positionFixed !== prevProps.positionFixed) {
+	      this.updatePopperInstance();
+	      return;
 	    }
-	  }, {
-	    key: 'componentWillUnmount',
-	    value: function componentWillUnmount() {
-	      if (this.state.popperInstance) {
-	        this.state.popperInstance.destroy();
+
+	    // A placement difference in state means popper determined a new placement
+	    // apart from the props value. By the time the popper element is rendered with
+	    // the new position Popper has already measured it, if the place change triggers
+	    // a size change it will result in a misaligned popper. So we schedule an update to be sure.
+	    if (prevState.placement !== this.state.placement) {
+	      this.scheduleUpdate();
+	    }
+	  };
+
+	  InnerPopper.prototype.componentWillUnmount = function componentWillUnmount() {
+	    this.destroyPopperInstance();
+	  };
+
+	  InnerPopper.prototype.render = function render() {
+	    return unwrapArray(this.props.children)({
+	      ref: this.setPopperNode,
+	      style: this.getPopperStyle(),
+	      placement: this.getPopperPlacement(),
+	      outOfBoundaries: this.getOutOfBoundariesState(),
+	      scheduleUpdate: this.scheduleUpdate,
+	      arrowProps: {
+	        ref: this.setArrowNode,
+	        style: this.getArrowStyle()
 	      }
-	    }
-	  }, {
-	    key: 'render',
-	    value: function render() {
-	      return unwrapArray(this.props.children)({
-	        ref: this.setPopperNode,
-	        style: this.getPopperStyle(),
-	        placement: this.getPopperPlacement(),
-	        outOfBoundaries: this.getOutOfBoundariesState(),
-	        scheduleUpdate: this.scheduleUpdate,
-	        arrowProps: {
-	          ref: this.setArrowNode,
-	          style: this.getArrowStyle()
-	        }
-	      });
-	    }
-	  }]);
+	    });
+	  };
+
 	  return InnerPopper;
@@ -1381,4 +1346,4 @@ }(React.Component);
 	    null,
-	    function (_ref2) {
-	      var referenceNode = _ref2.referenceNode;
+	    function (_ref) {
+	      var referenceNode = _ref.referenceNode;
 	      return React.createElement(InnerPopper, _extends({ referenceElement: referenceNode }, props));
@@ -1445,4 +1410,2 @@ }
 	  function InnerReference() {
-	    var _ref;
-
 	    var _temp, _this, _ret;
@@ -1456,3 +1419,3 @@
 
-	    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = InnerReference.__proto__ || Object.getPrototypeOf(InnerReference)).call.apply(_ref, [this].concat(args))), _this), _this.refHandler = function (node) {
+	    return _ret = (_temp = (_this = possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.refHandler = function (node) {
 	      safeInvoke(_this.props.innerRef, node);
@@ -1463,9 +1426,7 @@ safeInvoke(_this.props.getReferenceRef, node);
 
-	  createClass(InnerReference, [{
-	    key: 'render',
-	    value: function render() {
-	      warning_1$1(this.props.getReferenceRef, '`Reference` should not be used outside of a `Manager` component.');
-	      return unwrapArray(this.props.children)({ ref: this.refHandler });
-	    }
-	  }]);
+	  InnerReference.prototype.render = function render() {
+	    warning_1$1(this.props.getReferenceRef, '`Reference` should not be used outside of a `Manager` component.');
+	    return unwrapArray(this.props.children)({ ref: this.refHandler });
+	  };
+
 	  return InnerReference;
@@ -1478,4 +1439,4 @@ }(React.Component);
 	    null,
-	    function (_ref2) {
-	      var getReferenceRef = _ref2.getReferenceRef;
+	    function (_ref) {
+	      var getReferenceRef = _ref.getReferenceRef;
 	      return React.createElement(InnerReference, _extends({ getReferenceRef: getReferenceRef }, props));
@@ -1482,0 +1443,0 @@ }

dist/index.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("popper.js")):"function"==typeof define&&define.amd?define(["exports","react","popper.js"],t):t(e.ReactPopper={},e.React,e.Popper)}(this,function(e,r,p){"use strict";var d="default"in r?r.default:r;p=p&&p.hasOwnProperty("default")?p.default:p;var t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function o(e,t){return e(t={exports:{}},t.exports),t.exports}function a(e){return function(){return e}}var i=function(){};i.thatReturns=a,i.thatReturnsFalse=a(!1),i.thatReturnsTrue=a(!0),i.thatReturnsNull=a(null),i.thatReturnsThis=function(){return this},i.thatReturnsArgument=function(e){return e};var s=i;var u=function(e,t,n,r,o,a,i,p){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[n,r,o,a,i,p],c=0;(s=new Error(t.replace(/%s/g,function(){return u[c++]}))).name="Invariant Violation"}throw s.framesToPop=1,s}},h=s,c=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}})()&&Object.assign;var y=o(function(e){e.exports=function(){function e(e,t,n,r,o,a){"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==a&&u(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}var n={array:e.isRequired=e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=s,n.PropTypes=n}()}),v="__global_unique_id__",b=function(){return t[v]=(t[v]||0)+1},m=o(function(e,t){t.__esModule=!0;var n=r(d),p=r(y),s=r(b);r(h);function r(e){return e&&e.__esModule?e:{default:e}}function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function f(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);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)}var l=1073741823;t.default=n.default.createContext||function(e,i){var t,n,r="__create-react-context-"+(0,s.default)()+"__",o=function(p){function s(){var e,t,n,r;u(this,s);for(var o=arguments.length,a=Array(o),i=0;i<o;i++)a[i]=arguments[i];return(e=t=c(this,p.call.apply(p,[this].concat(a)))).emitter=(n=t.props.value,r=[],{on:function(e){r.push(e)},off:function(t){r=r.filter(function(e){return e!==t})},get:function(){return n},set:function(e,t){n=e,r.forEach(function(e){return e(n,t)})}}),c(t,e)}return f(s,p),s.prototype.getChildContext=function(){var e;return(e={})[r]=this.emitter,e},s.prototype.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var t=this.props.value,n=e.value,r=void 0;((o=t)===(a=n)?0!==o||1/o==1/a:o!=o&&a!=a)?r=0:(r="function"==typeof i?i(t,n):l,0!=(r|=0)&&this.emitter.set(e.value,r))}var o,a},s.prototype.render=function(){return this.props.children},s}(d.Component);o.childContextTypes=((t={})[r]=p.default.object.isRequired,t);var a=function(a){function i(){var e,n;u(this,i);for(var t=arguments.length,r=Array(t),o=0;o<t;o++)r[o]=arguments[o];return(e=n=c(this,a.call.apply(a,[this].concat(r)))).state={value:n.getValue()},n.onUpdate=function(e,t){0!=((0|n.observedBits)&t)&&n.setState({value:n.getValue()})},c(n,e)}return f(i,a),i.prototype.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?l:t},i.prototype.componentDidMount=function(){this.context[r]&&this.context[r].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?l:e},i.prototype.componentWillUnmount=function(){this.context[r]&&this.context[r].off(this.onUpdate)},i.prototype.getValue=function(){return this.context[r]?this.context[r].get():e},i.prototype.render=function(){return e=this.props.children,(Array.isArray(e)?e[0]:e)(this.state.value);var e},i}(d.Component);return a.contextTypes=((n={})[r]=p.default.object,n),{Provider:o,Consumer:a}},e.exports=t.default});n(m);var g=n(o(function(e,t){t.__esModule=!0;var n=o(d),r=o(m);function o(e){return e&&e.__esModule?e:{default:e}}t.default=n.default.createContext||r.default,e.exports=t.default})),O=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},_=function(){function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}}(),P=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},w=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);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)},R=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},j=g({getReferenceRef:void 0,referenceNode:void 0}),x=function(e){function t(){O(this,t);var e=R(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.getReferenceRef=function(n){return e.setState(function(e){var t=e.context;return{context:P({},t,{referenceNode:n})}})},e.state={context:{getReferenceRef:e.getReferenceRef,referenceNode:void 0}},e}return w(t,e),_(t,[{key:"render",value:function(){return r.createElement(j.Provider,{value:this.state.context},this.props.children)}}]),t}(r.Component),E=function(e){return Array.isArray(e)?e[0]:e},S=function(e){for(var t=arguments.length,n=Array(1<t?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];if("function"==typeof e)return e.apply(void 0,function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}(n))},N={position:"absolute",top:0,left:0,opacity:0,pointerEvents:"none"},I={},A=function(e){function i(){var e,t,a;O(this,i);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=a=R(this,(e=i.__proto__||Object.getPrototypeOf(i)).call.apply(e,[this].concat(r)))).state={popperNode:void 0,arrowNode:void 0,popperInstance:void 0,data:void 0},a.setPopperNode=function(e){S(a.props.innerRef,e),a.setState({popperNode:e})},a.setArrowNode=function(e){return a.setState({arrowNode:e})},a.updateStateModifier={enabled:!0,order:900,fn:function(e){return a.setState({data:e}),e}},a.getOptions=function(){return{placement:a.props.placement,eventsEnabled:a.props.eventsEnabled,positionFixed:a.props.positionFixed,modifiers:P({},a.props.modifiers,{arrow:{enabled:!!a.state.arrowNode,element:a.state.arrowNode},applyStyle:{enabled:!1},updateStateModifier:a.updateStateModifier})}},a.getPopperStyle=function(){return a.state.popperNode&&a.state.data?P({position:a.state.data.offsets.popper.position},a.state.data.styles):N},a.getPopperPlacement=function(){return a.state.data?a.state.data.placement:void 0},a.getArrowStyle=function(){return a.state.arrowNode&&a.state.data?a.state.data.arrowStyles:I},a.getOutOfBoundariesState=function(){return a.state.data?a.state.data.hide:void 0},a.initPopperInstance=function(){var e=a.props.referenceElement,t=a.state,n=t.popperNode,r=t.popperInstance;if(e&&n&&!r){var o=new p(e,n,a.getOptions());return a.setState({popperInstance:o}),!0}return!1},a.destroyPopperInstance=function(e){a.state.popperInstance&&a.state.popperInstance.destroy(),a.setState({popperInstance:void 0},e)},a.updatePopperInstance=function(){a.state.popperInstance&&a.destroyPopperInstance(function(){return a.initPopperInstance()})},a.scheduleUpdate=function(){a.state.popperInstance&&a.state.popperInstance.scheduleUpdate()},R(a,t)}return w(i,e),_(i,[{key:"componentDidUpdate",value:function(e,t){this.initPopperInstance()||this.props.placement===e.placement&&this.props.eventsEnabled===e.eventsEnabled&&this.state.arrowNode===t.arrowNode&&this.state.popperNode===t.popperNode&&this.props.referenceElement===e.referenceElement&&this.props.positionFixed===e.positionFixed||this.updatePopperInstance()}},{key:"componentWillUnmount",value:function(){this.state.popperInstance&&this.state.popperInstance.destroy()}},{key:"render",value:function(){return E(this.props.children)({ref:this.setPopperNode,style:this.getPopperStyle(),placement:this.getPopperPlacement(),outOfBoundaries:this.getOutOfBoundariesState(),scheduleUpdate:this.scheduleUpdate,arrowProps:{ref:this.setArrowNode,style:this.getArrowStyle()}})}}]),i}(r.Component);A.defaultProps={placement:"bottom",eventsEnabled:!0,referenceElement:void 0,positionFixed:!1};var C=p.placements;var T=function(){},k=function(e){function i(){var e,t,n;O(this,i);for(var r=arguments.length,o=Array(r),a=0;a<r;a++)o[a]=arguments[a];return(t=n=R(this,(e=i.__proto__||Object.getPrototypeOf(i)).call.apply(e,[this].concat(o)))).refHandler=function(e){S(n.props.innerRef,e),S(n.props.getReferenceRef,e)},R(n,t)}return w(i,e),_(i,[{key:"render",value:function(){return T(this.props.getReferenceRef,"`Reference` should not be used outside of a `Manager` component."),E(this.props.children)({ref:this.refHandler})}}]),i}(r.Component);e.Popper=function(n){return r.createElement(j.Consumer,null,function(e){var t=e.referenceNode;return r.createElement(A,P({referenceElement:t},n))})},e.placements=C,e.Manager=x,e.Reference=function(n){return r.createElement(j.Consumer,null,function(e){var t=e.getReferenceRef;return r.createElement(k,P({getReferenceRef:t},n))})},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("popper.js")):"function"==typeof define&&define.amd?define(["exports","react","popper.js"],t):t(e.ReactPopper={},e.React,e.Popper)}(this,function(e,r,i){"use strict";var d="default"in r?r.default:r;i=i&&i.hasOwnProperty("default")?i.default:i;var t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function o(e,t){return e(t={exports:{}},t.exports),t.exports}function a(e){return function(){return e}}var p=function(){};p.thatReturns=a,p.thatReturnsFalse=a(!1),p.thatReturnsTrue=a(!0),p.thatReturnsNull=a(null),p.thatReturnsThis=function(){return this},p.thatReturnsArgument=function(e){return e};var s=p;var c=function(e,t,n,r,o,a,p,i){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,o,a,p,i],u=0;(s=new Error(t.replace(/%s/g,function(){return c[u++]}))).name="Invariant Violation"}throw s.framesToPop=1,s}},h=s,u=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}})()&&Object.assign;var y=o(function(e){e.exports=function(){function e(e,t,n,r,o,a){"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==a&&c(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}var n={array:e.isRequired=e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=s,n.PropTypes=n}()}),v="__global_unique_id__",m=function(){return t[v]=(t[v]||0)+1},b=o(function(e,t){t.__esModule=!0;var n=r(d),i=r(y),s=r(m);r(h);function r(e){return e&&e.__esModule?e:{default:e}}function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function f(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);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)}var l=1073741823;t.default=n.default.createContext||function(e,p){var t,n,r="__create-react-context-"+(0,s.default)()+"__",o=function(i){function s(){var e,t,n,r;c(this,s);for(var o=arguments.length,a=Array(o),p=0;p<o;p++)a[p]=arguments[p];return(e=t=u(this,i.call.apply(i,[this].concat(a)))).emitter=(n=t.props.value,r=[],{on:function(e){r.push(e)},off:function(t){r=r.filter(function(e){return e!==t})},get:function(){return n},set:function(e,t){n=e,r.forEach(function(e){return e(n,t)})}}),u(t,e)}return f(s,i),s.prototype.getChildContext=function(){var e;return(e={})[r]=this.emitter,e},s.prototype.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var t=this.props.value,n=e.value,r=void 0;((o=t)===(a=n)?0!==o||1/o==1/a:o!=o&&a!=a)?r=0:(r="function"==typeof p?p(t,n):l,0!=(r|=0)&&this.emitter.set(e.value,r))}var o,a},s.prototype.render=function(){return this.props.children},s}(d.Component);o.childContextTypes=((t={})[r]=i.default.object.isRequired,t);var a=function(a){function p(){var e,n;c(this,p);for(var t=arguments.length,r=Array(t),o=0;o<t;o++)r[o]=arguments[o];return(e=n=u(this,a.call.apply(a,[this].concat(r)))).state={value:n.getValue()},n.onUpdate=function(e,t){0!=((0|n.observedBits)&t)&&n.setState({value:n.getValue()})},u(n,e)}return f(p,a),p.prototype.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?l:t},p.prototype.componentDidMount=function(){this.context[r]&&this.context[r].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?l:e},p.prototype.componentWillUnmount=function(){this.context[r]&&this.context[r].off(this.onUpdate)},p.prototype.getValue=function(){return this.context[r]?this.context[r].get():e},p.prototype.render=function(){return e=this.props.children,(Array.isArray(e)?e[0]:e)(this.state.value);var e},p}(d.Component);return a.contextTypes=((n={})[r]=i.default.object,n),{Provider:o,Consumer:a}},e.exports=t.default});n(b);var g=n(o(function(e,t){t.__esModule=!0;var n=o(d),r=o(b);function o(e){return e&&e.__esModule?e:{default:e}}t.default=n.default.createContext||r.default,e.exports=t.default})),O=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},w=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},P=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);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(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},R=g({getReferenceRef:void 0,referenceNode:void 0}),x=function(t){function n(){O(this,n);var e=_(this,t.call(this));return e.getReferenceRef=function(n){return e.setState(function(e){var t=e.context;return{context:w({},t,{referenceNode:n})}})},e.state={context:{getReferenceRef:e.getReferenceRef,referenceNode:void 0}},e}return P(n,t),n.prototype.render=function(){return r.createElement(R.Provider,{value:this.state.context},this.props.children)},n}(r.Component),j=function(e){return Array.isArray(e)?e[0]:e},E=function(e){for(var t=arguments.length,n=Array(1<t?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];if("function"==typeof e)return e.apply(void 0,n)},N={position:"absolute",top:0,left:0,opacity:0,pointerEvents:"none"},S={},I=function(a){function p(){var e,n;O(this,p);for(var t=arguments.length,r=Array(t),o=0;o<t;o++)r[o]=arguments[o];return(e=n=_(this,a.call.apply(a,[this].concat(r)))).state={data:void 0,placement:void 0},n.popperNode=null,n.arrowNode=null,n.setPopperNode=function(e){n.popperNode!==e&&(E(n.props.innerRef,e),n.popperNode=e,n.popperInstance||n.updatePopperInstance())},n.setArrowNode=function(e){n.arrowNode!==e&&(n.arrowNode=e,n.popperInstance||n.updatePopperInstance())},n.updateStateModifier={enabled:!0,order:900,fn:function(e){var t=e.placement;return n.setState({data:e,placement:t},t!==n.state.placement?n.scheduleUpdate:void 0),e}},n.getOptions=function(){return{placement:n.props.placement,eventsEnabled:n.props.eventsEnabled,positionFixed:n.props.positionFixed,modifiers:w({},n.props.modifiers,{arrow:{enabled:!!n.arrowNode,element:n.arrowNode},applyStyle:{enabled:!1},updateStateModifier:n.updateStateModifier})}},n.getPopperStyle=function(){return n.popperNode&&n.state.data?w({position:n.state.data.offsets.popper.position},n.state.data.styles):N},n.getPopperPlacement=function(){return n.state.data?n.state.placement:void 0},n.getArrowStyle=function(){return n.arrowNode&&n.state.data?n.state.data.arrowStyles:S},n.getOutOfBoundariesState=function(){return n.state.data?n.state.data.hide:void 0},n.destroyPopperInstance=function(){n.popperInstance&&(n.popperInstance.destroy(),n.popperInstance=null)},n.updatePopperInstance=function(){n.destroyPopperInstance();var e=n.popperNode,t=n.props.referenceElement;t&&e&&(n.popperInstance=new i(t,e,n.getOptions()))},n.scheduleUpdate=function(){n.popperInstance&&n.popperInstance.scheduleUpdate()},_(n,e)}return P(p,a),p.prototype.componentDidUpdate=function(e,t){this.props.placement===e.placement&&this.props.eventsEnabled===e.eventsEnabled&&this.props.referenceElement===e.referenceElement&&this.props.positionFixed===e.positionFixed?t.placement!==this.state.placement&&this.scheduleUpdate():this.updatePopperInstance()},p.prototype.componentWillUnmount=function(){this.destroyPopperInstance()},p.prototype.render=function(){return j(this.props.children)({ref:this.setPopperNode,style:this.getPopperStyle(),placement:this.getPopperPlacement(),outOfBoundaries:this.getOutOfBoundariesState(),scheduleUpdate:this.scheduleUpdate,arrowProps:{ref:this.setArrowNode,style:this.getArrowStyle()}})},p}(r.Component);I.defaultProps={placement:"bottom",eventsEnabled:!0,referenceElement:void 0,positionFixed:!1};var C=i.placements;var T=function(){},A=function(a){function p(){var e,t;O(this,p);for(var n=arguments.length,r=Array(n),o=0;o<n;o++)r[o]=arguments[o];return(e=t=_(this,a.call.apply(a,[this].concat(r)))).refHandler=function(e){E(t.props.innerRef,e),E(t.props.getReferenceRef,e)},_(t,e)}return P(p,a),p.prototype.render=function(){return T(this.props.getReferenceRef,"`Reference` should not be used outside of a `Manager` component."),j(this.props.children)({ref:this.refHandler})},p}(r.Component);e.Popper=function(n){return r.createElement(R.Consumer,null,function(e){var t=e.referenceNode;return r.createElement(I,w({referenceElement:t},n))})},e.placements=C,e.Manager=x,e.Reference=function(n){return r.createElement(R.Consumer,null,function(e){var t=e.getReferenceRef;return r.createElement(A,w({getReferenceRef:t},n))})},Object.defineProperty(e,"__esModule",{value:!0})});

lib/cjs/__typings__/main-test.js

@@ -8,6 +8,2 @@ 'use strict';
 
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
 var _extends2 = require('babel-runtime/helpers/extends');
@@ -48,3 +44,3 @@
       (_React$createElement = { eventsEnabled: 'foo'
-      }, (0, _defineProperty3.default)(_React$createElement, 'eventsEnabled', true), (0, _defineProperty3.default)(_React$createElement, 'positionFixed', 2), (0, _defineProperty3.default)(_React$createElement, 'positionFixed', true), (0, _defineProperty3.default)(_React$createElement, 'modifiers', { flip: { enabled: 'bar', order: 'foo' } }), (0, _defineProperty3.default)(_React$createElement, 'modifiers', { flip: { enabled: false } }), _React$createElement),
+      }, _React$createElement['eventsEnabled'] = true, _React$createElement.positionFixed = 2, _React$createElement['positionFixed'] = true, _React$createElement.modifiers = { flip: { enabled: 'bar', order: 'foo' } }, _React$createElement['modifiers'] = { flip: { enabled: false } }, _React$createElement),
       function (_ref2) {
@@ -51,0 +47,0 @@ var ref = _ref2.ref,

lib/cjs/Manager.js

@@ -12,6 +12,2 @@ "use strict";
 
-var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
 var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
@@ -21,6 +17,2 @@
 
-var _createClass2 = require("babel-runtime/helpers/createClass");
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
 var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
@@ -54,3 +46,3 @@
 
-    var _this = (0, _possibleConstructorReturn3.default)(this, (Manager.__proto__ || (0, _getPrototypeOf2.default)(Manager)).call(this));
+    var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this));
 
@@ -75,12 +67,10 @@ _this.getReferenceRef = function (referenceNode) {
 
-  (0, _createClass3.default)(Manager, [{
-    key: "render",
-    value: function render() {
-      return React.createElement(
-        ManagerContext.Provider,
-        { value: this.state.context },
-        this.props.children
-      );
-    }
-  }]);
+  Manager.prototype.render = function render() {
+    return React.createElement(
+      ManagerContext.Provider,
+      { value: this.state.context },
+      this.props.children
+    );
+  };
+
   return Manager;
@@ -87,0 +77,0 @@ }(React.Component);

lib/cjs/Popper.js

@@ -12,6 +12,2 @@ 'use strict';
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
 var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
@@ -21,6 +17,2 @@
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
@@ -66,4 +58,2 @@
   function InnerPopper() {
-    var _ref;
-
     var _temp, _this, _ret;
@@ -77,12 +67,17 @@
 
-    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = InnerPopper.__proto__ || (0, _getPrototypeOf2.default)(InnerPopper)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      popperNode: undefined,
-      arrowNode: undefined,
-      popperInstance: undefined,
-      data: undefined
-    }, _this.setPopperNode = function (popperNode) {
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
+      data: undefined,
+      placement: undefined
+    }, _this.popperNode = null, _this.arrowNode = null, _this.setPopperNode = function (popperNode) {
+      if (_this.popperNode === popperNode) return;
+
       (0, _utils.safeInvoke)(_this.props.innerRef, popperNode);
-      _this.setState({ popperNode: popperNode });
+      _this.popperNode = popperNode;
+
+      if (!_this.popperInstance) _this.updatePopperInstance();
     }, _this.setArrowNode = function (arrowNode) {
-      return _this.setState({ arrowNode: arrowNode });
+      if (_this.arrowNode === arrowNode) return;
+      _this.arrowNode = arrowNode;
+
+      if (!_this.popperInstance) _this.updatePopperInstance();
     }, _this.updateStateModifier = {
@@ -92,3 +87,5 @@ enabled: true,
       fn: function fn(data) {
-        _this.setState({ data: data });
+        var placement = data.placement;
+
+        _this.setState({ data: data, placement: placement }, placement !== _this.state.placement ? _this.scheduleUpdate : undefined);
         return data;
@@ -103,4 +100,4 @@ }
           arrow: {
-            enabled: !!_this.state.arrowNode,
-            element: _this.state.arrowNode
+            enabled: !!_this.arrowNode,
+            element: _this.arrowNode
           },
@@ -112,37 +109,30 @@ applyStyle: { enabled: false },
     }, _this.getPopperStyle = function () {
-      return !_this.state.popperNode || !_this.state.data ? initialStyle : (0, _extends3.default)({
+      return !_this.popperNode || !_this.state.data ? initialStyle : (0, _extends3.default)({
         position: _this.state.data.offsets.popper.position
       }, _this.state.data.styles);
     }, _this.getPopperPlacement = function () {
-      return !_this.state.data ? undefined : _this.state.data.placement;
+      return !_this.state.data ? undefined : _this.state.placement;
     }, _this.getArrowStyle = function () {
-      return !_this.state.arrowNode || !_this.state.data ? initialArrowStyle : _this.state.data.arrowStyles;
+      return !_this.arrowNode || !_this.state.data ? initialArrowStyle : _this.state.data.arrowStyles;
     }, _this.getOutOfBoundariesState = function () {
       return _this.state.data ? _this.state.data.hide : undefined;
-    }, _this.initPopperInstance = function () {
+    }, _this.destroyPopperInstance = function () {
+      if (!_this.popperInstance) return;
+
+      _this.popperInstance.destroy();
+      _this.popperInstance = null;
+    }, _this.updatePopperInstance = function () {
+      _this.destroyPopperInstance();
+
+      var _this2 = _this,
+          popperNode = _this2.popperNode;
       var referenceElement = _this.props.referenceElement;
-      var _this$state = _this.state,
-          popperNode = _this$state.popperNode,
-          popperInstance = _this$state.popperInstance;
 
-      if (referenceElement && popperNode && !popperInstance) {
-        var _popperInstance = new _popper2.default(referenceElement, popperNode, _this.getOptions());
-        _this.setState({ popperInstance: _popperInstance });
-        return true;
-      }
-      return false;
-    }, _this.destroyPopperInstance = function (callback) {
-      if (_this.state.popperInstance) {
-        _this.state.popperInstance.destroy();
-      }
-      _this.setState({ popperInstance: undefined }, callback);
-    }, _this.updatePopperInstance = function () {
-      if (_this.state.popperInstance) {
-        _this.destroyPopperInstance(function () {
-          return _this.initPopperInstance();
-        });
-      }
+
+      if (!referenceElement || !popperNode) return;
+
+      _this.popperInstance = new _popper2.default(referenceElement, popperNode, _this.getOptions());
     }, _this.scheduleUpdate = function () {
-      if (_this.state.popperInstance) {
-        _this.state.popperInstance.scheduleUpdate();
+      if (_this.popperInstance) {
+        _this.popperInstance.scheduleUpdate();
       }
@@ -152,39 +142,36 @@ }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
 
-  (0, _createClass3.default)(InnerPopper, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps, prevState) {
-      // If needed, initialize the Popper.js instance
-      // it will return `true` if it initialized a new instance, or `false` otherwise
-      // if it returns `false`, we make sure Popper props haven't changed, and update
-      // the Popper.js instance if needed
-      if (!this.initPopperInstance()) {
-        // If the Popper.js options have changed, update the instance (destroy + create)
-        if (this.props.placement !== prevProps.placement || this.props.eventsEnabled !== prevProps.eventsEnabled || this.state.arrowNode !== prevState.arrowNode || this.state.popperNode !== prevState.popperNode || this.props.referenceElement !== prevProps.referenceElement || this.props.positionFixed !== prevProps.positionFixed) {
-          this.updatePopperInstance();
-        }
-      }
+  InnerPopper.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    // If the Popper.js options have changed, update the instance (destroy + create)
+    if (this.props.placement !== prevProps.placement || this.props.eventsEnabled !== prevProps.eventsEnabled || this.props.referenceElement !== prevProps.referenceElement || this.props.positionFixed !== prevProps.positionFixed) {
+      this.updatePopperInstance();
+      return;
     }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      if (this.state.popperInstance) {
-        this.state.popperInstance.destroy();
+
+    // A placement difference in state means popper determined a new placement
+    // apart from the props value. By the time the popper element is rendered with
+    // the new position Popper has already measured it, if the place change triggers
+    // a size change it will result in a misaligned popper. So we schedule an update to be sure.
+    if (prevState.placement !== this.state.placement) {
+      this.scheduleUpdate();
+    }
+  };
+
+  InnerPopper.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.destroyPopperInstance();
+  };
+
+  InnerPopper.prototype.render = function render() {
+    return (0, _utils.unwrapArray)(this.props.children)({
+      ref: this.setPopperNode,
+      style: this.getPopperStyle(),
+      placement: this.getPopperPlacement(),
+      outOfBoundaries: this.getOutOfBoundariesState(),
+      scheduleUpdate: this.scheduleUpdate,
+      arrowProps: {
+        ref: this.setArrowNode,
+        style: this.getArrowStyle()
       }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return (0, _utils.unwrapArray)(this.props.children)({
-        ref: this.setPopperNode,
-        style: this.getPopperStyle(),
-        placement: this.getPopperPlacement(),
-        outOfBoundaries: this.getOutOfBoundariesState(),
-        scheduleUpdate: this.scheduleUpdate,
-        arrowProps: {
-          ref: this.setArrowNode,
-          style: this.getArrowStyle()
-        }
-      });
-    }
-  }]);
+    });
+  };
+
   return InnerPopper;
@@ -207,4 +194,4 @@ }(React.Component);
     null,
-    function (_ref2) {
-      var referenceNode = _ref2.referenceNode;
+    function (_ref) {
+      var referenceNode = _ref.referenceNode;
       return React.createElement(InnerPopper, (0, _extends3.default)({ referenceElement: referenceNode }, props));
@@ -211,0 +198,0 @@ }

lib/cjs/Reference.js

@@ -11,6 +11,2 @@ 'use strict';
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
 var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
@@ -20,6 +16,2 @@
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
@@ -55,4 +47,2 @@
   function InnerReference() {
-    var _ref;
-
     var _temp, _this, _ret;
@@ -66,3 +56,3 @@
 
-    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = InnerReference.__proto__ || (0, _getPrototypeOf2.default)(InnerReference)).call.apply(_ref, [this].concat(args))), _this), _this.refHandler = function (node) {
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.refHandler = function (node) {
       (0, _utils.safeInvoke)(_this.props.innerRef, node);
@@ -73,9 +63,7 @@ (0, _utils.safeInvoke)(_this.props.getReferenceRef, node);
 
-  (0, _createClass3.default)(InnerReference, [{
-    key: 'render',
-    value: function render() {
-      (0, _warning2.default)(this.props.getReferenceRef, '`Reference` should not be used outside of a `Manager` component.');
-      return (0, _utils.unwrapArray)(this.props.children)({ ref: this.refHandler });
-    }
-  }]);
+  InnerReference.prototype.render = function render() {
+    (0, _warning2.default)(this.props.getReferenceRef, '`Reference` should not be used outside of a `Manager` component.');
+    return (0, _utils.unwrapArray)(this.props.children)({ ref: this.refHandler });
+  };
+
   return InnerReference;
@@ -88,4 +76,4 @@ }(React.Component);
     null,
-    function (_ref2) {
-      var getReferenceRef = _ref2.getReferenceRef;
+    function (_ref) {
+      var getReferenceRef = _ref.getReferenceRef;
       return React.createElement(InnerReference, (0, _extends3.default)({ getReferenceRef: getReferenceRef }, props));
@@ -92,0 +80,0 @@ }

lib/cjs/utils.js

@@ -6,10 +6,4 @@ "use strict";
 });
-exports.safeInvoke = exports.unwrapArray = undefined;
 
-var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");
 
-var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
@@ -33,4 +27,4 @@ * Takes an argument and if it's an array, returns the first item in the array,
   if (typeof fn === "function") {
-    return fn.apply(undefined, (0, _toConsumableArray3.default)(args));
+    return fn.apply(undefined, args);
   }
 };

lib/esm/__typings__/main-test.js

@@ -1,2 +0,1 @@
-import _defineProperty from 'babel-runtime/helpers/defineProperty';
 import _extends from 'babel-runtime/helpers/extends';
@@ -31,3 +30,3 @@
       (_React$createElement = { eventsEnabled: 'foo'
-      }, _defineProperty(_React$createElement, 'eventsEnabled', true), _defineProperty(_React$createElement, 'positionFixed', 2), _defineProperty(_React$createElement, 'positionFixed', true), _defineProperty(_React$createElement, 'modifiers', { flip: { enabled: 'bar', order: 'foo' } }), _defineProperty(_React$createElement, 'modifiers', { flip: { enabled: false } }), _React$createElement),
+      }, _React$createElement['eventsEnabled'] = true, _React$createElement.positionFixed = 2, _React$createElement['positionFixed'] = true, _React$createElement.modifiers = { flip: { enabled: 'bar', order: 'foo' } }, _React$createElement['modifiers'] = { flip: { enabled: false } }, _React$createElement),
       function (_ref2) {
@@ -34,0 +33,0 @@ var ref = _ref2.ref,

lib/esm/Manager.js

 import _extends from "babel-runtime/helpers/extends";
-import _Object$getPrototypeOf from "babel-runtime/core-js/object/get-prototype-of";
 import _classCallCheck from "babel-runtime/helpers/classCallCheck";
-import _createClass from "babel-runtime/helpers/createClass";
 import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
@@ -18,3 +16,3 @@ import _inherits from "babel-runtime/helpers/inherits";
 
-    var _this = _possibleConstructorReturn(this, (Manager.__proto__ || _Object$getPrototypeOf(Manager)).call(this));
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this));
 
@@ -39,12 +37,9 @@ _this.getReferenceRef = function (referenceNode) {
 
-  _createClass(Manager, [{
-    key: "render",
-    value: function render() {
-      return React.createElement(
-        ManagerContext.Provider,
-        { value: this.state.context },
-        this.props.children
-      );
-    }
-  }]);
+  Manager.prototype.render = function render() {
+    return React.createElement(
+      ManagerContext.Provider,
+      { value: this.state.context },
+      this.props.children
+    );
+  };
 
@@ -51,0 +46,0 @@ return Manager;

lib/esm/Popper.js

 import _extends from 'babel-runtime/helpers/extends';
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
@@ -27,4 +25,2 @@ import _inherits from 'babel-runtime/helpers/inherits';
   function InnerPopper() {
-    var _ref;
-
     var _temp, _this, _ret;
@@ -38,12 +34,17 @@
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = InnerPopper.__proto__ || _Object$getPrototypeOf(InnerPopper)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      popperNode: undefined,
-      arrowNode: undefined,
-      popperInstance: undefined,
-      data: undefined
-    }, _this.setPopperNode = function (popperNode) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
+      data: undefined,
+      placement: undefined
+    }, _this.popperNode = null, _this.arrowNode = null, _this.setPopperNode = function (popperNode) {
+      if (_this.popperNode === popperNode) return;
+
       safeInvoke(_this.props.innerRef, popperNode);
-      _this.setState({ popperNode: popperNode });
+      _this.popperNode = popperNode;
+
+      if (!_this.popperInstance) _this.updatePopperInstance();
     }, _this.setArrowNode = function (arrowNode) {
-      return _this.setState({ arrowNode: arrowNode });
+      if (_this.arrowNode === arrowNode) return;
+      _this.arrowNode = arrowNode;
+
+      if (!_this.popperInstance) _this.updatePopperInstance();
     }, _this.updateStateModifier = {
@@ -53,3 +54,5 @@ enabled: true,
       fn: function fn(data) {
-        _this.setState({ data: data });
+        var placement = data.placement;
+
+        _this.setState({ data: data, placement: placement }, placement !== _this.state.placement ? _this.scheduleUpdate : undefined);
         return data;
@@ -64,4 +67,4 @@ }
           arrow: {
-            enabled: !!_this.state.arrowNode,
-            element: _this.state.arrowNode
+            enabled: !!_this.arrowNode,
+            element: _this.arrowNode
           },
@@ -73,37 +76,30 @@ applyStyle: { enabled: false },
     }, _this.getPopperStyle = function () {
-      return !_this.state.popperNode || !_this.state.data ? initialStyle : _extends({
+      return !_this.popperNode || !_this.state.data ? initialStyle : _extends({
         position: _this.state.data.offsets.popper.position
       }, _this.state.data.styles);
     }, _this.getPopperPlacement = function () {
-      return !_this.state.data ? undefined : _this.state.data.placement;
+      return !_this.state.data ? undefined : _this.state.placement;
     }, _this.getArrowStyle = function () {
-      return !_this.state.arrowNode || !_this.state.data ? initialArrowStyle : _this.state.data.arrowStyles;
+      return !_this.arrowNode || !_this.state.data ? initialArrowStyle : _this.state.data.arrowStyles;
     }, _this.getOutOfBoundariesState = function () {
       return _this.state.data ? _this.state.data.hide : undefined;
-    }, _this.initPopperInstance = function () {
+    }, _this.destroyPopperInstance = function () {
+      if (!_this.popperInstance) return;
+
+      _this.popperInstance.destroy();
+      _this.popperInstance = null;
+    }, _this.updatePopperInstance = function () {
+      _this.destroyPopperInstance();
+
+      var _this2 = _this,
+          popperNode = _this2.popperNode;
       var referenceElement = _this.props.referenceElement;
-      var _this$state = _this.state,
-          popperNode = _this$state.popperNode,
-          popperInstance = _this$state.popperInstance;
 
-      if (referenceElement && popperNode && !popperInstance) {
-        var _popperInstance = new PopperJS(referenceElement, popperNode, _this.getOptions());
-        _this.setState({ popperInstance: _popperInstance });
-        return true;
-      }
-      return false;
-    }, _this.destroyPopperInstance = function (callback) {
-      if (_this.state.popperInstance) {
-        _this.state.popperInstance.destroy();
-      }
-      _this.setState({ popperInstance: undefined }, callback);
-    }, _this.updatePopperInstance = function () {
-      if (_this.state.popperInstance) {
-        _this.destroyPopperInstance(function () {
-          return _this.initPopperInstance();
-        });
-      }
+
+      if (!referenceElement || !popperNode) return;
+
+      _this.popperInstance = new PopperJS(referenceElement, popperNode, _this.getOptions());
     }, _this.scheduleUpdate = function () {
-      if (_this.state.popperInstance) {
-        _this.state.popperInstance.scheduleUpdate();
+      if (_this.popperInstance) {
+        _this.popperInstance.scheduleUpdate();
       }
@@ -113,40 +109,36 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
 
-  _createClass(InnerPopper, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps, prevState) {
-      // If needed, initialize the Popper.js instance
-      // it will return `true` if it initialized a new instance, or `false` otherwise
-      // if it returns `false`, we make sure Popper props haven't changed, and update
-      // the Popper.js instance if needed
-      if (!this.initPopperInstance()) {
-        // If the Popper.js options have changed, update the instance (destroy + create)
-        if (this.props.placement !== prevProps.placement || this.props.eventsEnabled !== prevProps.eventsEnabled || this.state.arrowNode !== prevState.arrowNode || this.state.popperNode !== prevState.popperNode || this.props.referenceElement !== prevProps.referenceElement || this.props.positionFixed !== prevProps.positionFixed) {
-          this.updatePopperInstance();
-        }
-      }
+  InnerPopper.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    // If the Popper.js options have changed, update the instance (destroy + create)
+    if (this.props.placement !== prevProps.placement || this.props.eventsEnabled !== prevProps.eventsEnabled || this.props.referenceElement !== prevProps.referenceElement || this.props.positionFixed !== prevProps.positionFixed) {
+      this.updatePopperInstance();
+      return;
     }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      if (this.state.popperInstance) {
-        this.state.popperInstance.destroy();
-      }
+
+    // A placement difference in state means popper determined a new placement
+    // apart from the props value. By the time the popper element is rendered with
+    // the new position Popper has already measured it, if the place change triggers
+    // a size change it will result in a misaligned popper. So we schedule an update to be sure.
+    if (prevState.placement !== this.state.placement) {
+      this.scheduleUpdate();
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      return unwrapArray(this.props.children)({
-        ref: this.setPopperNode,
-        style: this.getPopperStyle(),
-        placement: this.getPopperPlacement(),
-        outOfBoundaries: this.getOutOfBoundariesState(),
-        scheduleUpdate: this.scheduleUpdate,
-        arrowProps: {
-          ref: this.setArrowNode,
-          style: this.getArrowStyle()
-        }
-      });
-    }
-  }]);
+  };
 
+  InnerPopper.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.destroyPopperInstance();
+  };
+
+  InnerPopper.prototype.render = function render() {
+    return unwrapArray(this.props.children)({
+      ref: this.setPopperNode,
+      style: this.getPopperStyle(),
+      placement: this.getPopperPlacement(),
+      outOfBoundaries: this.getOutOfBoundariesState(),
+      scheduleUpdate: this.scheduleUpdate,
+      arrowProps: {
+        ref: this.setArrowNode,
+        style: this.getArrowStyle()
+      }
+    });
+  };
+
   return InnerPopper;
@@ -168,4 +160,4 @@ }(React.Component);
     null,
-    function (_ref2) {
-      var referenceNode = _ref2.referenceNode;
+    function (_ref) {
+      var referenceNode = _ref.referenceNode;
       return React.createElement(InnerPopper, _extends({ referenceElement: referenceNode }, props));
@@ -172,0 +164,0 @@ }

lib/esm/Reference.js

 import _extends from 'babel-runtime/helpers/extends';
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
@@ -16,4 +14,2 @@ import _inherits from 'babel-runtime/helpers/inherits';
   function InnerReference() {
-    var _ref;
-
     var _temp, _this, _ret;
@@ -27,3 +23,3 @@
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = InnerReference.__proto__ || _Object$getPrototypeOf(InnerReference)).call.apply(_ref, [this].concat(args))), _this), _this.refHandler = function (node) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.refHandler = function (node) {
       safeInvoke(_this.props.innerRef, node);
@@ -34,9 +30,6 @@ safeInvoke(_this.props.getReferenceRef, node);
 
-  _createClass(InnerReference, [{
-    key: 'render',
-    value: function render() {
-      warning(this.props.getReferenceRef, '`Reference` should not be used outside of a `Manager` component.');
-      return unwrapArray(this.props.children)({ ref: this.refHandler });
-    }
-  }]);
+  InnerReference.prototype.render = function render() {
+    warning(this.props.getReferenceRef, '`Reference` should not be used outside of a `Manager` component.');
+    return unwrapArray(this.props.children)({ ref: this.refHandler });
+  };
 
@@ -50,4 +43,4 @@ return InnerReference;
     null,
-    function (_ref2) {
-      var getReferenceRef = _ref2.getReferenceRef;
+    function (_ref) {
+      var getReferenceRef = _ref.getReferenceRef;
       return React.createElement(InnerReference, _extends({ getReferenceRef: getReferenceRef }, props));
@@ -54,0 +47,0 @@ }

lib/esm/utils.js

@@ -1,2 +0,1 @@
-import _toConsumableArray from "babel-runtime/helpers/toConsumableArray";
 
@@ -22,4 +21,4 @@
   if (typeof fn === "function") {
-    return fn.apply(undefined, _toConsumableArray(args));
+    return fn.apply(undefined, args);
   }
 };

package.json

 {
   "name": "react-popper",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React wrapper around Popper.js",
@@ -61,3 +61,2 @@ "license": "MIT",
   "dependencies": {
-    "babel-runtime": "6.x.x",
     "create-react-context": "^0.2.1",
@@ -76,2 +75,3 @@ "popper.js": "^1.14.1",
     "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
@@ -78,0 +78,0 @@ "babel-plugin-transform-runtime": "^6.23.0",

README.md

@@ -25,3 +25,3 @@ ## React Popper
 ```html
-<script src="https://unpkg.com/react-popper/dist/react-popper.js"></script>
+<script src="https://unpkg.com/react-popper/dist/index.umd.js"></script>
 ```
@@ -64,3 +64,3 @@
 [fragments](https://reactjs.org/docs/fragments.html), this means that you will need to
-wrap `<Reference />` and `<Popper />` into a `<div />` to make `react-popper` work.
+wrap `<Reference />` and `<Popper />` into a single, common, `<div />` to make `react-popper` work.
 
@@ -76,2 +76,3 @@ ### API documentation
 <Popper
+  innerRef={(node) => this.popperNode = node}
   placement="right"
@@ -122,2 +123,9 @@ modifiers={{ preventOverflow: { enabled: false } }}
 
+##### `innerRef`
+```js
+innerRef?: (?HTMLElement) => void
+```
+
+Function that can be used to obtain popper reference
+
 ##### `placement`
@@ -124,0 +132,0 @@

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

Dependency count

6

decreased by-14.29%

Number of lines in readme file

283

increased by2.91%

Worsened metrics

Total package byte prevSize

117592

decreased by-4.1%

Dev dependency count

45

increased by2.27%

Lines of code

1944

decreased by-6%

Dependency changes

• - Removedbabel-runtime@6.x.x

• - Removedbabel-runtime@6.26.0(transitive)

• - Removedcore-js@2.6.12(transitive)

• - Removedregenerator-runtime@0.11.1(transitive)