@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0fe669bb2d

package/components/Textarea/Textarea.d.ts

@@ -3,26 +3,30 @@ import PropTypes from 'prop-types';
 import { Override } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export interface TextareaProps extends CommonProps, Override<React.TextareaHTMLAttributes<HTMLTextAreaElement>, {
-    /** Ошибка */
+    /**
+     * Состояние валидации при ошибке.
+     */
     error?: boolean;
-    /** Предупреждение */
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
     /** Не активное состояние */
     disabled?: boolean;
     /**
-     * Атоматический ресайз
+     * Автоматический ресайз
      * в зависимости от содержимого
      */
     autoResize?: boolean;
     /**
      * Число строк
      */
-    rows: number;
+    rows?: number;
     /**
      * Максимальное число строк при
      * автоматическом ресайзе
      */
-    maxRows: string | number;
+    maxRows?: string | number;
     /**
      * Стандартный ресайз
      * Попадает в `style`
@@ -46,7 +50,7 @@ export interface TextareaProps extends CommonProps, Override<React.TextareaHTMLA
     lengthCounter?: number;
     /** Подсказка к счетчику символов.
      *
-     * По умолчанию - тултип с содежимым из пропа, если передан`ReactNode`.
+     * По умолчанию - тултип с содержимым из пропа, если передан`ReactNode`.
      *
      * Передав функцию, можно переопределить подсказку целиком, вместе с иконкой. Например,
      *
@@ -58,18 +62,22 @@ export interface TextareaProps extends CommonProps, Override<React.TextareaHTMLA
     /** Добавлять дополнительную свободную строку при авто-ресайзе.
      * @see https://guides.kontur.ru/components/textarea/#04
      * */
-    extraRow: boolean;
+    extraRow?: boolean;
     /** Отключать анимацию при авто-ресайзе.
      * Автоматически отключается когда в `extraRow` передан `false`.
      */
-    disableAnimations: boolean;
+    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";
+};
+declare type DefaultProps = Required<Pick<TextareaProps, 'rows' | 'maxRows' | 'extraRow' | 'disableAnimations'>>;
 /**
  * Компонент для ввода многострочного текста.
  *
@@ -122,15 +130,10 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
         onPaste: PropTypes.Requireable<(...args: any[]) => any>;
         onCopy: PropTypes.Requireable<(...args: any[]) => any>;
     };
-    static defaultProps: {
-        rows: number;
-        maxRows: number;
-        extraRow: boolean;
-        disableAnimations: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: {
-        polyfillPlaceholder: boolean;
-        rows: number;
+        needsPolyfillPlaceholder: boolean;
         isCounterVisible: boolean;
     };
     private reflowCounter;
@@ -141,6 +144,7 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
     private counter;
     private layoutEvents;
     private textareaObserver;
+    private setRootNode;
     private getAutoResizeThrottleWait;
     private isAnimationsDisabled;
     componentDidMount(): void;
@@ -180,3 +184,4 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
     private handlePaste;
     private handleFocus;
 }
+export {};

package/components/Textarea/Textarea.md

@@ -1,25 +1,25 @@
-```jsx harmony
-const [value, setValue] = React.useState('');
-
-<Textarea
-  value={value}
-  onValueChange={setValue}
-  autoResize
-  placeholder="Through faith we can reign in every area of life"
-/>;
-```
-
-Счетчик введенных символов
-
-```jsx harmony
-const [value, setValue] = React.useState('');
-
-<Textarea
-  value={value}
-  onValueChange={setValue}
-  placeholder="Счетчик появляется при фокусе"
-  lengthCounter={10}
-  showLengthCounter
-  counterHelp="Hello 👋"
-/>;
-```
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<Textarea
+  value={value}
+  onValueChange={setValue}
+  autoResize
+  placeholder="Through faith we can reign in every area of life"
+/>;
+```
+
+Счетчик введенных символов
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<Textarea
+  value={value}
+  onValueChange={setValue}
+  placeholder="Счетчик появляется при фокусе"
+  lengthCounter={10}
+  showLengthCounter
+  counterHelp="Hello 👋"
+/>;
+```

package/components/Textarea/Textarea.styles/Textarea.styles.js

@@ -1,41 +1,43 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
   root: function root(t) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      position: relative;\n    "])), t.textareaFontSize, t.textareaLineHeight);
   },
   textarea: function textarea(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      -webkit-appearance: none;\n      background-clip: padding-box;\n      background: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ", ";\n      min-height: ", ";\n      outline: none;\n      padding: ", " ", ";\n      transition: height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ", ";\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ", ";\n        }\n      }\n      &:disabled {\n        color: ", ";\n        background: ", ";\n        border-color: ", ";\n        box-shadow: none;\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n\n      &:disabled::placeholder {\n        color: ", ";\n      }\n\n      &:-moz-placeholder {\n        color: ", ";\n      }\n\n      &::-moz-placeholder {\n        color: ", ";\n      }\n    "])), t.textareaBg, t.textareaBorderWidth, t.textareaBorderColor, t.textareaBorderTopColor, t.textareaShadow, t.textareaColor, t.textareaWidth, t.textareaMinHeight, t.textareaPaddingY, t.textareaPaddingX, t.textareaBorderRadius, t.textareaBorderColorFocus, t.textareaOutlineWidth, t.textareaBorderColorFocus, t.textareaPlaceholderColorLight, t.textareaTextColorDisabled, t.textareaDisabledBg, t.textareaDisabledBorderColor, t.textareaPlaceholderColor, t.textareaPlaceholderColorDisabled, t.textareaPlaceholderColor, t.textareaPlaceholderColor);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      -webkit-appearance: none;\n      background-clip: padding-box;\n      background: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ", ";\n      min-height: ", ";\n      outline: none;\n      padding: ", " ", ";\n      transition: height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ", ";\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ", ";\n        }\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n\n      &:-moz-placeholder {\n        color: ", ";\n      }\n\n      &::-moz-placeholder {\n        color: ", ";\n      }\n    "])), t.textareaBg, t.textareaBorderWidth, t.textareaBorderColor, t.textareaBorderTopColor, t.textareaShadow, t.textareaColor, t.textareaWidth, t.textareaMinHeight, t.textareaPaddingY, t.textareaPaddingX, t.textareaBorderRadius, t.textareaBorderColorFocus, t.textareaOutlineWidth, t.textareaBorderColorFocus, t.textareaPlaceholderColorLight, t.textareaPlaceholderColor, t.textareaPlaceholderColor, t.textareaPlaceholderColor);
   },
   error: function error(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", "& {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n      ", "&:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), cssName(styles.textarea(t)), t.textareaBorderColorError, t.textareaBorderWidth, t.textareaBorderColorError, cssName(styles.textarea(t)), t.textareaBorderColorError, t.textareaOutlineWidth, t.textareaBorderColorError);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.textareaBorderColorError, t.textareaBorderWidth, t.textareaBorderColorError, t.textareaBorderColorError, t.textareaOutlineWidth, t.textareaBorderColorError);
   },
   warning: function warning(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", "& {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n      ", "&:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), cssName(styles.textarea(t)), t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning, cssName(styles.textarea(t)), t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning, t.textareaBorderColorWarning, t.textareaOutlineWidth, t.textareaBorderColorWarning);
+  },
+  disabled: function disabled(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      box-shadow: none;\n\n      &::placeholder {\n        color: ", ";\n      }\n    "])), t.textareaTextColorDisabled, t.textareaDisabledBg, t.textareaDisabledBorderColor, t.textareaPlaceholderColorDisabled);
   },
   fake: function fake() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    "])));
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    "])));
   },
   placeholder: function placeholder() {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    "])));
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    "])));
   },
   counterContainer: function counterContainer(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      border: ", " solid transparent;\n      box-sizing: content-box;\n    "])), t.textareaBorderWidth);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      border: ", " solid transparent;\n      box-sizing: content-box;\n    "])), t.textareaBorderWidth);
   },
   counter: function counter(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ", ";\n      color: ", ";\n      border-radius: 2px;\n      right: ", ";\n      bottom: ", ";\n    "])), t.textareaCounterBg, t.textareaCounterColor, t.textareaPaddingX, t.textareaPaddingY);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ", ";\n      color: ", ";\n      border-radius: 2px;\n      right: ", ";\n      bottom: ", ";\n    "])), t.textareaCounterBg, t.textareaCounterColor, t.textareaPaddingX, t.textareaPaddingY);
   },
   counterError: function counterError(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n    "])), t.textareaCounterErrorColor);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textareaCounterErrorColor);
   },
   counterHelp: function counterHelp() {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      margin-left: 4px;\n      cursor: pointer;\n    "])));
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      margin-left: 4px;\n      cursor: pointer;\n    "])));
   },
   disableAnimations: function disableAnimations() {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      transition: none;\n    "])));
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      transition: none;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Textarea/Textarea.styles/Textarea.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Textarea.styles.ts"],"names":["css","cssName","memoizeStyle","styles","root","t","textareaFontSize","textareaLineHeight","textarea","textareaBg","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","textareaMinHeight","textareaPaddingY","textareaPaddingX","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColor","textareaPlaceholderColorDisabled","error","textareaBorderColorError","warning","textareaBorderColorWarning","fake","placeholder","counterContainer","counter","textareaCounterBg","textareaCounterColor","counterError","textareaCounterErrorColor","counterHelp","disableAnimations","jsStyles"],"mappings":"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","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      font-size: ${t.textareaFontSize};\r\n      line-height: ${t.textareaLineHeight};\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  textarea(t: Theme) {\r\n    return css`\r\n      -webkit-appearance: none;\r\n      background-clip: padding-box;\r\n      background: ${t.textareaBg};\r\n      border: ${t.textareaBorderWidth} solid ${t.textareaBorderColor};\r\n      border-top-color: ${t.textareaBorderTopColor};\r\n      box-shadow: ${t.textareaShadow};\r\n      box-sizing: border-box;\r\n      color: ${t.textareaColor};\r\n      font-family: inherit;\r\n      font-size: inherit;\r\n      line-height: inherit;\r\n      max-width: 100%;\r\n      min-width: ${t.textareaWidth};\r\n      min-height: ${t.textareaMinHeight};\r\n      outline: none;\r\n      padding: ${t.textareaPaddingY} ${t.textareaPaddingX};\r\n      transition: height 0.2s ease-out;\r\n      vertical-align: middle;\r\n      width: 100%;\r\n      border-radius: ${t.textareaBorderRadius};\r\n      white-space: pre-wrap;\r\n\r\n      &:focus {\r\n        border-color: ${t.textareaBorderColorFocus};\r\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorFocus};\r\n        position: relative;\r\n        z-index: 2;\r\n\r\n        &::placeholder {\r\n          color: ${t.textareaPlaceholderColorLight};\r\n        }\r\n      }\r\n      &:disabled {\r\n        color: ${t.textareaTextColorDisabled};\r\n        background: ${t.textareaDisabledBg};\r\n        border-color: ${t.textareaDisabledBorderColor};\r\n        box-shadow: none;\r\n      }\r\n\r\n      &::placeholder {\r\n        color: ${t.textareaPlaceholderColor};\r\n      }\r\n\r\n      &:disabled::placeholder {\r\n        color: ${t.textareaPlaceholderColorDisabled};\r\n      }\r\n\r\n      &:-moz-placeholder {\r\n        color: ${t.textareaPlaceholderColor};\r\n      }\r\n\r\n      &::-moz-placeholder {\r\n        color: ${t.textareaPlaceholderColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.textarea(t))}& {\r\n        border-color: ${t.textareaBorderColorError};\r\n        box-shadow: 0 0 0 ${t.textareaBorderWidth} ${t.textareaBorderColorError};\r\n      }\r\n      ${cssName(styles.textarea(t))}&:focus {\r\n        border-color: ${t.textareaBorderColorError};\r\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorError};\r\n      }\r\n    `;\r\n  },\r\n\r\n  warning(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.textarea(t))}& {\r\n        border-color: ${t.textareaBorderColorWarning};\r\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\r\n      }\r\n      ${cssName(styles.textarea(t))}&:focus {\r\n        border-color: ${t.textareaBorderColorWarning};\r\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\r\n      }\r\n    `;\r\n  },\r\n\r\n  fake() {\r\n    return css`\r\n      height: 0;\r\n      left: 0;\r\n      position: absolute;\r\n      top: 0;\r\n      visibility: hidden;\r\n      width: 100%;\r\n    `;\r\n  },\r\n\r\n  placeholder() {\r\n    return css`\r\n      -ms-user-select: none;\r\n      color: #aaa;\r\n      left: 12px;\r\n      overflow: hidden;\r\n      position: absolute;\r\n      right: 12px;\r\n      top: 9px;\r\n      user-select: none;\r\n      z-index: 3;\r\n    `;\r\n  },\r\n\r\n  counterContainer(t: Theme) {\r\n    return css`\r\n      position: absolute;\r\n      top: 0;\r\n      border: ${t.textareaBorderWidth} solid transparent;\r\n      box-sizing: content-box;\r\n    `;\r\n  },\r\n\r\n  counter(t: Theme) {\r\n    return css`\r\n      position: absolute;\r\n      z-index: 3;\r\n      text-align: right;\r\n      background: ${t.textareaCounterBg};\r\n      color: ${t.textareaCounterColor};\r\n      border-radius: 2px;\r\n      right: ${t.textareaPaddingX};\r\n      bottom: ${t.textareaPaddingY};\r\n    `;\r\n  },\r\n\r\n  counterError(t: Theme) {\r\n    return css`\r\n      color: ${t.textareaCounterErrorColor} !important;\r\n    `;\r\n  },\r\n\r\n  counterHelp() {\r\n    return css`\r\n      margin-left: 4px;\r\n      cursor: pointer;\r\n    `;\r\n  },\r\n\r\n  disableAnimations() {\r\n    return css`\r\n      transition: none;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Textarea.styles.ts"],"names":["css","memoizeStyle","styles","root","t","textareaFontSize","textareaLineHeight","textarea","textareaBg","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","textareaMinHeight","textareaPaddingY","textareaPaddingX","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaPlaceholderColor","error","textareaBorderColorError","warning","textareaBorderColorWarning","disabled","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColorDisabled","fake","placeholder","counterContainer","counter","textareaCounterBg","textareaCounterColor","counterError","textareaCounterErrorColor","counterHelp","disableAnimations"],"mappings":"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","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      font-size: ${t.textareaFontSize};\n      line-height: ${t.textareaLineHeight};\n      position: relative;\n    `;\n  },\n\n  textarea(t: Theme) {\n    return css`\n      -webkit-appearance: none;\n      background-clip: padding-box;\n      background: ${t.textareaBg};\n      border: ${t.textareaBorderWidth} solid ${t.textareaBorderColor};\n      border-top-color: ${t.textareaBorderTopColor};\n      box-shadow: ${t.textareaShadow};\n      box-sizing: border-box;\n      color: ${t.textareaColor};\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ${t.textareaWidth};\n      min-height: ${t.textareaMinHeight};\n      outline: none;\n      padding: ${t.textareaPaddingY} ${t.textareaPaddingX};\n      transition: height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ${t.textareaBorderRadius};\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ${t.textareaBorderColorFocus};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorFocus};\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ${t.textareaPlaceholderColorLight};\n        }\n      }\n\n      &::placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n\n      &:-moz-placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n\n      &::-moz-placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      border-color: ${t.textareaBorderColorError};\n      box-shadow: 0 0 0 ${t.textareaBorderWidth} ${t.textareaBorderColorError};\n\n      &:focus {\n        border-color: ${t.textareaBorderColorError};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorError};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      border-color: ${t.textareaBorderColorWarning};\n      box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n\n      &:focus {\n        border-color: ${t.textareaBorderColorWarning};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: ${t.textareaTextColorDisabled};\n      background: ${t.textareaDisabledBg};\n      border-color: ${t.textareaDisabledBorderColor};\n      box-shadow: none;\n\n      &::placeholder {\n        color: ${t.textareaPlaceholderColorDisabled};\n      }\n    `;\n  },\n\n  fake() {\n    return css`\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    `;\n  },\n\n  placeholder() {\n    return css`\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    `;\n  },\n\n  counterContainer(t: Theme) {\n    return css`\n      position: absolute;\n      top: 0;\n      border: ${t.textareaBorderWidth} solid transparent;\n      box-sizing: content-box;\n    `;\n  },\n\n  counter(t: Theme) {\n    return css`\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ${t.textareaCounterBg};\n      color: ${t.textareaCounterColor};\n      border-radius: 2px;\n      right: ${t.textareaPaddingX};\n      bottom: ${t.textareaPaddingY};\n    `;\n  },\n\n  counterError(t: Theme) {\n    return css`\n      color: ${t.textareaCounterErrorColor};\n    `;\n  },\n\n  counterHelp() {\n    return css`\n      margin-left: 4px;\n      cursor: pointer;\n    `;\n  },\n\n  disableAnimations() {\n    return css`\n      transition: none;\n    `;\n  },\n});\n"]}

package/components/Textarea/Textarea.styles.d.ts

@@ -1,9 +1,10 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     root(t: Theme): string;
     textarea(t: Theme): string;
     error(t: Theme): string;
     warning(t: Theme): string;
+    disabled(t: Theme): string;
     fake(): string;
     placeholder(): string;
     counterContainer(t: Theme): string;

package/components/Textarea/TextareaCounter/TextareaCounter.js

@@ -1,17 +1,21 @@
-import React, { useEffect, useContext, useCallback, useImperativeHandle, useState } from 'react';
-import cn from 'classnames';
+import React, { useContext, useCallback, useImperativeHandle, useState } from 'react';
+import propTypes from 'prop-types';
+import { safePropTypesInstanceOf } from "../../../lib/SSRSafe";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
 import { HelpDotIcon } from "../../../internal/icons/16px";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isFunction } from "../../../lib/utils";
 import { Tooltip } from "../../Tooltip";
-import { jsStyles } from "../Textarea.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { TextareaDataTids } from "../Textarea";
+import { styles } from "../Textarea.styles";
 
 var handleHelpMouseDown = function handleHelpMouseDown(e) {
   return e.preventDefault();
 };
 
-export var TextareaCounter = /*#__PURE__*/React.forwardRef(function TextareaCounter(_ref, ref) {
-  var _cn;
+export var TextareaCounter = forwardRefAndName('TextareaCounter', function (_ref, ref) {
+  var _cx;
 
   var length = _ref.length,
       value = _ref.value,
@@ -28,19 +32,17 @@ export var TextareaCounter = /*#__PURE__*/React.forwardRef(function TextareaCoun
       height = _useState2[0],
       setHeight = _useState2[1];
 
-  var reflow = function reflow() {
+  var reflow = useCallback(function () {
     var clientWidth = textarea.clientWidth,
         clientHeight = textarea.clientHeight;
     setWidth(clientWidth);
     setHeight(clientHeight);
-  };
-
-  useEffect(reflow, [textarea]);
+  }, [textarea]);
   useImperativeHandle(ref, function () {
     return {
       reflow: reflow
     };
-  }, [ref]);
+  }, [reflow]);
   var renderTooltipContent = useCallback(function () {
     return help;
   }, [help]);
@@ -56,14 +58,24 @@ export var TextareaCounter = /*#__PURE__*/React.forwardRef(function TextareaCoun
     color: theme.textareaCounterHelpIconColor
   }));
   return /*#__PURE__*/React.createElement("div", {
-    className: jsStyles.counterContainer(theme),
+    "data-tid": TextareaDataTids.counter,
+    className: styles.counterContainer(theme),
     style: {
       width: width,
       height: height
     }
   }, /*#__PURE__*/React.createElement("span", {
-    className: cn(jsStyles.counter(theme), (_cn = {}, _cn[jsStyles.counterError(theme)] = counterValue < 0, _cn))
+    className: cx(styles.counter(theme), (_cx = {}, _cx[styles.counterError(theme)] = counterValue < 0, _cx))
   }, counterValue, help && /*#__PURE__*/React.createElement("span", {
-    className: jsStyles.counterHelp()
+    className: styles.counterHelp()
   }, counterHelp)));
-});
+});
+TextareaCounter.propTypes = {
+  length: propTypes.number.isRequired,
+  value: propTypes.oneOfType([propTypes.string, propTypes.number]),
+  help: propTypes.oneOfType([propTypes.node, propTypes.func]),
+  onCloseHelp: propTypes.func.isRequired,
+  textarea: safePropTypesInstanceOf(function () {
+    return HTMLElement;
+  }).isRequired
+};

