@skbkontur/react-ui 5.6.0 → 5.6.1-85c65.0

package/cjs/components/Tabs/Tabs.js

@@ -1,19 +1,20 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TabsDataTids = exports.Tabs = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
 var _react = _interopRequireDefault(require("react"));
-var _globalObject = require("@skbkontur/global-object");
+
+
 
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
-var _Emotion = require("../../lib/theming/Emotion");
 var _getRootNode = require("../../lib/rootNode/getRootNode");
 
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 
 var _isInstanceOf = require("../../lib/isInstanceOf");
+var _renderEnvironment = require("../../lib/renderEnvironment");
 
 var _Indicator = require("./Indicator");
 var _Tabs2 = require("./Tabs.styles");
@@ -67,7 +68,8 @@ var TabsDataTids = exports.TabsDataTids = {
  * Не используйте `Tabs` для переключения состояний — для этого есть RadioGroup, Toggle и Switcher.
  */var
 
-Tabs = exports.Tabs = (0, _rootNode.rootNode)(_class = (_Tabs = /*#__PURE__*/function (_React$Component) {function Tabs() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+Tabs = exports.Tabs = (0, _renderEnvironment.withRenderEnvironment)(_class = (0, _rootNode.rootNode)(_class = (_Tabs = /*#__PURE__*/function (_React$Component) {function Tabs() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -82,6 +84,10 @@ Tabs = exports.Tabs = (0, _rootNode.rootNode)(_class = (_Tabs = /*#__PURE__*/fun
 
 
 
+
+
+
+
     tabs = [];_this.
 
     tabUpdates = {
@@ -142,6 +148,8 @@ Tabs = exports.Tabs = (0, _rootNode.rootNode)(_class = (_Tabs = /*#__PURE__*/fun
 
 
 
+
+
 
 
 
@@ -154,7 +162,7 @@ Tabs = exports.Tabs = (0, _rootNode.rootNode)(_class = (_Tabs = /*#__PURE__*/fun
       var tabNode = tab.getNode();
       var htmlNode = (0, _getRootNode.getRootNode)(tabNode);
 
-      if ((0, _isInstanceOf.isInstanceOf)(htmlNode, _globalObject.globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
+      if ((0, _isInstanceOf.isInstanceOf)(htmlNode, _this.globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
         htmlNode.focus();
       }
     };_this.
@@ -181,4 +189,4 @@ Tabs = exports.Tabs = (0, _rootNode.rootNode)(_class = (_Tabs = /*#__PURE__*/fun
 
     removeTab = function (id) {
       _this.tabs = _this.tabs.filter(function (tab) {return tab.id !== id;});
-    };return _this;}(0, _inheritsLoose2.default)(Tabs, _React$Component);var _proto = Tabs.prototype;_proto.render = function render() {var _this3 = this;var _this$props2 = this.props,value = _this$props2.value,width = _this$props2.width,children = _this$props2.children,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.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {var _cx;_this3.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this3.setRootNode }, _this3.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TabsDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_Tabs2.styles.rootSmall(_this3.theme)] = size === 'small', _cx[_Tabs2.styles.rootMedium(_this3.theme)] = size === 'medium', _cx[_Tabs2.styles.rootLarge(_this3.theme)] = size === 'large', _cx[_Tabs2.styles.vertical()] = vertical, _cx)), style: { width: width }, "aria-describedby": ariaDescribedby }, /*#__PURE__*/_react.default.createElement(_TabsContext.TabsContext.Provider, { value: { vertical: vertical, activeTab: value, size: size, getTab: _this3.getTab, addTab: _this3.addTab, removeTab: _this3.removeTab, notifyUpdate: _this3.notifyUpdate, shiftFocus: _this3.shiftFocus, switchTab: _this3.switchTab } }, children, /*#__PURE__*/_react.default.createElement(_Indicator.Indicator, { className: indicatorClassName, tabUpdates: _this3.tabUpdates, vertical: _this3.getProps().vertical }))));});};return Tabs;}(_react.default.Component), _Tabs.__KONTUR_REACT_UI__ = 'Tabs', _Tabs.displayName = 'Tabs', _Tabs.defaultProps = { vertical: false, size: 'large' }, _Tabs.Tab = _Tab.Tab, _Tabs)) || _class;
+    };return _this;}(0, _inheritsLoose2.default)(Tabs, _React$Component);var _proto = Tabs.prototype;_proto.render = function render() {var _this3 = this;var _this$props2 = this.props,value = _this$props2.value,width = _this$props2.width,children = _this$props2.children,indicatorClassName = _this$props2.indicatorClassName,ariaDescribedby = _this$props2['aria-describedby'];var _this$getProps = this.getProps(),vertical = _this$getProps.vertical,size = _this$getProps.size;this.styles = (0, _Tabs2.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {var _this3$cx;_this3.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this3.setRootNode }, _this3.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TabsDataTids.root, className: _this3.cx((_this3$cx = {}, _this3$cx[_this3.styles.rootSmall(_this3.theme)] = size === 'small', _this3$cx[_this3.styles.rootMedium(_this3.theme)] = size === 'medium', _this3$cx[_this3.styles.rootLarge(_this3.theme)] = size === 'large', _this3$cx[_this3.styles.vertical()] = vertical, _this3$cx)), style: { width: width }, "aria-describedby": ariaDescribedby }, /*#__PURE__*/_react.default.createElement(_TabsContext.TabsContext.Provider, { value: { vertical: vertical, activeTab: value, size: size, getTab: _this3.getTab, addTab: _this3.addTab, removeTab: _this3.removeTab, notifyUpdate: _this3.notifyUpdate, shiftFocus: _this3.shiftFocus, switchTab: _this3.switchTab } }, children, /*#__PURE__*/_react.default.createElement(_Indicator.Indicator, { className: indicatorClassName, tabUpdates: _this3.tabUpdates, vertical: _this3.getProps().vertical }))));});};return Tabs;}(_react.default.Component), _Tabs.__KONTUR_REACT_UI__ = 'Tabs', _Tabs.displayName = 'Tabs', _Tabs.defaultProps = { vertical: false, size: 'large' }, _Tabs.Tab = _Tab.Tab, _Tabs)) || _class) || _class;

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_ThemeContext","_CommonWrapper","_Emotion","_getRootNode","_rootNode","_createPropsGetter","_isInstanceOf","_Indicator","_Tabs2","_TabsContext","_Tab","_class","_Tabs","TabsDataTids","exports","root","indicatorRoot","Tabs","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","_this2","findIndex","x","id","newIndex","Math","max","min","tab","tabNode","getNode","htmlNode","getRootNode","isInstanceOf","globalObject","HTMLElement","focus","notifyUpdate","forEach","switchTab","_this$props","props","onValueChange","value","getTab","_ref","find","_ref$getNode","addTab","removeTab","filter","_inheritsLoose2","default","_proto","prototype","render","_this3","_this$props2","width","children","indicatorClassName","ariaDescribedby","_this$getProps","vertical","size","createElement","ThemeContext","Consumer","theme","_cx","CommonWrapper","_extends2","rootNodeRef","setRootNode","className","cx","styles","rootSmall","rootMedium","rootLarge","style","TabsContext","Provider","activeTab","Indicator","React","Component","__KONTUR_REACT_UI__","displayName","Tab"],"sources":["Tabs.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport type { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport type { SizeProp } from '../../lib/types/props';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport type { TabsContextType } from './TabsContext';\nimport { TabsContext } 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  indicatorClassName?: string;\n\n  /** Задает размер контрола. */\n  size?: SizeProp;\n\n  /** Задает текущий активный `<Tab />`. Принимает `id` таба. */\n  value: T;\n\n  /** Задает функцию, изменяющую текущий активный `<Tab />`. */\n  onValueChange?: (value: T) => void;\n\n  /** Задает расположение элементов по вертикали.\n   * @default false */\n  vertical?: boolean;\n\n  /** Задает ширину компонента Tabs. */\n  width?: number | string;\n\n  /** @ignore */\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 * Используйте `Tabs` для второстепенной навигации, для группировки или фильтрации контента.\n *\n * Не используйте `Tabs` для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.\n * Не используйте `Tabs` для переключения состояний — для этого есть RadioGroup, Toggle и Switcher.\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  public getRootNode!: TGetRootNode;\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_ThemeContext","_CommonWrapper","_getRootNode","_rootNode","_createPropsGetter","_isInstanceOf","_renderEnvironment","_Indicator","_Tabs2","_TabsContext","_Tab","_class","_Tabs","TabsDataTids","exports","root","indicatorRoot","Tabs","withRenderEnvironment","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","_this2","findIndex","x","id","newIndex","Math","max","min","tab","tabNode","getNode","htmlNode","getRootNode","isInstanceOf","globalObject","HTMLElement","focus","notifyUpdate","forEach","switchTab","_this$props","props","onValueChange","value","getTab","_ref","find","_ref$getNode","addTab","removeTab","filter","_inheritsLoose2","default","_proto","prototype","render","_this3","_this$props2","width","children","indicatorClassName","ariaDescribedby","_this$getProps","vertical","size","styles","getStyles","emotion","createElement","ThemeContext","Consumer","theme","_this3$cx","CommonWrapper","_extends2","rootNodeRef","setRootNode","className","cx","rootSmall","rootMedium","rootLarge","style","TabsContext","Provider","activeTab","Indicator","React","Component","__KONTUR_REACT_UI__","displayName","Tab"],"sources":["Tabs.tsx"],"sourcesContent":["import type { AriaAttributes, JSX } from 'react';\nimport React from 'react';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport type { GlobalObject } from '../../lib/globalObject';\nimport type { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport type { SizeProp } from '../../lib/types/props';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\n\nimport { Indicator } from './Indicator';\nimport { getStyles } from './Tabs.styles';\nimport type { TabsContextType } from './TabsContext';\nimport { TabsContext } 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  indicatorClassName?: string;\n\n  /** Задает размер контрола. */\n  size?: SizeProp;\n\n  /** Задает текущий активный `<Tab />`. Принимает `id` таба. */\n  value: T;\n\n  /** Задает функцию, изменяющую текущий активный `<Tab />`. */\n  onValueChange?: (value: T) => void;\n\n  /** Задает расположение элементов по вертикали.\n   * @default false */\n  vertical?: boolean;\n\n  /** Задает ширину компонента Tabs. */\n  width?: number | string;\n\n  /** @ignore */\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 * Используйте `Tabs` для второстепенной навигации, для группировки или фильтрации контента.\n *\n * Не используйте `Tabs` для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.\n * Не используйте `Tabs` для переключения состояний — для этого есть RadioGroup, Toggle и Switcher.\n */\n@withRenderEnvironment\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 globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\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  public getRootNode!: TGetRootNode;\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    this.styles = getStyles(this.emotion);\n\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={this.cx({\n                  [this.styles.rootSmall(this.theme)]: size === 'small',\n                  [this.styles.rootMedium(this.theme)]: size === 'medium',\n                  [this.styles.rootLarge(this.theme)]: size === 'large',\n                  [this.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, this.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"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import type { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
     rootSmall(t: Theme): string;
     rootMedium(t: Theme): string;
     rootLarge(t: Theme): string;
     vertical(): string;
-};
+}>;

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

@@ -1,31 +1,39 @@
-"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");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 
+var _Emotion = require("../../lib/theming/Emotion");
 
 
-var _helpers = require("./helpers");var _templateObject, _templateObject2;
 
-var styles = exports.styles = (0, _Emotion.memoizeStyle)({
-  rootSmall: function rootSmall(t) {
-    return tabsRoot(t, 'small');
-  },
+var _helpers = require("./helpers");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-  rootMedium: function rootMedium(t) {
-    return tabsRoot(t, 'medium');
-  },
+var getStyles = exports.getStyles = (0, _Emotion.memoizeGetStyles)(function (emotion) {return {
+    rootSmall: function rootSmall(t) {
+      return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n      "])),
+      tabsRoot(t, 'small', emotion));
 
-  rootLarge: function rootLarge(t) {
-    return tabsRoot(t, 'large');
-  },
+    },
 
-  vertical: function vertical() {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: 0;\n    "])));
+    rootMedium: function rootMedium(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n      "])),
+      tabsRoot(t, 'medium', emotion));
 
+    },
 
-  }
-});
+    rootLarge: function rootLarge(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n      "])),
+      tabsRoot(t, 'large', emotion));
 
-function tabsRoot(t, size) {
-  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    display: inline-block;\n    margin: 0 -", ";\n    padding: 0;\n    position: relative;\n  "])),
+    },
+
+    vertical: function vertical() {
+      return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin: 0;\n      "])));
+
+
+    }
+  };});
+
+function tabsRoot(t, size, _ref) {var css = _ref.css;
+  return css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n    display: inline-block;\n    margin: 0 -", ";\n    padding: 0;\n    position: relative;\n  "])),
 
   (0, _helpers.paddingX)(t, size));
 

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

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_helpers","_templateObject","_templateObject2","styles","exports","memoizeStyle","rootSmall","t","tabsRoot","rootMedium","rootLarge","vertical","css","_taggedTemplateLiteralLoose2","default","size","paddingX"],"sources":["Tabs.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { 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"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA;;;;AAIA,IAAAC,QAAA,GAAAD,OAAA,cAAqC,IAAAE,eAAA,EAAAC,gBAAA;;AAE9B,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,SAAS,WAAAA,UAACC,CAAQ,EAAE;IAClB,OAAOC,QAAQ,CAACD,CAAC,EAAE,OAAO,CAAC;EAC7B,CAAC;;EAEDE,UAAU,WAAAA,WAACF,CAAQ,EAAE;IACnB,OAAOC,QAAQ,CAACD,CAAC,EAAE,QAAQ,CAAC;EAC9B,CAAC;;EAEDG,SAAS,WAAAA,UAACH,CAAQ,EAAE;IAClB,OAAOC,QAAQ,CAACD,CAAC,EAAE,OAAO,CAAC;EAC7B,CAAC;;EAEDI,QAAQ,WAAAA,SAAA,EAAG;IACT,WAAOC,YAAG,EAAAX,eAAA,KAAAA,eAAA,OAAAY,4BAAA,CAAAC,OAAA;;;EAGZ;AACF,CAAC,CAAC;;AAEF,SAASN,QAAQA,CAACD,CAAQ,EAAEQ,IAAc,EAAE;EAC1C,WAAOH,YAAG,EAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;;EAEK,IAAAE,iBAAQ,EAACT,CAAC,EAAEQ,IAAI,CAAC;;;;AAIlC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_helpers","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","getStyles","exports","memoizeGetStyles","emotion","rootSmall","t","css","_taggedTemplateLiteralLoose2","default","tabsRoot","rootMedium","rootLarge","vertical","size","_ref","paddingX"],"sources":["Tabs.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { SizeProp } from '../../lib/types/props';\n\nimport { paddingX } from './helpers';\n\nexport const getStyles = memoizeGetStyles((emotion: Emotion) => ({\n  rootSmall(t: Theme) {\n    return emotion.css`\n        ${tabsRoot(t, 'small', emotion)}\n      `;\n  },\n\n  rootMedium(t: Theme) {\n    return emotion.css`\n        ${tabsRoot(t, 'medium', emotion)}\n      `;\n  },\n\n  rootLarge(t: Theme) {\n    return emotion.css`\n        ${tabsRoot(t, 'large', emotion)}\n      `;\n  },\n\n  vertical() {\n    return emotion.css`\n        margin: 0;\n      `;\n  },\n}));\n\nfunction tabsRoot(t: Theme, size: SizeProp, { css }: Emotion) {\n  return css`\n    display: inline-block;\n    margin: 0 -${paddingX(t, size)};\n    padding: 0;\n    position: relative;\n  `;\n}\n"],"mappings":";;AAEA,IAAAA,QAAA,GAAAC,OAAA;;;;AAIA,IAAAC,QAAA,GAAAD,OAAA,cAAqC,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAE9B,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,yBAAgB,EAAC,UAACC,OAAgB,UAAM;IAC/DC,SAAS,WAAAA,UAACC,CAAQ,EAAE;MAClB,OAAOF,OAAO,CAACG,GAAG,CAAAX,eAAA,KAAAA,eAAA,OAAAY,4BAAA,CAAAC,OAAA;MACZC,QAAQ,CAACJ,CAAC,EAAE,OAAO,EAAEF,OAAO,CAAC;;IAErC,CAAC;;IAEDO,UAAU,WAAAA,WAACL,CAAQ,EAAE;MACnB,OAAOF,OAAO,CAACG,GAAG,CAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;MACZC,QAAQ,CAACJ,CAAC,EAAE,QAAQ,EAAEF,OAAO,CAAC;;IAEtC,CAAC;;IAEDQ,SAAS,WAAAA,UAACN,CAAQ,EAAE;MAClB,OAAOF,OAAO,CAACG,GAAG,CAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;MACZC,QAAQ,CAACJ,CAAC,EAAE,OAAO,EAAEF,OAAO,CAAC;;IAErC,CAAC;;IAEDS,QAAQ,WAAAA,SAAA,EAAG;MACT,OAAOT,OAAO,CAACG,GAAG,CAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;;;IAGpB;EACF,CAAC,EAAC,CAAC;;AAEH,SAASC,QAAQA,CAACJ,CAAQ,EAAEQ,IAAc,EAAAC,IAAA,EAAoB,KAAhBR,GAAG,GAAAQ,IAAA,CAAHR,GAAG;EAC/C,OAAOA,GAAG,CAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;EAEK,IAAAO,iBAAQ,EAACV,CAAC,EAAEQ,IAAI,CAAC;;;;AAIlC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["fontSize","t","size","mapSize","tabFontSizeSmall","tabFontSizeMedium","tabFontSizeLarge","lineHeight","tabLineHeightSmall","tabLineHeightMedium","tabLineHeightLarge","paddingX","tabPaddingXSmall","tabPaddingXMedium","tabPaddingXLarge","paddingY","tabPaddingYSmall","tabPaddingYMedium","tabPaddingYLarge","small","medium","large"],"sources":["helpers.ts"],"sourcesContent":["import type { Theme } from '../../lib/theming/Theme';\nimport type { 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"],"mappings":";;;AAGO,SAASA,QAAQA,CAACC,CAAQ,EAAEC,IAAc,EAAE;EACjD,OAAOC,OAAO,CAACD,IAAI,EAAED,CAAC,CAACG,gBAAgB,EAAEH,CAAC,CAACI,iBAAiB,EAAEJ,CAAC,CAACK,gBAAgB,CAAC;AACnF;;AAEO,SAASC,UAAUA,CAACN,CAAQ,EAAEC,IAAc,EAAE;EACnD,OAAOC,OAAO,CAACD,IAAI,EAAED,CAAC,CAACO,kBAAkB,EAAEP,CAAC,CAACQ,mBAAmB,EAAER,CAAC,CAACS,kBAAkB,CAAC;AACzF;;AAEO,SAASC,QAAQA,CAACV,CAAQ,EAAEC,IAAc,EAAE;EACjD,OAAOC,OAAO,CAACD,IAAI,EAAED,CAAC,CAACW,gBAAgB,EAAEX,CAAC,CAACY,iBAAiB,EAAEZ,CAAC,CAACa,gBAAgB,CAAC;AACnF;;AAEO,SAASC,QAAQA,CAACd,CAAQ,EAAEC,IAAc,EAAE;EACjD,OAAOC,OAAO,CAACD,IAAI,EAAED,CAAC,CAACe,gBAAgB,EAAEf,CAAC,CAACgB,iBAAiB,EAAEhB,CAAC,CAACiB,gBAAgB,CAAC;AACnF;;AAEA,SAASf,OAAOA,CAAID,IAAc,EAAEiB,KAAQ,EAAEC,MAAS,EAAEC,KAAQ,EAAE;EACjE,QAAQnB,IAAI;IACV,KAAK,OAAO;MACV,OAAOiB,KAAK;IACd,KAAK,QAAQ;MACX,OAAOC,MAAM;IACf,KAAK,OAAO;MACV,OAAOC,KAAK;IACd;MACE,OAAOF,KAAK;EAChB;AACF","ignoreList":[]}
+{"version":3,"names":["fontSize","t","size","mapSize","tabFontSizeSmall","tabFontSizeMedium","tabFontSizeLarge","lineHeight","tabLineHeightSmall","tabLineHeightMedium","tabLineHeightLarge","paddingX","tabPaddingXSmall","tabPaddingXMedium","tabPaddingXLarge","paddingY","tabPaddingYSmall","tabPaddingYMedium","tabPaddingYLarge","small","medium","large"],"sources":["helpers.ts"],"sourcesContent":["import type { Theme } from '../../lib/theming/Theme';\nimport type { SizeProp } from '../../lib/types/props';\n\nexport function fontSize(t: Theme, size: SizeProp): string {\n  return mapSize(size, t.tabFontSizeSmall, t.tabFontSizeMedium, t.tabFontSizeLarge);\n}\n\nexport function lineHeight(t: Theme, size: SizeProp): string {\n  return mapSize(size, t.tabLineHeightSmall, t.tabLineHeightMedium, t.tabLineHeightLarge);\n}\n\nexport function paddingX(t: Theme, size: SizeProp): string {\n  return mapSize(size, t.tabPaddingXSmall, t.tabPaddingXMedium, t.tabPaddingXLarge);\n}\n\nexport function paddingY(t: Theme, size: SizeProp): string {\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"],"mappings":";;;AAGO,SAASA,QAAQA,CAACC,CAAQ,EAAEC,IAAc,EAAU;EACzD,OAAOC,OAAO,CAACD,IAAI,EAAED,CAAC,CAACG,gBAAgB,EAAEH,CAAC,CAACI,iBAAiB,EAAEJ,CAAC,CAACK,gBAAgB,CAAC;AACnF;;AAEO,SAASC,UAAUA,CAACN,CAAQ,EAAEC,IAAc,EAAU;EAC3D,OAAOC,OAAO,CAACD,IAAI,EAAED,CAAC,CAACO,kBAAkB,EAAEP,CAAC,CAACQ,mBAAmB,EAAER,CAAC,CAACS,kBAAkB,CAAC;AACzF;;AAEO,SAASC,QAAQA,CAACV,CAAQ,EAAEC,IAAc,EAAU;EACzD,OAAOC,OAAO,CAACD,IAAI,EAAED,CAAC,CAACW,gBAAgB,EAAEX,CAAC,CAACY,iBAAiB,EAAEZ,CAAC,CAACa,gBAAgB,CAAC;AACnF;;AAEO,SAASC,QAAQA,CAACd,CAAQ,EAAEC,IAAc,EAAU;EACzD,OAAOC,OAAO,CAACD,IAAI,EAAED,CAAC,CAACe,gBAAgB,EAAEf,CAAC,CAACgB,iBAAiB,EAAEhB,CAAC,CAACiB,gBAAgB,CAAC;AACnF;;AAEA,SAASf,OAAOA,CAAID,IAAc,EAAEiB,KAAQ,EAAEC,MAAS,EAAEC,KAAQ,EAAE;EACjE,QAAQnB,IAAI;IACV,KAAK,OAAO;MACV,OAAOiB,KAAK;IACd,KAAK,QAAQ;MACX,OAAOC,MAAM;IACf,KAAK,OAAO;MACV,OAAOC,KAAK;IACd;MACE,OAAOF,KAAK;EAChB;AACF","ignoreList":[]}

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

@@ -7,35 +7,35 @@ import type { SizeProp } from '../../lib/types/props';
 import type { InputAlign } from '../Input';
 export declare const DEFAULT_WIDTH = 250;
 export interface TextareaProps extends Pick<AriaAttributes, 'aria-controls' | 'aria-label'>, CommonProps, Override<React.TextareaHTMLAttributes<HTMLTextAreaElement>, {
-    /** Переводит контрол в состояние валидации "ошибка". */
+    /** Меняет визуальное отображение поля на состояние ошибки. */
     error?: boolean;
-    /** Переводит контрол в состояние валидации "предупреждение". */
+    /** Меняет визуальное отображение поля на состояние предупреждения. */
     warning?: boolean;
-    /** Делает компонент недоступным. */
+    /** Блокирует поле. */
     disabled?: boolean;
-    /** Задает размер компонента. */
+    /** Размер многострочного поля. */
     size?: SizeProp;
-    /** Выполняет автоматический ресайз в зависимости от содержимого. */
+    /** Выполняет автоматический ресайз в зависимости от количества текста в поле. Связан с пропом `extraRow`, который всегда добавляет дополнительную пустую строку. */
     autoResize?: boolean;
-    /** Задает высоту текстарии в виде числа строк видимых без скролла. */
+    /** Высота поля — число видимых строк. При превышении этой высоты появляется скролл. */
     rows?: number;
-    /** Задает максимальное число строк при автоматическом ресайзе. */
+    /** Максимальное число видимых строк при автоматическом ресайзе. */
     maxRows?: string | number;
-    /** Задает направления ресайза компонента.
-     * Попадает в `style`. */
+    /** Направление ресайза поля.
+     * Попадает в `style`. Описание всех значений смотрите [в документации MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/resize). */
     resize?: React.CSSProperties['resize'];
-    /** Задает ширину текстэрии. */
+    /** Ширина многострочного поля. */
     width?: React.CSSProperties['width'];
-    /** Задает функцию, которая вызывается при изменении `value`. */
+    /** Событие изменения `value`. */
     onValueChange?: (value: string) => void;
-    /** Определяет, нужно ли выделять введенное значение при фокусе. Работает с типами text, password, tel, search, url. */
+    /** Выделяет введённое значение при фокусе в поле. Работает с типами `text`, `password`, `tel`, `search`, `url`. */
     selectAllOnFocus?: boolean;
-    /** Определяет, нужно ли показывать счетчик символов. */
+    /** Отображает счётчик введённых символов. */
     showLengthCounter?: boolean;
-    /** Задает допустимое количество символов в поле. Отображается в счетчике.
+    /** Допустимое количество символов в поле. Отображается в счётчике символов.
      * @default maxLength */
     lengthCounter?: number;
-    /** Задает подсказку к счетчику символов.
+    /** Добавляет подсказку к счётчику символов.
      * По умолчанию - тултип с содержимым из пропа, если передан `ReactNode`.
      * Передав функцию, можно переопределить подсказку целиком, вместе с иконкой.
      * @example
@@ -43,12 +43,12 @@ export interface TextareaProps extends Pick<AriaAttributes, 'aria-controls' | 'a
      * counterHelp={() => <Tooltip render={...}><HelpIcon /></Tooltip>}
      * ``` */
     counterHelp?: ReactNode | (() => ReactNode);
-    /** Добавляет дополнительную свободную строку при авто-ресайзе.
+    /** Добавляет дополнительную свободную строку при автоматическом ресайзе.
      * @see https://guides.kontur.ru/components/textarea/#04 */
     extraRow?: boolean;
-    /** Отключает анимацию при авто-ресайзе. Автоматически отключается когда в `extraRow` передан `false`. */
+    /** Отключает анимацию при автоматическом ресайзе. Автоматически отключается, когда в `extraRow` передан `false`. */
     disableAnimations?: boolean;
-    /** Выравнивание текста */
+    /** Выравнивание текста в поле. */
     align?: InputAlign;
 }> {
 }
@@ -63,10 +63,7 @@ export declare const TextareaDataTids: {
 };
 type DefaultProps = Required<Pick<TextareaProps, 'rows' | 'maxRows' | 'extraRow' | 'disableAnimations'>>;
 /**
- * Многострочное поле `Textarea` — это поле ввода, которое позволяет работать с несколькими строками текста.
- *
- * Принимает все атрибуты `React.TextareaHTMLAttributes<HTMLTextAreaElement>`.
- * Пропсы **`className` и `style` игнорируются**.
+ * Многострочное поле — это поле ввода, в котором текст отображается в несколько строк.
  */
 export declare class Textarea extends React.Component<TextareaProps, TextareaState> {
     static __KONTUR_REACT_UI__: string;
@@ -82,7 +79,10 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
     };
     private size;
     private reflowCounter;
-    private featureFlags;
+    private styles;
+    private emotion;
+    private cx;
+    private globalObject;
     private theme;
     private selectAllId;
     private node;
@@ -98,29 +98,25 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: TextareaProps): void;
     render(): React.JSX.Element;
-    /**
+    /** Программно устанавливает фокус на поле.
      * @public
      */
     focus(): void;
-    /**
+    /** Программно снимает фокус с поля.
      * @public
      */
     blur(): void;
-    /**
-     * @public
-     */
     getNode(): Nullable<HTMLTextAreaElement>;
-    /**
+    /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.
+     * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
      * @public
-     * @param {number} start
-     * @param {number} end
      */
     setSelectionRange: (start: number, end: number) => void;
-    /**
+    /** Переводит фокус в поле (если ещё не в фокусе) и выделяет весь текст в нём.
+     * Работает с типами `text`, `password`, `tel`, `search`, `url`.
      * @public
      */
     selectAll: () => void;
-    private delaySelectAll;
     private cancelDelayedSelectAll;
     private renderMain;
     private handleCloseCounterHelp;

package/cjs/components/Textarea/Textarea.js

@@ -1,7 +1,9 @@
 "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 = exports.DEFAULT_WIDTH = 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 _lodash = _interopRequireDefault(require("lodash.throttle"));
-var _globalObject = require("@skbkontur/global-object");
+
+var _warning = _interopRequireDefault(require("warning"));
+
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 var _needsPolyfillPlaceholder = require("../../lib/needsPolyfillPlaceholder");
@@ -15,18 +17,13 @@ var _client = require("../../lib/client");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _currentEnvironment = require("../../lib/currentEnvironment");
-var _Emotion = require("../../lib/theming/Emotion");
 
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 
 
 var _SizeDecorator = require("../../lib/size/SizeDecorator");
-var _ReactUIFeatureFlagsContext = require("../../lib/featureFlagsContext/ReactUIFeatureFlagsContext");
-
-
-
-var _FeatureFlagsHelpers = require("../../lib/featureFlagsContext/FeatureFlagsHelpers");
+var _renderEnvironment = require("../../lib/renderEnvironment");
 
 var _TextareaHelpers = require("./TextareaHelpers");
 var _Textarea2 = require("./Textarea.styles");
@@ -107,6 +104,7 @@ var AUTORESIZE_THROTTLE_DEFAULT_WAIT = 100;
 
 
 
+
 
 
 var TextareaDataTids = exports.TextareaDataTids = {
@@ -118,15 +116,12 @@ var TextareaDataTids = exports.TextareaDataTids = {
 
 
 /**
- * Многострочное поле `Textarea` — это поле ввода, которое позволяет работать с несколькими строками текста.
- *
- * Принимает все атрибуты `React.TextareaHTMLAttributes<HTMLTextAreaElement>`.
- * Пропсы **`className` и `style` игнорируются**.
+ * Многострочное поле — это поле ввода, в котором текст отображается в несколько строк.
  */var
 
 
 
-Textarea = exports.Textarea = (0, _rootNode.rootNode)(_class = (0, _SizeDecorator.withSize)(_class = (_Textarea = /*#__PURE__*/function (_React$Component) {function Textarea() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+Textarea = exports.Textarea = (0, _renderEnvironment.withRenderEnvironment)(_class = (0, _rootNode.rootNode)(_class = (0, _SizeDecorator.withSize)(_class = (_Textarea = /*#__PURE__*/function (_React$Component) {function Textarea() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -185,14 +180,11 @@ Textarea = exports.Textarea = (0, _rootNode.rootNode)(_class = (0, _SizeDecorato
     };_this.
 
 
-    selectAllId = null;_this.
 
 
 
 
-    textareaObserver = _globalObject.globalObject.MutationObserver ?
-    new _globalObject.globalObject.MutationObserver(_this.reflowCounter) :
-    null;
+    selectAllId = null;
 
 
 
@@ -286,24 +278,25 @@ Textarea = exports.Textarea = (0, _rootNode.rootNode)(_class = (0, _SizeDecorato
 
 
 
-    /**
+    /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.
+     * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
      * @public
-     * @param {number} start
-     * @param {number} end
      */_this.
-    setSelectionRange = function (start, end) {var _globalObject$documen;
+    setSelectionRange = function (start, end) {var _this$globalObject$do;
       if (!_this.node) {
-        throw new Error('Cannot call "setSelectionRange" on unmounted Input');
+        (0, _warning.default)(false, 'Cannot call "setSelectionRange" on unmounted Input');
+        return;
       }
 
-      if (((_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.activeElement) !== _this.node) {
+      if (((_this$globalObject$do = _this.globalObject.document) == null ? void 0 : _this$globalObject$do.activeElement) !== _this.node) {
         _this.focus();
       }
 
       _this.node.setSelectionRange(start, end);
     };
 
-    /**
+    /** Переводит фокус в поле (если ещё не в фокусе) и выделяет весь текст в нём.
+     * Работает с типами `text`, `password`, `tel`, `search`, `url`.
      * @public
      */_this.
     selectAll = function () {
@@ -312,17 +305,14 @@ Textarea = exports.Textarea = (0, _rootNode.rootNode)(_class = (0, _SizeDecorato
       }
     };_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) {
-        _globalObject.globalObject.cancelAnimationFrame == null || _globalObject.globalObject.cancelAnimationFrame(_this.selectAllId);
+        _this.globalObject.cancelAnimationFrame == null || _this.globalObject.cancelAnimationFrame(_this.selectAllId);
         _this.selectAllId = null;
       }
     };_this.
 
-    renderMain = function (props) {var _cx, _ref, _textareaProps$maxLen, _cx2;
+    renderMain = function (props) {var _this$cx, _ref, _textareaProps$maxLen, _this$cx2;
       var _props$width =
 
 
@@ -354,13 +344,13 @@ Textarea = exports.Textarea = (0, _rootNode.rootNode)(_class = (0, _SizeDecorato
         }
       };
 
-      var textareaClassNames = (0, _Emotion.cx)(_this.getTextareaSizeClassName(), (_cx = {}, _cx[
-      _Textarea2.styles.textarea(_this.theme)] = true, _cx[
-      _Textarea2.styles.hovering(_this.theme)] = !error && !warning, _cx[
-      _Textarea2.styles.disabled(_this.theme)] = disabled, _cx[
-      _Textarea2.styles.error(_this.theme)] = !!error, _cx[
-      _Textarea2.styles.warning(_this.theme)] = !!warning, _cx[
-      _Textarea2.styles.disableAnimations()] = _this.isAnimationsDisabled(), _cx)
+      var textareaClassNames = _this.cx(_this.getTextareaSizeClassName(), (_this$cx = {}, _this$cx[
+      _this.styles.textarea(_this.theme)] = true, _this$cx[
+      _this.styles.hovering(_this.theme)] = !error && !warning, _this$cx[
+      _this.styles.disabled(_this.theme)] = disabled, _this$cx[
+      _this.styles.error(_this.theme)] = !!error, _this$cx[
+      _this.styles.warning(_this.theme)] = !!warning, _this$cx[
+      _this.styles.disableAnimations()] = _this.isAnimationsDisabled(), _this$cx)
       );
 
       var textareaStyle = {
@@ -371,7 +361,7 @@ Textarea = exports.Textarea = (0, _rootNode.rootNode)(_class = (0, _SizeDecorato
       var placeholderPolyfill = null;
 
       if (_this.state.needsPolyfillPlaceholder && !textareaProps.value && !textareaProps.defaultValue) {
-        placeholderPolyfill = /*#__PURE__*/_react.default.createElement("span", { className: _Textarea2.styles.placeholder() }, placeholder);
+        placeholderPolyfill = /*#__PURE__*/_react.default.createElement("span", { className: _this.styles.placeholder() }, placeholder);
       }
 
       var fakeTextarea = null;
@@ -379,7 +369,7 @@ Textarea = exports.Textarea = (0, _rootNode.rootNode)(_class = (0, _SizeDecorato
         var fakeProps = {
           value: _this.props.value,
           defaultValue: _this.props.defaultValue,
-          className: (0, _Emotion.cx)(textareaClassNames, _Textarea2.styles.fake()),
+          className: _this.cx(textareaClassNames, _this.styles.fake()),
           readOnly: true
         };
         fakeTextarea = /*#__PURE__*/_react.default.createElement("textarea", (0, _extends2.default)({}, fakeProps, { ref: _this.refFake }));
@@ -408,12 +398,12 @@ Textarea = exports.Textarea = (0, _rootNode.rootNode)(_class = (0, _SizeDecorato
         _react.default.createElement("label", (0, _extends2.default)({
           "data-tid": TextareaDataTids.root },
         rootProps, {
-          className: (0, _Emotion.cx)(_this.getRootSizeClassName(), (_cx2 = {}, _cx2[
-          _Textarea2.styles.root()] = true, _cx2)
+          className: _this.cx(_this.getRootSizeClassName(), (_this$cx2 = {}, _this$cx2[
+          _this.styles.root()] = true, _this$cx2)
           ) }),
 
         placeholderPolyfill, /*#__PURE__*/
-        _react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this.reflowCounter, alignBaseline: _this.featureFlags.textareaBaselineAlign }, /*#__PURE__*/
+        _react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this.reflowCounter, alignBaseline: true }, /*#__PURE__*/
         _react.default.createElement(Component, (0, _extends2.default)({},
         textareaProps, {
           className: textareaClassNames,
@@ -509,7 +499,7 @@ Textarea = exports.Textarea = (0, _rootNode.rootNode)(_class = (0, _SizeDecorato
       }
 
       var _ref2 =
-        (0, _TextareaHelpers.getTextAreaHeight)({
+        (0, _TextareaHelpers.getTextAreaHeight)(_this.globalObject, {
           node: fakeNode,
           minRows: typeof rows === 'number' ? rows : parseInt(rows, 10),
           maxRows: typeof maxRows === 'number' ? maxRows : parseInt(maxRows, 10),
@@ -556,18 +546,16 @@ Textarea = exports.Textarea = (0, _rootNode.rootNode)(_class = (0, _SizeDecorato
 
       if (_this.props.selectAllOnFocus) {
         // https://github.com/facebook/react/issues/7769
-        _this.node && !_client.isIE11 ? _this.selectAll() : _this.delaySelectAll();
+        _this.node && _this.selectAll();
       }
 
       if (_this.props.onFocus) {
         _this.props.onFocus(event);
       }
-    };return _this;}(0, _inheritsLoose2.default)(Textarea, _React$Component);var _proto = Textarea.prototype;_proto.getRootSizeClassName = function getRootSizeClassName() {switch (this.size) {case 'large':return _Textarea2.styles.rootLarge(this.theme);case 'medium':return _Textarea2.styles.rootMedium(this.theme);case 'small':default:return _Textarea2.styles.rootSmall(this.theme);}};_proto.getTextareaSizeClassName = function getTextareaSizeClassName() {switch (this.size) {case 'large':return _Textarea2.styles.textareaLarge(this.theme);case 'medium':return _Textarea2.styles.textareaMedium(this.theme);case 'small':default:return _Textarea2.styles.textareaSmall(this.theme);}};_proto.getAutoResizeThrottleWait = function getAutoResizeThrottleWait(props) {if (props === void 0) {props = this.props;} // NOTE: При отключении анимации остается эффект дергания при авто-ресайзе из-за троттлинга расчета высоты
+    };return _this;}(0, _inheritsLoose2.default)(Textarea, _React$Component);var _proto = Textarea.prototype;_proto.getRootSizeClassName = function getRootSizeClassName() {switch (this.size) {case 'large':return this.styles.rootLarge(this.theme);case 'medium':return this.styles.rootMedium(this.theme);case 'small':default:return this.styles.rootSmall(this.theme);}};_proto.getTextareaSizeClassName = function getTextareaSizeClassName() {switch (this.size) {case 'large':return this.styles.textareaLarge(this.theme);case 'medium':return this.styles.textareaMedium(this.theme);case 'small':default:return this.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(_temp) {var _ref3 = _temp === void 0 ? this.props : _temp,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(_ReactUIFeatureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _FeatureFlagsHelpers.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.getProps()), _this2.renderMain);});});} /**
-   * @public
-   */;_proto.focus = function focus() {if (this.node) {this.node.focus();}} /**
+    return this.isAnimationsDisabled(props) ? 0 : AUTORESIZE_THROTTLE_DEFAULT_WAIT;};_proto.isAnimationsDisabled = function isAnimationsDisabled(_temp) {var _ref3 = _temp === void 0 ? this.props : _temp,disableAnimations = _ref3.disableAnimations,extraRow = _ref3.extraRow;return disableAnimations || !extraRow;};_proto.componentDidMount = function componentDidMount() {this.textareaObserver = this.globalObject.MutationObserver ? new this.globalObject.MutationObserver(this.reflowCounter) : null;if (this.props.autoResize) {this.autoResize();this.layoutEvents = LayoutEvents.addListener(this.autoResize, this.globalObject);}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;this.styles = (0, _Textarea2.getStyles)(this.emotion);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.getProps()), _this2.renderMain);});} /** Программно устанавливает фокус на поле.
    * @public
-   */;_proto.blur = function blur() {if (this.node) {this.node.blur();}} /**
+   */;_proto.focus = function focus() {if (this.node) {this.node.focus();}} /** Программно снимает фокус с поля.
    * @public
-   */;_proto.getNode = function getNode() {return this.node;};return Textarea;}(_react.default.Component), _Textarea.__KONTUR_REACT_UI__ = 'Textarea', _Textarea.displayName = 'Textarea', _Textarea.defaultProps = { rows: 3, maxRows: 15, extraRow: true, disableAnimations: _currentEnvironment.isTestEnv }, _Textarea)) || _class) || _class;
+   */;_proto.blur = function blur() {if (this.node) {this.node.blur();}};_proto.getNode = function getNode() {return this.node;};return Textarea;}(_react.default.Component), _Textarea.__KONTUR_REACT_UI__ = 'Textarea', _Textarea.displayName = 'Textarea', _Textarea.defaultProps = { rows: 3, maxRows: 15, extraRow: true, disableAnimations: _currentEnvironment.isTestEnv }, _Textarea)) || _class) || _class) || _class;