@skbkontur/react-ui 0.0.0-13d2191267 → 0.0.0-151f385a39

package/components/Hint/Hint.d.ts

@@ -1,23 +1,65 @@
 import React from 'react';
+import { PopupPositionsType } from '../../internal/Popup';
+import { Nullable } from '../../typings/utility-types';
 import { MouseEventType } from '../../typings/event-types';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';
 export interface HintProps extends CommonProps {
     children?: React.ReactNode;
+    /**
+     * Переводит отображение подсказки в _"ручной режим"_.
+     *
+     * В _"ручном режиме"_ подсказку можно активировать только задав значение пропу `opened`.
+     */
     manual?: boolean;
+    /**
+     * Задаёт максимальную ширину подсказки.
+     */
     maxWidth?: React.CSSProperties['maxWidth'];
+    /**
+     * HTML-событие `mouseenter`.
+     */
     onMouseEnter?: (event: MouseEventType) => void;
+    /**
+     * HTML-событие `mouseleave`.
+     */
     onMouseLeave?: (event: MouseEventType) => void;
+    /**
+     * Если `true` - подсказка будет открыта.
+     *
+     * _Примечание_: работает только при `manual=true`.
+     */
     opened?: boolean;
-    pos: 'top' | 'right' | 'bottom' | 'left' | 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom' | 'right top' | 'right middle' | 'right bottom';
+    /**
+     * Расположение подсказки относительно текста.
+     *
+     * **Допустимые значения**: `"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"`.
+     */
+    pos: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;
+    /**
+     * Текст подсказки.
+     */
     text: React.ReactNode;
+    /**
+     * Отключает анимацию.
+     */
     disableAnimations: boolean;
+    /**
+     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
+     *
+     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
+     */
     useWrapper: boolean;
 }
 export interface HintState {
     opened: boolean;
 }
