@skbkontur/react-ui 0.0.0-bb4cbfe9c6 → 0.0.0-bc0c053ae7

package/components/Tabs/Tabs/Tabs.js

@@ -5,21 +5,23 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode } from "../../../lib/rootNode/getRootNode";
 import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { Indicator } from "../Indicator";
 import { styles } from "../Tabs.styles";
 import { TabsContext } from "../TabsContext";
 import { Tab } from "../Tab";
+export var TabsDataTids = {
+  root: 'Tabs__root',
+  indicatorRoot: 'Indicator__root'
+};
 export
 /**
-* Tabs wrapper
-*
-* contains static property `Tab`
+* Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
 */
 var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Tabs, _React$Component);
@@ -32,6 +34,7 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Tabs.defaultProps);
     _this.tabs = [];
     _this.tabUpdates = {
       on: function on(cb) {
@@ -109,24 +112,34 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
     var _this2 = this;
 
     var _this$props2 = this.props,
-        vertical = _this$props2.vertical,
         value = _this$props2.value,
         width = _this$props2.width,
         children = _this$props2.children,
-        indicatorClassName = _this$props2.indicatorClassName;
+        indicatorClassName = _this$props2.indicatorClassName,
+        ariaDescribedby = _this$props2['aria-describedby'];
+
+    var _this$getProps = this.getProps(),
+        vertical = _this$getProps.vertical,
+        size = _this$getProps.size;
+
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      var _cx;
+
       _this2.theme = theme;
       return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
         rootNodeRef: _this2.setRootNode
       }, _this2.props), /*#__PURE__*/React.createElement("div", {
-        className: cx(styles.root(_this2.theme), vertical && styles.vertical()),
+        "data-tid": TabsDataTids.root,
+        className: cx((_cx = {}, _cx[styles.rootSmall(_this2.theme)] = size === 'small', _cx[styles.rootMedium(_this2.theme)] = size === 'medium', _cx[styles.rootLarge(_this2.theme)] = size === 'large', _cx[styles.vertical()] = vertical, _cx)),
         style: {
           width: width
-        }
+        },
+        "aria-describedby": ariaDescribedby
       }, /*#__PURE__*/React.createElement(TabsContext.Provider, {
         value: {
           vertical: vertical,
           activeTab: value,
+          size: size,
           getTab: _this2.getTab,
           addTab: _this2.addTab,
           removeTab: _this2.removeTab,
@@ -137,18 +150,13 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
       }, children, /*#__PURE__*/React.createElement(Indicator, {
         className: indicatorClassName,
         tabUpdates: _this2.tabUpdates,
-        vertical: vertical
+        vertical: _this2.getProps().vertical
       }))));
     });
   };
 
   return Tabs;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.propTypes = {
-  children: PropTypes.node,
-  indicatorClassName: PropTypes.string,
-  value: PropTypes.string.isRequired,
-  vertical: PropTypes.bool,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-}, _class2.defaultProps = {
-  vertical: false
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.defaultProps = {
+  vertical: false,
+  size: 'large'
 }, _class2.Tab = Tab, _temp)) || _class;

