@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ccbe7cf017

package/internal/Popup/Popup/Popup.js

@@ -1,38 +1,93 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
+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;
+}
+
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import raf from 'raf';
 import warning from 'warning';
-import cn from 'classnames';
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ZIndex } from "../../ZIndex";
 import { RenderContainer } from "../../RenderContainer";
-import { isFunction, isIE11, isEdge } from "../../../lib/utils";
+import { isFunction, isNonNullable, isNullable, isRefableElement } from "../../../lib/utils";
+import { isIE11, isEdge, isSafari } from "../../../lib/client";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { safePropTypesInstanceOf } from "../../../lib/SSRSafe";
+import { isElement, safePropTypesInstanceOf } from "../../../lib/SSRSafe";
 import { isTestEnv } from "../../../lib/currentEnvironment";
+import { CommonWrapper } from "../../CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
+import { MobilePopup } from "../../MobilePopup";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { callChildRef } from "../../../lib/callChildRef/callChildRef";
+import { isInstanceWithAnchorElement } from "../../../lib/InstanceWithAnchorElement";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { PopupPin } from "../PopupPin";
 import { PopupHelper } from "../PopupHelper";
-import { jsStyles } from "../Popup.styles";
+import { styles } from "../Popup.styles";
 var POPUP_BORDER_DEFAULT_COLOR = 'transparent';
 var TRANSITION_TIMEOUT = {
   enter: 0,
   exit: 200
 };
