react-popper - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

dist/react-popper.js

@@ -1,276 +0,284 @@
-'use strict';
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('create-react-context'), require('popper.js'), require('warning')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'create-react-context', 'popper.js', 'warning'], factory) :
+  (factory((global['react-popper'] = {}),global.react,global.createContext,global.PopperJS,global.warning));
+}(this, (function (exports,React,createContext,PopperJS,warning) { 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+  var React__default = 'default' in React ? React['default'] : React;
+  createContext = createContext && createContext.hasOwnProperty('default') ? createContext['default'] : createContext;
+  PopperJS = PopperJS && PopperJS.hasOwnProperty('default') ? PopperJS['default'] : PopperJS;
+  warning = warning && warning.hasOwnProperty('default') ? warning['default'] : warning;
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+  var classCallCheck = function (instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  };
 
-var React = require('react');
-var React__default = _interopDefault(React);
-var createContext = _interopDefault(require('create-react-context'));
-var PopperJS = _interopDefault(require('popper.js'));
+  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);
+      }
+    }
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
 
-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);
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-  }
 
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
+    return target;
   };
-}();
 
-var _extends = Object.assign || function (target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i];
+  var inherits = function (subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    }
 
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        target[key] = source[key];
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
       }
-    }
-  }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  };
 
-  return target;
-};
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
+  var possibleConstructorReturn = function (self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
     }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
 
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  };
 
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
+  var ManagerContext = createContext({ getRefeferenceRef: undefined, referenceNode: undefined });
 
-var ManagerContext = createContext({});
+  var Manager = function (_Component) {
+    inherits(Manager, _Component);
 
-var Manager = function (_Component) {
-  inherits(Manager, _Component);
+    function Manager() {
+      classCallCheck(this, Manager);
 
-  function Manager() {
-    var _ref;
+      var _this = possibleConstructorReturn(this, (Manager.__proto__ || Object.getPrototypeOf(Manager)).call(this));
 
-    var _temp, _this, _ret;
+      _this.getReferenceRef = function (referenceNode) {
+        return _this.setState(function (_ref) {
+          var context = _ref.context;
+          return {
+            context: _extends({}, context, { referenceNode: referenceNode })
+          };
+        });
+      };
 
-    classCallCheck(this, Manager);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+      _this.state = {
+        context: {
+          getReferenceRef: _this.getReferenceRef,
+          referenceNode: undefined
+        }
+      };
+      return _this;
     }
 
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = Manager.__proto__ || Object.getPrototypeOf(Manager)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.getReferenceRef = function (referenceNode) {
-      return _this.setState({ referenceNode: referenceNode });
-    }, _temp), possibleConstructorReturn(_this, _ret);
-  }
+    createClass(Manager, [{
+      key: "render",
+      value: function render() {
+        return React__default.createElement(
+          ManagerContext.Provider,
+          { value: this.state.context },
+          this.props.children
+        );
+      }
+    }]);
+    return Manager;
+  }(React.Component);
 
-  createClass(Manager, [{
-    key: 'render',
-    value: function render() {
-      return React__default.createElement(
-        ManagerContext.Provider,
-        {
-          value: {
-            referenceNode: this.state.referenceNode,
-            getReferenceRef: this.getReferenceRef
-          }
-        },
-        this.props.children
-      );
-    }
-  }]);
-  return Manager;
-}(React.Component);
+  // Takes an argument and if it's an array, returns the first item in the array,
+  // otherwise returns the argument. Used for Preact compatibility.
+  var unwrapArray = function unwrapArray(arg) {
+    return Array.isArray(arg) ? arg[0] : arg;
+  };
 
-// Takes an argument and if it's an array, returns the first item in the array,
-// otherwise returns the argument. Used for Preact compatibility.
-var unwrapArray = function unwrapArray(arg) {
-  return Array.isArray(arg) ? arg[0] : arg;
-};
+  var initialStyle = {
+    position: 'absolute',
+    opacity: 0,
+    pointerEvents: 'none'
+  };
 
