@skbkontur/react-ui 0.0.0-dd8159fe6c → 0.0.0-ecefada396

package/internal/Popup/PopupPin/PopupPin.js

@@ -0,0 +1,243 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PopupHelper } from "../PopupHelper";
+import { styles } from "../PopupPin.styles";
+var borderStyles = {
+  position: 'absolute',
+  borderStyle: 'solid',
+  borderTopColor: 'transparent',
+  borderBottomColor: 'transparent',
+  borderLeftColor: 'transparent',
+  borderRightColor: 'transparent'
+};
+export var PopupPin = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(PopupPin, _React$Component);
+
+  function PopupPin() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = PopupPin.prototype;
+
+  _proto.render = function render() {
+    if (!this.props.popupElement) {
+      return null;
+    }
+
+    var options = this.getPinOptions(PopupHelper.getElementAbsoluteRect(this.props.popupElement), PopupHelper.getPositionObject(this.props.popupPosition), this.props.size, this.props.offset, this.props.borderWidth);
+    var styleOuter = this.getOuterStyle(options.activeBorder, options.outerSize, this.props.borderColor);
+    var styleInner = this.getInnerStyle(options.activeBorder, this.props.size, this.props.backgroundColor);
+    var styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.wrapper(),
+      style: styleWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      style: styleOuter
+    }, /*#__PURE__*/React.createElement("div", {
+      style: styleInner
+    })));
+  };
+
+  _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:
+        throw new TypeError('Unknown direction ' + popupDirection);
+    }
+  };
+
+  _proto.getWrapperStyle = function getWrapperStyle(left, top, borderWidth) {
+    var _ref, _ref2;
+
+    var direction = this.getPopupOppositeDirection();
+
+    switch (direction) {
+      case 'top':
+      case 'bottom':
+        return _ref = {}, _ref[direction] = -borderWidth + 'px', _ref.left = left + 'px', _ref.width = borderWidth * 2 + 'px', _ref.height = borderWidth + 'px', _ref;
+
+      case 'left':
+      case 'right':
+        return _ref2 = {}, _ref2[direction] = -borderWidth + 'px', _ref2.top = top + 'px', _ref2.height = borderWidth * 2 + 'px', _ref2.width = borderWidth + 'px', _ref2;
+
+      default:
+        throw new TypeError('Unknown direction ' + direction);
+    }
+  };
+
+  _proto.getOuterStyle = function getOuterStyle(activeBorder, borderWitdth, borderColor) {
+    var _extends2, _extends3;
+
+    var direction = this.getPopupOppositeDirection();
+
+    switch (direction) {
+      case 'top':
+      case 'bottom':
+        return _extends({}, borderStyles, (_extends2 = {}, _extends2[direction] = -borderWitdth + 'px', _extends2.left = '0px', _extends2.borderWidth = borderWitdth + 'px', _extends2['border' + activeBorder + 'Color'] = borderColor, _extends2));
+
+      case 'left':
+      case 'right':
+        return _extends({}, borderStyles, (_extends3 = {}, _extends3[direction] = -borderWitdth + 'px', _extends3.top = '0px', _extends3.borderWidth = borderWitdth + 'px', _extends3['border' + activeBorder + 'Color'] = borderColor, _extends3));
+
+      default:
+        throw new TypeError('Unknown direction ' + direction);
+    }
+  };
+
+  _proto.getInnerStyle = function getInnerStyle(activeBorder, borderWitdth, borderColor) {
+    var _extends4, _extends5;
+
+    var direction = this.getPopupOppositeDirection();
+
+    switch (direction) {
+      case 'top':
+      case 'bottom':
+        return _extends({}, borderStyles, (_extends4 = {}, _extends4[direction] = -borderWitdth + 2 + 'px', _extends4.left = -borderWitdth + 'px', _extends4.borderWidth = borderWitdth + 'px', _extends4['border' + activeBorder + 'Color'] = borderColor, _extends4));
+
+      case 'left':
+      case 'right':
+        return _extends({}, borderStyles, (_extends5 = {}, _extends5[direction] = -borderWitdth + 2 + 'px', _extends5.top = -borderWitdth + 'px', _extends5.borderWidth = borderWitdth + 'px', _extends5['border' + activeBorder + 'Color'] = borderColor, _extends5));
+
+      default:
+        throw new TypeError('Unknown direction ' + direction);
+    }
+  };
+
+  _proto.getPinOptions = function getPinOptions(popupRect, popupPosition, pinSize, pinOffset, borderWidth) {
+    var bordersDelta = 2 * borderWidth;
+    var outerSize = pinSize + bordersDelta;
+
+    switch (popupPosition.direction) {
+      case 'top':
+        return {
+          outerTop: popupRect.height,
+          outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,
+          innerTop: -outerSize,
+          innerLeft: -outerSize + bordersDelta,
+          activeBorder: 'Top',
+          outerSize: outerSize
+        };
+
+      case 'bottom':
+        return {
+          outerTop: -2 * outerSize,
+          outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,
+          innerTop: -outerSize + 2 * bordersDelta,
+          innerLeft: -outerSize + bordersDelta,
+          activeBorder: 'Bottom',
+          outerSize: outerSize
+        };
+
+      case 'left':
+        return {
+          outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,
+          outerLeft: popupRect.width,
+          innerTop: -outerSize + bordersDelta,
+          innerLeft: -outerSize,
+          activeBorder: 'Left',
+          outerSize: outerSize
+        };
+
+      case 'right':
+        return {
+          outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,
+          outerLeft: -2 * outerSize,
+          innerTop: -outerSize + bordersDelta,
+          innerLeft: -outerSize + 2 * bordersDelta,
+          activeBorder: 'Right',
+          outerSize: outerSize
+        };
+
+      default:
+        throw new Error('Direction must be one of top, right, bottom, left');
+    }
+  };
+
+  _proto.getPinTopCoordinate = function getPinTopCoordinate(popupRect, align, pinHeight, pinOffset) {
+    switch (align) {
+      case 'top':
+        return pinOffset;
+
+      case 'middle':
+        return popupRect.height / 2 - pinHeight;
+
+      case 'bottom':
+        return popupRect.height - pinOffset - 2 * pinHeight;
+
+      default:
+        throw new Error("Unexpected align '" + align + "'");
+    }
+  };
+
+  _proto.getPinLeftCoordinate = function getPinLeftCoordinate(popupRect, align, pinHeight, pinOffset) {
+    switch (align) {
+      case 'left':
+        return pinOffset;
+
+      case 'center':
+        return popupRect.width / 2 - pinHeight;
+
+      case 'right':
+        return popupRect.width - pinOffset - 2 * pinHeight;
+
+      default:
+        throw new Error("Unexpected align '" + align + "'");
+    }
+  };
+
+  return PopupPin;
+}(React.Component);
+PopupPin.__KONTUR_REACT_UI__ = 'PopupPin';
+PopupPin.propTypes = {
+  /**
+  * Цвет фон пина
+  */
+  backgroundColor: PropTypes.string,
+
+  /**
+  * Цвет границы пина
+  */
+  borderColor: PropTypes.string,
+
+  /**
+  * Ширина границы пина
+  */
+  borderWidth: PropTypes.number,
+
+  /**
+  * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
+  */
+  offset: PropTypes.number,
+
+  /**
+  * Ссылка на попап
+  */
+  popupElement: PropTypes.any,
+
+  /**
+  * Позиция поапа, по которой будет вычеслено положение пина
+  */
+  popupPosition: PropTypes.string,
+
+  /**
+  * Сторона пина без учёта границы.
+  * Пин представляет собой равносторонний треугольник, высота от попапа
+  * до "носика" пина будет соответствовать формуле (size* √3)/2
+  */
+  size: PropTypes.number
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PopupPin.tsx"],"names":["React","PropTypes","PopupHelper","styles","borderStyles","position","borderStyle","borderTopColor","borderBottomColor","borderLeftColor","borderRightColor","PopupPin","render","props","popupElement","options","getPinOptions","getElementAbsoluteRect","getPositionObject","popupPosition","size","offset","borderWidth","styleOuter","getOuterStyle","activeBorder","outerSize","borderColor","styleInner","getInnerStyle","backgroundColor","styleWrapper","getWrapperStyle","outerLeft","outerTop","wrapper","getPopupOppositeDirection","popupDirection","direction","TypeError","left","top","width","height","borderWitdth","popupRect","pinSize","pinOffset","bordersDelta","getPinLeftCoordinate","align","innerTop","innerLeft","getPinTopCoordinate","Error","pinHeight","Component","__KONTUR_REACT_UI__","propTypes","string","number","any"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { PopupHelper, PositionObject, Rect } from './PopupHelper';\nimport { styles } from './PopupPin.styles';\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  backgroundColor: string;\n  borderColor: string;\n  borderWidth: number;\n  offset: number;\n  popupElement: Nullable<HTMLElement>;\n  popupPosition: string;\n  size: number;\n}\n\nexport class PopupPin extends React.Component<Props> {\n  public static __KONTUR_REACT_UI__ = 'PopupPin';\n\n  public static propTypes = {\n    /**\n     * Цвет фон пина\n     */\n    backgroundColor: PropTypes.string,\n\n    /**\n     * Цвет границы пина\n     */\n    borderColor: PropTypes.string,\n\n    /**\n     * Ширина границы пина\n     */\n    borderWidth: PropTypes.number,\n\n    /**\n     * Смещение пина от края попапа. Край задаётся в пропе position вторым словом\n     */\n    offset: PropTypes.number,\n\n    /**\n     * Ссылка на попап\n     */\n    popupElement: PropTypes.any,\n\n    /**\n     * Позиция поапа, по которой будет вычеслено положение пина\n     */\n    popupPosition: PropTypes.string,\n\n    /**\n     * Сторона пина без учёта границы.\n     * Пин представляет собой равносторонний треугольник, высота от попапа\n     * до \"носика\" пина будет соответствовать формуле (size* √3)/2\n     */\n    size: PropTypes.number,\n  };\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 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"]}