package/components/Tabs/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.tsx"],"names":["React","PropTypes","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","Indicator","styles","TabsContext","Tab","Tabs","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","vertical","width","children","indicatorClassName","theme","setRootNode","root","activeTab","Component","__KONTUR_REACT_UI__","propTypes","node","string","isRequired","bool","oneOfType","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\nexport interface TabsProps<T extends string = string> extends CommonProps {\n  /**\n   * Tab component should be child of Tabs component\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Classname of indicator\n   */\n  indicatorClassName?: string;\n\n  /**\n   * Tabs change event\n   */\n  onValueChange?: (value: T) => void;\n\n  /**\n   * Active tab identifier\n   */\n  value: T;\n\n  /**\n   * Vertical indicator\n   * @default false\n   */\n  vertical: boolean;\n\n  /**\n   * Width of tabs container\n   */\n  width?: number | string;\n}\n\n/**\n * Tabs wrapper\n *\n * contains static property `Tab`\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'Tabs';\n\n  public static propTypes = {\n    children: PropTypes.node,\n    indicatorClassName: PropTypes.string,\n    value: PropTypes.string.isRequired,\n    vertical: PropTypes.bool,\n    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  };\n  public static defaultProps = {\n    vertical: false,\n  };\n\n  public static Tab = Tab;\n\n  private theme!: Theme;\n\n  private tabs: Array<{\n    getNode: () => Tab<T> | null;\n    id: T;\n  }> = [];\n\n  private tabUpdates = {\n    on: (cb: () => void) => {\n      const index = this.listeners.push(cb);\n      return () => {\n        this.listeners.splice(index, 1);\n      };\n    },\n  };\n\n  private listeners: Array<() => void> = [];\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    const { vertical, value, width, children, indicatorClassName } = this.props;\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <div className={cx(styles.root(this.theme), vertical && styles.vertical())} style={{ width }}>\n                <TabsContext.Provider\n                  value={{\n                    vertical,\n                    activeTab: value,\n                    getTab: this.getTab,\n                    addTab: this.addTab,\n                    removeTab: this.removeTab,\n                    notifyUpdate: this.notifyUpdate,\n                    shiftFocus: this.shiftFocus,\n                    switchTab: this.switchTab,\n                  }}\n                >\n                  {children}\n                  <Indicator className={indicatorClassName} tabUpdates={this.tabUpdates} vertical={vertical} />\n                </TabsContext.Provider>\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n    const { tabs } = this;\n    const index = tabs.findIndex((x) => x.id === fromTab);\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n    const tab = tabs[newIndex];\n\n    const tabNode = tab.getNode();\n    const htmlNode = getRootNode(tabNode);\n\n    if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {\n      htmlNode.focus();\n    }\n  };\n\n  private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n    this.listeners.forEach((cb) => cb());\n  };\n\n  private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n    const { onValueChange, value } = this.props;\n    if (id !== value && onValueChange) {\n      onValueChange(id);\n    }\n  };\n\n  private getTab: TabsContextType<T>['getTab'] = (id) => {\n    const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n    return getNode && getNode();\n  };\n\n  private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n    this.tabs = this.tabs.concat({ id, getNode });\n  };\n\n  private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n    this.tabs = this.tabs.filter((tab) => tab.id !== id);\n  };\n}\n"]}
+{"version":3,"sources":["Tabs.tsx"],"names":["React","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","createPropsGetter","Indicator","styles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","width","children","indicatorClassName","ariaDescribedby","vertical","size","theme","setRootNode","rootSmall","rootMedium","rootLarge","activeTab","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\ntype ValueBaseType = string;\ninterface TabType<T extends ValueBaseType> {\n  getNode: () => Tab<T> | null;\n  id: T;\n}\n\nexport interface TabsProps<T extends ValueBaseType = string> extends CommonProps {\n  /**\n   * Позволяет задать кастомный класс подчёркиванию таба.\n   */\n  indicatorClassName?: string;\n\n  /**\n   * Задаёт размер контрола.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: SizeProp;\n\n  /**\n   * Задаёт текущий активный `<Tab />`. Принимает `id` таба.\n   */\n  value: T;\n\n  /**\n   * Функция, позволяющая изменить текущий активный `<Tab />`.\n   */\n  onValueChange?: (value: T) => void;\n\n  /**\n   * Переводит компонент в режим вертикального отображения.\n   * @default false\n   */\n  vertical?: boolean;\n\n  /**\n   * `CSS`-свойство `width`.\n   */\n  width?: number | string;\n\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его.\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const TabsDataTids = {\n  root: 'Tabs__root',\n  indicatorRoot: 'Indicator__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;\n\n/**\n * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'Tabs';\n\n  public static defaultProps: DefaultProps = {\n    vertical: false,\n    size: 'large',\n  };\n\n  private getProps = createPropsGetter(Tabs.defaultProps);\n\n  public static Tab = Tab;\n\n  private theme!: Theme;\n\n  private tabs: Array<TabType<T>> = [];\n\n  private tabUpdates = {\n    on: (cb: () => void) => {\n      const index = this.listeners.push(cb);\n      return () => {\n        this.listeners.splice(index, 1);\n      };\n    },\n  };\n\n  private listeners: Array<typeof emptyHandler> = [];\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    const { value, width, children, indicatorClassName, 'aria-describedby': ariaDescribedby } = this.props;\n    const { vertical, size } = this.getProps();\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <div\n                data-tid={TabsDataTids.root}\n                className={cx({\n                  [styles.rootSmall(this.theme)]: size === 'small',\n                  [styles.rootMedium(this.theme)]: size === 'medium',\n                  [styles.rootLarge(this.theme)]: size === 'large',\n                  [styles.vertical()]: vertical,\n                })}\n                style={{ width }}\n                aria-describedby={ariaDescribedby}\n              >\n                <TabsContext.Provider\n                  value={{\n                    vertical,\n                    activeTab: value,\n                    size,\n                    getTab: this.getTab,\n                    addTab: this.addTab,\n                    removeTab: this.removeTab,\n                    notifyUpdate: this.notifyUpdate,\n                    shiftFocus: this.shiftFocus,\n                    switchTab: this.switchTab,\n                  }}\n                >\n                  {children}\n                  <Indicator\n                    className={indicatorClassName}\n                    tabUpdates={this.tabUpdates}\n                    vertical={this.getProps().vertical}\n                  />\n                </TabsContext.Provider>\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n    const { tabs } = this;\n    const index = tabs.findIndex((x) => x.id === fromTab);\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n    const tab = tabs[newIndex];\n\n    const tabNode = tab.getNode();\n    const htmlNode = getRootNode(tabNode);\n\n    if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {\n      htmlNode.focus();\n    }\n  };\n\n  private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n    this.listeners.forEach((cb) => cb());\n  };\n\n  private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n    const { onValueChange, value } = this.props;\n    if (id !== value && onValueChange) {\n      onValueChange(id);\n    }\n  };\n\n  private getTab: TabsContextType<T>['getTab'] = (id) => {\n    const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n    return getNode && getNode();\n  };\n\n  private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n    this.tabs = this.tabs.concat({ id, getNode });\n  };\n\n  private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n    this.tabs = this.tabs.filter((tab) => tab.id !== id);\n  };\n}\n"]}

package/components/Tabs/Tabs.d.ts

@@ -1,51 +1,53 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { AriaAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
 import { Tab } from './Tab';
-export interface TabsProps<T extends string = string> extends CommonProps {
+declare type ValueBaseType = string;
+export interface TabsProps<T extends ValueBaseType = string> extends CommonProps {
     /**
-     * Tab component should be child of Tabs component
-     */
-    children?: React.ReactNode;
-    /**
-     * Classname of indicator
+     * Позволяет задать кастомный класс подчёркиванию таба.
      */
     indicatorClassName?: string;
     /**
-     * Tabs change event
+     * Задаёт размер контрола.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
      */
-    onValueChange?: (value: T) => void;
+    size?: SizeProp;
     /**
-     * Active tab identifier
+     * Задаёт текущий активный `<Tab />`. Принимает `id` таба.
      */
     value: T;
     /**
-     * Vertical indicator
+     * Функция, позволяющая изменить текущий активный `<Tab />`.
+     */
+    onValueChange?: (value: T) => void;
+    /**
+     * Переводит компонент в режим вертикального отображения.
      * @default false
      */
-    vertical: boolean;
+    vertical?: boolean;
     /**
-     * Width of tabs container
+     * `CSS`-свойство `width`.
      */
     width?: number | string;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его.
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
+export declare const TabsDataTids: {
+    readonly root: "Tabs__root";
+    readonly indicatorRoot: "Indicator__root";
+};
+declare type DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;
 /**
- * Tabs wrapper
- *
- * contains static property `Tab`
+ * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
  */
 export declare class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {
     static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        indicatorClassName: PropTypes.Requireable<string>;
-        value: PropTypes.Validator<string>;
-        vertical: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<string | number>;
-    };
-    static defaultProps: {
-        vertical: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     static Tab: typeof Tab;
     private theme;
     private tabs;
@@ -60,3 +62,4 @@ export declare class Tabs<T extends string = string> extends React.Component<Tab
     private addTab;
     private removeTab;
 }
+export {};

package/components/Tabs/Tabs.md

@@ -1,3 +1,4 @@
+Базовый пример использования компонента.
 ```jsx harmony
 const [active, setActive] = React.useState('fuji');
 
@@ -8,29 +9,45 @@ const [active, setActive] = React.useState('fuji');
 </Tabs>;
 ```
 
-Можно передавать свои компоненты в качестве табов, например `NavLink` из `react-router`
-
+Компонент может отображать табы двумя способами: горизонтально (по умолчанию) и вертикально.
 ```jsx harmony
-const [active, setActive] = React.useState('/fuji');
-
-const NavLink = props => (
-  <a
-    {...props}
-    onClick={e => {
-      e.preventDefault();
-      props.onClick(e);
-    }}
-  />
-);
-const TabLink = ({ id, children }) => (
-  <Tabs.Tab id={id} component={props => <NavLink {...props} to={props.id} />}>
-    {children}
-  </Tabs.Tab>
-);
+const [active, setActive] = React.useState('fuji');
 
-<Tabs value={active} onValueChange={setActive}>
-  <TabLink id="/fuji">🌋 Fuji</TabLink>
-  <TabLink id="/tahat">⛰ Tahat</TabLink>
-  <TabLink id="/alps">🗻 Alps</TabLink>
+<Tabs vertical value={active} onValueChange={setActive}>
+  <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
+  <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
+  <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
 </Tabs>;
 ```
+
+У табов есть 3 стандартных размера
+```jsx harmony
+const [active, setActive] = React.useState('fuji');
+const renderCaption = (caption) => <span style={{display: "inline-block", width: 60}}>{caption}</span>;
+<div>
+  <div>
+    {renderCaption("small")}
+    <Tabs value={active} onValueChange={setActive} size="small">
+      <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
+      <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
+      <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
+    </Tabs>
+  </div>
+  <div>
+    {renderCaption("medium")}
+    <Tabs value={active} onValueChange={setActive} size="medium">
+      <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
+      <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
+      <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
+    </Tabs>
+  </div>
+  <div>
+    {renderCaption("large")}
+    <Tabs value={active} onValueChange={setActive} size="large">
+      <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
+      <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
+      <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
+    </Tabs>
+  </div>
+</div>;
+```

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

@@ -3,11 +3,22 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject, _templateObject2;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { paddingX } from "../helpers";
 export var styles = memoizeStyle({
-  root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin: 0 -", ";\n      padding: 0;\n      position: relative;\n    "])), t.tabsMarginX);
+  rootSmall: function rootSmall(t) {
+    return tabsRoot(t, 'small');
+  },
+  rootMedium: function rootMedium(t) {
+    return tabsRoot(t, 'medium');
+  },
+  rootLarge: function rootLarge(t) {
+    return tabsRoot(t, 'large');
   },
   vertical: function vertical() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin: 0;\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      margin: 0;\n    "])));
   }
-});
+});
+
+function tabsRoot(t, size) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n    margin: 0 -", ";\n    padding: 0;\n    position: relative;\n  "])), paddingX(t, size));
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.styles.ts"],"names":["css","memoizeStyle","styles","root","t","tabsMarginX","vertical"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;;AAEeI,IAAAA,CAAC,CAACC,WAFjB;;;;AAMD,GARgC;;AAUjCC,EAAAA,QAViC,sBAUtB;AACT,WAAON,GAAP;;;AAGD,GAdgC,EAAD,CAA3B","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"]}
+{"version":3,"sources":["Tabs.styles.ts"],"names":["css","memoizeStyle","paddingX","styles","rootSmall","t","tabsRoot","rootMedium","rootLarge","vertical","size"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;;AAIA,SAASC,QAAT,QAAyB,WAAzB;;AAEA,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;AACjCG,EAAAA,SADiC,qBACvBC,CADuB,EACb;AAClB,WAAOC,QAAQ,CAACD,CAAD,EAAI,OAAJ,CAAf;AACD,GAHgC;;AAKjCE,EAAAA,UALiC,sBAKtBF,CALsB,EAKZ;AACnB,WAAOC,QAAQ,CAACD,CAAD,EAAI,QAAJ,CAAf;AACD,GAPgC;;AASjCG,EAAAA,SATiC,qBASvBH,CATuB,EASb;AAClB,WAAOC,QAAQ,CAACD,CAAD,EAAI,OAAJ,CAAf;AACD,GAXgC;;AAajCI,EAAAA,QAbiC,sBAatB;AACT,WAAOT,GAAP;;;AAGD,GAjBgC,EAAD,CAA3B;;;AAoBP,SAASM,QAAT,CAAkBD,CAAlB,EAA4BK,IAA5B,EAA4C;AAC1C,SAAOV,GAAP;;AAEeE,EAAAA,QAAQ,CAACG,CAAD,EAAIK,IAAJ,CAFvB;;;;AAMD","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { paddingX } from './helpers';\n\nexport const styles = memoizeStyle({\n  rootSmall(t: Theme) {\n    return tabsRoot(t, 'small');\n  },\n\n  rootMedium(t: Theme) {\n    return tabsRoot(t, 'medium');\n  },\n\n  rootLarge(t: Theme) {\n    return tabsRoot(t, 'large');\n  },\n\n  vertical() {\n    return css`\n      margin: 0;\n    `;\n  },\n});\n\nfunction tabsRoot(t: Theme, size: SizeProp) {\n  return css`\n    display: inline-block;\n    margin: 0 -${paddingX(t, size)};\n    padding: 0;\n    position: relative;\n  `;\n}\n"]}

package/components/Tabs/Tabs.styles.d.ts

@@ -1,5 +1,7 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
-    root(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
     vertical(): string;
 };

package/components/Tabs/TabsContext/TabsContext.js

@@ -3,6 +3,7 @@ import { emptyHandler } from "../../../lib/utils";
 export var TabsContextDefaultValue = {
   vertical: false,
   activeTab: '',
+  size: 'large',
   getTab: emptyHandler,
   addTab: emptyHandler,
   notifyUpdate: emptyHandler,

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

@@ -1 +1 @@
-{"version":3,"sources":["TabsContext.ts"],"names":["React","emptyHandler","TabsContextDefaultValue","vertical","activeTab","getTab","addTab","notifyUpdate","removeTab","shiftFocus","switchTab","TabsContext","createContext","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,iBAA7B;;;;;;;;;;;;;;;AAeA,OAAO,IAAMC,uBAAwC,GAAG;AACtDC,EAAAA,QAAQ,EAAE,KAD4C;AAEtDC,EAAAA,SAAS,EAAE,EAF2C;AAGtDC,EAAAA,MAAM,EAAEJ,YAH8C;AAItDK,EAAAA,MAAM,EAAEL,YAJ8C;AAKtDM,EAAAA,YAAY,EAAEN,YALwC;AAMtDO,EAAAA,SAAS,EAAEP,YAN2C;AAOtDQ,EAAAA,UAAU,EAAER,YAP0C;AAQtDS,EAAAA,SAAS,EAAET,YAR2C,EAAjD;;AAUP,OAAO,IAAMU,WAAW,gBAAGX,KAAK,CAACY,aAAN,CAAqCV,uBAArC,CAApB;;AAEPS,WAAW,CAACE,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"]}
+{"version":3,"sources":["TabsContext.ts"],"names":["React","emptyHandler","TabsContextDefaultValue","vertical","activeTab","size","getTab","addTab","notifyUpdate","removeTab","shiftFocus","switchTab","TabsContext","createContext","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,iBAA7B;;;;;;;;;;;;;;;;;AAiBA,OAAO,IAAMC,uBAAwC,GAAG;AACtDC,EAAAA,QAAQ,EAAE,KAD4C;AAEtDC,EAAAA,SAAS,EAAE,EAF2C;AAGtDC,EAAAA,IAAI,EAAE,OAHgD;AAItDC,EAAAA,MAAM,EAAEL,YAJ8C;AAKtDM,EAAAA,MAAM,EAAEN,YAL8C;AAMtDO,EAAAA,YAAY,EAAEP,YANwC;AAOtDQ,EAAAA,SAAS,EAAER,YAP2C;AAQtDS,EAAAA,UAAU,EAAET,YAR0C;AAStDU,EAAAA,SAAS,EAAEV,YAT2C,EAAjD;;AAWP,OAAO,IAAMW,WAAW,gBAAGZ,KAAK,CAACa,aAAN,CAAqCX,uBAArC,CAApB;;AAEPU,WAAW,CAACE,WAAZ,GAA0B,aAA1B","sourcesContent":["import React from 'react';\n\nimport { emptyHandler } from '../../lib/utils';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { Tab } from './Tab';\n\nexport interface TabsContextType<T extends string = any> {\n  vertical: boolean;\n  activeTab: T;\n  size: SizeProp;\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  size: 'large',\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/components/Tabs/TabsContext.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import { SizeProp } from '../../lib/types/props';
 import { Tab } from './Tab';
 export interface TabsContextType<T extends string = any> {
     vertical: boolean;
     activeTab: T;
+    size: SizeProp;
     getTab: (id: T) => Tab<T> | null | void;
     addTab: (id: T, getNode: () => Tab<T>) => void;
     notifyUpdate: () => void;

package/components/Tabs/helpers/helpers.js

@@ -0,0 +1,28 @@
+export function fontSize(t, size) {
+  return mapSize(size, t.tabFontSizeSmall, t.tabFontSizeMedium, t.tabFontSizeLarge);
+}
+export function lineHeight(t, size) {
+  return mapSize(size, t.tabLineHeightSmall, t.tabLineHeightMedium, t.tabLineHeightLarge);
+}
+export function paddingX(t, size) {
+  return mapSize(size, t.tabPaddingXSmall, t.tabPaddingXMedium, t.tabPaddingXLarge);
+}
+export function paddingY(t, size) {
+  return mapSize(size, t.tabPaddingYSmall, t.tabPaddingYMedium, t.tabPaddingYLarge);
+}
+
+function mapSize(size, small, medium, large) {
+  switch (size) {
+    case 'small':
+      return small;
+
+    case 'medium':
+      return medium;
+
+    case 'large':
+      return large;
+
+    default:
+      return small;
+  }
+}

package/components/Tabs/helpers/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["helpers.ts"],"names":["fontSize","t","size","mapSize","tabFontSizeSmall","tabFontSizeMedium","tabFontSizeLarge","lineHeight","tabLineHeightSmall","tabLineHeightMedium","tabLineHeightLarge","paddingX","tabPaddingXSmall","tabPaddingXMedium","tabPaddingXLarge","paddingY","tabPaddingYSmall","tabPaddingYMedium","tabPaddingYLarge","small","medium","large"],"mappings":";;;AAGA,OAAO,SAASA,QAAT,CAAkBC,CAAlB,EAA4BC,IAA5B,EAA4C;AACjD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACG,gBAAT,EAA2BH,CAAC,CAACI,iBAA7B,EAAgDJ,CAAC,CAACK,gBAAlD,CAAd;AACD;;AAED,OAAO,SAASC,UAAT,CAAoBN,CAApB,EAA8BC,IAA9B,EAA8C;AACnD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACO,kBAAT,EAA6BP,CAAC,CAACQ,mBAA/B,EAAoDR,CAAC,CAACS,kBAAtD,CAAd;AACD;;AAED,OAAO,SAASC,QAAT,CAAkBV,CAAlB,EAA4BC,IAA5B,EAA4C;AACjD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACW,gBAAT,EAA2BX,CAAC,CAACY,iBAA7B,EAAgDZ,CAAC,CAACa,gBAAlD,CAAd;AACD;;AAED,OAAO,SAASC,QAAT,CAAkBd,CAAlB,EAA4BC,IAA5B,EAA4C;AACjD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACe,gBAAT,EAA2Bf,CAAC,CAACgB,iBAA7B,EAAgDhB,CAAC,CAACiB,gBAAlD,CAAd;AACD;;AAED,SAASf,OAAT,CAAoBD,IAApB,EAAoCiB,KAApC,EAA8CC,MAA9C,EAAyDC,KAAzD,EAAmE;AACjE,UAAQnB,IAAR;AACE,SAAK,OAAL;AACE,aAAOiB,KAAP;AACF,SAAK,QAAL;AACE,aAAOC,MAAP;AACF,SAAK,OAAL;AACE,aAAOC,KAAP;AACF;AACE,aAAOF,KAAP,CARJ;;AAUD","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nexport function fontSize(t: Theme, size: SizeProp) {\n  return mapSize(size, t.tabFontSizeSmall, t.tabFontSizeMedium, t.tabFontSizeLarge);\n}\n\nexport function lineHeight(t: Theme, size: SizeProp) {\n  return mapSize(size, t.tabLineHeightSmall, t.tabLineHeightMedium, t.tabLineHeightLarge);\n}\n\nexport function paddingX(t: Theme, size: SizeProp) {\n  return mapSize(size, t.tabPaddingXSmall, t.tabPaddingXMedium, t.tabPaddingXLarge);\n}\n\nexport function paddingY(t: Theme, size: SizeProp) {\n  return mapSize(size, t.tabPaddingYSmall, t.tabPaddingYMedium, t.tabPaddingYLarge);\n}\n\nfunction mapSize<T>(size: SizeProp, small: T, medium: T, large: T) {\n  switch (size) {\n    case 'small':\n      return small;\n    case 'medium':\n      return medium;\n    case 'large':\n      return large;\n    default:\n      return small;\n  }\n}\n"]}

package/components/Tabs/helpers/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Tabs/helpers.js",
+  "module": "helpers",
+  "types": "../helpers.d.ts",
+  "sideEffects": false
+}

package/components/Tabs/helpers.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from '../../lib/theming/Theme';
+import { SizeProp } from '../../lib/types/props';
+export declare function fontSize(t: Theme, size: SizeProp): string;
+export declare function lineHeight(t: Theme, size: SizeProp): string;
+export declare function paddingX(t: Theme, size: SizeProp): string;
+export declare function paddingY(t: Theme, size: SizeProp): string;

package/components/Textarea/Textarea/Textarea.js

@@ -1,16 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-var _excluded = ["width", "error", "warning", "autoResize", "resize", "onCut", "onPaste", "maxRows", "onFocus", "selectAllOnFocus", "placeholder", "onValueChange", "showLengthCounter", "lengthCounter", "counterHelp", "extraRow", "disableAnimations", "disabled"];
+var _excluded = ["width", "error", "warning", "size", "autoResize", "resize", "onCut", "onPaste", "maxRows", "onFocus", "selectAllOnFocus", "placeholder", "onValueChange", "showLengthCounter", "lengthCounter", "counterHelp", "extraRow", "disableAnimations", "disabled"];
+
+var _class, _class2, _temp; // TODO: Enable this rule in functional components.
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
 
-var _class, _class2, _temp;
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash.throttle';
 import raf from 'raf';
 import { isKeyEnter } from "../../../lib/events/keyboard/identifiers";
-import { polyfillPlaceholder } from "../../../lib/polyfillPlaceholder";
+import { needsPolyfillPlaceholder } from "../../../lib/needsPolyfillPlaceholder";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { RenderLayer } from "../../../internal/RenderLayer";
@@ -20,11 +23,21 @@ import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { getTextAreaHeight } from "../TextareaHelpers";
 import { styles } from "../Textarea.styles";
 import { TextareaCounter } from "../TextareaCounter";
+/**
+ * @deprecated use SizeProp
+ */
+
 var DEFAULT_WIDTH = 250;
 var AUTORESIZE_THROTTLE_DEFAULT_WAIT = 100;
+export var TextareaDataTids = {
+  root: 'Textarea__root',
+  counter: 'TextareaCounter__root',
+  helpIcon: 'TextareaCounter__helpIcon'
+};
 export
 /**
 * Компонент для ввода многострочного текста.
@@ -44,8 +57,9 @@ var Textarea = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_Reac
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Textarea.defaultProps);
     _this.state = {
-      polyfillPlaceholder: polyfillPlaceholder,
+      needsPolyfillPlaceholder: needsPolyfillPlaceholder,
       isCounterVisible: false
     };
 
@@ -88,12 +102,13 @@ var Textarea = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_Reac
     };
 
     _this.renderMain = function (props) {
-      var _cx, _ref, _textareaProps$maxLen;
+      var _cx, _ref, _textareaProps$maxLen, _cx2;
 
       var _props$width = props.width,
           width = _props$width === void 0 ? DEFAULT_WIDTH : _props$width,
           error = props.error,
           warning = props.warning,
+          size = props.size,
           autoResize = props.autoResize,
           resize = props.resize,
           onCut = props.onCut,
@@ -117,13 +132,13 @@ var Textarea = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_Reac
           width: width
         }
       };
-      var textareaClassNames = cx((_cx = {}, _cx[styles.textarea(_this.theme)] = true, _cx[styles.disabled(_this.theme)] = disabled, _cx[styles.error(_this.theme)] = !!error, _cx[styles.warning(_this.theme)] = !!warning, _cx[styles.disableAnimations()] = _this.isAnimationsDisabled(), _cx));
+      var textareaClassNames = cx(_this.getTextareaSizeClassName(), (_cx = {}, _cx[styles.textarea(_this.theme)] = true, _cx[styles.hovering(_this.theme)] = !error && !warning, _cx[styles.disabled(_this.theme)] = disabled, _cx[styles.error(_this.theme)] = !!error, _cx[styles.warning(_this.theme)] = !!warning, _cx[styles.disableAnimations()] = _this.isAnimationsDisabled(), _cx));
       var textareaStyle = {
         resize: autoResize ? 'none' : resize
       };
       var placeholderPolyfill = null;
 
-      if (_this.state.polyfillPlaceholder && !textareaProps.value) {
+      if (_this.state.needsPolyfillPlaceholder && !textareaProps.value && !textareaProps.defaultValue) {
         placeholderPolyfill = /*#__PURE__*/React.createElement("span", {
           className: styles.placeholder()
         }, placeholder);
@@ -145,6 +160,7 @@ var Textarea = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_Reac
 
       var counter = showLengthCounter && isCounterVisible && _this.node && /*#__PURE__*/React.createElement(TextareaCounter, {
         textarea: _this.node,
+        size: _this.getProps().size,
         help: counterHelp,
         value: textareaProps.value,
         length: (_ref = (_textareaProps$maxLen = textareaProps.maxLength) != null ? _textareaProps$maxLen : lengthCounter) != null ? _ref : 0,
@@ -155,8 +171,10 @@ var Textarea = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_Reac
         onFocusOutside: _this.handleCloseCounterHelp,
         onClickOutside: _this.handleCloseCounterHelp,
         active: _this.state.isCounterVisible
-      }, /*#__PURE__*/React.createElement("label", _extends({}, rootProps, {
-        className: styles.root(_this.theme)
+      }, /*#__PURE__*/React.createElement("label", _extends({
+        "data-tid": TextareaDataTids.root
+      }, rootProps, {
+        className: cx(_this.getRootSizeClassName(), (_cx2 = {}, _cx2[styles.root()] = true, _cx2))
       }), placeholderPolyfill, /*#__PURE__*/React.createElement(ResizeDetector, {
         onResize: _this.reflowCounter
       }, /*#__PURE__*/React.createElement("textarea", _extends({}, textareaProps, {
@@ -196,12 +214,12 @@ var Textarea = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_Reac
     };
 
     _this.handleChange = function (e) {
-      if (polyfillPlaceholder) {
+      if (needsPolyfillPlaceholder) {
         var fieldIsEmpty = e.target.value === '';
 
-        if (_this.state.polyfillPlaceholder !== fieldIsEmpty) {
+        if (_this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {
           _this.setState({
-            polyfillPlaceholder: fieldIsEmpty
+            needsPolyfillPlaceholder: fieldIsEmpty
           });
         }
       }
@@ -250,10 +268,9 @@ var Textarea = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_Reac
         fakeNode.value = node.value;
       }
 
-      var _this$props = _this.props,
-          rows = _this$props.rows,
-          maxRows = _this$props.maxRows,
-          extraRow = _this$props.extraRow;
+      var _this$getProps = _this.getProps(),
+          rows = _this$getProps.rows,
+          maxRows = _this$getProps.maxRows;
 
       if (rows === undefined || maxRows === undefined) {
         return;
@@ -263,7 +280,7 @@ var Textarea = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_Reac
         node: fakeNode,
         minRows: typeof rows === 'number' ? rows : parseInt(rows, 10),
         maxRows: typeof maxRows === 'number' ? maxRows : parseInt(maxRows, 10),
-        extraRow: extraRow
+        extraRow: _this.getProps().extraRow
       }),
           height = _getTextAreaHeight.height,
           exceededMaxHeight = _getTextAreaHeight.exceededMaxHeight;
@@ -319,6 +336,34 @@ var Textarea = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_Reac
 
   var _proto = Textarea.prototype;
 
+  _proto.getRootSizeClassName = function getRootSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.rootLarge(this.theme);
+
+      case 'medium':
+        return styles.rootMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.rootSmall(this.theme);
+    }
+  };
+
+  _proto.getTextareaSizeClassName = function getTextareaSizeClassName() {
+    switch (this.getProps().size) {
+      case 'large':
+        return styles.textareaLarge(this.theme);
+
+      case 'medium':
+        return styles.textareaMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.textareaSmall(this.theme);
+    }
+  };
+
   _proto.getAutoResizeThrottleWait = function getAutoResizeThrottleWait(props) {
     if (props === void 0) {
       props = this.props;
@@ -368,7 +413,11 @@ var Textarea = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_Reac
       this.autoResize = throttle(this.autoResizeHandler, this.getAutoResizeThrottleWait());
     }
 
-    if (this.props.autoResize && (this.props.rows !== prevProps.rows || this.props.maxRows !== prevProps.maxRows || this.props.value !== prevProps.value)) {
+    var _this$getProps2 = this.getProps(),
+        rows = _this$getProps2.rows,
+        maxRows = _this$getProps2.maxRows;
+
+    if (this.props.autoResize && (rows !== prevProps.rows || maxRows !== prevProps.maxRows || this.props.value !== prevProps.value)) {
       this.autoResize();
     }
   };
@@ -457,5 +506,6 @@ var Textarea = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_Reac
   rows: 3,
   maxRows: 15,
   extraRow: true,
+  size: 'small',
   disableAnimations: isTestEnv
 }, _temp)) || _class;