@skbkontur/react-ui 0.0.0-73eeccf6c9 → 0.0.0-7b63c63db3

package/cjs/components/Tabs/Tabs.styles.js

@@ -1,9 +1,9 @@
-"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      ", "& {\n        margin: 0;\n      }\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      margin: 0 -", ";\n      padding: 0;\n      position: relative;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+"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 = {
+var styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
-    return (0, _Emotion.css)(_templateObject(),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      margin: 0 -", ";\n      padding: 0;\n      position: relative;\n    "])),
 
     t.tabsMarginX);
 
@@ -11,13 +11,8 @@ var styles = {
 
   },
 
-  vertical: function vertical(t) {
-    return (0, _Emotion.css)(_templateObject2(),
-    (0, _Emotion.cssName)(styles.root(t)));
+  vertical: function vertical() {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: 0;\n    "])));
 
 
-
-  } };
-
-
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.styles.ts"],"names":["styles","root","t","css","tabsMarginX","vertical","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,eAAOC,YAAP;;AAEeD,IAAAA,CAAC,CAACE,WAFjB;;;;AAMD,GARY;;AAUbC,EAAAA,QAVa,oBAUJH,CAVI,EAUM;AACjB,eAAOC,YAAP;AACI,0BAAQH,MAAM,CAACC,IAAP,CAAYC,CAAZ,CAAR,CADJ;;;;AAKD,GAhBY,EAAf;;;AAmBO,IAAMI,QAAQ,GAAG,2BAAaN,MAAb,CAAjB,C","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      margin: 0 -${t.tabsMarginX};\r\n      padding: 0;\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  vertical(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.root(t))}& {\r\n        margin: 0;\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Tabs.styles.ts"],"names":["styles","root","t","css","tabsMarginX","vertical"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;;AAEeD,IAAAA,CAAC,CAACE,WAFjB;;;;AAMD,GARgC;;AAUjCC,EAAAA,QAViC,sBAUtB;AACT,eAAOF,YAAP;;;AAGD,GAdgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-block;\n      margin: 0 -${t.tabsMarginX};\n      padding: 0;\n      position: relative;\n    `;\n  },\n\n  vertical() {\n    return css`\n      margin: 0;\n    `;\n  },\n});\n"]}