package/components/Textarea/TextareaCounter/TextareaCounter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextareaCounter.tsx"],"names":["React","useEffect","useContext","useCallback","useImperativeHandle","useState","cn","HelpDotIcon","ThemeContext","isFunction","Tooltip","jsStyles","handleHelpMouseDown","e","preventDefault","TextareaCounter","forwardRef","ref","length","value","help","onCloseHelp","textarea","theme","clientWidth","width","setWidth","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","counterHelp","textareaCounterHelpIconColor","counterContainer","counter","counterError"],"mappings":"AAAA,OAAOA,KAAP,IAAgCC,SAAhC,EAA2CC,UAA3C,EAAuDC,WAAvD,EAAoEC,mBAApE,EAAyFC,QAAzF,QAAyG,OAAzG;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,WAAT,QAA4B,2BAA5B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,OAAT,QAAwB,YAAxB;;;AAGA,SAASC,QAAT,QAAyB,mBAAzB;;;;;;;;;;;;;;AAcA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,UAAuBA,CAAC,CAACC,cAAF,EAAvB,EAA5B;;AAEA,OAAO,IAAMC,eAAe,gBAAGf,KAAK,CAACgB,UAAN,CAA2D,SAASD,eAAT;;AAExFE,GAFwF;AAGxF,aAFEC,MAEF,QAFEA,MAEF,CAFUC,KAEV,QAFUA,KAEV,CAFiBC,IAEjB,QAFiBA,IAEjB,CAFuBC,WAEvB,QAFuBA,WAEvB,CAFoCC,QAEpC,QAFoCA,QAEpC;AACA,MAAMC,KAAK,GAAGrB,UAAU,CAACM,YAAD,CAAxB,CADA;AAE0BH,EAAAA,QAAQ,CAACiB,QAAQ,CAACE,WAAV,CAFlC,CAEOC,KAFP,gBAEcC,QAFd;AAG4BrB,EAAAA,QAAQ,CAACiB,QAAQ,CAACK,YAAV,CAHpC,CAGOC,MAHP,iBAGeC,SAHf;AAIA,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACXN,IAAAA,WADW,GACmBF,QADnB,CACXE,WADW,CACEG,YADF,GACmBL,QADnB,CACEK,YADF;AAEnBD,IAAAA,QAAQ,CAACF,WAAD,CAAR;AACAK,IAAAA,SAAS,CAACF,YAAD,CAAT;AACD,GAJD;AAKA1B,EAAAA,SAAS,CAAC6B,MAAD,EAAS,CAACR,QAAD,CAAT,CAAT;AACAlB,EAAAA,mBAAmB,CAACa,GAAD,EAAM,oBAAO,EAAEa,MAAM,EAANA,MAAF,EAAP,EAAN,EAA0B,CAACb,GAAD,CAA1B,CAAnB;AACA,MAAMc,oBAAoB,GAAG5B,WAAW,CAAC,oBAAMiB,IAAN,EAAD,EAAa,CAACA,IAAD,CAAb,CAAxC;AACA,MAAMY,aAAa,GAAGb,KAAK,GAAGA,KAAK,CAACc,QAAN,GAAiBf,MAApB,GAA6B,CAAxD;AACA,MAAMgB,YAAY,GAAGhB,MAAM,GAAGc,aAA9B;AACA,MAAMG,WAAW,GAAG1B,UAAU,CAACW,IAAD,CAAV;AAClBA,EAAAA,IAAI,EADc;;AAGlB,sBAAC,OAAD,IAAS,GAAG,EAAE,cAAd,EAA8B,OAAO,EAAE,OAAvC,EAAgD,MAAM,EAAEW,oBAAxD,EAA8E,YAAY,EAAEV,WAA5F;AACE,sBAAC,WAAD,IAAa,WAAW,EAAET,mBAA1B,EAA+C,KAAK,EAAEW,KAAK,CAACa,4BAA5D,GADF,CAHF;;;;AAQA;AACE,iCAAK,SAAS,EAAEzB,QAAQ,CAAC0B,gBAAT,CAA0Bd,KAA1B,CAAhB,EAAkD,KAAK,EAAE,EAAEE,KAAK,EAALA,KAAF,EAASG,MAAM,EAANA,MAAT,EAAzD;AACE;AACE,MAAA,SAAS,EAAEtB,EAAE,CAACK,QAAQ,CAAC2B,OAAT,CAAiBf,KAAjB,CAAD;AACVZ,MAAAA,QAAQ,CAAC4B,YAAT,CAAsBhB,KAAtB,CADU,IACqBW,YAAY,GAAG,CADpC,OADf;;;AAKGA,IAAAA,YALH;AAMGd,IAAAA,IAAI,iBAAI,8BAAM,SAAS,EAAET,QAAQ,CAACwB,WAAT,EAAjB,IAA0CA,WAA1C,CANX,CADF,CADF;;;;AAYD,CArC8B,CAAxB","sourcesContent":["import React, { SyntheticEvent, useEffect, useContext, useCallback, useImperativeHandle, useState } from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { HelpDotIcon } from '../../internal/icons/16px';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { isFunction } from '../../lib/utils';\r\nimport { Tooltip } from '../Tooltip';\r\n\r\nimport { TextareaProps } from './Textarea';\r\nimport { jsStyles } from './Textarea.styles';\r\n\r\nexport type TextareaCounterProps = {\r\n  value: TextareaProps['value'];\r\n  length: number;\r\n  help: TextareaProps['counterHelp'];\r\n  onCloseHelp: () => void;\r\n  textarea: HTMLTextAreaElement;\r\n};\r\n\r\nexport interface TextareaCounterRef {\r\n  reflow: () => void;\r\n}\r\n\r\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\r\n\r\nexport const TextareaCounter = React.forwardRef<TextareaCounterRef, TextareaCounterProps>(function TextareaCounter(\r\n  { length, value, help, onCloseHelp, textarea },\r\n  ref,\r\n) {\r\n  const theme = useContext(ThemeContext);\r\n  const [width, setWidth] = useState(textarea.clientWidth);\r\n  const [height, setHeight] = useState(textarea.clientHeight);\r\n  const reflow = () => {\r\n    const { clientWidth, clientHeight } = textarea;\r\n    setWidth(clientWidth);\r\n    setHeight(clientHeight);\r\n  };\r\n  useEffect(reflow, [textarea]);\r\n  useImperativeHandle(ref, () => ({ reflow }), [ref]);\r\n  const renderTooltipContent = useCallback(() => help, [help]);\r\n  const textareaValue = value ? value.toString().length : 0;\r\n  const counterValue = length - textareaValue;\r\n  const counterHelp = isFunction(help) ? (\r\n    help()\r\n  ) : (\r\n    <Tooltip pos={'right bottom'} trigger={'click'} render={renderTooltipContent} onCloseClick={onCloseHelp}>\r\n      <HelpDotIcon onMouseDown={handleHelpMouseDown} color={theme.textareaCounterHelpIconColor} />\r\n    </Tooltip>\r\n  );\r\n\r\n  return (\r\n    <div className={jsStyles.counterContainer(theme)} style={{ width, height }}>\r\n      <span\r\n        className={cn(jsStyles.counter(theme), {\r\n          [jsStyles.counterError(theme)]: counterValue < 0,\r\n        })}\r\n      >\r\n        {counterValue}\r\n        {help && <span className={jsStyles.counterHelp()}>{counterHelp}</span>}\r\n      </span>\r\n    </div>\r\n  );\r\n});\r\n"]}
+{"version":3,"sources":["TextareaCounter.tsx"],"names":["React","useContext","useCallback","useImperativeHandle","useState","propTypes","safePropTypesInstanceOf","forwardRefAndName","HelpDotIcon","ThemeContext","isFunction","Tooltip","cx","TextareaDataTids","styles","handleHelpMouseDown","e","preventDefault","TextareaCounter","ref","length","value","help","onCloseHelp","textarea","theme","clientWidth","width","setWidth","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","counterHelp","textareaCounterHelpIconColor","counter","counterContainer","counterError","number","isRequired","oneOfType","string","node","func","HTMLElement"],"mappings":"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","sourcesContent":["import React, { SyntheticEvent, useContext, useCallback, useImperativeHandle, useState } from 'react';\nimport propTypes from 'prop-types';\n\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { HelpDotIcon } from '../../internal/icons/16px';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isFunction } from '../../lib/utils';\nimport { Tooltip } from '../Tooltip';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TextareaDataTids, TextareaProps } from './Textarea';\nimport { styles } from './Textarea.styles';\n\nexport interface TextareaCounterProps {\n  value: TextareaProps['value'];\n  length: number;\n  help: TextareaProps['counterHelp'];\n  onCloseHelp: () => void;\n  textarea: HTMLTextAreaElement;\n}\n\nexport interface TextareaCounterRef {\n  reflow: () => void;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const TextareaCounter = forwardRefAndName<TextareaCounterRef, TextareaCounterProps>(\n  'TextareaCounter',\n  ({ length, value, help, onCloseHelp, textarea }, ref) => {\n    const theme = useContext(ThemeContext);\n    const [width, setWidth] = useState(textarea.clientWidth);\n    const [height, setHeight] = useState(textarea.clientHeight);\n    const reflow = useCallback(() => {\n      const { clientWidth, clientHeight } = textarea;\n      setWidth(clientWidth);\n      setHeight(clientHeight);\n    }, [textarea]);\n    useImperativeHandle(ref, () => ({ reflow }), [reflow]);\n    const renderTooltipContent = useCallback(() => help, [help]);\n    const textareaValue = value ? value.toString().length : 0;\n    const counterValue = length - textareaValue;\n    const counterHelp = isFunction(help) ? (\n      help()\n    ) : (\n      <Tooltip pos={'right bottom'} trigger={'click'} render={renderTooltipContent} onCloseClick={onCloseHelp}>\n        <HelpDotIcon onMouseDown={handleHelpMouseDown} color={theme.textareaCounterHelpIconColor} />\n      </Tooltip>\n    );\n\n    return (\n      <div data-tid={TextareaDataTids.counter} className={styles.counterContainer(theme)} style={{ width, height }}>\n        <span\n          className={cx(styles.counter(theme), {\n            [styles.counterError(theme)]: counterValue < 0,\n          })}\n        >\n          {counterValue}\n          {help && <span className={styles.counterHelp()}>{counterHelp}</span>}\n        </span>\n      </div>\n    );\n  },\n);\n\nTextareaCounter.propTypes = {\n  length: propTypes.number.isRequired,\n  value: propTypes.oneOfType([propTypes.string, propTypes.number]),\n  help: propTypes.oneOfType([propTypes.node, propTypes.func]),\n  onCloseHelp: propTypes.func.isRequired,\n  textarea: safePropTypesInstanceOf(() => HTMLElement).isRequired,\n};\n"]}

