react-popper - npm Package Compare versions

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

dist/react-popper.js

@@ -7,3 +7,5 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
+var React__default = _interopDefault(React);
+var createContext = _interopDefault(require('create-react-context'));
 var PopperJS = _interopDefault(require('popper.js'));
@@ -73,2 +75,47 @@
 
+var ManagerContext = createContext({});
+
+var Manager = function (_Component) {
+  inherits(Manager, _Component);
+
+  function Manager() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    classCallCheck(this, Manager);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    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: {
+            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;
+};
+
 var initialStyle = {
@@ -97,3 +144,2 @@ position: 'absolute',
     return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = Popper.__proto__ || Object.getPrototypeOf(Popper)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      referenceNode: undefined,
       popperNode: undefined,
@@ -103,4 +149,2 @@ arrowNode: undefined,
       data: undefined
-    }, _this.setReferenceNode = function (referenceNode) {
-      return _this.setState({ referenceNode: referenceNode });
     }, _this.setPopperNode = function (popperNode) {
@@ -141,9 +185,7 @@ return _this.setState({ popperNode: popperNode });
       var _this$state = _this.state,
-          referenceNode = _this$state.referenceNode,
           popperNode = _this$state.popperNode,
           popperInstance = _this$state.popperInstance;
 
-      var reference = referenceElement || referenceNode;
-      if (reference && popperNode && !popperInstance) {
-        var _popperInstance = new PopperJS(reference, popperNode, _this.getOptions());
+      if (referenceElement && popperNode && !popperInstance) {
+        var _popperInstance = new PopperJS(referenceElement, popperNode, _this.getOptions());
         _this.setState({ popperInstance: _popperInstance });
@@ -176,3 +218,3 @@ return true;
         // 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.referenceNode !== prevState.referenceNode || this.state.arrowNode !== prevState.arrowNode || this.state.popperNode !== prevState.popperNode || this.props.referenceElement !== prevProps.referenceElement) {
+        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();
@@ -192,15 +234,9 @@ }
     value: function render() {
-      return this.props.children({
-        referenceProps: {
-          getRef: this.setReferenceNode
-        },
-        popperProps: {
-          getRef: this.setPopperNode,
-          style: this.getPopperStyle(),
-          placement: this.getPopperPlacement()
-        },
+      return unwrapArray(this.props.children)({
+        ref: this.setPopperNode,
+        style: this.getPopperStyle(),
+        placement: this.getPopperPlacement(),
         arrowProps: {
-          getRef: this.setArrowNode,
-          style: this.getArrowStyle(),
-          placement: this.getPopperPlacement()
+          ref: this.setArrowNode,
+          style: this.getArrowStyle()
         }
@@ -211,3 +247,3 @@ });
   return Popper;
-}(react.Component);
+}(React.Component);
 
@@ -219,8 +255,31 @@ Popper.defaultProps = {
 };
+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));
+    }
+  );
+});
 
-var placements = PopperJS.placements;
+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.default = Popper;
+exports.Popper = Popper$1;
 exports.placements = placements;
+exports.Manager = Manager;
+exports.Reference = Reference;
 //# sourceMappingURL=react-popper.js.map

dist/react-popper.min.js

@@ -1,2 +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'),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},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={referenceNode:void 0,popperNode:void 0,arrowNode:void 0,popperInstance:void 0,data:void 0},d.setReferenceNode=function(a){return d.setState({referenceNode:a})},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.referenceNode,e=b.popperNode,f=b.popperInstance,g=a||c;if(g&&e&&!f){var h=new PopperJS(g,e,d.getOptions());return d.setState({popperInstance:h}),!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.referenceNode===b.referenceNode&&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 this.props.children({referenceProps:{getRef:this.setReferenceNode},popperProps:{getRef:this.setPopperNode,style:this.getPopperStyle(),placement:this.getPopperPlacement()},arrowProps:{getRef:this.setArrowNode,style:this.getArrowStyle(),placement:this.getPopperPlacement()}})}}]),b}(react.Component);Popper.defaultProps={placement:'bottom',eventsEnabled:!0,referenceElement:void 0};var placements=PopperJS.placements;exports.default=Popper,exports.placements=placements;
+'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,
+// 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;
 //# sourceMappingURL=react-popper.min.js.map