package/cjs/components/Tabs/TabsContext.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Tab } from './Tab';
-export interface TabsContextType {
+export interface TabsContextType<T extends string = any> {
     vertical: boolean;
-    activeTab: string;
-    getTab: (id: string) => Tab | null | void;
-    addTab: (id: string, getNode: () => Tab) => void;
+    activeTab: T;
+    getTab: (id: T) => Tab<T> | null | void;
+    addTab: (id: T, getNode: () => Tab<T>) => void;
     notifyUpdate: () => void;
-    removeTab: (id: string) => void;
-    shiftFocus: (fromTab: string, delta: number) => void;
-    switchTab: (id: string) => void;
+    removeTab: (id: T) => void;
+    shiftFocus: (fromTab: T, delta: number) => void;
+    switchTab: (id: T) => void;
 }
 export declare const TabsContextDefaultValue: TabsContextType;
-export declare const TabsContext: React.Context<TabsContextType>;
+export declare const TabsContext: React.Context<TabsContextType<any>>;

package/cjs/components/Tabs/TabsContext.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TabsContext = exports.TabsContextDefaultValue = void 0;var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TabsContextDefaultValue = exports.TabsContext = void 0;var _react = _interopRequireDefault(require("react"));
 
 var _utils = require("../../lib/utils");
 

package/cjs/components/Tabs/TabsContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TabsContext.ts"],"names":["TabsContextDefaultValue","vertical","activeTab","getTab","emptyHandler","addTab","notifyUpdate","removeTab","shiftFocus","switchTab","TabsContext","React","createContext","displayName"],"mappings":"2LAAA;;AAEA;;;;;;;;;;;;;;;AAeO,IAAMA,uBAAwC,GAAG;AACtDC,EAAAA,QAAQ,EAAE,KAD4C;AAEtDC,EAAAA,SAAS,EAAE,EAF2C;AAGtDC,EAAAA,MAAM,EAAEC,mBAH8C;AAItDC,EAAAA,MAAM,EAAED,mBAJ8C;AAKtDE,EAAAA,YAAY,EAAEF,mBALwC;AAMtDG,EAAAA,SAAS,EAAEH,mBAN2C;AAOtDI,EAAAA,UAAU,EAAEJ,mBAP0C;AAQtDK,EAAAA,SAAS,EAAEL,mBAR2C,EAAjD,C;;AAUA,IAAMM,WAAW,gBAAGC,eAAMC,aAAN,CAAqCZ,uBAArC,CAApB,C;;AAEPU,WAAW,CAACG,WAAZ,GAA0B,aAA1B","sourcesContent":["import React from 'react';\r\n\r\nimport { emptyHandler } from '../../lib/utils';\r\n\r\nimport { Tab } from './Tab';\r\n\r\nexport interface TabsContextType {\r\n  vertical: boolean;\r\n  activeTab: string;\r\n  getTab: (id: string) => Tab | null | void;\r\n  addTab: (id: string, getNode: () => Tab) => void;\r\n  notifyUpdate: () => void;\r\n  removeTab: (id: string) => void;\r\n  shiftFocus: (fromTab: string, delta: number) => void;\r\n  switchTab: (id: string) => void;\r\n}\r\n\r\nexport const TabsContextDefaultValue: TabsContextType = {\r\n  vertical: false,\r\n  activeTab: '',\r\n  getTab: emptyHandler,\r\n  addTab: emptyHandler,\r\n  notifyUpdate: emptyHandler,\r\n  removeTab: emptyHandler,\r\n  shiftFocus: emptyHandler,\r\n  switchTab: emptyHandler,\r\n};\r\nexport const TabsContext = React.createContext<TabsContextType>(TabsContextDefaultValue);\r\n\r\nTabsContext.displayName = 'TabsContext';\r\n"]}
+{"version":3,"sources":["TabsContext.ts"],"names":["TabsContextDefaultValue","vertical","activeTab","getTab","emptyHandler","addTab","notifyUpdate","removeTab","shiftFocus","switchTab","TabsContext","React","createContext","displayName"],"mappings":"2LAAA;;AAEA;;;;;;;;;;;;;;;AAeO,IAAMA,uBAAwC,GAAG;AACtDC,EAAAA,QAAQ,EAAE,KAD4C;AAEtDC,EAAAA,SAAS,EAAE,EAF2C;AAGtDC,EAAAA,MAAM,EAAEC,mBAH8C;AAItDC,EAAAA,MAAM,EAAED,mBAJ8C;AAKtDE,EAAAA,YAAY,EAAEF,mBALwC;AAMtDG,EAAAA,SAAS,EAAEH,mBAN2C;AAOtDI,EAAAA,UAAU,EAAEJ,mBAP0C;AAQtDK,EAAAA,SAAS,EAAEL,mBAR2C,EAAjD,C;;AAUA,IAAMM,WAAW,gBAAGC,eAAMC,aAAN,CAAqCZ,uBAArC,CAApB,C;;AAEPU,WAAW,CAACG,WAAZ,GAA0B,aAA1B","sourcesContent":["import React from 'react';\n\nimport { emptyHandler } from '../../lib/utils';\n\nimport { Tab } from './Tab';\n\nexport interface TabsContextType<T extends string = any> {\n  vertical: boolean;\n  activeTab: T;\n  getTab: (id: T) => Tab<T> | null | void;\n  addTab: (id: T, getNode: () => Tab<T>) => void;\n  notifyUpdate: () => void;\n  removeTab: (id: T) => void;\n  shiftFocus: (fromTab: T, delta: number) => void;\n  switchTab: (id: T) => void;\n}\n\nexport const TabsContextDefaultValue: TabsContextType = {\n  vertical: false,\n  activeTab: '',\n  getTab: emptyHandler,\n  addTab: emptyHandler,\n  notifyUpdate: emptyHandler,\n  removeTab: emptyHandler,\n  shiftFocus: emptyHandler,\n  switchTab: emptyHandler,\n};\nexport const TabsContext = React.createContext<TabsContextType>(TabsContextDefaultValue);\n\nTabsContext.displayName = 'TabsContext';\n"]}

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

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

package/cjs/components/Textarea/Textarea.d.ts

@@ -1,15 +1,20 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { Override } from '../../typings/utility-types';
-export declare type TextareaProps = Override<React.TextareaHTMLAttributes<HTMLTextAreaElement>, {
-    /** Ошибка */
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface TextareaProps extends CommonProps, Override<React.TextareaHTMLAttributes<HTMLTextAreaElement>, {
+    /**
+     * Состояние валидации при ошибке.
+     */
     error?: boolean;
-    /** Предупреждение */
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
     /** Не активное состояние */
     disabled?: boolean;
     /**
-     * Атоматический ресайз
+     * Автоматический ресайз
      * в зависимости от содержимого
      */
     autoResize?: boolean;
@@ -37,11 +42,41 @@ export declare type TextareaProps = Override<React.TextareaHTMLAttributes<HTMLTe
     onValueChange?: (value: string) => void;
     /** Выделение значения при фокусе */
     selectAllOnFocus?: boolean;
-}>;
+    /** Показывать счетчик символов */
+    showLengthCounter?: boolean;
+    /** Допустимое количество символов в поле. Отображается в счетчике.
+     * Если не указано, равно `maxLength`
+     */
+    lengthCounter?: number;
+    /** Подсказка к счетчику символов.
+     *
+     * По умолчанию - тултип с содержимым из пропа, если передан`ReactNode`.
+     *
+     * Передав функцию, можно переопределить подсказку целиком, вместе с иконкой. Например,
+     *
+     * ```
+     * counterHelp={() => <Tooltip render={...}><HelpIcon /></Tooltip>}
+     * ```
+     * */
+    counterHelp?: ReactNode | (() => ReactNode);
+    /** Добавлять дополнительную свободную строку при авто-ресайзе.
+     * @see https://guides.kontur.ru/components/textarea/#04
+     * */
+    extraRow: boolean;
+    /** Отключать анимацию при авто-ресайзе.
+     * Автоматически отключается когда в `extraRow` передан `false`.
+     */
+    disableAnimations: boolean;
+}> {
+}
 export interface TextareaState {
-    polyfillPlaceholder: boolean;
-    rows: number | string;
+    needsPolyfillPlaceholder: boolean;
+    isCounterVisible: boolean;
 }
+export declare const TextareaDataTids: {
+    readonly root: "Textarea__root";
+    readonly counter: "TextareaCounter__root";
+};
 /**
  * Компонент для ввода многострочного текста.
  *
@@ -56,6 +91,8 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
         warning: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         autoResize: PropTypes.Requireable<boolean>;
+        extraRow: PropTypes.Requireable<boolean>;
+        disableAnimations: PropTypes.Requireable<boolean>;
         maxRows: PropTypes.Requireable<string | number>;
         resize: PropTypes.Requireable<string | number>;
         width: PropTypes.Requireable<string | number>;
@@ -95,15 +132,24 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
     static defaultProps: {
         rows: number;
         maxRows: number;
+        extraRow: boolean;
+        disableAnimations: boolean;
     };
     state: {
-        polyfillPlaceholder: boolean;
-        rows: number;
+        needsPolyfillPlaceholder: boolean;
+        isCounterVisible: boolean;
     };
+    private reflowCounter;
     private theme;
+    private selectAllId;
     private node;
     private fakeNode;
+    private counter;
     private layoutEvents;
+    private textareaObserver;
+    private setRootNode;
+    private getAutoResizeThrottleWait;
+    private isAnimationsDisabled;
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: TextareaProps): void;
@@ -118,17 +164,24 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
     blur(): void;
     /**
      * @public
+     * @param {number} start
+     * @param {number} end
      */
     setSelectionRange: (start: number, end: number) => void;
     /**
      * @public
      */
     selectAll: () => void;
+    private delaySelectAll;
+    private cancelDelayedSelectAll;
     private renderMain;
+    private handleCloseCounterHelp;
     private handleKeyDown;
     private handleChange;
     private ref;
     private refFake;
+    private refCounter;
+    private autoResizeHandler;
     private autoResize;
     private handleCut;
     private handlePaste;

package/cjs/components/Textarea/Textarea.js

@@ -1,19 +1,28 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Textarea = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TextareaDataTids = exports.Textarea = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _raf = _interopRequireDefault(require("raf"));
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
-var _polyfillPlaceholder = require("../../lib/polyfillPlaceholder");
+var _needsPolyfillPlaceholder = require("../../lib/needsPolyfillPlaceholder");
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _RenderLayer = require("../../internal/RenderLayer");
+var _ResizeDetector = require("../../internal/ResizeDetector");
+var _client = require("../../lib/client");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _currentEnvironment = require("../../lib/currentEnvironment");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
 
 var _TextareaHelpers = require("./TextareaHelpers");
 var _Textarea = require("./Textarea.styles");
+var _TextareaCounter = require("./TextareaCounter");var _excluded = ["width", "error", "warning", "autoResize", "resize", "onCut", "onPaste", "maxRows", "onFocus", "selectAllOnFocus", "placeholder", "onValueChange", "showLengthCounter", "lengthCounter", "counterHelp", "extraRow", "disableAnimations", "disabled"];var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
 var DEFAULT_WIDTH = 250;
+var AUTORESIZE_THROTTLE_DEFAULT_WAIT = 100;
 
 
 
@@ -66,14 +75,60 @@ var DEFAULT_WIDTH = 250;
 
 
 
-/**
- * Компонент для ввода многострочного текста.
- *
- * Принимает все атрибуты `React.TextareaHTMLAttributes<HTMLTextAreaElement>`
- *
- * ** `className` и `style`  игнорируются**
- */var
-Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Textarea, _React$Component);function Textarea() {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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var TextareaDataTids = {
+  root: 'Textarea__root',
+  counter: 'TextareaCounter__root' };
+
+
+/**
+ * Компонент для ввода многострочного текста.
+ *
+ * Принимает все атрибуты `React.TextareaHTMLAttributes<HTMLTextAreaElement>`
+ *
+ * ** `className` и `style`  игнорируются**
+ */exports.TextareaDataTids = TextareaDataTids;var
+
+Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Textarea, _React$Component);function Textarea() {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.
+
+
+
+
 
 
 
@@ -134,19 +189,22 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
     state = {
-      polyfillPlaceholder: _polyfillPlaceholder.polyfillPlaceholder,
-      rows: 1 };_this.
+      needsPolyfillPlaceholder: _needsPolyfillPlaceholder.needsPolyfillPlaceholder,
+      isCounterVisible: false };_this.
 
