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

package/internal/Popup/PopupPin/PopupPin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","PopupHelper","styles","PopupDataTids","borderStyles","position","borderStyle","borderTopColor","borderBottomColor","borderLeftColor","borderRightColor","PopupPin","_React$Component","apply","arguments","_inheritsLoose","_proto","prototype","render","props","popupElement","options","getPinOptions","getElementAbsoluteRect","getPositionObject","popupPosition","size","offset","borderWidth","styleOuter","getOuterStyle","activeBorder","outerSize","borderColor","styleInner","getInnerStyle","backgroundColor","styleWrapper","getWrapperStyle","outerLeft","outerTop","createElement","popupPin","className","wrapper","style","getPopupOppositeDirection","popupDirection","direction","TypeError","left","top","_ref","_ref2","width","height","borderWitdth","_extends2","_extends3","_extends","_extends4","_extends5","popupRect","pinSize","pinOffset","bordersDelta","getPinLeftCoordinate","align","innerTop","innerLeft","getPinTopCoordinate","Error","pinHeight","Component","__KONTUR_REACT_UI__","displayName"],"sources":["PopupPin.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Nullable } from '../../typings/utility-types';\n\nimport type { PositionObject, Rect } from './PopupHelper';\nimport { PopupHelper } from './PopupHelper';\nimport { styles } from './PopupPin.styles';\nimport { PopupDataTids } from './Popup';\n\nconst borderStyles = {\n  position: 'absolute',\n  borderStyle: 'solid',\n  borderTopColor: 'transparent',\n  borderBottomColor: 'transparent',\n  borderLeftColor: 'transparent',\n  borderRightColor: 'transparent',\n};\n\ninterface Props {\n  /**\n   * Цвет фон пина\n   */\n  backgroundColor: string;\n  /**\n   * Цвет границы пина\n   */\n  borderColor: string;\n  /**\n   * Ширина границы пина\n   */\n  borderWidth: number;\n  /**\n   * Смещение пина от края попапа. Край задаётся в пропе position вторым словом\n   */\n  offset: number;\n  /**\n   * Ссылка на попап\n   */\n  popupElement: Nullable<Element>;\n  /**\n   * Позиция попапа, по которой будет вычислено положение пина\n   */\n  popupPosition: string;\n  /**\n   * Сторона пина без учёта границы.\n   * Пин представляет собой равносторонний треугольник, высота от попапа\n   * до \"носика\" пина будет соответствовать формуле (size* √3)/2\n   */\n  size: number;\n}\n\nexport class PopupPin extends React.Component<Props> {\n  public static __KONTUR_REACT_UI__ = 'PopupPin';\n  public static displayName = 'PopupPin';\n\n  public render() {\n    if (!this.props.popupElement) {\n      return null;\n    }\n\n    const options = this.getPinOptions(\n      PopupHelper.getElementAbsoluteRect(this.props.popupElement),\n      PopupHelper.getPositionObject(this.props.popupPosition),\n      this.props.size,\n      this.props.offset,\n      this.props.borderWidth,\n    );\n\n    const styleOuter: React.CSSProperties = this.getOuterStyle(\n      options.activeBorder,\n      options.outerSize,\n      this.props.borderColor,\n    );\n\n    const styleInner: React.CSSProperties = this.getInnerStyle(\n      options.activeBorder,\n      this.props.size,\n      this.props.backgroundColor,\n    );\n\n    const styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);\n\n    return (\n      <div data-tid={PopupDataTids.popupPin} className={styles.wrapper()} style={styleWrapper}>\n        <div style={styleOuter}>\n          <div style={styleInner} />\n        </div>\n      </div>\n    );\n  }\n\n  private getPopupOppositeDirection(): 'bottom' | 'top' | 'left' | 'right' {\n    const popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;\n    switch (popupDirection) {\n      case 'top':\n        return 'bottom';\n      case 'bottom':\n        return 'top';\n      case 'left':\n        return 'right';\n      case 'right':\n        return 'left';\n      default:\n        throw new TypeError('Unknown direction ' + popupDirection);\n    }\n  }\n\n  private getWrapperStyle(left: number, top: number, borderWidth: number) {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          [direction]: -borderWidth + 'px',\n          left: left + 'px',\n          width: borderWidth * 2 + 'px',\n          height: borderWidth + 'px',\n        };\n      case 'left':\n      case 'right':\n        return {\n          [direction]: -borderWidth + 'px',\n          top: top + 'px',\n          height: borderWidth * 2 + 'px',\n          width: borderWidth + 'px',\n        };\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getOuterStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 'px',\n          left: '0px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      case 'left':\n      case 'right':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 'px',\n          top: '0px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getInnerStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 2 + 'px',\n          left: -borderWitdth + 'px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      case 'left':\n      case 'right':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 2 + 'px',\n          top: -borderWitdth + 'px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getPinOptions(\n    popupRect: Rect,\n    popupPosition: PositionObject,\n    pinSize: number,\n    pinOffset: number,\n    borderWidth: number,\n  ) {\n    const bordersDelta = 2 * borderWidth;\n    const outerSize = pinSize + bordersDelta;\n\n    switch (popupPosition.direction) {\n      case 'top':\n        return {\n          outerTop: popupRect.height,\n          outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          innerTop: -outerSize,\n          innerLeft: -outerSize + bordersDelta,\n          activeBorder: 'Top',\n          outerSize,\n        };\n      case 'bottom':\n        return {\n          outerTop: -2 * outerSize,\n          outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          innerTop: -outerSize + 2 * bordersDelta,\n          innerLeft: -outerSize + bordersDelta,\n          activeBorder: 'Bottom',\n          outerSize,\n        };\n      case 'left':\n        return {\n          outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          outerLeft: popupRect.width,\n          innerTop: -outerSize + bordersDelta,\n          innerLeft: -outerSize,\n          activeBorder: 'Left',\n          outerSize,\n        };\n      case 'right':\n        return {\n          outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          outerLeft: -2 * outerSize,\n          innerTop: -outerSize + bordersDelta,\n          innerLeft: -outerSize + 2 * bordersDelta,\n          activeBorder: 'Right',\n          outerSize,\n        };\n      default:\n        throw new Error('Direction must be one of top, right, bottom, left');\n    }\n  }\n\n  private getPinTopCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\n    switch (align) {\n      case 'top':\n        return pinOffset;\n      case 'middle':\n        return popupRect.height / 2 - pinHeight;\n      case 'bottom':\n        return popupRect.height - pinOffset - 2 * pinHeight;\n      default:\n        throw new Error(`Unexpected align '${align}'`);\n    }\n  }\n\n  private getPinLeftCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\n    switch (align) {\n      case 'left':\n        return pinOffset;\n      case 'center':\n        return popupRect.width / 2 - pinHeight;\n      case 'right':\n        return popupRect.width - pinOffset - 2 * pinHeight;\n      default:\n        throw new Error(`Unexpected align '${align}'`);\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","PopupHelper","styles","PopupDataTids","borderStyles","position","borderStyle","borderTopColor","borderBottomColor","borderLeftColor","borderRightColor","PopupPin","_React$Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","props","popupElement","options","getPinOptions","getElementAbsoluteRect","getPositionObject","popupPosition","size","offset","borderWidth","styleOuter","getOuterStyle","activeBorder","outerSize","borderColor","styleInner","getInnerStyle","backgroundColor","styleWrapper","getWrapperStyle","outerLeft","outerTop","createElement","popupPin","className","wrapper","style","getPopupOppositeDirection","popupDirection","direction","TypeError","left","top","_defineProperty","borderWitdth","_objectSpread","popupRect","pinSize","pinOffset","bordersDelta","height","getPinLeftCoordinate","align","innerTop","innerLeft","getPinTopCoordinate","width","Error","pinHeight","concat","Component","__KONTUR_REACT_UI__","displayName"],"sources":["PopupPin.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Nullable } from '../../typings/utility-types';\n\nimport type { PositionObject, Rect } from './PopupHelper';\nimport { PopupHelper } from './PopupHelper';\nimport { styles } from './PopupPin.styles';\nimport { PopupDataTids } from './Popup';\n\nconst borderStyles = {\n  position: 'absolute',\n  borderStyle: 'solid',\n  borderTopColor: 'transparent',\n  borderBottomColor: 'transparent',\n  borderLeftColor: 'transparent',\n  borderRightColor: 'transparent',\n};\n\ninterface Props {\n  /**\n   * Цвет фон пина\n   */\n  backgroundColor: string;\n  /**\n   * Цвет границы пина\n   */\n  borderColor: string;\n  /**\n   * Ширина границы пина\n   */\n  borderWidth: number;\n  /**\n   * Смещение пина от края попапа. Край задаётся в пропе position вторым словом\n   */\n  offset: number;\n  /**\n   * Ссылка на попап\n   */\n  popupElement: Nullable<Element>;\n  /**\n   * Позиция попапа, по которой будет вычислено положение пина\n   */\n  popupPosition: string;\n  /**\n   * Сторона пина без учёта границы.\n   * Пин представляет собой равносторонний треугольник, высота от попапа\n   * до \"носика\" пина будет соответствовать формуле (size* √3)/2\n   */\n  size: number;\n}\n\nexport class PopupPin extends React.Component<Props> {\n  public static __KONTUR_REACT_UI__ = 'PopupPin';\n  public static displayName = 'PopupPin';\n\n  public render() {\n    if (!this.props.popupElement) {\n      return null;\n    }\n\n    const options = this.getPinOptions(\n      PopupHelper.getElementAbsoluteRect(this.props.popupElement),\n      PopupHelper.getPositionObject(this.props.popupPosition),\n      this.props.size,\n      this.props.offset,\n      this.props.borderWidth,\n    );\n\n    const styleOuter: React.CSSProperties = this.getOuterStyle(\n      options.activeBorder,\n      options.outerSize,\n      this.props.borderColor,\n    );\n\n    const styleInner: React.CSSProperties = this.getInnerStyle(\n      options.activeBorder,\n      this.props.size,\n      this.props.backgroundColor,\n    );\n\n    const styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);\n\n    return (\n      <div data-tid={PopupDataTids.popupPin} className={styles.wrapper()} style={styleWrapper}>\n        <div style={styleOuter}>\n          <div style={styleInner} />\n        </div>\n      </div>\n    );\n  }\n\n  private getPopupOppositeDirection(): 'bottom' | 'top' | 'left' | 'right' {\n    const popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;\n    switch (popupDirection) {\n      case 'top':\n        return 'bottom';\n      case 'bottom':\n        return 'top';\n      case 'left':\n        return 'right';\n      case 'right':\n        return 'left';\n      default:\n        throw new TypeError('Unknown direction ' + popupDirection);\n    }\n  }\n\n  private getWrapperStyle(left: number, top: number, borderWidth: number) {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          [direction]: -borderWidth + 'px',\n          left: left + 'px',\n          width: borderWidth * 2 + 'px',\n          height: borderWidth + 'px',\n        };\n      case 'left':\n      case 'right':\n        return {\n          [direction]: -borderWidth + 'px',\n          top: top + 'px',\n          height: borderWidth * 2 + 'px',\n          width: borderWidth + 'px',\n        };\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getOuterStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 'px',\n          left: '0px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      case 'left':\n      case 'right':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 'px',\n          top: '0px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getInnerStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\n    const direction = this.getPopupOppositeDirection();\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 2 + 'px',\n          left: -borderWitdth + 'px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      case 'left':\n      case 'right':\n        return {\n          ...borderStyles,\n          [direction]: -borderWitdth + 2 + 'px',\n          top: -borderWitdth + 'px',\n          borderWidth: borderWitdth + 'px',\n          ['border' + activeBorder + 'Color']: borderColor,\n        } as React.CSSProperties;\n      default:\n        throw new TypeError('Unknown direction ' + direction);\n    }\n  }\n\n  private getPinOptions(\n    popupRect: Rect,\n    popupPosition: PositionObject,\n    pinSize: number,\n    pinOffset: number,\n    borderWidth: number,\n  ) {\n    const bordersDelta = 2 * borderWidth;\n    const outerSize = pinSize + bordersDelta;\n\n    switch (popupPosition.direction) {\n      case 'top':\n        return {\n          outerTop: popupRect.height,\n          outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          innerTop: -outerSize,\n          innerLeft: -outerSize + bordersDelta,\n          activeBorder: 'Top',\n          outerSize,\n        };\n      case 'bottom':\n        return {\n          outerTop: -2 * outerSize,\n          outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          innerTop: -outerSize + 2 * bordersDelta,\n          innerLeft: -outerSize + bordersDelta,\n          activeBorder: 'Bottom',\n          outerSize,\n        };\n      case 'left':\n        return {\n          outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          outerLeft: popupRect.width,\n          innerTop: -outerSize + bordersDelta,\n          innerLeft: -outerSize,\n          activeBorder: 'Left',\n          outerSize,\n        };\n      case 'right':\n        return {\n          outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n          outerLeft: -2 * outerSize,\n          innerTop: -outerSize + bordersDelta,\n          innerLeft: -outerSize + 2 * bordersDelta,\n          activeBorder: 'Right',\n          outerSize,\n        };\n      default:\n        throw new Error('Direction must be one of top, right, bottom, left');\n    }\n  }\n\n  private getPinTopCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\n    switch (align) {\n      case 'top':\n        return pinOffset;\n      case 'middle':\n        return popupRect.height / 2 - pinHeight;\n      case 'bottom':\n        return popupRect.height - pinOffset - 2 * pinHeight;\n      default:\n        throw new Error(`Unexpected align '${align}'`);\n    }\n  }\n\n  private getPinLeftCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\n    switch (align) {\n      case 'left':\n        return pinOffset;\n      case 'center':\n        return popupRect.width / 2 - pinHeight;\n      case 'right':\n        return popupRect.width - pinOffset - 2 * pinHeight;\n      default:\n        throw new Error(`Unexpected align '${align}'`);\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/internal/Popup/PopupPin.styles/PopupPin.styles.js

