@skbkontur/react-ui 3.10.0-fileuploader.2 → 3.10.0

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

@@ -1,161 +1,161 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Nullable } from '../../typings/utility-types';
-import { FocusEventType, MouseEventType } from '../../typings/event-types';
-import { CommonProps } from '../CommonWrapper';
-export declare type PopupPosition = 'top left' | 'top center' | 'top right' | 'right top' | 'right middle' | 'right bottom' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom';
-export declare const PopupPositions: PopupPosition[];
-export interface PopupHandlerProps {
-    onMouseEnter?: (event: MouseEventType) => void;
-    onMouseLeave?: (event: MouseEventType) => void;
-    onClick?: (event: MouseEventType) => void;
-    onFocus?: (event: FocusEventType) => void;
-    onBlur?: (event: FocusEventType) => void;
-    onOpen?: () => void;
-    onClose?: () => void;
-}
-export interface PopupProps extends CommonProps, PopupHandlerProps {
-    anchorElement: React.ReactNode | HTMLElement;
-    backgroundColor?: React.CSSProperties['backgroundColor'];
-    borderColor?: React.CSSProperties['borderColor'];
-    children: React.ReactNode | (() => React.ReactNode);
-    hasPin: boolean;
-    hasShadow: boolean;
-    disableAnimations: boolean;
-    margin?: number;
-    maxWidth?: number | string;
-    opened: boolean;
-    pinOffset?: number;
-    pinSize?: number;
-    popupOffset: number;
-    positions: PopupPosition[];
-    /**
-     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
-     *
-     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
-     */
-    useWrapper: boolean;
-    ignoreHover: boolean;
-    width: React.CSSProperties['width'];
-    /**
-     * При очередном рендере пытаться сохранить первоначальную позицию попапа
-     * (в числе числе, когда он выходит за пределы экрана, но может быть проскролен в него).
-     *
-     * Нужен только для Tooltip. В остальных случаях позиция перестраивается автоматически.
-     * @see https://github.com/skbkontur/retail-ui/pull/1195
-     */
-    tryPreserveFirstRenderedPosition?: boolean;
-}
-interface PopupLocation {
-    coordinates: {
-        left: number;
-        top: number;
-    };
-    position: PopupPosition;
-}
-export interface PopupState {
-    location: Nullable<PopupLocation>;
-}
-export declare class Popup extends React.Component<PopupProps, PopupState> {
-    static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        /**
-         * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
-         */
-        anchorElement: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        /**
-         * Фон попапа и пина
-         */
-        backgroundColor: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        /**
-         * Показывать ли пин
-         */
-        hasPin: PropTypes.Requireable<boolean>;
-        /**
-         * Применять ли box-shadow на попапе. При false отключает границу на пине
-         */
-        hasShadow: PropTypes.Requireable<boolean>;
-        /**
-         * Отступ попапа от элемента
-         */
-        margin: PropTypes.Requireable<number>;
-        /**
-         * Показан или скрыт попап
-         */
-        opened: PropTypes.Requireable<boolean>;
-        /**
-         * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
-         */
-        pinOffset: PropTypes.Requireable<number>;
-        /**
-         * Сторона пина без учёта границы.
-         * Пин представляет собой равносторонний треугольник, высота от попапа
-         * до "носика" пина будет соответствовать формуле (size* √3)/2
-         */
-        pinSize: PropTypes.Requireable<number>;
-        /**
-         * смещение попапа относительно родительского элемента
-         */
-        popupOffset: PropTypes.Requireable<number>;
-        /**
-         * С какой стороны показывать попап и край попапа,
-         * на котором будет отображаться пин
-         */
-        positions: PropTypes.Requireable<any[]>;
-        /**
-         * Игнорировать ли события hover/click
-         */
-        ignoreHover: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        popupOffset: number;
-        hasPin: boolean;
-        hasShadow: boolean;
-        disableAnimations: boolean;
-        useWrapper: boolean;
-        ignoreHover: boolean;
-        width: string;
-    };
-    state: PopupState;
-    private theme;
-    private layoutEventsToken;
-    private locationUpdateId;
-    private lastPopupElement;
-    private anchorElement;
-    private anchorInstance;
-    componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: Readonly<PopupProps>): void;
-    componentDidUpdate(prevProps: PopupProps, prevState: PopupState): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    private renderMain;
-    private refAnchorElement;
-    private extractElement;
-    private updateAnchorElement;
-    private addEventListeners;
-    private removeEventListeners;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private handleClick;
-    private handleFocus;
-    private handleBlur;
-    private calculateWidth;
-    private renderContent;
-    private resetLocation;
-    private renderChildren;
-    private refPopupElement;
-    private renderPin;
-    private handleLayoutEvent;
-    private delayUpdateLocation;
-    private cancelDelayedUpdateLocation;
-    private updateLocation;
-    private locationEquals;
-    private getLocation;
-    private getPinnedPopupOffset;
-    private getCoordinates;
-    private getPinOffset;
-    private getHorizontalPosition;
-    private getVerticalPosition;
-}
-export {};
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Nullable } from '../../typings/utility-types';
+import { FocusEventType, MouseEventType } from '../../typings/event-types';
+import { CommonProps } from '../CommonWrapper';
+export declare type PopupPosition = 'top left' | 'top center' | 'top right' | 'right top' | 'right middle' | 'right bottom' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom';
+export declare const PopupPositions: PopupPosition[];
+export interface PopupHandlerProps {
+    onMouseEnter?: (event: MouseEventType) => void;
+    onMouseLeave?: (event: MouseEventType) => void;
+    onClick?: (event: MouseEventType) => void;
+    onFocus?: (event: FocusEventType) => void;
+    onBlur?: (event: FocusEventType) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+export interface PopupProps extends CommonProps, PopupHandlerProps {
+    anchorElement: React.ReactNode | HTMLElement;
+    backgroundColor?: React.CSSProperties['backgroundColor'];
+    borderColor?: React.CSSProperties['borderColor'];
+    children: React.ReactNode | (() => React.ReactNode);
+    hasPin: boolean;
+    hasShadow: boolean;
+    disableAnimations: boolean;
+    margin?: number;
+    maxWidth?: number | string;
+    opened: boolean;
+    pinOffset?: number;
+    pinSize?: number;
+    popupOffset: number;
+    positions: PopupPosition[];
+    /**
+     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
+     *
+     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
+     */
+    useWrapper: boolean;
+    ignoreHover: boolean;
+    width: React.CSSProperties['width'];
+    /**
+     * При очередном рендере пытаться сохранить первоначальную позицию попапа
+     * (в числе числе, когда он выходит за пределы экрана, но может быть проскролен в него).
+     *
+     * Нужен только для Tooltip. В остальных случаях позиция перестраивается автоматически.
+     * @see https://github.com/skbkontur/retail-ui/pull/1195
+     */
+    tryPreserveFirstRenderedPosition?: boolean;
+}
+interface PopupLocation {
+    coordinates: {
+        left: number;
+        top: number;
+    };
+    position: PopupPosition;
+}
+export interface PopupState {
+    location: Nullable<PopupLocation>;
+}
+export declare class Popup extends React.Component<PopupProps, PopupState> {
+    static __KONTUR_REACT_UI__: string;
+    static propTypes: {
+        /**
+         * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
+         */
+        anchorElement: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /**
+         * Фон попапа и пина
+         */
+        backgroundColor: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /**
+         * Показывать ли пин
+         */
+        hasPin: PropTypes.Requireable<boolean>;
+        /**
+         * Применять ли box-shadow на попапе. При false отключает границу на пине
+         */
+        hasShadow: PropTypes.Requireable<boolean>;
+        /**
+         * Отступ попапа от элемента
+         */
+        margin: PropTypes.Requireable<number>;
+        /**
+         * Показан или скрыт попап
+         */
+        opened: PropTypes.Requireable<boolean>;
+        /**
+         * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
+         */
+        pinOffset: PropTypes.Requireable<number>;
+        /**
+         * Сторона пина без учёта границы.
+         * Пин представляет собой равносторонний треугольник, высота от попапа
+         * до "носика" пина будет соответствовать формуле (size* √3)/2
+         */
+        pinSize: PropTypes.Requireable<number>;
+        /**
+         * смещение попапа относительно родительского элемента
+         */
+        popupOffset: PropTypes.Requireable<number>;
+        /**
+         * С какой стороны показывать попап и край попапа,
+         * на котором будет отображаться пин
+         */
+        positions: PropTypes.Requireable<any[]>;
+        /**
+         * Игнорировать ли события hover/click
+         */
+        ignoreHover: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        popupOffset: number;
+        hasPin: boolean;
+        hasShadow: boolean;
+        disableAnimations: boolean;
+        useWrapper: boolean;
+        ignoreHover: boolean;
+        width: string;
+    };
+    state: PopupState;
+    private theme;
+    private layoutEventsToken;
+    private locationUpdateId;
+    private lastPopupElement;
+    private anchorElement;
+    private setRootNode;
+    private refForTransition;
+    componentDidMount(): void;
+    static getDerivedStateFromProps(props: Readonly<PopupProps>, state: PopupState): PopupState;
+    componentDidUpdate(prevProps: PopupProps, prevState: PopupState): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    private renderMain;
+    private renderContainerRef;
+    private updateAnchorElement;
+    private addEventListeners;
+    private removeEventListeners;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleClick;
+    private handleFocus;
+    private handleBlur;
+    private calculateWidth;
+    private renderContent;
+    private resetLocation;
+    private renderChildren;
+    private refPopupElement;
+    private renderPin;
+    private handleLayoutEvent;
+    private delayUpdateLocation;
+    private cancelDelayedUpdateLocation;
+    private updateLocation;
+    private locationEquals;
+    private getLocation;
+    private getPinnedPopupOffset;
+    private getCoordinates;
+    private getPinOffset;
+    private getHorizontalPosition;
+    private getVerticalPosition;
+}
+export {};

package/cjs/internal/Popup/Popup.js

@@ -1,5 +1,4 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Popup = exports.PopupPositions = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _reactDom = require("react-dom");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.Popup = exports.PopupPositions = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _raf = _interopRequireDefault(require("raf"));
@@ -18,10 +17,12 @@ var _SSRSafe = require("../../lib/SSRSafe");
 var _currentEnvironment = require("../../lib/currentEnvironment");
 var _CommonWrapper = require("../CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _callChildRef = require("../../lib/callChildRef/callChildRef");
 
 var _PopupPin = require("./PopupPin");
 var _PopupHelper = require("./PopupHelper");
-var _Popup = require("./Popup.styles");function _createForOfIteratorHelperLoose(o, allowArrayLike) {var it;if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {if (it) o = it;var i = 0;return function () {if (i >= o.length) return { done: true };return { done: false, value: o[i++] };};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}it = o[Symbol.iterator]();return it.next.bind(it);}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}
+var _Popup = require("./Popup.styles");var _class, _class2, _temp;function _createForOfIteratorHelperLoose(o, allowArrayLike) {var it;if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {if (it) o = it;var i = 0;return function () {if (i >= o.length) return { done: true };return { done: false, value: o[i++] };};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}it = o[Symbol.iterator]();return it.next.bind(it);}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}
 
 var POPUP_BORDER_DEFAULT_COLOR = 'transparent';
 var TRANSITION_TIMEOUT = { enter: 0, exit: 200 };