package/internal/Popup/PopupPin/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/Popup/PopupPin.js",
+  "module": "PopupPin",
+  "types": "../PopupPin.d.ts",
+  "sideEffects": false
+}

package/internal/Popup/PopupPin.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Nullable } from '../../typings/utility-types';
+interface Props {
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+    offset: number;
+    popupElement: Nullable<HTMLElement>;
+    popupPosition: string;
+    size: number;
+}
+export declare class PopupPin extends React.Component<Props> {
+    static __KONTUR_REACT_UI__: string;
+    static propTypes: {
+        /**
+         * Цвет фон пина
+         */
+        backgroundColor: PropTypes.Requireable<string>;
+        /**
+         * Цвет границы пина
+         */
+        borderColor: PropTypes.Requireable<string>;
+        /**
+         * Ширина границы пина
+         */
+        borderWidth: PropTypes.Requireable<number>;
+        /**
+         * Смещение пина от края попапа. Край задаётся в пропе position вторым словом
+         */
+        offset: PropTypes.Requireable<number>;
+        /**
+         * Ссылка на попап
+         */
+        popupElement: PropTypes.Requireable<any>;
+        /**
+         * Позиция поапа, по которой будет вычеслено положение пина
+         */
+        popupPosition: PropTypes.Requireable<string>;
+        /**
+         * Сторона пина без учёта границы.
+         * Пин представляет собой равносторонний треугольник, высота от попапа
+         * до "носика" пина будет соответствовать формуле (size* √3)/2
+         */
+        size: PropTypes.Requireable<number>;
+    };
+    render(): JSX.Element | null;
+    private getPopupOppositeDirection;
+    private getWrapperStyle;
+    private getOuterStyle;
+    private getInnerStyle;
+    private getPinOptions;
+    private getPinTopCoordinate;
+    private getPinLeftCoordinate;
+}
+export {};

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

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+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    "])));
+  }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PopupPin.styles.ts"],"names":["css","memoizeStyle","styles","wrapper"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,qBACvB;AACR,WAAOH,GAAP;;;;;AAKD,GAPgC,EAAD,CAA3B","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"]}