+    reflowCounter = function () {
+      if (_this.counter) {
+        _this.counter.reflow();
+      }
+    };_this.
 
-    theme = void 0;_this.
-    node = void 0;_this.
-    fakeNode = void 0;_this.
-    layoutEvents = void 0;_this.
 
+    selectAllId = null;_this.
 
 
 
 
+    textareaObserver = _client.isBrowser ? new MutationObserver(_this.reflowCounter) : null;_this.
 
 
 
@@ -194,26 +252,12 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
-    setSelectionRange = function (start, end) {
-      if (!_this.node) {
-        throw new Error('Cannot call "setSelectionRange" on unmounted Input');
-      }
 
-      if (document.activeElement !== _this.node) {
-        _this.focus();
-      }
 
-      _this.node.setSelectionRange(start, end);
-    };_this.
 
 
 
 
-    selectAll = function () {
-      if (_this.node) {
-        _this.setSelectionRange(0, _this.node.value.length);
-      }
-    };_this.
 
 
 
@@ -245,15 +289,38 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
+    setSelectionRange = function (start, end) {
+      if (!_this.node) {
+        throw new Error('Cannot call "setSelectionRange" on unmounted Input');
+      }
 
+      if (document.activeElement !== _this.node) {
+        _this.focus();
+      }
 
+      _this.node.setSelectionRange(start, end);
+    };_this.
 
 
 
 
+    selectAll = function () {
+      if (_this.node) {
+        _this.setSelectionRange(0, _this.node.value.length);
+      }
+    };_this.
 