@@ -1,8 +1,8 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   wrapper: function wrapper() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      position: absolute;\n      pointer-events: none;\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      overflow: hidden;\n      position: absolute;\n      pointer-events: none;\n    "])));
   }
 });

package/internal/Popup/PopupPin.styles/PopupPin.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","wrapper","_templateObject","_taggedTemplateLiteralLoose"],"sources":["PopupPin.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  wrapper() {\n    return css`\n      overflow: hidden;\n      position: absolute;\n      pointer-events: none;\n    `;\n  },\n});\n"],"mappings":"oHAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;EAKZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","wrapper","_templateObject","_taggedTemplateLiteral"],"sources":["PopupPin.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  wrapper() {\n    return css`\n      overflow: hidden;\n      position: absolute;\n      pointer-events: none;\n    `;\n  },\n});\n"],"mappings":"0GAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,sBAAA;;;;;EAKZ;AACF,CAAC,CAAC","ignoreList":[]}

package/internal/Popup/PopupPinNew/PopupPinNew.js

@@ -1,4 +1,13 @@
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 import React from 'react';
 import { cx } from "../../../lib/theming/Emotion";
 import { PopupHelper } from "../PopupHelper";
@@ -7,12 +16,12 @@ import { PopupDataTids } from "../Popup";
 export var PopupPinNew = /*#__PURE__*/function (_React$Component) {
   function PopupPinNew() {
     var _this;
+    _classCallCheck(this, PopupPinNew);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _callSuper(this, PopupPinNew, [].concat(args));
     _this.getPinInlineStyle = function (left, top) {
-      var _ref, _ref2;
       var direction = _this.getPopupOppositeDirection();
       if (!direction) {
         return;
@@ -25,12 +34,12 @@ export var PopupPinNew = /*#__PURE__*/function (_React$Component) {
       switch (direction) {
         case 'top':
         case 'bottom':
-          return _ref = {}, _ref[direction] = -_this.props.size + 'px', _ref.left = correctedLeft + 'px', _ref.width = correctedSize * 2 + 'px', _ref.height = correctedSize + 'px', _ref.backgroundColor = _this.props.backgroundColor, _ref;
+          return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, direction, -_this.props.size + 'px'), "left", correctedLeft + 'px'), "width", correctedSize * 2 + 'px'), "height", correctedSize + 'px'), "backgroundColor", _this.props.backgroundColor);
         case 'left':
         case 'right':
-          return _ref2 = {}, _ref2[direction] = -_this.props.size + 'px', _ref2.top = correctedTop + 'px', _ref2.height = correctedSize * 2 + 'px', _ref2.width = correctedSize + 'px', _ref2.backgroundColor = _this.props.backgroundColor, _ref2;
+          return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, direction, -_this.props.size + 'px'), "top", correctedTop + 'px'), "height", correctedSize * 2 + 'px'), "width", correctedSize + 'px'), "backgroundColor", _this.props.backgroundColor);
         default:
