@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

package/cjs/components/Tabs/Tab.js

@@ -1,17 +1,24 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Tab = void 0;var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _globalObject = require("@skbkontur/global-object");
 
+
+var _ResizeDetector = require("../../internal/ResizeDetector");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
-var _tabListener = require("../../lib/events/tabListener");
+var _keyListener = require("../../lib/events/keyListener");
 
 var _utils = require("../../lib/utils");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/getVisualStateDataAttributes");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _TabsContext = require("./TabsContext");
-var _Tab = require("./Tab.styles");
+var _Tab = require("./Tab.styles");var _class, _class2, _temp;
 
 
 
@@ -21,8 +28,13 @@ var _Tab = require("./Tab.styles");
 
 
 
+var TabDataTids = {
+  root: 'Tab__root' };
 
 
+/**
+ * @deprecated use SizeProp
+ */exports.TabDataTids = TabDataTids;
 
 
 
@@ -85,28 +97,15 @@ var _Tab = require("./Tab.styles");
 
 
 
+/**
+ * Вложенный элемент компонента `<Tabs />`.
+ */var
 
+Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab, _React$Component);
 
-/**
-                                     * 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 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab, _React$Component);function Tab() {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.
 
 
 
-    context = _this.context;_this.
 
 
 
@@ -123,13 +122,13 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
 
 
 
-    state = {
-      focusedByKeyboard: false };_this.
 
 
-    theme = void 0;_this.
-    tabComponent = null;_this.
-    isArrowKeyPressed = false;_this.
+  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.
+
+
+
 
 
 
@@ -230,16 +229,34 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
 
 
 
-    getId = function () {return _this.props.id || _this.props.href;};_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    getId = function () {return _this.props.id || _this.getProps().href;};_this.
 
     refTabComponent = function (instance) {
       _this.tabComponent = instance;
     };_this.
 
-    handleKeyDownGlobal = function (e) {
-      _this.isArrowKeyPressed = (0, _identifiers.isKeyArrow)(e);
-    };_this.
-
     getTabInstance = function () {return (0, _assertThisInitialized2.default)(_this);};_this.
 
     switchTab = function (event) {
@@ -247,8 +264,9 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
         event.preventDefault();
         return;
       }
+      var _this$getProps = _this.getProps(),href = _this$getProps.href,component = _this$getProps.component;
 
-      var id = _this.props.id || _this.props.href;
+      var id = _this.props.id || href;
       if (_this.props.onClick) {
         _this.props.onClick(event);
         if (event.defaultPrevented) {
@@ -258,13 +276,11 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
       if (typeof id === 'string') {
         _this.context.switchTab(id);
       }
-      if (!_this.props.href) {
+      if (component === 'a' && !href) {
         event.preventDefault();
       }
     };_this.
 
-    handleMouseDown = function () {return _this.isArrowKeyPressed = false;};_this.
-
     handleKeyDown = function (e) {
       if (_this.props.disabled) {
         return;
@@ -295,8 +311,8 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
 
       // focus event fires before keyDown eventlistener
       // so we should check focusKeyPressed in async way
-      process.nextTick(function () {
-        if (_tabListener.tabListener.isTabPressed || _this.isArrowKeyPressed) {
+      _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {
+        if (_keyListener.keyListener.isTabPressed || _keyListener.keyListener.isArrowPressed) {
           _this.setState({ focusedByKeyboard: true });
         }
       });
@@ -308,4 +324,4 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
       }
 
       _this.setState({ focusedByKeyboard: false });
-    };return _this;}var _proto = Tab.prototype;_proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {(0, _invariant.default)(this.context !== _TabsContext.TabsContextDefaultValue, 'Tab should be placed inside Tabs component');};_proto.componentDidMount = function componentDidMount() {var id = this.getId();if (typeof id === 'string') {this.context.addTab(id, this.getTabInstance);}window.addEventListener('keydown', this.handleKeyDownGlobal);};_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);}window.removeEventListener('keydown', this.handleKeyDownGlobal);};_proto.render = function render() {var _this2 = this;return _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 _cn;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,_this$props$component = _this$props.component,Component = _this$props$component === void 0 ? Tab.defaultProps.component : _this$props$component,href = _this$props.href,style = _this$props.style;var isActive = false;var isVertical = false;var id = this.getId();if (typeof id === 'string') {isActive = this.context.activeTab === this.getId();isVertical = this.context.vertical;}return _react.default.createElement(Component, { className: (0, _classnames.default)((_cn = {}, _cn[_Tab.jsStyles.root(this.theme)] = true, _cn[_Tab.jsStyles.vertical(this.theme)] = !!isVertical, _cn[_Tab.jsStyles.primary(this.theme)] = !!primary, _cn[_Tab.jsStyles.success(this.theme)] = !!success, _cn[_Tab.jsStyles.warning(this.theme)] = !!warning, _cn[_Tab.jsStyles.error(this.theme)] = !!error, _cn[_Tab.jsStyles.active(this.theme)] = !!isActive, _cn[_Tab.jsStyles.disabled(this.theme)] = !!disabled, _cn)), onBlur: this.handleBlur, onClick: this.switchTab, onMouseDown: this.handleMouseDown, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, tabIndex: disabled ? -1 : 0, ref: (0, _utils.isFunctionalComponent)(Component) ? null : this.refTabComponent, href: href, style: style }, children, this.state.focusedByKeyboard && _react.default.createElement("div", { className: _Tab.jsStyles.focus(this.theme) }));};return Tab;}(_react.default.Component);exports.Tab = Tab;Tab.__KONTUR_REACT_UI__ = 'Tab';Tab.contextType = _TabsContext.TabsContext;Tab.propTypes = { children: _propTypes.default.node, component: _propTypes.default.any, disabled: _propTypes.default.bool, href: _propTypes.default.string.isRequired, id: _propTypes.default.string.isRequired, onClick: _propTypes.default.func, onKeyDown: _propTypes.default.func };Tab.defaultProps = { component: 'a', href: '' };
+    };(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(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;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 _this$emotion$cx, _this$emotion$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 ? (0, _Tab.getVerticalStyles)(this.emotion) : (0, _Tab.getHorizontalStyles)(this.emotion);var styles = (0, _Tab.getStyles)(this.emotion);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: this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.rootSmall(this.theme)] = this.context.size === 'small', _this$emotion$cx[styles.rootMedium(this.theme)] = this.context.size === 'medium', _this$emotion$cx[styles.rootLarge(this.theme)] = this.context.size === 'large', _this$emotion$cx[styles.verticalSmall(this.theme)] = !!isVertical && this.context.size === 'small', _this$emotion$cx[styles.verticalMedium(this.theme)] = !!isVertical && this.context.size === 'medium', _this$emotion$cx[styles.verticalLarge(this.theme)] = !!isVertical && this.context.size === 'large', _this$emotion$cx[orientationStyles.primary(this.theme)] = !!primary, _this$emotion$cx[orientationStyles.success(this.theme)] = !!success, _this$emotion$cx[orientationStyles.warning(this.theme)] = !!warning, _this$emotion$cx[orientationStyles.error(this.theme)] = !!error, _this$emotion$cx[styles.active()] = !!isActive, _this$emotion$cx[orientationStyles.active(this.theme)] = !!isActive, _this$emotion$cx[styles.disabled(this.theme)] = !!disabled, _this$emotion$cx[orientationStyles.disabled()] = !!disabled, _this$emotion$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: this.emotion.cx(_Tab.globalClasses.focus, (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.focusSmall(this.theme)] = this.context.size === 'small', _this$emotion$cx2[styles.focusMedium(this.theme)] = this.context.size === 'medium', _this$emotion$cx2[styles.focusLarge(this.theme)] = this.context.size === 'large', _this$emotion$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":["Tab","context","state","focusedByKeyboard","theme","tabComponent","isArrowKeyPressed","getUnderlyingNode","getId","props","id","href","refTabComponent","instance","handleKeyDownGlobal","e","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","handleMouseDown","handleKeyDown","onKeyDown","delta","shiftFocus","handleFocus","process","nextTick","tabListener","isTabPressed","setState","handleBlur","UNSAFE_componentWillMount","TabsContextDefaultValue","componentDidMount","addTab","window","addEventListener","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","removeEventListener","render","renderMain","getIndicators","error","Boolean","warning","success","primary","children","component","Component","defaultProps","style","isActive","isVertical","vertical","jsStyles","root","active","focus","React","__KONTUR_REACT_UI__","contextType","TabsContext","propTypes","PropTypes","node","any","bool","string","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport invariant from 'invariant';\r\nimport cn from 'classnames';\r\n\r\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\r\nimport { tabListener } from '../../lib/events/tabListener';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { isFunctionalComponent } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\r\nimport { jsStyles } from './Tab.styles';\r\n\r\nexport interface TabIndicators {\r\n  error: boolean;\r\n  warning: boolean;\r\n  success: boolean;\r\n  primary: boolean;\r\n  disabled: boolean;\r\n}\r\n\r\nexport interface TabProps {\r\n  /**\r\n   * Tab content\r\n   */\r\n  children?: React.ReactNode;\r\n\r\n  /**\r\n   * Component to use as a tab\r\n   */\r\n  component?: React.ComponentType<any> | string;\r\n\r\n  /**\r\n   * Link href\r\n   */\r\n  href?: string;\r\n\r\n  /**\r\n   * Tab identifier\r\n   */\r\n  id?: string;\r\n\r\n  /**\r\n   * Click event\r\n   */\r\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\r\n\r\n  /**\r\n   * Click event\r\n   */\r\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\r\n\r\n  /**\r\n   * Disabled indicator\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Error indicator\r\n   */\r\n  error?: boolean;\r\n\r\n  /**\r\n   * Warning indicator\r\n   */\r\n  warning?: boolean;\r\n\r\n  /**\r\n   * Success indicator\r\n   */\r\n  success?: boolean;\r\n\r\n  /**\r\n   * Primary indicator\r\n   */\r\n  primary?: boolean;\r\n\r\n  /**\r\n   * Style property\r\n   */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport interface TabState {\r\n  focusedByKeyboard: boolean;\r\n}\r\n\r\n/**\r\n * Tab element of Tabs component\r\n *\r\n * Can be used for creating custom tabs\r\n * ```js\r\n *\r\n * const RouteTab = (props) => (\r\n *   <Tab id={props.to} component={RouteLink} {...props}/>\r\n * )\r\n *\r\n * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\r\n * ```\r\n *\r\n * Works only inside Tabs component, otherwise throws\r\n */\r\nexport class Tab extends React.Component<TabProps, TabState> {\r\n  public static __KONTUR_REACT_UI__ = 'Tab';\r\n\r\n  public static contextType = TabsContext;\r\n  public context: TabsContextType = this.context;\r\n\r\n  public static propTypes = {\r\n    children: PropTypes.node,\r\n    component: PropTypes.any,\r\n    disabled: PropTypes.bool,\r\n    href: PropTypes.string.isRequired,\r\n    id: PropTypes.string.isRequired,\r\n    onClick: PropTypes.func,\r\n    onKeyDown: PropTypes.func,\r\n  };\r\n\r\n  public static defaultProps = {\r\n    component: 'a',\r\n    href: '',\r\n  };\r\n\r\n  public state: TabState = {\r\n    focusedByKeyboard: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private tabComponent: Nullable<React.ReactElement<Tab>> = null;\r\n  private isArrowKeyPressed = false;\r\n\r\n  public UNSAFE_componentWillMount() {\r\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\r\n  }\r\n\r\n  public componentDidMount() {\r\n    const id = this.getId();\r\n    if (typeof id === 'string') {\r\n      this.context.addTab(id, this.getTabInstance);\r\n    }\r\n    window.addEventListener('keydown', this.handleKeyDownGlobal);\r\n  }\r\n\r\n  public componentDidUpdate() {\r\n    if (this.context.activeTab === this.props.id) {\r\n      this.context.notifyUpdate();\r\n    }\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    const id = this.getId();\r\n    if (typeof id === 'string') {\r\n      this.context.removeTab(id);\r\n    }\r\n    window.removeEventListener('keydown', this.handleKeyDownGlobal);\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  public getIndicators() {\r\n    return {\r\n      error: Boolean(this.props.error),\r\n      warning: Boolean(this.props.warning),\r\n      success: Boolean(this.props.success),\r\n      primary: Boolean(this.props.primary),\r\n      disabled: Boolean(this.props.disabled),\r\n    };\r\n  }\r\n\r\n  public getUnderlyingNode = () => this.tabComponent;\r\n\r\n  private renderMain() {\r\n    const {\r\n      children,\r\n      disabled,\r\n      error,\r\n      warning,\r\n      success,\r\n      primary,\r\n      component: Component = Tab.defaultProps.component,\r\n      href,\r\n      style,\r\n    } = this.props;\r\n\r\n    let isActive = false;\r\n    let isVertical = false;\r\n\r\n    const id = this.getId();\r\n    if (typeof id === 'string') {\r\n      isActive = this.context.activeTab === this.getId();\r\n      isVertical = this.context.vertical;\r\n    }\r\n\r\n    return (\r\n      <Component\r\n        className={cn({\r\n          [jsStyles.root(this.theme)]: true,\r\n          [jsStyles.vertical(this.theme)]: !!isVertical,\r\n          [jsStyles.primary(this.theme)]: !!primary,\r\n          [jsStyles.success(this.theme)]: !!success,\r\n          [jsStyles.warning(this.theme)]: !!warning,\r\n          [jsStyles.error(this.theme)]: !!error,\r\n          [jsStyles.active(this.theme)]: !!isActive,\r\n          [jsStyles.disabled(this.theme)]: !!disabled,\r\n        })}\r\n        onBlur={this.handleBlur}\r\n        onClick={this.switchTab}\r\n        onMouseDown={this.handleMouseDown}\r\n        onFocus={this.handleFocus}\r\n        onKeyDown={this.handleKeyDown}\r\n        tabIndex={disabled ? -1 : 0}\r\n        ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\r\n        href={href}\r\n        style={style}\r\n      >\r\n        {children}\r\n        {this.state.focusedByKeyboard && <div className={jsStyles.focus(this.theme)} />}\r\n      </Component>\r\n    );\r\n  }\r\n\r\n  private getId = () => this.props.id || this.props.href;\r\n\r\n  private refTabComponent = (instance: React.ReactElement<any>) => {\r\n    this.tabComponent = instance;\r\n  };\r\n\r\n  private handleKeyDownGlobal = (e: KeyboardEvent) => {\r\n    this.isArrowKeyPressed = isKeyArrow(e);\r\n  };\r\n\r\n  private getTabInstance = () => this;\r\n\r\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\r\n    if (this.props.disabled) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    const id = this.props.id || this.props.href;\r\n    if (this.props.onClick) {\r\n      this.props.onClick(event);\r\n      if (event.defaultPrevented) {\r\n        return;\r\n      }\r\n    }\r\n    if (typeof id === 'string') {\r\n      this.context.switchTab(id);\r\n    }\r\n    if (!this.props.href) {\r\n      event.preventDefault();\r\n    }\r\n  };\r\n\r\n  private handleMouseDown = () => (this.isArrowKeyPressed = false);\r\n\r\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\r\n    if (this.props.disabled) {\r\n      return;\r\n    }\r\n\r\n    if (this.props.onKeyDown) {\r\n      this.props.onKeyDown(e);\r\n      if (e.defaultPrevented) {\r\n        return;\r\n      }\r\n    }\r\n    const id = this.getId();\r\n    if (typeof id !== 'string') {\r\n      return;\r\n    }\r\n    if (!isKeyArrow(e)) {\r\n      return;\r\n    }\r\n    e.preventDefault();\r\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\r\n    this.context.shiftFocus(id, delta);\r\n  };\r\n\r\n  private handleFocus = () => {\r\n    if (this.props.disabled) {\r\n      return;\r\n    }\r\n\r\n    // focus event fires before keyDown eventlistener\r\n    // so we should check focusKeyPressed in async way\r\n    process.nextTick(() => {\r\n      if (tabListener.isTabPressed || this.isArrowKeyPressed) {\r\n        this.setState({ focusedByKeyboard: true });\r\n      }\r\n    });\r\n  };\r\n\r\n  private handleBlur = () => {\r\n    if (this.props.disabled) {\r\n      return;\r\n    }\r\n\r\n    this.setState({ focusedByKeyboard: false });\r\n  };\r\n}\r\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","emotion","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","ariaDescribedby","ariaLabel","Component","isActive","isVertical","vertical","orientationStyles","styles","setRootNode","active","cx","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","globalClasses","focus","focusSmall","focusMedium","focusLarge","React","__KONTUR_REACT_UI__","displayName","contextType","TabsContext"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\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 { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } 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/getVisualStateDataAttributes';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { TabsContext, TabsContextDefaultValue, TabsContextType } from './TabsContext';\nimport { getHorizontalStyles, getStyles, getVerticalStyles, 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\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 emotion!: Emotion;\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\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 ? getVerticalStyles(this.emotion) : getHorizontalStyles(this.emotion);\n    const styles = getStyles(this.emotion);\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={this.emotion.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={this.emotion.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.d.ts

@@ -1,11 +1,34 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    vertical(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    active(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    focus(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    primary(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    success(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    warning(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    error(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    focus: string;
+};
+export declare const getStyles: (emotion: Emotion) => {
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    verticalSmall(t: Theme): string;
+    verticalMedium(t: Theme): string;
+    verticalLarge(t: Theme): string;
+    focusSmall(t: Theme): string;
+    focusMedium(t: Theme): string;
+    focusLarge(t: Theme): string;
+    disabled(t: Theme): string;
+    active(): string;
+};
+export declare const getHorizontalStyles: (emotion: Emotion) => {
+    active(t: Theme): string;
+    disabled(): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
+};
+export declare const getVerticalStyles: (emotion: Emotion) => {
+    active(t: Theme): string;
+    disabled(): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
 };