@skbkontur/react-ui 5.6.7 → 5.6.9-5e213.0

package/components/Tabs/Tabs/Tabs.js

@@ -1,6 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
 var _class, _Tabs;
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 import React from 'react';
 import { globalObject } from '@skbkontur/global-object';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
@@ -25,10 +34,11 @@ export var TabsDataTids = {
 export var Tabs = rootNode(_class = (_Tabs = /*#__PURE__*/function (_React$Component) {
   function Tabs() {
     var _this;
+    _classCallCheck(this, Tabs);
     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 = _callSuper(this, Tabs, [].concat(args));
     _this.getProps = createPropsGetter(Tabs.defaultProps);
     _this.tabs = [];
     _this.tabUpdates = {
@@ -88,51 +98,51 @@ export var Tabs = rootNode(_class = (_Tabs = /*#__PURE__*/function (_React$Compo
     };
     return _this;
   }
-  _inheritsLoose(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.createElement(ThemeContext.Consumer, null, function (theme) {
-      var _cx;
-      _this3.theme = theme;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-        rootNodeRef: _this3.setRootNode
-      }, _this3.props), /*#__PURE__*/React.createElement("div", {
-        "data-tid": TabsDataTids.root,
-        className: cx((_cx = {}, _cx[styles.rootSmall(_this3.theme)] = size === 'small', _cx[styles.rootMedium(_this3.theme)] = size === 'medium', _cx[styles.rootLarge(_this3.theme)] = size === 'large', _cx[styles.vertical()] = vertical, _cx)),
-        style: {
-          width: width
-        },
-        "aria-describedby": ariaDescribedby
-      }, /*#__PURE__*/React.createElement(TabsContext.Provider, {
-        value: {
-          vertical: vertical,
-          activeTab: value,
-          size: size,
-          getTab: _this3.getTab,
-          addTab: _this3.addTab,
-          removeTab: _this3.removeTab,
-          notifyUpdate: _this3.notifyUpdate,
-          shiftFocus: _this3.shiftFocus,
-          switchTab: _this3.switchTab
-        }
-      }, children, /*#__PURE__*/React.createElement(Indicator, {
-        className: indicatorClassName,
-        tabUpdates: _this3.tabUpdates,
-        vertical: _this3.getProps().vertical
-      }))));
-    });
-  };
-  return Tabs;
+  _inherits(Tabs, _React$Component);
+  return _createClass(Tabs, [{
+    key: "render",
+    value: 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.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this3.theme = theme;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this3.setRootNode
+        }, _this3.props), /*#__PURE__*/React.createElement("div", {
+          "data-tid": TabsDataTids.root,
+          className: cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.rootSmall(_this3.theme), size === 'small'), styles.rootMedium(_this3.theme), size === 'medium'), styles.rootLarge(_this3.theme), size === 'large'), styles.vertical(), vertical)),
+          style: {
+            width: width
+          },
+          "aria-describedby": ariaDescribedby
+        }, /*#__PURE__*/React.createElement(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.createElement(Indicator, {
+          className: indicatorClassName,
+          tabUpdates: _this3.tabUpdates,
+          vertical: _this3.getProps().vertical
+        }))));
+      });
+    }
+  }]);
 }(React.Component), _Tabs.__KONTUR_REACT_UI__ = 'Tabs', _Tabs.displayName = 'Tabs', _Tabs.defaultProps = {
   vertical: false,
   size: 'large'

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

@@ -1 +1 @@
-{"version":3,"names":["React","globalObject","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","createPropsGetter","isInstanceOf","Indicator","styles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","_class","_Tabs","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","_this2","findIndex","x","id","newIndex","Math","max","min","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","_this$props","props","onValueChange","value","getTab","_ref","find","_ref$getNode","addTab","removeTab","filter","_inheritsLoose","_proto","prototype","render","_this3","_this$props2","width","children","indicatorClassName","ariaDescribedby","_this$getProps","vertical","size","createElement","Consumer","theme","_cx","_extends","rootNodeRef","setRootNode","className","rootSmall","rootMedium","rootLarge","style","Provider","activeTab","Component","__KONTUR_REACT_UI__","displayName"],"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  /** Идентификатор активного таба. Совпадает с `id` выбранного `<Tab />`. */\n  value: T;\n\n  /** Вызывается при смене активного таба. */\n  onValueChange?: (value: T) => void;\n\n  /** Располагает табы вертикально.\n   * @default false */\n  vertical?: boolean;\n\n  /** Ширина компонента. */\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](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-tabs-tab--doc). Группирует табы и позволяет управлять их состоянием.\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","globalObject","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","createPropsGetter","isInstanceOf","Indicator","styles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","_class","_Tabs","_React$Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","_this2","findIndex","x","id","newIndex","Math","max","min","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","_this$props","props","onValueChange","value","getTab","_ref","find","_ref$getNode","addTab","removeTab","filter","_inherits","_createClass","key","render","_this3","_this$props2","width","children","indicatorClassName","ariaDescribedby","_this$getProps","vertical","size","createElement","Consumer","theme","_extends","rootNodeRef","setRootNode","className","_defineProperty","rootSmall","rootMedium","rootLarge","style","Provider","activeTab","Component","__KONTUR_REACT_UI__","displayName"],"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  /** Идентификатор активного таба. Совпадает с `id` выбранного `<Tab />`. */\n  value: T;\n\n  /** Вызывается при смене активного таба. */\n  onValueChange?: (value: T) => void;\n\n  /** Располагает табы вертикально.\n   * @default false */\n  vertical?: boolean;\n\n  /** Ширина компонента. */\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](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-tabs-tab--doc). Группирует табы и позволяет управлять их состоянием.\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":[]}

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

