@skbkontur/react-ui 0.0.0-9a66eda8b5 → 0.0.0-a18e664e8f

package/cjs/internal/Popup/Popup.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Nullable } from '../../typings/utility-types';
 import { FocusEventType, MouseEventType } from '../../typings/event-types';
+import { CommonProps } from '../CommonWrapper';
 export declare type PopupPosition = 'top left' | 'top center' | 'top right' | 'right top' | 'right middle' | 'right bottom' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom';
 export declare const PopupPositions: PopupPosition[];
 export interface PopupHandlerProps {
@@ -11,8 +12,9 @@ export interface PopupHandlerProps {
     onFocus?: (event: FocusEventType) => void;
     onBlur?: (event: FocusEventType) => void;
     onOpen?: () => void;
+    onClose?: () => void;
 }
-export interface PopupProps extends PopupHandlerProps {
+export interface PopupProps extends CommonProps, PopupHandlerProps {
     anchorElement: React.ReactNode | HTMLElement;
     backgroundColor?: React.CSSProperties['backgroundColor'];
     borderColor?: React.CSSProperties['borderColor'];
@@ -20,15 +22,31 @@ export interface PopupProps extends PopupHandlerProps {
     hasPin: boolean;
     hasShadow: boolean;
     disableAnimations: boolean;
-    margin: number;
+    margin?: number;
     maxWidth?: number | string;
     opened: boolean;
-    pinOffset: number;
-    pinSize: number;
+    pinOffset?: number;
+    pinSize?: number;
     popupOffset: number;
     positions: PopupPosition[];
+    /**
+     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
+     *
+     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
+     */
     useWrapper: boolean;
     ignoreHover: boolean;
+    width: React.CSSProperties['width'];
+    /**
+     * При очередном рендере пытаться сохранить первоначальную позицию попапа
+     * (в числе числе, когда он выходит за пределы экрана, но может быть проскролен в него).
+     *
+     * Нужен только для Tooltip. В остальных случаях позиция перестраивается автоматически.
+     * @see https://github.com/skbkontur/retail-ui/pull/1195
+     */
+    tryPreserveFirstRenderedPosition?: boolean;
+    withoutMobile?: boolean;
+    mobileOnCloseRequest?: () => void;
 }
 interface PopupLocation {
     coordinates: {
@@ -93,15 +111,13 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
         ignoreHover: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
-        margin: number;
         popupOffset: number;
-        pinSize: number;
-        pinOffset: number;
         hasPin: boolean;
         hasShadow: boolean;
         disableAnimations: boolean;
         useWrapper: boolean;
         ignoreHover: boolean;
+        width: string;
     };
     state: PopupState;
     private theme;
@@ -110,11 +126,13 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private lastPopupElement;
     private anchorElement;
     private anchorInstance;
+    private isMobileLayout;
     componentDidMount(): void;
     UNSAFE_componentWillReceiveProps(nextProps: Readonly<PopupProps>): void;
     componentDidUpdate(prevProps: PopupProps, prevState: PopupState): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
+    private renderMobile;
     private renderMain;
     private refAnchorElement;
     private extractElement;
@@ -126,6 +144,8 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private handleClick;
     private handleFocus;
     private handleBlur;
+    private calculateWidth;
+    private content;
     private renderContent;
     private resetLocation;
     private renderChildren;
@@ -139,6 +159,7 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private getLocation;
     private getPinnedPopupOffset;
     private getCoordinates;
+    private getPinOffset;
     private getHorizontalPosition;
     private getVerticalPosition;
 }

package/cjs/internal/Popup/Popup.js

@@ -1,10 +1,9 @@
-"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"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");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");
 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,14 +11,19 @@ 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 _ResponsiveLayout = require("../../components/ResponsiveLayout");
+var _MobilePopup = require("../MobilePopup");
 
 var _PopupPin = require("./PopupPin");
 var _PopupHelper = require("./PopupHelper");
-var _Popup = require("./Popup.styles");
+var _Popup = require("./Popup.styles");var _class, _class2, _temp;function _createForOfIteratorHelperLoose(o, allowArrayLike) {var it;if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {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.");}it = o[Symbol.iterator]();return it.next.bind(it);}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 };
@@ -101,7 +105,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 +123,23 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
 
 
+Popup = (0, _ResponsiveLayout.responsiveLayout)(_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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -185,6 +205,30 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
     lastPopupElement = void 0;_this.
     anchorElement = null;_this.
     anchorInstance = void 0;_this.
+    isMobileLayout = void 0;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -326,10 +370,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' }, /*#__PURE__*/
+        _react.default.createElement("div", {
+          className: _Popup.styles.contentInner(_this.theme),
+          style: { backgroundColor: backgroundColor, width: _this.calculateWidth(width) },
+          "data-tid": 'PopupContentInner' },
 
+        children)));
 
 
 
+    };_this.
+
 
 
 
@@ -421,6 +484,7 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
 
 
+
 
 
     handleLayoutEvent = function () {
@@ -456,13 +520,13 @@ 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;}
+    };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 (this.isMobileLayout && prevState.location === null && this.state.location === null) {this.setState({ location: DUMMY_LOCATION });}if (hadNoLocation && hasLocation && this.props.onOpen) {this.props.onOpen();}if (!hadNoLocation && !this.state.location && this.props.onClose) {this.props.onClose();}};_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 location = this.state.location;var _this$props2 = this.props,anchorElement = _this$props2.anchorElement,useWrapper = _this$props2.useWrapper;var child = null;if ((0, _SSRSafe.isHTMLElement)(anchorElement)) {this.updateAnchorElement(anchorElement);} else if ( /*#__PURE__*/_react.default.isValidElement(anchorElement)) {child = useWrapper ? /*#__PURE__*/_react.default.createElement("span", null, anchorElement) : anchorElement;} else {child = /*#__PURE__*/_react.default.createElement("span", null, anchorElement);}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, { anchor: child, ref: child ? this.refAnchorElement : undefined }, this.isMobileLayout && !this.props.withoutMobile ? this.renderMobile() : location && this.renderContent(location));};_proto.extractElement = function extractElement(instance) {if (!instance) {return null;}var element = (0, _reactDom.findDOMNode)(instance);return (0, _SSRSafe.isHTMLElement)(element) ? 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 && (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 _this3 = 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 }, function (state) {var _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this3.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { ref: _this3.refPopupElement, priority: 'Popup', className: (0, _Emotion.cx)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup.styles.popup(_this3.theme)] = true, _extends2[_Popup.styles.shadow(_this3.theme)] = hasShadow && !shouldFallbackShadow, _extends2[_Popup.styles.shadowFallback(_this3.theme)] = hasShadow && shouldFallbackShadow, _extends2[_Popup.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup.styles["transition-enter-" + direction](_this3.theme)] = true, _ref[_Popup.styles.transitionEnter()] = state === 'entering', _ref[_Popup.styles.transitionEnterActive()] = state === 'entered', _ref[_Popup.styles.transitionExit()] = state === 'exiting', _ref))), style: rootStyle, onMouseEnter: _this3.handleMouseEnter, onMouseLeave: _this3.handleMouseLeave }, _this3.content(children), !_this3.isMobileLayout && _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(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;
     }
@@ -472,16 +536,16 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
   };_proto.
 
-  getLocation = function getLocation(popupElement, location) {
-    var positions = this.props.positions;
+  getLocation = function getLocation(popupElement, location) {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;
     }
 
@@ -497,12 +561,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 };
@@ -519,14 +592,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;
+  getCoordinates = function getCoordinates(anchorRect, popupRect, positionName) {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);
 
@@ -556,6 +637,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':
@@ -580,29 +679,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: _currentEnvironment.isTestEnv, 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;exports.Popup = Popup;