package/internal/Popup/PopupPin.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/Popup/PopupPin.styles.js",
+  "module": "PopupPin.styles",
+  "types": "../PopupPin.styles.d.ts",
+  "sideEffects": false
+}

package/internal/Popup/PopupPin.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: {
+    wrapper(): string;
+};

package/internal/Popup/index/index.js

@@ -0,0 +1 @@
+export * from "../Popup";

package/internal/Popup/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Popup';\n"]}

package/internal/Popup/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/Popup/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/internal/Popup/index.d.ts

@@ -0,0 +1 @@
+export * from './Popup';

package/internal/Popup/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/internal/Popup/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/internal/PopupMenu/PopupMenu/PopupMenu.js

@@ -0,0 +1,226 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import { isKeyArrowVertical, isKeyEnter, isKeyEscape, isKeySpace, someKeys } from "../../../lib/events/keyboard/identifiers";
+import { InternalMenu } from "../../InternalMenu";
+import { Popup } from "../../Popup";
+import { RenderLayer } from "../../RenderLayer";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { responsiveLayout } from "../../../components/ResponsiveLayout";
+import { PopupMenuPositions } from "../PopupMenuPositions";
+import { isValidPositions } from "../validatePositions";
+import { styles } from "../PopupMenu.styles";
+export var PopupMenuType = {
+  Dropdown: 'dropdown',
+  Tooltip: 'tooltip'
+};
+export var PopupMenu = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(PopupMenu, _React$Component);
+
+  function PopupMenu() {
+    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.isMobileLayout = void 0;
+    _this.state = {
+      menuVisible: false,
+      firstItemShouldBeSelected: false
+    };
+    _this.captionWrapper = null;
+    _this.savedFocusableElement = null;
+    _this.menu = null;
+
+    _this.open = function () {
+      return _this.showMenu();
+    };
+
+    _this.close = function () {
+      return _this.hideMenu();
+    };
+
+    _this.refInternalMenu = function (element) {
+      return _this.menu = element;
+    };
+
+    _this.handleOpen = function () {
+      if (_this.menu) {
+        _this.menu.focus();
+      }
+    };
+
+    _this.renderCaption = function () {
+      if (typeof _this.props.caption === 'function') {
+        var caption = _this.props.caption({
+          opened: _this.state.menuVisible,
+          openMenu: _this.showMenu,
+          closeMenu: _this.hideMenu,
+          toggleMenu: _this.toggleMenu
+        });
+
+        return /*#__PURE__*/React.createElement("span", {
+          "data-tid": "PopupMenu__caption",
+          className: styles.caption(),
+          ref: function ref(element) {
+            return _this.captionWrapper = element;
+          }
+        }, caption);
+      }
+
+      return /*#__PURE__*/React.createElement("span", {
+        "data-tid": "PopupMenu__caption",
+        onClick: _this.handleCaptionClick,
+        onKeyDown: _this.handleCaptionKeyDown,
+        ref: function ref(element) {
+          return _this.captionWrapper = element;
+        },
+        className: styles.caption()
+      }, _this.props.caption);
+    };
+
+    _this.hideMenuWithoutFocusing = function () {
+      return _this.hideMenu();
+    };
+
+    _this.showMenu = function (firstItemShouldBeSelected) {
+      _this.saveFocus();
+
+      _this.setState({
+        menuVisible: true,
+        firstItemShouldBeSelected: firstItemShouldBeSelected
+      }, function () {
+        _this.handleChangeMenuVisible(false);
+      });
+    };
+
+    _this.hideMenu = function (restoreFocus) {
+      _this.setState({
+        menuVisible: false,
+        firstItemShouldBeSelected: false
+      }, function () {
+        _this.handleChangeMenuVisible(!!restoreFocus);
+      });
+    };
+
+    _this.toggleMenu = function () {
+      _this.state.menuVisible ? _this.hideMenu() : _this.showMenu();
+    };
+
+    _this.handleCaptionClick = function () {
+      _this.toggleMenu();
+    };
+
+    _this.handleCaptionKeyDown = function (e) {
+      if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {
+        e.preventDefault();
+
+        _this.showMenu(true);
+      }
+    };
+
+    _this.handleKeyDown = function (e) {
+      if (isKeyEscape(e)) {
+        var _restoreFocus = true;
+
+        _this.hideMenu(_restoreFocus);
+      }
+    };
+
+    _this.saveFocus = function () {
+      if (document) {
+        _this.savedFocusableElement = document.activeElement;
+      }
+    };
+
+    _this.restoreFocus = function () {
+      if (_this.savedFocusableElement) {
+        _this.savedFocusableElement.focus();
+
+        _this.savedFocusableElement = null;
+      }
+    };
+
+    _this.handleChangeMenuVisible = function (focusShouldBeRestored) {
+      if (focusShouldBeRestored) {
+        _this.restoreFocus();
+      }
+
+      if (typeof _this.props.onChangeMenuState === 'function') {
+        _this.props.onChangeMenuState(_this.state.menuVisible, focusShouldBeRestored);
+      }
+    };
+
+    _this.handleItemSelection = function (event) {
+      if (event.isDefaultPrevented()) {
+        return;
+      }
+
+      if (event.type === 'keydown') {
+        event.preventDefault();
+      }
+
+      var restoreFocus = event.type === 'keydown';
+
+      _this.hideMenu(restoreFocus);
+    };
+
+    return _this;
+  }
+
+  var _proto = PopupMenu.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(RenderLayer, {
+      onClickOutside: this.hideMenuWithoutFocusing,
+      onFocusOutside: this.hideMenuWithoutFocusing,
+      active: this.state.menuVisible
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.container(),
+      style: {
+        width: this.props.width
+      }
+    }, this.renderCaption(), this.captionWrapper && this.props.children && /*#__PURE__*/React.createElement(Popup, {
+      anchorElement: this.captionWrapper,
+      opened: this.state.menuVisible,
+      hasShadow: true,
+      margin: this.props.popupMargin,
+      hasPin: this.props.popupHasPin,
+      pinOffset: this.props.popupPinOffset,
+      positions: this.getPositions(),
+      disableAnimations: this.props.disableAnimations,
+      onOpen: this.handleOpen,
+      mobileOnCloseRequest: this.hideMenu,
+      width: this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto'
+    }, /*#__PURE__*/React.createElement(InternalMenu, {
+      hasShadow: false,
+      maxHeight: this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none',
+      onKeyDown: this.handleKeyDown,
+      onItemClick: this.handleItemSelection,
+      cyclicSelection: false,
+      ref: this.refInternalMenu,
+      initialSelectedItemIndex: this.state.firstItemShouldBeSelected ? 0 : -1,
+      header: this.props.header,
+      footer: this.props.footer
+    }, this.props.children)))));
+  };
+
+  _proto.getPositions = function getPositions() {
+    if (this.props.positions && isValidPositions(this.props.positions)) {
+      return this.props.positions;
+    }
+
+    return PopupMenuPositions;
+  };
+
+  return PopupMenu;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'PopupMenu', _class2.defaultProps = {
+  positions: PopupMenuPositions,
+  type: PopupMenuType.Tooltip,
+  popupHasPin: true,
+  disableAnimations: false
+}, _class2.Type = PopupMenuType, _temp)) || _class;