@@ -1,4 +1,4 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { paddingX } from "../helpers";
@@ -13,9 +13,9 @@ export var styles = memoizeStyle({
     return tabsRoot(t, 'large');
   },
   vertical: function vertical() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      margin: 0;\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      margin: 0;\n    "])));
   }
 });
 function tabsRoot(t, size) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n    margin: 0 -", ";\n    padding: 0;\n    position: relative;\n  "])), paddingX(t, size));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: inline-block;\n    margin: 0 -", ";\n    padding: 0;\n    position: relative;\n  "])), paddingX(t, size));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","paddingX","styles","rootSmall","t","tabsRoot","rootMedium","rootLarge","vertical","_templateObject","_taggedTemplateLiteralLoose","size","_templateObject2"],"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":"sIAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;;AAI7D,SAASC,QAAQ,QAAQ,WAAW;;AAEpC,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;EACjCG,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,OAAOT,GAAG,CAAAU,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ;AACF,CAAC,CAAC;;AAEF,SAASL,QAAQA,CAACD,CAAQ,EAAEO,IAAc,EAAE;EAC1C,OAAOZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;EAEKT,QAAQ,CAACG,CAAC,EAAEO,IAAI,CAAC;;;;AAIlC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","paddingX","styles","rootSmall","t","tabsRoot","rootMedium","rootLarge","vertical","_templateObject","_taggedTemplateLiteral","size","_templateObject2"],"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":"4HAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;;AAI7D,SAASC,QAAQ,QAAQ,WAAW;;AAEpC,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;EACjCG,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,OAAOT,GAAG,CAAAU,eAAA,KAAAA,eAAA,GAAAC,sBAAA;;;EAGZ;AACF,CAAC,CAAC;;AAEF,SAASL,QAAQA,CAACD,CAAQ,EAAEO,IAAc,EAAE;EAC1C,OAAOZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA;;EAEKT,QAAQ,CAACG,CAAC,EAAEO,IAAI,CAAC;;;;AAIlC","ignoreList":[]}

package/components/Textarea/Textarea/Textarea.js

@@ -1,8 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
 var _excluded = ["width", "error", "warning", "size", "autoResize", "resize", "onCut", "onPaste", "maxRows", "onFocus", "selectAllOnFocus", "placeholder", "onValueChange", "showLengthCounter", "lengthCounter", "counterHelp", "extraRow", "disableAnimations", "disabled"];
 var _class, _Textarea;
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 import React from 'react';
 import throttle from 'lodash.throttle';
 import { globalObject } from '@skbkontur/global-object';