+    delaySelectAll = function () {return _this.selectAllId = (0, _raf.default)(_this.selectAll);};_this.
 
+    cancelDelayedSelectAll = function () {
+      if (_this.selectAllId) {
+        _raf.default.cancel(_this.selectAllId);
+        _this.selectAllId = null;
+      }
+    };_this.
 
+    renderMain = function (props) {var _cx, _ref, _textareaProps$maxLen;
+      var _props$width =
 
 
 
@@ -273,19 +340,89 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
+      props.width,width = _props$width === void 0 ? DEFAULT_WIDTH : _props$width,error = props.error,warning = props.warning,autoResize = props.autoResize,resize = props.resize,onCut = props.onCut,onPaste = props.onPaste,maxRows = props.maxRows,onFocus = props.onFocus,selectAllOnFocus = props.selectAllOnFocus,placeholder = props.placeholder,onValueChange = props.onValueChange,showLengthCounter = props.showLengthCounter,lengthCounter = props.lengthCounter,counterHelp = props.counterHelp,extraRow = props.extraRow,disableAnimations = props.disableAnimations,disabled = props.disabled,textareaProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
+      var isCounterVisible = _this.state.isCounterVisible;
 
+      var rootProps = {
+        style: {
+          width: width } };
 
 
 
+      var textareaClassNames = (0, _Emotion.cx)((_cx = {}, _cx[
+      _Textarea.styles.textarea(_this.theme)] = true, _cx[
+      _Textarea.styles.disabled(_this.theme)] = disabled, _cx[
+      _Textarea.styles.error(_this.theme)] = !!error, _cx[
+      _Textarea.styles.warning(_this.theme)] = !!warning, _cx[
+      _Textarea.styles.disableAnimations()] = _this.isAnimationsDisabled(), _cx));
 
 
+      var textareaStyle = {
+        resize: autoResize ? 'none' : resize };
 
 
+      var placeholderPolyfill = null;
 
+      if (_this.state.needsPolyfillPlaceholder && !textareaProps.value && !textareaProps.defaultValue) {
+        placeholderPolyfill = /*#__PURE__*/_react.default.createElement("span", { className: _Textarea.styles.placeholder() }, placeholder);
+      }
+
+      var fakeTextarea = null;
+      if (autoResize) {
+        var fakeProps = {
+          value: _this.props.value,
+          defaultValue: _this.props.defaultValue,
+          className: (0, _Emotion.cx)(textareaClassNames, _Textarea.styles.fake()),
+          readOnly: true };
+
+        fakeTextarea = /*#__PURE__*/_react.default.createElement("textarea", (0, _extends2.default)({}, fakeProps, { ref: _this.refFake }));
+      }
+
+      var counter = showLengthCounter && isCounterVisible && _this.node && /*#__PURE__*/
+      _react.default.createElement(_TextareaCounter.TextareaCounter, {
+        textarea: _this.node,
+        help: counterHelp,
+        value: textareaProps.value,
+        length: (_ref = (_textareaProps$maxLen = textareaProps.maxLength) != null ? _textareaProps$maxLen : lengthCounter) != null ? _ref : 0,
+        onCloseHelp: _this.handleCloseCounterHelp,
+        ref: _this.refCounter });
+
+
+
+      return /*#__PURE__*/(
+        _react.default.createElement(_RenderLayer.RenderLayer, {
+          onFocusOutside: _this.handleCloseCounterHelp,
+          onClickOutside: _this.handleCloseCounterHelp,
+          active: _this.state.isCounterVisible }, /*#__PURE__*/
+
+        _react.default.createElement("label", (0, _extends2.default)({ "data-tid": TextareaDataTids.root }, rootProps, { className: _Textarea.styles.root(_this.theme) }),
+        placeholderPolyfill, /*#__PURE__*/
+        _react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this.reflowCounter }, /*#__PURE__*/
+        _react.default.createElement("textarea", (0, _extends2.default)({},
+        textareaProps, {
+          className: textareaClassNames,
+          style: textareaStyle,
+          placeholder: !placeholderPolyfill ? placeholder : undefined,
+          ref: _this.ref,
+          onChange: _this.handleChange,
+          onCut: _this.handleCut,
+          onPaste: _this.handlePaste,
+          onFocus: _this.handleFocus,
+          onKeyDown: _this.handleKeyDown,
+          disabled: disabled }),
+
+        _this.props.children)),
+
+
+        fakeTextarea,
+        counter)));
 
 
 
