@skbkontur/react-ui 0.0.0-375e096002 → 0.0.0-3974a633b4

package/cjs/components/Hint/Hint.js

@@ -1,5 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Hint = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Hint = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _ThemeFactory = require("../../lib/theming/ThemeFactory");
@@ -8,10 +7,12 @@ var _Popup = require("../../internal/Popup");
 
 
 var _currentEnvironment = require("../../lib/currentEnvironment");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
 
-var _Hint = require("./Hint.styles");
+var _Hint = require("./Hint.styles");var _class, _class2, _temp;
 
-var HINT_BACKGROUND_COLOR = 'rgba(51, 51, 51, 0.8)';
 var HINT_BORDER_COLOR = 'transparent';
 
 
@@ -33,6 +34,25 @@ var HINT_BORDER_COLOR = 'transparent';
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -59,10 +79,14 @@ var Positions = [
 'left bottom',
 'right middle',
 'right top',
-'right bottom'];var
+'right bottom'];
+
 
+/**
+ * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+ */var
 
-Hint = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Hint, _React$Component);function Hint() {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.
+Hint = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.default)(Hint, _React$PureComponent);function Hint() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
 
 
 
@@ -80,6 +104,14 @@ Hint = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Hi
 
     timer = null;_this.
     theme = void 0;_this.
+    setRootNode = void 0;_this.
+
+
+
+
+
+
+
 
 
 
@@ -185,4 +217,4 @@ Hint = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Hi
 
     open = function () {
       _this.setState({ opened: true });
-    };return _this;}var _proto = Hint.prototype;_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {if (!nextProps.manual) {return;}if (nextProps.opened !== this.props.opened) {this.setState({ opened: !!nextProps.opened });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.timer) {clearTimeout(this.timer);this.timer = null;}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: '8px', popupMargin: '15px' }, _this2.theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {return /*#__PURE__*/_react.default.createElement(_Popup.Popup, { hasPin: true, opened: this.state.opened, anchorElement: this.props.children, positions: this.getPositions(), backgroundColor: HINT_BACKGROUND_COLOR, borderColor: HINT_BORDER_COLOR, disableAnimations: this.props.disableAnimations, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: this.props.useWrapper }, this.renderContent());};_proto.renderContent = function renderContent() {var _cn;if (!this.props.text) {return null;}var _this$props = this.props,pos = _this$props.pos,maxWidth = _this$props.maxWidth;var className = (0, _classnames.default)((_cn = {}, _cn[_Hint.jsStyles.content()] = true, _cn[_Hint.jsStyles.contentCenter()] = pos === 'top' || pos === 'bottom', _cn));return /*#__PURE__*/_react.default.createElement("div", { className: className, style: { maxWidth: maxWidth } }, this.props.text);};return Hint;}(_react.default.Component);exports.Hint = Hint;Hint.__KONTUR_REACT_UI__ = 'Hint';Hint.defaultProps = { pos: 'top', manual: false, opened: false, maxWidth: 200, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: true };
+    };return _this;}var _proto = Hint.prototype;_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (!this.props.manual) {return;}if (this.timer) {clearTimeout(this.timer);this.timer = null;}if (this.props.opened !== prevProps.opened) {this.setState({ opened: !!this.props.opened });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.timer) {clearTimeout(this.timer);this.timer = null;}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.hintPinOffset, popupMargin: theme.hintMargin, popupBorder: theme.hintBorder, popupBorderRadius: theme.hintBorderRadius }, _this2.theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, { hasPin: true, opened: this.state.opened, anchorElement: this.props.children, positions: this.getPositions(), backgroundColor: this.theme.hintBgColor, borderColor: HINT_BORDER_COLOR, disableAnimations: this.props.disableAnimations, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: this.props.useWrapper }, this.renderContent()));};_proto.renderContent = function renderContent() {var _cx;if (!this.props.text) {return null;}var _this$props = this.props,pos = _this$props.pos,maxWidth = _this$props.maxWidth;var className = (0, _Emotion.cx)((_cx = {}, _cx[_Hint.styles.content(this.theme)] = true, _cx[_Hint.styles.contentCenter(this.theme)] = pos === 'top' || pos === 'bottom', _cx));return /*#__PURE__*/_react.default.createElement("div", { className: className, style: { maxWidth: maxWidth } }, this.props.text);};return Hint;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.defaultProps = { pos: 'top', manual: false, opened: false, maxWidth: 200, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false }, _temp)) || _class;exports.Hint = Hint;

