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

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

@@ -1,6 +1,7 @@
 import React, { AriaAttributes } from 'react';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
 import { TabsContextType } from './TabsContext';
 export interface TabIndicators {
     error: boolean;
@@ -12,82 +13,62 @@ export interface TabIndicators {
 export declare const TabDataTids: {
     readonly root: "Tab__root";
 };
-export declare type TabSize = 'small' | 'medium' | 'large';
-export interface TabProps<T extends string = string> extends CommonProps {
-    /**
-     * Tab content
-     */
-    children?: React.ReactNode;
+/**
+ * @deprecated use SizeProp
+ */
+export declare type TabSize = SizeProp;
+export interface TabProps<T extends string = string> extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {
     /**
-     * Component to use as a tab
+     * Позволяет передавать свой компонент, строку или функцию, которая заменит собой элемент используемый в компоненте по умолчанию. Реализует паттерн [render prop](https://www.patterns.dev/posts/render-props-pattern).
      */
     component?: React.ComponentType<any> | string;
     /**
-     * Link href
+     * `HTML`-аттрибут `href`.
      */
     href?: string;
     /**
-     * Tab identifier
+     * Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран.
      */
     id?: T;
     /**
-     * Click event
+     * `HTML`-событие `onclick`.
      */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
-     * Click event
+     * `HTML`-событие `onkeydown`.
      */
     onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
     /**
-     * Disabled indicator
+     * Переводит компонент в отключенное состояние.
      */
     disabled?: boolean;
     /**
-     * Состояние валидации при ошибке.
+     * Визуальное состояние ошибки.
      */
     error?: boolean;
     /**
-     * Состояние валидации при предупреждении.
+     * Визуальное состояние предупреждения.
      */
     warning?: boolean;
     /**
-     * Success indicator
+     * Визуальное состояние успеха.
      */
     success?: boolean;
     /**
-     * Primary indicator
+     * Визуальное состояние главного элемента.
      */
     primary?: boolean;
-    /**
-     * Style property
-     */
-    style?: React.CSSProperties;
-    /**
-     * Атрибут для указания id элемента(-ов), описывающих его
-     */
-    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
 export interface TabState {
     focusedByKeyboard: boolean;
 }
 declare type DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;
 /**
- * Tab element of Tabs component
- *
- * Can be used for creating custom tabs
- * ```js
- *
- * const RouteTab = (props) => (
- *   <Tab id={props.to} component={RouteLink} {...props}/>
- * )
- *
- * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>
- * ```
- *
- * Works only inside Tabs component, otherwise throws
+ * Вложенный элемент компонента `<Tabs />`.
  */
 export declare class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static contextType: React.Context<TabsContextType<any>>;
     context: TabsContextType;
     static defaultProps: DefaultProps;

package/cjs/components/Tabs/Tab.js

@@ -1,5 +1,6 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TabDataTids = exports.Tab = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TabDataTids = exports.Tab = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _invariant = _interopRequireDefault(require("invariant"));
+var _globalObject = require("@skbkontur/global-object");
 
 var _ResizeDetector = require("../../internal/ResizeDetector");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -12,7 +13,8 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
-var _SSRSafe = require("../../lib/SSRSafe");
+
+var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/getVisualStateDataAttributes");
 
 var _TabsContext = require("./TabsContext");
 var _Tab = require("./Tab.styles");var _class, _class2, _temp;
@@ -26,9 +28,12 @@ var _Tab = require("./Tab.styles");var _class, _class2, _temp;
 
 
 var TabDataTids = {
-  root: 'Tab__root' };exports.TabDataTids = TabDataTids;
+  root: 'Tab__root' };
 
 
+/**
+ * @deprecated use SizeProp
+ */exports.TabDataTids = TabDataTids;
 
 
 
@@ -91,7 +96,11 @@ var TabDataTids = {
 
 
 
+/**
+ * Вложенный элемент компонента `<Tabs />`.
+ */var
 
+Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab, _React$Component);
 
 
 
@@ -104,23 +113,7 @@ var TabDataTids = {
 
 
 
-/**
- * Tab element of Tabs component
- *
- * Can be used for creating custom tabs
- * ```js
- *
- * const RouteTab = (props) => (
- *   <Tab id={props.to} component={RouteLink} {...props}/>
- * )
- *
- * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>
- * ```
- *
- * Works only inside Tabs component, otherwise throws
- */var
 
-Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab, _React$Component);
 
 
 
@@ -129,6 +122,8 @@ Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
+  function Tab(props) {var _this;
+    _this = _React$Component.call(this, props) || this;_this.context = _this.context;_this.getProps = (0, _createPropsGetter.createPropsGetter)(Tab.defaultProps);_this.state = { focusedByKeyboard: false };_this.tabComponent = null;_this.
 
 
 
@@ -141,8 +136,6 @@ Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
-  function Tab(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this.context = _this.context;_this.getProps = (0, _createPropsGetter.createPropsGetter)(Tab.defaultProps);_this.state = { focusedByKeyboard: false };_this.tabComponent = null;_this.
 
 
 
@@ -175,6 +168,9 @@ Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
+    getUnderlyingNode = function () {return _this.tabComponent;};_this.
+
+
 
 
 
@@ -187,7 +183,6 @@ Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
-    getUnderlyingNode = function () {return _this.tabComponent;};_this.
 
 
 
@@ -307,7 +302,7 @@ Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
       // focus event fires before keyDown eventlistener
       // so we should check focusKeyPressed in async way
-      _SSRSafe.globalThat.requestAnimationFrame(function () {
+      _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {
         if (_keyListener.keyListener.isTabPressed || _keyListener.keyListener.isArrowPressed) {
           _this.setState({ focusedByKeyboard: true });
         }
@@ -320,4 +315,4 @@ Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
       }
 
       _this.setState({ focusedByKeyboard: false });
-    };(0, _invariant.default)(_this.context !== _TabsContext.TabsContextDefaultValue, 'Tab should be placed inside Tabs component');return _this;}var _proto = Tab.prototype;_proto.componentDidMount = function componentDidMount() {var id = this.getId();if (typeof id === 'string') {this.context.addTab(id, this.getTabInstance);}};_proto.componentDidUpdate = function componentDidUpdate() {if (this.context.activeTab === this.props.id) {this.context.notifyUpdate();}};_proto.componentWillUnmount = function componentWillUnmount() {var id = this.getId();if (typeof id === 'string') {this.context.removeTab(id);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getIndicators = function getIndicators() {return { error: Boolean(this.props.error), warning: Boolean(this.props.warning), success: Boolean(this.props.success), primary: Boolean(this.props.primary), disabled: Boolean(this.props.disabled) };};_proto.renderMain = function renderMain() {var _cx, _cx2;var _this$props = this.props,children = _this$props.children,disabled = _this$props.disabled,error = _this$props.error,warning = _this$props.warning,success = _this$props.success,primary = _this$props.primary,ariaDescribedby = _this$props['aria-describedby'];var _this$getProps2 = this.getProps(),Component = _this$getProps2.component,href = _this$getProps2.href;var isActive = false;var isVertical = false;var id = this.getId();if (typeof id === 'string') {isActive = this.context.activeTab === this.getId();isVertical = this.context.vertical;}var orientationStyles = isVertical ? _Tab.verticalStyles : _Tab.horizontalStyles;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(Component, { "data-tid": TabDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_Tab.styles.rootSmall(this.theme)] = this.context.size === 'small', _cx[_Tab.styles.rootMedium(this.theme)] = this.context.size === 'medium', _cx[_Tab.styles.rootLarge(this.theme)] = this.context.size === 'large', _cx[_Tab.styles.verticalSmall(this.theme)] = !!isVertical && this.context.size === 'small', _cx[_Tab.styles.verticalMedium(this.theme)] = !!isVertical && this.context.size === 'medium', _cx[_Tab.styles.verticalLarge(this.theme)] = !!isVertical && this.context.size === 'large', _cx[orientationStyles.primary(this.theme)] = !!primary, _cx[orientationStyles.success(this.theme)] = !!success, _cx[orientationStyles.warning(this.theme)] = !!warning, _cx[orientationStyles.error(this.theme)] = !!error, _cx[_Tab.styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[_Tab.styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)), onBlur: this.handleBlur, onClick: this.switchTab, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, tabIndex: disabled ? -1 : 0, ref: (0, _utils.isFunctionalComponent)(Component) ? null : this.refTabComponent, href: href, "aria-describedby": ariaDescribedby }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.context.notifyUpdate }, children), this.state.focusedByKeyboard && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tab.globalClasses.focus, (_cx2 = {}, _cx2[_Tab.styles.focusSmall(this.theme)] = this.context.size === 'small', _cx2[_Tab.styles.focusMedium(this.theme)] = this.context.size === 'medium', _cx2[_Tab.styles.focusLarge(this.theme)] = this.context.size === 'large', _cx2)) })));};return Tab;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.contextType = _TabsContext.TabsContext, _class2.defaultProps = { component: 'a', href: '' }, _temp)) || _class;exports.Tab = Tab;
+    };(0, _invariant.default)(_this.context !== _TabsContext.TabsContextDefaultValue, 'Tab should be placed inside Tabs component');return _this;}var _proto = Tab.prototype;_proto.componentDidMount = function componentDidMount() {var id = this.getId();if (typeof id === 'string') {this.context.addTab(id, this.getTabInstance);}};_proto.componentDidUpdate = function componentDidUpdate() {if (this.context.activeTab === this.props.id) {this.context.notifyUpdate();}};_proto.componentWillUnmount = function componentWillUnmount() {var id = this.getId();if (typeof id === 'string') {this.context.removeTab(id);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getIndicators = function getIndicators() {return { error: Boolean(this.props.error), warning: Boolean(this.props.warning), success: Boolean(this.props.success), primary: Boolean(this.props.primary), disabled: Boolean(this.props.disabled) };};_proto.renderMain = function renderMain() {var _cx, _cx2;var _this$props = this.props,children = _this$props.children,disabled = _this$props.disabled,error = _this$props.error,warning = _this$props.warning,success = _this$props.success,primary = _this$props.primary,ariaDescribedby = _this$props['aria-describedby'],ariaLabel = _this$props['aria-label'];var _this$getProps2 = this.getProps(),Component = _this$getProps2.component,href = _this$getProps2.href;var isActive = false;var isVertical = false;var id = this.getId();if (typeof id === 'string') {isActive = this.context.activeTab === this.getId();isVertical = this.context.vertical;}var orientationStyles = isVertical ? _Tab.verticalStyles : _Tab.horizontalStyles;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ active: isActive, disabled: disabled }), this.props), /*#__PURE__*/_react.default.createElement(Component, { "data-tid": TabDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_Tab.styles.rootSmall(this.theme)] = this.context.size === 'small', _cx[_Tab.styles.rootMedium(this.theme)] = this.context.size === 'medium', _cx[_Tab.styles.rootLarge(this.theme)] = this.context.size === 'large', _cx[_Tab.styles.verticalSmall(this.theme)] = !!isVertical && this.context.size === 'small', _cx[_Tab.styles.verticalMedium(this.theme)] = !!isVertical && this.context.size === 'medium', _cx[_Tab.styles.verticalLarge(this.theme)] = !!isVertical && this.context.size === 'large', _cx[orientationStyles.primary(this.theme)] = !!primary, _cx[orientationStyles.success(this.theme)] = !!success, _cx[orientationStyles.warning(this.theme)] = !!warning, _cx[orientationStyles.error(this.theme)] = !!error, _cx[_Tab.styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[_Tab.styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)), onBlur: this.handleBlur, onClick: this.switchTab, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, tabIndex: disabled ? -1 : 0, ref: (0, _utils.isFunctionalComponent)(Component) ? null : this.refTabComponent, href: href, "aria-describedby": ariaDescribedby, "aria-label": ariaLabel }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.context.notifyUpdate }, children), this.state.focusedByKeyboard && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tab.globalClasses.focus, (_cx2 = {}, _cx2[_Tab.styles.focusSmall(this.theme)] = this.context.size === 'small', _cx2[_Tab.styles.focusMedium(this.theme)] = this.context.size === 'medium', _cx2[_Tab.styles.focusLarge(this.theme)] = this.context.size === 'large', _cx2)) })));};return Tab;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.displayName = 'Tab', _class2.contextType = _TabsContext.TabsContext, _class2.defaultProps = { component: 'a', href: '' }, _temp)) || _class;exports.Tab = Tab;

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

