@semcore/popper - npm Package Compare versions

Comparing version 3.1.4 to 3.3.2

CHANGELOG.md

@@ -5,6 +5,59 @@ # Changelog
 
-## [3.1.4] - 2019-030
+## [3.3.2] - 2019-07-05
 
+### Fixed
+
+- Исправлена ошибка при отсутствии `onOutsideClick`
+
+## [3.3.1] - 2019-07-05
+
+### Fixed
+
+- Убрал лишний рендер, улучшена производительность
+
+## [3.3.0] - 2019-06-25
+
 ### Added
 
+- Добавлен доступ к пропу `ecludedRefs` вложенного `@semcore/outside-click`
+
+## [3.2.3] - 2019-06-13
+
+### Fixed
+
+- Исправлена проблема открытия `Popper` при начале клика на `Trigger`-е, а заканчивание на `Popper`-е
+
+## [3.2.2] - 2019-06-06
+
+### Fixed
+
+- Отключение перерендера `Trigger` при закрытом `Popper`
+
+## [3.2.1] - 2019-06-04
+
+### Changed
+
+- Расчет положения `Popper` для крайних положений ("start", "end").
+
+## [3.2.0] - 2019-04-17
+
+### Added
+
+- Добавлен Box в `Popper` и `Trigger`
+
+### Changed
+
+- Увеличен `z-index` до 110
+- Расширен контекст в `Popper` и `Trigger`
+
+## [3.1.5] - 2019-03-21
+
+### Fixed
+
+- Добавлено предсказуемое поведение на закрытие при размещении одного `Popper` в другом `Popper`
+
+## [3.1.4] - 2019-03-13
+
+### Added
+
 - Добавлено св-во `popperZIndex`, отвечает за `z-index` выпадающего окна
@@ -11,0 +64,0 @@

lib/context.d.ts

@@ -8,2 +8,3 @@ import React from 'react';
     getArrowProps: Popper['getArrowProps'];
+    setChildPopperNodes: Popper['setChildPopperNodes'];
     updatePopperInstance: Popper['updatePopperInstance'];
@@ -28,3 +29,7 @@ placement: Placement;
 }
+export interface IChildPopperGetter {
+    setChildPopperNodes: (nodes: [Node]) => void;
+}
 declare const Provider: React.ProviderExoticComponent<React.ProviderProps<IPopperContext>>, Consumer: React.ExoticComponent<React.ConsumerProps<IPopperContext>>;
-export { Provider, Consumer };
+declare const InnerContext: React.Context<IChildPopperGetter>;
+export { Provider, Consumer, InnerContext };

lib/index.es.js

@@ -1,5 +0,3 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import capitalizeFirstLetter from '@semcore/utils/lib/capitalizeFirstLetter';
-import React, { PureComponent } from 'react';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _objectSpread from '@babel/runtime/helpers/objectSpread';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
@@ -9,11 +7,7 @@ import _createClass from '@babel/runtime/helpers/createClass';
 import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
+import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
 import _inherits from '@babel/runtime/helpers/inherits';
-import assignProps from '@semcore/utils/lib/assignProps';
-import propsForElement from '@semcore/utils/lib/propsForElement';
-import Portal from '@semcore/portal';
-export { PortalProvider } from '@semcore/portal';
-import If from '@semcore/utils/lib/if';
-import _objectSpread from '@babel/runtime/helpers/objectSpread';
-import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
+import _typeof from '@babel/runtime/helpers/typeof';
 import { findDOMNode } from 'react-dom';
+import React, { PureComponent, Component } from 'react';
 import PopperJS from 'popper.js';
@@ -23,2 +17,10 @@ import OutsideClick from '@semcore/outside-click';
 import fire from '@semcore/utils/lib/fire';
+import assignProps from '@semcore/utils/lib/assignProps';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import capitalizeFirstLetter from '@semcore/utils/lib/capitalizeFirstLetter';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { Box } from '@semcore/flex-box';
+import Portal from '@semcore/portal';
+export { PortalProvider } from '@semcore/portal';
+import If from '@semcore/utils/lib/if';
 
@@ -36,3 +38,3 @@ function setupArrowOffsetModifier(arrowOffset) {
 
-    var isVertical = ['left', 'right'].indexOf(position) !== -1;
+    var isVertical = ['left', 'right'].includes(position);
     var len = isVertical ? 'height' : 'width';
@@ -45,2 +47,3 @@ var offsetSide = isVertical ? 'top' : 'left';
     var referenceLen = data.offsets.reference[len];
+    var popperOffsetForSmileReference = arrowSize / 2 + arrowOffset - referenceLen / 2;
 
@@ -55,2 +58,6 @@ if (align === 'start') {
       }
+
+      if (referenceLen <= arrowOffset + arrowSize) {
+        data.offsets.popper[offsetSide] -= popperOffsetForSmileReference;
+      }
     }