package/cjs/components/Hint/Hint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Hint.tsx"],"names":["HINT_BACKGROUND_COLOR","HINT_BORDER_COLOR","Positions","Hint","state","opened","props","manual","timer","theme","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","UNSAFE_componentWillReceiveProps","nextProps","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","popupMargin","renderMain","children","disableAnimations","useWrapper","renderContent","text","maxWidth","className","jsStyles","content","contentCenter","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { Popup, PopupPosition } from '../../internal/Popup';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { MouseEventType } from '../../typings/event-types';\r\nimport { isTestEnv } from '../../lib/currentEnvironment';\r\n\r\nimport { jsStyles } from './Hint.styles';\r\n\r\nconst HINT_BACKGROUND_COLOR = 'rgba(51, 51, 51, 0.8)';\r\nconst HINT_BORDER_COLOR = 'transparent';\r\n\r\nexport interface HintProps {\r\n  children?: React.ReactNode;\r\n  manual?: boolean;\r\n  maxWidth?: React.CSSProperties['maxWidth'];\r\n  onMouseEnter?: (event: MouseEventType) => void;\r\n  onMouseLeave?: (event: MouseEventType) => void;\r\n  opened?: boolean;\r\n  pos:\r\n    | 'top'\r\n    | 'right'\r\n    | 'bottom'\r\n    | 'left'\r\n    | 'top left'\r\n    | 'top center'\r\n    | 'top right'\r\n    | 'bottom left'\r\n    | 'bottom center'\r\n    | 'bottom right'\r\n    | 'left top'\r\n    | 'left middle'\r\n    | 'left bottom'\r\n    | 'right top'\r\n    | 'right middle'\r\n    | 'right bottom';\r\n  text: React.ReactNode;\r\n  disableAnimations: boolean;\r\n  useWrapper: boolean;\r\n}\r\n\r\nexport interface HintState {\r\n  opened: boolean;\r\n}\r\n\r\nconst Positions: PopupPosition[] = [\r\n  'top center',\r\n  'top left',\r\n  'top right',\r\n  'bottom center',\r\n  'bottom left',\r\n  'bottom right',\r\n  'left middle',\r\n  'left top',\r\n  'left bottom',\r\n  'right middle',\r\n  'right top',\r\n  'right bottom',\r\n];\r\n\r\nexport class Hint extends React.Component<HintProps, HintState> {\r\n  public static __KONTUR_REACT_UI__ = 'Hint';\r\n\r\n  public static defaultProps = {\r\n    pos: 'top',\r\n    manual: false,\r\n    opened: false,\r\n    maxWidth: 200,\r\n    disableAnimations: isTestEnv,\r\n    useWrapper: true,\r\n  };\r\n\r\n  public state: HintState = {\r\n    opened: this.props.manual ? !!this.props.opened : false,\r\n  };\r\n\r\n  private timer: Nullable<number> = null;\r\n  private theme!: Theme;\r\n\r\n  public UNSAFE_componentWillReceiveProps(nextProps: HintProps) {\r\n    if (!nextProps.manual) {\r\n      return;\r\n    }\r\n\r\n    if (nextProps.opened !== this.props.opened) {\r\n      this.setState({ opened: !!nextProps.opened });\r\n    }\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    if (this.timer) {\r\n      clearTimeout(this.timer);\r\n      this.timer = null;\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return (\r\n            <ThemeContext.Provider\r\n              value={ThemeFactory.create(\r\n                {\r\n                  popupPinOffset: '8px',\r\n                  popupMargin: '15px',\r\n                },\r\n                this.theme,\r\n              )}\r\n            >\r\n              {this.renderMain()}\r\n            </ThemeContext.Provider>\r\n          );\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  public renderMain() {\r\n    return (\r\n      <Popup\r\n        hasPin\r\n        opened={this.state.opened}\r\n        anchorElement={this.props.children}\r\n        positions={this.getPositions()}\r\n        backgroundColor={HINT_BACKGROUND_COLOR}\r\n        borderColor={HINT_BORDER_COLOR}\r\n        disableAnimations={this.props.disableAnimations}\r\n        onMouseEnter={this.handleMouseEnter}\r\n        onMouseLeave={this.handleMouseLeave}\r\n        useWrapper={this.props.useWrapper}\r\n      >\r\n        {this.renderContent()}\r\n      </Popup>\r\n    );\r\n  }\r\n\r\n  private renderContent() {\r\n    if (!this.props.text) {\r\n      return null;\r\n    }\r\n\r\n    const { pos, maxWidth } = this.props;\r\n    const className = cn({\r\n      [jsStyles.content()]: true,\r\n      [jsStyles.contentCenter()]: pos === 'top' || pos === 'bottom',\r\n    });\r\n    return (\r\n      <div className={className} style={{ maxWidth }}>\r\n        {this.props.text}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private getPositions = (): PopupPosition[] => {\r\n    return Positions.filter(x => x.startsWith(this.props.pos));\r\n  };\r\n\r\n  private handleMouseEnter = (e: MouseEventType) => {\r\n    if (!this.props.manual && !this.timer) {\r\n      this.timer = window.setTimeout(this.open, 400);\r\n    }\r\n\r\n    if (this.props.onMouseEnter) {\r\n      this.props.onMouseEnter(e);\r\n    }\r\n  };\r\n\r\n  private handleMouseLeave = (e: MouseEventType) => {\r\n    if (!this.props.manual && this.timer) {\r\n      clearTimeout(this.timer);\r\n      this.timer = null;\r\n      this.setState({ opened: false });\r\n    }\r\n\r\n    if (this.props.onMouseLeave) {\r\n      this.props.onMouseLeave(e);\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.setState({ opened: true });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Hint.tsx"],"names":["HINT_BORDER_COLOR","Positions","Hint","rootNode","state","opened","props","manual","timer","theme","setRootNode","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","children","hintBgColor","disableAnimations","useWrapper","renderContent","text","maxWidth","className","styles","content","contentCenter","React","PureComponent","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Popup, PopupPositionsType } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Переводит отображение подсказки в _\"ручной режим\"_.\n   *\n   * В _\"ручном режиме\"_ подcказку можно активировать только задав значение пропу `opened`.\n   */\n  manual?: boolean;\n  /**\n   * Задаёт максимальную ширину подсказки.\n   */\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: (event: MouseEventType) => void;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: (event: MouseEventType) => void;\n  /**\n   * Если `true` - подсказка будет открыта.\n   *\n   * _Примечание_: работает только при `manual=true`.\n   */\n  opened?: boolean;\n  /**\n   * Расположение подсказки относительно текста.\n   *\n   * **Допустимые значения**: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n   */\n  pos: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;\n  /**\n   * Текст подсказки.\n   */\n  text: React.ReactNode;\n  /**\n   * Отключает анимацию.\n   */\n  disableAnimations: boolean;\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.\n   *\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.\n   */\n  useWrapper: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\n}\n\nconst Positions: PopupPositionsType[] = [\n  'top center',\n  'top left',\n  'top right',\n  'bottom center',\n  'bottom left',\n  'bottom right',\n  'left middle',\n  'left top',\n  'left bottom',\n  'right middle',\n  'right top',\n  'right bottom',\n];\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n\n  public static defaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  public state: HintState = {\n    opened: this.props.manual ? !!this.props.opened : false,\n  };\n\n  private timer: Nullable<number> = null;\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidUpdate(prevProps: HintProps) {\n    if (!this.props.manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (this.props.opened !== prevProps.opened) {\n      this.setState({ opened: !!this.props.opened });\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.hintPinOffset,\n                  popupMargin: theme.hintMargin,\n                  popupBorder: theme.hintBorder,\n                  popupBorderRadius: theme.hintBorderRadius,\n                },\n                this.theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Popup\n          hasPin\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={this.getPositions()}\n          backgroundColor={this.theme.hintBgColor}\n          borderColor={HINT_BORDER_COLOR}\n          disableAnimations={this.props.disableAnimations}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          useWrapper={this.props.useWrapper}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { pos, maxWidth } = this.props;\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\n    });\n    return (\n      <div className={className} style={{ maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPositionsType[] => {\n    return Positions.filter((x) => x.startsWith(this.props.pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.props.manual && !this.timer) {\n      this.timer = window.setTimeout(this.open, 400);\n    }\n\n    if (this.props.onMouseEnter) {\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: MouseEventType) => {\n    if (!this.props.manual && this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n      this.setState({ opened: false });\n    }\n\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}

package/cjs/components/Hint/Hint.md

@@ -1,3 +1,42 @@
-```jsx harmony
-<Hint text="World">Hello</Hint>
-```
+Базовый пример всплывающей подсказки.
+
+```jsx harmony
+<Hint text="Подсказка">Базовая</Hint>
+```
+
+Пример подсказки, всегда всплывающей слева.
+
+```jsx harmony
+<Hint pos={"left"} text="Подсказка слева">Всегда всплывает слева</Hint>
+```
+
+Пример всплывающей подсказки с ограниченной шириной.
+```jsx harmony
+<Hint
+  maxWidth="150px"
+  text="Очень много текста, рассказывающего про этот очень непонятный элемент"
+  >
+  Очень непонятный элемент
+</Hint>
+```
+
+Пример всплывающей подсказки, открытие которой контролируется кнопкой.
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+const [isOpen, setIsOpen] = React.useState(false);
+
+<Gapped>
+  <Hint opened={isOpen} manual text="Подсказка">Управляемая удалённо</Hint>
+  <Button onClick={() => setIsOpen(!isOpen)}>
+    {isOpen ? "Закрыть подсказку" : "Открыть подсказку"}
+  </Button>
+</Gapped>
+```
+
+Пример подсказки, всплывающей без анимации.
+
+```jsx harmony
+<Hint disableAnimations text={"Нет анимации :("}>Есть анимация?</Hint>
+```

package/cjs/components/Hint/Hint.styles.d.ts

@@ -1,4 +1,5 @@
-export declare const jsStyles: {
-    content(): string;
-    contentCenter(): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    content(t: Theme): string;
+    contentCenter(t: Theme): string;
 };

package/cjs/components/Hint/Hint.styles.js

@@ -1,24 +1,23 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-align: center;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-sizing: border-box;\n      color: #fff;\n      font-size: 14px;\n      max-width: 200px;\n      overflow-wrap: break-word;\n      padding: 6px 8px;\n      word-break: break-word;\n      word-wrap: break-word;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
-
-var styles = {
-  content: function content() {
-    return (0, _Emotion.css)(_templateObject());
-
-
-
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
 
+var styles = (0, _Emotion.memoizeStyle)({
+  content: function content(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-sizing: border-box;\n      color: ", ";\n      font-size: ", ";\n      line-height: ", "\n      max-width: ", ";\n      overflow-wrap: break-word;\n      padding: ", " ", ";\n      word-break: break-word;\n      word-wrap: break-word;\n    "])),
 
+    t.hintColor,
+    t.hintFontSize,
+    t.hintLineHeight,
+    t.hintMaxWidth,
 
+    t.hintPaddingY, t.hintPaddingX);
 
 
 
   },
 
-  contentCenter: function contentCenter() {
-    return (0, _Emotion.css)(_templateObject2());
-
-
-  } };
-
+  contentCenter: function contentCenter(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-align: ", ";\n    "])),
+    t.hintTextAlign);
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

package/cjs/components/Hint/Hint.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Hint.styles.ts"],"names":["styles","content","css","contentCenter","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,OADa,qBACH;AACR,eAAOC,YAAP;;;;;;;;;;AAUD,GAZY;;AAcbC,EAAAA,aAda,2BAcG;AACd,eAAOD,YAAP;;;AAGD,GAlBY,EAAf;;;AAqBO,IAAME,QAAQ,GAAG,2BAAaJ,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  content() {\r\n    return css`\r\n      box-sizing: border-box;\r\n      color: #fff;\r\n      font-size: 14px;\r\n      max-width: 200px;\r\n      overflow-wrap: break-word;\r\n      padding: 6px 8px;\r\n      word-break: break-word;\r\n      word-wrap: break-word;\r\n    `;\r\n  },\r\n\r\n  contentCenter() {\r\n    return css`\r\n      text-align: center;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Hint.styles.ts"],"names":["styles","content","t","css","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign"],"mappings":";AACA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,OADiC,mBACzBC,CADyB,EACf;AAChB,eAAOC,YAAP;;AAEWD,IAAAA,CAAC,CAACE,SAFb;AAGeF,IAAAA,CAAC,CAACG,YAHjB;AAIiBH,IAAAA,CAAC,CAACI,cAJnB;AAKeJ,IAAAA,CAAC,CAACK,YALjB;;AAOaL,IAAAA,CAAC,CAACM,YAPf,EAO+BN,CAAC,CAACO,YAPjC;;;;AAWD,GAbgC;;AAejCC,EAAAA,aAfiC,yBAenBR,CAfmB,EAeT;AACtB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACS,aADlB;;AAGD,GAnBgC,EAAb,CAAf,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  content(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      color: ${t.hintColor};\n      font-size: ${t.hintFontSize};\n      line-height: ${t.hintLineHeight}\n      max-width: ${t.hintMaxWidth};\n      overflow-wrap: break-word;\n      padding: ${t.hintPaddingY} ${t.hintPaddingX};\n      word-break: break-word;\n      word-wrap: break-word;\n    `;\n  },\n\n  contentCenter(t: Theme) {\n    return css`\n      text-align: ${t.hintTextAlign};\n    `;\n  },\n});\n"]}

package/cjs/components/Hint/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Hint';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Hint';\n"]}

package/cjs/components/Input/Input.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Nullable, Override } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
 export declare type InputSize = 'small' | 'medium' | 'large';
 export declare type InputAlign = 'left' | 'center' | 'right';
 export declare type InputType = 'password' | 'text';
 export declare type InputIconType = React.ReactNode | (() => React.ReactNode);
-export declare type InputProps = Override<React.InputHTMLAttributes<HTMLInputElement>, {
+export interface InputProps extends CommonProps, Override<React.InputHTMLAttributes<HTMLInputElement>, {
     /**
      * Иконка слева
      * Если `ReactNode` применяются дефолтные стили для иконки
@@ -17,9 +18,13 @@ export declare type InputProps = Override<React.InputHTMLAttributes<HTMLInputEle
      * Если `() => ReactNode` применяются только стили для позиционирование
      */
     rightIcon?: InputIconType;
-    /** Состояние ошибки */
+    /**
+     * Cостояние валидации при ошибке.
+     */
     error?: boolean;
-    /** Состояние предупреждения */
+    /**
+     * Cостояние валидации при предупреждении.
+     */
     warning?: boolean;
     /** Режим прозрачной рамки */
     borderless?: boolean;
@@ -73,7 +78,8 @@ export declare type InputProps = Override<React.InputHTMLAttributes<HTMLInputEle
      * @param value значение инпута.
      */
     onUnexpectedInput?: (value: string) => void;
-}>;
+}> {
+}
 export interface InputState {
     blinking: boolean;
     focused: boolean;
@@ -93,9 +99,12 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private theme;
     private blinkTimeout;
     private input;
+    private setRootNode;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: InputProps): void;
+    static getDerivedStateFromProps(props: InputProps, state: InputState): InputState | {
+        polyfillPlaceholder: boolean;
+    };
     /**
      * @public
      */
@@ -104,12 +113,18 @@ export declare class Input extends React.Component<InputProps, InputState> {
      * @public
      */
     blur(): void;
+    /**
+     * @public
+     */
+    getNode(): HTMLInputElement | null;
     /**
      * @public
      */
     blink(): void;
     /**
      * @public
+     * @param {number} start
+     * @param {number} end
      */
     setSelectionRange(start: number, end: number): void;
     get isMaskVisible(): boolean;

package/cjs/components/Input/Input.js

@@ -1,7 +1,6 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Input = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _invariant = _interopRequireDefault(require("invariant"));
 var _react = _interopRequireDefault(require("react"));
 var _raf = _interopRequireDefault(require("raf"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var _client = require("../../lib/client");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -10,8 +9,11 @@ var _polyfillPlaceholder = require("../../lib/polyfillPlaceholder");
 var _MaskedInput = require("../../internal/MaskedInput");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
 
-var _Input = require("./Input.styles");
+var _Input = require("./Input.styles");var _class, _class2, _temp;
 
 
 
@@ -99,11 +101,18 @@ var _Input = require("./Input.styles");
 
 
 
-/**
- * Интерфес пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
- *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
+
+
+
+
+
+
+/**
+ * Интерфес пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
+ *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
  */var
-Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Input, _React$Component);function Input() {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.
+
+Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Input, _React$Component);function Input() {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.
 
 
 
@@ -122,6 +131,21 @@ Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(I
     theme = void 0;_this.
     blinkTimeout = 0;_this.
     input = null;_this.
+    setRootNode = void 0;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -240,7 +264,9 @@ Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(I
       }
     };_this.
 
+    renderMain = function (props) {var _cx, _cx2;var
 
+      onMouseEnter =
 
 
 
@@ -267,70 +293,70 @@ Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(I
 
 
 
+      props.onMouseEnter,onMouseLeave = props.onMouseLeave,onMouseOver = props.onMouseOver,onKeyDown = props.onKeyDown,onKeyPress = props.onKeyPress,onValueChange = props.onValueChange,width = props.width,error = props.error,warning = props.warning,leftIcon = props.leftIcon,rightIcon = props.rightIcon,borderless = props.borderless,value = props.value,align = props.align,type = props.type,mask = props.mask,maskChar = props.maskChar,alwaysShowMask = props.alwaysShowMask,size = props.size,placeholder = props.placeholder,selectAllOnFocus = props.selectAllOnFocus,disabled = props.disabled,onUnexpectedInput = props.onUnexpectedInput,prefix = props.prefix,suffix = props.suffix,formatChars = props.formatChars,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars"]);var _this$state =
 
+      _this.state,blinking = _this$state.blinking,focused = _this$state.focused;
 
+      var labelProps = {
+        className: (0, _Emotion.cx)(_Input.styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[
+        _Input.styles.focus(_this.theme)] = focused, _cx[
+        _Input.styles.blink(_this.theme)] = blinking, _cx[
+        _Input.styles.borderless()] = borderless && !focused, _cx[
+        _Input.styles.disabled(_this.theme)] = disabled, _cx[
+        _Input.styles.warning(_this.theme)] = warning, _cx[
+        _Input.styles.error(_this.theme)] = error, _cx[
+        _Input.styles.focusFallback(_this.theme)] = focused && (_client.isIE11 || _client.isEdge), _cx[
+        _Input.styles.warningFallback(_this.theme)] = warning && (_client.isIE11 || _client.isEdge), _cx[
+        _Input.styles.errorFallback(_this.theme)] = error && (_client.isIE11 || _client.isEdge), _cx)),
 
+        style: { width: width },
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onMouseOver: onMouseOver };
 
 
+      var inputProps = (0, _extends2.default)({},
+      rest, {
+        className: (0, _Emotion.cx)(_Input.styles.input(_this.theme), (_cx2 = {}, _cx2[
+        _Input.styles.inputFocus(_this.theme)] = focused, _cx2[
+        _Input.styles.inputDisabled(_this.theme)] = disabled, _cx2)),
 
+        value: value,
+        onChange: _this.handleChange,
+        onFocus: _this.handleFocus,
+        onKeyDown: _this.handleKeyDown,
+        onKeyPress: _this.handleKeyPress,
+        onBlur: _this.handleBlur,
+        style: { textAlign: align },
+        ref: _this.refInput,
+        type: 'text',
+        placeholder: !_this.isMaskVisible && !_polyfillPlaceholder.polyfillPlaceholder ? placeholder : undefined,
+        disabled: disabled });
 
 
+      if (type === 'password') {
+        inputProps.type = type;
+      }
 
+      var input = mask ? _this.renderMaskedInput(inputProps, mask) : /*#__PURE__*/_react.default.createElement('input', inputProps);
 
+      return /*#__PURE__*/(
+        _react.default.createElement("label", labelProps, /*#__PURE__*/
+        _react.default.createElement("span", { className: _Input.styles.sideContainer() },
+        _this.renderLeftIcon(),
+        _this.renderPrefix()), /*#__PURE__*/
 
+        _react.default.createElement("span", { className: _Input.styles.wrapper() },
+        input,
+        _this.renderPlaceholder()), /*#__PURE__*/
 
+        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.sideContainer(), _Input.styles.rightContainer()) },
+        _this.renderSuffix(),
+        _this.renderRightIcon())));
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+    };_this.
 
 
 
@@ -465,7 +491,7 @@ Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(I
 
       if (_this.props.selectAllOnFocus) {
         // https://github.com/facebook/react/issues/7769
-        _this.input ? _this.selectAll() : _this.delaySelectAll();
+        _this.input && !_client.isIE11 ? _this.selectAll() : _this.delaySelectAll();
       }
 
       if (_this.props.onFocus) {
@@ -517,34 +543,42 @@ Input = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(I
       }
     };_this.
 
-    renderPrefix = function () {var
-      prefix = _this.props.prefix;
+    renderPrefix = function () {var _cx3;var _this$props =
+      _this.props,prefix = _this$props.prefix,disabled = _this$props.disabled;
 
       if (!prefix) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement("span", { className: _Input.jsStyles.prefix(_this.theme) }, prefix);
+      return /*#__PURE__*/(
+        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.prefix(_this.theme), (_cx3 = {}, _cx3[_Input.styles.prefixDisabled(_this.theme)] = disabled, _cx3)) }, prefix));
+
     };_this.
 
-    renderSuffix = function () {var
-      suffix = _this.props.suffix;
+    renderSuffix = function () {var _cx4;var _this$props2 =
+      _this.props,suffix = _this$props2.suffix,disabled = _this$props2.disabled;
 
       if (!suffix) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement("span", { className: _Input.jsStyles.suffix(_this.theme) }, suffix);
-    };return _this;}var _proto = Input.prototype;_proto.componentDidMount = function componentDidMount() {if (_polyfillPlaceholder.polyfillPlaceholder) {this.setState({ polyfillPlaceholder: true });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.blinkTimeout) {clearTimeout(this.blinkTimeout);}this.cancelDelayedSelectAll();};_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {if (_polyfillPlaceholder.polyfillPlaceholder && !nextProps.value) {this.setState({ polyfillPlaceholder: true });}} /**
-   * @public
-   */;_proto.focus = function focus() {(0, _invariant.default)(this.input, 'Cannot call "focus" because Input is not mounted');this.input.focus();} /**
-   * @public
-   */;_proto.blur = function blur() {(0, _invariant.default)(this.input, 'Cannot call "blur" because Input is not mounted');this.input.blur();} /**
-   * @public
+      return /*#__PURE__*/(
+        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.suffix(_this.theme), (_cx4 = {}, _cx4[_Input.styles.suffixDisabled(_this.theme)] = disabled, _cx4)) }, suffix));
+
+    };return _this;}var _proto = Input.prototype;_proto.componentDidMount = function componentDidMount() {if (_polyfillPlaceholder.polyfillPlaceholder) {this.setState({ polyfillPlaceholder: true });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.blinkTimeout) {clearTimeout(this.blinkTimeout);}this.cancelDelayedSelectAll();};Input.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {if (_polyfillPlaceholder.polyfillPlaceholder && !props.value) {return { polyfillPlaceholder: true };}return state;} /**
+   * @public
+   */;_proto.focus = function focus() {(0, _invariant.default)(this.input, 'Cannot call "focus" because Input is not mounted');this.input.focus();} /**
+   * @public
+   */;_proto.blur = function blur() {(0, _invariant.default)(this.input, 'Cannot call "blur" because Input is not mounted');this.input.blur();} /**
+   * @public
+   */;_proto.getNode = function getNode() {return this.input;} /**
+   * @public
    */;_proto.blink = function blink() {var _this2 = this;if (this.blinkTimeout) {this.cancelBlink(function () {// trigger reflow to restart animation
         // @see https://css-tricks.com/restart-css-animation/#article-header-id-0
-        void (_this2.input && _this2.input.offsetWidth);_this2.blink();});return;}this.setState({ blinking: true }, function () {_this2.blinkTimeout = window.setTimeout(_this2.cancelBlink, 150);});} /**
-   * @public
-   */;_proto.setSelectionRange = function setSelectionRange(start, end) {if (!this.input) {throw new Error('Cannot call "setSelectionRange" on unmounted Input');}if (document.activeElement !== this.input) {this.focus();}this.input.setSelectionRange(start, end);};_proto.render = function render() {var _this3 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this3.theme = theme;return _this3.renderMain();});} /**
-   * @public
-   */;_proto.renderMain = function renderMain() {var _cn;var _this$props = this.props,onMouseEnter = _this$props.onMouseEnter,onMouseLeave = _this$props.onMouseLeave,onMouseOver = _this$props.onMouseOver,onKeyDown = _this$props.onKeyDown,onKeyPress = _this$props.onKeyPress,onValueChange = _this$props.onValueChange,width = _this$props.width,error = _this$props.error,warning = _this$props.warning,leftIcon = _this$props.leftIcon,rightIcon = _this$props.rightIcon,borderless = _this$props.borderless,value = _this$props.value,align = _this$props.align,type = _this$props.type,mask = _this$props.mask,maskChar = _this$props.maskChar,alwaysShowMask = _this$props.alwaysShowMask,style = _this$props.style,className = _this$props.className,size = _this$props.size,placeholder = _this$props.placeholder,selectAllOnFocus = _this$props.selectAllOnFocus,disabled = _this$props.disabled,onUnexpectedInput = _this$props.onUnexpectedInput,prefix = _this$props.prefix,suffix = _this$props.suffix,formatChars = _this$props.formatChars,rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "style", "className", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars"]);var _this$state = this.state,blinking = _this$state.blinking,focused = _this$state.focused;var labelProps = { className: (0, _classnames.default)(_Input.jsStyles.root(this.theme), this.getSizeClassName(), (_cn = {}, _cn[_Input.jsStyles.borderless()] = !!borderless, _cn[_Input.jsStyles.focus(this.theme)] = focused, _cn[_Input.jsStyles.blink(this.theme)] = !!blinking, _cn[_Input.jsStyles.warning(this.theme)] = !!warning, _cn[_Input.jsStyles.error(this.theme)] = !!error, _cn[_Input.jsStyles.disabled(this.theme)] = !!disabled, _cn[_Input.jsStyles.focusFallback(this.theme)] = focused && (_client.isIE11 || _client.isEdge), _cn[_Input.jsStyles.warningFallback(this.theme)] = !!warning && (_client.isIE11 || _client.isEdge), _cn[_Input.jsStyles.errorFallback(this.theme)] = !!error && (_client.isIE11 || _client.isEdge), _cn)), style: { width: width }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver };var inputProps = (0, _extends2.default)({}, rest, { className: _Input.jsStyles.input(this.theme), value: value, onChange: this.handleChange, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onBlur: this.handleBlur, style: { textAlign: align }, ref: this.refInput, type: 'text', placeholder: !this.isMaskVisible && !_polyfillPlaceholder.polyfillPlaceholder ? placeholder : undefined, disabled: disabled });if (type === 'password') {inputProps.type = type;}var input = mask ? this.renderMaskedInput(inputProps, mask) : /*#__PURE__*/_react.default.createElement('input', inputProps);return /*#__PURE__*/_react.default.createElement("label", labelProps, /*#__PURE__*/_react.default.createElement("span", { className: _Input.jsStyles.sideContainer() }, this.renderLeftIcon(), this.renderPrefix()), /*#__PURE__*/_react.default.createElement("span", { className: _Input.jsStyles.wrapper() }, input, this.renderPlaceholder()), /*#__PURE__*/_react.default.createElement("span", { className: (0, _classnames.default)(_Input.jsStyles.sideContainer(), _Input.jsStyles.rightContainer()) }, this.renderSuffix(), this.renderRightIcon()));};_proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {return /*#__PURE__*/_react.default.createElement(_MaskedInput.MaskedInput, (0, _extends2.default)({}, inputProps, { mask: mask, maskChar: this.props.maskChar, alwaysShowMask: this.props.alwaysShowMask, formatChars: this.props.formatChars, onChange: this.props.onChange, onValueChange: this.handleMaskedValueChange, onUnexpectedInput: this.handleUnexpectedInput }));};_proto.getIconSizeClassname = function getIconSizeClassname(right) {if (right === void 0) {right = false;}switch (this.props.size) {case 'large':return right ? _Input.jsStyles.rightIconLarge(this.theme) : _Input.jsStyles.leftIconLarge(this.theme);case 'medium':return right ? _Input.jsStyles.rightIconMedium(this.theme) : _Input.jsStyles.leftIconMedium(this.theme);case 'small':default:return right ? _Input.jsStyles.rightIconSmall(this.theme) : _Input.jsStyles.leftIconSmall(this.theme);}};_proto.renderLeftIcon = function renderLeftIcon() {return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());};_proto.renderRightIcon = function renderRightIcon() {return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));};_proto.renderIcon = function renderIcon(icon, sizeClassName) {if (!icon) {return null;}if (icon instanceof Function) {return /*#__PURE__*/_react.default.createElement("span", { className: (0, _classnames.default)(_Input.jsStyles.icon(), sizeClassName) }, icon());}return /*#__PURE__*/_react.default.createElement("span", { className: (0, _classnames.default)((0, _classnames.default)(_Input.jsStyles.icon(), sizeClassName), _Input.jsStyles.useDefaultColor(this.theme), _Input.jsStyles.useDefaultColor(this.theme)) }, icon);};_proto.renderPlaceholder = function renderPlaceholder() {var placeholder = null;if (this.state.polyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value) {placeholder = /*#__PURE__*/_react.default.createElement("div", { className: (0, _classnames.default)(_Input.jsStyles.placeholder(this.theme), _Input.jsStyles.placeholder(this.theme)), style: { textAlign: this.props.align || 'inherit' } }, this.props.placeholder);}return placeholder;};_proto.getSizeClassName = function getSizeClassName() {var _ref, _ref2, _ref3;switch (this.props.size) {case 'large':return _ref = {}, _ref[_Input.jsStyles.sizeLarge(this.theme)] = true, _ref[_Input.jsStyles.sizeLargeFallback(this.theme)] = _client.isIE11 || _client.isEdge, _ref;case 'medium':return _ref2 = {}, _ref2[_Input.jsStyles.sizeMedium(this.theme)] = true, _ref2[_Input.jsStyles.sizeMediumFallback(this.theme)] = _client.isIE11 || _client.isEdge, _ref2;case 'small':default:return _ref3 = {}, _ref3[_Input.jsStyles.sizeSmall(this.theme)] = true, _ref3[_Input.jsStyles.sizeSmallFallback(this.theme)] = _client.isIE11 || _client.isEdge, _ref3;}};(0, _createClass2.default)(Input, [{ key: "isMaskVisible", get: function get() {var _this$props2 = this.props,mask = _this$props2.mask,alwaysShowMask = _this$props2.alwaysShowMask;var focused = this.state.focused;return Boolean(mask && (focused || alwaysShowMask));} }]);return Input;}(_react.default.Component);exports.Input = Input;Input.__KONTUR_REACT_UI__ = 'Input';Input.defaultProps = { size: 'small' };
+        void (_this2.input && _this2.input.offsetWidth);_this2.blink();});return;}this.setState({ blinking: true }, function () {_this2.blinkTimeout = window.setTimeout(_this2.cancelBlink, 150);});} /**
+   * @public
+   * @param {number} start
+   * @param {number} end
+   */;_proto.setSelectionRange = function setSelectionRange(start, end) {if (!this.input) {throw new Error('Cannot call "setSelectionRange" on unmounted Input');}if (document.activeElement !== this.input) {this.focus();}this.input.setSelectionRange(start, end);};_proto.render = function render() {var _this3 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this3.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this3.setRootNode }, _this3.props), _this3.renderMain);});} /**
+   * @public
+   */;_proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {return /*#__PURE__*/_react.default.createElement(_MaskedInput.MaskedInput, (0, _extends2.default)({}, inputProps, { mask: mask, maskChar: this.props.maskChar, alwaysShowMask: this.props.alwaysShowMask, formatChars: this.props.formatChars, onChange: this.props.onChange, onValueChange: this.handleMaskedValueChange, onUnexpectedInput: this.handleUnexpectedInput }));};_proto.getIconSizeClassname = function getIconSizeClassname(right) {if (right === void 0) {right = false;}switch (this.props.size) {case 'large':return right ? _Input.styles.rightIconLarge(this.theme) : _Input.styles.leftIconLarge(this.theme);case 'medium':return right ? _Input.styles.rightIconMedium(this.theme) : _Input.styles.leftIconMedium(this.theme);case 'small':default:return right ? _Input.styles.rightIconSmall(this.theme) : _Input.styles.leftIconSmall(this.theme);}};_proto.renderLeftIcon = function renderLeftIcon() {return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());};_proto.renderRightIcon = function renderRightIcon() {return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));};_proto.renderIcon = function renderIcon(icon, sizeClassName) {var _cx5;if (!icon) {return null;}var disabled = this.props.disabled;var iconNode = icon instanceof Function ? icon() : icon;return /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Input.styles.icon(), sizeClassName, _Input.styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[_Input.styles.iconDisabled()] = disabled, _cx5)) }, iconNode);};_proto.renderPlaceholder = function renderPlaceholder() {var disabled = this.props.disabled;var focused = this.state.focused;var placeholder = null;if (this.state.polyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value) {var _cx6;placeholder = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Input.styles.placeholder(this.theme), (_cx6 = {}, _cx6[_Input.styles.placeholderDisabled(this.theme)] = disabled, _cx6[_Input.styles.placeholderFocus(this.theme)] = focused, _cx6)), style: { textAlign: this.props.align || 'inherit' } }, this.props.placeholder);}return placeholder;};_proto.getSizeClassName = function getSizeClassName() {var _cx7, _cx8, _cx9;switch (this.props.size) {case 'large':return (0, _Emotion.cx)((_cx7 = {}, _cx7[_Input.styles.sizeLarge(this.theme)] = true, _cx7[_Input.styles.sizeLargeFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx7));case 'medium':return (0, _Emotion.cx)((_cx8 = {}, _cx8[_Input.styles.sizeMedium(this.theme)] = true, _cx8[_Input.styles.sizeMediumFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx8));case 'small':default:return (0, _Emotion.cx)((_cx9 = {}, _cx9[_Input.styles.sizeSmall(this.theme)] = true, _cx9[_Input.styles.sizeSmallFallback(this.theme)] = _client.isIE11 || _client.isEdge, _cx9));}};(0, _createClass2.default)(Input, [{ key: "isMaskVisible", get: function get() {var _this$props3 = this.props,mask = _this$props3.mask,alwaysShowMask = _this$props3.alwaysShowMask;var focused = this.state.focused;return Boolean(mask && (focused || alwaysShowMask));} }]);return Input;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Input', _class2.defaultProps = { size: 'small' }, _temp)) || _class;exports.Input = Input;