@@ -1 +1 @@
-{"version":3,"sources":["Tab.tsx"],"names":["TabDataTids","root","Tab","rootNode","props","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","globalThat","requestAnimationFrame","keyListener","isTabPressed","isArrowPressed","setState","handleBlur","TabsContextDefaultValue","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","ariaDescribedby","Component","isActive","isVertical","vertical","orientationStyles","verticalStyles","horizontalStyles","setRootNode","styles","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","active","globalClasses","focus","focusSmall","focusMedium","focusLarge","React","__KONTUR_REACT_UI__","contextType","TabsContext"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { globalThat } from '../../lib/SSRSafe';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport const TabDataTids = {\n  root: 'Tab__root',\n} as const;\n\nexport type TabSize = 'small' | 'medium' | 'large';\n\nexport interface TabProps<T extends string = string> extends CommonProps {\n  /**\n   * Tab content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Component to use as a tab\n   */\n  component?: React.ComponentType<any> | string;\n\n  /**\n   * Link href\n   */\n  href?: string;\n\n  /**\n   * Tab identifier\n   */\n  id?: T;\n\n  /**\n   * Click event\n   */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * Click event\n   */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /**\n   * Disabled indicator\n   */\n  disabled?: boolean;\n\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n\n  /**\n   * Success indicator\n   */\n  success?: boolean;\n\n  /**\n   * Primary indicator\n   */\n  primary?: boolean;\n\n  /**\n   * Style property\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;\n\n/**\n * Tab element of Tabs component\n *\n * Can be used for creating custom tabs\n * ```js\n *\n * const RouteTab = (props) => (\n *   <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n *\n * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n *\n * Works only inside Tabs component, otherwise throws\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n  public static __KONTUR_REACT_UI__ = 'Tab';\n\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public static defaultProps: DefaultProps = {\n    component: 'a',\n    href: '',\n  };\n\n  private getProps = createPropsGetter(Tab.defaultProps);\n\n  public state: TabState = {\n    focusedByKeyboard: false,\n  };\n\n  private theme!: Theme;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: TabProps<T>) {\n    super(props);\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n  }\n\n  public componentDidMount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.addTab(id, this.getTabInstance);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.context.activeTab === this.props.id) {\n      this.context.notifyUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.removeTab(id);\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getIndicators() {\n    return {\n      error: Boolean(this.props.error),\n      warning: Boolean(this.props.warning),\n      success: Boolean(this.props.success),\n      primary: Boolean(this.props.primary),\n      disabled: Boolean(this.props.disabled),\n    };\n  }\n\n  public getUnderlyingNode = () => this.tabComponent;\n\n  private renderMain() {\n    const { children, disabled, error, warning, success, primary, 'aria-describedby': ariaDescribedby } = this.props;\n    const { component: Component, href } = this.getProps();\n\n    let isActive = false;\n    let isVertical = false;\n\n    const id = this.getId();\n    if (typeof id === 'string') {\n      isActive = this.context.activeTab === this.getId();\n      isVertical = this.context.vertical;\n    }\n    const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Component\n          data-tid={TabDataTids.root}\n          className={cx({\n            [styles.rootSmall(this.theme)]: this.context.size === 'small',\n            [styles.rootMedium(this.theme)]: this.context.size === 'medium',\n            [styles.rootLarge(this.theme)]: this.context.size === 'large',\n            [styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n            [styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n            [styles.verticalLarge(this.theme)]: !!isVertical && this.context.size === 'large',\n            [orientationStyles.primary(this.theme)]: !!primary,\n            [orientationStyles.success(this.theme)]: !!success,\n            [orientationStyles.warning(this.theme)]: !!warning,\n            [orientationStyles.error(this.theme)]: !!error,\n            [styles.active()]: !!isActive,\n            [orientationStyles.active(this.theme)]: !!isActive,\n            [styles.disabled(this.theme)]: !!disabled,\n            [orientationStyles.disabled()]: !!disabled,\n          })}\n          onBlur={this.handleBlur}\n          onClick={this.switchTab}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={disabled ? -1 : 0}\n          ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n          href={href}\n          aria-describedby={ariaDescribedby}\n        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && (\n            <div\n              className={cx(globalClasses.focus, {\n                [styles.focusSmall(this.theme)]: this.context.size === 'small',\n                [styles.focusMedium(this.theme)]: this.context.size === 'medium',\n                [styles.focusLarge(this.theme)]: this.context.size === 'large',\n              })}\n            />\n          )}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.getProps().href;\n\n  private refTabComponent = (instance: React.ReactElement<any>) => {\n    this.tabComponent = instance;\n  };\n\n  private getTabInstance = () => this;\n\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const { href, component } = this.getProps();\n\n    const id = this.props.id || href;\n    if (this.props.onClick) {\n      this.props.onClick(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n    }\n    if (typeof id === 'string') {\n      this.context.switchTab(id);\n    }\n    if (component === 'a' && !href) {\n      event.preventDefault();\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n      if (e.defaultPrevented) {\n        return;\n      }\n    }\n    const id = this.getId();\n    if (typeof id !== 'string') {\n      return;\n    }\n    if (!isKeyArrow(e)) {\n      return;\n    }\n    e.preventDefault();\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n    this.context.shiftFocus(id, delta);\n  };\n\n  private handleFocus = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    // focus event fires before keyDown eventlistener\n    // so we should check focusKeyPressed in async way\n    globalThat.requestAnimationFrame(() => {\n      if (keyListener.isTabPressed || keyListener.isArrowPressed) {\n        this.setState({ focusedByKeyboard: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"]}
+{"version":3,"sources":["Tab.tsx"],"names":["TabDataTids","root","Tab","rootNode","props","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","isArrowPressed","setState","handleBlur","TabsContextDefaultValue","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","ariaDescribedby","ariaLabel","Component","isActive","isVertical","vertical","orientationStyles","verticalStyles","horizontalStyles","setRootNode","active","styles","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","globalClasses","focus","focusSmall","focusMedium","focusLarge","React","__KONTUR_REACT_UI__","displayName","contextType","TabsContext"],"mappings":"6cAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA,mC;;;;;;;;;;AAUO,IAAMA,WAAW,GAAG;AACzBC,EAAAA,IAAI,EAAE,WADmB,EAApB;;;AAIP;AACA;AACA,G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA;AACA;AACA,G;;AAEaC,G,OADZC,kB;;;;;;;;;;;;;;;;;;;;;;AAuBC,eAAYC,KAAZ,EAAgC;AAC9B,wCAAMA,KAAN,UAD8B,MAjBzBC,OAiByB,GAjBE,MAAKA,OAiBP,OAVxBC,QAUwB,GAVb,0CAAkBJ,GAAG,CAACK,YAAtB,CAUa,OARzBC,KAQyB,GARP,EACvBC,iBAAiB,EAAE,KADI,EAQO,OAHxBC,YAGwB,GAH6B,IAG7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CzBC,IAAAA,iBA9CyB,GA8CL,oBAAM,MAAKD,YAAX,EA9CK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwHxBE,IAAAA,KAxHwB,GAwHhB,oBAAM,MAAKR,KAAL,CAAWS,EAAX,IAAiB,MAAKP,QAAL,GAAgBQ,IAAvC,EAxHgB;;AA0HxBC,IAAAA,eA1HwB,GA0HN,UAACC,QAAD,EAAuC;AAC/D,YAAKN,YAAL,GAAoBM,QAApB;AACD,KA5H+B;;AA8HxBC,IAAAA,cA9HwB,GA8HP,iEA9HO;;AAgIxBC,IAAAA,SAhIwB,GAgIZ,UAACC,KAAD,EAA0C;AAC5D,UAAI,MAAKf,KAAL,CAAWgB,QAAf,EAAyB;AACvBD,QAAAA,KAAK,CAACE,cAAN;AACA;AACD;AACD,2BAA4B,MAAKf,QAAL,EAA5B,CAAQQ,IAAR,kBAAQA,IAAR,CAAcQ,SAAd,kBAAcA,SAAd;;AAEA,UAAMT,EAAE,GAAG,MAAKT,KAAL,CAAWS,EAAX,IAAiBC,IAA5B;AACA,UAAI,MAAKV,KAAL,CAAWmB,OAAf,EAAwB;AACtB,cAAKnB,KAAL,CAAWmB,OAAX,CAAmBJ,KAAnB;AACA,YAAIA,KAAK,CAACK,gBAAV,EAA4B;AAC1B;AACD;AACF;AACD,UAAI,OAAOX,EAAP,KAAc,QAAlB,EAA4B;AAC1B,cAAKR,OAAL,CAAaa,SAAb,CAAuBL,EAAvB;AACD;AACD,UAAIS,SAAS,KAAK,GAAd,IAAqB,CAACR,IAA1B,EAAgC;AAC9BK,QAAAA,KAAK,CAACE,cAAN;AACD;AACF,KApJ+B;;AAsJxBI,IAAAA,aAtJwB,GAsJR,UAACC,CAAD,EAAyC;AAC/D,UAAI,MAAKtB,KAAL,CAAWgB,QAAf,EAAyB;AACvB;AACD;;AAED,UAAI,MAAKhB,KAAL,CAAWuB,SAAf,EAA0B;AACxB,cAAKvB,KAAL,CAAWuB,SAAX,CAAqBD,CAArB;AACA,YAAIA,CAAC,CAACF,gBAAN,EAAwB;AACtB;AACD;AACF;AACD,UAAMX,EAAE,GAAG,MAAKD,KAAL,EAAX;AACA,UAAI,OAAOC,EAAP,KAAc,QAAlB,EAA4B;AAC1B;AACD;AACD,UAAI,CAAC,6BAAWa,CAAX,CAAL,EAAoB;AAClB;AACD;AACDA,MAAAA,CAAC,CAACL,cAAF;AACA,UAAMO,KAAK,GAAG,iCAAeF,CAAf,KAAqB,+BAAaA,CAAb,CAArB,GAAuC,CAAC,CAAxC,GAA4C,CAA1D;AACA,YAAKrB,OAAL,CAAawB,UAAb,CAAwBhB,EAAxB,EAA4Be,KAA5B;AACD,KA3K+B;;AA6KxBE,IAAAA,WA7KwB,GA6KV,YAAM;AAC1B,UAAI,MAAK1B,KAAL,CAAWgB,QAAf,EAAyB;AACvB;AACD;;AAED;AACA;AACAW,iCAAaC,qBAAb,+CAAaA,qBAAb,CAAqC,YAAM;AACzC,YAAIC,yBAAYC,YAAZ,IAA4BD,yBAAYE,cAA5C,EAA4D;AAC1D,gBAAKC,QAAL,CAAc,EAAE3B,iBAAiB,EAAE,IAArB,EAAd;AACD;AACF,OAJD;AAKD,KAzL+B;;AA2LxB4B,IAAAA,UA3LwB,GA2LX,YAAM;AACzB,UAAI,MAAKjC,KAAL,CAAWgB,QAAf,EAAyB;AACvB;AACD;;AAED,YAAKgB,QAAL,CAAc,EAAE3B,iBAAiB,EAAE,KAArB,EAAd;AACD,KAjM+B,CAE9B,wBAAU,MAAKJ,OAAL,KAAiBiC,oCAA3B,EAAoD,4CAApD,EAF8B,aAG/B,C,kCAEMC,iB,GAAP,6BAA2B,CACzB,IAAM1B,EAAE,GAAG,KAAKD,KAAL,EAAX,CACA,IAAI,OAAOC,EAAP,KAAc,QAAlB,EAA4B,CAC1B,KAAKR,OAAL,CAAamC,MAAb,CAAoB3B,EAApB,EAAwB,KAAKI,cAA7B,EACD,CACF,C,QAEMwB,kB,GAAP,8BAA4B,CAC1B,IAAI,KAAKpC,OAAL,CAAaqC,SAAb,KAA2B,KAAKtC,KAAL,CAAWS,EAA1C,EAA8C,CAC5C,KAAKR,OAAL,CAAasC,YAAb,GACD,CACF,C,QAEMC,oB,GAAP,gCAA8B,CAC5B,IAAM/B,EAAE,GAAG,KAAKD,KAAL,EAAX,CACA,IAAI,OAAOC,EAAP,KAAc,QAAlB,EAA4B,CAC1B,KAAKR,OAAL,CAAawC,SAAb,CAAuBhC,EAAvB,EACD,CACF,C,QAEMiC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEMC,a,GAAP,yBAAuB,CACrB,OAAO,EACLC,KAAK,EAAEC,OAAO,CAAC,KAAK/C,KAAL,CAAW8C,KAAZ,CADT,EAELE,OAAO,EAAED,OAAO,CAAC,KAAK/C,KAAL,CAAWgD,OAAZ,CAFX,EAGLC,OAAO,EAAEF,OAAO,CAAC,KAAK/C,KAAL,CAAWiD,OAAZ,CAHX,EAILC,OAAO,EAAEH,OAAO,CAAC,KAAK/C,KAAL,CAAWkD,OAAZ,CAJX,EAKLlC,QAAQ,EAAE+B,OAAO,CAAC,KAAK/C,KAAL,CAAWgB,QAAZ,CALZ,EAAP,CAOD,C,QAIO4B,U,GAAR,sBAAqB,eACnB,kBASI,KAAK5C,KATT,CACEmD,QADF,eACEA,QADF,CAEEnC,QAFF,eAEEA,QAFF,CAGE8B,KAHF,eAGEA,KAHF,CAIEE,OAJF,eAIEA,OAJF,CAKEC,OALF,eAKEA,OALF,CAMEC,OANF,eAMEA,OANF,CAOsBE,eAPtB,eAOE,kBAPF,EAQgBC,SARhB,eAQE,YARF,EAUA,sBAAuC,KAAKnD,QAAL,EAAvC,CAAmBoD,SAAnB,mBAAQpC,SAAR,CAA8BR,IAA9B,mBAA8BA,IAA9B,CAEA,IAAI6C,QAAQ,GAAG,KAAf,CACA,IAAIC,UAAU,GAAG,KAAjB,CAEA,IAAM/C,EAAE,GAAG,KAAKD,KAAL,EAAX,CACA,IAAI,OAAOC,EAAP,KAAc,QAAlB,EAA4B,CAC1B8C,QAAQ,GAAG,KAAKtD,OAAL,CAAaqC,SAAb,KAA2B,KAAK9B,KAAL,EAAtC,CACAgD,UAAU,GAAG,KAAKvD,OAAL,CAAawD,QAA1B,CACD,CACD,IAAMC,iBAAiB,GAAGF,UAAU,GAAGG,mBAAH,GAAoBC,qBAAxD,CAEA,oBACE,6BAAC,4BAAD,2BACE,WAAW,EAAE,KAAKC,WADpB,IAEM,gEAA6B,EAAEC,MAAM,EAAEP,QAAV,EAAoBvC,QAAQ,EAARA,QAApB,EAA7B,CAFN,EAGM,KAAKhB,KAHX,gBAKE,6BAAC,SAAD,IACE,YAAUJ,WAAW,CAACC,IADxB,EAEE,SAAS,EAAE,gCACRkE,YAAOC,SAAP,CAAiB,KAAKrB,KAAtB,CADQ,IACuB,KAAK1C,OAAL,CAAagE,IAAb,KAAsB,OAD7C,MAERF,YAAOG,UAAP,CAAkB,KAAKvB,KAAvB,CAFQ,IAEwB,KAAK1C,OAAL,CAAagE,IAAb,KAAsB,QAF9C,MAGRF,YAAOI,SAAP,CAAiB,KAAKxB,KAAtB,CAHQ,IAGuB,KAAK1C,OAAL,CAAagE,IAAb,KAAsB,OAH7C,MAIRF,YAAOK,aAAP,CAAqB,KAAKzB,KAA1B,CAJQ,IAI2B,CAAC,CAACa,UAAF,IAAgB,KAAKvD,OAAL,CAAagE,IAAb,KAAsB,OAJjE,MAKRF,YAAOM,cAAP,CAAsB,KAAK1B,KAA3B,CALQ,IAK4B,CAAC,CAACa,UAAF,IAAgB,KAAKvD,OAAL,CAAagE,IAAb,KAAsB,QALlE,MAMRF,YAAOO,aAAP,CAAqB,KAAK3B,KAA1B,CANQ,IAM2B,CAAC,CAACa,UAAF,IAAgB,KAAKvD,OAAL,CAAagE,IAAb,KAAsB,OANjE,MAORP,iBAAiB,CAACR,OAAlB,CAA0B,KAAKP,KAA/B,CAPQ,IAOgC,CAAC,CAACO,OAPlC,MAQRQ,iBAAiB,CAACT,OAAlB,CAA0B,KAAKN,KAA/B,CARQ,IAQgC,CAAC,CAACM,OARlC,MASRS,iBAAiB,CAACV,OAAlB,CAA0B,KAAKL,KAA/B,CATQ,IASgC,CAAC,CAACK,OATlC,MAURU,iBAAiB,CAACZ,KAAlB,CAAwB,KAAKH,KAA7B,CAVQ,IAU8B,CAAC,CAACG,KAVhC,MAWRiB,YAAOD,MAAP,EAXQ,IAWU,CAAC,CAACP,QAXZ,MAYRG,iBAAiB,CAACI,MAAlB,CAAyB,KAAKnB,KAA9B,CAZQ,IAY+B,CAAC,CAACY,QAZjC,MAaRQ,YAAO/C,QAAP,CAAgB,KAAK2B,KAArB,CAbQ,IAasB,CAAC,CAAC3B,QAbxB,MAcR0C,iBAAiB,CAAC1C,QAAlB,EAdQ,IAcuB,CAAC,CAACA,QAdzB,OAFb,EAkBE,MAAM,EAAE,KAAKiB,UAlBf,EAmBE,OAAO,EAAE,KAAKnB,SAnBhB,EAoBE,OAAO,EAAE,KAAKY,WApBhB,EAqBE,SAAS,EAAE,KAAKL,aArBlB,EAsBE,QAAQ,EAAEL,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAtB5B,EAuBE,GAAG,EAAE,kCAAsBsC,SAAtB,IAAmC,IAAnC,GAA0C,KAAK3C,eAvBtD,EAwBE,IAAI,EAAED,IAxBR,EAyBE,oBAAkB0C,eAzBpB,EA0BE,cAAYC,SA1Bd,iBA4BE,6BAAC,8BAAD,IAAgB,QAAQ,EAAE,KAAKpD,OAAL,CAAasC,YAAvC,IAAsDY,QAAtD,CA5BF,EA6BG,KAAK/C,KAAL,CAAWC,iBAAX,iBACC,sCACE,SAAS,EAAE,iBAAGkE,mBAAcC,KAAjB,mBACRT,YAAOU,UAAP,CAAkB,KAAK9B,KAAvB,CADQ,IACwB,KAAK1C,OAAL,CAAagE,IAAb,KAAsB,OAD9C,OAERF,YAAOW,WAAP,CAAmB,KAAK/B,KAAxB,CAFQ,IAEyB,KAAK1C,OAAL,CAAagE,IAAb,KAAsB,QAF/C,OAGRF,YAAOY,UAAP,CAAkB,KAAKhC,KAAvB,CAHQ,IAGwB,KAAK1C,OAAL,CAAagE,IAAb,KAAsB,OAH9C,QADb,GA9BJ,CALF,CADF,CA+CD,C,cA5IiDW,eAAMtB,S,WAC1CuB,mB,GAAsB,K,UACtBC,W,GAAc,K,UAEdC,W,GAAcC,wB,UAGd7E,Y,GAA6B,EACzCe,SAAS,EAAE,GAD8B,EAEzCR,IAAI,EAAE,EAFmC,E","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { TabsContext, TabsContextDefaultValue, TabsContextType } from './TabsContext';\nimport { globalClasses, horizontalStyles, styles, verticalStyles } from './Tab.styles';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport const TabDataTids = {\n  root: 'Tab__root',\n} as const;\n\n/**\n * @deprecated use SizeProp\n */\nexport type TabSize = SizeProp;\n\nexport interface TabProps<T extends string = string>\n  extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>,\n    CommonProps {\n  /**\n   * Позволяет передавать свой компонент, строку или функцию, которая заменит собой элемент используемый в компоненте по умолчанию. Реализует паттерн [render prop](https://www.patterns.dev/posts/render-props-pattern).\n   */\n  component?: React.ComponentType<any> | string;\n\n  /**\n   * `HTML`-аттрибут `href`.\n   */\n  href?: string;\n\n  /**\n   * Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран.\n   */\n  id?: T;\n\n  /**\n   * `HTML`-событие `onclick`.\n   */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * `HTML`-событие `onkeydown`.\n   */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /**\n   * Переводит компонент в отключенное состояние.\n   */\n  disabled?: boolean;\n\n  /**\n   * Визуальное состояние ошибки.\n   */\n  error?: boolean;\n\n  /**\n   * Визуальное состояние предупреждения.\n   */\n  warning?: boolean;\n\n  /**\n   * Визуальное состояние успеха.\n   */\n  success?: boolean;\n\n  /**\n   * Визуальное состояние главного элемента.\n   */\n  primary?: boolean;\n}\n\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;\n\n/**\n * Вложенный элемент компонента `<Tabs />`.\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n  public static __KONTUR_REACT_UI__ = 'Tab';\n  public static displayName = 'Tab';\n\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public static defaultProps: DefaultProps = {\n    component: 'a',\n    href: '',\n  };\n\n  private getProps = createPropsGetter(Tab.defaultProps);\n\n  public state: TabState = {\n    focusedByKeyboard: false,\n  };\n\n  private theme!: Theme;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: TabProps<T>) {\n    super(props);\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n  }\n\n  public componentDidMount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.addTab(id, this.getTabInstance);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.context.activeTab === this.props.id) {\n      this.context.notifyUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.removeTab(id);\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getIndicators() {\n    return {\n      error: Boolean(this.props.error),\n      warning: Boolean(this.props.warning),\n      success: Boolean(this.props.success),\n      primary: Boolean(this.props.primary),\n      disabled: Boolean(this.props.disabled),\n    };\n  }\n\n  public getUnderlyingNode = () => this.tabComponent;\n\n  private renderMain() {\n    const {\n      children,\n      disabled,\n      error,\n      warning,\n      success,\n      primary,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n    } = this.props;\n    const { component: Component, href } = this.getProps();\n\n    let isActive = false;\n    let isVertical = false;\n\n    const id = this.getId();\n    if (typeof id === 'string') {\n      isActive = this.context.activeTab === this.getId();\n      isVertical = this.context.vertical;\n    }\n    const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n    return (\n      <CommonWrapper\n        rootNodeRef={this.setRootNode}\n        {...getVisualStateDataAttributes({ active: isActive, disabled })}\n        {...this.props}\n      >\n        <Component\n          data-tid={TabDataTids.root}\n          className={cx({\n            [styles.rootSmall(this.theme)]: this.context.size === 'small',\n            [styles.rootMedium(this.theme)]: this.context.size === 'medium',\n            [styles.rootLarge(this.theme)]: this.context.size === 'large',\n            [styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n            [styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n            [styles.verticalLarge(this.theme)]: !!isVertical && this.context.size === 'large',\n            [orientationStyles.primary(this.theme)]: !!primary,\n            [orientationStyles.success(this.theme)]: !!success,\n            [orientationStyles.warning(this.theme)]: !!warning,\n            [orientationStyles.error(this.theme)]: !!error,\n            [styles.active()]: !!isActive,\n            [orientationStyles.active(this.theme)]: !!isActive,\n            [styles.disabled(this.theme)]: !!disabled,\n            [orientationStyles.disabled()]: !!disabled,\n          })}\n          onBlur={this.handleBlur}\n          onClick={this.switchTab}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={disabled ? -1 : 0}\n          ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n          href={href}\n          aria-describedby={ariaDescribedby}\n          aria-label={ariaLabel}\n        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && (\n            <div\n              className={cx(globalClasses.focus, {\n                [styles.focusSmall(this.theme)]: this.context.size === 'small',\n                [styles.focusMedium(this.theme)]: this.context.size === 'medium',\n                [styles.focusLarge(this.theme)]: this.context.size === 'large',\n              })}\n            />\n          )}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.getProps().href;\n\n  private refTabComponent = (instance: React.ReactElement<any>) => {\n    this.tabComponent = instance;\n  };\n\n  private getTabInstance = () => this;\n\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const { href, component } = this.getProps();\n\n    const id = this.props.id || href;\n    if (this.props.onClick) {\n      this.props.onClick(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n    }\n    if (typeof id === 'string') {\n      this.context.switchTab(id);\n    }\n    if (component === 'a' && !href) {\n      event.preventDefault();\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n      if (e.defaultPrevented) {\n        return;\n      }\n    }\n    const id = this.getId();\n    if (typeof id !== 'string') {\n      return;\n    }\n    if (!isKeyArrow(e)) {\n      return;\n    }\n    e.preventDefault();\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n    this.context.shiftFocus(id, delta);\n  };\n\n  private handleFocus = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    // focus event fires before keyDown eventlistener\n    // so we should check focusKeyPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed || keyListener.isArrowPressed) {\n        this.setState({ focusedByKeyboard: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"]}

package/cjs/components/Tabs/Tab.md

@@ -0,0 +1,71 @@
+У компонента `<Tabs.Tab />` есть несколько визуальных состояний, в которых компонент может находиться: `primary`, `success`, `warning` и `error`. Чтобы перевести контрол в нужное состояние передайте компоненту булевый проп с соответсвующим названием.
+
+Используя переменные `tabColorPrimary`, `tabColorSuccess`, `tabColorWarning` и `tabColorError` можно изменить активный цвет состояния, а библиотека автоматически подберёт цвет подчёркивания при наведении.
+```jsx harmony
+import { ThemeContext, ThemeFactory, Button, Tabs } from '@skbkontur/react-ui';
+
+const getRandomColor = () => '#' + Math.random().toString(16).substr(-6);
+const updateColors = () => {
+  return {
+    tabColorPrimary: getRandomColor(),
+    tabColorSuccess: getRandomColor(),
+    tabColorWarning: getRandomColor(),
+    tabColorError: getRandomColor(),
+  }
+};
+
+const [activeBase, setActiveBase] = React.useState('error');
+const [activeRandom, setActiveRandom] = React.useState('error');
+const [colors, setColors] = React.useState(updateColors());
+
+<>
+  <p style={{ fontSize: '17px' }}>C цветами по умолчанию</p>
+  <Tabs value={activeBase} onValueChange={setActiveBase}>
+    <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+    <Tabs.Tab success id="success">Success</Tabs.Tab>
+    <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+    <Tabs.Tab error id="error">Error</Tabs.Tab>
+  </Tabs>
+
+  <p style={{ fontSize: '17px' }}>Со случайным основным цветом</p>
+  <div style={{ display: 'inline-flex', flexDirection: 'column', justifyContent: 'space-between', height: '100px' }}>
+    <ThemeContext.Consumer>
+      {(theme) => {
+        return (
+          <ThemeContext.Provider
+            value={ThemeFactory.create(colors,theme)}
+          >
+            <Tabs value={activeRandom} onValueChange={setActiveRandom}>
+            <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+            <Tabs.Tab success id="success">Success</Tabs.Tab>
+            <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+            <Tabs.Tab error id="error">Error</Tabs.Tab>
+          </Tabs>
+          </ThemeContext.Provider>
+        );
+      }}
+    </ThemeContext.Consumer>
+    <Button onClick={() => setColors(updateColors)}>Получить новый набор цветов</Button>
+  </div>
+</>
+```
+
+С помощью пропа `component` можно изменять корневой элемент `<Tab />`.
+
+Проп может принимать: компоненты, функции и строки.
+```jsx harmony
+import { Tabs } from '@skbkontur/react-ui';
+
+const [active, setActive] = React.useState('/fuji');
+
+const NavLink = props => <a {...props} />;
+
+<Tabs value={active} onValueChange={setActive}>
+  {/** Кастомный компонент **/}
+  <Tabs.Tab  component={(props) => <NavLink {...props} />} id="/fuji">🌋 Fuji</Tabs.Tab>
+  {/** Функция **/}
+  <Tabs.Tab component={(props) => <a {...props} />} id="/tahat">⛰ Tahat</Tabs.Tab>
+  {/** Строка **/}
+  <Tabs.Tab component="a" id="/alps">🗻 Alps</Tabs.Tab>
+</Tabs>;
+```

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

@@ -1,10 +1,10 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.verticalStyles = exports.styles = exports.horizontalStyles = exports.globalClasses = 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;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.verticalStyles = exports.styles = exports.horizontalStyles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 var _DimensionFunctions = require("../../lib/styles/DimensionFunctions");
 var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));
 
 
 
-var _helpers = require("./helpers");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+var _helpers = require("./helpers");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 
 var globalClasses = (0, _Emotion.prefix)('tab')({
   focus: 'focus' });exports.globalClasses = globalClasses;

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

@@ -1 +1 @@
-{"version":3,"sources":["Tab.styles.ts"],"names":["globalClasses","focus","styles","rootSmall","t","tabRoot","rootMedium","rootLarge","verticalSmall","tabVertical","verticalMedium","verticalLarge","focusSmall","tabFocus","focusMedium","focusLarge","disabled","css","ColorFunctions","red","tabTextColorDefault","green","blue","active","horizontalStyles","tabBorderWidth","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles","size","transitionDuration","transitionTimingFunction","tabColorHover","tabOutlineWidth","tabColorFocus"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { TabSize } from './Tab';\nimport { fontSize, lineHeight, paddingX, paddingY } from './helpers';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n  rootSmall(t: Theme) {\n    return tabRoot(t, 'small');\n  },\n\n  rootMedium(t: Theme) {\n    return tabRoot(t, 'medium');\n  },\n\n  rootLarge(t: Theme) {\n    return tabRoot(t, 'large');\n  },\n\n  verticalSmall(t: Theme) {\n    return tabVertical(t, 'small');\n  },\n\n  verticalMedium(t: Theme) {\n    return tabVertical(t, 'medium');\n  },\n\n  verticalLarge(t: Theme) {\n    return tabVertical(t, 'large');\n  },\n\n  focusSmall(t: Theme) {\n    return tabFocus(t, 'small');\n  },\n\n  focusMedium(t: Theme) {\n    return tabFocus(t, 'medium');\n  },\n\n  focusLarge(t: Theme) {\n    return tabFocus(t, 'large');\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: rgba(\n        ${ColorFunctions.red(t.tabTextColorDefault)},\n        ${ColorFunctions.green(t.tabTextColorDefault)},\n        ${ColorFunctions.blue(t.tabTextColorDefault)},\n        0.5\n      );\n      cursor: default;\n    `;\n  },\n\n  active() {\n    return css`\n      cursor: default;\n    `;\n  },\n});\n\nexport const horizontalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nexport const verticalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nfunction tabRoot(t: Theme, size: TabSize) {\n  return css`\n    border-bottom: ${t.tabBorderWidth} solid transparent;\n    box-sizing: border-box;\n    color: ${t.tabTextColorDefault};\n    cursor: pointer;\n    display: inline-block;\n    font-size: ${fontSize(t, size)};\n    line-height: ${lineHeight(t, size)};\n    margin-left: ${paddingX(t, size)};\n    margin-right: ${paddingX(t, size)};\n    padding-bottom: calc(${paddingY(t, size)} - ${t.tabBorderWidth});\n    padding-top: ${paddingY(t, size)};\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  `;\n}\n\nfunction tabVertical(t: Theme, size: TabSize) {\n  return css`\n    border-bottom: none;\n    border-left: ${t.tabBorderWidth} solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ${shift(paddingX(t, size), `-${t.tabBorderWidth}`)};\n    padding-right: ${paddingX(t, size)};\n\n    &:hover {\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    .${globalClasses.focus} {\n      bottom: 0;\n      left: -${t.tabBorderWidth};\n      right: 0;\n    }\n  `;\n}\n\nfunction tabFocus(t: Theme, size: TabSize) {\n  return css`\n    border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n    bottom: -${t.tabBorderWidth};\n    left: -${paddingX(t, size)};\n    position: absolute;\n    right: -${paddingX(t, size)};\n    top: 0;\n  `;\n}\n"]}
+{"version":3,"sources":["Tab.styles.ts"],"names":["globalClasses","focus","styles","rootSmall","t","tabRoot","rootMedium","rootLarge","verticalSmall","tabVertical","verticalMedium","verticalLarge","focusSmall","tabFocus","focusMedium","focusLarge","disabled","css","ColorFunctions","red","tabTextColorDefault","green","blue","active","horizontalStyles","tabBorderWidth","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles","size","transitionDuration","transitionTimingFunction","tabColorHover","tabOutlineWidth","tabColorFocus"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { fontSize, lineHeight, paddingX, paddingY } from './helpers';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n  rootSmall(t: Theme) {\n    return tabRoot(t, 'small');\n  },\n\n  rootMedium(t: Theme) {\n    return tabRoot(t, 'medium');\n  },\n\n  rootLarge(t: Theme) {\n    return tabRoot(t, 'large');\n  },\n\n  verticalSmall(t: Theme) {\n    return tabVertical(t, 'small');\n  },\n\n  verticalMedium(t: Theme) {\n    return tabVertical(t, 'medium');\n  },\n\n  verticalLarge(t: Theme) {\n    return tabVertical(t, 'large');\n  },\n\n  focusSmall(t: Theme) {\n    return tabFocus(t, 'small');\n  },\n\n  focusMedium(t: Theme) {\n    return tabFocus(t, 'medium');\n  },\n\n  focusLarge(t: Theme) {\n    return tabFocus(t, 'large');\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: rgba(\n        ${ColorFunctions.red(t.tabTextColorDefault)},\n        ${ColorFunctions.green(t.tabTextColorDefault)},\n        ${ColorFunctions.blue(t.tabTextColorDefault)},\n        0.5\n      );\n      cursor: default;\n    `;\n  },\n\n  active() {\n    return css`\n      cursor: default;\n    `;\n  },\n});\n\nexport const horizontalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nexport const verticalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nfunction tabRoot(t: Theme, size: SizeProp) {\n  return css`\n    border-bottom: ${t.tabBorderWidth} solid transparent;\n    box-sizing: border-box;\n    color: ${t.tabTextColorDefault};\n    cursor: pointer;\n    display: inline-block;\n    font-size: ${fontSize(t, size)};\n    line-height: ${lineHeight(t, size)};\n    margin-left: ${paddingX(t, size)};\n    margin-right: ${paddingX(t, size)};\n    padding-bottom: calc(${paddingY(t, size)} - ${t.tabBorderWidth});\n    padding-top: ${paddingY(t, size)};\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  `;\n}\n\nfunction tabVertical(t: Theme, size: SizeProp) {\n  return css`\n    border-bottom: none;\n    border-left: ${t.tabBorderWidth} solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ${shift(paddingX(t, size), `-${t.tabBorderWidth}`)};\n    padding-right: ${paddingX(t, size)};\n\n    &:hover {\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    .${globalClasses.focus} {\n      bottom: 0;\n      left: -${t.tabBorderWidth};\n      right: 0;\n    }\n  `;\n}\n\nfunction tabFocus(t: Theme, size: SizeProp) {\n  return css`\n    border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n    bottom: -${t.tabBorderWidth};\n    left: -${paddingX(t, size)};\n    position: absolute;\n    right: -${paddingX(t, size)};\n    top: 0;\n  `;\n}\n"]}

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

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

package/cjs/components/Tabs/Tabs.js

@@ -1,4 +1,5 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TabsDataTids = exports.Tabs = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));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");
@@ -9,6 +10,8 @@ var _getRootNode = require("../../lib/rootNode/getRootNode");
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 
+var _isInstanceOf = require("../../lib/isInstanceOf");
+
 var _Indicator = require("./Indicator");
 var _Tabs = require("./Tabs.styles");
 var _TabsContext = require("./TabsContext");
@@ -54,11 +57,6 @@ var _Tab = require("./Tab");var _class, _class2, _temp;
 
 
 
-
-
-
-
-
 
 
 
@@ -73,9 +71,7 @@ var TabsDataTids = {
 
 
 /**
- * Tabs wrapper
- *
- * contains static property `Tab`
+ * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
  */var
 
 Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tabs, _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.
@@ -86,6 +82,7 @@ Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
+
     getProps = (0, _createPropsGetter.createPropsGetter)(Tabs.defaultProps);_this.
 
 
@@ -163,7 +160,7 @@ Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
       var tabNode = tab.getNode();
       var htmlNode = (0, _getRootNode.getRootNode)(tabNode);
 
-      if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {
+      if ((0, _isInstanceOf.isInstanceOf)(htmlNode, _globalObject.globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
         htmlNode.focus();
       }
     };_this.
@@ -190,4 +187,4 @@ Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
     removeTab = function (id) {
       _this.tabs = _this.tabs.filter(function (tab) {return tab.id !== id;});
-    };return _this;}var _proto = Tabs.prototype;_proto.render = function render() {var _this2 = 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;_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TabsDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_Tabs.styles.rootSmall(_this2.theme)] = size === 'small', _cx[_Tabs.styles.rootMedium(_this2.theme)] = size === 'medium', _cx[_Tabs.styles.rootLarge(_this2.theme)] = size === 'large', _cx[_Tabs.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: _this2.getTab, addTab: _this2.addTab, removeTab: _this2.removeTab, notifyUpdate: _this2.notifyUpdate, shiftFocus: _this2.shiftFocus, switchTab: _this2.switchTab } }, children, /*#__PURE__*/_react.default.createElement(_Indicator.Indicator, { className: indicatorClassName, tabUpdates: _this2.tabUpdates, vertical: _this2.getProps().vertical }))));});};return Tabs;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.defaultProps = { vertical: false, size: 'large' }, _class2.Tab = _Tab.Tab, _temp)) || _class;exports.Tabs = Tabs;
+    };return _this;}var _proto = Tabs.prototype;_proto.render = function render() {var _this2 = 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;_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TabsDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_Tabs.styles.rootSmall(_this2.theme)] = size === 'small', _cx[_Tabs.styles.rootMedium(_this2.theme)] = size === 'medium', _cx[_Tabs.styles.rootLarge(_this2.theme)] = size === 'large', _cx[_Tabs.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: _this2.getTab, addTab: _this2.addTab, removeTab: _this2.removeTab, notifyUpdate: _this2.notifyUpdate, shiftFocus: _this2.shiftFocus, switchTab: _this2.switchTab } }, children, /*#__PURE__*/_react.default.createElement(_Indicator.Indicator, { className: indicatorClassName, tabUpdates: _this2.tabUpdates, vertical: _this2.getProps().vertical }))));});};return Tabs;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.displayName = 'Tabs', _class2.defaultProps = { vertical: false, size: 'large' }, _class2.Tab = _Tab.Tab, _temp)) || _class;exports.Tabs = Tabs;