-var initialStyle = {
-  position: 'absolute',
-  opacity: 0,
-  pointerEvents: 'none'
-};
+  var initialArrowStyle = {};
 
-var initialArrowStyle = {};
+  var Popper = function (_Component) {
+    inherits(Popper, _Component);
 
-var Popper = function (_Component) {
-  inherits(Popper, _Component);
+    function Popper() {
+      var _ref;
 
-  function Popper() {
-    var _ref;
+      var _temp, _this, _ret;
 
-    var _temp, _this, _ret;
+      classCallCheck(this, Popper);
 
-    classCallCheck(this, Popper);
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+      return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = Popper.__proto__ || Object.getPrototypeOf(Popper)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        popperNode: undefined,
+        arrowNode: undefined,
+        popperInstance: undefined,
+        data: undefined
+      }, _this.setPopperNode = function (popperNode) {
+        return _this.setState({ popperNode: popperNode });
+      }, _this.setArrowNode = function (arrowNode) {
+        return _this.setState({ arrowNode: arrowNode });
+      }, _this.updateStateModifier = {
+        enabled: true,
+        order: 900,
+        fn: function fn(data) {
+          _this.setState({ data: data });
+          return data;
+        }
+      }, _this.getOptions = function () {
+        return {
+          placement: _this.props.placement,
+          eventsEnabled: _this.props.eventsEnabled,
+          modifiers: _extends({}, _this.props.modifiers, {
+            arrow: {
+              enabled: !!_this.state.arrowNode,
+              element: _this.state.arrowNode
+            },
+            applyStyle: { enabled: false },
+            updateStateModifier: _this.updateStateModifier
+          })
+        };
+      }, _this.getPopperStyle = function () {
+        return !_this.state.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;
+      }, _this.getArrowStyle = function () {
+        return !_this.state.arrowNode || !_this.state.data ? initialArrowStyle : _this.state.data.arrowStyles;
+      }, _this.initPopperInstance = function () {
+        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();
+          });
+        }
+      }, _temp), possibleConstructorReturn(_this, _ret);
     }
 
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = Popper.__proto__ || Object.getPrototypeOf(Popper)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      popperNode: undefined,
-      arrowNode: undefined,
-      popperInstance: undefined,
-      data: undefined
-    }, _this.setPopperNode = function (popperNode) {
-      return _this.setState({ popperNode: popperNode });
-    }, _this.setArrowNode = function (arrowNode) {
-      return _this.setState({ arrowNode: arrowNode });
-    }, _this.updateStateModifier = {
-      enabled: true,
-      order: 900,
-      fn: function fn(data) {
-        _this.setState({ data: data });
-        return data;
+    createClass(Popper, [{
+      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.updatePopperInstance();
+          }
+        }
       }
-    }, _this.getOptions = function () {
-      return {
-        placement: _this.props.placement,
-        eventsEnabled: _this.props.eventsEnabled,
-        modifiers: _extends({}, _this.props.modifiers, {
-          arrow: {
-            enabled: !!_this.state.arrowNode,
-            element: _this.state.arrowNode
-          },
-          applyStyle: { enabled: false },
-          updateStateModifier: _this.updateStateModifier
-        })
-      };
-    }, _this.getPopperStyle = function () {
-      return !_this.state.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;
-    }, _this.getArrowStyle = function () {
-      return !_this.state.arrowNode || !_this.state.data ? initialArrowStyle : _this.state.data.arrowStyles;
-    }, _this.initPopperInstance = function () {
-      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;
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        if (this.state.popperInstance) {
+          this.state.popperInstance.destroy();
+        }
       }
-      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();
+    }, {
+      key: 'render',
+      value: function render() {
+        return unwrapArray(this.props.children)({
+          ref: this.setPopperNode,
+          style: this.getPopperStyle(),
+          placement: this.getPopperPlacement(),
+          arrowProps: {
+            ref: this.setArrowNode,
+            style: this.getArrowStyle()
+          }
         });
       }
-    }, _temp), possibleConstructorReturn(_this, _ret);
-  }
+    }]);
+    return Popper;
+  }(React.Component);
 
