@skbkontur/react-ui 5.6.7 → 5.6.9-5e213.0

package/internal/Popup/Popup/Popup.js

@@ -1,7 +1,18 @@
-import _createForOfIteratorHelperLoose from "@babel/runtime/helpers/esm/createForOfIteratorHelperLoose";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
 var _class, _Popup;
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 import React from 'react';
 import { Transition } from 'react-transition-group';
 import warning from 'warning';
@@ -58,10 +69,11 @@ export var PopupIds = {
 export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PURE__*/function (_React$Component) {
   function Popup() {
     var _this;
+    _classCallCheck(this, Popup);
     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 = _callSuper(this, Popup, [].concat(args));
     _this.getProps = createPropsGetter(Popup.defaultProps);
     _this.state = {
       location: _this.props.opened ? DUMMY_LOCATION : null
@@ -134,7 +146,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
       if (typeof width === 'string' && width.includes('%')) {
         var anchorWidth = getDOMRect(_this.anchorElement).width;
         return width.replace(/(\d)+%/g, function (percent) {
-          return anchorWidth * parseFloat(percent) / 100 + "px";
+          return "".concat(anchorWidth * parseFloat(percent) / 100, "px");
         });
       }
       return width;
@@ -164,11 +176,10 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
     };
     _this.prepareDataVisualState = function () {
       var _this$state$location;
-      var position = (_this$state$location = _this.state.location) == null ? void 0 : _this$state$location.position;
+      var position = (_this$state$location = _this.state.location) === null || _this$state$location === void 0 ? void 0 : _this$state$location.position;
       if (position) {
-        var _getVisualStateDataAt;
         var attrName = "position-" + position.replace(' ', '-');
-        return getVisualStateDataAttributes((_getVisualStateDataAt = {}, _getVisualStateDataAt[attrName] = true, _getVisualStateDataAt));
+        return getVisualStateDataAttributes(_defineProperty({}, attrName, true));
       }
       return {};
     };
@@ -194,7 +205,8 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
       }
       var location = _this.getLocation(popupContentElement, _this.state.location);
       if (location) {
-        _this.props.onPositionChange == null || _this.props.onPositionChange(location.position, location.isFullyVisible);
+        var _this$props$onPositio, _this$props;
+        (_this$props$onPositio = (_this$props = _this.props).onPositionChange) === null || _this$props$onPositio === void 0 || _this$props$onPositio.call(_this$props, location.position, location.isFullyVisible);
       }
       if (!_this.locationEquals(_this.state.location, location)) {
         _this.setState({
@@ -219,380 +231,555 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
     };
     return _this;
   }
-  _inheritsLoose(Popup, _React$Component);
-  var _proto = Popup.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    this.updateLocation();
-    this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);
-    if (!this.hasAnchorElementListeners) {
-      this.addEventListeners(this.anchorElement);
+  _inherits(Popup, _React$Component);
+  return _createClass(Popup, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.updateLocation();
+      this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);
+      if (!this.hasAnchorElementListeners) {
+        this.addEventListeners(this.anchorElement);
+      }
     }
-  };
-  Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    /**
-    * Delaying updateLocation to ensure it happens after props update
-    */
-    if (props.opened) {
-      if (!state.location) {
-        return {
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var hadNoLocation = prevState.location === DUMMY_LOCATION;
+      var hasLocation = this.state.location !== DUMMY_LOCATION;
+      var wasClosed = prevProps.opened && !this.props.opened;
+      if (this.isMobileLayout && prevState.location === null && this.state.location === null) {
+        this.setState({
           location: DUMMY_LOCATION
-        };
+        });
+      }
+      if (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();
       }
-    } else if (state.location) {
-      return {
-        location: DUMMY_LOCATION
-      };
-    }
-    return state;
-  };
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    var hadNoLocation = prevState.location === DUMMY_LOCATION;
-    var hasLocation = this.state.location !== DUMMY_LOCATION;
-    var wasClosed = prevProps.opened && !this.props.opened;
-    if (this.isMobileLayout && prevState.location === null && this.state.location === null) {
-      this.setState({
-        location: DUMMY_LOCATION
-      });
     }
-    if (this.props.opened && hadNoLocation && hasLocation && this.props.onOpen) {
-      this.props.onOpen();
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.cancelDelayedUpdateLocation();
+      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();
+      }
     }
-    if (wasClosed && !hasLocation && this.props.onClose) {
-      this.props.onClose();
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+        _this3.featureFlags = getFullReactUIFlagsContext(flags);
+        return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+          _this3.theme = theme;
+          return _this3.renderMain();
+        });
+      });
     }