-          console.error("Can't get inline style: invalid direction '" + direction + "'. Returning default");
+          console.error("Can't get inline style: invalid direction '".concat(direction, "'. Returning default"));
       }
     };
     _this.getPinCoordinates = function (popupElement) {
@@ -60,7 +69,7 @@ export var PopupPinNew = /*#__PURE__*/function (_React$Component) {
             left: -2 * _this.props.size
           };
         default:
-          console.error("Can't get coordinate: invalid direction '" + direction + "'.");
+          console.error("Can't get coordinate: invalid direction '".concat(direction, "'."));
       }
     };
     _this.getPinTopCoordinate = function (popupRect, align) {
@@ -72,7 +81,7 @@ export var PopupPinNew = /*#__PURE__*/function (_React$Component) {
         case 'bottom':
           return popupRect.height - _this.props.offset - 2 * _this.props.size;
         default:
-          console.error("Can't get coordinate: invalid align '" + align + "'.");
+          console.error("Can't get coordinate: invalid align '".concat(align, "'."));
       }
     };
     _this.getPinLeftCoordinate = function (popupRect, align) {
@@ -84,7 +93,7 @@ export var PopupPinNew = /*#__PURE__*/function (_React$Component) {
         case 'right':
           return popupRect.width - _this.props.offset - 2 * _this.props.size;
         default:
-          console.error("Can't get coordinate: invalid align '" + align + "'.");
+          console.error("Can't get coordinate: invalid align '".concat(align, "'."));
       }
     };
     _this.getPinDirectionalStyle = function () {
@@ -98,49 +107,52 @@ export var PopupPinNew = /*#__PURE__*/function (_React$Component) {
         case 'right':
           return styles.pinRight();
         default:
-          console.error("Can't get directional style: invalid direction '" + _this.positionObject.direction + "'.");
+          console.error("Can't get directional style: invalid direction '".concat(_this.positionObject.direction, "'."));
       }
     };
     return _this;
   }
-  _inheritsLoose(PopupPinNew, _React$Component);
-  var _proto = PopupPinNew.prototype;
-  _proto.render = function render() {
-    if (!this.props.popupElement) {
-      return null;
-    }
-    this.positionObject = PopupHelper.getPositionObject(this.props.popupPosition);
-    var coords = this.getPinCoordinates(this.props.popupElement);
-    if (!coords || !coords.left || !coords.top) {
-      return null;
-    }
-    var inlineStyle = this.getPinInlineStyle(coords.left, coords.top);
-    var directionalStyle = this.getPinDirectionalStyle();
-    if (!inlineStyle || !directionalStyle) {
-      return null;
+  _inherits(PopupPinNew, _React$Component);
+  return _createClass(PopupPinNew, [{
+    key: "render",
+    value: function render() {
+      if (!this.props.popupElement) {
+        return null;
+      }
+      this.positionObject = PopupHelper.getPositionObject(this.props.popupPosition);
+      var coords = this.getPinCoordinates(this.props.popupElement);
+      if (!coords || !coords.left || !coords.top) {
+        return null;
+      }
+      var inlineStyle = this.getPinInlineStyle(coords.left, coords.top);
+      var directionalStyle = this.getPinDirectionalStyle();
+      if (!inlineStyle || !directionalStyle) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        "data-tid": PopupDataTids.popupPin,
+        className: cx(styles.pin(), directionalStyle),
+        style: inlineStyle
+      });
     }
-    return /*#__PURE__*/React.createElement("div", {
-      "data-tid": PopupDataTids.popupPin,
-      className: cx(styles.pin(), directionalStyle),
-      style: inlineStyle
-    });
-  };
-  _proto.getPopupOppositeDirection = function getPopupOppositeDirection() {
-    var popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;
-    switch (popupDirection) {
-      case 'top':
-        return 'bottom';
-      case 'bottom':
-        return 'top';
-      case 'left':
-        return 'right';
-      case 'right':
-        return 'left';
-      default:
-        console.error("Can't get opposite direction: invalid direction '" + popupDirection + "'");
+  }, {
+    key: "getPopupOppositeDirection",
+    value: function getPopupOppositeDirection() {
+      var popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;
+      switch (popupDirection) {
+        case 'top':
+          return 'bottom';
+        case 'bottom':
+          return 'top';
+        case 'left':
+          return 'right';
+        case 'right':
+          return 'left';
+        default:
+          console.error("Can't get opposite direction: invalid direction '".concat(popupDirection, "'"));
+      }
     }
-  };
-  return PopupPinNew;
+  }]);
 }(React.Component);
 PopupPinNew.__KONTUR_REACT_UI__ = 'PopupPin';
 PopupPinNew.displayName = 'PopupPin';