package/internal/PopupMenu/PopupMenu/PopupMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PopupMenu.tsx"],"names":["React","isKeyArrowVertical","isKeyEnter","isKeyEscape","isKeySpace","someKeys","InternalMenu","Popup","RenderLayer","CommonWrapper","responsiveLayout","PopupMenuPositions","isValidPositions","styles","PopupMenuType","Dropdown","Tooltip","PopupMenu","isMobileLayout","state","menuVisible","firstItemShouldBeSelected","captionWrapper","savedFocusableElement","menu","open","showMenu","close","hideMenu","refInternalMenu","element","handleOpen","focus","renderCaption","props","caption","opened","openMenu","closeMenu","toggleMenu","handleCaptionClick","handleCaptionKeyDown","hideMenuWithoutFocusing","saveFocus","setState","handleChangeMenuVisible","restoreFocus","e","preventDefault","handleKeyDown","document","activeElement","focusShouldBeRestored","onChangeMenuState","handleItemSelection","event","isDefaultPrevented","type","render","container","width","children","popupMargin","popupHasPin","popupPinOffset","getPositions","disableAnimations","menuWidth","menuMaxHeight","header","footer","positions","Component","__KONTUR_REACT_UI__","defaultProps","Type"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {\n  isKeyArrowVertical,\n  isKeyEnter,\n  isKeyEscape,\n  isKeySpace,\n  someKeys,\n} from '../../lib/events/keyboard/identifiers';\nimport { InternalMenu } from '../InternalMenu';\nimport { Popup, PopupPosition } from '../Popup';\nimport { RenderLayer } from '../RenderLayer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { responsiveLayout } from '../../components/ResponsiveLayout';\n\nimport { PopupMenuPositions } from './PopupMenuPositions';\nimport { isValidPositions } from './validatePositions';\nimport { styles } from './PopupMenu.styles';\n\nexport interface PopupMenuCaptionProps {\n  opened: boolean;\n  openMenu: (firstItemShouldBeSelected?: boolean) => void;\n  closeMenu: (restoreFocus?: boolean) => void;\n  toggleMenu: () => void;\n}\n\nexport interface PopupMenuProps extends CommonProps {\n  children?: React.ReactNode;\n  /** Максимальная высота меню */\n  menuMaxHeight?: number | string;\n  /** Ширина меню */\n  menuWidth?: number | string;\n  /** Ширина контейнера и caption */\n  width?: React.CSSProperties['width'];\n\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо ```caption```,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: React.ReactNode | ((props: PopupMenuCaptionProps) => React.ReactNode);\n\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  /**  Массив разрешенных положений меню относительно caption'а. */\n  positions?: PopupPosition[];\n  /** Колбэк, вызываемый после открытия/закрытия меню */\n  onChangeMenuState?: (isOpened: boolean, restoreFocus: boolean) => void;\n  /** Пропсы, передающиеся в Popup */\n  popupHasPin?: boolean;\n  popupMargin?: number;\n  popupPinOffset?: number;\n  type?: 'dropdown' | 'tooltip';\n  disableAnimations: boolean;\n}\n\ninterface PopupMenuState {\n  menuVisible: boolean;\n  firstItemShouldBeSelected?: boolean;\n}\n\nexport const PopupMenuType = {\n  Dropdown: 'dropdown',\n  Tooltip: 'tooltip',\n};\n\n@responsiveLayout\nexport class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {\n  public static __KONTUR_REACT_UI__ = 'PopupMenu';\n\n  private isMobileLayout!: boolean;\n\n  public static defaultProps = {\n    positions: PopupMenuPositions,\n    type: PopupMenuType.Tooltip,\n    popupHasPin: true,\n    disableAnimations: false,\n  };\n\n  public static Type = PopupMenuType;\n\n  public state = {\n    menuVisible: false,\n    firstItemShouldBeSelected: false,\n  };\n\n  private captionWrapper: HTMLSpanElement | null = null;\n  private savedFocusableElement: HTMLElement | null = null;\n  private menu: Nullable<InternalMenu> = null;\n\n  public render() {\n    return (\n      <CommonWrapper {...this.props}>\n        <RenderLayer\n          onClickOutside={this.hideMenuWithoutFocusing}\n          onFocusOutside={this.hideMenuWithoutFocusing}\n          active={this.state.menuVisible}\n        >\n          <div className={styles.container()} style={{ width: this.props.width }}>\n            {this.renderCaption()}\n            {this.captionWrapper && this.props.children && (\n              <Popup\n                anchorElement={this.captionWrapper}\n                opened={this.state.menuVisible}\n                hasShadow\n                margin={this.props.popupMargin}\n                hasPin={this.props.popupHasPin}\n                pinOffset={this.props.popupPinOffset}\n                positions={this.getPositions()}\n                disableAnimations={this.props.disableAnimations}\n                onOpen={this.handleOpen}\n                mobileOnCloseRequest={this.hideMenu}\n                width={this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto'}\n              >\n                <InternalMenu\n                  hasShadow={false}\n                  maxHeight={this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none'}\n                  onKeyDown={this.handleKeyDown}\n                  onItemClick={this.handleItemSelection}\n                  cyclicSelection={false}\n                  ref={this.refInternalMenu}\n                  initialSelectedItemIndex={this.state.firstItemShouldBeSelected ? 0 : -1}\n                  header={this.props.header}\n                  footer={this.props.footer}\n                >\n                  {this.props.children}\n                </InternalMenu>\n              </Popup>\n            )}\n          </div>\n        </RenderLayer>\n      </CommonWrapper>\n    );\n  }\n\n  public open = (): void => this.showMenu();\n  public close = (): void => this.hideMenu();\n\n  private refInternalMenu = (element: Nullable<InternalMenu>) => (this.menu = element);\n\n  private handleOpen = () => {\n    if (this.menu) {\n      this.menu.focus();\n    }\n  };\n\n  private renderCaption = () => {\n    if (typeof this.props.caption === 'function') {\n      const caption = this.props.caption({\n        opened: this.state.menuVisible,\n        openMenu: this.showMenu,\n        closeMenu: this.hideMenu,\n        toggleMenu: this.toggleMenu,\n      });\n\n      return (\n        <span\n          data-tid=\"PopupMenu__caption\"\n          className={styles.caption()}\n          ref={(element) => (this.captionWrapper = element)}\n        >\n          {caption}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        data-tid=\"PopupMenu__caption\"\n        onClick={this.handleCaptionClick}\n        onKeyDown={this.handleCaptionKeyDown}\n        ref={(element) => (this.captionWrapper = element)}\n        className={styles.caption()}\n      >\n        {this.props.caption}\n      </span>\n    );\n  };\n\n  private hideMenuWithoutFocusing = () => this.hideMenu();\n\n  private getPositions() {\n    if (this.props.positions && isValidPositions(this.props.positions)) {\n      return this.props.positions;\n    }\n\n    return PopupMenuPositions;\n  }\n\n  private showMenu = (firstItemShouldBeSelected?: boolean): void => {\n    this.saveFocus();\n    this.setState(\n      {\n        menuVisible: true,\n        firstItemShouldBeSelected,\n      },\n      () => {\n        this.handleChangeMenuVisible(false);\n      },\n    );\n  };\n\n  private hideMenu = (restoreFocus?: boolean): void => {\n    this.setState(\n      {\n        menuVisible: false,\n        firstItemShouldBeSelected: false,\n      },\n      () => {\n        this.handleChangeMenuVisible(!!restoreFocus);\n      },\n    );\n  };\n\n  private toggleMenu = (): void => {\n    this.state.menuVisible ? this.hideMenu() : this.showMenu();\n  };\n\n  private handleCaptionClick = (): void => {\n    this.toggleMenu();\n  };\n\n  private handleCaptionKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      this.showMenu(true);\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (isKeyEscape(e)) {\n      const restoreFocus = true;\n      this.hideMenu(restoreFocus);\n    }\n  };\n\n  private saveFocus = (): void => {\n    if (document) {\n      this.savedFocusableElement = document.activeElement as HTMLElement;\n    }\n  };\n\n  private restoreFocus = (): void => {\n    if (this.savedFocusableElement) {\n      this.savedFocusableElement.focus();\n      this.savedFocusableElement = null;\n    }\n  };\n\n  private handleChangeMenuVisible = (focusShouldBeRestored: boolean): void => {\n    if (focusShouldBeRestored) {\n      this.restoreFocus();\n    }\n    if (typeof this.props.onChangeMenuState === 'function') {\n      this.props.onChangeMenuState(this.state.menuVisible, focusShouldBeRestored);\n    }\n  };\n\n  private handleItemSelection = (event: React.SyntheticEvent<HTMLElement>): void => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    if (event.type === 'keydown') {\n      event.preventDefault();\n    }\n\n    const restoreFocus = event.type === 'keydown';\n    this.hideMenu(restoreFocus);\n  };\n}\n"]}

package/internal/PopupMenu/PopupMenu/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/PopupMenu/PopupMenu.js",
+  "module": "PopupMenu",
+  "types": "../PopupMenu.d.ts",
+  "sideEffects": false
+}