dist/react-popper.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('popper.js')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'popper.js'], factory) :
-  (factory((global['react-popper'] = {}),global.react,global.PopperJS));
-}(this, (function (exports,react,PopperJS) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('create-react-context'), require('popper.js')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'create-react-context', 'popper.js'], factory) :
+  (factory((global['react-popper'] = {}),global.react,global.createContext,global.PopperJS));
+}(this, (function (exports,React,createContext,PopperJS) { 'use strict';
 
+  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;
@@ -71,2 +73,47 @@
 
+  var ManagerContext = createContext({});
+
+  var Manager = function (_Component) {
+    inherits(Manager, _Component);
+
+    function Manager() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      classCallCheck(this, Manager);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      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: {
+              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;
+  };
+
   var initialStyle = {
@@ -95,3 +142,2 @@ position: 'absolute',
       return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = Popper.__proto__ || Object.getPrototypeOf(Popper)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-        referenceNode: undefined,
         popperNode: undefined,
@@ -101,4 +147,2 @@ arrowNode: undefined,
         data: undefined
-      }, _this.setReferenceNode = function (referenceNode) {
-        return _this.setState({ referenceNode: referenceNode });
       }, _this.setPopperNode = function (popperNode) {
@@ -139,9 +183,7 @@ return _this.setState({ popperNode: popperNode });
         var _this$state = _this.state,
-            referenceNode = _this$state.referenceNode,
             popperNode = _this$state.popperNode,
             popperInstance = _this$state.popperInstance;
 
-        var reference = referenceElement || referenceNode;
-        if (reference && popperNode && !popperInstance) {
-          var _popperInstance = new PopperJS(reference, popperNode, _this.getOptions());
+        if (referenceElement && popperNode && !popperInstance) {
+          var _popperInstance = new PopperJS(referenceElement, popperNode, _this.getOptions());
           _this.setState({ popperInstance: _popperInstance });
@@ -174,3 +216,3 @@ return true;
           // 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.referenceNode !== prevState.referenceNode || this.state.arrowNode !== prevState.arrowNode || this.state.popperNode !== prevState.popperNode || this.props.referenceElement !== prevProps.referenceElement) {
+          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();
@@ -190,15 +232,9 @@ }
       value: function render() {
-        return this.props.children({
-          referenceProps: {
-            getRef: this.setReferenceNode
-          },
-          popperProps: {
-            getRef: this.setPopperNode,
-            style: this.getPopperStyle(),
-            placement: this.getPopperPlacement()
-          },
+        return unwrapArray(this.props.children)({
+          ref: this.setPopperNode,
+          style: this.getPopperStyle(),
+          placement: this.getPopperPlacement(),
           arrowProps: {
-            getRef: this.setArrowNode,
-            style: this.getArrowStyle(),
-            placement: this.getPopperPlacement()
+            ref: this.setArrowNode,
+            style: this.getArrowStyle()
           }
@@ -209,3 +245,3 @@ });
     return Popper;
-  }(react.Component);
+  }(React.Component);
 
@@ -217,8 +253,31 @@ Popper.defaultProps = {
   };
+  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));
+      }
+    );
+  });
 
-  var placements = PopperJS.placements;
+  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.default = Popper;
+  exports.Popper = Popper$1;
   exports.placements = placements;
+  exports.Manager = Manager;
+  exports.Reference = Reference;
 
@@ -225,0 +284,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/react-popper.umd.min.js

@@ -1,2 +0,4 @@
-(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?b(exports,require('react'),require('popper.js')):'function'==typeof define&&define.amd?define(['exports','react','popper.js'],b):b(a['react-popper']={},a.react,a.PopperJS)})(this,function(a,b,c){'use strict';c=c&&c.hasOwnProperty('default')?c['default']:c;var d=function(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')},e=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}}(),f=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},g=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)},h=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},i={position:'absolute',opacity:0,pointerEvents:'none'},j={},k=function(a){function b(){var a,e,g,k;d(this,b);for(var l=arguments.length,m=Array(l),n=0;n<l;n++)m[n]=arguments[n];return k=(e=(g=h(this,(a=b.__proto__||Object.getPrototypeOf(b)).call.apply(a,[this].concat(m))),g),g.state={referenceNode:void 0,popperNode:void 0,arrowNode:void 0,popperInstance:void 0,data:void 0},g.setReferenceNode=function(a){return g.setState({referenceNode:a})},g.setPopperNode=function(a){return g.setState({popperNode:a})},g.setArrowNode=function(a){return g.setState({arrowNode:a})},g.updateStateModifier={enabled:!0,order:900,fn:function(a){return g.setState({data:a}),a}},g.getOptions=function(){return{placement:g.props.placement,eventsEnabled:g.props.eventsEnabled,modifiers:f({},g.props.modifiers,{arrow:{enabled:!!g.state.arrowNode,element:g.state.arrowNode},applyStyle:{enabled:!1},updateStateModifier:g.updateStateModifier})}},g.getPopperStyle=function(){return g.state.popperNode&&g.state.data?f({position:g.state.data.offsets.popper.position},g.state.data.styles):i},g.getPopperPlacement=function(){return g.state.data?g.state.data.placement:void 0},g.getArrowStyle=function(){return g.state.arrowNode&&g.state.data?g.state.data.arrowStyles:j},g.initPopperInstance=function(){var a=g.props.referenceElement,b=g.state,d=b.referenceNode,e=b.popperNode,f=b.popperInstance,h=a||d;if(h&&e&&!f){var i=new c(h,e,g.getOptions());return g.setState({popperInstance:i}),!0}return!1},g.destroyPopperInstance=function(a){g.state.popperInstance&&g.state.popperInstance.destroy(),g.setState({popperInstance:void 0},a)},g.updatePopperInstance=function(){g.state.popperInstance&&g.destroyPopperInstance(function(){return g.initPopperInstance()})},e),h(g,k)}return g(b,a),e(b,[{key:'componentDidUpdate',value:function(a,b){this.initPopperInstance()||this.props.placement===a.placement&&this.props.eventsEnabled===a.eventsEnabled&&this.state.referenceNode===b.referenceNode&&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 this.props.children({referenceProps:{getRef:this.setReferenceNode},popperProps:{getRef:this.setPopperNode,style:this.getPopperStyle(),placement:this.getPopperPlacement()},arrowProps:{getRef:this.setArrowNode,style:this.getArrowStyle(),placement:this.getPopperPlacement()}})}}]),b}(b.Component);k.defaultProps={placement:'bottom',eventsEnabled:!0,referenceElement:void 0};var l=c.placements;a.default=k,a.placements=l,Object.defineProperty(a,'__esModule',{value:!0})});
+(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?b(exports,require('react'),require('create-react-context'),require('popper.js')):'function'==typeof define&&define.amd?define(['exports','react','create-react-context','popper.js'],b):b(a['react-popper']={},a.react,a.createContext,a.PopperJS)})(this,function(a,b,c,d){'use strict';var e='default'in b?b['default']:b;c=c&&c.hasOwnProperty('default')?c['default']:c,d=d&&d.hasOwnProperty('default')?d['default']:d;var f=function(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')},g=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}}(),h=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},i=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)},j=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},k=c({}),l=function(a){function b(){var a,c,d,e;f(this,b);for(var g=arguments.length,h=Array(g),i=0;i<g;i++)h[i]=arguments[i];return e=(c=(d=j(this,(a=b.__proto__||Object.getPrototypeOf(b)).call.apply(a,[this].concat(h))),d),d.state={},d.getReferenceRef=function(a){return d.setState({referenceNode:a})},c),j(d,e)}return i(b,a),g(b,[{key:'render',value:function(){return e.createElement(k.Provider,{value:{referenceNode:this.state.referenceNode,getReferenceRef:this.getReferenceRef}},this.props.children)}}]),b}(b.Component),m=function(a){return Array.isArray(a)?a[0]:a},n={position:'absolute',opacity:0,pointerEvents:'none'},o={},p=function(a){function b(){var a,c,e,g;f(this,b);for(var i=arguments.length,k=Array(i),l=0;l<i;l++)k[l]=arguments[l];return g=(c=(e=j(this,(a=b.__proto__||Object.getPrototypeOf(b)).call.apply(a,[this].concat(k))),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:h({},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?h({position:e.state.data.offsets.popper.position},e.state.data.styles):n},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:o},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),j(e,g)}return i(b,a),g(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 m(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.
+p.defaultProps={placement:'bottom',eventsEnabled:!0,referenceElement:void 0};var q=d.placements;a.Popper=function(a){return e.createElement(k.Consumer,null,function(b){var c=b.referenceNode;return e.createElement(p,h({referenceElement:c},a))})},a.placements=q,a.Manager=l,a.Reference=function(a){var b=a.children;return e.createElement(k.Consumer,null,function(a){var c=a.getReferenceRef;return m(b)({ref:c})})},Object.defineProperty(a,'__esModule',{value:!0})});
 //# sourceMappingURL=react-popper.umd.min.js.map

lib/index.js

@@ -1,158 +0,3 @@
-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 target; };
-
-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; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(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; }
-
-function _inherits(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 } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-import { Component } from 'react';
-import PopperJS from 'popper.js';
-
-var initialStyle = {
-  position: 'absolute',
-  opacity: 0,
-  pointerEvents: 'none'
-};
-
-var initialArrowStyle = {};
-
-var Popper = function (_Component) {
-  _inherits(Popper, _Component);
-
-  function Popper() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Popper);
-
-    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 = {
-      referenceNode: undefined,
-      popperNode: undefined,
-      arrowNode: undefined,
-      popperInstance: undefined,
-      data: undefined
-    }, _this.setReferenceNode = function (referenceNode) {
-      return _this.setState({ referenceNode: referenceNode });
-    }, _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,
-          referenceNode = _this$state.referenceNode,
-          popperNode = _this$state.popperNode,
-          popperInstance = _this$state.popperInstance;
-
-      var reference = referenceElement || referenceNode;
-      if (reference && popperNode && !popperInstance) {
-        var _popperInstance = new PopperJS(reference, 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);
-  }
-
-  _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.referenceNode !== prevState.referenceNode || this.state.arrowNode !== prevState.arrowNode || this.state.popperNode !== prevState.popperNode || this.props.referenceElement !== prevProps.referenceElement) {
-          this.updatePopperInstance();
-        }
-      }
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      if (this.state.popperInstance) {
-        this.state.popperInstance.destroy();
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return this.props.children({
-        referenceProps: {
-          getRef: this.setReferenceNode
-        },
-        popperProps: {
-          getRef: this.setPopperNode,
-          style: this.getPopperStyle(),
-          placement: this.getPopperPlacement()
-        },
-        arrowProps: {
-          getRef: this.setArrowNode,
-          style: this.getArrowStyle(),
-          placement: this.getPopperPlacement()
-        }
-      });
-    }
-  }]);
-
-  return Popper;
-}(Component);
-
-Popper.defaultProps = {
-  placement: 'bottom',
-  eventsEnabled: true,
-  referenceElement: undefined
-};
-export default Popper;
-
-
-var placements = PopperJS.placements;
-export { placements };
+export { default as Popper, placements } from './Popper';
+export { default as Manager } from './Manager';
+export { default as Reference } from './Reference';

