@skbkontur/react-ui 5.2.0 → 5.3.0

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

@@ -1,207 +1,189 @@
-import type { HTMLAttributes } from 'react';
-import React from 'react';
-import PropTypes from 'prop-types';
-import type { Nullable } from '../../typings/utility-types';
-import type { Priority } from '../ZIndex';
-import type { FocusEventType, MouseEventType } from '../../typings/event-types';
-import type { CommonProps } from '../CommonWrapper';
-import type { ReactUIFeatureFlags } from '../../lib/featureFlagsContext';
-export declare const PopupNonPinnablePositions: string[];
-export declare const PopupPinnablePositions: string[];
-export declare const PopupPositions: readonly string[];
-export declare const DefaultPosition: string;
-export type PopupPositionsType = (typeof PopupPositions)[number];
-export type PopupPinnablePositionsType = (typeof PopupPinnablePositions)[number];
-export type ShortPopupPositionsType = 'top' | 'bottom' | 'left' | 'right';
-export declare const DUMMY_LOCATION: PopupLocation;
-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 Omit<CommonProps, 'children'>, PopupHandlerProps, Pick<HTMLAttributes<HTMLDivElement>, 'id'> {
-    anchorElement: React.ReactNode | Element;
-    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;
-    priority?: Priority;
-    positions?: Readonly<PopupPositionsType[]>;
-    pos?: PopupPositionsType | ShortPopupPositionsType;
-    /**
-     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
-     *
-     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
-     */
-    useWrapper?: boolean;
-    ignoreHover?: boolean;
-    width?: React.CSSProperties['width'];
-    minWidth?: React.CSSProperties['minWidth'];
-    /**
-     * При очередном рендере пытаться сохранить первоначальную позицию попапа
-     * (в том числе, когда он выходит за пределы экрана, но может быть проскролен в него).
-     *
-     * Нужен только для Tooltip. В остальных случаях позиция перестраивается автоматически.
-     * @see https://github.com/skbkontur/retail-ui/pull/1195
-     */
-    tryPreserveFirstRenderedPosition?: boolean;
-    withoutMobile?: boolean;
-    /** @ignore */
-    disablePortal?: boolean;
-    mobileOnCloseRequest?: () => void;
-    /**
-     * Возвращает текущую позицию попапа
-     */
-    onPositionChange?: (pos: PopupPositionsType, isFullyVisible: boolean) => void;
-}
-interface PopupLocation {
-    coordinates: {
-        left: number;
-        top: number;
-    };
-    position: PopupPositionsType;
-    isFullyVisible: boolean;
-}
-export interface PopupState {
-    location: Nullable<PopupLocation>;
-}
-export declare const PopupDataTids: {
-    readonly root: "Popup__root";
-    readonly content: "PopupContent";
-    readonly contentInner: "PopupContentInner";
-    readonly popupPin: "PopupPin__root";
-};
-export declare const PopupIds: {
-    root: "Popup__root";
-};
-type DefaultProps = Required<Pick<PopupProps, 'popupOffset' | 'hasPin' | 'hasShadow' | 'disablePortal' | 'disableAnimations' | 'useWrapper' | 'ignoreHover' | 'width' | 'priority'>>;
-export declare class Popup extends React.Component<PopupProps, PopupState> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    static propTypes: {
-        /**
-         * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
-         */
-        anchorElement: PropTypes.Validator<NonNullable<NonNullable<HTMLElement | PropTypes.ReactNodeLike>>>;
-        /**
-         * Фон попапа и пина
-         */
-        backgroundColor: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
-        /**
-         * Показывать ли пин
-         */
-        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[]>;
-        /**
-         * Приоритетная позиция попапа
-         */
-        pos: PropTypes.Requireable<string>;
-        /**
-         * Отключает использование портала
-         */
-        disablePortal: PropTypes.Requireable<boolean>;
-        /**
-         * Игнорировать ли события hover/click
-         */
-        ignoreHover: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: DefaultProps;
-    private getProps;
-    static readonly defaultRootNode: null;
-    state: PopupState;
-    private theme;
-    featureFlags: ReactUIFeatureFlags;
-    private layoutEventsToken;
-    private locationUpdateId;
-    private lastPopupContentElement;
-    private isMobileLayout;
-    private setRootNode;
-    private refForTransition;
-    private hasAnchorElementListeners;
-    private rootId;
-    anchorElement: Nullable<Element>;
-    private absoluteParent;
-    componentDidMount(): void;
-    static getDerivedStateFromProps(props: Readonly<PopupProps>, state: PopupState): PopupState;
-    componentDidUpdate(prevProps: PopupProps, prevState: PopupState): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-    private renderMobile;
-    private renderMain;
-    private renderInPortal;
-    private renderWithoutPortal;
-    private updateAnchorElement;
-    private updateAbsoluteElement;
-    private addEventListeners;
-    private removeEventListeners;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private handleClick;
-    private handleFocus;
-    private handleBlur;
-    private calculateWidth;
-    private content;
-    private renderContent;
-    private prepareDataVisualState;
-    private resetLocation;
-    private renderChildren;
-    private refPopupContentElement;
-    private renderPin;
-    private handleLayoutEvent;
-    private delayUpdateLocation;
-    private cancelDelayedUpdateLocation;
-    private updateLocation;
-    private locationEquals;
-    private reorderPropsPositionsWithPriorityPos;
-    private getLocation;
-    private getPinnedPopupOffset;
-    private getRelativeShift;
-    private getCoordinates;
-    private getPinOffset;
-    private getHorizontalPosition;
-    private getVerticalPosition;
-}
-export {};
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import type { Nullable } from '../../typings/utility-types';
+import type { Priority } from '../ZIndex';
+import type { FocusEventType, MouseEventType } from '../../typings/event-types';
+import type { CommonProps } from '../CommonWrapper';
+import type { TGetRootNode } from '../../lib/rootNode';
+import type { ReactUIFeatureFlags } from '../../lib/featureFlagsContext';
+export declare const PopupNonPinnablePositions: string[];
+export declare const PopupPinnablePositions: string[];
+export declare const PopupPositions: readonly string[];
+export declare const DefaultPosition: string;
+export type PopupPositionsType = (typeof PopupPositions)[number];
+export type PopupPinnablePositionsType = (typeof PopupPinnablePositions)[number];
+export type ShortPopupPositionsType = 'top' | 'bottom' | 'left' | 'right';
+export declare const DUMMY_LOCATION: PopupLocation;
+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 Omit<CommonProps, 'children'>, PopupHandlerProps, Pick<HTMLAttributes<HTMLDivElement>, 'id'> {
+    /**
+     * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
+     */
+    anchorElement: React.ReactNode | Element;
+    /**
+     * Фон попапа и пина
+     */
+    backgroundColor?: React.CSSProperties['backgroundColor'];
+    borderColor?: React.CSSProperties['borderColor'];
+    children: React.ReactNode | (() => React.ReactNode);
+    /**
+     * Показывать ли пин
+     */
+    hasPin?: boolean;
+    /**
+     * Применять ли box-shadow на попапе. При false отключает границу на пине
+     */
+    hasShadow?: boolean;
+    disableAnimations?: boolean;
+    /**
+     * Отступ попапа от элемента
+     */
+    margin?: number;
+    maxWidth?: number | string;
+    /**
+     * Показан или скрыт попап
+     */
+    opened: boolean;
+    /**
+     * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
+     */
+    pinOffset?: number;
+    /**
+     * Сторона пина без учёта границы.
+     * Пин представляет собой равносторонний треугольник, высота от попапа
+     * до "носика" пина будет соответствовать формуле (size* √3)/2
+     */
+    pinSize?: number;
+    /**
+     * смещение попапа относительно родительского элемента
+     */
+    popupOffset?: number;
+    priority?: Priority;
+    /**
+     * С какой стороны показывать попап и край попапа,
+     * на котором будет отображаться пин
+     */
+    positions?: Readonly<PopupPositionsType[]>;
+    /**
+     * Приоритетная позиция попапа
+     */
+    pos?: PopupPositionsType | ShortPopupPositionsType;
+    /**
+     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
+     *
+     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
+     */
+    useWrapper?: boolean;
+    /**
+     * Игнорировать ли события hover/click
+     */
+    ignoreHover?: boolean;
+    width?: React.CSSProperties['width'];
+    minWidth?: React.CSSProperties['minWidth'];
+    /**
+     * При очередном рендере пытаться сохранить первоначальную позицию попапа
+     * (в том числе, когда он выходит за пределы экрана, но может быть проскролен в него).
+     *
+     * Нужен только для Tooltip. В остальных случаях позиция перестраивается автоматически.
+     * @see https://github.com/skbkontur/retail-ui/pull/1195
+     */
+    tryPreserveFirstRenderedPosition?: boolean;
+    withoutMobile?: boolean;
+    /** @ignore */
+    disablePortal?: boolean;
+    mobileOnCloseRequest?: () => void;
+    /**
+     * Возвращает текущую позицию попапа
+     */
+    onPositionChange?: (pos: PopupPositionsType, isFullyVisible: boolean) => void;
+}
+interface PopupLocation {
+    coordinates: {
+        left: number;
+        top: number;
+    };
+    position: PopupPositionsType;
+    isFullyVisible: boolean;
+}
+export interface PopupState {
+    location: Nullable<PopupLocation>;
+}
+export declare const PopupDataTids: {
+    readonly root: "Popup__root";
+    readonly content: "PopupContent";
+    readonly contentInner: "PopupContentInner";
+    readonly popupPin: "PopupPin__root";
+};
+export declare const PopupIds: {
+    root: "Popup__root";
+};
+type DefaultProps = Required<Pick<PopupProps, 'popupOffset' | 'hasPin' | 'hasShadow' | 'disablePortal' | 'disableAnimations' | 'useWrapper' | 'ignoreHover' | 'width' | 'priority'>>;
+export declare class Popup extends React.Component<PopupProps, PopupState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    static readonly defaultRootNode: null;
+    state: PopupState;
+    private theme;
+    featureFlags: ReactUIFeatureFlags;
+    private layoutEventsToken;
+    private locationUpdateId;
+    private lastPopupContentElement;
+    private isMobileLayout;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private refForTransition;
+    private hasAnchorElementListeners;
+    private rootId;
+    anchorElement: Nullable<Element>;
+    private absoluteParent;
+    componentDidMount(): void;
+    static getDerivedStateFromProps(props: Readonly<PopupProps>, state: PopupState): PopupState;
+    componentDidUpdate(prevProps: PopupProps, prevState: PopupState): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+    private renderMobile;
+    private renderMain;
+    private renderInPortal;
+    private renderWithoutPortal;
+    private updateAnchorElement;
+    private updateAbsoluteElement;
+    private addEventListeners;
+    private removeEventListeners;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleClick;
+    private handleFocus;
+    private handleBlur;
+    private calculateWidth;
+    private content;
+    private renderContent;
+    private prepareDataVisualState;
+    private resetLocation;
+    private renderChildren;
+    private refPopupContentElement;
+    private renderPin;
+    private handleLayoutEvent;
+    private delayUpdateLocation;
+    private cancelDelayedUpdateLocation;
+    private updateLocation;
+    private locationEquals;
+    private reorderPropsPositionsWithPriorityPos;
+    private getLocation;
+    private getPinnedPopupOffset;
+    private getRelativeShift;
+    private getCoordinates;
+    private getPinOffset;
+    private getHorizontalPosition;
+    private getVerticalPosition;
+}
+export {};