package/components/Textarea/TextareaCounter.d.ts

@@ -1,13 +1,12 @@
-import React from 'react';
 import { TextareaProps } from './Textarea';
-export declare type TextareaCounterProps = {
+export interface TextareaCounterProps {
     value: TextareaProps['value'];
     length: number;
     help: TextareaProps['counterHelp'];
     onCloseHelp: () => void;
     textarea: HTMLTextAreaElement;
-};
+}
 export interface TextareaCounterRef {
     reflow: () => void;
 }
-export declare const TextareaCounter: React.ForwardRefExoticComponent<TextareaCounterProps & React.RefAttributes<TextareaCounterRef>>;
+export declare const TextareaCounter: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<TextareaCounterRef, TextareaCounterProps>;

package/components/Textarea/TextareaHelpers/TextareaHelpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextareaHelpers.tsx"],"names":["getTextAreaHeight","params","node","minRows","maxRows","extraRow","style","getComputedStyle","borderTop","borderTopWidth","parseInt","borderBottom","borderBottomWidth","lineHeight","paddingTop","paddingBottom","minHeight","maxHeight","extraRowHeight","expectedHeight","scrollHeight","height","Math","min","max","exceededMaxHeight"],"mappings":"AAAA,OAAO,SAASA,iBAAT,CAA2BC,MAA3B,EAA4D;AACzDC,EAAAA,IADyD,GACpBD,MADoB,CACzDC,IADyD,CACnDC,OADmD,GACpBF,MADoB,CACnDE,OADmD,CAC1CC,OAD0C,GACpBH,MADoB,CAC1CG,OAD0C,CACjCC,QADiC,GACpBJ,MADoB,CACjCI,QADiC;AAEjE,MAAMC,KAA0B,GAAGC,gBAAgB,CAACL,IAAD,CAAnD;AACA,MAAMM,SAAS,GAAGF,KAAK,CAACG,cAAN,GAAuBC,QAAQ,CAACJ,KAAK,CAACG,cAAP,EAAuB,EAAvB,CAA/B,GAA4D,CAA9E;AACA,MAAME,YAAY,GAAGL,KAAK,CAACM,iBAAN,GAA0BF,QAAQ,CAACJ,KAAK,CAACM,iBAAP,EAA0B,EAA1B,CAAlC,GAAkE,CAAvF;AACA,MAAMC,UAAU,GAAGP,KAAK,CAACO,UAAN,GAAmBH,QAAQ,CAACJ,KAAK,CAACO,UAAP,EAAmB,EAAnB,CAA3B,GAAoD,CAAvE;AACA,MAAMC,UAAU,GAAGR,KAAK,CAACQ,UAAN,GAAmBJ,QAAQ,CAACJ,KAAK,CAACQ,UAAP,EAAmB,EAAnB,CAA3B,GAAoD,CAAvE;AACA,MAAMC,aAAa,GAAGT,KAAK,CAACS,aAAN,GAAsBL,QAAQ,CAACJ,KAAK,CAACS,aAAP,EAAsB,EAAtB,CAA9B,GAA0D,CAAhF;AACA,MAAMC,SAAS,GAAGR,SAAS,GAAGG,YAAZ,GAA2BG,UAA3B,GAAwCC,aAAxC,GAAwDF,UAAU,GAAGV,OAAvF;AACA,MAAMc,SAAS,GAAGT,SAAS,GAAGG,YAAZ,GAA2BG,UAA3B,GAAwCC,aAAxC,GAAwDF,UAAU,GAAGT,OAAvF;AACA,MAAMc,cAAc,GAAGb,QAAQ,GAAGQ,UAAH,GAAgB,CAA/C;AACA,MAAMM,cAAc,GAAGjB,IAAI,CAACkB,YAAL,GAAoBZ,SAApB,GAAgCG,YAAhC,GAA+CO,cAAtE;AACA,SAAO;AACLG,IAAAA,MAAM,EAAEC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASL,cAAT,EAAyBH,SAAzB,CAAT,EAA8CC,SAA9C,CADH;AAELQ,IAAAA,iBAAiB,EAAEN,cAAc,GAAGF,SAAS,GAAGC,cAF3C,EAAP;;AAID","sourcesContent":["export function getTextAreaHeight(params: GetTextAreaHeightParams) {\r\n  const { node, minRows, maxRows, extraRow } = params;\r\n  const style: CSSStyleDeclaration = getComputedStyle(node);\r\n  const borderTop = style.borderTopWidth ? parseInt(style.borderTopWidth, 10) : 0;\r\n  const borderBottom = style.borderBottomWidth ? parseInt(style.borderBottomWidth, 10) : 0;\r\n  const lineHeight = style.lineHeight ? parseInt(style.lineHeight, 10) : 0;\r\n  const paddingTop = style.paddingTop ? parseInt(style.paddingTop, 10) : 0;\r\n  const paddingBottom = style.paddingBottom ? parseInt(style.paddingBottom, 10) : 0;\r\n  const minHeight = borderTop + borderBottom + paddingTop + paddingBottom + lineHeight * minRows;\r\n  const maxHeight = borderTop + borderBottom + paddingTop + paddingBottom + lineHeight * maxRows;\r\n  const extraRowHeight = extraRow ? lineHeight : 0;\r\n  const expectedHeight = node.scrollHeight + borderTop + borderBottom + extraRowHeight;\r\n  return {\r\n    height: Math.min(Math.max(expectedHeight, minHeight), maxHeight),\r\n    exceededMaxHeight: expectedHeight > maxHeight + extraRowHeight,\r\n  };\r\n}\r\n\r\ninterface GetTextAreaHeightParams {\r\n  node: HTMLTextAreaElement;\r\n  minRows: number;\r\n  maxRows: number;\r\n  extraRow: boolean;\r\n}\r\n"]}
+{"version":3,"sources":["TextareaHelpers.tsx"],"names":["getTextAreaHeight","params","node","minRows","maxRows","extraRow","style","getComputedStyle","borderTop","borderTopWidth","parseInt","borderBottom","borderBottomWidth","lineHeight","paddingTop","paddingBottom","minHeight","maxHeight","extraRowHeight","expectedHeight","scrollHeight","height","Math","min","max","exceededMaxHeight"],"mappings":"AAAA,OAAO,SAASA,iBAAT,CAA2BC,MAA3B,EAA4D;AACjE,MAAQC,IAAR,GAA6CD,MAA7C,CAAQC,IAAR,CAAcC,OAAd,GAA6CF,MAA7C,CAAcE,OAAd,CAAuBC,OAAvB,GAA6CH,MAA7C,CAAuBG,OAAvB,CAAgCC,QAAhC,GAA6CJ,MAA7C,CAAgCI,QAAhC;AACA,MAAMC,KAA0B,GAAGC,gBAAgB,CAACL,IAAD,CAAnD;AACA,MAAMM,SAAS,GAAGF,KAAK,CAACG,cAAN,GAAuBC,QAAQ,CAACJ,KAAK,CAACG,cAAP,EAAuB,EAAvB,CAA/B,GAA4D,CAA9E;AACA,MAAME,YAAY,GAAGL,KAAK,CAACM,iBAAN,GAA0BF,QAAQ,CAACJ,KAAK,CAACM,iBAAP,EAA0B,EAA1B,CAAlC,GAAkE,CAAvF;AACA,MAAMC,UAAU,GAAGP,KAAK,CAACO,UAAN,GAAmBH,QAAQ,CAACJ,KAAK,CAACO,UAAP,EAAmB,EAAnB,CAA3B,GAAoD,CAAvE;AACA,MAAMC,UAAU,GAAGR,KAAK,CAACQ,UAAN,GAAmBJ,QAAQ,CAACJ,KAAK,CAACQ,UAAP,EAAmB,EAAnB,CAA3B,GAAoD,CAAvE;AACA,MAAMC,aAAa,GAAGT,KAAK,CAACS,aAAN,GAAsBL,QAAQ,CAACJ,KAAK,CAACS,aAAP,EAAsB,EAAtB,CAA9B,GAA0D,CAAhF;AACA,MAAMC,SAAS,GAAGR,SAAS,GAAGG,YAAZ,GAA2BG,UAA3B,GAAwCC,aAAxC,GAAwDF,UAAU,GAAGV,OAAvF;AACA,MAAMc,SAAS,GAAGT,SAAS,GAAGG,YAAZ,GAA2BG,UAA3B,GAAwCC,aAAxC,GAAwDF,UAAU,GAAGT,OAAvF;AACA,MAAMc,cAAc,GAAGb,QAAQ,GAAGQ,UAAH,GAAgB,CAA/C;AACA,MAAMM,cAAc,GAAGjB,IAAI,CAACkB,YAAL,GAAoBZ,SAApB,GAAgCG,YAAhC,GAA+CO,cAAtE;AACA,SAAO;AACLG,IAAAA,MAAM,EAAEC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASL,cAAT,EAAyBH,SAAzB,CAAT,EAA8CC,SAA9C,CADH;AAELQ,IAAAA,iBAAiB,EAAEN,cAAc,GAAGF,SAAS,GAAGC,cAF3C,EAAP;;AAID","sourcesContent":["export function getTextAreaHeight(params: GetTextAreaHeightParams) {\n  const { node, minRows, maxRows, extraRow } = params;\n  const style: CSSStyleDeclaration = getComputedStyle(node);\n  const borderTop = style.borderTopWidth ? parseInt(style.borderTopWidth, 10) : 0;\n  const borderBottom = style.borderBottomWidth ? parseInt(style.borderBottomWidth, 10) : 0;\n  const lineHeight = style.lineHeight ? parseInt(style.lineHeight, 10) : 0;\n  const paddingTop = style.paddingTop ? parseInt(style.paddingTop, 10) : 0;\n  const paddingBottom = style.paddingBottom ? parseInt(style.paddingBottom, 10) : 0;\n  const minHeight = borderTop + borderBottom + paddingTop + paddingBottom + lineHeight * minRows;\n  const maxHeight = borderTop + borderBottom + paddingTop + paddingBottom + lineHeight * maxRows;\n  const extraRowHeight = extraRow ? lineHeight : 0;\n  const expectedHeight = node.scrollHeight + borderTop + borderBottom + extraRowHeight;\n  return {\n    height: Math.min(Math.max(expectedHeight, minHeight), maxHeight),\n    exceededMaxHeight: expectedHeight > maxHeight + extraRowHeight,\n  };\n}\n\ninterface GetTextAreaHeightParams {\n  node: HTMLTextAreaElement;\n  minRows: number;\n  maxRows: number;\n  extraRow: boolean;\n}\n"]}