-var DUMMY_LOCATION = {
-  position: 'top left',
+export var PopupPositions = ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom right', 'bottom center', 'bottom left', 'left bottom', 'left middle', 'left top'];
+export var DefaultPosition = PopupPositions[0];
+export var DUMMY_LOCATION = {
+  position: DefaultPosition,
   coordinates: {
     top: -9999,
     left: -9999
   }
 };
-export var PopupPositions = ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom right', 'bottom center', 'bottom left', 'left bottom', 'left middle', 'left top'];
-export var Popup =
-/*#__PURE__*/
-function (_React$Component) {
+export var PopupDataTids = {
+  content: 'PopupContent',
+  contentInner: 'PopupContentInner',
+  popupPin: 'PopupPin__root'
+};
+export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Popup, _React$Component);
 
   function Popup() {
@@ -43,24 +98,26 @@ function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Popup.defaultProps);
     _this.state = {
       location: _this.props.opened ? DUMMY_LOCATION : null
     };
-    _this.theme = void 0;
-    _this.layoutEventsToken = void 0;
     _this.locationUpdateId = null;
-    _this.lastPopupElement = void 0;
+    _this.refForTransition = /*#__PURE__*/React.createRef();
+    _this.hasAnchorElementListeners = false;
     _this.anchorElement = null;
-    _this.anchorInstance = void 0;
 
-    _this.refAnchorElement = function (instance) {
-      _this.anchorInstance = instance;
+    _this.updateAnchorElement = function (instance) {
+      var childDomNode = isInstanceWithAnchorElement(instance) ? instance.getAnchorElement() : getRootNode(instance);
+      var anchorElement = _this.anchorElement;
 
-      var element = _this.extractElement(instance);
+      if (childDomNode !== anchorElement) {
+        _this.removeEventListeners(anchorElement);
 
-      _this.updateAnchorElement(element);
+        _this.anchorElement = childDomNode;
 
-      _this.anchorElement = element;
+        _this.addEventListeners(childDomNode);
+      }
     };
 
     _this.handleMouseEnter = function (event) {
@@ -93,18 +150,44 @@ function (_React$Component) {
       }
     };
 
+    _this.calculateWidth = function (width) {
+      if (typeof width === 'string' && width.includes('%')) {
+        var anchorWidth = Math.floor(getDOMRect(_this.anchorElement).width);
+        return _this.anchorElement ? anchorWidth * parseFloat(width) / 100 : 0;
+      }
+
+      return width;
+    };
+
+    _this.content = function (children) {
+      var backgroundColor = _this.props.backgroundColor;
+
+      var width = _this.getProps().width;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.content(_this.theme),
+        "data-tid": PopupDataTids.content,
+        ref: _this.refForTransition
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.contentInner(_this.theme),
+        style: {
+          backgroundColor: backgroundColor,
+          width: _this.calculateWidth(width)
+        },
+        "data-tid": PopupDataTids.contentInner
+      }, children));
+    };
+
     _this.resetLocation = function () {
       _this.cancelDelayedUpdateLocation();
 
-      _this.setState({
+      _this.state.location !== null && _this.setState({
         location: null
       });
     };
 
-    _this.refPopupElement = function (zIndex) {
-      if (zIndex) {
-        _this.lastPopupElement = zIndex && findDOMNode(zIndex);
-      }
+    _this.refPopupElement = function (element) {
+      _this.lastPopupElement = element;
     };
 
     _this.handleLayoutEvent = function () {
@@ -112,10 +195,6 @@ function (_React$Component) {
         return;
       }
 
-      if (_this.anchorInstance) {
-        _this.updateAnchorElement(_this.extractElement(_this.anchorInstance));
-      }
-
       _this.updateLocation();
     };
 
@@ -128,6 +207,10 @@ function (_React$Component) {
 
       var location = _this.getLocation(popupElement, _this.state.location);
 
+      if (location) {
+        _this.props.onPositionChange == null ? void 0 : _this.props.onPositionChange(location == null ? void 0 : location.position);
+      }
+
       if (!_this.locationEquals(_this.state.location, location)) {
         _this.setState({
           location: location
@@ -143,121 +226,169 @@ function (_React$Component) {
   _proto.componentDidMount = function componentDidMount() {
     this.updateLocation();
     this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);
+
+    if (!this.hasAnchorElementListeners) {
+      this.addEventListeners(this.anchorElement);
+    }
   };
 
-  _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({
+  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
-        });
+        };
       }
-
-      this.delayUpdateLocation();
+    } 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 (hadNoLocation && hasLocation && this.props.onOpen) {
+    if (this.isMobileLayout && prevState.location === null && this.state.location === null) {
+      this.setState({
+        location: DUMMY_LOCATION
+      });
+    }
+
+    if (this.props.opened && 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.hasAnchorElementListeners) {
+      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 React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
       return _this2.renderMain();
     });
   };
 
+  _proto.renderMobile = function renderMobile() {
+    var opened = this.props.opened;
+    var children = this.renderChildren();
+    return children ? /*#__PURE__*/React.createElement(MobilePopup, {
+      opened: opened,
+      withoutRenderContainer: true,
+      onCloseRequest: this.props.mobileOnCloseRequest
+    }, this.content(children)) : null;
+  };
+
   _proto.renderMain = function renderMain() {
+    var _this3 = this;
+
     var location = this.state.location;
-    var _this$props = this.props,
-        anchorElement = _this$props.anchorElement,
-        useWrapper = _this$props.useWrapper;
-    var child = null;
+    var anchorElement = this.props.anchorElement;
+    var useWrapper = this.getProps().useWrapper;
+    var anchor = null;
 
-    if (anchorElement instanceof HTMLElement) {
+    if (isElement(anchorElement)) {
       this.updateAnchorElement(anchorElement);
-    } else if (React.isValidElement(anchorElement)) {
-      child = useWrapper ? React.createElement("span", null, anchorElement) : anchorElement;
+    } else if ( /*#__PURE__*/React.isValidElement(anchorElement)) {
+      anchor = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
     } else {
-      child = React.createElement("span", null, anchorElement);
+      anchor = /*#__PURE__*/React.createElement("span", null, anchorElement);
     }
 
-    return React.createElement(RenderContainer, {
-      anchor: child,
-      ref: child ? this.refAnchorElement : undefined
-    }, location && this.renderContent(location));
-  };
+    var anchorWithRef = anchor && /*#__PURE__*/React.isValidElement(anchor) && isRefableElement(anchor) ? /*#__PURE__*/React.cloneElement(anchor, {
+      ref: function ref(instance) {
+        var _anchor;
 
-  _proto.extractElement = function extractElement(instance) {
-    if (!instance) {
-      return null;
-    }
+        _this3.updateAnchorElement(instance);
 
-    var element = findDOMNode(instance);
-    return element instanceof HTMLElement ? element : null;
+        var originalRef = (_anchor = anchor) == null ? void 0 : _anchor.ref;
+        originalRef && 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 within updateAnchorElement
+    // in the case when the anchor is not refable
+
+    var canGetAnchorNode = !!anchorWithRef || isElement(anchorElement);
+    return /*#__PURE__*/React.createElement(RenderContainer, {
+      anchor: anchorWithRef || anchor,
+      ref: canGetAnchorNode ? null : this.updateAnchorElement
+    }, this.isMobileLayout && !this.props.withoutMobile ? this.renderMobile() : location && this.renderContent(location));
   };
 
-  _proto.updateAnchorElement = function updateAnchorElement(element) {
-    var anchorElement = this.anchorElement;
+  _proto.addEventListeners = function addEventListeners(element) {
+    if (element && isElement(element)) {
+      // @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
+      element.addEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
 
-    if (element !== anchorElement) {
-      this.removeEventListeners(anchorElement);
-      this.anchorElement = element;
-      this.addEventListeners(element);
-    }
-  };
+      element.addEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
 
-  _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);
+      this.hasAnchorElementListeners = true;
     }
   };
 
   _proto.removeEventListeners = function removeEventListeners(element) {
-    if (element && element instanceof HTMLElement) {
-      element.removeEventListener('mouseenter', this.handleMouseEnter);
-      element.removeEventListener('mouseleave', this.handleMouseLeave);
+    if (element && isElement(element)) {
+      // @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
+      element.removeEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
+
+      element.removeEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
+
       element.removeEventListener('click', this.handleClick);
       element.removeEventListener('focusin', this.handleFocus);
       element.removeEventListener('focusout', this.handleBlur);
+      this.hasAnchorElementListeners = false;
     }
   };
 
   _proto.renderContent = function renderContent(location) {
-    var _this3 = this;
+    var _this4 = this;
+
+    var _this$props = this.props,
+        maxWidth = _this$props.maxWidth,
+        opened = _this$props.opened;
+
+    var _this$getProps = this.getProps(),
+        hasShadow = _this$getProps.hasShadow,
+        disableAnimations = _this$getProps.disableAnimations,
+        ignoreHover = _this$getProps.ignoreHover;
 
-    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.getPositionObject(location.position),
@@ -267,7 +398,8 @@ function (_React$Component) {
       maxWidth: maxWidth
     });
 
-    return React.createElement(Transition, {
+    var shouldFallbackShadow = isIE11 || isEdge || isSafari;
+    return /*#__PURE__*/React.createElement(Transition, {
       timeout: TRANSITION_TIMEOUT,
       appear: !disableAnimations,
       "in": Boolean(opened && children),
@@ -275,27 +407,22 @@ function (_React$Component) {
       unmountOnExit: true,
       enter: !disableAnimations,
       exit: !disableAnimations,
-      onExited: this.resetLocation
+      onExited: this.resetLocation,
+      nodeRef: this.refForTransition
     }, function (state) {
       var _extends2, _ref;
 
-      return React.createElement(ZIndex, {
-        ref: _this3.refPopupElement,
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({}, _this4.props, {
+        rootNodeRef: _this4.setRootNode
+      }), /*#__PURE__*/React.createElement(ZIndex, {
+        "data-tid": 'Popup__root',
+        wrapperRef: _this4.refPopupElement,
         priority: 'Popup',
-        className: cn(_extends((_extends2 = {}, _extends2[jsStyles.popup(_this3.theme)] = true, _extends2[jsStyles.shadow(_this3.theme)] = hasShadow, _extends2[jsStyles.shadowFallback(_this3.theme)] = hasShadow && (isIE11 || isEdge), _extends2[jsStyles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[jsStyles["transition-enter-" + direction](_this3.theme)] = true, _ref[jsStyles.transitionEnter()] = state === 'entering', _ref[jsStyles.transitionEnterActive()] = state === 'entered', _ref[jsStyles.transitionExit()] = state === 'exiting', _ref))),
+        className: cx(_extends((_extends2 = {}, _extends2[styles.popup(_this4.theme)] = true, _extends2[styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[styles["transition-enter-" + direction](_this4.theme)] = true, _ref[styles.transitionEnter()] = state === 'entering', _ref[styles.transitionEnterActive()] = state === 'entered', _ref[styles.transitionExit()] = state === 'exiting', _ref))),
         style: rootStyle,
-        onMouseEnter: _this3.handleMouseEnter,
-        onMouseLeave: _this3.handleMouseLeave
-      }, React.createElement("div", {
-        className: jsStyles.content(_this3.theme),
-        "data-tid": 'PopupContent'
-      }, React.createElement("div", {
-        className: jsStyles.contentInner(_this3.theme),
-        style: {
-          backgroundColor: backgroundColor
-        },
-        "data-tid": 'PopupContentInner'
-      }, children)), _this3.renderPin(location.position));
+        onMouseEnter: _this4.handleMouseEnter,
+        onMouseLeave: _this4.handleMouseLeave
+      }, _this4.content(children), (!_this4.isMobileLayout || _this4.props.withoutMobile) && _this4.renderPin(location.position)));
     });
   };
 
@@ -303,25 +430,29 @@ function (_React$Component) {
     return 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.
-     */
+  _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 = 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.createElement(PopupPin, {
+    var _this$props2 = this.props,
+        pinSize = _this$props2.pinSize,
+        backgroundColor = _this$props2.backgroundColor,
+        borderColor = _this$props2.borderColor;
+
+    var _this$getProps2 = this.getProps(),
+        hasShadow = _this$getProps2.hasShadow,
+        hasPin = _this$getProps2.hasPin;
+
+    var position = PopupHelper.getPositionObject(positionName);
+    return hasPin && /*#__PURE__*/React.createElement(PopupPin, {
       popupElement: this.lastPopupElement,
-      popupPosition: position,
-      size: pinSize,
-      offset: pinOffset,
+      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
@@ -345,19 +476,27 @@ function (_React$Component) {
       return true;
     }
 
-    if (x == null || y == null) {
+    if (isNullable(x) || isNullable(y)) {
       return false;
     }
 
-    return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;
+    if (!isIE11 && !isEdge) {
+      return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;
+    } // Для ie/edge обновляем позицию только при разнице минимум в 1. Иначе есть вероятность
+    // уйти в бесконечный ререндер
+
+
+    return 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$props3 = this.props,
+        positions = _this$props3.positions,
+        tryPreserveFirstRenderedPosition = _this$props3.tryPreserveFirstRenderedPosition;
     var anchorElement = this.anchorElement;
-    warning(anchorElement && anchorElement instanceof HTMLElement, 'Anchor element is not defined or not instance of HTMLElement');
+    warning(anchorElement && isElement(anchorElement), 'Anchor element is not defined or not instance of Element');
 
-    if (!(anchorElement && anchorElement instanceof HTMLElement)) {
+    if (!(anchorElement && isElement(anchorElement))) {
       return location;
     }
 
@@ -372,7 +511,12 @@ function (_React$Component) {
       var isFullyVisible = PopupHelper.isFullyVisible(coordinates, popupRect);
       var canBecomeVisible = !isFullyVisible && PopupHelper.canBecomeFullyVisible(position, coordinates);
 
-      if (isFullyVisible || canBecomeVisible) {
+      if ( // если нужно сохранить первоначальную позицию и Попап целиком
+      // находится в пределах вьюпорта (или может быть проскроллен в него)
+      tryPreserveFirstRenderedPosition && (isFullyVisible || canBecomeVisible) || // если Попап целиком во вьюпорте и в самой приоритетной позиции
+      // (иначе нужно попытаться позицию сменить)
+      isFullyVisible && position === positions[0]) {
+        // сохраняем текущую позицию
         return {
           coordinates: coordinates,
           position: position
@@ -380,16 +524,8 @@ function (_React$Component) {
       }
     }
 
-    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.isFullyVisible(coordinates, popupRect)) {
@@ -409,21 +545,20 @@ function (_React$Component) {
   };
 
   _proto.getPinnedPopupOffset = function getPinnedPopupOffset(anchorRect, position) {
-    if (!this.props.hasPin || /center|middle/.test(position.align)) {
+    if (!this.getProps().hasPin || /center|middle/.test(position.align)) {
       return 0;
     }
 
     var anchorSize = /top|bottom/.test(position.direction) ? anchorRect.width : anchorRect.height;
-    var _this$props4 = this.props,
-        pinOffset = _this$props4.pinOffset,
-        pinSize = _this$props4.pinSize;
-    return Math.max(0, pinOffset + pinSize - anchorSize / 2);
+    var pinSize = this.props.pinSize;
+    return Math.max(0, this.getPinOffset(position.align) + (pinSize || parseInt(this.theme.popupPinSize)) - anchorSize / 2);
   };
 
   _proto.getCoordinates = function getCoordinates(anchorRect, popupRect, positionName) {
-    var margin = this.props.margin;
+    var marginFromProps = this.props.margin;
+    var margin = isNonNullable(marginFromProps) && !isNaN(marginFromProps) ? marginFromProps : parseInt(this.theme.popupMargin) || 0;
     var position = PopupHelper.getPositionObject(positionName);
-    var popupOffset = this.props.popupOffset + this.getPinnedPopupOffset(anchorRect, position);
+    var popupOffset = this.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
 
     switch (position.direction) {
       case 'top':
@@ -455,6 +590,27 @@ function (_React$Component) {
     }
   };
 
+  _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':
@@ -488,78 +644,73 @@ function (_React$Component) {
   };
 
   return Popup;
-}(React.Component);
-Popup.__KONTUR_REACT_UI__ = 'Popup';
-Popup.propTypes = {
-  /**
-   * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
-   */
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Popup', _class2.propTypes = {
+  /**
+  * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
+  */
   anchorElement: PropTypes.oneOfType([safePropTypesInstanceOf(function () {
     return HTMLElement;
   }), PropTypes.node]).isRequired,
 
-  /**
-   * Фон попапа и пина
-   */
+  /**
+  * Фон попапа и пина
+  */
   backgroundColor: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 
-  /**
-   * Показывать ли пин
-   */
+  /**
+  * Показывать ли пин
+  */
   hasPin: PropTypes.bool,
 
-  /**
-   * Применять ли box-shadow на попапе. При false отключает границу на пине
-   */
+  /**
+  * Применять ли box-shadow на попапе. При false отключает границу на пине
+  */
   hasShadow: PropTypes.bool,
 
-  /**
-   * Отступ попапа от элемента
-   */
+  /**
+  * Отступ попапа от элемента
+  */
   margin: PropTypes.number,
 
-  /**
-   * Показан или скрыт попап
-   */
+  /**
+  * Показан или скрыт попап
+  */
   opened: PropTypes.bool,
 
-  /**
-   * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
-   */
+  /**
+  * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
+  */
   pinOffset: PropTypes.number,
 
-  /**
-   * Сторона пина без учёта границы.
-   * Пин представляет собой равносторонний треугольник, высота от попапа
-   * до "носика" пина будет соответствовать формуле (size* √3)/2
-   */
+  /**
+  * Сторона пина без учёта границы.
+  * Пин представляет собой равносторонний треугольник, высота от попапа
+  * до "носика" пина будет соответствовать формуле (size* √3)/2
+  */
   pinSize: PropTypes.number,
 
-  /**
-   * смещение попапа относительно родительского элемента
-   */
+  /**
+  * смещение попапа относительно родительского элемента
+  */
   popupOffset: PropTypes.number,
 
-  /**
-   * С какой стороны показывать попап и край попапа,
-   * на котором будет отображаться пин
-   */
+  /**
+  * С какой стороны показывать попап и край попапа,
+  * на котором будет отображаться пин
+  */
   positions: PropTypes.array,
 
-  /**
-   * Игнорировать ли события hover/click
-   */
+  /**
+  * Игнорировать ли события hover/click
+  */
   ignoreHover: PropTypes.bool
-};
-Popup.defaultProps = {
-  margin: 10,
+}, _class2.defaultProps = {
   popupOffset: 0,
-  pinSize: 8,
-  pinOffset: 16,
   hasPin: false,
   hasShadow: false,
   disableAnimations: isTestEnv,
   useWrapper: false,
-  ignoreHover: false
-};
+  ignoreHover: false,
+  width: 'auto'
+}, _class2.defaultRootNode = null, _temp)) || _class) || _class;