package.json

 {
   "name": "react-popper",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-beta.1",
   "description": "React wrapper around Popper.js",
@@ -20,6 +20,6 @@ "license": "MIT",
     "build:clean": "rimraf dist/ && rimraf lib/",
-    "build:es": "babel src --ignore \"*.test.js\" --out-dir 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 \"*.test.js\" src lib",
+    "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",
@@ -71,2 +71,3 @@ "build:cjs-min": "MINIFY=true rollup -c --output.format cjs --output.name 'react-popper' --output.file dist/react-popper.min.js",
   "dependencies": {
+    "create-react-context": "^0.2.1",
     "popper.js": "^1.14.1",
@@ -73,0 +74,0 @@ "prop-types": "^15.6.1"

README.md

@@ -16,3 +16,3 @@ ## React Popper
 ```bash
-npm install react-popper --save
+npm install react-popper@next --save
 # or
@@ -33,22 +33,22 @@ yarn add react-popper
 ```jsx
-import Popper from 'react-popper';
+import { Manager, Reference, Popper } from 'react-popper';
 
 const Example = () => (
-  <Popper placement="right">
-    {({ referenceProps, popperProps, arrowProps }) => (
-      <>
-        <button type="button" ref={referenceProps.getRef}>
+  <Manager>
+    <Reference>
+      {({ ref }) => (
+        <button type="button" ref={ref}>
           Reference element
         </button>
-        <div
-          ref={popperProps.getRef}
-          style={popperProps.style}
-          data-placement={popperProps.placement}
-        >
+      )}
+    </Reference>
+    <Popper placement="right">
+      {({ ref, style, placement, arrowProps }) => (
+        <div ref={ref} style={style} data-placement={placement}>
           Popper element
-          <div ref={arrowProps.getRef} style={arrowProps.style} />
+          <div ref={arrowProps.ref} style={arrowProps.style} />
         </div>
-      </>
-    )}
-  </Popper>
+      )}
+    </Popper>
+  </Manager>
 );
@@ -62,2 +62,5 @@ ```
 
+The `Manager` component is a simple wrapper that needs to surround all the other `react-popper` components in order
+to make them communicate with each others.
+
 The `Popper` component accepts the properties `children`, `placement`, `modifiers`, and `eventsEneabled`.
@@ -79,14 +82,8 @@
 children: ({|
-  referenceProps: {
-    getRef: (?HTMLElement) => void,
-  },
-  popperProps: {
-    getRef: (?HTMLElement) => void,
-    style: { [string]: string | number },
-    placement: ?Placement,
-  },
+  ref: (?HTMLElement) => void,
+  style: { [string]: string | number },
+  placement: ?Placement,
   arrowProps: {
-    getRef: (?HTMLElement) => void,
+    ref: (?HTMLElement) => void,
     style: { [string]: string | number },
-    placement: ?Placement,
   },
@@ -97,9 +94,18 @@ |}) => Node
 A function (render prop) that takes as argument an object containing the properties
-`referenceProps`, `popperProps`, and `arrowProps`.
+`ref`, `style`, `placement`, and`arrowProps`.
 
-These 3 properties are objects, each of them containing a `getRef` property that is going to be used to retrieve the [React refs](https://reactjs.org/docs/refs-and-the-dom.html) of the 3 components needed by `react-popper`: the **reference**, **popper**, and **arrow**.
+The first 3 properties are the `ref` property that is going to be used to retrieve the [React refs](https://reactjs.org/docs/refs-and-the-dom.html) of the **popper** element, the `style` property,
+which contains the CSS styles (React CSS properties) computed by Popper.js and needed to style
+the **popper** element so that it gets positioned in the desired way.  
+These styles should be applied to your React component using the `style` prop or with any CSS-in-JS
+library of your choice.
 
-`popperProps` and `arrowProps`, additionally, provide a `style` property, which contains the CSS styles (React CSS properties) computed by Popper.js and needed to style the **popper** and **arrow** components so that they get positioned in the desired way. These styles should be applied to your React component usingthe `style` prop or with any CSS-in-JS library of your choice.
+The `placement` property describes the placement of your popper after Popper.js has applied all the modifiers
+that may have flipped or altered the originally provided `placement` property. You can use this to alter the
+style of the popper and or of the arrow according to the definitive placement. For instance, you can use this
+property to orient the arrow to the right direction.
 
-They also provide a convenience property called `placement` that is going to describe the placement of your popper after Popper.js has applied all the modifiers that may have flipped or altered the originally provided `placement` property. You can use this to alter the style of the popper and or of the arrow according to the definitive placement. For instance, you can use this property to orient the arrow on the right direction.
+The `arrowProps` argument is an object, containing a `style` and `ref` properties that are identical to the
+ones provided as first and second argument of `children`, but are relative to the **arrow** element rather than
+the popper. Use them to, accordingly, retrieve the ref of the **arrow** element and style it.
 
@@ -127,5 +133,3 @@ ##### `placement`
 ```js
-modifiers?: {
-  [string]: { order: number, enabled: boolean, fn: Object => Object },
-};
+modifiers?: PopperJS$Modifiers;
 ```
@@ -142,3 +146,3 @@
 
-If `referenceElement` is defined, it will take precedence over any `referenceProps.getRef` provied refs.
+If `referenceElement` is defined, it will take precedence over any `referenceProps.ref` provided refs.
 
@@ -178,10 +182,6 @@ ```jsx
   <Popper referenceElement={virtualReferenceElement}>
-    {({ popperProps, arrowProps }) => (
-      <div
-        ref={popperProps.getRef}
-        style={popperProps.style}
-        data-placement={popperProps.placement}
-      >
+    {({ ref, style, placement, arrowProps }) => (
+      <div ref={ref} style={style} data-placement={placement}>
         Popper element
-        <div ref={arrowProps.getRef} style={arrowProps.style} />
+        <div ref={arrowProps.ref} style={arrowProps.style} />
       </div>
@@ -209,6 +209,6 @@ )}
 
-`npm run dev` or `yarn dev`
+`npm run demo` or `yarn demo`
 
 #### open your browser and visit:
 
-`http://localhost:8080/`
+`http://localhost:1234/`

typings/react-popper.d.ts

 import * as React from "react";
 import * as PopperJS from "popper.js";
 
+interface ManagerProps {
+  children: React.ReactNode;
+}
+export class Manager extends React.Component<ManagerProps, {}> { }
+
+interface ReferenceProps {
+  children: (props: ({
+    ref: (ref: HTMLElement | null) => void,
+  })) => React.ReactNode;
+}
+export class Reference extends React.Component<ReferenceProps, {}> { }
+
 interface PopperProps {
@@ -9,18 +21,11 @@ modifiers?: PopperJS.Modifiers;
   children: (props: ({
-    referenceProps: {
-      getRef: (ref: HTMLElement | null) => void,
-    },
-    popperProps: {
-      getRef: (ref: HTMLElement | null) => void,
-      style: React.CSSProperties,
-      placement: ?PopperJS.Placement,
-    },
+    ref: (ref: HTMLElement | null) => void,
+    style: React.CSSProperties,
+    placement: ?PopperJS.Placement,
     arrowProps: {
-      getRef: (ref: HTMLElement | null) => void,
+      ref: (ref: HTMLElement | null) => void,
       style: React.CSSProperties,
-      placement: ?PopperJS.Placement,
     },
   })) => React.ReactNode;
 }
-
-export default class Popper extends React.Component<PopperProps, {}> { }
+export class Popper extends React.Component<PopperProps, {}> { }

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

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

Improved metrics

Total package byte prevSize

104558

increased by17.11%

Number of package files

23

increased by35.29%

Lines of code

752

increased by24.3%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedcreate-react-context@^0.2.1

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-context@0.2.3(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedgud@1.0.0(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)