package/internal/Popup/PopupPinNew/PopupPinNew.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cx","PopupHelper","styles","PopupDataTids","PopupPinNew","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getPinInlineStyle","left","top","_ref","_ref2","direction","getPopupOppositeDirection","correctedLeft","correctedTop","correctedSize","props","size","width","height","backgroundColor","console","error","getPinCoordinates","popupElement","popupRect","getElementAbsoluteRect","_this$positionObject","positionObject","align","getPinLeftCoordinate","getPinTopCoordinate","offset","getPinDirectionalStyle","pinTop","pinBottom","pinLeft","pinRight","_inheritsLoose","_proto","prototype","render","getPositionObject","popupPosition","coords","inlineStyle","directionalStyle","createElement","popupPin","className","pin","style","popupDirection","Component","__KONTUR_REACT_UI__","displayName"],"sources":["PopupPinNew.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport type { PositionObject, Rect } from './PopupHelper';\nimport { PopupHelper } from './PopupHelper';\nimport { styles } from './PopupPinNew.styles';\nimport { PopupDataTids } from './Popup';\n\ninterface PopupPinProps {\n  /** Цвет фона пина */\n  backgroundColor: string;\n\n  /** Смещение пина от края попапа. Край задаётся в пропе position вторым словом */\n  offset: number;\n\n  /** Ссылка на попап */\n  popupElement?: Nullable<Element>;\n\n  /** Позиция попапа, по которой будет вычислено положение пина */\n  popupPosition: string;\n\n  /**\n   * Сторона пина без учёта границы.\n   * Пин представляет собой равносторонний треугольник, высота от попапа\n   * до \"носика\" пина будет соответствовать формуле (size* √3)/2\n   */\n  size: number;\n}\n\nexport class PopupPinNew extends React.Component<PopupPinProps> {\n  public static __KONTUR_REACT_UI__ = 'PopupPin';\n  public static displayName = 'PopupPin';\n\n  private positionObject!: PositionObject;\n\n  public render() {\n    if (!this.props.popupElement) {\n      return null;\n    }\n\n    this.positionObject = PopupHelper.getPositionObject(this.props.popupPosition);\n\n    const coords = this.getPinCoordinates(this.props.popupElement);\n    if (!coords || !coords.left || !coords.top) {\n      return null;\n    }\n\n    const inlineStyle = this.getPinInlineStyle(coords.left, coords.top);\n    const directionalStyle = this.getPinDirectionalStyle();\n    if (!inlineStyle || !directionalStyle) {\n      return null;\n    }\n\n    return (\n      <div data-tid={PopupDataTids.popupPin} className={cx(styles.pin(), directionalStyle)} style={inlineStyle}></div>\n    );\n  }\n\n  private getPopupOppositeDirection() {\n    const popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;\n    switch (popupDirection) {\n      case 'top':\n        return 'bottom';\n      case 'bottom':\n        return 'top';\n      case 'left':\n        return 'right';\n      case 'right':\n        return 'left';\n      default:\n        console.error(`Can't get opposite direction: invalid direction '${popupDirection}'`);\n    }\n  }\n\n  private getPinInlineStyle = (left: number, top: number) => {\n    const direction = this.getPopupOppositeDirection();\n    if (!direction) {\n      return;\n    }\n\n    // Добавляем запас в 1px, чтобы пофиксить случайные отделения пинов\n    const correctedLeft = left - 1;\n    const correctedTop = top - 1;\n    const correctedSize = this.props.size + 1;\n\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          [direction]: -this.props.size + 'px',\n          left: correctedLeft + 'px',\n          width: correctedSize * 2 + 'px',\n          height: correctedSize + 'px',\n          backgroundColor: this.props.backgroundColor,\n        };\n      case 'left':\n      case 'right':\n        return {\n          [direction]: -this.props.size + 'px',\n          top: correctedTop + 'px',\n          height: correctedSize * 2 + 'px',\n          width: correctedSize + 'px',\n          backgroundColor: this.props.backgroundColor,\n        };\n      default:\n        console.error(`Can't get inline style: invalid direction '${direction}'. Returning default`);\n    }\n  };\n\n  private getPinCoordinates = (popupElement: Element) => {\n    const popupRect = PopupHelper.getElementAbsoluteRect(popupElement);\n    const { direction, align } = this.positionObject;\n    switch (direction) {\n      case 'top':\n        return {\n          top: popupRect.height,\n          left: this.getPinLeftCoordinate(popupRect, align),\n        };\n      case 'bottom':\n        return {\n          top: -2 * this.props.size,\n          left: this.getPinLeftCoordinate(popupRect, align),\n        };\n      case 'left':\n        return {\n          top: this.getPinTopCoordinate(popupRect, align),\n          left: popupRect.width,\n        };\n      case 'right':\n        return {\n          top: this.getPinTopCoordinate(popupRect, align),\n          left: -2 * this.props.size,\n        };\n      default:\n        console.error(`Can't get coordinate: invalid direction '${direction}'.`);\n    }\n  };\n\n  private getPinTopCoordinate = (popupRect: Rect, align: string) => {\n    switch (align) {\n      case 'top':\n        return this.props.offset;\n      case 'middle':\n        return popupRect.height / 2 - this.props.size;\n      case 'bottom':\n        return popupRect.height - this.props.offset - 2 * this.props.size;\n      default:\n        console.error(`Can't get coordinate: invalid align '${align}'.`);\n    }\n  };\n\n  private getPinLeftCoordinate = (popupRect: Rect, align: string) => {\n    switch (align) {\n      case 'left':\n        return this.props.offset;\n      case 'center':\n        return popupRect.width / 2 - this.props.size;\n      case 'right':\n        return popupRect.width - this.props.offset - 2 * this.props.size;\n      default:\n        console.error(`Can't get coordinate: invalid align '${align}'.`);\n    }\n  };\n\n  private getPinDirectionalStyle = () => {\n    switch (this.positionObject.direction) {\n      case 'top':\n        return styles.pinTop();\n      case 'bottom':\n        return styles.pinBottom();\n      case 'left':\n        return styles.pinLeft();\n      case 'right':\n        return styles.pinRight();\n      default:\n        console.error(`Can't get directional style: invalid direction '${this.positionObject.direction}'.`);\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","cx","PopupHelper","styles","PopupDataTids","PopupPinNew","_React$Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","getPinInlineStyle","left","top","direction","getPopupOppositeDirection","correctedLeft","correctedTop","correctedSize","props","size","_defineProperty","backgroundColor","console","error","getPinCoordinates","popupElement","popupRect","getElementAbsoluteRect","_this$positionObject","positionObject","align","height","getPinLeftCoordinate","getPinTopCoordinate","width","offset","getPinDirectionalStyle","pinTop","pinBottom","pinLeft","pinRight","_inherits","_createClass","key","value","render","getPositionObject","popupPosition","coords","inlineStyle","directionalStyle","createElement","popupPin","className","pin","style","popupDirection","Component","__KONTUR_REACT_UI__","displayName"],"sources":["PopupPinNew.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport type { PositionObject, Rect } from './PopupHelper';\nimport { PopupHelper } from './PopupHelper';\nimport { styles } from './PopupPinNew.styles';\nimport { PopupDataTids } from './Popup';\n\ninterface PopupPinProps {\n  /** Цвет фона пина */\n  backgroundColor: string;\n\n  /** Смещение пина от края попапа. Край задаётся в пропе position вторым словом */\n  offset: number;\n\n  /** Ссылка на попап */\n  popupElement?: Nullable<Element>;\n\n  /** Позиция попапа, по которой будет вычислено положение пина */\n  popupPosition: string;\n\n  /**\n   * Сторона пина без учёта границы.\n   * Пин представляет собой равносторонний треугольник, высота от попапа\n   * до \"носика\" пина будет соответствовать формуле (size* √3)/2\n   */\n  size: number;\n}\n\nexport class PopupPinNew extends React.Component<PopupPinProps> {\n  public static __KONTUR_REACT_UI__ = 'PopupPin';\n  public static displayName = 'PopupPin';\n\n  private positionObject!: PositionObject;\n\n  public render() {\n    if (!this.props.popupElement) {\n      return null;\n    }\n\n    this.positionObject = PopupHelper.getPositionObject(this.props.popupPosition);\n\n    const coords = this.getPinCoordinates(this.props.popupElement);\n    if (!coords || !coords.left || !coords.top) {\n      return null;\n    }\n\n    const inlineStyle = this.getPinInlineStyle(coords.left, coords.top);\n    const directionalStyle = this.getPinDirectionalStyle();\n    if (!inlineStyle || !directionalStyle) {\n      return null;\n    }\n\n    return (\n      <div data-tid={PopupDataTids.popupPin} className={cx(styles.pin(), directionalStyle)} style={inlineStyle}></div>\n    );\n  }\n\n  private getPopupOppositeDirection() {\n    const popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;\n    switch (popupDirection) {\n      case 'top':\n        return 'bottom';\n      case 'bottom':\n        return 'top';\n      case 'left':\n        return 'right';\n      case 'right':\n        return 'left';\n      default:\n        console.error(`Can't get opposite direction: invalid direction '${popupDirection}'`);\n    }\n  }\n\n  private getPinInlineStyle = (left: number, top: number) => {\n    const direction = this.getPopupOppositeDirection();\n    if (!direction) {\n      return;\n    }\n\n    // Добавляем запас в 1px, чтобы пофиксить случайные отделения пинов\n    const correctedLeft = left - 1;\n    const correctedTop = top - 1;\n    const correctedSize = this.props.size + 1;\n\n    switch (direction) {\n      case 'top':\n      case 'bottom':\n        return {\n          [direction]: -this.props.size + 'px',\n          left: correctedLeft + 'px',\n          width: correctedSize * 2 + 'px',\n          height: correctedSize + 'px',\n          backgroundColor: this.props.backgroundColor,\n        };\n      case 'left':\n      case 'right':\n        return {\n          [direction]: -this.props.size + 'px',\n          top: correctedTop + 'px',\n          height: correctedSize * 2 + 'px',\n          width: correctedSize + 'px',\n          backgroundColor: this.props.backgroundColor,\n        };\n      default:\n        console.error(`Can't get inline style: invalid direction '${direction}'. Returning default`);\n    }\n  };\n\n  private getPinCoordinates = (popupElement: Element) => {\n    const popupRect = PopupHelper.getElementAbsoluteRect(popupElement);\n    const { direction, align } = this.positionObject;\n    switch (direction) {\n      case 'top':\n        return {\n          top: popupRect.height,\n          left: this.getPinLeftCoordinate(popupRect, align),\n        };\n      case 'bottom':\n        return {\n          top: -2 * this.props.size,\n          left: this.getPinLeftCoordinate(popupRect, align),\n        };\n      case 'left':\n        return {\n          top: this.getPinTopCoordinate(popupRect, align),\n          left: popupRect.width,\n        };\n      case 'right':\n        return {\n          top: this.getPinTopCoordinate(popupRect, align),\n          left: -2 * this.props.size,\n        };\n      default:\n        console.error(`Can't get coordinate: invalid direction '${direction}'.`);\n    }\n  };\n\n  private getPinTopCoordinate = (popupRect: Rect, align: string) => {\n    switch (align) {\n      case 'top':\n        return this.props.offset;\n      case 'middle':\n        return popupRect.height / 2 - this.props.size;\n      case 'bottom':\n        return popupRect.height - this.props.offset - 2 * this.props.size;\n      default:\n        console.error(`Can't get coordinate: invalid align '${align}'.`);\n    }\n  };\n\n  private getPinLeftCoordinate = (popupRect: Rect, align: string) => {\n    switch (align) {\n      case 'left':\n        return this.props.offset;\n      case 'center':\n        return popupRect.width / 2 - this.props.size;\n      case 'right':\n        return popupRect.width - this.props.offset - 2 * this.props.size;\n      default:\n        console.error(`Can't get coordinate: invalid align '${align}'.`);\n    }\n  };\n\n  private getPinDirectionalStyle = () => {\n    switch (this.positionObject.direction) {\n      case 'top':\n        return styles.pinTop();\n      case 'bottom':\n        return styles.pinBottom();\n      case 'left':\n        return styles.pinLeft();\n      case 'right':\n        return styles.pinRight();\n      default:\n        console.error(`Can't get directional style: invalid direction '${this.positionObject.direction}'.`);\n    }\n  };\n}\n"],"mappings":"ytBAAA,OAAOA,KAAK,MAAM,OAAO;;;AAGzB,SAASC,EAAE,QAAQ,2BAA2B;;;AAG9C,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,aAAa,QAAQ,SAAS;;;;;;;;;;;;;;;;;;;;;;;AAuBvC,WAAaC,WAAW,0BAAAC,gBAAA,YAAAD,YAAA,OAAAE,KAAA,CAAAC,eAAA,OAAAH,WAAA,WAAAI,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAP,KAAA,GAAAQ,UAAA,OAAAV,WAAA,KAAAW,MAAA,CAAAJ,IAAA,GAAAL,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6CdU,iBAAiB,GAAG,UAACC,IAAY,EAAEC,GAAW,EAAK;MACzD,IAAMC,SAAS,GAAGb,KAAA,CAAKc,yBAAyB,CAAC,CAAC;MAClD,IAAI,CAACD,SAAS,EAAE;QACd;MACF;;MAEA;MACA,IAAME,aAAa,GAAGJ,IAAI,GAAG,CAAC;MAC9B,IAAMK,YAAY,GAAGJ,GAAG,GAAG,CAAC;MAC5B,IAAMK,aAAa,GAAGjB,KAAA,CAAKkB,KAAK,CAACC,IAAI,GAAG,CAAC;;MAEzC,QAAQN,SAAS;QACf,KAAK,KAAK;QACV,KAAK,QAAQ;UACX,OAAAO,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA;UACGP,SAAS,EAAG,CAACb,KAAA,CAAKkB,KAAK,CAACC,IAAI,GAAG,IAAI;UAC9BJ,aAAa,GAAG,IAAI;UACnBE,aAAa,GAAG,CAAC,GAAG,IAAI;UACvBA,aAAa,GAAG,IAAI;UACXjB,KAAA,CAAKkB,KAAK,CAACG,eAAe;;QAE/C,KAAK,MAAM;QACX,KAAK,OAAO;UACV,OAAAD,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA;UACGP,SAAS,EAAG,CAACb,KAAA,CAAKkB,KAAK,CAACC,IAAI,GAAG,IAAI;UAC/BH,YAAY,GAAG,IAAI;UAChBC,aAAa,GAAG,CAAC,GAAG,IAAI;UACzBA,aAAa,GAAG,IAAI;UACVjB,KAAA,CAAKkB,KAAK,CAACG,eAAe;;QAE/C;UACEC,OAAO,CAACC,KAAK,+CAAAd,MAAA,CAA+CI,SAAS,yBAAsB,CAAC;MAChG;IACF,CAAC,CAAAb,KAAA;;IAEOwB,iBAAiB,GAAG,UAACC,YAAqB,EAAK;MACrD,IAAMC,SAAS,GAAG/B,WAAW,CAACgC,sBAAsB,CAACF,YAAY,CAAC;MAClE,IAAAG,oBAAA,GAA6B5B,KAAA,CAAK6B,cAAc,CAAxChB,SAAS,GAAAe,oBAAA,CAATf,SAAS,CAAEiB,KAAK,GAAAF,oBAAA,CAALE,KAAK;MACxB,QAAQjB,SAAS;QACf,KAAK,KAAK;UACR,OAAO;YACLD,GAAG,EAAEc,SAAS,CAACK,MAAM;YACrBpB,IAAI,EAAEX,KAAA,CAAKgC,oBAAoB,CAACN,SAAS,EAAEI,KAAK;UAClD,CAAC;QACH,KAAK,QAAQ;UACX,OAAO;YACLlB,GAAG,EAAE,CAAC,CAAC,GAAGZ,KAAA,CAAKkB,KAAK,CAACC,IAAI;YACzBR,IAAI,EAAEX,KAAA,CAAKgC,oBAAoB,CAACN,SAAS,EAAEI,KAAK;UAClD,CAAC;QACH,KAAK,MAAM;UACT,OAAO;YACLlB,GAAG,EAAEZ,KAAA,CAAKiC,mBAAmB,CAACP,SAAS,EAAEI,KAAK,CAAC;YAC/CnB,IAAI,EAAEe,SAAS,CAACQ;UAClB,CAAC;QACH,KAAK,OAAO;UACV,OAAO;YACLtB,GAAG,EAAEZ,KAAA,CAAKiC,mBAAmB,CAACP,SAAS,EAAEI,KAAK,CAAC;YAC/CnB,IAAI,EAAE,CAAC,CAAC,GAAGX,KAAA,CAAKkB,KAAK,CAACC;UACxB,CAAC;QACH;UACEG,OAAO,CAACC,KAAK,6CAAAd,MAAA,CAA6CI,SAAS,OAAI,CAAC;MAC5E;IACF,CAAC,CAAAb,KAAA;;IAEOiC,mBAAmB,GAAG,UAACP,SAAe,EAAEI,KAAa,EAAK;MAChE,QAAQA,KAAK;QACX,KAAK,KAAK;UACR,OAAO9B,KAAA,CAAKkB,KAAK,CAACiB,MAAM;QAC1B,KAAK,QAAQ;UACX,OAAOT,SAAS,CAACK,MAAM,GAAG,CAAC,GAAG/B,KAAA,CAAKkB,KAAK,CAACC,IAAI;QAC/C,KAAK,QAAQ;UACX,OAAOO,SAAS,CAACK,MAAM,GAAG/B,KAAA,CAAKkB,KAAK,CAACiB,MAAM,GAAG,CAAC,GAAGnC,KAAA,CAAKkB,KAAK,CAACC,IAAI;QACnE;UACEG,OAAO,CAACC,KAAK,yCAAAd,MAAA,CAAyCqB,KAAK,OAAI,CAAC;MACpE;IACF,CAAC,CAAA9B,KAAA;;IAEOgC,oBAAoB,GAAG,UAACN,SAAe,EAAEI,KAAa,EAAK;MACjE,QAAQA,KAAK;QACX,KAAK,MAAM;UACT,OAAO9B,KAAA,CAAKkB,KAAK,CAACiB,MAAM;QAC1B,KAAK,QAAQ;UACX,OAAOT,SAAS,CAACQ,KAAK,GAAG,CAAC,GAAGlC,KAAA,CAAKkB,KAAK,CAACC,IAAI;QAC9C,KAAK,OAAO;UACV,OAAOO,SAAS,CAACQ,KAAK,GAAGlC,KAAA,CAAKkB,KAAK,CAACiB,MAAM,GAAG,CAAC,GAAGnC,KAAA,CAAKkB,KAAK,CAACC,IAAI;QAClE;UACEG,OAAO,CAACC,KAAK,yCAAAd,MAAA,CAAyCqB,KAAK,OAAI,CAAC;MACpE;IACF,CAAC,CAAA9B,KAAA;;IAEOoC,sBAAsB,GAAG,YAAM;MACrC,QAAQpC,KAAA,CAAK6B,cAAc,CAAChB,SAAS;QACnC,KAAK,KAAK;UACR,OAAOjB,MAAM,CAACyC,MAAM,CAAC,CAAC;QACxB,KAAK,QAAQ;UACX,OAAOzC,MAAM,CAAC0C,SAAS,CAAC,CAAC;QAC3B,KAAK,MAAM;UACT,OAAO1C,MAAM,CAAC2C,OAAO,CAAC,CAAC;QACzB,KAAK,OAAO;UACV,OAAO3C,MAAM,CAAC4C,QAAQ,CAAC,CAAC;QAC1B;UACElB,OAAO,CAACC,KAAK,oDAAAd,MAAA,CAAoDT,KAAA,CAAK6B,cAAc,CAAChB,SAAS,OAAI,CAAC;MACvG;IACF,CAAC,QAAAb,KAAA,EAAAyC,SAAA,CAAA3C,WAAA,EAAAC,gBAAA,SAAA2C,YAAA,CAAA5C,WAAA,KAAA6C,GAAA,YAAAC,KAAA,EA9ID,SAAAC,OAAA,EAAgB,CACd,IAAI,CAAC,IAAI,CAAC3B,KAAK,CAACO,YAAY,EAAE,CAC5B,OAAO,IAAI,CACb,CAEA,IAAI,CAACI,cAAc,GAAGlC,WAAW,CAACmD,iBAAiB,CAAC,IAAI,CAAC5B,KAAK,CAAC6B,aAAa,CAAC,CAE7E,IAAMC,MAAM,GAAG,IAAI,CAACxB,iBAAiB,CAAC,IAAI,CAACN,KAAK,CAACO,YAAY,CAAC,CAC9D,IAAI,CAACuB,MAAM,IAAI,CAACA,MAAM,CAACrC,IAAI,IAAI,CAACqC,MAAM,CAACpC,GAAG,EAAE,CAC1C,OAAO,IAAI,CACb,CAEA,IAAMqC,WAAW,GAAG,IAAI,CAACvC,iBAAiB,CAACsC,MAAM,CAACrC,IAAI,EAAEqC,MAAM,CAACpC,GAAG,CAAC,CACnE,IAAMsC,gBAAgB,GAAG,IAAI,CAACd,sBAAsB,CAAC,CAAC,CACtD,IAAI,CAACa,WAAW,IAAI,CAACC,gBAAgB,EAAE,CACrC,OAAO,IAAI,CACb,CAEA,oBACEzD,KAAA,CAAA0D,aAAA,UAAK,YAAUtD,aAAa,CAACuD,QAAS,EAACC,SAAS,EAAE3D,EAAE,CAACE,MAAM,CAAC0D,GAAG,CAAC,CAAC,EAAEJ,gBAAgB,CAAE,EAACK,KAAK,EAAEN,WAAY,EAAM,CAAC,CAEpH,CAAC,MAAAN,GAAA,+BAAAC,KAAA,EAED,SAAA9B,0BAAA,EAAoC,CAClC,IAAM0C,cAAc,GAAG7D,WAAW,CAACmD,iBAAiB,CAAC,IAAI,CAAC5B,KAAK,CAAC6B,aAAa,CAAC,CAAClC,SAAS,CACxF,QAAQ2C,cAAc,GACpB,KAAK,KAAK,CACR,OAAO,QAAQ,CACjB,KAAK,QAAQ,CACX,OAAO,KAAK,CACd,KAAK,MAAM,CACT,OAAO,OAAO,CAChB,KAAK,OAAO,CACV,OAAO,MAAM,CACf,QACElC,OAAO,CAACC,KAAK,qDAAAd,MAAA,CAAqD+C,cAAc,MAAG,CAAC,CACxF,CACF,CAAC,OA3C8B/D,KAAK,CAACgE,SAAS,EAAnC3D,WAAW,CACR4D,mBAAmB,GAAG,UAAU,CADnC5D,WAAW,CAER6D,WAAW,GAAG,UAAU","ignoreList":[]}

package/internal/Popup/PopupPinNew.styles/PopupPinNew.styles.js

@@ -1,20 +1,20 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   pin: function pin() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: absolute;\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n    "])));
   },
   pinTop: function pinTop() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      clip-path: polygon(0 0, 50% 100%, 100% 0);\n    "])));
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      clip-path: polygon(0 0, 50% 100%, 100% 0);\n    "])));
   },
   pinBottom: function pinBottom() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    "])));
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    "])));
   },
   pinLeft: function pinLeft() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    "])));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    "])));
   },
   pinRight: function pinRight() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      clip-path: polygon(100% 0, 0 50%, 100% 100%);\n    "])));
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      clip-path: polygon(100% 0, 0 50%, 100% 100%);\n    "])));
   }
 });

