@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-bb4cbfe9c6

package/cjs/internal/Popup/Popup.js

@@ -1,10 +1,8 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Popup = exports.PopupPositions = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _reactDom = require("react-dom");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.PopupPositions = exports.Popup = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _raf = _interopRequireDefault(require("raf"));
 var _warning = _interopRequireDefault(require("warning"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
@@ -12,13 +10,21 @@ var _ZIndex = require("../ZIndex");
 var _RenderContainer = require("../RenderContainer");
 
 var _utils = require("../../lib/utils");
+var _client = require("../../lib/client");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _SSRSafe = require("../../lib/SSRSafe");
+var _currentEnvironment = require("../../lib/currentEnvironment");
+var _CommonWrapper = require("../CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _decorator = require("../../components/ResponsiveLayout/decorator");
+var _MobilePopup = require("../MobilePopup");
+var _rootNode = require("../../lib/rootNode");
+var _callChildRef = require("../../lib/callChildRef/callChildRef");
 
 var _PopupPin = require("./PopupPin");
 var _PopupHelper = require("./PopupHelper");
-var _Popup = require("./Popup.styles");
+var _Popup = require("./Popup.styles");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}function _createForOfIteratorHelperLoose(o, allowArrayLike) {var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];if (it) return (it = it.call(o)).next.bind(it);if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {if (it) o = it;var i = 0;return function () {if (i >= o.length) return { done: true };return { done: false, value: o[i++] };};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}
 
 var POPUP_BORDER_DEFAULT_COLOR = 'transparent';
 var TRANSITION_TIMEOUT = { enter: 0, exit: 200 };
@@ -100,7 +106,6 @@ var PopupPositions = [
 
 
 
-Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Popup, _React$Component);function Popup() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -120,6 +125,24 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
 
 
+Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Popup, _React$Component);function Popup() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -178,12 +201,37 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
 
     state = { location: _this.props.opened ? DUMMY_LOCATION : null };_this.
-    theme = void 0;_this.
-    layoutEventsToken = void 0;_this.
+
+
     locationUpdateId = null;_this.
-    lastPopupElement = void 0;_this.
+
     anchorElement = null;_this.
-    anchorInstance = void 0;_this.
+
+
+    refForTransition = /*#__PURE__*/_react.default.createRef();_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -250,12 +298,6 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
 
 
-    refAnchorElement = function (instance) {
-      _this.anchorInstance = instance;
-      var element = _this.extractElement(instance);
-      _this.updateAnchorElement(element);
-      _this.anchorElement = element;
-    };_this.
 
 
 
@@ -274,6 +316,26 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
 
 
+
+
+
+
+
+    renderContainerRef = function (childInstance) {
+      _this.updateAnchorElement(childInstance);
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -325,9 +387,29 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
       }
     };_this.
 
+    calculateWidth = function (width) {
+      if (typeof width === 'string' && width.includes('%')) {
+        return _this.anchorElement ? _this.anchorElement.offsetWidth * parseFloat(width) / 100 : 0;
+      }
+      return width;
+    };_this.
+
+    content = function (children) {
+      var _this$props = _this.props,backgroundColor = _this$props.backgroundColor,width = _this$props.width;
+
+      return /*#__PURE__*/(
+        _react.default.createElement("div", { className: _Popup.styles.content(_this.theme), "data-tid": 'PopupContent', ref: _this.refForTransition }, /*#__PURE__*/
+        _react.default.createElement("div", {
+          className: _Popup.styles.contentInner(_this.theme),
+          style: { backgroundColor: backgroundColor, width: _this.calculateWidth(width) },
+          "data-tid": 'PopupContentInner' },
+
+        children)));
 
 
 
+    };_this.
+
 
 
 
@@ -383,17 +465,15 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
     resetLocation = function () {
       _this.cancelDelayedUpdateLocation();
-      _this.setState({ location: null });
+      _this.state.location !== null && _this.setState({ location: null });
     };_this.
 
 
 
 
 