@@ -62,6 +69,10 @@
       if (_diff > 0) {
-        data.offsets.arrow[offsetSide] = Math.min(popperLen - arrowOffset - arrowSize - _diff, arrowOffset);
+        data.offsets.arrow[offsetSide] = Math.max(popperLen - arrowOffset - arrowSize - _diff, arrowOffset);
       } else {
         data.offsets.arrow[offsetSide] = popperLen - arrowSize - arrowOffset;
       }
+
+      if (referenceLen <= arrowOffset + arrowSize) {
+        data.offsets.popper[offsetSide] += popperOffsetForSmileReference;
+      }
     }
@@ -78,31 +89,8 @@
 
-var DefaultTag =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(DefaultTag, _PureComponent);
+var InnerContext = React.createContext({});
 
-  function DefaultTag() {
-    _classCallCheck(this, DefaultTag);
-
-    return _possibleConstructorReturn(this, _getPrototypeOf(DefaultTag).apply(this, arguments));
-  }
-
-  _createClass(DefaultTag, [{
-    key: "render",
-    value: function render() {
-      return React.createElement("span", Object.assign({}, assignProps(propsForElement(this.props), {
-        style: {
-          display: 'inline-block'
-        }
-      })));
-    }
-  }]);
-
-  return DefaultTag;
-}(PureComponent);
-
 var InnerTrigger =
 /*#__PURE__*/
-function (_PureComponent2) {
-  _inherits(InnerTrigger, _PureComponent2);
+function (_PureComponent) {
+  _inherits(InnerTrigger, _PureComponent);
 
@@ -119,3 +107,2 @@ function InnerTrigger() {
       var _this$props = this.props,
-          Tag = _this$props.tag,
           children = _this$props.children,
@@ -127,7 +114,5 @@ getTriggerProps = _this$props.getTriggerProps;
       } else {
-        var _this$props2 = this.props,
-            tag = _this$props2.tag,
-            other = _objectWithoutProperties(_this$props2, ["tag"]);
-
-        return React.createElement(Tag, Object.assign({}, assignProps(other, getTriggerProps())));
+        return React.createElement(Box, Object.assign({
+          inline: true
+        }, assignProps(this.props, getTriggerProps())));
       }
@@ -141,19 +126,9 @@ }
 InnerTrigger.displayName = 'PopperInnerTrigger';
-InnerTrigger.defaultProps = {
-  tag: DefaultTag
-};
 
 function PopperTrigger(props) {
-  var Consumer$$1 = props.consumer,
+  var Consumer = props.consumer,
       other = _objectWithoutProperties(props, ["consumer"]);
 
-  return React.createElement(Consumer$$1, null, function (_ref) {
-    var getTriggerProps = _ref.getTriggerProps,
-        visible = _ref.visible,
-        changeVisible = _ref.changeVisible;
-    return React.createElement(InnerTrigger, Object.assign({}, other, {
-      getTriggerProps: getTriggerProps,
-      visible: visible,
-      changeVisible: changeVisible
-    }));
+  return React.createElement(Consumer, null, function (ctx) {
+    return React.createElement(InnerTrigger, Object.assign({}, other, ctx));
   });
@@ -167,32 +142,7 @@ }
 
-var DefaultTag$1 =
+var InnerPopper =
 /*#__PURE__*/
 function (_PureComponent) {
-  _inherits(DefaultTag, _PureComponent);
+  _inherits(InnerPopper, _PureComponent);
 
-  function DefaultTag() {
-    _classCallCheck(this, DefaultTag);
-
-    return _possibleConstructorReturn(this, _getPrototypeOf(DefaultTag).apply(this, arguments));
-  }
-
-  _createClass(DefaultTag, [{
-    key: "render",
-    value: function render() {
-      return React.createElement("span", Object.assign({}, assignProps(propsForElement(this.props), {
-        style: {
-          display: 'inline-block'
-        }
-      })));
-    }
-  }]);
-
-  return DefaultTag;
-}(PureComponent);
-
-var InnerPopper =
-/*#__PURE__*/
-function (_PureComponent2) {
-  _inherits(InnerPopper, _PureComponent2);
-
   function InnerPopper() {
@@ -208,3 +158,2 @@ _classCallCheck(this, InnerPopper);
       var _this$props = this.props,
-          Tag = _this$props.tag,
           disablePortal = _this$props.disablePortal,
@@ -218,3 +167,3 @@ visible = _this$props.visible,
         disablePortal: disablePortal
-      }, typeof children === 'function' ? children(this.props) : React.createElement(Tag, Object.assign({}, assignProps(this.props, getPopperProps())))));
+      }, typeof children === 'function' ? children(this.props) : React.createElement(Box, Object.assign({}, assignProps(this.props, getPopperProps())))));
     }
@@ -227,29 +176,13 @@ }]);
 InnerPopper.displayName = 'PopperInnerPopper';