+    };_this.
+
+    handleCloseCounterHelp = function () {return _this.setState({ isCounterVisible: false });};_this.
 
     handleKeyDown = function (e) {
       // Edge bug: textarea maxlength doesn't work after new line
@@ -303,11 +440,11 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
     };_this.
 
     handleChange = function (e) {
-      if (_polyfillPlaceholder.polyfillPlaceholder) {
+      if (_needsPolyfillPlaceholder.needsPolyfillPlaceholder) {
         var fieldIsEmpty = e.target.value === '';
 
-        if (_this.state.polyfillPlaceholder !== fieldIsEmpty) {
-          _this.setState({ polyfillPlaceholder: fieldIsEmpty });
+        if (_this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {
+          _this.setState({ needsPolyfillPlaceholder: fieldIsEmpty });
         }
       }
 
@@ -322,6 +459,8 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
       if (_this.props.onChange) {
         _this.props.onChange(e);
       }
+
+      _this.reflowCounter();
     };_this.
 
     ref = function (element) {
@@ -332,7 +471,11 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
       _this.fakeNode = element;
     };_this.
 
-    autoResize = (0, _lodash.default)(function () {
+    refCounter = function (ref) {
+      _this.counter = ref;
+    };_this.
+
+    autoResizeHandler = function () {
       var fakeNode = _this.fakeNode;
       if (!fakeNode) {
         return;
@@ -343,21 +486,24 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
       }
       if (_this.props.value === undefined) {
         fakeNode.value = node.value;
-      }var _this$props =
+      }
 
-      _this.props,rows = _this$props.rows,maxRows = _this$props.maxRows;
+      var _this$props = _this.props,rows = _this$props.rows,maxRows = _this$props.maxRows,extraRow = _this$props.extraRow;
       if (rows === undefined || maxRows === undefined) {
         return;
-      }var _getTextAreaHeight =
-      (0, _TextareaHelpers.getTextAreaHeight)(
-      fakeNode,
-      typeof rows === 'number' ? rows : parseInt(rows, 10),
-      typeof maxRows === 'number' ? maxRows : parseInt(maxRows, 10)),height = _getTextAreaHeight.height,exceededMaxHeight = _getTextAreaHeight.exceededMaxHeight;
+      }
+      var _getTextAreaHeight = (0, _TextareaHelpers.getTextAreaHeight)({
+        node: fakeNode,
+        minRows: typeof rows === 'number' ? rows : parseInt(rows, 10),
+        maxRows: typeof maxRows === 'number' ? maxRows : parseInt(maxRows, 10),
+        extraRow: extraRow }),height = _getTextAreaHeight.height,exceededMaxHeight = _getTextAreaHeight.exceededMaxHeight;
 
       node.style.height = height + 'px';
       node.style.overflowY = exceededMaxHeight ? 'scroll' : 'hidden';
       fakeNode.style.overflowY = exceededMaxHeight ? 'scroll' : 'hidden';
-    }, 100);_this.
+    };_this.
+
+    autoResize = (0, _lodash.default)(_this.autoResizeHandler, _this.getAutoResizeThrottleWait());_this.
 
     handleCut = function (event) {
       if (_this.props.autoResize) {
@@ -367,6 +513,8 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
       if (_this.props.onCut) {
         _this.props.onCut(event);
       }
+
+      _this.reflowCounter();
     };_this.
 
     handlePaste = function (event) {
@@ -377,20 +525,29 @@ Textarea = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
       if (_this.props.onPaste) {
         _this.props.onPaste(event);
       }
+
+      _this.reflowCounter();
     };_this.
 
     handleFocus = function (event) {
+      _this.setState({ isCounterVisible: true });
+
       if (_this.props.selectAllOnFocus) {
-        _this.selectAll();
+        // https://github.com/facebook/react/issues/7769
+        _this.node && !_client.isIE11 ? _this.selectAll() : _this.delaySelectAll();
       }
 
       if (_this.props.onFocus) {
         _this.props.onFocus(event);
       }
-    };return _this;}var _proto = Textarea.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoResize) {this.autoResize();this.layoutEvents = LayoutEvents.addListener(this.autoResize);}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutEvents) {this.layoutEvents.remove();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.props.autoResize && this.props.rows > this.state.rows || this.props.value !== prevProps.value) {this.autoResize();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});} /**
-   * @public
-   */;_proto.focus = function focus() {if (this.node) {this.node.focus();}} /**
-   * @public
-   */;_proto.blur = function blur() {if (this.node) {this.node.blur();}} /**
-   * @public
-   */;_proto.renderMain = function renderMain() {var _cn;var _this$props2 = this.props,_this$props2$width = _this$props2.width,width = _this$props2$width === void 0 ? DEFAULT_WIDTH : _this$props2$width,error = _this$props2.error,warning = _this$props2.warning,autoResize = _this$props2.autoResize,resize = _this$props2.resize,onCut = _this$props2.onCut,onPaste = _this$props2.onPaste,maxRows = _this$props2.maxRows,onFocus = _this$props2.onFocus,selectAllOnFocus = _this$props2.selectAllOnFocus,className = _this$props2.className,style = _this$props2.style,placeholder = _this$props2.placeholder,onValueChange = _this$props2.onValueChange,textareaProps = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["width", "error", "warning", "autoResize", "resize", "onCut", "onPaste", "maxRows", "onFocus", "selectAllOnFocus", "className", "style", "placeholder", "onValueChange"]);var rootProps = { style: { width: width } };var textareaClassNames = (0, _classnames.default)((_cn = {}, _cn[_Textarea.jsStyles.textarea(this.theme)] = true, _cn[_Textarea.jsStyles.error(this.theme)] = !!error, _cn[_Textarea.jsStyles.warning(this.theme)] = !!warning, _cn));var textAreaStyle = { resize: autoResize ? 'none' : resize };var placeholderPolyfill = null;if (this.state.polyfillPlaceholder && !textareaProps.value) {placeholderPolyfill = /*#__PURE__*/_react.default.createElement("span", { className: _Textarea.jsStyles.placeholder() }, placeholder);}var fakeTextarea = null;if (autoResize) {var fakeProps = { value: this.props.value, defaultValue: this.props.defaultValue, className: (0, _classnames.default)(textareaClassNames, _Textarea.jsStyles.fake()), readOnly: true };fakeTextarea = /*#__PURE__*/_react.default.createElement("textarea", (0, _extends2.default)({}, fakeProps, { ref: this.refFake }));}return /*#__PURE__*/_react.default.createElement("label", (0, _extends2.default)({}, rootProps, { className: _Textarea.jsStyles.root(this.theme) }), placeholderPolyfill, /*#__PURE__*/_react.default.createElement("textarea", (0, _extends2.default)({}, textareaProps, { className: textareaClassNames, style: textAreaStyle, placeholder: !placeholderPolyfill ? placeholder : undefined, ref: this.ref, onChange: this.handleChange, onCut: this.handleCut, onPaste: this.handlePaste, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), fakeTextarea);};return Textarea;}(_react.default.Component);exports.Textarea = Textarea;Textarea.__KONTUR_REACT_UI__ = 'Textarea';Textarea.propTypes = { error: _propTypes.default.bool, warning: _propTypes.default.bool, disabled: _propTypes.default.bool, autoResize: _propTypes.default.bool, maxRows: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), resize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), id: _propTypes.default.string, name: _propTypes.default.string, title: _propTypes.default.string, spellCheck: _propTypes.default.bool, role: _propTypes.default.string, maxLength: _propTypes.default.number, tabIndex: _propTypes.default.number, rows: _propTypes.default.number, placeholder: _propTypes.default.string, value: _propTypes.default.string, defaultValue: _propTypes.default.string, onValueChange: _propTypes.default.func, onMouseEnter: _propTypes.default.func, onMouseLeave: _propTypes.default.func, onMouseOver: _propTypes.default.func, onMouseMove: _propTypes.default.func, onMouseOut: _propTypes.default.func, onMouseUp: _propTypes.default.func, onMouseDown: _propTypes.default.func, onClick: _propTypes.default.func, onDoubleClick: _propTypes.default.func, onKeyDown: _propTypes.default.func, onKeyPress: _propTypes.default.func, onKeyUp: _propTypes.default.func, onInput: _propTypes.default.func, onFocus: _propTypes.default.func, onBlur: _propTypes.default.func, onScroll: _propTypes.default.func, onWheel: _propTypes.default.func, onCut: _propTypes.default.func, onPaste: _propTypes.default.func, onCopy: _propTypes.default.func };Textarea.defaultProps = { rows: 3, maxRows: 15 };
+    };return _this;}var _proto = Textarea.prototype;_proto.getAutoResizeThrottleWait = function getAutoResizeThrottleWait(props) {if (props === void 0) {props = this.props;} // NOTE: При отключении анимации остается эффект дергания при авто-ресайзе из-за троттлинга расчета высоты
+    // Поэтому выставляем таймаут троттла в ноль. Подробности - https://github.com/skbkontur/retail-ui/issues/2120
+    return this.isAnimationsDisabled(props) ? 0 : AUTORESIZE_THROTTLE_DEFAULT_WAIT;};_proto.isAnimationsDisabled = function isAnimationsDisabled(_temp2) {var _ref2 = _temp2 === void 0 ? this.props : _temp2,disableAnimations = _ref2.disableAnimations,extraRow = _ref2.extraRow;return disableAnimations || !extraRow;};_proto.componentDidMount = function componentDidMount() {if (this.props.autoResize) {this.autoResize();this.layoutEvents = LayoutEvents.addListener(this.autoResize);}if (this.node && this.props.showLengthCounter && this.textareaObserver) {this.textareaObserver.observe(this.node, { attributes: true });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutEvents) {this.layoutEvents.remove();}if (this.props.showLengthCounter && this.textareaObserver) {this.textareaObserver.disconnect();}this.cancelDelayedSelectAll();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.getAutoResizeThrottleWait() !== this.getAutoResizeThrottleWait(prevProps)) {this.autoResize.cancel();this.autoResize = (0, _lodash.default)(this.autoResizeHandler, this.getAutoResizeThrottleWait());}if (this.props.autoResize && (this.props.rows !== prevProps.rows || this.props.maxRows !== prevProps.maxRows || this.props.value !== prevProps.value)) {this.autoResize();}};_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(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});} /**
+   * @public
+   */;_proto.focus = function focus() {if (this.node) {this.node.focus();}} /**
+   * @public
+   */;_proto.blur = function blur() {if (this.node) {this.node.blur();}} /**
+   * @public
+   * @param {number} start
+   * @param {number} end
+   */;return Textarea;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Textarea', _class2.propTypes = { error: _propTypes.default.bool, warning: _propTypes.default.bool, disabled: _propTypes.default.bool, autoResize: _propTypes.default.bool, extraRow: _propTypes.default.bool, disableAnimations: _propTypes.default.bool, maxRows: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), resize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), id: _propTypes.default.string, name: _propTypes.default.string, title: _propTypes.default.string, spellCheck: _propTypes.default.bool, role: _propTypes.default.string, maxLength: _propTypes.default.number, tabIndex: _propTypes.default.number, rows: _propTypes.default.number, placeholder: _propTypes.default.string, value: _propTypes.default.string, defaultValue: _propTypes.default.string, onValueChange: _propTypes.default.func, onMouseEnter: _propTypes.default.func, onMouseLeave: _propTypes.default.func, onMouseOver: _propTypes.default.func, onMouseMove: _propTypes.default.func, onMouseOut: _propTypes.default.func, onMouseUp: _propTypes.default.func, onMouseDown: _propTypes.default.func, onClick: _propTypes.default.func, onDoubleClick: _propTypes.default.func, onKeyDown: _propTypes.default.func, onKeyPress: _propTypes.default.func, onKeyUp: _propTypes.default.func, onInput: _propTypes.default.func, onFocus: _propTypes.default.func, onBlur: _propTypes.default.func, onScroll: _propTypes.default.func, onWheel: _propTypes.default.func, onCut: _propTypes.default.func, onPaste: _propTypes.default.func, onCopy: _propTypes.default.func }, _class2.defaultProps = { rows: 3, maxRows: 15, extraRow: true, disableAnimations: _currentEnvironment.isTestEnv }, _temp)) || _class;exports.Textarea = Textarea;