@@ -118,7 +119,8 @@ var PopupPositions = [
 
 
 
-Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Popup, _React$Component);function Popup() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+Popup = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Popup, _React$Component);function Popup() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -199,7 +201,19 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
     locationUpdateId = null;_this.
     lastPopupElement = void 0;_this.
     anchorElement = null;_this.
-    anchorInstance = void 0;_this.
+    setRootNode = void 0;_this.
+    refForTransition = /*#__PURE__*/_react.default.createRef();_this.
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -272,12 +286,6 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
 
 
-    refAnchorElement = function (instance) {
-      _this.anchorInstance = instance;
-      var element = _this.extractElement(instance);
-      _this.updateAnchorElement(element);
-      _this.anchorElement = element;
-    };_this.
 
 
 
@@ -291,6 +299,16 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
 
 
+    renderContainerRef = function (childInstance) {
+      _this.updateAnchorElement(childInstance);
+    };_this.
+
+
+
+
+
+
+
 
 
 
@@ -412,21 +430,20 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
 
 
 
+
 
 
     resetLocation = function () {
       _this.cancelDelayedUpdateLocation();
-      _this.setState({ location: null });
+      _this.state.location !== null && _this.setState({ location: null });
     };_this.
 
 
 
 
 
-    refPopupElement = function (zIndex) {
-      if (zIndex) {
-        _this.lastPopupElement = zIndex && (0, _reactDom.findDOMNode)(zIndex);
-      }
+    refPopupElement = function (element) {
+      _this.lastPopupElement = element;
     };_this.
 
 
@@ -460,9 +477,6 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
       if (!_this.state.location) {
         return;
       }
-      if (_this.anchorInstance) {
-        _this.updateAnchorElement(_this.extractElement(_this.anchorInstance));
-      }
       _this.updateLocation();
     };_this.
 