-  createClass(Popper, [{
-    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.updatePopperInstance();
-        }
+  Popper.defaultProps = {
+    placement: 'bottom',
+    eventsEnabled: true,
+    referenceElement: undefined
+  };
+  var placements = PopperJS.placements;
+
+  var Popper$1 = (function (props) {
+    return React__default.createElement(
+      ManagerContext.Consumer,
+      null,
+      function (_ref2) {
+        var referenceNode = _ref2.referenceNode;
+        return React__default.createElement(Popper, _extends({ referenceElement: referenceNode }, props));
       }
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      if (this.state.popperInstance) {
-        this.state.popperInstance.destroy();
+    );
+  });
+
+  var Reference = (function (_ref) {
+    var children = _ref.children;
+    return React__default.createElement(
+      ManagerContext.Consumer,
+      null,
+      function (_ref2) {
+        var getReferenceRef = _ref2.getReferenceRef;
+
+        warning(getReferenceRef, "`Reference` should not be used outside of a `Manager` component.");
+        return unwrapArray(children)({ ref: getReferenceRef });
       }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return unwrapArray(this.props.children)({
-        ref: this.setPopperNode,
-        style: this.getPopperStyle(),
-        placement: this.getPopperPlacement(),
-        arrowProps: {
-          ref: this.setArrowNode,
-          style: this.getArrowStyle()
-        }
-      });
-    }
-  }]);
-  return Popper;
-}(React.Component);
+    );
+  });
 
-Popper.defaultProps = {
-  placement: 'bottom',
-  eventsEnabled: true,
-  referenceElement: undefined
-};
-var placements = PopperJS.placements;
+  exports.Popper = Popper$1;
+  exports.placements = placements;
+  exports.Manager = Manager;
+  exports.Reference = Reference;
 
-var Popper$1 = (function (props) {
-  return React__default.createElement(
-    ManagerContext.Consumer,
-    null,
-    function (_ref2) {
-      var referenceNode = _ref2.referenceNode;
-      return React__default.createElement(Popper, _extends({ referenceElement: referenceNode }, props));
-    }
-  );
-});
+  Object.defineProperty(exports, '__esModule', { value: true });
 
-var Reference = (function (_ref) {
-  var children = _ref.children;
-  return React__default.createElement(
-    ManagerContext.Consumer,
-    null,
-    function (_ref2) {
-      var getReferenceRef = _ref2.getReferenceRef;
-      return unwrapArray(children)({ ref: getReferenceRef });
-    }
-  );
-});
-
-exports.Popper = Popper$1;
-exports.placements = placements;
-exports.Manager = Manager;
-exports.Reference = Reference;
+})));
 //# sourceMappingURL=react-popper.js.map

dist/react-popper.min.js