package/cjs/internal/Popup/Popup.js

@@ -1,6 +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.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"));
 var _globalObject = require("@skbkontur/global-object");
@@ -16,7 +15,6 @@ var _utils = require("../../lib/utils");
 var _client = require("../../lib/client");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
-var _SSRSafe = require("../../lib/SSRSafe");
 var _currentEnvironment = require("../../lib/currentEnvironment");
 
 var _CommonWrapper = require("../CommonWrapper");
@@ -33,10 +31,11 @@ var _featureFlagsContext = require("../../lib/featureFlagsContext");
 var _mergeRefs = require("../../lib/mergeRefs");
 var _getVisualStateDataAttributes = require("../CommonWrapper/utils/getVisualStateDataAttributes");
 
-var _PopupPin = require("./PopupPin");
+var _PopupPinNew = require("./PopupPinNew");
 
 var _PopupHelper = require("./PopupHelper");
-var _Popup2 = require("./Popup.styles");var _class, _Popup;
+var _Popup2 = require("./Popup.styles");
+var _PopupPin = require("./PopupPin");var _class, _Popup;
 
 var POPUP_BORDER_DEFAULT_COLOR = 'transparent';
 var TRANSITION_TIMEOUT = { enter: 0, exit: 200 };
@@ -145,49 +144,6 @@ var DUMMY_LOCATION = exports.DUMMY_LOCATION = {
 
 
 
-var PopupDataTids = exports.PopupDataTids = {
-  root: 'Popup__root',
-  content: 'PopupContent',
-  contentInner: 'PopupContentInner',
-  popupPin: 'PopupPin__root'
-};
-
-var PopupIds = exports.PopupIds = {
-  root: PopupDataTids.root
-};var
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -227,7 +183,16 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
 
 
 
+var PopupDataTids = exports.PopupDataTids = {
+  root: 'Popup__root',
+  content: 'PopupContent',
+  contentInner: 'PopupContentInner',
+  popupPin: 'PopupPin__root'
+};
 
+var PopupIds = exports.PopupIds = {
+  root: PopupDataTids.root
+};var
 
 
 
@@ -246,6 +211,7 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
 
 
 
+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.
 
 
 
@@ -274,6 +240,7 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
 
 
 
+
     refForTransition = /*#__PURE__*/_react.default.createRef();_this.
     hasAnchorElementListeners = false;_this.
     rootId = PopupIds.root + (0, _utils.getRandomID)();_this.
@@ -631,6 +598,15 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
 
 
 
+
+
+
+
+
+
+
+
+
 
 
 
@@ -818,7 +794,7 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
       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. Иначе есть вероятность
+      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) && (this.featureFlags.popupFixPinTearing ? /*#__PURE__*/_react.default.createElement(_PopupPinNew.PopupPinNew, { popupElement: this.lastPopupContentElement, popupPosition: positionName, size: pinSize || parseInt(this.theme.popupPinSize), offset: this.getPinOffset(position.align), backgroundColor: backgroundColor || this.theme.popupBackground }) : /*#__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 ( // если нужно сохранить первоначальную позицию и Попап целиком
       // находится в пределах вьюпорта (или может быть проскроллен в него)
@@ -889,34 +865,15 @@ Popup = exports.Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.
       default:
         throw new Error("Unexpected align '" + align + "'");
     }
-  };return Popup;}(_react.default.Component), _Popup.__KONTUR_REACT_UI__ = 'Popup', _Popup.displayName = 'Popup', _Popup.propTypes = { /**
-   * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
-   */anchorElement: _propTypes.default.oneOfType([(0, _SSRSafe.safePropTypesInstanceOf)(_globalObject.globalObject.HTMLElement), _propTypes.default.node]).isRequired, /**
-   * Фон попапа и пина
-   */backgroundColor: _propTypes.default.string, children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]), /**
-   * Показывать ли пин
-   */hasPin: _propTypes.default.bool, /**
-   * Применять ли box-shadow на попапе. При false отключает границу на пине
-   */hasShadow: _propTypes.default.bool, /**
-   * Отступ попапа от элемента
-   */margin: _propTypes.default.number, /**
-   * Показан или скрыт попап
-   */opened: _propTypes.default.bool, /**
-   * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
-   */pinOffset: _propTypes.default.number, /**
-   * Сторона пина без учёта границы.
-   * Пин представляет собой равносторонний треугольник, высота от попапа
-   * до "носика" пина будет соответствовать формуле (size* √3)/2
-   */pinSize: _propTypes.default.number, /**
-   * смещение попапа относительно родительского элемента
-   */popupOffset: _propTypes.default.number, /**
-   * С какой стороны показывать попап и край попапа,
-   * на котором будет отображаться пин
-   */positions: _propTypes.default.array, /**
-   * Приоритетная позиция попапа
-   */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, 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);
+  };return Popup;}(_react.default.Component), _Popup.__KONTUR_REACT_UI__ = 'Popup', _Popup.displayName = 'Popup', _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);