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

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

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.tsx"],"names":["TabsDataTids","root","indicatorRoot","Tabs","rootNode","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","styles","rootSmall","rootMedium","rootLarge","activeTab","React","Component","__KONTUR_REACT_UI__","Tab"],"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';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab, TabSize } 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   * 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   * Задаёт размер контрола.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: TabSize;\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   * Атрибут для указания 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 * 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 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"]}
+{"version":3,"sources":["Tabs.tsx"],"names":["TabsDataTids","root","indicatorRoot","Tabs","rootNode","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","globalObject","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","width","children","indicatorClassName","ariaDescribedby","vertical","size","theme","setRootNode","styles","rootSmall","rootMedium","rootLarge","activeTab","React","Component","__KONTUR_REACT_UI__","displayName","Tab"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\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';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\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  public static displayName = '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 (isInstanceOf(htmlNode, globalObject.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/cjs/components/Tabs/Tabs.md

@@ -1,3 +1,4 @@
+Базовый пример использования компонента.
 ```jsx harmony
 const [active, setActive] = React.useState('fuji');
 
@@ -8,30 +9,14 @@ 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>;
 ```
 

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

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
 
 

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

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.styles.ts"],"names":["styles","rootSmall","t","tabsRoot","rootMedium","rootLarge","vertical","css","size"],"mappings":"4QAAA;;;;AAIA,oC;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,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,eAAOC,YAAP;;;AAGD,GAjBgC,EAAb,CAAf,C;;;AAoBP,SAASJ,QAAT,CAAkBD,CAAlB,EAA4BM,IAA5B,EAA2C;AACzC,aAAOD,YAAP;;AAEe,yBAASL,CAAT,EAAYM,IAAZ,CAFf;;;;AAMD","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { TabSize } from './Tab';\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: TabSize) {\n  return css`\n    display: inline-block;\n    margin: 0 -${paddingX(t, size)};\n    padding: 0;\n    position: relative;\n  `;\n}\n"]}
+{"version":3,"sources":["Tabs.styles.ts"],"names":["styles","rootSmall","t","tabsRoot","rootMedium","rootLarge","vertical","css","size"],"mappings":"oRAAA;;;;AAIA,oC;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,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,eAAOC,YAAP;;;AAGD,GAjBgC,EAAb,CAAf,C;;;AAoBP,SAASJ,QAAT,CAAkBD,CAAlB,EAA4BM,IAA5B,EAA4C;AAC1C,aAAOD,YAAP;;AAEe,yBAASL,CAAT,EAAYM,IAAZ,CAFf;;;;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/cjs/components/Tabs/TabsContext.d.ts

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

package/cjs/components/Tabs/TabsContext.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TabsContextDefaultValue = exports.TabsContext = void 0;var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TabsContextDefaultValue = exports.TabsContext = void 0;var _react = _interopRequireDefault(require("react"));
 
 var _utils = require("../../lib/utils");
 
@@ -16,6 +16,7 @@ var _utils = require("../../lib/utils");
 
 
 
+
 var TabsContextDefaultValue = {
   vertical: false,
   activeTab: '',

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

@@ -1 +1 @@
-{"version":3,"sources":["TabsContext.ts"],"names":["TabsContextDefaultValue","vertical","activeTab","size","getTab","emptyHandler","addTab","notifyUpdate","removeTab","shiftFocus","switchTab","TabsContext","React","createContext","displayName"],"mappings":"2LAAA;;AAEA;;;;;;;;;;;;;;;;AAgBO,IAAMA,uBAAwC,GAAG;AACtDC,EAAAA,QAAQ,EAAE,KAD4C;AAEtDC,EAAAA,SAAS,EAAE,EAF2C;AAGtDC,EAAAA,IAAI,EAAE,OAHgD;AAItDC,EAAAA,MAAM,EAAEC,mBAJ8C;AAKtDC,EAAAA,MAAM,EAAED,mBAL8C;AAMtDE,EAAAA,YAAY,EAAEF,mBANwC;AAOtDG,EAAAA,SAAS,EAAEH,mBAP2C;AAQtDI,EAAAA,UAAU,EAAEJ,mBAR0C;AAStDK,EAAAA,SAAS,EAAEL,mBAT2C,EAAjD,C;;AAWA,IAAMM,WAAW,gBAAGC,eAAMC,aAAN,CAAqCb,uBAArC,CAApB,C;;AAEPW,WAAW,CAACG,WAAZ,GAA0B,aAA1B","sourcesContent":["import React from 'react';\n\nimport { emptyHandler } from '../../lib/utils';\n\nimport { Tab, TabSize } from './Tab';\n\nexport interface TabsContextType<T extends string = any> {\n  vertical: boolean;\n  activeTab: T;\n  size: TabSize;\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"]}
+{"version":3,"sources":["TabsContext.ts"],"names":["TabsContextDefaultValue","vertical","activeTab","size","getTab","emptyHandler","addTab","notifyUpdate","removeTab","shiftFocus","switchTab","TabsContext","React","createContext","displayName"],"mappings":"mMAAA;;AAEA;;;;;;;;;;;;;;;;;AAiBO,IAAMA,uBAAwC,GAAG;AACtDC,EAAAA,QAAQ,EAAE,KAD4C;AAEtDC,EAAAA,SAAS,EAAE,EAF2C;AAGtDC,EAAAA,IAAI,EAAE,OAHgD;AAItDC,EAAAA,MAAM,EAAEC,mBAJ8C;AAKtDC,EAAAA,MAAM,EAAED,mBAL8C;AAMtDE,EAAAA,YAAY,EAAEF,mBANwC;AAOtDG,EAAAA,SAAS,EAAEH,mBAP2C;AAQtDI,EAAAA,UAAU,EAAEJ,mBAR0C;AAStDK,EAAAA,SAAS,EAAEL,mBAT2C,EAAjD,C;;AAWA,IAAMM,WAAW,gBAAGC,eAAMC,aAAN,CAAqCb,uBAArC,CAApB,C;;AAEPW,WAAW,CAACG,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/cjs/components/Tabs/helpers.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from '../../lib/theming/Theme';
-import { TabSize } from './Tab';
-export declare function fontSize(t: Theme, size: TabSize): string;
-export declare function lineHeight(t: Theme, size: TabSize): string;
-export declare function paddingX(t: Theme, size: TabSize): string;
-export declare function paddingY(t: Theme, size: TabSize): string;
+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/cjs/components/Tabs/helpers.js

@@ -1,7 +1,6 @@
 "use strict";exports.__esModule = true;exports.fontSize = fontSize;exports.lineHeight = lineHeight;exports.paddingX = paddingX;exports.paddingY = paddingY;
 
 
-
 function fontSize(t, size) {
   return mapSize(size, t.tabFontSizeSmall, t.tabFontSizeMedium, t.tabFontSizeLarge);
 }
@@ -25,6 +24,8 @@ function mapSize(size, small, medium, large) {
     case 'medium':
       return medium;
     case 'large':
-      return large;}
+      return large;
+    default:
+      return small;}
 
 }

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

@@ -1 +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":";;;;AAIO,SAASA,QAAT,CAAkBC,CAAlB,EAA4BC,IAA5B,EAA2C;AAChD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACG,gBAAT,EAA2BH,CAAC,CAACI,iBAA7B,EAAgDJ,CAAC,CAACK,gBAAlD,CAAd;AACD;;AAEM,SAASC,UAAT,CAAoBN,CAApB,EAA8BC,IAA9B,EAA6C;AAClD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACO,kBAAT,EAA6BP,CAAC,CAACQ,mBAA/B,EAAoDR,CAAC,CAACS,kBAAtD,CAAd;AACD;;AAEM,SAASC,QAAT,CAAkBV,CAAlB,EAA4BC,IAA5B,EAA2C;AAChD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACW,gBAAT,EAA2BX,CAAC,CAACY,iBAA7B,EAAgDZ,CAAC,CAACa,gBAAlD,CAAd;AACD;;AAEM,SAASC,QAAT,CAAkBd,CAAlB,EAA4BC,IAA5B,EAA2C;AAChD,SAAOC,OAAO,CAACD,IAAD,EAAOD,CAAC,CAACe,gBAAT,EAA2Bf,CAAC,CAACgB,iBAA7B,EAAgDhB,CAAC,CAACiB,gBAAlD,CAAd;AACD;;AAED,SAASf,OAAT,CAAoBD,IAApB,EAAmCiB,KAAnC,EAA6CC,MAA7C,EAAwDC,KAAxD,EAAkE;AAChE,UAAQnB,IAAR;AACE,SAAK,OAAL;AACE,aAAOiB,KAAP;AACF,SAAK,QAAL;AACE,aAAOC,MAAP;AACF,SAAK,OAAL;AACE,aAAOC,KAAP,CANJ;;AAQD","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\n\nimport { TabSize } from './Tab';\n\nexport function fontSize(t: Theme, size: TabSize) {\n  return mapSize(size, t.tabFontSizeSmall, t.tabFontSizeMedium, t.tabFontSizeLarge);\n}\n\nexport function lineHeight(t: Theme, size: TabSize) {\n  return mapSize(size, t.tabLineHeightSmall, t.tabLineHeightMedium, t.tabLineHeightLarge);\n}\n\nexport function paddingX(t: Theme, size: TabSize) {\n  return mapSize(size, t.tabPaddingXSmall, t.tabPaddingXMedium, t.tabPaddingXLarge);\n}\n\nexport function paddingY(t: Theme, size: TabSize) {\n  return mapSize(size, t.tabPaddingYSmall, t.tabPaddingYMedium, t.tabPaddingYLarge);\n}\n\nfunction mapSize<T>(size: TabSize, 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  }\n}\n"]}
+{"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":";;;AAGO,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;;AAEM,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;;AAEM,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;;AAEM,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/cjs/components/Textarea/Textarea.d.ts

@@ -1,8 +1,13 @@
-import React, { ReactNode } from 'react';
+import React, { AriaAttributes, ReactNode } from 'react';
 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>, {
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type TextareaSize = SizeProp;
+export interface TextareaProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, Override<React.TextareaHTMLAttributes<HTMLTextAreaElement>, {
     /**
      * Состояние валидации при ошибке.
      */
@@ -13,6 +18,8 @@ export interface TextareaProps extends CommonProps, Override<React.TextareaHTMLA
     warning?: boolean;
     /** Не активное состояние */
     disabled?: boolean;
+    /** Размер */
+    size?: SizeProp;
     /**
      * Автоматический ресайз
      * в зависимости от содержимого
@@ -78,7 +85,7 @@ export declare const TextareaDataTids: {
     readonly counter: "TextareaCounter__root";
     readonly helpIcon: "TextareaCounter__helpIcon";
 };
-declare type DefaultProps = Required<Pick<TextareaProps, 'rows' | 'maxRows' | 'extraRow' | 'disableAnimations'>>;
+declare type DefaultProps = Required<Pick<TextareaProps, 'rows' | 'maxRows' | 'extraRow' | 'disableAnimations' | 'size'>>;
 /**
  * Компонент для ввода многострочного текста.
  *
@@ -88,6 +95,7 @@ declare type DefaultProps = Required<Pick<TextareaProps, 'rows' | 'maxRows' | 'e
  */
 export declare class Textarea extends React.Component<TextareaProps, TextareaState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
         error: PropTypes.Requireable<boolean>;
         warning: PropTypes.Requireable<boolean>;
@@ -133,6 +141,9 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
     };
     static defaultProps: DefaultProps;
     private getProps;
+    private featureFlags;
+    private getRootSizeClassName;
+    private getTextareaSizeClassName;
     state: {
         needsPolyfillPlaceholder: boolean;
         isCounterVisible: boolean;

package/cjs/components/Textarea/Textarea.js

@@ -1,9 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TextareaDataTids = exports.Textarea = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.TextareaDataTids = exports.Textarea = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
 
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
-var _raf = _interopRequireDefault(require("raf"));
+var _globalObject = require("@skbkontur/global-object");
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 var _needsPolyfillPlaceholder = require("../../lib/needsPolyfillPlaceholder");
@@ -19,11 +19,22 @@ var _currentEnvironment = require("../../lib/currentEnvironment");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
-var _SSRSafe = require("../../lib/SSRSafe");
+
+var _featureFlagsContext = require("../../lib/featureFlagsContext");
+
+
+
+
 
 var _TextareaHelpers = require("./TextareaHelpers");
 var _Textarea = require("./Textarea.styles");
-var _TextareaCounter = require("./TextareaCounter");var _excluded = ["width", "error", "warning", "autoResize", "resize", "onCut", "onPaste", "maxRows", "onFocus", "selectAllOnFocus", "placeholder", "onValueChange", "showLengthCounter", "lengthCounter", "counterHelp", "extraRow", "disableAnimations", "disabled"];var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+var _TextareaCounter = require("./TextareaCounter");
+var _TextareaWithSafari17Workaround = require("./TextareaWithSafari17Workaround");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;
+
+
+
+
+
 
 var DEFAULT_WIDTH = 250;
 var AUTORESIZE_THROTTLE_DEFAULT_WAIT = 100;
@@ -112,6 +123,8 @@ var AUTORESIZE_THROTTLE_DEFAULT_WAIT = 100;
 
 
 
+
+
 
 
 
@@ -192,11 +205,38 @@ Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
 
+
+
 
 
 
     getProps = (0, _createPropsGetter.createPropsGetter)(Textarea.defaultProps);_this.
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     state = {
       needsPolyfillPlaceholder: _needsPolyfillPlaceholder.needsPolyfillPlaceholder,
       isCounterVisible: false };_this.
@@ -213,7 +253,11 @@ Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
 
-    textareaObserver = _client.isBrowser ? new MutationObserver(_this.reflowCounter) : null;_this.
+    textareaObserver = _globalObject.globalObject.MutationObserver ?
+    new _globalObject.globalObject.MutationObserver(_this.reflowCounter) :
+    null;_this.
+
+
 
 
 
@@ -297,12 +341,17 @@ Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
 
-    setSelectionRange = function (start, end) {
+
+
+
+
+
+    setSelectionRange = function (start, end) {var _globalObject$documen;
       if (!_this.node) {
         throw new Error('Cannot call "setSelectionRange" on unmounted Input');
       }
 
-      if (_SSRSafe.renderTarget.activeElement !== _this.node) {
+      if (((_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.activeElement) !== _this.node) {
         _this.focus();
       }
 
@@ -318,16 +367,17 @@ Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
       }
     };_this.
 
-    delaySelectAll = function () {return _this.selectAllId = (0, _raf.default)(_this.selectAll);};_this.
+    delaySelectAll = function () {var _globalObject$request;return (
+        _this.selectAllId = (_globalObject$request = _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(_this.selectAll)) != null ? _globalObject$request : null);};_this.
 
     cancelDelayedSelectAll = function () {
       if (_this.selectAllId) {
-        _raf.default.cancel(_this.selectAllId);
+        _globalObject.globalObject.cancelAnimationFrame == null ? void 0 : _globalObject.globalObject.cancelAnimationFrame(_this.selectAllId);
         _this.selectAllId = null;
       }
     };_this.
 
-    renderMain = function (props) {var _cx, _ref, _textareaProps$maxLen;
+    renderMain = function (props) {var _cx, _ref, _textareaProps$maxLen, _cx2;
       var _props$width =
 
 
@@ -348,7 +398,8 @@ Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
 
-      props.width,width = _props$width === void 0 ? DEFAULT_WIDTH : _props$width,error = props.error,warning = props.warning,autoResize = props.autoResize,resize = props.resize,onCut = props.onCut,onPaste = props.onPaste,maxRows = props.maxRows,onFocus = props.onFocus,selectAllOnFocus = props.selectAllOnFocus,placeholder = props.placeholder,onValueChange = props.onValueChange,showLengthCounter = props.showLengthCounter,lengthCounter = props.lengthCounter,counterHelp = props.counterHelp,extraRow = props.extraRow,disableAnimations = props.disableAnimations,disabled = props.disabled,textareaProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+      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,onPaste = props.onPaste,maxRows = props.maxRows,onFocus = props.onFocus,selectAllOnFocus = props.selectAllOnFocus,placeholder = props.placeholder,onValueChange = props.onValueChange,showLengthCounter = props.showLengthCounter,lengthCounter = props.lengthCounter,counterHelp = props.counterHelp,extraRow = props.extraRow,disableAnimations = props.disableAnimations,disabled = props.disabled,textareaProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
       var isCounterVisible = _this.state.isCounterVisible;
 
@@ -358,7 +409,7 @@ Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
 
-      var textareaClassNames = (0, _Emotion.cx)((_cx = {}, _cx[
+      var textareaClassNames = (0, _Emotion.cx)(_this.getTextareaSizeClassName(), (_cx = {}, _cx[
       _Textarea.styles.textarea(_this.theme)] = true, _cx[
       _Textarea.styles.hovering(_this.theme)] = !error && !warning, _cx[
       _Textarea.styles.disabled(_this.theme)] = disabled, _cx[
@@ -391,6 +442,7 @@ Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
       var counter = showLengthCounter && isCounterVisible && _this.node && /*#__PURE__*/
       _react.default.createElement(_TextareaCounter.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,
@@ -399,16 +451,25 @@ Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
 
+      var Component =
+      _this.featureFlags.textareaUseSafari17Workaround && _client.isSafari17 ? _TextareaWithSafari17Workaround.TextareaWithSafari17Workaround : 'textarea';
+
       return /*#__PURE__*/(
         _react.default.createElement(_RenderLayer.RenderLayer, {
           onFocusOutside: _this.handleCloseCounterHelp,
           onClickOutside: _this.handleCloseCounterHelp,
           active: _this.state.isCounterVisible }, /*#__PURE__*/
 
-        _react.default.createElement("label", (0, _extends2.default)({ "data-tid": TextareaDataTids.root }, rootProps, { className: _Textarea.styles.root(_this.theme) }),
+        _react.default.createElement("label", (0, _extends2.default)({
+          "data-tid": TextareaDataTids.root },
+        rootProps, {
+          className: (0, _Emotion.cx)(_this.getRootSizeClassName(), (_cx2 = {}, _cx2[
+          _Textarea.styles.root()] = true, _cx2)) }),
+
+
         placeholderPolyfill, /*#__PURE__*/
         _react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this.reflowCounter }, /*#__PURE__*/
-        _react.default.createElement("textarea", (0, _extends2.default)({},
+        _react.default.createElement(Component, (0, _extends2.default)({},
         textareaProps, {
           className: textareaClassNames,
           style: textareaStyle,
@@ -501,11 +562,18 @@ Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
       if (rows === undefined || maxRows === undefined) {
         return;
       }
-      var _getTextAreaHeight = (0, _TextareaHelpers.getTextAreaHeight)({
+
+      var _ref2 =
+      (0, _TextareaHelpers.getTextAreaHeight)({
         node: fakeNode,
         minRows: typeof rows === 'number' ? rows : parseInt(rows, 10),
         maxRows: typeof maxRows === 'number' ? maxRows : parseInt(maxRows, 10),
-        extraRow: _this.getProps().extraRow }),height = _getTextAreaHeight.height,exceededMaxHeight = _getTextAreaHeight.exceededMaxHeight;
+        extraRow: _this.getProps().extraRow }) ||
+      {},height = _ref2.height,exceededMaxHeight = _ref2.exceededMaxHeight;
+
+      if (height === undefined || exceededMaxHeight === undefined) {
+        return;
+      }
 
       node.style.height = height + 'px';
       node.style.overflowY = exceededMaxHeight ? 'scroll' : 'hidden';
@@ -549,9 +617,9 @@ Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
       if (_this.props.onFocus) {
         _this.props.onFocus(event);
       }
-    };return _this;}var _proto = Textarea.prototype;_proto.getAutoResizeThrottleWait = function getAutoResizeThrottleWait(props) {if (props === void 0) {props = this.props;} // NOTE: При отключении анимации остается эффект дергания при авто-ресайзе из-за троттлинга расчета высоты
+    };return _this;}var _proto = Textarea.prototype;_proto.getRootSizeClassName = function getRootSizeClassName() {switch (this.getProps().size) {case 'large':return _Textarea.styles.rootLarge(this.theme);case 'medium':return _Textarea.styles.rootMedium(this.theme);case 'small':default:return _Textarea.styles.rootSmall(this.theme);}};_proto.getTextareaSizeClassName = function getTextareaSizeClassName() {switch (this.getProps().size) {case 'large':return _Textarea.styles.textareaLarge(this.theme);case 'medium':return _Textarea.styles.textareaMedium(this.theme);case 'small':default:return _Textarea.styles.textareaSmall(this.theme);}};_proto.getAutoResizeThrottleWait = function getAutoResizeThrottleWait(props) {if (props === void 0) {props = this.props;} // NOTE: При отключении анимации остается эффект дергания при авто-ресайзе из-за троттлинга расчета высоты
     // Поэтому выставляем таймаут троттла в ноль. Подробности - https://github.com/skbkontur/retail-ui/issues/2120
-    return this.isAnimationsDisabled(props) ? 0 : AUTORESIZE_THROTTLE_DEFAULT_WAIT;};_proto.isAnimationsDisabled = function isAnimationsDisabled(_temp2) {var _ref2 = _temp2 === void 0 ? this.props : _temp2,disableAnimations = _ref2.disableAnimations,extraRow = _ref2.extraRow;return disableAnimations || !extraRow;};_proto.componentDidMount = function componentDidMount() {if (this.props.autoResize) {this.autoResize();this.layoutEvents = LayoutEvents.addListener(this.autoResize);}if (this.node && this.props.showLengthCounter && this.textareaObserver) {this.textareaObserver.observe(this.node, { attributes: true });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutEvents) {this.layoutEvents.remove();}if (this.props.showLengthCounter && this.textareaObserver) {this.textareaObserver.disconnect();}this.cancelDelayedSelectAll();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.getAutoResizeThrottleWait() !== this.getAutoResizeThrottleWait(prevProps)) {this.autoResize.cancel();this.autoResize = (0, _lodash.default)(this.autoResizeHandler, this.getAutoResizeThrottleWait());}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();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});} /**
+    return this.isAnimationsDisabled(props) ? 0 : AUTORESIZE_THROTTLE_DEFAULT_WAIT;};_proto.isAnimationsDisabled = function isAnimationsDisabled(_temp2) {var _ref3 = _temp2 === void 0 ? this.props : _temp2,disableAnimations = _ref3.disableAnimations,extraRow = _ref3.extraRow;return disableAnimations || !extraRow;};_proto.componentDidMount = function componentDidMount() {if (this.props.autoResize) {this.autoResize();this.layoutEvents = LayoutEvents.addListener(this.autoResize);}if (this.node && this.props.showLengthCounter && this.textareaObserver) {this.textareaObserver.observe(this.node, { attributes: true });}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutEvents) {this.layoutEvents.remove();}if (this.props.showLengthCounter && this.textareaObserver) {this.textareaObserver.disconnect();}this.cancelDelayedSelectAll();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.getAutoResizeThrottleWait() !== this.getAutoResizeThrottleWait(prevProps)) {this.autoResize.cancel();this.autoResize = (0, _lodash.default)(this.autoResizeHandler, this.getAutoResizeThrottleWait());}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();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});});} /**
    * @public
    */;_proto.focus = function focus() {if (this.node) {this.node.focus();}} /**
    * @public
@@ -559,4 +627,4 @@ Textarea = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
    * @public
    * @param {number} start
    * @param {number} end
-   */;return Textarea;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Textarea', _class2.propTypes = { error: _propTypes.default.bool, warning: _propTypes.default.bool, disabled: _propTypes.default.bool, autoResize: _propTypes.default.bool, extraRow: _propTypes.default.bool, disableAnimations: _propTypes.default.bool, maxRows: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), resize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), id: _propTypes.default.string, name: _propTypes.default.string, title: _propTypes.default.string, spellCheck: _propTypes.default.bool, role: _propTypes.default.string, maxLength: _propTypes.default.number, tabIndex: _propTypes.default.number, rows: _propTypes.default.number, placeholder: _propTypes.default.string, value: _propTypes.default.string, defaultValue: _propTypes.default.string, onValueChange: _propTypes.default.func, onMouseEnter: _propTypes.default.func, onMouseLeave: _propTypes.default.func, onMouseOver: _propTypes.default.func, onMouseMove: _propTypes.default.func, onMouseOut: _propTypes.default.func, onMouseUp: _propTypes.default.func, onMouseDown: _propTypes.default.func, onClick: _propTypes.default.func, onDoubleClick: _propTypes.default.func, onKeyDown: _propTypes.default.func, onKeyPress: _propTypes.default.func, onKeyUp: _propTypes.default.func, onInput: _propTypes.default.func, onFocus: _propTypes.default.func, onBlur: _propTypes.default.func, onScroll: _propTypes.default.func, onWheel: _propTypes.default.func, onCut: _propTypes.default.func, onPaste: _propTypes.default.func, onCopy: _propTypes.default.func }, _class2.defaultProps = { rows: 3, maxRows: 15, extraRow: true, disableAnimations: _currentEnvironment.isTestEnv }, _temp)) || _class;exports.Textarea = Textarea;
+   */;return Textarea;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Textarea', _class2.displayName = 'Textarea', _class2.propTypes = { error: _propTypes.default.bool, warning: _propTypes.default.bool, disabled: _propTypes.default.bool, autoResize: _propTypes.default.bool, extraRow: _propTypes.default.bool, disableAnimations: _propTypes.default.bool, maxRows: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), resize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), id: _propTypes.default.string, name: _propTypes.default.string, title: _propTypes.default.string, spellCheck: _propTypes.default.bool, role: _propTypes.default.string, maxLength: _propTypes.default.number, tabIndex: _propTypes.default.number, rows: _propTypes.default.number, placeholder: _propTypes.default.string, value: _propTypes.default.string, defaultValue: _propTypes.default.string, onValueChange: _propTypes.default.func, onMouseEnter: _propTypes.default.func, onMouseLeave: _propTypes.default.func, onMouseOver: _propTypes.default.func, onMouseMove: _propTypes.default.func, onMouseOut: _propTypes.default.func, onMouseUp: _propTypes.default.func, onMouseDown: _propTypes.default.func, onClick: _propTypes.default.func, onDoubleClick: _propTypes.default.func, onKeyDown: _propTypes.default.func, onKeyPress: _propTypes.default.func, onKeyUp: _propTypes.default.func, onInput: _propTypes.default.func, onFocus: _propTypes.default.func, onBlur: _propTypes.default.func, onScroll: _propTypes.default.func, onWheel: _propTypes.default.func, onCut: _propTypes.default.func, onPaste: _propTypes.default.func, onCopy: _propTypes.default.func }, _class2.defaultProps = { rows: 3, maxRows: 15, extraRow: true, size: 'small', disableAnimations: _currentEnvironment.isTestEnv }, _temp)) || _class;exports.Textarea = Textarea;