-    refPopupElement = function (zIndex) {
-      if (zIndex) {
-        _this.lastPopupElement = zIndex && (0, _reactDom.findDOMNode)(zIndex);
-      }
+    refPopupElement = function (element) {
+      _this.lastPopupElement = element;
     };_this.
 
 
@@ -420,15 +500,13 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
 
 
+
 
 
     handleLayoutEvent = function () {
       if (!_this.state.location) {
         return;
       }
-      if (_this.anchorInstance) {
-        _this.updateAnchorElement(_this.extractElement(_this.anchorInstance));
-      }
       _this.updateLocation();
     };_this.
 
@@ -455,32 +533,45 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
       if (!_this.locationEquals(_this.state.location, location)) {
         _this.setState({ location: location });
       }
-    };return _this;}var _proto = Popup.prototype;_proto.componentDidMount = function componentDidMount() {this.updateLocation();this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);};_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {/**
-                                                                                                                                                                                                                                                                                                             * Delaying updateLocation to ensure it happens after props update
-                                                                                                                                                                                                                                                                                                             */if (nextProps.opened) {if (!this.state.location) {this.setState({ location: DUMMY_LOCATION });}this.delayUpdateLocation();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var hadNoLocation = prevState.location === DUMMY_LOCATION;var hasLocation = this.state.location !== DUMMY_LOCATION;if (hadNoLocation && hasLocation && this.props.onOpen) {this.props.onOpen();}};_proto.componentWillUnmount = function componentWillUnmount() {this.cancelDelayedUpdateLocation();this.removeEventListeners(this.anchorElement);if (this.layoutEventsToken) {this.layoutEventsToken.remove();this.layoutEventsToken = null;}};_proto.render = function render() {var _this2 = this;return _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var location = this.state.location;var _this$props = this.props,anchorElement = _this$props.anchorElement,useWrapper = _this$props.useWrapper;var child = null;if (anchorElement instanceof HTMLElement) {this.updateAnchorElement(anchorElement);} else if (_react.default.isValidElement(anchorElement)) {child = useWrapper ? _react.default.createElement("span", null, anchorElement) : anchorElement;} else {child = _react.default.createElement("span", null, anchorElement);}return _react.default.createElement(_RenderContainer.RenderContainer, { anchor: child, ref: child ? this.refAnchorElement : undefined }, location && this.renderContent(location));};_proto.extractElement = function extractElement(instance) {if (!instance) {return null;}var element = (0, _reactDom.findDOMNode)(instance);return element instanceof HTMLElement ? element : null;};_proto.updateAnchorElement = function updateAnchorElement(element) {var anchorElement = this.anchorElement;if (element !== anchorElement) {this.removeEventListeners(anchorElement);this.anchorElement = element;this.addEventListeners(element);}};_proto.addEventListeners = function addEventListeners(element) {if (element && element instanceof HTMLElement) {element.addEventListener('mouseenter', this.handleMouseEnter);element.addEventListener('mouseleave', this.handleMouseLeave);element.addEventListener('click', this.handleClick);element.addEventListener('focusin', this.handleFocus);element.addEventListener('focusout', this.handleBlur);}};_proto.removeEventListeners = function removeEventListeners(element) {if (element && element instanceof HTMLElement) {element.removeEventListener('mouseenter', this.handleMouseEnter);element.removeEventListener('mouseleave', this.handleMouseLeave);element.removeEventListener('click', this.handleClick);element.removeEventListener('focusin', this.handleFocus);element.removeEventListener('focusout', this.handleBlur);}};_proto.renderContent = function renderContent(location) {var _this3 = this;var _this$props2 = this.props,backgroundColor = _this$props2.backgroundColor,disableAnimations = _this$props2.disableAnimations,maxWidth = _this$props2.maxWidth,hasShadow = _this$props2.hasShadow,ignoreHover = _this$props2.ignoreHover,opened = _this$props2.opened;var children = this.renderChildren();var _PopupHelper$getPosit = _PopupHelper.PopupHelper.getPositionObject(location.position),direction = _PopupHelper$getPosit.direction;var rootStyle = (0, _extends3.default)({}, location.coordinates, { maxWidth: maxWidth });return _react.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation }, function (state) {var _extends2, _ref;return _react.default.createElement(_ZIndex.ZIndex, { ref: _this3.refPopupElement, priority: 'Popup', className: (0, _classnames.default)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup.jsStyles.popup(_this3.theme)] = true, _extends2[_Popup.jsStyles.shadow(_this3.theme)] = hasShadow, _extends2[_Popup.jsStyles.shadowFallback(_this3.theme)] = hasShadow && (_utils.isIE11 || _utils.isEdge), _extends2[_Popup.jsStyles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup.jsStyles["transition-enter-" + direction](_this3.theme)] = true, _ref[_Popup.jsStyles.transitionEnter()] = state === 'entering', _ref[_Popup.jsStyles.transitionEnterActive()] = state === 'entered', _ref[_Popup.jsStyles.transitionExit()] = state === 'exiting', _ref))), style: rootStyle, onMouseEnter: _this3.handleMouseEnter, onMouseLeave: _this3.handleMouseLeave }, _react.default.createElement("div", { className: _Popup.jsStyles.content(_this3.theme), "data-tid": 'PopupContent' }, _react.default.createElement("div", { className: _Popup.jsStyles.contentInner(_this3.theme), style: { backgroundColor: backgroundColor }, "data-tid": 'PopupContentInner' }, children)), _this3.renderPin(location.position));});};_proto.renderChildren = function renderChildren() {return (0, _utils.isFunction)(this.props.children) ? this.props.children() : this.props.children;};_proto.renderPin = function renderPin(position) {/**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             * Box-shadow does not appear under the pin. Borders are used instead.
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             * In non-ie browsers drop-shadow filter is used. It is applying
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             * shadow to the pin too.
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             */var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;var pinBorder = _utils.isIE11 && isDefaultBorderColor ? 'rgba(0, 0, 0, 0.09)' : this.theme.popupBorderColor;var _this$props3 = this.props,pinSize = _this$props3.pinSize,pinOffset = _this$props3.pinOffset,hasShadow = _this$props3.hasShadow,backgroundColor = _this$props3.backgroundColor,borderColor = _this$props3.borderColor;return this.props.hasPin && _react.default.createElement(_PopupPin.PopupPin, { popupElement: this.lastPopupElement, popupPosition: position, size: pinSize, offset: pinOffset, borderWidth: hasShadow ? 1 : 0, backgroundColor: backgroundColor || this.theme.popupBackground, borderColor: borderColor || pinBorder });};_proto.delayUpdateLocation = function delayUpdateLocation() {this.cancelDelayedUpdateLocation();this.locationUpdateId = (0, _raf.default)(this.updateLocation);};_proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {if (this.locationUpdateId) {_raf.default.cancel(this.locationUpdateId);this.locationUpdateId = null;}};_proto.locationEquals = function locationEquals(x, y) {if (x === y) {return true;}
-    if (x == null || y == null) {
-      return false;
+    };return _this;}var _proto = Popup.prototype;_proto.componentDidMount = function componentDidMount() {this.updateLocation();this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);};Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {/**
+     * Delaying updateLocation to ensure it happens after props update
+     */if (props.opened) {if (!state.location) {return { location: DUMMY_LOCATION };}} else if (state.location) {return { location: DUMMY_LOCATION };}return state;};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var hadNoLocation = prevState.location === DUMMY_LOCATION;var hasLocation = this.state.location !== DUMMY_LOCATION;var wasClosed = prevProps.opened && !this.props.opened;if (this.isMobileLayout && prevState.location === null && this.state.location === null) {this.setState({ location: DUMMY_LOCATION });}if (hadNoLocation && hasLocation && this.props.onOpen) {this.props.onOpen();}if (wasClosed && !hasLocation && this.props.onClose) {this.props.onClose();}if (this.props.opened) {this.delayUpdateLocation();}};_proto.componentWillUnmount = function componentWillUnmount() {this.cancelDelayedUpdateLocation();this.removeEventListeners(this.anchorElement);if (this.layoutEventsToken) {this.layoutEventsToken.remove();this.layoutEventsToken = null;}if (this.state.location && this.props.onClose) {this.props.onClose();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMobile = function renderMobile() {var opened = this.props.opened;return /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { opened: opened, withoutRenderContainer: true, onCloseRequest: this.props.mobileOnCloseRequest }, this.content(this.renderChildren()));};_proto.renderMain = function renderMain() {var _this3 = this;var location = this.state.location;var _this$props2 = this.props,anchorElement = _this$props2.anchorElement,useWrapper = _this$props2.useWrapper;var anchor = null;if ((0, _SSRSafe.isHTMLElement)(anchorElement)) {this.updateAnchorElement(anchorElement);} else if ( /*#__PURE__*/_react.default.isValidElement(anchorElement)) {anchor = useWrapper ? /*#__PURE__*/_react.default.createElement("span", null, anchorElement) : anchorElement;} else {anchor = /*#__PURE__*/_react.default.createElement("span", null, anchorElement);}var anchorWithRef = anchor && /*#__PURE__*/_react.default.isValidElement(anchor) && (0, _utils.isRefableElement)(anchor) ? /*#__PURE__*/_react.default.cloneElement(anchor, { ref: function ref(instance) {var _anchor;_this3.updateAnchorElement(instance);var originalRef = (_anchor = anchor) == null ? void 0 : _anchor.ref;originalRef && (0, _callChildRef.callChildRef)(originalRef, instance);} }) : null; // we need to get anchor's DOM node
+    // so we either set our own ref on it via cloning
+    // or relay on findDOMNode (inside getRootNode)
+    // which should be called with RenderContainer's ref
+    // in the case when the anchor is not refable
+    return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, { anchor: anchorWithRef || anchor, ref: anchorWithRef ? null : this.renderContainerRef }, this.isMobileLayout && !this.props.withoutMobile ? this.renderMobile() : location && this.renderContent(location));};_proto.updateAnchorElement = function updateAnchorElement(childInstance) {var childDomNode = (0, _rootNode.getRootNode)(childInstance);var anchorElement = this.anchorElement;if (childDomNode !== anchorElement) {this.removeEventListeners(anchorElement);this.anchorElement = childDomNode;this.addEventListeners(childDomNode);this.setRootNode(childDomNode);}};_proto.addEventListeners = function addEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.addEventListener('mouseenter', this.handleMouseEnter);element.addEventListener('mouseleave', this.handleMouseLeave);element.addEventListener('click', this.handleClick);element.addEventListener('focusin', this.handleFocus);element.addEventListener('focusout', this.handleBlur);}};_proto.removeEventListeners = function removeEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.removeEventListener('mouseenter', this.handleMouseEnter);element.removeEventListener('mouseleave', this.handleMouseLeave);element.removeEventListener('click', this.handleClick);element.removeEventListener('focusin', this.handleFocus);element.removeEventListener('focusout', this.handleBlur);}};_proto.renderContent = function renderContent(location) {var _this4 = this;var _this$props3 = this.props,disableAnimations = _this$props3.disableAnimations,maxWidth = _this$props3.maxWidth,hasShadow = _this$props3.hasShadow,ignoreHover = _this$props3.ignoreHover,opened = _this$props3.opened;var children = this.renderChildren();var _PopupHelper$getPosit = _PopupHelper.PopupHelper.getPositionObject(location.position),direction = _PopupHelper$getPosit.direction;var rootStyle = (0, _extends3.default)({}, location.coordinates, { maxWidth: maxWidth });var shouldFallbackShadow = _client.isIE11 || _client.isEdge || _client.isSafari;return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation, nodeRef: this.refForTransition }, function (state) {var _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this4.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { wrapperRef: _this4.refPopupElement, priority: 'Popup', className: (0, _Emotion.cx)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup.styles.popup(_this4.theme)] = true, _extends2[_Popup.styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[_Popup.styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[_Popup.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup.styles["transition-enter-" + direction](_this4.theme)] = true, _ref[_Popup.styles.transitionEnter()] = state === 'entering', _ref[_Popup.styles.transitionEnterActive()] = state === 'entered', _ref[_Popup.styles.transitionExit()] = state === 'exiting', _ref))), style: rootStyle, onMouseEnter: _this4.handleMouseEnter, onMouseLeave: _this4.handleMouseLeave }, _this4.content(children), !_this4.isMobileLayout && _this4.renderPin(location.position)));});};_proto.renderChildren = function renderChildren() {return (0, _utils.isFunction)(this.props.children) ? this.props.children() : this.props.children;};_proto.renderPin = function renderPin(positionName) {/**
+     * Box-shadow does not appear under the pin. Borders are used instead.
+     * In non-ie browsers drop-shadow filter is used. It is applying
+     * shadow to the pin too.
+     */var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;var pinBorder = _client.isIE11 && isDefaultBorderColor ? 'rgba(0, 0, 0, 0.09)' : this.theme.popupBorderColor;var _this$props4 = this.props,pinSize = _this$props4.pinSize,hasShadow = _this$props4.hasShadow,backgroundColor = _this$props4.backgroundColor,borderColor = _this$props4.borderColor;var position = _PopupHelper.PopupHelper.getPositionObject(positionName);return this.props.hasPin && /*#__PURE__*/_react.default.createElement(_PopupPin.PopupPin, { popupElement: this.lastPopupElement, popupPosition: positionName, size: pinSize || parseInt(this.theme.popupPinSize), offset: this.getPinOffset(position.align), borderWidth: hasShadow ? 1 : 0, backgroundColor: backgroundColor || this.theme.popupBackground, borderColor: borderColor || pinBorder });};_proto.delayUpdateLocation = function delayUpdateLocation() {this.cancelDelayedUpdateLocation();this.locationUpdateId = (0, _raf.default)(this.updateLocation);};_proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {if (this.locationUpdateId) {_raf.default.cancel(this.locationUpdateId);this.locationUpdateId = null;}};_proto.locationEquals = function locationEquals(x, y) {if (x === y) {return true;}if (x == null || y == null) {return false;}if (!_client.isIE11 && !_client.isEdge) {
+      return (
+        x.coordinates.left === y.coordinates.left &&
+        x.coordinates.top === y.coordinates.top &&
+        x.position === y.position);
+
     }
 
+    // Для ie/edge обновляем позицию только при разнице минимум в 1. Иначе есть вероятность
+    // уйти в бесконечный ререндер
+
     return (
-      x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position);
+      x.position === y.position &&
+      Math.abs(x.coordinates.top - y.coordinates.top) <= 1 &&
+      Math.abs(x.coordinates.left - y.coordinates.left) <= 1);
 
   };_proto.
 
   getLocation = function getLocation(popupElement, location) {
-    var positions = this.props.positions;
+    var _this$props5 = this.props,positions = _this$props5.positions,tryPreserveFirstRenderedPosition = _this$props5.tryPreserveFirstRenderedPosition;
     var anchorElement = this.anchorElement;
 
     (0, _warning.default)(
-    anchorElement && anchorElement instanceof HTMLElement,
+    anchorElement && (0, _SSRSafe.isHTMLElement)(anchorElement),
     'Anchor element is not defined or not instance of HTMLElement');
 
 
-    if (!(anchorElement && anchorElement instanceof HTMLElement)) {
+    if (!(anchorElement && (0, _SSRSafe.isHTMLElement)(anchorElement))) {
       return location;
     }
 
@@ -496,12 +587,21 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
       var isFullyVisible = _PopupHelper.PopupHelper.isFullyVisible(coordinates, popupRect);
       var canBecomeVisible = !isFullyVisible && _PopupHelper.PopupHelper.canBecomeFullyVisible(position, coordinates);
-      if (isFullyVisible || canBecomeVisible) {
+
+      if (
+      // если нужно сохранить первоначальную позицию и Попап целиком
+      // находится в пределах вьюпорта (или может быть проскроллен в него)
+      tryPreserveFirstRenderedPosition && (isFullyVisible || canBecomeVisible) ||
+      // если Попап целиком во вьюпорте и в самой приоритетной позиции
+      // (иначе нужно попытаться позицию сменить)
+      isFullyVisible && position === positions[0])
+      {
+        // сохраняем текущую позицию
         return { coordinates: coordinates, position: position };
       }
     }
 
-    for (var _iterator = positions, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {if (_isArray) {if (_i >= _iterator.length) break;position = _iterator[_i++];} else {_i = _iterator.next();if (_i.done) break;position = _i.value;}
+    for (var _iterator = _createForOfIteratorHelperLoose(positions), _step; !(_step = _iterator()).done;) {position = _step.value;
       coordinates = this.getCoordinates(anchorRect, popupRect, position);
       if (_PopupHelper.PopupHelper.isFullyVisible(coordinates, popupRect)) {
         return { coordinates: coordinates, position: position };
@@ -518,14 +618,22 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
       return 0;
     }
 
-    var anchorSize = /top|bottom/.test(position.direction) ? anchorRect.width : anchorRect.height;var _this$props4 =
+    var anchorSize = /top|bottom/.test(position.direction) ? anchorRect.width : anchorRect.height;
+
+    var pinSize = this.props.pinSize;
+
+    return Math.max(
+    0,
+    this.getPinOffset(position.align) + (pinSize || parseInt(this.theme.popupPinSize)) - anchorSize / 2);
 
-    this.props,pinOffset = _this$props4.pinOffset,pinSize = _this$props4.pinSize;
-    return Math.max(0, pinOffset + pinSize - anchorSize / 2);
   };_proto.
 
   getCoordinates = function getCoordinates(anchorRect, popupRect, positionName) {
-    var margin = this.props.margin;
+    var marginFromProps = this.props.margin;
+    var margin =
+    (0, _utils.isNonNullable)(marginFromProps) && !isNaN(marginFromProps) ?
+    marginFromProps :
+    parseInt(this.theme.popupMargin) || 0;
     var position = _PopupHelper.PopupHelper.getPositionObject(positionName);
     var popupOffset = this.props.popupOffset + this.getPinnedPopupOffset(anchorRect, position);
 
@@ -555,6 +663,24 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
   };_proto.
 
+  getPinOffset = function getPinOffset(align) {
+    var pinOffset = this.props.pinOffset;
+
+    switch (align) {
+      case 'top':
+      case 'bottom':
+        return pinOffset || parseInt(this.theme.popupPinOffset) || parseInt(this.theme.popupPinOffsetY);
+      case 'left':
+      case 'right':
+        return pinOffset || parseInt(this.theme.popupPinOffset) || parseInt(this.theme.popupPinOffsetX);
+      case 'center':
+      case 'middle':
+        return 0;
+      default:
+        throw new Error("Unexpected align '" + align + "'");}
+
+  };_proto.
+
   getHorizontalPosition = function getHorizontalPosition(anchorRect, popupRect, align, popupOffset) {
     switch (align) {
       case 'left':
@@ -579,29 +705,29 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
       default:
         throw new Error("Unexpected align '" + align + "'");}
 
-  };return Popup;}(_react.default.Component);exports.Popup = Popup;Popup.__KONTUR_REACT_UI__ = 'Popup';Popup.propTypes = { /**
-                                                                                                                            * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
-                                                                                                                            */anchorElement: _propTypes.default.oneOfType([(0, _SSRSafe.safePropTypesInstanceOf)(function () {return HTMLElement;}), _propTypes.default.node]).isRequired, /**
-                                                                                                                                                                                                                                                                                            * Фон попапа и пина
-                                                                                                                                                                                                                                                                                            */backgroundColor: _propTypes.default.string, children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]), /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                       * Показывать ли пин
-                                                                                                                                                                                                                                                                                                                                                                                                                                       */hasPin: _propTypes.default.bool, /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                           * Применять ли box-shadow на попапе. При false отключает границу на пине
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                           */hasShadow: _propTypes.default.bool, /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  * Отступ попапа от элемента
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  */margin: _propTypes.default.number, /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        * Показан или скрыт попап
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        */opened: _propTypes.default.bool, /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            */pinOffset: _propTypes.default.number, /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     * Сторона пина без учёта границы.
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     * Пин представляет собой равносторонний треугольник, высота от попапа
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     * до "носика" пина будет соответствовать формуле (size* √3)/2
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     */pinSize: _propTypes.default.number, /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            * смещение попапа относительно родительского элемента
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            */popupOffset: _propTypes.default.number, /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * С какой стороны показывать попап и край попапа,
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * на котором будет отображаться пин
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       */positions: _propTypes.default.array, /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               * Игнорировать ли события hover/click
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               */ignoreHover: _propTypes.default.bool };Popup.defaultProps = { margin: 10, popupOffset: 0, pinSize: 8, pinOffset: 16, hasPin: false, hasShadow: false, disableAnimations: Boolean(process.env.enableReactTesting), useWrapper: false, ignoreHover: false };
+  };return Popup;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Popup', _class2.propTypes = { /**
+   * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
+   */anchorElement: _propTypes.default.oneOfType([(0, _SSRSafe.safePropTypesInstanceOf)(function () {return HTMLElement;}), _propTypes.default.node]).isRequired, /**
+   * Фон попапа и пина
+   */backgroundColor: _propTypes.default.string, children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]), /**
+   * Показывать ли пин
+   */hasPin: _propTypes.default.bool, /**
+   * Применять ли box-shadow на попапе. При false отключает границу на пине
+   */hasShadow: _propTypes.default.bool, /**
+   * Отступ попапа от элемента
+   */margin: _propTypes.default.number, /**
+   * Показан или скрыт попап
+   */opened: _propTypes.default.bool, /**
+   * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
+   */pinOffset: _propTypes.default.number, /**
+   * Сторона пина без учёта границы.
+   * Пин представляет собой равносторонний треугольник, высота от попапа
+   * до "носика" пина будет соответствовать формуле (size* √3)/2
+   */pinSize: _propTypes.default.number, /**
+   * смещение попапа относительно родительского элемента
+   */popupOffset: _propTypes.default.number, /**
+   * С какой стороны показывать попап и край попапа,
+   * на котором будет отображаться пин
+   */positions: _propTypes.default.array, /**
+   * Игнорировать ли события hover/click
+   */ignoreHover: _propTypes.default.bool }, _class2.defaultProps = { popupOffset: 0, hasPin: false, hasShadow: false, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, ignoreHover: false, width: 'auto' }, _temp)) || _class) || _class;exports.Popup = Popup;