-export declare class Hint extends React.Component<HintProps, HintState> {
+/**
+ * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+ */
+export declare class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {
     static __KONTUR_REACT_UI__: string;
+    private isMobileLayout;
     static defaultProps: {
         pos: string;
         manual: boolean;
@@ -29,13 +71,18 @@ export declare class Hint extends React.Component<HintProps, HintState> {
     state: HintState;
     private timer;
     private theme;
-    UNSAFE_componentWillReceiveProps(nextProps: HintProps): void;
+    private setRootNode;
+    private popupRef;
+    componentDidUpdate(prevProps: HintProps): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
+    renderMobile(): JSX.Element;
     renderMain(): JSX.Element;
+    getAnchorElement: () => Nullable<HTMLElement>;
     private renderContent;
     private getPositions;
     private handleMouseEnter;
     private handleMouseLeave;
+    private close;
     private open;
 }

package/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/components/Hint/Hint.styles/Hint.styles.js

@@ -1,32 +1,16 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\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    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   content: function content(t) {
-    return css(_templateObject(), t.hintColor, t.hintFontSize, t.hintLineHeight, t.hintMaxWidth, t.hintPaddingY, t.hintPaddingX);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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);
+  },
+  mobileContent: function mobileContent(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      max-width: 100%;\n      text-align: left;\n    "])), t.mobileHintColor);
   },
   contentCenter: function contentCenter(t) {
-    return css(_templateObject2(), t.hintTextAlign);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","t","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign","jsStyles"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,OADa,mBACLC,CADK,EACK;AAChB,WAAOJ,GAAP;;AAEWI,IAAAA,CAAC,CAACC,SAFb;AAGeD,IAAAA,CAAC,CAACE,YAHjB;AAIiBF,IAAAA,CAAC,CAACG,cAJnB;AAKeH,IAAAA,CAAC,CAACI,YALjB;;AAOaJ,IAAAA,CAAC,CAACK,YAPf,EAO+BL,CAAC,CAACM,YAPjC;;;;AAWD,GAbY;;AAebC,EAAAA,aAfa,yBAeCP,CAfD,EAeW;AACtB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACQ,aADlB;;AAGD,GAnBY,EAAf;;;AAsBA,OAAO,IAAMC,QAAQ,GAAGZ,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\r\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  content(t: Theme) {\r\n    return css`\r\n      box-sizing: border-box;\r\n      color: ${t.hintColor};\r\n      font-size: ${t.hintFontSize};\r\n      line-height: ${t.hintLineHeight}\r\n      max-width: ${t.hintMaxWidth};\r\n      overflow-wrap: break-word;\r\n      padding: ${t.hintPaddingY} ${t.hintPaddingX};\r\n      word-break: break-word;\r\n      word-wrap: break-word;\r\n    `;\r\n  },\r\n\r\n  contentCenter(t: Theme) {\r\n    return css`\r\n      text-align: ${t.hintTextAlign};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","t","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","mobileContent","mobileHintColor","contentCenter","hintTextAlign"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,mBACzBC,CADyB,EACf;AAChB,WAAOJ,GAAP;;AAEWI,IAAAA,CAAC,CAACC,SAFb;AAGeD,IAAAA,CAAC,CAACE,YAHjB;AAIiBF,IAAAA,CAAC,CAACG,cAJnB;AAKeH,IAAAA,CAAC,CAACI,YALjB;;AAOaJ,IAAAA,CAAC,CAACK,YAPf,EAO+BL,CAAC,CAACM,YAPjC;;;;AAWD,GAbgC;;AAejCC,EAAAA,aAfiC,yBAenBP,CAfmB,EAeT;AACtB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACQ,eADb;;;;AAKD,GArBgC;;AAuBjCC,EAAAA,aAvBiC,yBAuBnBT,CAvBmB,EAuBT;AACtB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACU,aADlB;;AAGD,GA3BgC,EAAD,CAA3B","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  mobileContent(t: Theme) {\n    return css`\n      color: ${t.mobileHintColor};\n      max-width: 100%;\n      text-align: left;\n    `;\n  },\n\n  contentCenter(t: Theme) {\n    return css`\n      text-align: ${t.hintTextAlign};\n    `;\n  },\n});\n"]}

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

@@ -1,4 +1,6 @@
-export declare const jsStyles: {
-    content(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    contentCenter(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    content(t: Theme): string;
+    mobileContent(t: Theme): string;
+    contentCenter(t: Theme): string;
 };

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

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

package/components/Input/Input/Input.js

@@ -2,23 +2,28 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["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 _class, _class2, _temp;
+
 import invariant from 'invariant';
 import React from 'react';
 import raf from 'raf';
-import cn from 'classnames';
 import { isIE11, isEdge } from "../../../lib/client";
 import { isKeyBackspace, isKeyDelete, someKeys } from "../../../lib/events/keyboard/identifiers";
-import { polyfillPlaceholder } from "../../../lib/polyfillPlaceholder";
+import { needsPolyfillPlaceholder } from "../../../lib/needsPolyfillPlaceholder";
 import { MaskedInput } from "../../../internal/MaskedInput";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../Input.styles";
-/**
- * Интерфес пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
- *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
- */
-
-export var Input = /*#__PURE__*/function (_React$Component) {
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../Input.styles";
+export
+/**
+* Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
+*  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
+*/
+var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Input, _React$Component);
 
   function Input() {
@@ -30,12 +35,11 @@ export var Input = /*#__PURE__*/function (_React$Component) {
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.state = {
-      polyfillPlaceholder: false,
+      needsPolyfillPlaceholder: needsPolyfillPlaceholder,
       blinking: false,
       focused: false
     };
     _this.selectAllId = null;
-    _this.theme = void 0;
     _this.blinkTimeout = 0;
     _this.input = null;
 
@@ -76,7 +80,7 @@ export var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.renderMain = function (props) {
-      var _cn;
+      var _cx, _cx2;
 
       var onMouseEnter = props.onMouseEnter,
           onMouseLeave = props.onMouseLeave,
@@ -104,13 +108,13 @@ export var Input = /*#__PURE__*/function (_React$Component) {
           prefix = props.prefix,
           suffix = props.suffix,
           formatChars = props.formatChars,
-          rest = _objectWithoutPropertiesLoose(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"]);
+          rest = _objectWithoutPropertiesLoose(props, _excluded);
 
       var _this$state = _this.state,
           blinking = _this$state.blinking,
           focused = _this$state.focused;
       var labelProps = {
-        className: cn(jsStyles.root(_this.theme), _this.getSizeClassName(), (_cn = {}, _cn[jsStyles.borderless()] = !!borderless, _cn[jsStyles.focus(_this.theme)] = focused, _cn[jsStyles.blink(_this.theme)] = !!blinking, _cn[jsStyles.warning(_this.theme)] = !!warning, _cn[jsStyles.error(_this.theme)] = !!error, _cn[jsStyles.disabled(_this.theme)] = !!disabled, _cn[jsStyles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _cn[jsStyles.warningFallback(_this.theme)] = !!warning && (isIE11 || isEdge), _cn[jsStyles.errorFallback(_this.theme)] = !!error && (isIE11 || isEdge), _cn)),
+        className: cx(styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[styles.focus(_this.theme)] = focused, _cx[styles.blink(_this.theme)] = blinking, _cx[styles.borderless()] = borderless && !focused, _cx[styles.disabled(_this.theme)] = disabled, _cx[styles.warning(_this.theme)] = warning, _cx[styles.error(_this.theme)] = error, _cx[styles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _cx[styles.warningFallback(_this.theme)] = warning && (isIE11 || isEdge), _cx[styles.errorFallback(_this.theme)] = error && (isIE11 || isEdge), _cx)),
         style: {
           width: width
         },
@@ -120,7 +124,7 @@ export var Input = /*#__PURE__*/function (_React$Component) {
       };
 
       var inputProps = _extends({}, rest, {
-        className: jsStyles.input(_this.theme),
+        className: cx(styles.input(_this.theme), (_cx2 = {}, _cx2[styles.inputFocus(_this.theme)] = focused, _cx2[styles.inputDisabled(_this.theme)] = disabled, _cx2)),
         value: value,
         onChange: _this.handleChange,
         onFocus: _this.handleFocus,
@@ -132,7 +136,7 @@ export var Input = /*#__PURE__*/function (_React$Component) {
         },
         ref: _this.refInput,
         type: 'text',
-        placeholder: !_this.isMaskVisible && !polyfillPlaceholder ? placeholder : undefined,
+        placeholder: !_this.isMaskVisible && !needsPolyfillPlaceholder ? placeholder : undefined,
         disabled: disabled
       });
 
@@ -142,11 +146,11 @@ export var Input = /*#__PURE__*/function (_React$Component) {
 
       var input = mask ? _this.renderMaskedInput(inputProps, mask) : /*#__PURE__*/React.createElement('input', inputProps);
       return /*#__PURE__*/React.createElement("label", labelProps, /*#__PURE__*/React.createElement("span", {
-        className: jsStyles.sideContainer()
+        className: styles.sideContainer()
       }, _this.renderLeftIcon(), _this.renderPrefix()), /*#__PURE__*/React.createElement("span", {
-        className: jsStyles.wrapper()
+        className: styles.wrapper()
       }, input, _this.renderPlaceholder()), /*#__PURE__*/React.createElement("span", {
-        className: cn(jsStyles.sideContainer(), jsStyles.rightContainer())
+        className: cx(styles.sideContainer(), styles.rightContainer())
       }, _this.renderSuffix(), _this.renderRightIcon()));
     };
 
@@ -159,12 +163,12 @@ export var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleChange = function (event) {
-      if (polyfillPlaceholder) {
+      if (needsPolyfillPlaceholder) {
         var fieldIsEmpty = event.target.value === '';
 
-        if (_this.state.polyfillPlaceholder !== fieldIsEmpty) {
+        if (_this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {
           _this.setState({
-            polyfillPlaceholder: fieldIsEmpty
+            needsPolyfillPlaceholder: fieldIsEmpty
           });
         }
       }
@@ -244,26 +248,34 @@ export var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.renderPrefix = function () {
-      var prefix = _this.props.prefix;
+      var _cx3;
+
+      var _this$props = _this.props,
+          prefix = _this$props.prefix,
+          disabled = _this$props.disabled;
 
       if (!prefix) {
         return null;
       }
 
       return /*#__PURE__*/React.createElement("span", {
-        className: jsStyles.prefix(_this.theme)
+        className: cx(styles.prefix(_this.theme), (_cx3 = {}, _cx3[styles.prefixDisabled(_this.theme)] = disabled, _cx3))
       }, prefix);
     };
 
     _this.renderSuffix = function () {
-      var suffix = _this.props.suffix;
+      var _cx4;
+
+      var _this$props2 = _this.props,
+          suffix = _this$props2.suffix,
+          disabled = _this$props2.disabled;
 
       if (!suffix) {
         return null;
       }
 
       return /*#__PURE__*/React.createElement("span", {
-        className: jsStyles.suffix(_this.theme)
+        className: cx(styles.suffix(_this.theme), (_cx4 = {}, _cx4[styles.suffixDisabled(_this.theme)] = disabled, _cx4))
       }, suffix);
     };
 
@@ -272,31 +284,15 @@ export var Input = /*#__PURE__*/function (_React$Component) {
 
   var _proto = Input.prototype;
 
-  _proto.componentDidMount = function componentDidMount() {
-    if (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 && !nextProps.value) {
-      this.setState({
-        polyfillPlaceholder: true
-      });
-    }
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -304,8 +300,8 @@ export var Input = /*#__PURE__*/function (_React$Component) {
     invariant(this.input, 'Cannot call "focus" because Input is not mounted');
     this.input.focus();
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -313,8 +309,16 @@ export var Input = /*#__PURE__*/function (_React$Component) {
     invariant(this.input, 'Cannot call "blur" because Input is not mounted');
     this.input.blur();
   }
-  /**
-  * @public
+  /**
+  * @public
+  */
+  ;
+
+  _proto.getNode = function getNode() {
+    return this.input;
+  }
+  /**
+  * @public
   */
   ;
 
@@ -338,8 +342,10 @@ export var Input = /*#__PURE__*/function (_React$Component) {
       _this2.blinkTimeout = window.setTimeout(_this2.cancelBlink, 150);
     });
   }
-  /**
-  * @public
+  /**
+  * @public
+  * @param {number} start
+  * @param {number} end
   */
   ;
 
@@ -360,11 +366,13 @@ export var Input = /*#__PURE__*/function (_React$Component) {
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this3.theme = theme;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _this3.props, _this3.renderMain);
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this3.setRootNode
+      }, _this3.props), _this3.renderMain);
     });
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -387,14 +395,14 @@ export var Input = /*#__PURE__*/function (_React$Component) {
 
     switch (this.props.size) {
       case 'large':
-        return right ? jsStyles.rightIconLarge(this.theme) : jsStyles.leftIconLarge(this.theme);
+        return right ? styles.rightIconLarge(this.theme) : styles.leftIconLarge(this.theme);
 
       case 'medium':
-        return right ? jsStyles.rightIconMedium(this.theme) : jsStyles.leftIconMedium(this.theme);
+        return right ? styles.rightIconMedium(this.theme) : styles.leftIconMedium(this.theme);
 
       case 'small':
       default:
-        return right ? jsStyles.rightIconSmall(this.theme) : jsStyles.leftIconSmall(this.theme);
+        return right ? styles.rightIconSmall(this.theme) : styles.leftIconSmall(this.theme);
     }
   };
 
@@ -407,27 +415,29 @@ export var Input = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderIcon = function renderIcon(icon, sizeClassName) {
+    var _cx5;
+
     if (!icon) {
       return null;
     }
 
-    if (icon instanceof Function) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: cn(jsStyles.icon(), sizeClassName)
-      }, icon());
-    }
-
+    var disabled = this.props.disabled;
+    var iconNode = icon instanceof Function ? icon() : icon;
     return /*#__PURE__*/React.createElement("span", {
-      className: cn(cn(jsStyles.icon(), sizeClassName), jsStyles.useDefaultColor(this.theme), jsStyles.useDefaultColor(this.theme))
-    }, icon);
+      className: cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[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) {
+    if (this.state.needsPolyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value && !this.props.defaultValue) {
+      var _cx6;
+
       placeholder = /*#__PURE__*/React.createElement("div", {
-        className: cn(jsStyles.placeholder(this.theme), jsStyles.placeholder(this.theme)),
+        className: cx(styles.placeholder(this.theme), (_cx6 = {}, _cx6[styles.placeholderDisabled(this.theme)] = disabled, _cx6[styles.placeholderFocus(this.theme)] = focused, _cx6)),
         style: {
           textAlign: this.props.align || 'inherit'
         }
@@ -438,35 +448,33 @@ export var Input = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.getSizeClassName = function getSizeClassName() {
-    var _ref, _ref2, _ref3;
+    var _cx7, _cx8, _cx9;
 
     switch (this.props.size) {
       case 'large':
-        return _ref = {}, _ref[jsStyles.sizeLarge(this.theme)] = true, _ref[jsStyles.sizeLargeFallback(this.theme)] = isIE11 || isEdge, _ref;
+        return cx((_cx7 = {}, _cx7[styles.sizeLarge(this.theme)] = true, _cx7[styles.sizeLargeFallback(this.theme)] = isIE11 || isEdge, _cx7));
 
       case 'medium':
-        return _ref2 = {}, _ref2[jsStyles.sizeMedium(this.theme)] = true, _ref2[jsStyles.sizeMediumFallback(this.theme)] = isIE11 || isEdge, _ref2;
+        return cx((_cx8 = {}, _cx8[styles.sizeMedium(this.theme)] = true, _cx8[styles.sizeMediumFallback(this.theme)] = isIE11 || isEdge, _cx8));
 
       case 'small':
       default:
-        return _ref3 = {}, _ref3[jsStyles.sizeSmall(this.theme)] = true, _ref3[jsStyles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _ref3;
+        return cx((_cx9 = {}, _cx9[styles.sizeSmall(this.theme)] = true, _cx9[styles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _cx9));
     }
   };
 
   _createClass(Input, [{
     key: "isMaskVisible",
     get: function get() {
-      var _this$props = this.props,
-          mask = _this$props.mask,
-          alwaysShowMask = _this$props.alwaysShowMask;
+      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.Component);
-Input.__KONTUR_REACT_UI__ = 'Input';
-Input.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Input', _class2.defaultProps = {
   size: 'small'
-};
+}, _temp)) || _class;