@@ -40,10 +49,11 @@ export var TextareaDataTids = {
 export var Textarea = rootNode(_class = withSize(_class = (_Textarea = /*#__PURE__*/function (_React$Component) {
   function Textarea() {
     var _this;
+    _classCallCheck(this, Textarea);
     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 = _callSuper(this, Textarea, [].concat(args));
     _this.clear = function () {
       if (_this.node) {
         _this.node.value = '';
@@ -75,7 +85,7 @@ export var Textarea = rootNode(_class = withSize(_class = (_Textarea = /*#__PURE
       if (!_this.node) {
         throw new Error('Cannot call "setSelectionRange" on unmounted Input');
       }
-      if (((_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.activeElement) !== _this.node) {
+      if (((_globalObject$documen = globalObject.document) === null || _globalObject$documen === void 0 ? void 0 : _globalObject$documen.activeElement) !== _this.node) {
         _this.focus();
       }
       _this.node.setSelectionRange(start, end);
@@ -91,17 +101,18 @@ export var Textarea = rootNode(_class = withSize(_class = (_Textarea = /*#__PURE
       }
     };
     _this.delaySelectAll = function () {
-      var _globalObject$request;
-      return _this.selectAllId = (_globalObject$request = globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(_this.selectAll)) != null ? _globalObject$request : null;
+      var _globalObject$request, _globalObject$request2;
+      return _this.selectAllId = (_globalObject$request = (_globalObject$request2 = globalObject.requestAnimationFrame) === null || _globalObject$request2 === void 0 ? void 0 : _globalObject$request2.call(globalObject, _this.selectAll)) !== null && _globalObject$request !== void 0 ? _globalObject$request : null;
     };
     _this.cancelDelayedSelectAll = function () {
       if (_this.selectAllId) {
-        globalObject.cancelAnimationFrame == null || globalObject.cancelAnimationFrame(_this.selectAllId);
+        var _globalObject$cancelA;
+        (_globalObject$cancelA = globalObject.cancelAnimationFrame) === null || _globalObject$cancelA === void 0 || _globalObject$cancelA.call(globalObject, _this.selectAllId);
         _this.selectAllId = null;
       }
     };
     _this.renderMain = function (props) {
-      var _cx, _ref, _textareaProps$maxLen, _cx2;
+      var _ref, _textareaProps$maxLen;
       var _props$width = props.width,
         width = _props$width === void 0 ? DEFAULT_WIDTH : _props$width,
         error = props.error,
@@ -122,14 +133,14 @@ export var Textarea = rootNode(_class = withSize(_class = (_Textarea = /*#__PURE
         extraRow = props.extraRow,
         disableAnimations = props.disableAnimations,
         disabled = props.disabled,
-        textareaProps = _objectWithoutPropertiesLoose(props, _excluded);
+        textareaProps = _objectWithoutProperties(props, _excluded);
       var isCounterVisible = _this.state.isCounterVisible;
       var rootProps = {
         style: {
           width: width
         }
       };
-      var textareaClassNames = cx(_this.getTextareaSizeClassName(), (_cx = {}, _cx[styles.textarea(_this.theme)] = true, _cx[styles.hovering(_this.theme)] = !error && !warning, _cx[styles.disabled(_this.theme)] = disabled, _cx[styles.error(_this.theme)] = !!error, _cx[styles.warning(_this.theme)] = !!warning, _cx[styles.disableAnimations()] = _this.isAnimationsDisabled(), _cx));
+      var textareaClassNames = cx(_this.getTextareaSizeClassName(), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.textarea(_this.theme), true), styles.hovering(_this.theme), !error && !warning), styles.disabled(_this.theme), disabled), styles.error(_this.theme), !!error), styles.warning(_this.theme), !!warning), styles.disableAnimations(), _this.isAnimationsDisabled()));
       var textareaStyle = {
         resize: autoResize ? 'none' : resize,
         textAlign: _this.props.align
@@ -158,7 +169,7 @@ export var Textarea = rootNode(_class = withSize(_class = (_Textarea = /*#__PURE
         size: _this.size,
         help: counterHelp,
         value: textareaProps.value,
-        length: (_ref = (_textareaProps$maxLen = textareaProps.maxLength) != null ? _textareaProps$maxLen : lengthCounter) != null ? _ref : 0,
+        length: (_ref = (_textareaProps$maxLen = textareaProps.maxLength) !== null && _textareaProps$maxLen !== void 0 ? _textareaProps$maxLen : lengthCounter) !== null && _ref !== void 0 ? _ref : 0,
         onCloseHelp: _this.handleCloseCounterHelp,
         ref: _this.refCounter
       });
@@ -173,7 +184,7 @@ export var Textarea = rootNode(_class = withSize(_class = (_Textarea = /*#__PURE
         React.createElement("label", _extends({
           "data-tid": TextareaDataTids.root
         }, rootProps, {
-          className: cx(_this.getRootSizeClassName(), (_cx2 = {}, _cx2[styles.root()] = true, _cx2))
+          className: cx(_this.getRootSizeClassName(), _defineProperty({}, styles.root(), true))
         }), placeholderPolyfill, /*#__PURE__*/
         React.createElement(ResizeDetector, {
           onResize: _this.reflowCounter,
@@ -305,108 +316,127 @@ export var Textarea = rootNode(_class = withSize(_class = (_Textarea = /*#__PURE
     };
     return _this;
   }
-  _inheritsLoose(Textarea, _React$Component);
-  var _proto = Textarea.prototype;
-  _proto.getRootSizeClassName = function getRootSizeClassName() {
-    switch (this.size) {
-      case 'large':
-        return styles.rootLarge(this.theme);
-      case 'medium':
-        return styles.rootMedium(this.theme);
-      case 'small':
-      default:
-        return styles.rootSmall(this.theme);
-    }
-  };
-  _proto.getTextareaSizeClassName = function getTextareaSizeClassName() {
-    switch (this.size) {
-      case 'large':
-        return styles.textareaLarge(this.theme);
-      case 'medium':
-        return styles.textareaMedium(this.theme);
-      case 'small':
-      default:
-        return styles.textareaSmall(this.theme);
+  _inherits(Textarea, _React$Component);
+  return _createClass(Textarea, [{
+    key: "getRootSizeClassName",
+    value: function getRootSizeClassName() {
+      switch (this.size) {
+        case 'large':
+          return styles.rootLarge(this.theme);
+        case 'medium':
+          return styles.rootMedium(this.theme);
+        case 'small':
+        default:
+          return styles.rootSmall(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);
+  }, {
+    key: "getTextareaSizeClassName",
+    value: function getTextareaSizeClassName() {
+      switch (this.size) {
+        case 'large':
+          return styles.textareaLarge(this.theme);
+        case 'medium':
+          return styles.textareaMedium(this.theme);
+        case 'small':
+        default:
+          return styles.textareaSmall(this.theme);
+      }
     }
-    if (this.node && this.props.showLengthCounter && this.textareaObserver) {
-      this.textareaObserver.observe(this.node, {
-        attributes: true
-      });
+  }, {
+    key: "getAutoResizeThrottleWait",
+    value: function getAutoResizeThrottleWait() {
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props; // NOTE: При отключении анимации остается эффект дергания при авто-ресайзе из-за троттлинга расчета высоты
+      // Поэтому выставляем таймаут троттла в ноль. Подробности - https://github.com/skbkontur/retail-ui/issues/2120
+      return this.isAnimationsDisabled(props) ? 0 : AUTORESIZE_THROTTLE_DEFAULT_WAIT;
     }
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    if (this.layoutEvents) {
-      this.layoutEvents.remove();
+  }, {
+    key: "isAnimationsDisabled",
+    value: function isAnimationsDisabled() {
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
+        disableAnimations = _ref3.disableAnimations,
+        extraRow = _ref3.extraRow;
+      return disableAnimations || !extraRow;
     }
-    if (this.props.showLengthCounter && this.textareaObserver) {
-      this.textareaObserver.disconnect();
+  }, {
+    key: "componentDidMount",
+    value: 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
+        });
+      }
     }
-    this.cancelDelayedSelectAll();
-  };
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (this.getAutoResizeThrottleWait() !== this.getAutoResizeThrottleWait(prevProps)) {
-      this.autoResize.cancel();
-      this.autoResize = throttle(this.autoResizeHandler, this.getAutoResizeThrottleWait());
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.layoutEvents) {
+        this.layoutEvents.remove();
+      }
+      if (this.props.showLengthCounter && this.textareaObserver) {
+        this.textareaObserver.disconnect();
+      }
+      this.cancelDelayedSelectAll();
     }
-    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();
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.getAutoResizeThrottleWait() !== this.getAutoResizeThrottleWait(prevProps)) {
+        this.autoResize.cancel();
+        this.autoResize = throttle(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.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
-      _this2.featureFlags = getFullReactUIFlagsContext(flags);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = theme;
-        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-          rootNodeRef: _this2.setRootNode
-        }, _this2.getProps()), _this2.renderMain);
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+        _this2.featureFlags = getFullReactUIFlagsContext(flags);
+        return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+          _this2.theme = theme;
+          return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+            rootNodeRef: _this2.setRootNode
+          }, _this2.getProps()), _this2.renderMain);
+        });
       });
-    });
-  } /** Программно устанавливает фокус на поле.
-    * @public
-    */;
-  _proto.focus = function focus() {
-    if (this.node) {
-      this.node.focus();
-    }
-  } /** Программно снимает фокус с поля.
-    * @public
-    */;
-  _proto.blur = function blur() {
-    if (this.node) {
-      this.node.blur();
+    } /** Программно устанавливает фокус на поле.
+      * @public
+      */
+  }, {
+    key: "focus",
+    value: function focus() {
+      if (this.node) {
+        this.node.focus();
+      }
+    } /** Программно снимает фокус с поля.
+      * @public
+      */
+  }, {
+    key: "blur",
+    value: function blur() {
+      if (this.node) {
+        this.node.blur();
+      }
+    } /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.
+      * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
+      * @public
+      */
+  }, {
+    key: "getNode",
+    value: function getNode() {
+      return this.node;
     }
-  } /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.
-    * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
-    * @public
-    */;
-  _proto.getNode = function getNode() {
-    return this.node;
-  };
-  return Textarea;
+  }]);
 }(React.Component), _Textarea.__KONTUR_REACT_UI__ = 'Textarea', _Textarea.displayName = 'Textarea', _Textarea.defaultProps = {
   rows: 3,
   maxRows: 15,