@skbkontur/react-ui 0.0.0-b408db2ccf → 0.0.0-b4710fb038

package/cjs/internal/Popup/Popup.js

@@ -1,4 +1,5 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.PopupPositions = exports.PopupIds = exports.PopupDataTids = exports.Popup = exports.DefaultPosition = exports.DUMMY_LOCATION = void 0;var _createForOfIteratorHelperLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelperLoose"));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").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.PopupPositions = exports.PopupPinnablePositions = exports.PopupNonPinnablePositions = exports.PopupIds = exports.PopupDataTids = exports.Popup = exports.DefaultPosition = exports.DUMMY_LOCATION = void 0;var _createForOfIteratorHelperLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelperLoose"));var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _warning = _interopRequireDefault(require("warning"));
@@ -7,6 +8,7 @@ var _globalObject = require("@skbkontur/global-object");
 var _getDOMRect = require("../../lib/dom/getDOMRect");
 
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
+
 var _ZIndex = require("../ZIndex");
 var _RenderContainer = require("../RenderContainer");
 
@@ -16,29 +18,32 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _SSRSafe = require("../../lib/SSRSafe");
 var _currentEnvironment = require("../../lib/currentEnvironment");
+
 var _CommonWrapper = require("../CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _decorator = require("../../components/ResponsiveLayout/decorator");
 var _MobilePopup = require("../MobilePopup");
+
 var _rootNode = require("../../lib/rootNode");
-var _callChildRef = require("../../lib/callChildRef/callChildRef");
 var _InstanceWithAnchorElement = require("../../lib/InstanceWithAnchorElement");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _isInstanceOf = require("../../lib/isInstanceOf");
-var _featureFlagsContext = require("../../lib/featureFlagsContext");
-
-
-
 
+var _featureFlagsContext = require("../../lib/featureFlagsContext");
+var _mergeRefs = require("../../lib/mergeRefs");
+var _getVisualStateDataAttributes = require("../CommonWrapper/utils/getVisualStateDataAttributes");
 
 var _PopupPin = require("./PopupPin");
+
 var _PopupHelper = require("./PopupHelper");
 var _Popup2 = require("./Popup.styles");var _class, _Popup;
 
 var POPUP_BORDER_DEFAULT_COLOR = 'transparent';
 var TRANSITION_TIMEOUT = { enter: 0, exit: 200 };
 
-var PopupPositions = exports.PopupPositions = [
+var PopupNonPinnablePositions = exports.PopupNonPinnablePositions = ['middle center', 'middle left', 'middle right'];
+
+var PopupPinnablePositions = exports.PopupPinnablePositions = [
 'top center',
 'top left',
 'top right',
@@ -53,11 +58,14 @@ var PopupPositions = exports.PopupPositions = [
 'right bottom'];
 
 
+var PopupPositions = exports.PopupPositions = [].concat(PopupPinnablePositions, PopupNonPinnablePositions);
+
 var DefaultPosition = exports.DefaultPosition = PopupPositions[0];
 
 
 
 
+
 var DUMMY_LOCATION = exports.DUMMY_LOCATION = {
   position: DefaultPosition,
   coordinates: {
@@ -126,6 +134,10 @@ var DUMMY_LOCATION = exports.DUMMY_LOCATION = {
 
 
 
+
+
+
+
 
 
 
@@ -151,6 +163,14 @@ var PopupIds = exports.PopupIds = {
 
 
 
+
+
+
+
+
+
+
+
 Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = (_Popup = /*#__PURE__*/function (_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.
 
 
@@ -224,6 +244,13 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
 
 
 
+
+
+
+
+
+
+
 
 
 
@@ -250,6 +277,9 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
     rootId = PopupIds.root + (0, _utils.getRandomID)();_this.
 
     anchorElement = null;_this.
+    absoluteParent = null;_this.
+
+
 
 
 
@@ -374,12 +404,32 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
 
 
 
+    renderInPortal = function (anchor, ref) {
+      var location = _this.state.location;
 
+      return /*#__PURE__*/(
+        _react.default.createElement(_RenderContainer.RenderContainer, { anchor: anchor, ref: ref },
+        _this.isMobileLayout && !_this.props.withoutMobile ?
+        _this.renderMobile() :
+        location && _this.renderContent(location)
+        ));
 
+    };_this.
 
+    renderWithoutPortal = function (anchor, ref) {
+      var location = _this.state.location;
 
+      return /*#__PURE__*/(
+        _react.default.createElement(EmptyWrapper, { ref: ref },
+        anchor,
+        location && /*#__PURE__*/
+        _react.default.createElement("div", { ref: _this.updateAbsoluteElement, className: _Popup2.styles.absoluteParent() },
+        _this.renderContent(location)
+        )
 
+        ));
 
+    };_this.
 
     updateAnchorElement = function (instance) {
       var childDomNode = (0, _InstanceWithAnchorElement.isInstanceWithAnchorElement)(instance) ? instance.getAnchorElement() : (0, _rootNode.getRootNode)(instance);
@@ -392,6 +442,10 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
       }
     };_this.
 
+    updateAbsoluteElement = function (instance) {
+      _this.absoluteParent = instance;
+    };_this.
+
 
 
 
@@ -454,25 +508,26 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
 
     calculateWidth = function (width) {
       if (typeof width === 'string' && width.includes('%')) {
-        var anchorWidth = Math.floor((0, _getDOMRect.getDOMRect)(_this.anchorElement).width);
-        return _this.anchorElement ? anchorWidth * parseFloat(width) / 100 : 0;
+        var anchorWidth = (0, _getDOMRect.getDOMRect)(_this.anchorElement).width;
+
+        return width.replace(/(\d)+%/g, function (percent) {return anchorWidth * parseFloat(percent) / 100 + "px";});
       }
       return width;
     };_this.
 
     content = function (children) {
       var backgroundColor = _this.props.backgroundColor;
-      var width = _this.getProps().width;
+      var _this$getProps = _this.getProps(),width = _this$getProps.width,minWidth = _this$getProps.minWidth;
 
       return /*#__PURE__*/(
         _react.default.createElement("div", {
           className: _Popup2.styles.content(_this.theme),
           "data-tid": PopupDataTids.content,
-          ref: (0, _utils.mergeRefs)([_this.refForTransition, _this.refPopupContentElement]) }, /*#__PURE__*/
+          ref: (0, _mergeRefs.mergeRefs)(_this.refForTransition, _this.refPopupContentElement) }, /*#__PURE__*/
 
         _react.default.createElement("div", {
           className: _Popup2.styles.contentInner(_this.theme),
-          style: { backgroundColor: backgroundColor, width: _this.calculateWidth(width) },
+          style: { backgroundColor: backgroundColor, width: _this.calculateWidth(width), minWidth: _this.calculateWidth(minWidth) },
           "data-tid": PopupDataTids.contentInner },
 
         children
@@ -535,6 +590,17 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
 
 
 
+
+
+
+    prepareDataVisualState = function () {var _this$state$location;
+      var position = (_this$state$location = _this.state.location) == null ? void 0 : _this$state$location.position;
+      if (position) {var _getVisualStateDataAt;
+        var attrName = "position-" + position.replace(' ', '-');
+        return (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)((_getVisualStateDataAt = {}, _getVisualStateDataAt[attrName] = true, _getVisualStateDataAt));
+      }
+      return {};
+    };_this.
 
     resetLocation = function () {
       _this.cancelDelayedUpdateLocation();
@@ -568,10 +634,6 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
 
 
 
-
-
-
-
 
 
 
@@ -611,133 +673,156 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
       if (!_this.locationEquals(_this.state.location, location)) {
         _this.setState({ location: location });
       }
-    };return _this;}(0, _inheritsLoose2.default)(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);}};Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {/**
-     * Delaying updateLocation to ensure it happens after props update
-     */if (props.opened) {if (!state.location) {return { location: DUMMY_LOCATION };}} else if (state.location) {return { location: DUMMY_LOCATION };}return state;};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var hadNoLocation = prevState.location === DUMMY_LOCATION;var hasLocation = this.state.location !== DUMMY_LOCATION;var wasClosed = prevProps.opened && !this.props.opened;if (this.isMobileLayout && prevState.location === null && this.state.location === null) {this.setState({ location: DUMMY_LOCATION });}if (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();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 /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);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;var children = this.renderChildren();return children ? /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, { rootNodeRef: this.setRootNode }, /*#__PURE__*/_react.default.createElement(_MobilePopup.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 anchorElement = this.props.anchorElement;var useWrapper = this.getProps().useWrapper;var anchor = null;if ((0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.globalObject.Element)) {this.updateAnchorElement(anchorElement);} else if ( /*#__PURE__*/_react.default.isValidElement(anchorElement)) {anchor = useWrapper ? /*#__PURE__*/_react.default.createElement("span", null, anchorElement) : anchorElement;} else {anchor = /*#__PURE__*/_react.default.createElement("span", null, anchorElement);}var anchorWithRef = anchor && /*#__PURE__*/_react.default.isValidElement(anchor) && (0, _utils.isRefableElement)(anchor) ? /*#__PURE__*/_react.default.cloneElement(anchor, { ref: function ref(instance) {var _anchor;_this3.updateAnchorElement(instance);var originalRef = (_anchor = anchor) == null ? void 0 : _anchor.ref;originalRef && (0, _callChildRef.callChildRef)(originalRef, instance);} }) : null; // we need to get anchor's DOM node
-    // so we either set our own ref on it via cloning
-    // or relay on findDOMNode (inside getRootNode)
-    // which should be called within updateAnchorElement
-    // in the case when the anchor is not refable
-    var canGetAnchorNode = !!anchorWithRef || (0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.globalObject.Element);return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, { anchor: anchorWithRef || anchor, ref: canGetAnchorNode ? null : this.updateAnchorElement }, this.isMobileLayout && !this.props.withoutMobile ? this.renderMobile() : location && this.renderContent(location));};_proto.addEventListeners = function addEventListeners(element) {if (element && (0, _isInstanceOf.isInstanceOf)(element, _globalObject.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 && (0, _isInstanceOf.isInstanceOf)(element, _globalObject.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.renderContent = function renderContent(location) {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 children = this.renderChildren();var _PopupHelper$getPosit = _PopupHelper.PopupHelper.getPositionObject(location.position),direction = _PopupHelper$getPosit.direction;var rootStyle = (0, _extends3.default)({}, location.coordinates, { maxWidth: maxWidth });var shouldFallbackShadow = _client.isIE11 || _client.isEdge || _client.isSafari;return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation, nodeRef: this.refForTransition }, function (state) {var _this4$props$id, _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends3.default)({}, _this4.props, { rootNodeRef: _this4.setRootNode }), /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { id: (_this4$props$id = _this4.props.id) != null ? _this4$props$id : _this4.rootId, "data-tid": PopupDataTids.root, priority: 'Popup', className: (0, _Emotion.cx)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup2.styles.popup(_this4.theme)] = true, _extends2[_Popup2.styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[_Popup2.styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[_Popup2.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup2.styles["transition-enter-" + direction](_this4.theme)] = true, _ref[_Popup2.styles.transitionEnter()] = state === 'entering', _ref[_Popup2.styles.transitionEnterActive()] = state === 'entered', _ref[_Popup2.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 (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$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.PopupHelper.getPositionObject(positionName);return hasPin && /*#__PURE__*/_react.default.createElement(_PopupPin.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.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(this.updateLocation);};_proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {if (this.locationUpdateId) {_globalObject.globalObject.cancelAnimationFrame == null || _globalObject.globalObject.cancelAnimationFrame(this.locationUpdateId);this.locationUpdateId = null;}};_proto.locationEquals = function locationEquals(x, y) {if (x === y) {return true;}if ((0, _utils.isNullable)(x) || (0, _utils.isNullable)(y)) {return false;}if (!_client.isIE11 && !_client.isEdge) {return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;}
+    };_this.
 
-    // Для 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 : PopupPositions;
-    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) {
-      (0, _warning.default)(false, 'Unexpected position ' + pos_ + ' passed to Popup. Expected one of: ' + positions.join(', '));
-      return positions;
-    }
-    return [].concat(positions.slice(index), positions.slice(0, index));
-  };_proto.
 
-  getLocation = function getLocation(popupElement, location) {
-    var _this$getProps3 = this.getProps(),tryPreserveFirstRenderedPosition = _this$getProps3.tryPreserveFirstRenderedPosition;
-    var positions = this.reorderPropsPositionsWithPriorityPos();
 
-    var anchorElement = this.anchorElement;
 
-    (0, _warning.default)(
-      anchorElement && (0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.globalObject.Element),
-      'Anchor element is not defined or not instance of Element'
-    );
 
-    if (!(anchorElement && (0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.globalObject.Element))) {
-      return location;
-    }
 
-    var anchorRect = _PopupHelper.PopupHelper.getElementAbsoluteRect(anchorElement);
-    var popupRect = _PopupHelper.PopupHelper.getElementAbsoluteRect(popupElement);
 
-    var position;
-    var coordinates;
 
-    if (location && location !== DUMMY_LOCATION && location.position) {
-      position = location.position;
-      coordinates = this.getCoordinates(anchorRect, popupRect, position);
 
-      var isFullyVisible = _PopupHelper.PopupHelper.isFullyVisible(coordinates, popupRect);
-      var canBecomeVisible = !isFullyVisible && _PopupHelper.PopupHelper.canBecomeFullyVisible(position, coordinates);
 
-      if (
-      // если нужно сохранить первоначальную позицию и Попап целиком
-      // находится в пределах вьюпорта (или может быть проскроллен в него)
-      tryPreserveFirstRenderedPosition && (isFullyVisible || canBecomeVisible) ||
-      // если Попап целиком во вьюпорте и в самой приоритетной позиции
-      // (иначе нужно попытаться позицию сменить)
-      isFullyVisible && position === positions[0])
-      {
-        // сохраняем текущую позицию
-        return { coordinates: coordinates, position: position };
-      }
-    }
 
-    for (var _iterator = (0, _createForOfIteratorHelperLoose2.default)(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 };
-      }
-    }
 
-    position = positions[0];
-    coordinates = this.getCoordinates(anchorRect, popupRect, position);
-    return { coordinates: coordinates, position: position };
-  };_proto.
 
-  getPinnedPopupOffset = function getPinnedPopupOffset(anchorRect, position) {
-    if (!this.getProps().hasPin || /center|middle/.test(position.align)) {
-      return 0;
-    }
 
-    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 =
-    (0, _utils.isNonNullable)(marginFromProps) && !isNaN(marginFromProps) ?
-    marginFromProps :
-    parseInt(this.theme.popupMargin) || 0;
-    var position = _PopupHelper.PopupHelper.getPositionObject(positionName);
-    var popupOffset = this.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
 
-    switch (position.direction) {
-      case 'top':
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    getRelativeShift = function () {
+      var _this2 = _this,absoluteParent = _this2.absoluteParent;
+
+      if (!_this.props.disablePortal || !absoluteParent) {
         return {
-          top: anchorRect.top - popupRect.height - margin,
-          left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset)
+          top: 0,
+          left: 0
+        };
+      }
+
+      var rect = _PopupHelper.PopupHelper.getElementAbsoluteRect(absoluteParent);
+
+      return {
+        top: -rect.top,
+        left: -rect.left
+      };
+    };return _this;}(0, _inheritsLoose2.default)(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);}};Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {/**
+     * Delaying updateLocation to ensure it happens after props update
+     */if (props.opened) {if (!state.location) {return { location: DUMMY_LOCATION };}} else if (state.location) {return { location: DUMMY_LOCATION };}return state;};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var hadNoLocation = prevState.location === DUMMY_LOCATION;var hasLocation = this.state.location !== DUMMY_LOCATION;var wasClosed = prevProps.opened && !this.props.opened;if (this.isMobileLayout && prevState.location === null && this.state.location === null) {this.setState({ location: DUMMY_LOCATION });}if (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();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 _this3 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this3.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this3.theme = theme;return _this3.renderMain();});});};_proto.renderMobile = function renderMobile() {var opened = this.props.opened;var children = this.renderChildren();return children ? /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, { rootNodeRef: this.setRootNode }, /*#__PURE__*/_react.default.createElement(_MobilePopup.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 ((0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.globalObject.Element)) {this.updateAnchorElement(anchorElement);} else if ( /*#__PURE__*/_react.default.isValidElement(anchorElement)) {anchor = useWrapper ? /*#__PURE__*/_react.default.createElement("span", null, anchorElement) : anchorElement;} else {anchor = /*#__PURE__*/_react.default.createElement("span", null, anchorElement);}var anchorWithRef = anchor && /*#__PURE__*/_react.default.isValidElement(anchor) && (0, _utils.isRefableElement)(anchor) ? /*#__PURE__*/_react.default.cloneElement(anchor, { ref: (0, _mergeRefs.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 || (0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.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 && (0, _isInstanceOf.isInstanceOf)(element, _globalObject.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 && (0, _isInstanceOf.isInstanceOf)(element, _globalObject.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.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.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.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation, nodeRef: this.refForTransition }, function (state) {var _this4$props$id, _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends3.default)({}, _this4.props, { rootNodeRef: _this4.setRootNode }, _this4.prepareDataVisualState()), /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { id: (_this4$props$id = _this4.props.id) != null ? _this4$props$id : _this4.rootId, "data-tid": PopupDataTids.root, priority: _this4.props.priority, className: (0, _Emotion.cx)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup2.styles.popup(_this4.theme)] = true, _extends2[_Popup2.styles.shadow(_this4.theme)] = hasShadow, _extends2[_Popup2.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup2.styles["transition-enter-" + direction](_this4.theme)] = true, _ref[_Popup2.styles.transitionEnter()] = state === 'entering', _ref[_Popup2.styles.transitionEnterActive()] = state === 'entered', _ref[_Popup2.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 (0, _utils.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 = _client.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.PopupHelper.getPositionObject(positionName);return hasPin && !PopupNonPinnablePositions.includes(positionName) && /*#__PURE__*/_react.default.createElement(_PopupPin.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.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(this.updateLocation);};_proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {if (this.locationUpdateId) {_globalObject.globalObject.cancelAnimationFrame == null || _globalObject.globalObject.cancelAnimationFrame(this.locationUpdateId);this.locationUpdateId = null;}};_proto.locationEquals = function locationEquals(x, y) {if (x === y) {return true;}if ((0, _utils.isNullable)(x) || (0, _utils.isNullable)(y)) {return false;}if (!_client.isIE11 && !_client.isEdge) {return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;} // Для ie/edge обновляем позицию только при разнице минимум в 1. Иначе есть вероятность
+    // уйти в бесконечный ререндер
+    return x.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];}var index = positions.findIndex(function (position) {return position.startsWith(pos_);});if (index === -1) {(0, _warning.default)(false, 'Unexpected position ' + pos_ + ' passed to Popup. Expected one of: ' + positions.join(', '));return positions;}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;(0, _warning.default)(anchorElement && (0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.globalObject.Element), 'Anchor element is not defined or not instance of Element');if (!(anchorElement && (0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.globalObject.Element))) {return location;}var anchorRect = _PopupHelper.PopupHelper.getElementAbsoluteRect(anchorElement);var popupRect = _PopupHelper.PopupHelper.getElementAbsoluteRect(popupElement);var position;var coordinates;if (location && location !== DUMMY_LOCATION && location.position) {position = location.position;coordinates = this.getCoordinates(anchorRect, popupRect, position);var isFullyVisible = _PopupHelper.PopupHelper.isFullyVisible(coordinates, popupRect);var canBecomeVisible = !isFullyVisible && _PopupHelper.PopupHelper.canBecomeFullyVisible(position, coordinates);if ( // если нужно сохранить первоначальную позицию и Попап целиком
+      // находится в пределах вьюпорта (или может быть проскроллен в него)
+      tryPreserveFirstRenderedPosition && (isFullyVisible || canBecomeVisible) || // если Попап целиком во вьюпорте и в самой приоритетной позиции
+      // (иначе нужно попытаться позицию сменить)
+      isFullyVisible && position === positions[0]) {// сохраняем текущую позицию
+        return { coordinates: coordinates, position: position };}}for (var _iterator = (0, _createForOfIteratorHelperLoose2.default)(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 };}}position = positions[0];coordinates = this.getCoordinates(anchorRect, popupRect, position);return { coordinates: coordinates, position: position };};_proto.getPinnedPopupOffset = function getPinnedPopupOffset(anchorRect, position) {if (!this.getProps().hasPin || /center|middle/.test(position.align)) {return 0;}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 = (0, _utils.isNonNullable)(marginFromProps) && !isNaN(marginFromProps) ? marginFromProps : parseInt(this.theme.popupMargin) || 0;var position = _PopupHelper.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 {
@@ -765,10 +850,10 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
     switch (align) {
       case 'top':
       case 'bottom':
-        return pinOffset || parseInt(this.theme.popupPinOffset) || parseInt(this.theme.popupPinOffsetY);
+        return pinOffset || parseInt(this.theme.popupPinOffsetY);
       case 'left':
       case 'right':
-        return pinOffset || parseInt(this.theme.popupPinOffset) || parseInt(this.theme.popupPinOffsetX);
+        return pinOffset || parseInt(this.theme.popupPinOffsetX);
       case 'center':
       case 'middle':
         return 0;
@@ -827,5 +912,8 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
    */positions: _propTypes.default.array, /**
    * Приоритетная позиция попапа
    */pos: _propTypes.default.string, /**
+   * Отключает использование портала
+   */disablePortal: _propTypes.default.bool, /**
    * Игнорировать ли события hover/click
-   */ignoreHover: _propTypes.default.bool }, _Popup.defaultProps = { popupOffset: 0, hasPin: false, hasShadow: false, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, ignoreHover: false, width: 'auto' }, _Popup.defaultRootNode = null, _Popup)) || _class) || _class;
+   */ignoreHover: _propTypes.default.bool }, _Popup.defaultProps = { popupOffset: 0, hasPin: false, hasShadow: false, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, ignoreHover: false, disablePortal: false, width: 'auto', priority: _ZIndex.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;}(0, _inheritsLoose2.default)(EmptyWrapper, _React$Component2);var _proto2 = EmptyWrapper.prototype;_proto2.render = function render() {return this.props.children;};return EmptyWrapper;}(_react.default.Component);