@skbkontur/react-ui 0.0.0-4c5579465d → 0.0.0-4da47ece08

package/cjs/components/Hint/Hint.js

@@ -1,4 +1,11 @@
-"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"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;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 _globalObject = require("@skbkontur/global-object");
+var _lodash = _interopRequireDefault(require("lodash.isequal"));
+
+var _featureFlagsContext = require("../../lib/featureFlagsContext");
+
+
+
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _ThemeFactory = require("../../lib/theming/ThemeFactory");
@@ -12,7 +19,7 @@ var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 
 var _createPropsGetter = require("../../lib/createPropsGetter");
-var _SSRSafe = require("../../lib/SSRSafe");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
 var _Hint = require("./Hint.styles");var _class, _class2, _temp;
 
@@ -71,7 +78,13 @@ var HINT_BORDER_COLOR = 'transparent';
 
 
 
-var Positions = [
+
+
+
+
+
+
+var OldPositions = [
 'top center',
 'top left',
 'top right',
@@ -88,8 +101,6 @@ var Positions = [
 
 
 
-
-
 /**
  * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
  */var
@@ -113,10 +124,12 @@ Hint = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
       position: _Popup.DUMMY_LOCATION.position };_this.
 
 
-    timer = null;_this.
 
 
 
+
+    positions = null;_this.
+
     popupRef = /*#__PURE__*/_react.default.createRef();_this.
 
 
@@ -169,6 +182,31 @@ Hint = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -213,13 +251,44 @@ Hint = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
     getPositions = function () {
-      return Positions.filter(function (x) {return x.startsWith(_this.getProps().pos);});
+      if (_this.featureFlags.popupUnifyPositioning) {
+        return _this.props.allowedPositions;
+      }
+      var pos = _this.props.pos ? _this.props.pos : 'top';
+      var allowedPositions = _this.getAllowedPositions();
+      if (_this.featureFlags.hintAddDynamicPositioning) {
+        if (!_this.positions) {
+          var priorityPosition;
+          switch (pos) {
+            case 'top':
+              priorityPosition = 'top center';
+              break;
+            case 'bottom':
+              priorityPosition = 'bottom center';
+              break;
+            case 'left':
+              priorityPosition = 'left middle';
+              break;
+            case 'right':
+              priorityPosition = 'right middle';
+              break;
+            default:
+              priorityPosition = pos;}
+
+          var index = allowedPositions.indexOf(priorityPosition);
+          if (index === -1) {
+            throw new Error('Unexpected position passed to Hint. Expected one of: ' + allowedPositions.join(', '));
+          }
+          _this.positions = [].concat(allowedPositions.slice(index), allowedPositions.slice(0, index));
+        }
+        return _this.positions;
+      }
+      return OldPositions.filter(function (x) {return x.startsWith(pos);});
     };_this.
 
     handleMouseEnter = function (e) {
       if (!_this.getProps().manual && !_this.timer) {
-        //@ts-expect-error error
-        _this.timer = _SSRSafe.globalThat.setTimeout(_this.open, 400);
+        _this.timer = _globalObject.globalObject.setTimeout(_this.open, 400);
       }
 
       if (_this.props.onMouseEnter) {
@@ -229,7 +298,7 @@ Hint = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
     handleMouseLeave = function (e) {
       if (!_this.getProps().manual && _this.timer) {
-        clearTimeout(_this.timer);
+        _globalObject.globalObject.clearTimeout(_this.timer);
         _this.timer = null;
         _this.setState({ opened: false });
       }
@@ -241,4 +310,4 @@ Hint = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
     open = function () {
       _this.setState({ opened: true });
-    };return _this;}var _proto = Hint.prototype;_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$getProps = this.getProps(),opened = _this$getProps.opened,manual = _this$getProps.manual;if (!manual) {return;}if (this.timer) {clearTimeout(this.timer);this.timer = null;}if (opened !== prevProps.opened) {this.setState({ opened: !!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() {var _this3 = this;var _this$getProps2 = this.getProps(),disableAnimations = _this$getProps2.disableAnimations,useWrapper = _this$getProps2.useWrapper;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, onPositionChange: function onPositionChange(position) {return _this3.setState({ position: position });}, disableAnimations: disableAnimations, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper, ref: this.popupRef, withoutMobile: true }, this.renderContent()));};_proto.renderContent = function renderContent() {var _cx;if (!this.props.text) {return null;}var _this$getProps3 = this.getProps(),maxWidth = _this$getProps3.maxWidth;var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];var className = (0, _Emotion.cx)((_cx = {}, _cx[_Hint.styles.content(this.theme)] = true, _cx[_Hint.styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _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;
+    };return _this;}var _proto = Hint.prototype;_proto.getAllowedPositions = function getAllowedPositions() {return this.props.allowedPositions ? this.props.allowedPositions : OldPositions;};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$getProps = this.getProps(),opened = _this$getProps.opened,manual = _this$getProps.manual;if (!manual) {return;}if (this.timer) {_globalObject.globalObject.clearTimeout(this.timer);this.timer = null;}if (opened !== prevProps.opened) {this.setState({ opened: !!opened });}if (this.featureFlags.hintAddDynamicPositioning && !this.featureFlags.popupUnifyPositioning) {var pos = this.props.pos ? this.props.pos : 'top';var allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions;var posChanged = prevProps.pos !== pos;var allowedChanged = !(0, _lodash.default)(prevProps.allowedPositions, allowedPositions);if (posChanged || allowedChanged) {this.positions = null;}}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.timer) {_globalObject.globalObject.clearTimeout(this.timer);this.timer = null;}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);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() {var _this3 = this;var _this$getProps2 = this.getProps(),disableAnimations = _this$getProps2.disableAnimations,useWrapper = _this$getProps2.useWrapper;var hasPin = !this.featureFlags.kebabHintRemovePin || !(0, _ThemeHelpers.isTheme2022)(this.theme);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, { hasPin: hasPin, opened: this.state.opened, anchorElement: this.props.children, positions: this.getPositions(), pos: this.props.pos, backgroundColor: this.theme.hintBgColor, borderColor: HINT_BORDER_COLOR, onPositionChange: function onPositionChange(position) {return _this3.setState({ position: position });}, disableAnimations: disableAnimations, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper, ref: this.popupRef, withoutMobile: true }, this.renderContent()));};_proto.renderContent = function renderContent() {var _cx;if (!this.props.text) {return null;}var _this$getProps3 = this.getProps(),maxWidth = _this$getProps3.maxWidth;var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];var className = (0, _Emotion.cx)((_cx = {}, _cx[_Hint.styles.content(this.theme)] = true, _cx[_Hint.styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _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.displayName = 'Hint', _class2.defaultProps = { 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_BORDER_COLOR","Positions","Hint","rootNode","getProps","defaultProps","state","opened","manual","position","DUMMY_LOCATION","timer","popupRef","React","createRef","getAnchorElement","current","anchorElement","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","globalThat","setTimeout","open","props","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","componentWillUnmount","render","theme","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","disableAnimations","useWrapper","setRootNode","children","hintBgColor","renderContent","text","maxWidth","centerAlignPositions","className","styles","content","contentCenter","includes","PureComponent","__KONTUR_REACT_UI__","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 { DUMMY_LOCATION, 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';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { globalThat } from '../../lib/SSRSafe';\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   * В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `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  position: PopupPositionsType;\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\ntype DefaultProps = Required<\n  Pick<HintProps, 'pos' | 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>\n>;\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n\n  public static defaultProps: DefaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  private getProps = createPropsGetter(Hint.defaultProps);\n\n  public state: HintState = {\n    opened: this.getProps().manual ? !!this.getProps().opened : false,\n    position: DUMMY_LOCATION.position,\n  };\n\n  private timer: Nullable<number> = null;\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  private popupRef = React.createRef<Popup>();\n\n  public componentDidUpdate(prevProps: HintProps) {\n    const { opened, manual } = this.getProps();\n    if (!manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (opened !== prevProps.opened) {\n      this.setState({ opened: !!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    const { disableAnimations, useWrapper } = this.getProps();\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          onPositionChange={(position) => this.setState({ position })}\n          disableAnimations={disableAnimations}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          useWrapper={useWrapper}\n          ref={this.popupRef}\n          withoutMobile\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  public getAnchorElement = (): Nullable<Element> => {\n    return this.popupRef.current?.anchorElement;\n  };\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { maxWidth } = this.getProps();\n    const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: centerAlignPositions.includes(this.state.position),\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.getProps().pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.getProps().manual && !this.timer) {\n      //@ts-expect-error error\n      this.timer = globalThat.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.getProps().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"]}
+{"version":3,"sources":["Hint.tsx"],"names":["HINT_BORDER_COLOR","OldPositions","Hint","rootNode","getProps","defaultProps","state","opened","manual","position","DUMMY_LOCATION","positions","popupRef","React","createRef","getAnchorElement","current","anchorElement","getPositions","featureFlags","popupUnifyPositioning","props","allowedPositions","pos","getAllowedPositions","hintAddDynamicPositioning","priorityPosition","index","indexOf","Error","join","slice","filter","x","startsWith","handleMouseEnter","e","timer","globalObject","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","posChanged","allowedChanged","componentWillUnmount","render","flags","theme","ThemeFactory","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","disableAnimations","useWrapper","hasPin","kebabHintRemovePin","setRootNode","children","hintBgColor","renderContent","text","maxWidth","centerAlignPositions","className","styles","content","contentCenter","includes","PureComponent","__KONTUR_REACT_UI__","displayName","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\nimport isEqual from 'lodash.isequal';\n\nimport {\n  ReactUIFeatureFlags,\n  ReactUIFeatureFlagsContext,\n  getFullReactUIFlagsContext,\n} from '../../lib/featureFlagsContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DUMMY_LOCATION, Popup, PopupPositionsType, ShortPopupPositionsType } 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';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\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   * В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `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?: ShortPopupPositionsType | PopupPositionsType;\n  /**\n   * Текст подсказки.\n   */\n  text: React.ReactNode;\n  /**\n   * Список позиций, которые хинт будет занимать. Если положение хинт в определенной позиции будет выходить\n   * за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`.\n   * Для применения этого пропа необходимо включить фиче-флаг hintAddDynamicPositioning.\n   */\n  allowedPositions?: PopupPositionsType[];\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  position: PopupPositionsType;\n}\n\nconst OldPositions: 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\ntype DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n  public static displayName = 'Hint';\n\n  public static defaultProps: DefaultProps = {\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  private getProps = createPropsGetter(Hint.defaultProps);\n\n  public state: HintState = {\n    opened: this.getProps().manual ? !!this.getProps().opened : false,\n    position: DUMMY_LOCATION.position,\n  };\n\n  private timer: SafeTimer;\n  private theme!: Theme;\n  private featureFlags!: ReactUIFeatureFlags;\n  private setRootNode!: TSetRootNode;\n  private positions: Nullable<PopupPositionsType[]> = null;\n\n  private popupRef = React.createRef<Popup>();\n\n  public getAllowedPositions() {\n    return this.props.allowedPositions ? this.props.allowedPositions : OldPositions;\n  }\n\n  public componentDidUpdate(prevProps: HintProps) {\n    const { opened, manual } = this.getProps();\n    if (!manual) {\n      return;\n    }\n    if (this.timer) {\n      globalObject.clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (opened !== prevProps.opened) {\n      this.setState({ opened: !!opened });\n    }\n\n    if (this.featureFlags.hintAddDynamicPositioning && !this.featureFlags.popupUnifyPositioning) {\n      const pos = this.props.pos ? this.props.pos : 'top';\n      const allowedPositions = this.props.allowedPositions ? this.props.allowedPositions : OldPositions;\n      const posChanged = prevProps.pos !== pos;\n      const allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions);\n\n      if (posChanged || allowedChanged) {\n        this.positions = null;\n      }\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      globalObject.clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.featureFlags = getFullReactUIFlagsContext(flags);\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      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const { disableAnimations, useWrapper } = this.getProps();\n    const hasPin = !this.featureFlags.kebabHintRemovePin || !isTheme2022(this.theme);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Popup\n          hasPin={hasPin}\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={this.getPositions()}\n          pos={this.props.pos}\n          backgroundColor={this.theme.hintBgColor}\n          borderColor={HINT_BORDER_COLOR}\n          onPositionChange={(position) => this.setState({ position })}\n          disableAnimations={disableAnimations}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          useWrapper={useWrapper}\n          ref={this.popupRef}\n          withoutMobile\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  public getAnchorElement = (): Nullable<Element> => {\n    return this.popupRef.current?.anchorElement;\n  };\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { maxWidth } = this.getProps();\n    const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: centerAlignPositions.includes(this.state.position),\n    });\n    return (\n      <div className={className} style={{ maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPositionsType[] | undefined => {\n    if (this.featureFlags.popupUnifyPositioning) {\n      return this.props.allowedPositions;\n    }\n    const pos = this.props.pos ? this.props.pos : 'top';\n    const allowedPositions = this.getAllowedPositions();\n    if (this.featureFlags.hintAddDynamicPositioning) {\n      if (!this.positions) {\n        let priorityPosition: PopupPositionsType;\n        switch (pos) {\n          case 'top':\n            priorityPosition = 'top center';\n            break;\n          case 'bottom':\n            priorityPosition = 'bottom center';\n            break;\n          case 'left':\n            priorityPosition = 'left middle';\n            break;\n          case 'right':\n            priorityPosition = 'right middle';\n            break;\n          default:\n            priorityPosition = pos;\n        }\n        const index = allowedPositions.indexOf(priorityPosition);\n        if (index === -1) {\n          throw new Error('Unexpected position passed to Hint. Expected one of: ' + allowedPositions.join(', '));\n        }\n        this.positions = [...allowedPositions.slice(index), ...allowedPositions.slice(0, index)];\n      }\n      return this.positions;\n    }\n    return OldPositions.filter((x) => x.startsWith(pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.getProps().manual && !this.timer) {\n      this.timer = globalObject.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.getProps().manual && this.timer) {\n      globalObject.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.styles.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;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)({

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

@@ -1,8 +1,13 @@
-import React, { AriaAttributes, HTMLAttributes } from 'react';
+import React, { AriaAttributes, HTMLAttributes, ReactElement } from 'react';
 import { Nullable, Override } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
+import { InputElementProps } from './Input.typings';
 export declare const inputTypes: readonly ["password", "text", "number", "tel", "search", "time", "date", "url", "email"];
-export declare type InputSize = 'small' | 'medium' | 'large';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type InputSize = SizeProp;
 export declare type InputAlign = 'left' | 'center' | 'right';
 export declare type InputType = typeof inputTypes[number];
 export declare type InputIconType = React.ReactNode | (() => React.ReactNode);
@@ -11,7 +16,7 @@ export declare const selectionErrorMessage: (type: InputType, allowedTypes?: Inp
 export declare const maskForbiddenTypes: InputType[];
 export declare const maskAllowedTypes: InputType[];
 export declare const maskErrorMessage: (type: InputType, allowedTypes?: InputType[]) => string;
-export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-controls'>, Override<React.InputHTMLAttributes<HTMLInputElement>, {
+export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label'>, Override<React.InputHTMLAttributes<HTMLInputElement>, {
     /**
      * Иконка слева
      * Если `ReactNode` применяются дефолтные стили для иконки
@@ -36,19 +41,29 @@ export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, '
     borderless?: boolean;
     /** Выравнивание текста */
     align?: InputAlign;
-    /** Паттерн маски. Доступен для типов `text`, `password`, `email`, `tel`, `search`, `url` */
+    /**
+     * Паттерн маски. Доступен для типов `text`, `password`, `email`, `tel`, `search`, `url`
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput
+     */
     mask?: Nullable<string>;
-    /** Символ маски */
+    /**
+     * Символ маски
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput
+     */
     maskChar?: Nullable<string>;
     /**
      * Словарь символов-регулярок для задания маски
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput
      * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }
      */
     formatChars?: Record<string, string>;
-    /** Показывать символы маски */
+    /**
+     * Показывать символы маски
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput
+     */
     alwaysShowMask?: boolean;
     /** Размер */
-    size?: InputSize;
+    size?: SizeProp;
     /** onValueChange */
     onValueChange?: (value: string) => void;
     /** Вызывается на label */
@@ -78,7 +93,7 @@ export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, '
     selectAllOnFocus?: boolean;
     /**
      * Обработчик неправильного ввода.
-     * По-умолчанию, инпут вспыхивает синим.
+     * По-умолчанию, инпут вспыхивает акцентным цветом.
      * Если передан - вызывается переданный обработчик,
      * в таком случае вспыхивание можно вызвать
      * публичным методом инстанса `blink()`.
@@ -88,6 +103,11 @@ export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, '
     onUnexpectedInput?: (value: string) => void;
     /** @ignore */
     corners?: Partial<Pick<React.CSSProperties, 'borderTopRightRadius' | 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopLeftRadius'>>;
+    /**
+     * Элемент заменяет нативный input.
+     * Должен иметь пропы `InputElementProps` и тип `InputElement`
+     * */
+    element?: ReactElement<InputElementProps>;
 }> {
 }
 export interface InputState {
@@ -105,6 +125,7 @@ declare type DefaultProps = Required<Pick<InputProps, 'size' | 'type'>>;
  */
 export declare class Input extends React.Component<InputProps, InputState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static defaultProps: DefaultProps;
     private getProps;
     state: InputState;
@@ -151,6 +172,7 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private delaySelectAll;
     private cancelDelayedSelectAll;
     private cancelBlink;
+    private getInput;
     private renderMain;
     private renderMaskedInput;
     private getIconSizeClassname;
@@ -166,6 +188,7 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private handleKeyPress;
     private handleMaskedValueChange;
     private handleUnexpectedInput;
+    private resetFocus;
     private handleBlur;
     private renderPrefix;
     private renderSuffix;

package/cjs/components/Input/Input.js

@@ -1,15 +1,15 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.selectionErrorMessage = exports.selectionAllowedTypes = exports.maskForbiddenTypes = exports.maskErrorMessage = exports.maskAllowedTypes = exports.inputTypes = exports.InputDataTids = 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"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.selectionErrorMessage = exports.selectionAllowedTypes = exports.maskForbiddenTypes = exports.maskErrorMessage = exports.maskAllowedTypes = exports.inputTypes = exports.InputDataTids = 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 _warning = _interopRequireDefault(require("warning"));
+var _globalObject = require("@skbkontur/global-object");
 
 var _client = require("../../lib/client");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 var _needsPolyfillPlaceholder = require("../../lib/needsPolyfillPlaceholder");
 
-var _MaskedInput = require("../../internal/MaskedInput");
+var _InternalMaskedInput = require("../../internal/InternalMaskedInput");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
@@ -17,14 +17,20 @@ var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
-var _SSRSafe = require("../../lib/SSRSafe");
+var _utils = require("../../lib/utils");
+
+var _FocusControlWrapper = require("../../internal/FocusControlWrapper");
+
 
 var _Input = require("./Input.styles");
 var _InputLayout = require("./InputLayout/InputLayout");
-var _PolyfillPlaceholder = require("./InputLayout/PolyfillPlaceholder");var _excluded = ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "role", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars", "corners", "aria-describedby", "aria-controls"];var _class, _class2, _temp;
+var _PolyfillPlaceholder = require("./InputLayout/PolyfillPlaceholder");var _excluded = ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "role", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars", "corners", "aria-describedby", "aria-controls", "aria-label", "element"];var _class, _class2, _temp;
 
-var inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'];exports.inputTypes = inputTypes;
+var inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'];
 
+/**
+ * @deprecated use SizeProp
+ */exports.inputTypes = inputTypes;
 
 
 
@@ -129,6 +135,21 @@ var maskErrorMessage = function maskErrorMessage(type, allowedTypes) {if (allowe
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -164,6 +185,7 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+
     getProps = (0, _createPropsGetter.createPropsGetter)(Input.defaultProps);_this.
 
     state = {
@@ -174,7 +196,7 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
     selectAllId = null;_this.
 
-    blinkTimeout = 0;_this.
+
     input = null;_this.
 
 
@@ -306,18 +328,19 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       }
     };_this.
 
-    delaySelectAll = function () {return _this.selectAllId = (0, _raf.default)(_this.selectAll);};_this.
+    delaySelectAll = function () {var _globalObject$request;return (
+        _this.selectAllId = (_globalObject$request = _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(_this.selectAll)) != null ? _globalObject$request : null);};_this.
 
     cancelDelayedSelectAll = function () {
       if (_this.selectAllId) {
-        _raf.default.cancel(_this.selectAllId);
+        _globalObject.globalObject.cancelAnimationFrame == null ? void 0 : _globalObject.globalObject.cancelAnimationFrame(_this.selectAllId);
         _this.selectAllId = null;
       }
     };_this.
 
     cancelBlink = function (callback) {
       if (_this.blinkTimeout) {
-        clearTimeout(_this.blinkTimeout);
+        _globalObject.globalObject.clearTimeout(_this.blinkTimeout);
         _this.blinkTimeout = 0;
         if (_this.state.blinking) {
           _this.setState({ blinking: false }, callback);
@@ -329,6 +352,16 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       }
     };_this.
 
+    getInput = function (inputProps) {
+      if (_this.props.element) {
+        return /*#__PURE__*/_react.default.cloneElement(_this.props.element, inputProps);
+      }
+
+      return _this.props.mask && !_this.canBeUsedWithMask ?
+      _this.renderMaskedInput(inputProps, _this.props.mask) : /*#__PURE__*/
+      _react.default.createElement('input', inputProps);
+    };_this.
+
     renderMain = function (props) {var _cx, _cx2;
       var
       onMouseEnter =
@@ -362,7 +395,9 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
-      props.onMouseEnter,onMouseLeave = props.onMouseLeave,onMouseOver = props.onMouseOver,onKeyDown = props.onKeyDown,onKeyPress = props.onKeyPress,onValueChange = props.onValueChange,width = props.width,error = props.error,role = props.role,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,corners = props.corners,ariaDescribedby = props['aria-describedby'],ariaControls = props['aria-controls'],rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+
+      props.onMouseEnter,onMouseLeave = props.onMouseLeave,onMouseOver = props.onMouseOver,onKeyDown = props.onKeyDown,onKeyPress = props.onKeyPress,onValueChange = props.onValueChange,width = props.width,error = props.error,role = props.role,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,corners = props.corners,ariaDescribedby = props['aria-describedby'],ariaControls = props['aria-controls'],ariaLabel = props['aria-label'],element = props.element,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
       var _this$state = _this.state,blinking = _this$state.blinking,focused = _this$state.focused;
 
@@ -404,13 +439,13 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
         type: type,
         placeholder: !_this.isMaskVisible && !_needsPolyfillPlaceholder.needsPolyfillPlaceholder ? placeholder : undefined,
         disabled: disabled,
-        'aria-describedby': ariaDescribedby });
+        'aria-describedby': ariaDescribedby,
+        'aria-label': ariaLabel });
 
 
-      var input =
-      mask && !_this.canBeUsedWithMask ?
-      _this.renderMaskedInput(inputProps, mask) : /*#__PURE__*/
-      _react.default.createElement('input', inputProps);
+      var input = /*#__PURE__*/
+      _react.default.createElement(_FocusControlWrapper.FocusControlWrapper, { onBlurWhenDisabled: _this.resetFocus }, _this.getInput(inputProps));
+
 
       if ((0, _ThemeHelpers.isTheme2022)(_this.theme)) {
         return /*#__PURE__*/(
@@ -552,11 +587,6 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
-
-
-
-
-
 
 
 
@@ -564,7 +594,7 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
     refInput = function (element) {
-      if (element instanceof _MaskedInput.MaskedInput) {
+      if (element instanceof _InternalMaskedInput.InternalMaskedInput || element && 'input' in element) {
         _this.input = element.input;
       } else {
         _this.input = element;
@@ -638,12 +668,11 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       }
     };_this.
 
-    handleBlur = function (event) {
-      _this.setState({ focused: false });
+    resetFocus = function () {return _this.setState({ focused: false });};_this.
 
-      if (_this.props.onBlur) {
-        _this.props.onBlur(event);
-      }
+    handleBlur = function (event) {
+      _this.resetFocus();
+      _this.props.onBlur == null ? void 0 : _this.props.onBlur(event);
     };_this.
 
     renderPrefix = function () {var _cx3;
@@ -668,7 +697,7 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       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.outputMaskError = function outputMaskError() {(0, _warning.default)(!(this.props.mask && this.canBeUsedWithMask), maskErrorMessage(this.getProps().type));};_proto.componentDidMount = function componentDidMount() {this.outputMaskError();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.props.type !== prevProps.type || this.props.mask !== prevProps.mask) {this.outputMaskError();}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.blinkTimeout) {clearTimeout(this.blinkTimeout);}this.cancelDelayedSelectAll();} /**
+    };return _this;}var _proto = Input.prototype;_proto.outputMaskError = function outputMaskError() {(0, _warning.default)(!(this.props.mask && this.canBeUsedWithMask), maskErrorMessage(this.getProps().type));};_proto.componentDidMount = function componentDidMount() {this.outputMaskError();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.props.type !== prevProps.type || this.props.mask !== prevProps.mask) {this.outputMaskError();}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.blinkTimeout) {_globalObject.globalObject.clearTimeout(this.blinkTimeout);}this.cancelDelayedSelectAll();} /**
    * @public
    */;_proto.focus = function focus() {(0, _invariant.default)(this.input, 'Cannot call "focus" because Input is not mounted');this.input.focus();} /**
    * @public
@@ -678,14 +707,14 @@ Input = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
    * @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 = _SSRSafe.globalThat.setTimeout(_this2.cancelBlink, 150);});} /**
+        void (_this2.input && _this2.input.offsetWidth);_this2.blink();});return;}this.setState({ blinking: true }, function () {_this2.blinkTimeout = _globalObject.globalObject.setTimeout(_this2.cancelBlink, 150);});} /**
    * @public
    * @param {number} start
    * @param {number} end
-   */;_proto.setSelectionRange = function setSelectionRange(start, end) {var _this$props$value,_this3 = this; // https://github.com/facebook/react/issues/7769
+   */;_proto.setSelectionRange = function setSelectionRange(start, end) {var _globalObject$documen,_this$props$value,_this3 = this; // https://github.com/facebook/react/issues/7769
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
-    if (!selectionAllowedTypes.includes(this.getProps().type)) {(0, _warning.default)(false, selectionErrorMessage(this.getProps().type));return;}if (!this.input) {throw new Error('Cannot call "setSelectionRange" on unmounted Input');}if (_SSRSafe.renderTarget.activeElement !== this.input) {this.focus();}if (this.props.mask && this.props.value && ((_this$props$value = this.props.value) == null ? void 0 : _this$props$value.length) < this.props.mask.length) {setTimeout(function () {var _this3$input;(_this3$input = _this3.input) == null ? void 0 : _this3$input.setSelectionRange(start, end);}, 150);} else {var _this$input;(_this$input = this.input) == null ? void 0 : _this$input.setSelectionRange(start, end);}};_proto.render = function render() {var _this4 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this4.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this4.setRootNode }, _this4.props), _this4.renderMain);});};_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.getProps().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.iconFocus(this.theme)] = this.state.focused, _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.needsPolyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value && !this.props.defaultValue) {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.getProps().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));} }, { key: "canBeUsedWithMask", get: function get() {return maskForbiddenTypes.includes(this.getProps().type);} /**
+    if (!selectionAllowedTypes.includes(this.getProps().type)) {(0, _warning.default)(false, selectionErrorMessage(this.getProps().type));return;}if (!this.input) {throw new Error('Cannot call "setSelectionRange" on unmounted Input');}if (((_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.activeElement) !== this.input) {this.focus();}if (this.props.mask && this.props.value && ((_this$props$value = this.props.value) == null ? void 0 : _this$props$value.length) < this.props.mask.length) {_globalObject.globalObject.setTimeout(function () {var _this3$input;(_this3$input = _this3.input) == null ? void 0 : _this3$input.setSelectionRange(start, end);}, 150);} else {var _this$input;(_this$input = this.input) == null ? void 0 : _this$input.setSelectionRange(start, end);}};_proto.render = function render() {var _this4 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this4.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this4.setRootNode }, _this4.props), _this4.renderMain);});};_proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {return /*#__PURE__*/_react.default.createElement(_InternalMaskedInput.InternalMaskedInput, (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.getProps().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 = (0, _utils.isFunction)(icon) ? 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.iconFocus(this.theme)] = this.state.focused, _cx5[_Input.styles.iconDisabled(this.theme)] = disabled, _cx5)) }, iconNode);};_proto.renderPlaceholder = function renderPlaceholder() {var disabled = this.props.disabled;var focused = this.state.focused;var placeholder = null;if (this.state.needsPolyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value && !this.props.defaultValue) {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.getProps().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));} }, { key: "canBeUsedWithMask", get: function get() {return maskForbiddenTypes.includes(this.getProps().type);} /**
      * Работает с типами `text`, `password`, `tel`, `search`, `url`
      * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
      * @public
-     */ }]);return Input;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Input', _class2.defaultProps = { size: 'small', type: 'text' }, _temp)) || _class;exports.Input = Input;
+     */ }]);return Input;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Input', _class2.displayName = 'Input', _class2.defaultProps = { size: 'small', type: 'text' }, _temp)) || _class;exports.Input = Input;