@@ -1,4 +0,4 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:!0});function _interopDefault(a){return a&&'object'==typeof a&&'default'in a?a['default']:a}var React=require('react'),React__default=_interopDefault(React),createContext=_interopDefault(require('create-react-context')),PopperJS=_interopDefault(require('popper.js')),classCallCheck=function(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')},createClass=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),_extends=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},inherits=function(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)},possibleConstructorReturn=function(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a},ManagerContext=createContext({}),Manager=function(a){function b(){var a,c,d,e;classCallCheck(this,b);for(var f=arguments.length,g=Array(f),h=0;h<f;h++)g[h]=arguments[h];return e=(c=(d=possibleConstructorReturn(this,(a=b.__proto__||Object.getPrototypeOf(b)).call.apply(a,[this].concat(g))),d),d.state={},d.getReferenceRef=function(a){return d.setState({referenceNode:a})},c),possibleConstructorReturn(d,e)}return inherits(b,a),createClass(b,[{key:'render',value:function(){return React__default.createElement(ManagerContext.Provider,{value:{referenceNode:this.state.referenceNode,getReferenceRef:this.getReferenceRef}},this.props.children)}}]),b}(React.Component),unwrapArray=function(a){return Array.isArray(a)?a[0]:a},initialStyle={position:'absolute',opacity:0,pointerEvents:'none'},initialArrowStyle={},Popper=function(a){function b(){var a,c,d,e;classCallCheck(this,b);for(var f=arguments.length,g=Array(f),h=0;h<f;h++)g[h]=arguments[h];return e=(c=(d=possibleConstructorReturn(this,(a=b.__proto__||Object.getPrototypeOf(b)).call.apply(a,[this].concat(g))),d),d.state={popperNode:void 0,arrowNode:void 0,popperInstance:void 0,data:void 0},d.setPopperNode=function(a){return d.setState({popperNode:a})},d.setArrowNode=function(a){return d.setState({arrowNode:a})},d.updateStateModifier={enabled:!0,order:900,fn:function(a){return d.setState({data:a}),a}},d.getOptions=function(){return{placement:d.props.placement,eventsEnabled:d.props.eventsEnabled,modifiers:_extends({},d.props.modifiers,{arrow:{enabled:!!d.state.arrowNode,element:d.state.arrowNode},applyStyle:{enabled:!1},updateStateModifier:d.updateStateModifier})}},d.getPopperStyle=function(){return d.state.popperNode&&d.state.data?_extends({position:d.state.data.offsets.popper.position},d.state.data.styles):initialStyle},d.getPopperPlacement=function(){return d.state.data?d.state.data.placement:void 0},d.getArrowStyle=function(){return d.state.arrowNode&&d.state.data?d.state.data.arrowStyles:initialArrowStyle},d.initPopperInstance=function(){var a=d.props.referenceElement,b=d.state,c=b.popperNode,e=b.popperInstance;if(a&&c&&!e){var f=new PopperJS(a,c,d.getOptions());return d.setState({popperInstance:f}),!0}return!1},d.destroyPopperInstance=function(a){d.state.popperInstance&&d.state.popperInstance.destroy(),d.setState({popperInstance:void 0},a)},d.updatePopperInstance=function(){d.state.popperInstance&&d.destroyPopperInstance(function(){return d.initPopperInstance()})},c),possibleConstructorReturn(d,e)}return inherits(b,a),createClass(b,[{key:'componentDidUpdate',value:function(a,b){this.initPopperInstance()||this.props.placement===a.placement&&this.props.eventsEnabled===a.eventsEnabled&&this.state.arrowNode===b.arrowNode&&this.state.popperNode===b.popperNode&&this.props.referenceElement===a.referenceElement||this.updatePopperInstance()}},{key:'componentWillUnmount',value:function(){this.state.popperInstance&&this.state.popperInstance.destroy()}},{key:'render',value:function(){return unwrapArray(this.props.children)({ref:this.setPopperNode,style:this.getPopperStyle(),placement:this.getPopperPlacement(),arrowProps:{ref:this.setArrowNode,style:this.getArrowStyle()}})}}]),b}(React.Component);// Takes an argument and if it's an array, returns the first item in the array,
+(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?b(exports,require('react'),require('create-react-context'),require('popper.js'),require('warning')):'function'==typeof define&&define.amd?define(['exports','react','create-react-context','popper.js','warning'],b):b(a['react-popper']={},a.react,a.createContext,a.PopperJS,a.warning)})(this,function(a,b,c,d,e){'use strict';var f='default'in b?b['default']:b;c=c&&c.hasOwnProperty('default')?c['default']:c,d=d&&d.hasOwnProperty('default')?d['default']:d,e=e&&e.hasOwnProperty('default')?e['default']:e;var g=function(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')},h=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},j=function(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)},k=function(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a},l=c({getRefeferenceRef:void 0,referenceNode:void 0}),m=function(a){function b(){g(this,b);var a=k(this,(b.__proto__||Object.getPrototypeOf(b)).call(this));return a.getReferenceRef=function(b){return a.setState(function(a){var c=a.context;return{context:i({},c,{referenceNode:b})}})},a.state={context:{getReferenceRef:a.getReferenceRef,referenceNode:void 0}},a}return j(b,a),h(b,[{key:'render',value:function(){return f.createElement(l.Provider,{value:this.state.context},this.props.children)}}]),b}(b.Component),n=function(a){return Array.isArray(a)?a[0]:a},o={position:'absolute',opacity:0,pointerEvents:'none'},p={},q=function(a){function b(){var a,c,e,f;g(this,b);for(var h=arguments.length,j=Array(h),l=0;l<h;l++)j[l]=arguments[l];return f=(c=(e=k(this,(a=b.__proto__||Object.getPrototypeOf(b)).call.apply(a,[this].concat(j))),e),e.state={popperNode:void 0,arrowNode:void 0,popperInstance:void 0,data:void 0},e.setPopperNode=function(a){return e.setState({popperNode:a})},e.setArrowNode=function(a){return e.setState({arrowNode:a})},e.updateStateModifier={enabled:!0,order:900,fn:function(a){return e.setState({data:a}),a}},e.getOptions=function(){return{placement:e.props.placement,eventsEnabled:e.props.eventsEnabled,modifiers:i({},e.props.modifiers,{arrow:{enabled:!!e.state.arrowNode,element:e.state.arrowNode},applyStyle:{enabled:!1},updateStateModifier:e.updateStateModifier})}},e.getPopperStyle=function(){return e.state.popperNode&&e.state.data?i({position:e.state.data.offsets.popper.position},e.state.data.styles):o},e.getPopperPlacement=function(){return e.state.data?e.state.data.placement:void 0},e.getArrowStyle=function(){return e.state.arrowNode&&e.state.data?e.state.data.arrowStyles:p},e.initPopperInstance=function(){var a=e.props.referenceElement,b=e.state,c=b.popperNode,f=b.popperInstance;if(a&&c&&!f){var g=new d(a,c,e.getOptions());return e.setState({popperInstance:g}),!0}return!1},e.destroyPopperInstance=function(a){e.state.popperInstance&&e.state.popperInstance.destroy(),e.setState({popperInstance:void 0},a)},e.updatePopperInstance=function(){e.state.popperInstance&&e.destroyPopperInstance(function(){return e.initPopperInstance()})},c),k(e,f)}return j(b,a),h(b,[{key:'componentDidUpdate',value:function(a,b){this.initPopperInstance()||this.props.placement===a.placement&&this.props.eventsEnabled===a.eventsEnabled&&this.state.arrowNode===b.arrowNode&&this.state.popperNode===b.popperNode&&this.props.referenceElement===a.referenceElement||this.updatePopperInstance()}},{key:'componentWillUnmount',value:function(){this.state.popperInstance&&this.state.popperInstance.destroy()}},{key:'render',value:function(){return n(this.props.children)({ref:this.setPopperNode,style:this.getPopperStyle(),placement:this.getPopperPlacement(),arrowProps:{ref:this.setArrowNode,style:this.getArrowStyle()}})}}]),b}(b.Component);// Takes an argument and if it's an array, returns the first item in the array,
 // otherwise returns the argument. Used for Preact compatibility.
-Popper.defaultProps={placement:'bottom',eventsEnabled:!0,referenceElement:void 0};var placements=PopperJS.placements,Popper$1=function(a){return React__default.createElement(ManagerContext.Consumer,null,function(b){var c=b.referenceNode;return React__default.createElement(Popper,_extends({referenceElement:c},a))})},Reference=function(a){var b=a.children;return React__default.createElement(ManagerContext.Consumer,null,function(a){var c=a.getReferenceRef;return unwrapArray(b)({ref:c})})};exports.Popper=Popper$1,exports.placements=placements,exports.Manager=Manager,exports.Reference=Reference;
+q.defaultProps={placement:'bottom',eventsEnabled:!0,referenceElement:void 0};var r=d.placements;a.Popper=function(a){return f.createElement(l.Consumer,null,function(b){var c=b.referenceNode;return f.createElement(q,i({referenceElement:c},a))})},a.placements=r,a.Manager=m,a.Reference=function(a){var b=a.children;return f.createElement(l.Consumer,null,function(a){var c=a.getReferenceRef;return e(c,'`Reference` should not be used outside of a `Manager` component.'),n(b)({ref:c})})},Object.defineProperty(a,'__esModule',{value:!0})});
 //# sourceMappingURL=react-popper.min.js.map

package.json

 {
   "name": "react-popper",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "React wrapper around Popper.js",
@@ -8,5 +8,5 @@ "license": "MIT",
   "homepage": "https://github.com/souporserious/react-popper",
-  "main": "dist/react-popper.js",
-  "umd:main": "dist/react-popper.umd.js",
-  "module": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/es/index.js",
+  "browser": "dist/react-popper.js",
   "typings": "typings/react-popper.d.ts",
@@ -19,20 +19,16 @@ "files": [
   "scripts": {
-    "build": "npm run build:clean && npm run build:es && npm run build:umd && npm run build:cjs && npm run build:flow && npm run build:umd-min && npm run build:cjs-min",
+    "build": "npm run build:clean && npm run build:es && npm run build:cjs && npm run build:browser && npm run build:flow",
     "build:clean": "rimraf dist/ && rimraf lib/",
-    "build:es": "babel src --ignore '*.test.js,__mocks__' --out-dir lib",
-    "build:umd": "rollup -c --output.format umd --output.name 'react-popper' --output.file dist/react-popper.umd.js",
-    "build:cjs": "rollup -c --output.format cjs --output.name 'react-popper' --output.file dist/react-popper.js",
-    "build:flow": "flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib",
-    "build:umd-min": "MINIFY=true rollup -c --output.format umd --output.name 'react-popper' --output.file dist/react-popper.umd.min.js",
-    "build:cjs-min": "MINIFY=true rollup -c --output.format cjs --output.name 'react-popper' --output.file dist/react-popper.min.js",
+    "build:es": "BABEL_ENV=es babel src --ignore '*.test.js,__mocks__' --out-dir lib/es",
+    "build:cjs": "BABEL_ENV=cjs babel src --ignore '*.test.js,__mocks__' --out-dir lib/cjs",
+    "build:browser": "rollup -c",
+    "build:flow": "flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib/es",
     "demo": "parcel --out-dir demo/dist demo/index.html",
-    "pretest": "npm run lint",
-    "test": "npm run test:flow && npm run test:ts && npm run test:jest",
+    "test": "npm run test:eslint && npm run test:flow && npm run test:ts && npm run test:jest",
     "test:ts": "tsc --project ./typings/tests",
     "test:flow": "flow check",
     "test:jest": "jest",
+    "test:eslint": "eslint src",
     "prepare": "npm run build",
-    "precommit": "lint-staged",
-    "format": "npm run lint -- --fix --quiet",
-    "lint": "eslint --ext .js,.jsx src/ example/"
+    "precommit": "pretty-quick --staged && test"
   },
@@ -61,8 +57,2 @@ "jest": {
   ],
-  "lint-staged": {
-    "@(src|demo)/**/*.{js,jsx}": [
-      "eslint --fix --max-warnings 5",
-      "git add"
-    ]
-  },
   "peerDependencies": {
@@ -75,3 +65,3 @@ "react": "0.14.x || ^15.0.0 || ^16.0.0",
     "popper.js": "^1.14.1",
-    "prop-types": "^15.6.1"
+    "warning": "^3.0.0"
   },
@@ -89,5 +79,3 @@ "devDependencies": {
     "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "chokidar": "^1.6.1",
-    "create-styled-element": "^0.4.0",
+    "babel-preset-stage-1": "^6.24.1",
     "enzyme": "^3.3.0",
@@ -98,27 +86,17 @@ "enzyme-adapter-react-16": "^1.1.1",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-config-standard": "^11.0.0",
-    "eslint-config-standard-react": "^6.0.0",
-    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-flowtype": "^2.46.1",
     "eslint-plugin-jest": "^21.15.0",
-    "eslint-plugin-node": "^6.0.1",
-    "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-promise": "^3.7.0",
     "eslint-plugin-react": "^7.7.0",
-    "eslint-plugin-standard": "^3.0.1",
     "flow-bin": "^0.69.0",
     "flow-copy-source": "^1.3.0",
-    "glamor": "^2.20.24",
-    "glamorous": "^3.11.1",
     "jest": "^22.4.3",
-    "node-libs-browser": "^1.0.0",
     "outy": "^0.1.2",
     "parcel-bundler": "^1.6.2",
     "prettier": "^1.11.1",
-    "react": "^16.3.0",
+    "pretty-quick": "^1.4.1",
+    "react": "16.2.0",
     "react-dom": "^16.3.0",
-    "react-measure": "^1.4.6",
-    "react-motion-ui-pack": "^0.10.2",
     "react-portal": "^4.1.4",
     "react-transition-group": "^2.2.1",
-    "react-travel": "^1.3.0",
     "rimraf": "^2.6.2",
@@ -132,5 +110,4 @@ "rollup": "^0.57.1",
     "rollup-plugin-replace": "^2.0.0",
-    "typescript": "^2.8.1",
-    "velocity-react": "^1.2.2"
+    "typescript": "^2.8.1"
   }
 }

README.md

@@ -6,6 +6,5 @@ ## React Popper
 [![Dependency Status](https://david-dm.org/souporserious/react-popper.svg)](https://david-dm.org/souporserious/react-popper)
-[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
-React wrapper around [PopperJS](https://github.com/FezVrasta/popper.js/).
+React wrapper around [Popper.js](https://popper.js.org).
 
@@ -19,3 +18,3 @@ ## Install
 # or
-yarn add react-popper
+yarn add react-popper@next
 ```
@@ -31,2 +30,4 @@
 
+> Using `react-popper@0.x`? You can find its documentation [clicking here](https://github.com/souporserious/react-popper/tree/v0.x)
+
 Example:
@@ -137,2 +138,35 @@
 
+## Usage with `ReactDOM.createPortal`
+
+Popper.js is smart enough to work even if the **popper** and **reference** elements aren't
+in the same DOM context.  
+This means that you can use [`ReactDOM.createPortal`](https://reactjs.org/docs/portals.html)
+(or any pre React 16 alternative) to move the popper component somewhere else in the DOM.
+
+```jsx
+import { Manager, Reference, Popper } from 'react-popper';
+
+const Example = () => (
+  <Manager>
+    <Reference>
+      {props => (
+        <button type="button" {...props}>
+          Reference
+        </button>
+      )}
+    </Reference>
+    {ReactDOM.createPortal(
+      <Popper>
+        {({ placement, ...props }) => (
+          <div {...props} data-placement={placement}>
+            Popper
+          </div>
+        )}
+      </Popper>,
+      document.querySelector('#destination')
+    )}
+  </Manager>
+);
+```
+
 ## Usage without a reference `HTMLElement`
@@ -147,3 +181,3 @@
 ```jsx
-import Popper from 'react-popper';
+import { Popper } from 'react-popper';
 
@@ -150,0 +184,0 @@ class VirtualReference {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

40

decreased by-24.53%

Number of package files

24

increased by4.35%

Lines of code

762

increased by1.33%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

240

increased by16.5%

Worsened metrics

Total package byte prevSize

84613

decreased by-19.08%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedwarning@^3.0.0

• + Addedwarning@3.0.0(transitive)

• - Removedprop-types@^15.6.1