-InnerPopper.defaultProps = {
-  tag: DefaultTag$1
-};
 
 function PopperPopper(props) {
-  var Consumer$$1 = props.consumer,
+  var Consumer = props.consumer,
       other = _objectWithoutProperties(props, ["consumer"]);
 
-  return React.createElement(Consumer$$1, null, function (_ref) {
-    var disablePortal = _ref.disablePortal,
-        getPopperProps = _ref.getPopperProps,
-        getArrowProps = _ref.getArrowProps,
-        visible = _ref.visible,
-        changeVisible = _ref.changeVisible,
-        placement = _ref.placement,
-        outOfBoundaries = _ref.outOfBoundaries,
-        scheduleUpdate = _ref.scheduleUpdate;
-    return React.createElement(InnerPopper, Object.assign({}, other, {
-      placement: placement,
-      outOfBoundaries: outOfBoundaries,
-      scheduleUpdate: scheduleUpdate,
-      disablePortal: disablePortal,
-      getPopperProps: getPopperProps,
-      getArrowProps: getArrowProps,
-      visible: visible,
-      changeVisible: changeVisible
-    }));
+  return React.createElement(Consumer, null, function (ctx) {
+    return React.createElement(InnerContext.Provider, {
+      value: {
+        setChildPopperNodes: ctx.setChildPopperNodes
+      }
+    }, React.createElement(InnerPopper, Object.assign({}, other, ctx)));
   });
@@ -271,6 +204,32 @@ }
 
+function deepIsEqual(first, second) {
+  if (!first || !second) return false;
+  if (first === second) return true;
+  var firstProps = Object.getOwnPropertyNames(first);
+  var secondProps = Object.getOwnPropertyNames(second);
+  if (firstProps.length != secondProps.length) return false;
+
+  for (var i = 0; i < firstProps.length; i++) {
+    var prop = firstProps[i];
+
+    switch (_typeof(first[prop])) {
+      case 'object':
+        if (!deepIsEqual(first[prop], second[prop])) return false;
+        break;
+
+      case 'number':
+        if (isNaN(first[prop]) && isNaN(second[prop])) break;
+
+      default:
+        if (first[prop] != second[prop]) return false;
+    }
+  }
+
+  return true;
+}
+
 var Popper =
 /*#__PURE__*/
-function (_PureComponent) {
-  _inherits(Popper, _PureComponent);
+function (_Component) {
+  _inherits(Popper, _Component);
 
@@ -287,6 +246,7 @@ function Popper(props) {
     _this.arrowNode = null;
+    _this.childPopperNodes = [];
     _this.unmount = false;
     _this._cache = {};
 
-    _this.setRef = function (nodeName) {
+    _this.setRef = function (nodeName, beforeUpdateCallback) {
       return function (ref) {
@@ -300,2 +260,3 @@ if (!ref) return;
           _this[nodeName] = node;
+          beforeUpdateCallback && beforeUpdateCallback(node);
 
@@ -318,3 +279,3 @@ _this.updatePopperInstance();
 
-      var _assertThisInitialize = _assertThisInitialized(_assertThisInitialized(_this)),
+      var _assertThisInitialize = _assertThisInitialized(_this),
           triggerNode = _assertThisInitialize.triggerNode,
@@ -365,3 +326,5 @@ popperNode = _assertThisInitialize.popperNode;
 
-        if (!_this.unmount) {
+        if (!_this.unmount && _this.props.visible) {
+          if (deepIsEqual(data, _this.state.data) && placement === _this.state.placement) return data;
+
           _this.setState({
@@ -406,5 +369,10 @@ data: data,
 
-      fire.apply(void 0, [_assertThisInitialized(_assertThisInitialized(_this)), 'onVisibleChange', visible].concat(args));
+      fire.apply(void 0, [_assertThisInitialized(_this), 'onVisibleChange', visible].concat(args));
     };
 
+    _this.handleOutsideClick = function (e) {
+      var visible = _this.props.visible;
+      if (visible) fire(_assertThisInitialized(_this), 'onOutsideClick', e);
+    };
+
     _this.getTriggerProps = function (props) {
@@ -419,4 +387,10 @@ return assignProps(props || {}, {
       return function (props) {
+        var ref = _this.setRef('popperNode', function (node) {
+          if (node && _this.context.setChildPopperNodes) {
+            _this.context.setChildPopperNodes([node].concat(_toConsumableArray(_this.childPopperNodes)));
+          }
+        });
+
         return assignProps(props || {}, {
-          ref: _this.setRef('popperNode'),
+          ref: ref,
           style: style
@@ -434,2 +408,12 @@ });
 
+    _this.setChildPopperNodes = function (nodes) {
+      if (_this.refOutside && _this.refOutside.addExcludedNodes) {
+        _this.childPopperNodes = nodes;
+
+        _this.refOutside.addExcludedNodes(nodes);
+
+        _this.context.setChildPopperNodes && _this.context.setChildPopperNodes([_this.popperNode].concat(_toConsumableArray(nodes)));
+      }
+    };
+
     _this.state = {
@@ -471,3 +455,3 @@ data: undefined
       var _this$props = this.props,
-          Provider$$1 = _this$props.provider,
+          Provider = _this$props.provider,
           children = _this$props.children,
@@ -478,6 +462,7 @@ visible = _this$props.visible,
           disablePortal = _this$props.disablePortal,
-          onOutsideClick = _this$props.onOutsideClick;
+          excludeRefs = _this$props.excludeRefs;
       var triggerNode = this.triggerNode,
           popperNode = this.popperNode,
-          arrowNode = this.arrowNode;
+          arrowNode = this.arrowNode,
+          childPopperNodes = this.childPopperNodes;
       var context = {
@@ -492,2 +477,3 @@ getTriggerProps: this.getTriggerProps,
         updatePopperInstance: this.updatePopperInstance,
+        setChildPopperNodes: this.setChildPopperNodes,
         disablePortal: disablePortal,
@@ -521,10 +507,11 @@ displayEvents: displayEvents,
 
-        return React.createElement(Provider$$1, {
+        return React.createElement(Provider, {
           value: context
-        }, React.createElement(If, {
-          condition: visible
         }, React.createElement(OutsideClick, {
-          excludeRefs: [triggerNode, popperNode],
-          onOutsideClick: onOutsideClick
-        })), typeof children === 'function' ? children(context) : children);
+          ref: function ref(_ref2) {
+            return _this2.refOutside = _ref2;
+          },
+          excludeRefs: [triggerNode, popperNode].concat(_toConsumableArray(childPopperNodes), _toConsumableArray(excludeRefs)),
+          onOutsideClick: _this2.handleOutsideClick
+        }), typeof children === 'function' ? children(context) : children);
       });
@@ -535,3 +522,3 @@ }
   return Popper;
-}(PureComponent);
+}(Component);
 
@@ -549,3 +536,4 @@ Popper.displayName = 'Popper';
   offset: 0,
-  popperZIndex: '5',
+  popperZIndex: 110,
+  excludeRefs: [],
   displayTimeout: {
@@ -560,2 +548,3 @@ show: 0,
 };
+Popper.contextType = InnerContext;
 Popper.Trigger = PopperTrigger;
@@ -566,3 +555,3 @@ Popper.Popper = PopperPopper;
 export default Popper;
-export { Provider, Consumer };
+export { Consumer, InnerContext, Provider };
 //# sourceMappingURL=index.es.js.map

lib/index.js

@@ -7,7 +7,4 @@ 'use strict';
 
-var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
-var capitalizeFirstLetter = _interopDefault(require('@semcore/utils/lib/capitalizeFirstLetter'));
-var React = require('react');
-var React__default = _interopDefault(React);
-var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
+var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
+var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread'));
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
@@ -17,11 +14,8 @@ var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
+var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
-var assignProps = _interopDefault(require('@semcore/utils/lib/assignProps'));
-var propsForElement = _interopDefault(require('@semcore/utils/lib/propsForElement'));
-var Portal = require('@semcore/portal');
-var Portal__default = _interopDefault(Portal);
-var If = _interopDefault(require('@semcore/utils/lib/if'));
-var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread'));
-var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
+var _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
 var reactDom = require('react-dom');
+var React = require('react');
+var React__default = _interopDefault(React);
 var PopperJS = _interopDefault(require('popper.js'));
@@ -31,2 +25,10 @@ var OutsideClick = _interopDefault(require('@semcore/outside-click'));
 var fire = _interopDefault(require('@semcore/utils/lib/fire'));
+var assignProps = _interopDefault(require('@semcore/utils/lib/assignProps'));
+var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
+var capitalizeFirstLetter = _interopDefault(require('@semcore/utils/lib/capitalizeFirstLetter'));
+var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
+var flexBox = require('@semcore/flex-box');
+var Portal = require('@semcore/portal');
+var Portal__default = _interopDefault(Portal);
+var If = _interopDefault(require('@semcore/utils/lib/if'));
 
@@ -44,3 +46,3 @@ function setupArrowOffsetModifier(arrowOffset) {
 
-    var isVertical = ['left', 'right'].indexOf(position) !== -1;
+    var isVertical = ['left', 'right'].includes(position);
     var len = isVertical ? 'height' : 'width';
@@ -53,2 +55,3 @@ var offsetSide = isVertical ? 'top' : 'left';
     var referenceLen = data.offsets.reference[len];
+    var popperOffsetForSmileReference = arrowSize / 2 + arrowOffset - referenceLen / 2;
 
@@ -63,2 +66,6 @@ if (align === 'start') {
       }
+
+      if (referenceLen <= arrowOffset + arrowSize) {
+        data.offsets.popper[offsetSide] -= popperOffsetForSmileReference;
+      }
     }
@@ -70,6 +77,10 @@
       if (_diff > 0) {
-        data.offsets.arrow[offsetSide] = Math.min(popperLen - arrowOffset - arrowSize - _diff, arrowOffset);
+        data.offsets.arrow[offsetSide] = Math.max(popperLen - arrowOffset - arrowSize - _diff, arrowOffset);
       } else {
         data.offsets.arrow[offsetSide] = popperLen - arrowSize - arrowOffset;
       }
+
+      if (referenceLen <= arrowOffset + arrowSize) {
+        data.offsets.popper[offsetSide] += popperOffsetForSmileReference;
+      }
     }
@@ -86,31 +97,8 @@
 
-var DefaultTag =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(DefaultTag, _PureComponent);
+var InnerContext = React__default.createContext({});
 
-  function DefaultTag() {
-    _classCallCheck(this, DefaultTag);
-
-    return _possibleConstructorReturn(this, _getPrototypeOf(DefaultTag).apply(this, arguments));
-  }
-
-  _createClass(DefaultTag, [{
-    key: "render",
-    value: function render() {
-      return React__default.createElement("span", Object.assign({}, assignProps(propsForElement(this.props), {
-        style: {
-          display: 'inline-block'
-        }
-      })));
-    }
-  }]);
-
-  return DefaultTag;
-}(React.PureComponent);
-
 var InnerTrigger =
 /*#__PURE__*/
-function (_PureComponent2) {
-  _inherits(InnerTrigger, _PureComponent2);
+function (_PureComponent) {
+  _inherits(InnerTrigger, _PureComponent);
 
@@ -127,3 +115,2 @@ function InnerTrigger() {
       var _this$props = this.props,
-          Tag = _this$props.tag,
           children = _this$props.children,
@@ -135,7 +122,5 @@ getTriggerProps = _this$props.getTriggerProps;
       } else {
-        var _this$props2 = this.props,
-            tag = _this$props2.tag,
-            other = _objectWithoutProperties(_this$props2, ["tag"]);
-
-        return React__default.createElement(Tag, Object.assign({}, assignProps(other, getTriggerProps())));
+        return React__default.createElement(flexBox.Box, Object.assign({
+          inline: true
+        }, assignProps(this.props, getTriggerProps())));
       }
@@ -149,19 +134,9 @@ }
 InnerTrigger.displayName = 'PopperInnerTrigger';
-InnerTrigger.defaultProps = {
-  tag: DefaultTag
-};
 
 function PopperTrigger(props) {
-  var Consumer$$1 = props.consumer,
+  var Consumer = props.consumer,
       other = _objectWithoutProperties(props, ["consumer"]);
 
-  return React__default.createElement(Consumer$$1, null, function (_ref) {
-    var getTriggerProps = _ref.getTriggerProps,
-        visible = _ref.visible,
-        changeVisible = _ref.changeVisible;
-    return React__default.createElement(InnerTrigger, Object.assign({}, other, {
-      getTriggerProps: getTriggerProps,
-      visible: visible,
-      changeVisible: changeVisible
-    }));
+  return React__default.createElement(Consumer, null, function (ctx) {
+    return React__default.createElement(InnerTrigger, Object.assign({}, other, ctx));
   });
@@ -175,32 +150,7 @@ }
 
-var DefaultTag$1 =
+var InnerPopper =
 /*#__PURE__*/
 function (_PureComponent) {
-  _inherits(DefaultTag, _PureComponent);
+  _inherits(InnerPopper, _PureComponent);
 
-  function DefaultTag() {
-    _classCallCheck(this, DefaultTag);
-
-    return _possibleConstructorReturn(this, _getPrototypeOf(DefaultTag).apply(this, arguments));
-  }
-
-  _createClass(DefaultTag, [{
-    key: "render",
-    value: function render() {
-      return React__default.createElement("span", Object.assign({}, assignProps(propsForElement(this.props), {
-        style: {
-          display: 'inline-block'
-        }
-      })));
-    }
-  }]);
-
-  return DefaultTag;
-}(React.PureComponent);
-
-var InnerPopper =
-/*#__PURE__*/
-function (_PureComponent2) {
-  _inherits(InnerPopper, _PureComponent2);
-
   function InnerPopper() {
@@ -216,3 +166,2 @@ _classCallCheck(this, InnerPopper);
       var _this$props = this.props,
-          Tag = _this$props.tag,
           disablePortal = _this$props.disablePortal,
@@ -226,3 +175,3 @@ visible = _this$props.visible,
         disablePortal: disablePortal
-      }, typeof children === 'function' ? children(this.props) : React__default.createElement(Tag, Object.assign({}, assignProps(this.props, getPopperProps())))));
+      }, typeof children === 'function' ? children(this.props) : React__default.createElement(flexBox.Box, Object.assign({}, assignProps(this.props, getPopperProps())))));
     }
@@ -235,29 +184,13 @@ }]);
 InnerPopper.displayName = 'PopperInnerPopper';
-InnerPopper.defaultProps = {
-  tag: DefaultTag$1
-};
 
 function PopperPopper(props) {
-  var Consumer$$1 = props.consumer,
+  var Consumer = props.consumer,
       other = _objectWithoutProperties(props, ["consumer"]);
 
-  return React__default.createElement(Consumer$$1, null, function (_ref) {
-    var disablePortal = _ref.disablePortal,
-        getPopperProps = _ref.getPopperProps,
-        getArrowProps = _ref.getArrowProps,
-        visible = _ref.visible,
-        changeVisible = _ref.changeVisible,
-        placement = _ref.placement,
-        outOfBoundaries = _ref.outOfBoundaries,
-        scheduleUpdate = _ref.scheduleUpdate;
-    return React__default.createElement(InnerPopper, Object.assign({}, other, {
-      placement: placement,
-      outOfBoundaries: outOfBoundaries,
-      scheduleUpdate: scheduleUpdate,
-      disablePortal: disablePortal,
-      getPopperProps: getPopperProps,
-      getArrowProps: getArrowProps,
-      visible: visible,
-      changeVisible: changeVisible
-    }));
+  return React__default.createElement(Consumer, null, function (ctx) {
+    return React__default.createElement(InnerContext.Provider, {
+      value: {
+        setChildPopperNodes: ctx.setChildPopperNodes
+      }
+    }, React__default.createElement(InnerPopper, Object.assign({}, other, ctx)));
   });
@@ -279,6 +212,32 @@ }
 
+function deepIsEqual(first, second) {
+  if (!first || !second) return false;
+  if (first === second) return true;
+  var firstProps = Object.getOwnPropertyNames(first);
+  var secondProps = Object.getOwnPropertyNames(second);
+  if (firstProps.length != secondProps.length) return false;
+
+  for (var i = 0; i < firstProps.length; i++) {
+    var prop = firstProps[i];
+
+    switch (_typeof(first[prop])) {
+      case 'object':
+        if (!deepIsEqual(first[prop], second[prop])) return false;
+        break;
+
+      case 'number':
+        if (isNaN(first[prop]) && isNaN(second[prop])) break;
+
+      default:
+        if (first[prop] != second[prop]) return false;
+    }
+  }
+
+  return true;
+}
+
 var Popper =
 /*#__PURE__*/
-function (_PureComponent) {
-  _inherits(Popper, _PureComponent);
+function (_Component) {
+  _inherits(Popper, _Component);
 
@@ -295,6 +254,7 @@ function Popper(props) {
     _this.arrowNode = null;
+    _this.childPopperNodes = [];
     _this.unmount = false;
     _this._cache = {};
 
-    _this.setRef = function (nodeName) {
+    _this.setRef = function (nodeName, beforeUpdateCallback) {
       return function (ref) {
@@ -308,2 +268,3 @@ if (!ref) return;
           _this[nodeName] = node;
+          beforeUpdateCallback && beforeUpdateCallback(node);
 
@@ -326,3 +287,3 @@ _this.updatePopperInstance();
 
-      var _assertThisInitialize = _assertThisInitialized(_assertThisInitialized(_this)),
+      var _assertThisInitialize = _assertThisInitialized(_this),
           triggerNode = _assertThisInitialize.triggerNode,
@@ -373,3 +334,5 @@ popperNode = _assertThisInitialize.popperNode;
 
-        if (!_this.unmount) {
+        if (!_this.unmount && _this.props.visible) {
+          if (deepIsEqual(data, _this.state.data) && placement === _this.state.placement) return data;
+
           _this.setState({
@@ -414,5 +377,10 @@ data: data,
 
-      fire.apply(void 0, [_assertThisInitialized(_assertThisInitialized(_this)), 'onVisibleChange', visible].concat(args));
+      fire.apply(void 0, [_assertThisInitialized(_this), 'onVisibleChange', visible].concat(args));
     };
 
+    _this.handleOutsideClick = function (e) {
+      var visible = _this.props.visible;
+      if (visible) fire(_assertThisInitialized(_this), 'onOutsideClick', e);
+    };
+
     _this.getTriggerProps = function (props) {
@@ -427,4 +395,10 @@ return assignProps(props || {}, {
       return function (props) {
+        var ref = _this.setRef('popperNode', function (node) {
+          if (node && _this.context.setChildPopperNodes) {
+            _this.context.setChildPopperNodes([node].concat(_toConsumableArray(_this.childPopperNodes)));
+          }
+        });
+
         return assignProps(props || {}, {
-          ref: _this.setRef('popperNode'),
+          ref: ref,
           style: style
@@ -442,2 +416,12 @@ });
 
+    _this.setChildPopperNodes = function (nodes) {
+      if (_this.refOutside && _this.refOutside.addExcludedNodes) {
+        _this.childPopperNodes = nodes;
+
+        _this.refOutside.addExcludedNodes(nodes);
+
+        _this.context.setChildPopperNodes && _this.context.setChildPopperNodes([_this.popperNode].concat(_toConsumableArray(nodes)));
+      }
+    };
+
     _this.state = {
@@ -479,3 +463,3 @@ data: undefined
       var _this$props = this.props,
-          Provider$$1 = _this$props.provider,
+          Provider = _this$props.provider,
           children = _this$props.children,
@@ -486,6 +470,7 @@ visible = _this$props.visible,
           disablePortal = _this$props.disablePortal,
-          onOutsideClick = _this$props.onOutsideClick;
+          excludeRefs = _this$props.excludeRefs;
       var triggerNode = this.triggerNode,
           popperNode = this.popperNode,
-          arrowNode = this.arrowNode;
+          arrowNode = this.arrowNode,
+          childPopperNodes = this.childPopperNodes;
       var context = {
@@ -500,2 +485,3 @@ getTriggerProps: this.getTriggerProps,
         updatePopperInstance: this.updatePopperInstance,
+        setChildPopperNodes: this.setChildPopperNodes,
         disablePortal: disablePortal,
@@ -529,10 +515,11 @@ displayEvents: displayEvents,
 
-        return React__default.createElement(Provider$$1, {
+        return React__default.createElement(Provider, {
           value: context
-        }, React__default.createElement(If, {
-          condition: visible
         }, React__default.createElement(OutsideClick, {
-          excludeRefs: [triggerNode, popperNode],
-          onOutsideClick: onOutsideClick
-        })), typeof children === 'function' ? children(context) : children);
+          ref: function ref(_ref2) {
+            return _this2.refOutside = _ref2;
+          },
+          excludeRefs: [triggerNode, popperNode].concat(_toConsumableArray(childPopperNodes), _toConsumableArray(excludeRefs)),
+          onOutsideClick: _this2.handleOutsideClick
+        }), typeof children === 'function' ? children(context) : children);
       });
@@ -543,3 +530,3 @@ }
   return Popper;
-}(React.PureComponent);
+}(React.Component);
 
@@ -557,3 +544,4 @@ Popper.displayName = 'Popper';
   offset: 0,
-  popperZIndex: '5',
+  popperZIndex: 110,
+  excludeRefs: [],
   displayTimeout: {
@@ -568,2 +556,3 @@ show: 0,
 };
+Popper.contextType = InnerContext;
 Popper.Trigger = PopperTrigger;
@@ -573,6 +562,12 @@ Popper.Popper = PopperPopper;
 
-exports.PortalProvider = Portal.PortalProvider;
+Object.defineProperty(exports, 'PortalProvider', {
+  enumerable: true,
+  get: function () {
+    return Portal.PortalProvider;
+  }
+});
+exports.Consumer = Consumer;
+exports.InnerContext = InnerContext;
+exports.Provider = Provider;
 exports.default = Popper;
-exports.Provider = Provider;
-exports.Consumer = Consumer;
 //# sourceMappingURL=index.js.map

lib/Popper.d.ts

@@ -1,2 +0,2 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import PopperJS from 'popper.js';
@@ -42,3 +42,3 @@ import { IPopperContext } from './context';
      * z-index Popper.Popper
-     * @default 5
+     * @default 110
      */
@@ -50,2 +50,3 @@ popperZIndex?: string | number;
     onVisibleChange?: (visible: boolean, ...args: any) => void;
+    excludeRefs?: (React.Ref<any> | React.LegacyRef<any>)[];
     children?: IPopperPropsChildrenAsFn | React.ReactNode;
@@ -56,3 +57,2 @@ }
     placement?: PopperJS.Placement;
-    offsets?: any;
 }
@@ -70,5 +70,6 @@ export declare type TriggerProps = {
 };
-declare class Popper extends PureComponent<IPopperProps, IPopperState> {
+declare class Popper extends Component<IPopperProps, IPopperState> {
     static displayName: string;
     static defaultProps: Partial<IPopperProps>;
+    static contextType: React.Context<import("./context").IChildPopperGetter>;
     static Trigger: typeof PopperTrigger;
@@ -81,6 +82,8 @@ static Popper: typeof PopperPopper;
     arrowNode: any;
+    childPopperNodes: any[];
     unmount: boolean;
     _cache: {};
+    private refOutside;
     constructor(props: any);
-    setRef: (nodeName: string) => (ref: React.Ref<any>) => void;
+    setRef: (nodeName: string, beforeUpdateCallback?: (node: Node) => void) => (ref: React.Ref<any>) => void;
     destroyPopperInstance: () => void;
@@ -96,5 +99,7 @@ updatePopperInstance: () => void;
     handleVisibleChange: (visible: any, ...args: any[]) => void;
+    handleOutsideClick: (e: React.MouseEvent<Element, MouseEvent>) => void;
     getTriggerProps: <T extends {}>(props?: T) => T & TriggerProps;
     getPopperProps: (style: React.CSSProperties | CSSStyleDeclaration) => <T extends {}>(props?: T) => T & PopperProps;
     getArrowProps: <T extends {}>(props?: T) => T & ArrowProps;
+    setChildPopperNodes: (nodes: Node[]) => void;
     componentDidUpdate(prevProps: any, prevState: any): void;
@@ -101,0 +106,0 @@ componentWillUnmount(): void;

lib/Popper/index.d.ts

 import React from 'react';
 import { PortalProvider } from '@semcore/portal';
+import { IBoxProps } from '@semcore/flex-box';
 import { IPopperContext } from '../context';
-export declare type PopperChildrenAsFn = (props?: IInnerPopperProps) => React.ReactNode;
+export declare type PopperChildrenAsFn = (props: IInnerPopperProps) => React.ReactNode;
 export interface IInnerPopperProps extends IPopperContext {
-    /**
-     * Тэг
-     * @default <span />
-     */
-    tag?: React.ReactType | string;
-    children: PopperChildrenAsFn | React.ReactNode;
+    children?: PopperChildrenAsFn | React.ReactNode;
 }
-export interface IPopperPopperProps {
+export interface IPopperPopperProps extends IBoxProps {
     consumer?: React.Consumer<IPopperContext>;
-    tag?: React.ReactType | string;
     children?: PopperChildrenAsFn | React.ReactNode;
@@ -17,0 +12,0 @@ }

lib/Trigger/index.d.ts

 import React from 'react';
+import { IBoxProps } from '@semcore/flex-box';
 import { IPopperContext } from '../context';
-export declare type TriggerChildrenAsFn = (props?: IInnerTriggerProps) => React.ReactNode;
-export interface IInnerTriggerProps extends Partial<IPopperContext> {
-    tag?: React.ReactType | string;
+export declare type TriggerChildrenAsFn = (props: IInnerTriggerProps) => React.ReactNode;
+export interface IInnerTriggerProps extends IPopperContext {
     children?: TriggerChildrenAsFn | React.ReactNode;
 }
-export interface IPopperTriggerProps {
+export interface IPopperTriggerProps extends IBoxProps {
     consumer?: React.Consumer<IPopperContext>;
-    tag?: React.ReactType | string;
     children?: TriggerChildrenAsFn | React.ReactNode;
@@ -12,0 +11,0 @@ }

package.json

 {
   "name": "@semcore/popper",
   "description": "SEMRush Popper Component",
-  "version": "3.1.4",
+  "version": "3.3.2",
   "main": "lib/index.js",
@@ -12,18 +12,19 @@ "module": "lib/index.es.js",
     "build": "rollup --config=node:rollup-config-ts",
-    "test": "jest"
+    "test": "jest --no-cache"
   },
   "dependencies": {
-    "@semcore/utils": "^2.0.2",
-    "@semcore/portal": "^1.1.0",
-    "@semcore/visibility-handler": "^2.1.0",
-    "@semcore/outside-click": "^1.0.1",
-    "@types/react": "^16.8.8",
-    "@babel/runtime": "^7.3.4",
-    "popper.js": "^1.14.7"
+    "@semcore/utils": "^2.4",
+    "@semcore/portal": "^1.1",
+    "@semcore/visibility-handler": "^2.2",
+    "@semcore/outside-click": "^1.1",
+    "@semcore/flex-box": "^3.1",
+    "@types/react": "^16.8",
+    "@babel/runtime": "^7.5",
+    "popper.js": "^1.15"
   },
   "peerDependencies": {
-    "react": ">=16.4.0"
+    "react": ">=16.4"
   },
   "devDependencies": {
-    "react": "^16.4.0",
+    "react": "^16.4",
     "jest-preset-ui": "*",
@@ -30,0 +31,0 @@ "rollup-config-react": "*",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128571

increased by6.95%

Worsened metrics

Dependency count

9

increased by12.5%

Lines of code

1600

decreased by-1.3%

Dependency changes

• + Added@semcore/flex-box@^3.1

• + Added@semcore/flex-box@3.5.3(transitive)

• + Added@semcore/ui@1.2.0(transitive)

• + Addedcsstype@2.6.21(transitive)

• Updated@babel/runtime@^7.5

• Updated@semcore/outside-click@^1.1

• Updated@semcore/portal@^1.1

• Updated@semcore/utils@^2.4

• Updated@semcore/visibility-handler@^2.2

• Updated@types/react@^16.8

• Updatedpopper.js@^1.15