package/internal/Popup/PopupPinNew.styles/PopupPinNew.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","pin","_templateObject","_taggedTemplateLiteralLoose","pinTop","_templateObject2","pinBottom","_templateObject3","pinLeft","_templateObject4","pinRight","_templateObject5"],"sources":["PopupPinNew.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  pin() {\n    return css`\n      position: absolute;\n    `;\n  },\n\n  pinTop() {\n    return css`\n      clip-path: polygon(0 0, 50% 100%, 100% 0);\n    `;\n  },\n\n  pinBottom() {\n    return css`\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    `;\n  },\n\n  pinLeft() {\n    return css`\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    `;\n  },\n\n  pinRight() {\n    return css`\n      clip-path: polygon(100% 0, 0 50%, 100% 100%);\n    `;\n  },\n});\n"],"mappings":"4LAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,GAAG,WAAAA,IAAA,EAAG;IACJ,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ,CAAC;;EAEDC,MAAM,WAAAA,OAAA,EAAG;IACP,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;EAGZ,CAAC;;EAEDG,SAAS,WAAAA,UAAA,EAAG;IACV,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;EAGZ,CAAC;;EAEDK,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;EAGZ,CAAC;;EAEDO,QAAQ,WAAAA,SAAA,EAAG;IACT,OAAOZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","pin","_templateObject","_taggedTemplateLiteral","pinTop","_templateObject2","pinBottom","_templateObject3","pinLeft","_templateObject4","pinRight","_templateObject5"],"sources":["PopupPinNew.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  pin() {\n    return css`\n      position: absolute;\n    `;\n  },\n\n  pinTop() {\n    return css`\n      clip-path: polygon(0 0, 50% 100%, 100% 0);\n    `;\n  },\n\n  pinBottom() {\n    return css`\n      clip-path: polygon(0 100%, 50% 0, 100% 100%);\n    `;\n  },\n\n  pinLeft() {\n    return css`\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    `;\n  },\n\n  pinRight() {\n    return css`\n      clip-path: polygon(100% 0, 0 50%, 100% 100%);\n    `;\n  },\n});\n"],"mappings":"kLAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,GAAG,WAAAA,IAAA,EAAG;IACJ,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,sBAAA;;;EAGZ,CAAC;;EAEDC,MAAM,WAAAA,OAAA,EAAG;IACP,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA;;;EAGZ,CAAC;;EAEDG,SAAS,WAAAA,UAAA,EAAG;IACV,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,sBAAA;;;EAGZ,CAAC;;EAEDK,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,sBAAA;;;EAGZ,CAAC;;EAEDO,QAAQ,WAAAA,SAAA,EAAG;IACT,OAAOZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAR,sBAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}