-    if (this.props.opened) {
-      this.delayUpdateLocation();
+  }, {
+    key: "renderMobile",
+    value: function renderMobile() {
+      var opened = this.props.opened;
+      var children = this.renderChildren();
+      return children ? /*#__PURE__*/React.createElement(CommonWrapper, {
+        rootNodeRef: this.setRootNode
+      }, /*#__PURE__*/React.createElement(MobilePopup, {
+        opened: opened,
+        withoutRenderContainer: true,
+        onCloseRequest: this.props.mobileOnCloseRequest
+      }, this.content(children))) : null;
     }
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    this.cancelDelayedUpdateLocation();
-    if (this.hasAnchorElementListeners) {
-      this.removeEventListeners(this.anchorElement);
+  }, {
+    key: "renderMain",
+    value: function renderMain() {
+      var _anchor;
+      var anchorElement = this.props.anchorElement;
+      var useWrapper = this.getProps().useWrapper;
+      var anchor = null;
+      if (isInstanceOf(anchorElement, globalObject.Element)) {
+        this.updateAnchorElement(anchorElement);
+      } else if ( /*#__PURE__*/React.isValidElement(anchorElement)) {
+        anchor = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
+      } else {
+        anchor = /*#__PURE__*/React.createElement("span", null, anchorElement);
+      }
+      var anchorWithRef = anchor && /*#__PURE__*/React.isValidElement(anchor) && isRefableElement(anchor) ? /*#__PURE__*/React.cloneElement(anchor, {
+        ref: mergeRefs((_anchor = anchor) === null || _anchor === void 0 ? void 0 : _anchor.ref, this.updateAnchorElement)
+      }) : 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 || isInstanceOf(anchorElement, globalObject.Element);
+      var renderRef = canGetAnchorNode ? null : this.updateAnchorElement;
+      var renderAnchor = anchorWithRef || anchor;
+      return this.props.disablePortal ? this.renderWithoutPortal(renderAnchor, renderRef) : this.renderInPortal(renderAnchor, renderRef);
     }
-    if (this.layoutEventsToken) {
-      this.layoutEventsToken.remove();
-      this.layoutEventsToken = null;
+  }, {
+    key: "addEventListeners",
+    value: function addEventListeners(element) {
+      if (element && isInstanceOf(element, globalObject.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
+        element.addEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
+        element.addEventListener('click', this.handleClick);
+        element.addEventListener('focusin', this.handleFocus);
+        element.addEventListener('focusout', this.handleBlur);
+        this.hasAnchorElementListeners = true;
+      }
     }
-    if (this.state.location && this.props.onClose) {
-      this.props.onClose();
+  }, {
+    key: "removeEventListeners",
+    value: function removeEventListeners(element) {
+      if (element && isInstanceOf(element, globalObject.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.render = function render() {
-    var _this3 = this;
-    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
-      _this3.featureFlags = getFullReactUIFlagsContext(flags);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this3.theme = theme;
-        return _this3.renderMain();
+  }, {
+    key: "renderContent",
+    value: function renderContent(location) {
+      var _this4 = this;
+      var _this$props2 = this.props,
+        maxWidth = _this$props2.maxWidth,
+        opened = _this$props2.opened;
+      var _this$getProps2 = this.getProps(),
+        hasShadow = _this$getProps2.hasShadow,
+        disableAnimations = _this$getProps2.disableAnimations,
+        ignoreHover = _this$getProps2.ignoreHover;
+      var children = this.renderChildren();
+      var relativeShift = this.getRelativeShift();
+      var _PopupHelper$getPosit = PopupHelper.getPositionObject(location.position),
+        direction = _PopupHelper$getPosit.direction;
+      var rootStyle = {
+        maxWidth: maxWidth,
+        top: location.coordinates.top + relativeShift.top,
+        left: location.coordinates.left + relativeShift.left
+      };
+      return /*#__PURE__*/React.createElement(Transition, {
+        timeout: TRANSITION_TIMEOUT,
+        appear: !disableAnimations,
+        "in": Boolean(opened && children),
+        mountOnEnter: true,
+        unmountOnExit: true,
+        enter: !disableAnimations,
+        exit: !disableAnimations,
+        onExited: this.resetLocation,
+        nodeRef: this.refForTransition
+      }, function (state) {
+        var _this4$props$id;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({}, _this4.props, {
+          rootNodeRef: _this4.setRootNode
+        }, _this4.prepareDataVisualState()), /*#__PURE__*/React.createElement(ZIndex, {
+          id: (_this4$props$id = _this4.props.id) !== null && _this4$props$id !== void 0 ? _this4$props$id : _this4.rootId,
+          "data-tid": PopupDataTids.root,
+          priority: _this4.props.priority,
+          className: cx(_objectSpread(_defineProperty(_defineProperty(_defineProperty({}, styles.popup(_this4.theme), true), styles.shadow(_this4.theme), hasShadow), styles.popupIgnoreHover(), ignoreHover), disableAnimations ? {} : _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles["transition-enter-".concat(direction)](_this4.theme), true), styles.transitionEnter(), state === 'entering'), styles.transitionEnterActive(), state === 'entered'), styles.transitionExit(), state === 'exiting'))),
+          style: rootStyle,
+          onMouseEnter: _this4.handleMouseEnter,
+          onMouseLeave: _this4.handleMouseLeave
+        }, _this4.content(children), (!_this4.isMobileLayout || _this4.props.withoutMobile) && _this4.renderPin(location.position)));
       });
-    });
-  };
-  _proto.renderMobile = function renderMobile() {
-    var opened = this.props.opened;
-    var children = this.renderChildren();
-    return children ? /*#__PURE__*/React.createElement(CommonWrapper, {
-      rootNodeRef: this.setRootNode
-    }, /*#__PURE__*/React.createElement(MobilePopup, {
-      opened: opened,
-      withoutRenderContainer: true,
-      onCloseRequest: this.props.mobileOnCloseRequest
-    }, this.content(children))) : null;
-  };
-  _proto.renderMain = function renderMain() {
-    var _anchor;
-    var anchorElement = this.props.anchorElement;
-    var useWrapper = this.getProps().useWrapper;
-    var anchor = null;
-    if (isInstanceOf(anchorElement, globalObject.Element)) {
-      this.updateAnchorElement(anchorElement);
-    } else if ( /*#__PURE__*/React.isValidElement(anchorElement)) {
-      anchor = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
-    } else {
-      anchor = /*#__PURE__*/React.createElement("span", null, anchorElement);
-    }
-    var anchorWithRef = anchor && /*#__PURE__*/React.isValidElement(anchor) && isRefableElement(anchor) ? /*#__PURE__*/React.cloneElement(anchor, {
-      ref: mergeRefs((_anchor = anchor) == null ? void 0 : _anchor.ref, this.updateAnchorElement)
-    }) : 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 || isInstanceOf(anchorElement, globalObject.Element);
-    var renderRef = canGetAnchorNode ? null : this.updateAnchorElement;
-    var renderAnchor = anchorWithRef || anchor;
-    return this.props.disablePortal ? this.renderWithoutPortal(renderAnchor, renderRef) : this.renderInPortal(renderAnchor, renderRef);
-  };
-  _proto.addEventListeners = function addEventListeners(element) {
-    if (element && isInstanceOf(element, globalObject.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
-      element.addEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
-      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 && isInstanceOf(element, globalObject.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;
+  }, {
+    key: "renderChildren",
+    value: function renderChildren() {
+      return isFunction(this.props.children) ? this.props.children() : this.props.children;
     }
-  };
-  _proto.renderContent = function renderContent(location) {
-    var _this4 = this;
-    var _this$props = this.props,
-      maxWidth = _this$props.maxWidth,
-      opened = _this$props.opened;
-    var _this$getProps2 = this.getProps(),
-      hasShadow = _this$getProps2.hasShadow,
-      disableAnimations = _this$getProps2.disableAnimations,
-      ignoreHover = _this$getProps2.ignoreHover;
-    var children = this.renderChildren();
-    var relativeShift = this.getRelativeShift();
-    var _PopupHelper$getPosit = PopupHelper.getPositionObject(location.position),
-      direction = _PopupHelper$getPosit.direction;
-    var rootStyle = {
-      maxWidth: maxWidth,
-      top: location.coordinates.top + relativeShift.top,
-      left: location.coordinates.left + relativeShift.left
-    };
-    return /*#__PURE__*/React.createElement(Transition, {
-      timeout: TRANSITION_TIMEOUT,
-      appear: !disableAnimations,
-      "in": Boolean(opened && children),
-      mountOnEnter: true,
-      unmountOnExit: true,
-      enter: !disableAnimations,
-      exit: !disableAnimations,
-      onExited: this.resetLocation,
-      nodeRef: this.refForTransition
-    }, function (state) {
-      var _this4$props$id, _extends2, _ref;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({}, _this4.props, {
-        rootNodeRef: _this4.setRootNode
-      }, _this4.prepareDataVisualState()), /*#__PURE__*/React.createElement(ZIndex, {
-        id: (_this4$props$id = _this4.props.id) != null ? _this4$props$id : _this4.rootId,
-        "data-tid": PopupDataTids.root,
-        priority: _this4.props.priority,
-        className: cx(_extends((_extends2 = {}, _extends2[styles.popup(_this4.theme)] = true, _extends2[styles.shadow(_this4.theme)] = hasShadow, _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: _this4.handleMouseEnter,
-        onMouseLeave: _this4.handleMouseLeave
-      }, _this4.content(children), (!_this4.isMobileLayout || _this4.props.withoutMobile) && _this4.renderPin(location.position)));
-    });
-  };
-  _proto.renderChildren = function renderChildren() {
-    return isFunction(this.props.children) ? this.props.children() : this.props.children;
-  };
-  _proto.renderPin = function renderPin(positionName) {
-    var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;
-    var pinBorder = isIE11 && isDefaultBorderColor ? 'rgba(0, 0, 0, 0.09)' : this.theme.popupBorderColor;
-    var _this$props2 = this.props,
-      pinSize = _this$props2.pinSize,
-      backgroundColor = _this$props2.backgroundColor,
-      borderColor = _this$props2.borderColor;
-    var _this$getProps3 = this.getProps(),
-      hasShadow = _this$getProps3.hasShadow,
-      hasPin = _this$getProps3.hasPin;
-    var position = PopupHelper.getPositionObject(positionName);
-    return hasPin && !PopupNonPinnablePositions.includes(positionName) && (this.featureFlags.popupFixPinTearing ? /*#__PURE__*/React.createElement(PopupPinNew, {
-      popupElement: this.lastPopupContentElement,
-      popupPosition: positionName,
-      size: pinSize || parseInt(this.theme.popupPinSize),
-      offset: this.getPinOffset(position.align),
-      backgroundColor: backgroundColor || this.theme.popupBackground
-    }) : /*#__PURE__*/React.createElement(PopupPin, {
-      popupElement: this.lastPopupContentElement,
-      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 = globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(this.updateLocation);
-  };
-  _proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {
-    if (this.locationUpdateId) {
-      globalObject.cancelAnimationFrame == null || globalObject.cancelAnimationFrame(this.locationUpdateId);
-      this.locationUpdateId = null;
+  }, {
+    key: "renderPin",
+    value: function renderPin(positionName) {
+      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,
+        backgroundColor = _this$props3.backgroundColor,
+        borderColor = _this$props3.borderColor;
+      var _this$getProps3 = this.getProps(),
+        hasShadow = _this$getProps3.hasShadow,
+        hasPin = _this$getProps3.hasPin;
+      var position = PopupHelper.getPositionObject(positionName);
+      return hasPin && !PopupNonPinnablePositions.includes(positionName) && (this.featureFlags.popupFixPinTearing ? /*#__PURE__*/React.createElement(PopupPinNew, {
+        popupElement: this.lastPopupContentElement,
+        popupPosition: positionName,
+        size: pinSize || parseInt(this.theme.popupPinSize),
+        offset: this.getPinOffset(position.align),
+        backgroundColor: backgroundColor || this.theme.popupBackground
+      }) : /*#__PURE__*/React.createElement(PopupPin, {
+        popupElement: this.lastPopupContentElement,
+        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.locationEquals = function locationEquals(x, y) {
-    if (x === y) {
-      return true;
+  }, {
+    key: "delayUpdateLocation",
+    value: function delayUpdateLocation() {
+      var _globalObject$request;
+      this.cancelDelayedUpdateLocation();
+      this.locationUpdateId = (_globalObject$request = globalObject.requestAnimationFrame) === null || _globalObject$request === void 0 ? void 0 : _globalObject$request.call(globalObject, this.updateLocation);
     }
-    if (isNullable(x) || isNullable(y)) {
-      return false;
+  }, {
+    key: "cancelDelayedUpdateLocation",
+    value: function cancelDelayedUpdateLocation() {
+      if (this.locationUpdateId) {
+        var _globalObject$cancelA;
+        (_globalObject$cancelA = globalObject.cancelAnimationFrame) === null || _globalObject$cancelA === void 0 || _globalObject$cancelA.call(globalObject, this.locationUpdateId);
+        this.locationUpdateId = null;
+      }
     }
-    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.reorderPropsPositionsWithPriorityPos = function reorderPropsPositionsWithPriorityPos() {
-    var positions = this.props.positions ? this.props.positions : PopupPinnablePositions;
-    var pos_ = '';
-    if (this.props.pos) {
-      pos_ = this.props.pos;
-    } else {
-      pos_ = positions[0];
+  }, {
+    key: "locationEquals",
+    value: function locationEquals(x, y) {
+      if (x === y) {
+        return true;
+      }
+      if (isNullable(x) || isNullable(y)) {
+        return false;
+      }
+      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;
     }
-    var index = positions.findIndex(function (position) {
-      return position.startsWith(pos_);
-    });
-    if (index === -1) {
-      warning(false, 'Unexpected position ' + pos_ + ' passed to Popup. Expected one of: ' + positions.join(', '));
-      return positions;
+  }, {
+    key: "getOrderedPositions",
+    value: function getOrderedPositions() {
+      var positions = this.props.positions ? this.props.positions : PopupPinnablePositions;
+      var pos_ = '';
+      if (this.props.pos) {
+        pos_ = this.props.pos;
+      } else {
+        pos_ = positions[0];
+      }
+      var index = positions.findIndex(function (position) {
+        return position.startsWith(pos_);
+      });
+      if (index === -1) {
+        warning(false, 'Unexpected position ' + pos_ + ' passed to Popup. Expected one of: ' + positions.join(', '));
+        return positions;
+      }
+      return [].concat(_toConsumableArray(positions.slice(index)), _toConsumableArray(positions.slice(0, index)));
     }
-    return [].concat(positions.slice(index), positions.slice(0, index));
-  };
-  _proto.getLocation = function getLocation(popupElement, location) {
-    var _this$getProps4 = this.getProps(),
-      tryPreserveFirstRenderedPosition = _this$getProps4.tryPreserveFirstRenderedPosition;
-    var positions = this.reorderPropsPositionsWithPriorityPos();
-    var anchorElement = this.anchorElement;
-    warning(anchorElement && isInstanceOf(anchorElement, globalObject.Element), 'Anchor element is not defined or not instance of Element');
-    if (!(anchorElement && isInstanceOf(anchorElement, globalObject.Element))) {
-      return location;
+  }, {
+    key: "getLocation",
+    value: function getLocation(popupElement, location) {
+      var _this$getProps4 = this.getProps(),
+        tryBestFallbackPosition = _this$getProps4.tryBestFallbackPosition;
+      var positions = this.getOrderedPositions();
+      var anchorElement = this.anchorElement;
+      warning(anchorElement && isInstanceOf(anchorElement, globalObject.Element), 'Anchor element is not defined or not instance of Element');
+      if (!(anchorElement && isInstanceOf(anchorElement, globalObject.Element))) {
+        return location;
+      }
+      var anchorRect = PopupHelper.getElementAbsoluteRect(anchorElement);
+      var popupRect = PopupHelper.getElementAbsoluteRect(popupElement);
+      var reusedLocation = this.tryReuseCurrentLocation(location, positions, anchorRect, popupRect);
+      if (reusedLocation) {
+        return reusedLocation;
+      }
+      var fullyVisibleLocation = this.tryGetFirstFullyVisibleLocation(positions, anchorRect, popupRect);
+      if (fullyVisibleLocation) {
+        return fullyVisibleLocation;
+      }
+      return this.getFallbackLocation(positions, anchorRect, popupRect, Boolean(tryBestFallbackPosition));
     }
-    var anchorRect = PopupHelper.getElementAbsoluteRect(anchorElement);
-    var popupRect = PopupHelper.getElementAbsoluteRect(popupElement);
-    var position;
-    var coordinates;
-    if (location && location !== DUMMY_LOCATION && location.position) {
-      position = location.position;
-      coordinates = this.getCoordinates(anchorRect, popupRect, position);
+  }, {
+    key: "tryReuseCurrentLocation",
+    value: function tryReuseCurrentLocation(location, positions, anchorRect, popupRect) {
+      var _this$getProps5 = this.getProps(),
+        tryPreserveFirstRenderedPosition = _this$getProps5.tryPreserveFirstRenderedPosition;
+      if (!(location && location !== DUMMY_LOCATION && location.position)) {
+        return null;
+      }
+      var position = location.position;
+      var coordinates = this.getCoordinates(anchorRect, popupRect, position);
       var isFullyVisible = PopupHelper.isFullyVisible(coordinates, popupRect);
       var canBecomeVisible = !isFullyVisible && PopupHelper.canBecomeFullyVisible(position, coordinates);
-      if (
+      var shouldReuseCurrentLocation =
       // если нужно сохранить первоначальную позицию и Попап целиком
       // находится в пределах вьюпорта (или может быть проскроллен в него)
       tryPreserveFirstRenderedPosition && (isFullyVisible || canBecomeVisible) ||
       // если Попап целиком во вьюпорте и в самой приоритетной позиции
       // (иначе нужно попытаться позицию сменить)
-      isFullyVisible && position === positions[0]) {
-        // сохраняем текущую позицию
-        return {
-          coordinates: coordinates,
-          position: position,
-          isFullyVisible: true
-        };
+      isFullyVisible && position === positions[0];
+      if (!shouldReuseCurrentLocation) {
+        return null;
       }
+      return {
+        coordinates: coordinates,
+        position: position,
+        isFullyVisible: true
+      };
     }
-    for (var _iterator = _createForOfIteratorHelperLoose(positions), _step; !(_step = _iterator()).done;) {
-      position = _step.value;
-      coordinates = this.getCoordinates(anchorRect, popupRect, position);
-      if (PopupHelper.isFullyVisible(coordinates, popupRect)) {
-        return {
-          coordinates: coordinates,
-          position: position,
-          isFullyVisible: true
-        };
+  }, {
+    key: "tryGetFirstFullyVisibleLocation",
+    value: function tryGetFirstFullyVisibleLocation(positions, anchorRect, popupRect) {
+      var _iterator = _createForOfIteratorHelper(positions),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var position = _step.value;
+          var coordinates = this.getCoordinates(anchorRect, popupRect, position);
+          if (PopupHelper.isFullyVisible(coordinates, popupRect)) {
+            return {
+              coordinates: coordinates,
+              position: position,
+              isFullyVisible: true
+            };
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
+      return null;
     }
-    position = positions[0];
-    coordinates = this.getCoordinates(anchorRect, popupRect, position);
-    return {
-      coordinates: coordinates,
-      position: position,
-      isFullyVisible: false
-    };
-  };
-  _proto.getPinnedPopupOffset = function getPinnedPopupOffset(anchorRect, position) {
-    if (!this.getProps().hasPin || /center|middle/.test(position.align)) {
-      return 0;
+  }, {
+    key: "getFallbackLocation",
+    value: function getFallbackLocation(positions, anchorRect, popupRect, tryBestFallbackPosition) {
+      var position = tryBestFallbackPosition ? this.pickBestFallbackPosition(positions, anchorRect, popupRect) : positions[0];
+      var coordinates = this.getCoordinates(anchorRect, popupRect, position);
+      return {
+        coordinates: coordinates,
+        position: position,
+        isFullyVisible: PopupHelper.isFullyVisible(coordinates, popupRect)
+      };
     }
-    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);
-  };
-  _proto.getCoordinates = function getCoordinates(anchorRect, popupRect, positionName) {
-    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.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
-    switch (position.direction) {
-      case 'top':
-        return {
-          top: anchorRect.top - popupRect.height - margin,
-          left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset)
-        };
-      case 'middle':
-        return {
-          top: anchorRect.top + anchorRect.height / 2 - popupRect.height / 2,
-          left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset)
-        };
-      case 'bottom':
-        return {
-          top: anchorRect.top + anchorRect.height + margin,
-          left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset)
-        };
-      case 'left':
-        return {
-          top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
-          left: anchorRect.left - popupRect.width - margin
-        };
-      case 'right':
-        return {
-          top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
-          left: anchorRect.left + anchorRect.width + margin
-        };
-      default:
-        throw new Error("Unexpected direction '" + position.direction + "'");
+  }, {
+    key: "pickBestFallbackPosition",
+    value: function pickBestFallbackPosition(positions, anchorRect, popupRect) {
+      var _this5 = this;
+      var defaultPosition = positions[0];
+      var coords = this.getCoordinates(anchorRect, popupRect, defaultPosition);
+      var overflow = PopupHelper.getOverflowEdges(coords, popupRect);
+      var preferredDirection = PopupHelper.getPreferredDirection(overflow, defaultPosition);
+      var preferredAlignOrder = overflow.left || overflow.right ? ['right', 'center', 'left'] : ['center', 'left', 'right'];
+      var candidates = PopupHelper.getOrderedFallbackCandidates(positions, overflow, preferredDirection, preferredAlignOrder, PopupPinnablePositions);
+      var positionsSet = new Set(positions);
+      var viewport = PopupHelper.getViewportAbsoluteRect();
+      var evaluatedCandidates = candidates.map(function (position) {
+        return _this5.evaluateFallbackCandidate(position, anchorRect, popupRect, viewport);
+      });
+      var bestAreaCandidate = this.pickBestAreaCandidate(evaluatedCandidates, positionsSet);
+      var bestOverflowCandidate = this.pickBestOverflowCandidate(evaluatedCandidates, positionsSet); // Если есть хотя бы одна позиция с ненулевой видимой площадью,
+      // выбираем её (с приоритетом полностью видимых вариантов).
+      // Иначе — используем старую эвристику по количеству переполненных сторон.
+      return bestAreaCandidate && bestAreaCandidate.visibleArea > 0 ? bestAreaCandidate.position : bestOverflowCandidate.position;
+    }
+  }, {
+    key: "evaluateFallbackCandidate",
+    value: function evaluateFallbackCandidate(position, anchorRect, popupRect, viewport) {
+      var coordinates = this.getCoordinates(anchorRect, popupRect, position);
+      var popupAbsolute = {
+        top: coordinates.top,
+        left: coordinates.left,
+        width: popupRect.width,
+        height: popupRect.height
+      };
+      var overlapWidth = Math.min(popupAbsolute.left + popupAbsolute.width, viewport.left + viewport.width) - Math.max(popupAbsolute.left, viewport.left);
+      var overlapHeight = Math.min(popupAbsolute.top + popupAbsolute.height, viewport.top + viewport.height) - Math.max(popupAbsolute.top, viewport.top);
+      var visibleWidth = Math.max(0, overlapWidth);
+      var visibleHeight = Math.max(0, overlapHeight);
+      var overflow = PopupHelper.getOverflowEdges(coordinates, popupRect);
+      var isFullyVisible = visibleWidth === popupAbsolute.width && visibleHeight === popupAbsolute.height;
+      var isAreaEligible = PopupHelper.getPositionObject(position).direction !== 'left' || isFullyVisible;
+      return {
+        position: position,
+        coordinates: coordinates,
+        overflowCount: PopupHelper.getOverflowCount(overflow),
+        visibleArea: visibleWidth * visibleHeight,
+        isFullyVisible: isFullyVisible,
+        isAreaEligible: isAreaEligible
+      };
     }
-  };
-  _proto.getPinOffset = function getPinOffset(align) {
-    var pinOffset = this.props.pinOffset;
-    switch (align) {
-      case 'top':
-      case 'bottom':
-        return pinOffset || parseInt(this.theme.popupPinOffsetY);
-      case 'left':
-      case 'right':
-        return pinOffset || parseInt(this.theme.popupPinOffsetX);
-      case 'center':
-      case 'middle':
+  }, {
+    key: "pickBestAreaCandidate",
+    value: function pickBestAreaCandidate(candidates, positionsSet) {
+      var bestCandidate = null;
+      var _iterator2 = _createForOfIteratorHelper(candidates),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var candidate = _step2.value;
+          if (!candidate.isAreaEligible || candidate.visibleArea <= 0) {
+            continue;
+          }
+          var isBetterArea = !bestCandidate ||
+          // предпочитаем любые полностью видимые позиции
+          candidate.isFullyVisible && !bestCandidate.isFullyVisible ||
+          // среди одинаковых по полноте — большую видимую площадь
+          candidate.isFullyVisible === bestCandidate.isFullyVisible && candidate.visibleArea > bestCandidate.visibleArea ||
+          // при равной площади — ту, что указана в props.positions
+          candidate.visibleArea === bestCandidate.visibleArea && positionsSet.has(candidate.position) && !positionsSet.has(bestCandidate.position);
+          if (isBetterArea) {
+            bestCandidate = candidate;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      return bestCandidate;
+    }
+  }, {
+    key: "pickBestOverflowCandidate",
+    value: function pickBestOverflowCandidate(candidates, positionsSet) {
+      var bestCandidate = candidates[0];
+      var _iterator3 = _createForOfIteratorHelper(candidates),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var candidate = _step3.value;
+          var isBetterOverflow = candidate.overflowCount < bestCandidate.overflowCount || candidate.overflowCount === bestCandidate.overflowCount && positionsSet.has(candidate.position) && !positionsSet.has(bestCandidate.position);
+          if (isBetterOverflow) {
+            bestCandidate = candidate;
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      return bestCandidate;
+    }
+  }, {
+    key: "getPinnedPopupOffset",
+    value: function getPinnedPopupOffset(anchorRect, position) {
+      if (!this.getProps().hasPin || /center|middle/.test(position.align)) {
         return 0;
-      default:
-        throw new Error("Unexpected align '" + align + "'");
+      }
+      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);
+    }
+  }, {
+    key: "getCoordinates",
+    value: function getCoordinates(anchorRect, popupRect, positionName) {
+      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.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
+      switch (position.direction) {
+        case 'top':
+          return {
+            top: anchorRect.top - popupRect.height - margin,
+            left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset)
+          };
+        case 'middle':
+          return {
+            top: anchorRect.top + anchorRect.height / 2 - popupRect.height / 2,
+            left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset)
+          };
+        case 'bottom':
+          return {
+            top: anchorRect.top + anchorRect.height + margin,
+            left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset)
+          };
+        case 'left':
+          return {
+            top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
+            left: anchorRect.left - popupRect.width - margin
+          };
+        case 'right':
+          return {
+            top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
+            left: anchorRect.left + anchorRect.width + margin
+          };
+        default:
+          throw new Error("Unexpected direction '".concat(position.direction, "'"));
+      }
+    }
+  }, {
+    key: "getPinOffset",
+    value: function getPinOffset(align) {
+      var pinOffset = this.props.pinOffset;
+      switch (align) {
+        case 'top':
+        case 'bottom':
+          return pinOffset || parseInt(this.theme.popupPinOffsetY);
+        case 'left':
+        case 'right':
+          return pinOffset || parseInt(this.theme.popupPinOffsetX);
+        case 'center':
+        case 'middle':
+          return 0;
+        default:
+          throw new Error("Unexpected align '".concat(align, "'"));
+      }
     }
-  };
-  _proto.getHorizontalPosition = function getHorizontalPosition(anchorRect, popupRect, align, popupOffset) {
-    switch (align) {
-      case 'left':
-        return anchorRect.left - popupOffset;
-      case 'center':
-        return anchorRect.left - (popupRect.width - anchorRect.width) / 2;
-      case 'right':
-        return anchorRect.left - (popupRect.width - anchorRect.width) + popupOffset;
-      default:
-        throw new Error("Unexpected align '" + align + "'");
+  }, {
+    key: "getHorizontalPosition",
+    value: function getHorizontalPosition(anchorRect, popupRect, align, popupOffset) {
+      switch (align) {
+        case 'left':
+          return anchorRect.left - popupOffset;
+        case 'center':
+          return anchorRect.left - (popupRect.width - anchorRect.width) / 2;
+        case 'right':
+          return anchorRect.left - (popupRect.width - anchorRect.width) + popupOffset;
+        default:
+          throw new Error("Unexpected align '".concat(align, "'"));
+      }
     }
-  };
-  _proto.getVerticalPosition = function getVerticalPosition(anchorRect, popupRect, align, popupOffset) {
-    switch (align) {
-      case 'top':
-        return anchorRect.top - popupOffset;
-      case 'middle':
-        return anchorRect.top - (popupRect.height - anchorRect.height) / 2;
-      case 'bottom':
-        return anchorRect.top - (popupRect.height - anchorRect.height) + popupOffset;
-      default:
-        throw new Error("Unexpected align '" + align + "'");
+  }, {
+    key: "getVerticalPosition",
+    value: function getVerticalPosition(anchorRect, popupRect, align, popupOffset) {
+      switch (align) {
+        case 'top':
+          return anchorRect.top - popupOffset;
+        case 'middle':
+          return anchorRect.top - (popupRect.height - anchorRect.height) / 2;
+        case 'bottom':
+          return anchorRect.top - (popupRect.height - anchorRect.height) + popupOffset;
+        default:
+          throw new Error("Unexpected align '".concat(align, "'"));
+      }
     }
-  };
-  return Popup;
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      /**
+      * Delaying updateLocation to ensure it happens after props update
+      */
+      if (props.opened) {
+        if (!state.location) {
+          return {
+            location: DUMMY_LOCATION
+          };
+        }
+      } else if (state.location) {
+        return {
+          location: DUMMY_LOCATION
+        };
+      }
+      return state;
+    }
+  }]);
 }(React.Component), _Popup.__KONTUR_REACT_UI__ = 'Popup', _Popup.displayName = 'Popup', _Popup.defaultProps = {
   popupOffset: 0,
   hasPin: false,
@@ -604,16 +791,17 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
   width: 'auto',
   priority: ZIndex.priorities.Popup
 }, _Popup.defaultRootNode = null, _Popup)) || _class) || _class;
-
 // Нужно, чтобы получать по рефу dom-элемент, в который зарендерится anchor
 var EmptyWrapper = /*#__PURE__*/function (_React$Component2) {
   function EmptyWrapper() {
-    return _React$Component2.apply(this, arguments) || this;
+    _classCallCheck(this, EmptyWrapper);
+    return _callSuper(this, EmptyWrapper, arguments);
   }
-  _inheritsLoose(EmptyWrapper, _React$Component2);
-  var _proto2 = EmptyWrapper.prototype;
-  _proto2.render = function render() {
-    return this.props.children;
-  };
-  return EmptyWrapper;
+  _inherits(EmptyWrapper, _React$Component2);
+  return _createClass(EmptyWrapper, [{
+    key: "render",
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
 }(React.Component);