package/components/Textarea/index/index.js.map

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

package/components/Toast/Toast/Toast.js

@@ -1,24 +1,34 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { RenderContainer } from "../../../internal/RenderContainer";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { isTestEnv } from "../../../lib/currentEnvironment";
-import { jsStyles } from "../Toast.styles";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../Toast.styles";
 import { ToastView } from "../ToastView";
 import { ToastStatic } from "../ToastStatic";
-/**
- * Показывает уведомления.
- *
- * Доступен статический метод: `Toast.push(notification, action?)`.
- * Однако, при его использовании не работает кастомизация и могут быть проблемы
- * с перекрытием уведомления другими элементами страницы.
- *
- * Рекомендуется использовать Toast через `ref` (см. примеры).
+export var ToastDataTids = {
+  toastStatic: 'StaticToast',
+  toastView: 'ToastView__root',
+  action: 'ToastView__action',
+  close: 'ToastView__close'
+};
+/**
+ * Показывает уведомления.
+ *
+ * Доступен статический метод: `Toast.push(notification, action?)`.
+ * Однако, при его использовании не работает кастомизация и могут быть проблемы
+ * с перекрытием уведомления другими элементами страницы.
+ *
+ * Рекомендуется использовать Toast через `ref` (см. примеры).
  */
 