@@ -489,19 +503,32 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
       if (!_this.locationEquals(_this.state.location, location)) {
         _this.setState({ location: location });
       }
-    };return _this;}var _proto = Popup.prototype;_proto.componentDidMount = function componentDidMount() {this.updateLocation();this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);};_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {/**
+    };return _this;}var _proto = Popup.prototype;_proto.componentDidMount = function componentDidMount() {this.updateLocation();this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);};Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {/**
      * Delaying updateLocation to ensure it happens after props update
-     */if (nextProps.opened) {if (!this.state.location) {this.setState({ location: DUMMY_LOCATION });}this.delayUpdateLocation();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var hadNoLocation = prevState.location === DUMMY_LOCATION;var hasLocation = this.state.location !== DUMMY_LOCATION;if (hadNoLocation && hasLocation && this.props.onOpen) {this.props.onOpen();}if (!hadNoLocation && !this.state.location && this.props.onClose) {this.props.onClose();}};_proto.componentWillUnmount = function componentWillUnmount() {this.cancelDelayedUpdateLocation();this.removeEventListeners(this.anchorElement);if (this.layoutEventsToken) {this.layoutEventsToken.remove();this.layoutEventsToken = null;}if (this.state.location && this.props.onClose) {this.props.onClose();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var location = this.state.location;var _this$props = this.props,anchorElement = _this$props.anchorElement,useWrapper = _this$props.useWrapper;var child = null;if ((0, _SSRSafe.isHTMLElement)(anchorElement)) {this.updateAnchorElement(anchorElement);} else if ( /*#__PURE__*/_react.default.isValidElement(anchorElement)) {child = useWrapper ? /*#__PURE__*/_react.default.createElement("span", null, anchorElement) : anchorElement;} else {child = /*#__PURE__*/_react.default.createElement("span", null, anchorElement);}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, { anchor: child, ref: child ? this.refAnchorElement : undefined }, location && this.renderContent(location));};_proto.extractElement = function extractElement(instance) {if (!instance) {return null;}var element = (0, _reactDom.findDOMNode)(instance);return (0, _SSRSafe.isHTMLElement)(element) ? element : null;};_proto.updateAnchorElement = function updateAnchorElement(element) {var anchorElement = this.anchorElement;if (element !== anchorElement) {this.removeEventListeners(anchorElement);this.anchorElement = element;this.addEventListeners(element);}};_proto.addEventListeners = function addEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.addEventListener('mouseenter', this.handleMouseEnter);element.addEventListener('mouseleave', this.handleMouseLeave);element.addEventListener('click', this.handleClick);element.addEventListener('focusin', this.handleFocus);element.addEventListener('focusout', this.handleBlur);}};_proto.removeEventListeners = function removeEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.removeEventListener('mouseenter', this.handleMouseEnter);element.removeEventListener('mouseleave', this.handleMouseLeave);element.removeEventListener('click', this.handleClick);element.removeEventListener('focusin', this.handleFocus);element.removeEventListener('focusout', this.handleBlur);}};_proto.renderContent = function renderContent(location) {var _this3 = this;var _this$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,width = _this$props2.width;var children = this.renderChildren();var _PopupHelper$getPosit = _PopupHelper.PopupHelper.getPositionObject(location.position),direction = _PopupHelper$getPosit.direction;var rootStyle = (0, _extends3.default)({}, location.coordinates, { maxWidth: maxWidth });var shouldFallbackShadow = _client.isIE11 || _client.isEdge || _client.isSafari;return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation }, function (state) {var _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this3.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { ref: _this3.refPopupElement, priority: 'Popup', className: (0, _Emotion.cx)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup.styles.popup(_this3.theme)] = true, _extends2[_Popup.styles.shadow(_this3.theme)] = hasShadow && !shouldFallbackShadow, _extends2[_Popup.styles.shadowFallback(_this3.theme)] = hasShadow && shouldFallbackShadow, _extends2[_Popup.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup.styles["transition-enter-" + direction](_this3.theme)] = true, _ref[_Popup.styles.transitionEnter()] = state === 'entering', _ref[_Popup.styles.transitionEnterActive()] = state === 'entered', _ref[_Popup.styles.transitionExit()] = state === 'exiting', _ref))), style: rootStyle, onMouseEnter: _this3.handleMouseEnter, onMouseLeave: _this3.handleMouseLeave }, /*#__PURE__*/_react.default.createElement("div", { className: _Popup.styles.content(_this3.theme), "data-tid": 'PopupContent' }, /*#__PURE__*/_react.default.createElement("div", { className: _Popup.styles.contentInner(_this3.theme), style: { backgroundColor: backgroundColor, width: _this3.calculateWidth(width) }, "data-tid": 'PopupContentInner' }, children)), _this3.renderPin(location.position)));});};_proto.renderChildren = function renderChildren() {return (0, _utils.isFunction)(this.props.children) ? this.props.children() : this.props.children;};_proto.renderPin = function renderPin(positionName) {/**
+     */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 (hadNoLocation && hasLocation && this.props.onOpen) {this.props.onOpen();}if (wasClosed && !hasLocation && this.props.onClose) {this.props.onClose();}if (this.props.opened) {this.delayUpdateLocation();}};_proto.componentWillUnmount = function componentWillUnmount() {this.cancelDelayedUpdateLocation();this.removeEventListeners(this.anchorElement);if (this.layoutEventsToken) {this.layoutEventsToken.remove();this.layoutEventsToken = null;}if (this.state.location && this.props.onClose) {this.props.onClose();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.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 anchor = null;if ((0, _SSRSafe.isHTMLElement)(anchorElement)) {this.updateAnchorElement(anchorElement);} else if ( /*#__PURE__*/_react.default.isValidElement(anchorElement)) {anchor = useWrapper ? /*#__PURE__*/_react.default.createElement("span", null, anchorElement) : anchorElement;} else {anchor = /*#__PURE__*/_react.default.createElement("span", null, anchorElement);}var anchorWithRef = anchor && /*#__PURE__*/_react.default.isValidElement(anchor) && (0, _utils.isRefableElement)(anchor) ? /*#__PURE__*/_react.default.cloneElement(anchor, { ref: function ref(instance) {var _anchor;_this3.updateAnchorElement(instance);var originalRef = (_anchor = anchor) == null ? void 0 : _anchor.ref;originalRef && (0, _callChildRef.callChildRef)(originalRef, instance);} }) : null; // we need to get anchor's DOM node
+    // so we either set our own ref on it via cloning
+    // or relay on findDOMNode (inside getRootNode)
+    // which should be called with RenderContainer's ref
+    // in the case when the anchor is not refable
+    return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, { anchor: anchorWithRef || anchor, ref: anchorWithRef ? null : this.renderContainerRef }, location && this.renderContent(location));};_proto.updateAnchorElement = function updateAnchorElement(childInstance) {var childDomNode = (0, _rootNode.getRootNode)(childInstance);var anchorElement = this.anchorElement;if (childDomNode !== anchorElement) {this.removeEventListeners(anchorElement);this.anchorElement = childDomNode;this.addEventListeners(childDomNode);this.setRootNode(childDomNode);}};_proto.addEventListeners = function addEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.addEventListener('mouseenter', this.handleMouseEnter);element.addEventListener('mouseleave', this.handleMouseLeave);element.addEventListener('click', this.handleClick);element.addEventListener('focusin', this.handleFocus);element.addEventListener('focusout', this.handleBlur);}};_proto.removeEventListeners = function removeEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.removeEventListener('mouseenter', this.handleMouseEnter);element.removeEventListener('mouseleave', this.handleMouseLeave);element.removeEventListener('click', this.handleClick);element.removeEventListener('focusin', this.handleFocus);element.removeEventListener('focusout', this.handleBlur);}};_proto.renderContent = function renderContent(location) {var _this4 = this;var _this$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,width = _this$props2.width;var children = this.renderChildren();var _PopupHelper$getPosit = _PopupHelper.PopupHelper.getPositionObject(location.position),direction = _PopupHelper$getPosit.direction;var rootStyle = (0, _extends3.default)({}, location.coordinates, { maxWidth: maxWidth });var shouldFallbackShadow = _client.isIE11 || _client.isEdge || _client.isSafari;return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation, nodeRef: this.refForTransition }, function (state) {var _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this4.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { wrapperRef: _this4.refPopupElement, priority: 'Popup', className: (0, _Emotion.cx)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup.styles.popup(_this4.theme)] = true, _extends2[_Popup.styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[_Popup.styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[_Popup.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup.styles["transition-enter-" + direction](_this4.theme)] = true, _ref[_Popup.styles.transitionEnter()] = state === 'entering', _ref[_Popup.styles.transitionEnterActive()] = state === 'entered', _ref[_Popup.styles.transitionExit()] = state === 'exiting', _ref))), style: rootStyle, onMouseEnter: _this4.handleMouseEnter, onMouseLeave: _this4.handleMouseLeave }, /*#__PURE__*/_react.default.createElement("div", { className: _Popup.styles.content(_this4.theme), "data-tid": 'PopupContent', ref: _this4.refForTransition }, /*#__PURE__*/_react.default.createElement("div", { className: _Popup.styles.contentInner(_this4.theme), style: { backgroundColor: backgroundColor, width: _this4.calculateWidth(width) }, "data-tid": 'PopupContentInner' }, children)), _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$props3 = this.props,pinSize = _this$props3.pinSize,hasShadow = _this$props3.hasShadow,backgroundColor = _this$props3.backgroundColor,borderColor = _this$props3.borderColor;var position = _PopupHelper.PopupHelper.getPositionObject(positionName);return this.props.hasPin && /*#__PURE__*/_react.default.createElement(_PopupPin.PopupPin, { popupElement: this.lastPopupElement, popupPosition: positionName, size: pinSize || parseInt(this.theme.popupPinSize), offset: this.getPinOffset(position.align), borderWidth: hasShadow ? 1 : 0, backgroundColor: backgroundColor || this.theme.popupBackground, borderColor: borderColor || pinBorder });};_proto.delayUpdateLocation = function delayUpdateLocation() {this.cancelDelayedUpdateLocation();this.locationUpdateId = (0, _raf.default)(this.updateLocation);};_proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {if (this.locationUpdateId) {_raf.default.cancel(this.locationUpdateId);this.locationUpdateId = null;}};_proto.locationEquals = function locationEquals(x, y) {if (x === y) {return true;}
-    if (x == null || y == null) {
-      return false;
+     */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$props3 = this.props,pinSize = _this$props3.pinSize,hasShadow = _this$props3.hasShadow,backgroundColor = _this$props3.backgroundColor,borderColor = _this$props3.borderColor;var position = _PopupHelper.PopupHelper.getPositionObject(positionName);return this.props.hasPin && /*#__PURE__*/_react.default.createElement(_PopupPin.PopupPin, { popupElement: this.lastPopupElement, popupPosition: positionName, size: pinSize || parseInt(this.theme.popupPinSize), offset: this.getPinOffset(position.align), borderWidth: hasShadow ? 1 : 0, backgroundColor: backgroundColor || this.theme.popupBackground, borderColor: borderColor || pinBorder });};_proto.delayUpdateLocation = function delayUpdateLocation() {this.cancelDelayedUpdateLocation();this.locationUpdateId = (0, _raf.default)(this.updateLocation);};_proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {if (this.locationUpdateId) {_raf.default.cancel(this.locationUpdateId);this.locationUpdateId = null;}};_proto.locationEquals = function locationEquals(x, y) {if (x === y) {return true;}if (x == null || y == null) {return false;}if (!_client.isIE11 && !_client.isEdge) {
+      return (
+        x.coordinates.left === y.coordinates.left &&
+        x.coordinates.top === y.coordinates.top &&
+        x.position === y.position);
+
     }
 
+    // Для ie/edge обновляем позицию только при разнице минимум в 1. Иначе есть вероятность
+    // уйти в бесконечный ререндер
+
     return (
-      x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position);
+      x.position === y.position &&
+      Math.abs(x.coordinates.top - y.coordinates.top) <= 1 &&
+      Math.abs(x.coordinates.left - y.coordinates.left) <= 1);
 
   };_proto.
 
@@ -648,7 +675,7 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
       default:
         throw new Error("Unexpected align '" + align + "'");}
 
-  };return Popup;}(_react.default.Component);exports.Popup = Popup;Popup.__KONTUR_REACT_UI__ = 'Popup';Popup.propTypes = { /**
+  };return Popup;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Popup', _class2.propTypes = { /**
    * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
    */anchorElement: _propTypes.default.oneOfType([(0, _SSRSafe.safePropTypesInstanceOf)(function () {return HTMLElement;}), _propTypes.default.node]).isRequired, /**
    * Фон попапа и пина
@@ -673,4 +700,4 @@ Popup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(P
    * на котором будет отображаться пин
    */positions: _propTypes.default.array, /**
    * Игнорировать ли события hover/click
-   */ignoreHover: _propTypes.default.bool };Popup.defaultProps = { popupOffset: 0, hasPin: false, hasShadow: false, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, ignoreHover: false, width: 'auto' };
+   */ignoreHover: _propTypes.default.bool }, _class2.defaultProps = { popupOffset: 0, hasPin: false, hasShadow: false, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, ignoreHover: false, width: 'auto' }, _temp)) || _class;exports.Popup = Popup;