package/internal/PopupMenu/PopupMenu/PopupMenu.js

@@ -1,6 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
 var _class, _PopupMenu;
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 import React from 'react';
 import { globalObject } from '@skbkontur/global-object';
 import { getRandomID } from "../../../lib/utils";
@@ -26,10 +34,11 @@ var Positions = ['top left', 'top center', 'top right', 'right top', 'right midd
 export var PopupMenu = rootNode(_class = responsiveLayout(_class = (_PopupMenu = /*#__PURE__*/function (_React$Component) {
   function PopupMenu() {
     var _this;
+    _classCallCheck(this, PopupMenu);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _callSuper(this, PopupMenu, [].concat(args));
     _this.rootId = PopupIds.root + getRandomID();
     _this.getProps = createPropsGetter(PopupMenu.defaultProps);
     _this.state = {
@@ -60,7 +69,7 @@ export var PopupMenu = rootNode(_class = responsiveLayout(_class = (_PopupMenu =
       }
       return /*#__PURE__*/React.cloneElement(caption, {
         id: _this.props.id,
-        'aria-controls': (_this$props$popupMenu = _this.props.popupMenuId) != null ? _this$props$popupMenu : _this.rootId,
+        'aria-controls': (_this$props$popupMenu = _this.props.popupMenuId) !== null && _this$props$popupMenu !== void 0 ? _this$props$popupMenu : _this.rootId,
         'aria-expanded': _this.state.menuVisible ? 'true' : 'false',
         'aria-label': _this.props['aria-label']
       });
@@ -171,68 +180,73 @@ export var PopupMenu = rootNode(_class = responsiveLayout(_class = (_PopupMenu =
     };
     return _this;
   }
-  _inheritsLoose(PopupMenu, _React$Component);
-  var _proto = PopupMenu.prototype;
-  _proto.render = function render() {
-    var _this2 = this;
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-        value: ThemeFactory.create({
-          menuOffsetY: theme.popupMenuMenuOffsetY
-        }, theme)
-      }, _this2.renderMain());
-    });
-  };
-  _proto.renderMain = function renderMain() {
-    var _this$props$popupMenu2;
-    var _this$getProps = this.getProps(),
-      popupHasPin = _this$getProps.popupHasPin,
-      disableAnimations = _this$getProps.disableAnimations;
-    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-      rootNodeRef: this.setRootNode
-    }, this.props), /*#__PURE__*/React.createElement(RenderLayer, {
-      onClickOutside: this.hideMenuWithoutFocusing,
-      onFocusOutside: this.hideMenuWithoutFocusing,
-      active: this.state.menuVisible
-    }, /*#__PURE__*/React.createElement("div", {
-      "data-tid": PopupMenuDataTids.root,
-      className: styles.container(),
-      style: {
-        width: this.props.width
+  _inherits(PopupMenu, _React$Component);
+  return _createClass(PopupMenu, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+          value: ThemeFactory.create({
+            menuOffsetY: theme.popupMenuMenuOffsetY
+          }, theme)
+        }, _this2.renderMain());
+      });
+    }
+  }, {
+    key: "renderMain",
+    value: function renderMain() {
+      var _this$props$popupMenu2;
+      var _this$getProps = this.getProps(),
+        popupHasPin = _this$getProps.popupHasPin,
+        disableAnimations = _this$getProps.disableAnimations;
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: this.setRootNode
+      }, this.props), /*#__PURE__*/React.createElement(RenderLayer, {
+        onClickOutside: this.hideMenuWithoutFocusing,
+        onFocusOutside: this.hideMenuWithoutFocusing,
+        active: this.state.menuVisible
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-tid": PopupMenuDataTids.root,
+        className: styles.container(),
+        style: {
+          width: this.props.width
+        }
+      }, this.renderCaption(), this.captionWrapper && this.props.children && /*#__PURE__*/React.createElement(Popup, {
+        id: (_this$props$popupMenu2 = this.props.popupMenuId) !== null && _this$props$popupMenu2 !== void 0 ? _this$props$popupMenu2 : this.rootId,
+        anchorElement: this.captionWrapper,
+        opened: this.state.menuVisible,
+        hasShadow: true,
+        margin: this.props.popupMargin,
+        hasPin: popupHasPin,
+        pinOffset: this.props.popupPinOffset,
+        positions: this.getPositions(),
+        disableAnimations: disableAnimations,
+        onOpen: this.handleOpen,
+        mobileOnCloseRequest: this.hideMenu,
+        width: this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto'
+      }, /*#__PURE__*/React.createElement(Menu, {
+        maxHeight: this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none',
+        onKeyDown: this.handleKeyDown,
+        onItemClick: this.handleItemSelection,
+        preventIconsOffset: this.props.preventIconsOffset,
+        cyclicSelection: false,
+        ref: this.menuRef,
+        initialSelectedItemIndex: this.state.firstItemShouldBeSelected ? 0 : -1,
+        header: this.props.header,
+        footer: this.props.footer
+      }, this.props.children)))));
+    }
+  }, {
+    key: "getPositions",
+    value: function getPositions() {
+      var positions = this.getProps().positions;
+      if (positions && isValidPositions(positions)) {
+        return positions;
       }
-    }, this.renderCaption(), this.captionWrapper && this.props.children && /*#__PURE__*/React.createElement(Popup, {
-      id: (_this$props$popupMenu2 = this.props.popupMenuId) != null ? _this$props$popupMenu2 : this.rootId,
-      anchorElement: this.captionWrapper,
-      opened: this.state.menuVisible,
-      hasShadow: true,
-      margin: this.props.popupMargin,
-      hasPin: popupHasPin,
-      pinOffset: this.props.popupPinOffset,
-      positions: this.getPositions(),
-      disableAnimations: disableAnimations,
-      onOpen: this.handleOpen,
-      mobileOnCloseRequest: this.hideMenu,
-      width: this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto'
-    }, /*#__PURE__*/React.createElement(Menu, {
-      maxHeight: this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none',
-      onKeyDown: this.handleKeyDown,
-      onItemClick: this.handleItemSelection,
-      preventIconsOffset: this.props.preventIconsOffset,
-      cyclicSelection: false,
-      ref: this.menuRef,
-      initialSelectedItemIndex: this.state.firstItemShouldBeSelected ? 0 : -1,
-      header: this.props.header,
-      footer: this.props.footer
-    }, this.props.children)))));
-  };
-  _proto.getPositions = function getPositions() {
-    var positions = this.getProps().positions;
-    if (positions && isValidPositions(positions)) {
-      return positions;
+      return Positions;
     }
-    return Positions;
-  };
-  return PopupMenu;
+  }]);
 }(React.Component), _PopupMenu.__KONTUR_REACT_UI__ = 'PopupMenu', _PopupMenu.displayName = 'PopupMenu', _PopupMenu.defaultProps = {
   positions: Positions,
   type: PopupMenuType.Tooltip,