-export var Toast = /*#__PURE__*/function (_React$Component) {
+export var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Toast, _React$Component);
 
   Toast.push = function push(notification, action) {
@@ -33,8 +43,8 @@ export var Toast = /*#__PURE__*/function (_React$Component) {
     var _this;
 
     _this = _React$Component.call(this, props) || this;
-    _this._toast = void 0;
     _this._timeout = null;
+    _this.rootRef = /*#__PURE__*/React.createRef();
 
     _this.close = function () {
       safelyCall(_this.props.onClose, _this.state.notification, _this.state.action);
@@ -45,6 +55,13 @@ export var Toast = /*#__PURE__*/function (_React$Component) {
       });
     };
 
+    _this.setRootRef = function (element) {
+      _this.setRootNode(element); // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.
+
+
+      _this.rootRef.current = element;
+    };
+
     _this._clearTimer = function () {
       if (_this._timeout) {
         clearTimeout(_this._timeout);
@@ -80,15 +97,15 @@ export var Toast = /*#__PURE__*/function (_React$Component) {
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement(RenderContainer, null, /*#__PURE__*/React.createElement(TransitionGroup, null, this._renderToast()));
   }
-  /**
-  * Показывает тост с `notification` в качестве сообщения.
-  * Тост автоматически скрывается через 3 или 7 секунд,
-  * в зависимости от наличия у него кнопки `action`.
-  *
-  * @public
-  * @param {string} notification
-  * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
-  * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
+  /**
+  * Показывает тост с `notification` в качестве сообщения.
+  * Тост автоматически скрывается через 3 или 7 секунд,
+  * в зависимости от наличия у него кнопки `action`.
+  *
+  * @public
+  * @param {string} notification
+  * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
+  * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
   */
   ;
 
@@ -107,8 +124,8 @@ export var Toast = /*#__PURE__*/function (_React$Component) {
       };
     }, this._setTimer);
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -132,25 +149,27 @@ export var Toast = /*#__PURE__*/function (_React$Component) {
     return /*#__PURE__*/React.createElement(CSSTransition, {
       key: id,
       classNames: {
-        enter: jsStyles.enter(),
-        enterActive: jsStyles.enterActive(),
-        exit: jsStyles.exit(),
-        exitActive: jsStyles.exitActive()
+        enter: styles.enter(),
+        enterActive: styles.enterActive(),
+        exit: styles.exit(),
+        exitActive: styles.exitActive()
       },
       timeout: {
         enter: 200,
         exit: 150
       },
       enter: !isTestEnv,
-      exit: !isTestEnv
-    }, /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(ToastView, _extends({
+      exit: !isTestEnv,
+      nodeRef: this.rootRef
+    }, /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootRef
+    }, this.props), /*#__PURE__*/React.createElement(ToastView, _extends({
       ref: this._refToast
     }, toastProps))));
   };
 
   return Toast;
-}(React.Component);
-Toast.__KONTUR_REACT_UI__ = 'Toast';
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Toast', _temp)) || _class;
 
 function safelyCall(fn) {
   if (fn) {