@skbkontur/react-ui 0.0.0-b203c99d11 → 0.0.0-bb4cbfe9c6

package/components/Tabs/Tab/Tab.js

@@ -1,50 +1,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import invariant from 'invariant';
-import cn from 'classnames';
+import { ResizeDetector } from "../../../internal/ResizeDetector";
 import { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from "../../../lib/events/keyboard/identifiers";
-import { tabListener } from "../../../lib/events/tabListener";
+import { keyListener } from "../../../lib/events/keyListener";
 import { isFunctionalComponent } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
 import { TabsContext, TabsContextDefaultValue } from "../TabsContext";
-import { jsStyles } from "../Tab.styles";
-/**
- * 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
- */
-
-export var Tab = /*#__PURE__*/function (_React$Component) {
+import { styles, horizontalStyles, verticalStyles, globalClasses } from "../Tab.styles";
+export
+/**
+* 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 = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Tab, _React$Component);
 
-  function Tab() {
+  function Tab(props) {
     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 = _React$Component.call(this, props) || this;
     _this.context = _this.context;
     _this.state = {
       focusedByKeyboard: false
     };
-    _this.theme = void 0;
     _this.tabComponent = null;
-    _this.isArrowKeyPressed = false;
 
     _this.getUnderlyingNode = function () {
       return _this.tabComponent;
@@ -58,10 +58,6 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
       _this.tabComponent = instance;
     };
 
-    _this.handleKeyDownGlobal = function (e) {
-      _this.isArrowKeyPressed = isKeyArrow(e);
-    };
-
     _this.getTabInstance = function () {
       return _assertThisInitialized(_this);
     };
@@ -91,10 +87,6 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.handleMouseDown = function () {
-      return _this.isArrowKeyPressed = false;
-    };
-
     _this.handleKeyDown = function (e) {
       if (_this.props.disabled) {
         return;
@@ -131,8 +123,8 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
       // so we should check focusKeyPressed in async way
 
 
-      process.nextTick(function () {
-        if (tabListener.isTabPressed || _this.isArrowKeyPressed) {
+      requestAnimationFrame(function () {
+        if (keyListener.isTabPressed || keyListener.isArrowPressed) {
           _this.setState({
             focusedByKeyboard: true
           });
@@ -150,23 +142,18 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
       });
     };
 
+    invariant(_this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');
     return _this;
   }
 
   var _proto = Tab.prototype;
 
-  _proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {
-    invariant(this.context !== 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() {
@@ -181,8 +168,6 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
     if (typeof id === 'string') {
       this.context.removeTab(id);
     }
-
-    window.removeEventListener('keydown', this.handleKeyDownGlobal);
   };
 
   _proto.render = function render() {
@@ -205,7 +190,7 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderMain = function renderMain() {
-    var _cn;
+    var _cx;
 
     var _this$props = this.props,
         children = _this$props.children,
@@ -226,35 +211,33 @@ export var Tab = /*#__PURE__*/function (_React$Component) {
       isVertical = this.context.vertical;
     }
 
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(Component, {
-      className: cn((_cn = {}, _cn[jsStyles.root(this.theme)] = true, _cn[jsStyles.vertical(this.theme)] = !!isVertical, _cn[jsStyles.primary(this.theme)] = !!primary, _cn[jsStyles.success(this.theme)] = !!success, _cn[jsStyles.warning(this.theme)] = !!warning, _cn[jsStyles.error(this.theme)] = !!error, _cn[jsStyles.active(this.theme)] = !!isActive, _cn[jsStyles.disabled(this.theme)] = !!disabled, _cn)),
+    var orientationStyles = isVertical ? verticalStyles : horizontalStyles;
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(Component, {
+      className: cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.vertical(this.theme)] = !!isVertical, _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[styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)),
       onBlur: this.handleBlur,
       onClick: this.switchTab,
-      onMouseDown: this.handleMouseDown,
       onFocus: this.handleFocus,
       onKeyDown: this.handleKeyDown,
       tabIndex: disabled ? -1 : 0,
       ref: isFunctionalComponent(Component) ? null : this.refTabComponent,
       href: href
-    }, children, this.state.focusedByKeyboard && /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.focus(this.theme)
+    }, /*#__PURE__*/React.createElement(ResizeDetector, {
+      onResize: this.context.notifyUpdate
+    }, children), this.state.focusedByKeyboard && /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.focus(this.theme), globalClasses.focus)
     })));
   };
 
   return Tab;
-}(React.Component);
-Tab.__KONTUR_REACT_UI__ = 'Tab';
-Tab.contextType = TabsContext;
-Tab.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.contextType = TabsContext, _class2.propTypes = {
   children: PropTypes.node,
-  component: PropTypes.any,
   disabled: PropTypes.bool,
   href: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func
-};
-Tab.defaultProps = {
+}, _class2.defaultProps = {
   component: 'a',
   href: ''
-};
+}, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Tab.tsx"],"names":["React","PropTypes","invariant","cn","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","tabListener","isFunctionalComponent","ThemeContext","CommonWrapper","TabsContext","TabsContextDefaultValue","jsStyles","Tab","context","state","focusedByKeyboard","theme","tabComponent","isArrowKeyPressed","getUnderlyingNode","getId","props","id","href","refTabComponent","instance","handleKeyDownGlobal","e","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleMouseDown","handleKeyDown","onKeyDown","delta","shiftFocus","handleFocus","process","nextTick","isTabPressed","setState","handleBlur","UNSAFE_componentWillMount","componentDidMount","addTab","window","addEventListener","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","removeEventListener","render","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","root","active","focus","__KONTUR_REACT_UI__","contextType","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\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\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 extends CommonProps {\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    } = 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      <CommonWrapper {...this.props}>\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        >\r\n          {children}\r\n          {this.state.focusedByKeyboard && <div className={jsStyles.focus(this.theme)} />}\r\n        </Component>\r\n      </CommonWrapper>\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.component === 'a' && !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":["React","PropTypes","invariant","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","rootNode","TabsContext","TabsContextDefaultValue","styles","horizontalStyles","verticalStyles","globalClasses","Tab","props","context","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","orientationStyles","setRootNode","root","active","focus","__KONTUR_REACT_UI__","contextType","propTypes","node","bool","string","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\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';\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 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   * Cостояние валидации при ошибке.\n   */\n  error?: boolean;\n\n  /**\n   * Cостояние валидации при предупреждении.\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\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\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 propTypes = {\n    children: PropTypes.node,\n    disabled: PropTypes.bool,\n    href: PropTypes.string.isRequired,\n    onClick: PropTypes.func,\n    onKeyDown: PropTypes.func,\n  };\n\n  public static defaultProps = {\n    component: 'a',\n    href: '',\n  };\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      component: Component = Tab.defaultProps.component,\n      href,\n    } = this.props;\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          className={cx({\n            [styles.root(this.theme)]: true,\n            [styles.vertical(this.theme)]: !!isVertical,\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        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.props.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\n    const id = this.props.id || this.props.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 (this.props.component === 'a' && !this.props.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    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/components/Tabs/Tab.d.ts

@@ -10,7 +10,7 @@ export interface TabIndicators {
     primary: boolean;
     disabled: boolean;
 }
-export interface TabProps extends CommonProps {
+export interface TabProps<T extends string = string> extends CommonProps {
     /**
      * Tab content
      */
@@ -26,7 +26,7 @@ export interface TabProps extends CommonProps {
     /**
      * Tab identifier
      */
-    id?: string;
+    id?: T;
     /**
      * Click event
      */
@@ -40,11 +40,11 @@ export interface TabProps extends CommonProps {
      */
     disabled?: boolean;
     /**
-     * Error indicator
+     * Cостояние валидации при ошибке.
      */
     error?: boolean;
     /**
-     * Warning indicator
+     * Cостояние валидации при предупреждении.
      */
     warning?: boolean;
     /**
@@ -78,16 +78,14 @@ export interface TabState {
  *
  * Works only inside Tabs component, otherwise throws
  */
-export declare class Tab extends React.Component<TabProps, TabState> {
+export declare class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {
     static __KONTUR_REACT_UI__: string;
-    static contextType: React.Context<TabsContextType>;
+    static contextType: React.Context<TabsContextType<any>>;
     context: TabsContextType;
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        component: PropTypes.Requireable<any>;
         disabled: PropTypes.Requireable<boolean>;
         href: PropTypes.Validator<string>;
-        id: PropTypes.Validator<string>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
     };
@@ -98,8 +96,8 @@ export declare class Tab extends React.Component<TabProps, TabState> {
     state: TabState;
     private theme;
     private tabComponent;
-    private isArrowKeyPressed;
-    UNSAFE_componentWillMount(): void;
+    private setRootNode;
+    constructor(props: TabProps<T>);
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
@@ -111,14 +109,12 @@ export declare class Tab extends React.Component<TabProps, TabState> {
         primary: boolean;
         disabled: boolean;
     };
-    getUnderlyingNode: () => Nullable<React.ReactElement<Tab, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>>;
+    getUnderlyingNode: () => Nullable<React.ReactElement<Tab<T>, string | React.JSXElementConstructor<any>>>;
     private renderMain;
     private getId;
     private refTabComponent;
-    private handleKeyDownGlobal;
     private getTabInstance;
     private switchTab;
-    private handleMouseDown;
     private handleKeyDown;
     private handleFocus;
     private handleBlur;

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

@@ -1,128 +1,69 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: rgba(\n        ", ",\n        ", ",\n        ", ",\n        0.5\n      );\n      cursor: default;\n\n      &:hover {\n        border-bottom-color: transparent !important;\n      }\n\n      &", ":hover {\n        border-left-color: transparent !important;\n      }\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      bottom: -", ";\n      left: -", ";\n      position: absolute;\n      right: -", ";\n      top: 0;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        cursor: default;\n        border-bottom: ", " solid transparent;\n      }\n\n      &", ":hover {\n        border-left: ", " solid transparent;\n      }\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      border-bottom: none;\n      border-left: ", " solid transparent;\n      display: block;\n      margin-left: 0;\n      margin-right: 0;\n      padding-left: ", ";\n      padding-right: ", ";\n\n      ", "&:hover {\n        border-bottom: none;\n        border-left: ", " solid ", ";\n      }\n\n      ", " {\n        bottom: 0;\n        left: -", ";\n        right: 0;\n      }\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      border-bottom: ", " solid transparent;\n      box-sizing: border-box;\n      color: inherit;\n      cursor: pointer;\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n      padding-bottom: ", ";\n      padding-top: ", ";\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ", " solid ", ";\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
+import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { shift } from "../../../lib/styles/DimensionFunctions";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
-import { is8pxTheme } from "../../../lib/theming/ThemeHelpers";
-var styles = {
+export var globalClasses = prefix('tab')({
+  focus: 'focus'
+});
+export var styles = memoizeStyle({
   root: function root(t) {
-    var paddingTop = is8pxTheme(t) ? t.tabPaddingY : shift(t.tabPaddingY, '-1px');
-    var paddingBottom = is8pxTheme(t) ? "calc(" + t.tabPaddingY + " - " + t.tabBorderWidth + ")" : shift(t.tabPaddingY, '1px');
-    return css(_templateObject(), t.tabBorderWidth, t.tabFontSize, t.tabLineHeight, t.tabPaddingX, t.tabPaddingX, paddingBottom, paddingTop, t.tabBorderWidth, t.tabColorHover);
+    var paddingTop = t.tabPaddingY;
+    var paddingBottom = "calc(" + t.tabPaddingY + " - " + t.tabBorderWidth + ")";
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      border-bottom: ", " solid transparent;\n      box-sizing: border-box;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n      padding-bottom: ", ";\n      padding-top: ", ";\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ", " solid ", ";\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    "])), t.tabBorderWidth, t.tabTextColorDefault, t.tabFontSize, t.tabLineHeight, t.tabPaddingX, t.tabPaddingX, paddingBottom, paddingTop, t.tabBorderWidth, t.tabColorHover);
   },
   vertical: function vertical(t) {
-    return css(_templateObject2(), t.tabBorderWidth, shift(t.tabPaddingX, "-" + t.tabBorderWidth), t.tabPaddingX, cssName(styles.root(t)), t.tabBorderWidth, t.tabColorHover, cssName(styles.focus(t)), t.tabBorderWidth);
-  },
-  active: function active(t) {
-    return css(_templateObject3(), t.tabBorderWidth, cssName(styles.vertical(t)), t.tabBorderWidth);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      border-bottom: none;\n      border-left: ", " solid transparent;\n      display: block;\n      margin-left: 0;\n      margin-right: 0;\n      padding-left: ", ";\n      padding-right: ", ";\n\n      &:hover {\n        border-bottom: none;\n        border-left: ", " solid ", ";\n      }\n\n      .", " {\n        bottom: 0;\n        left: -", ";\n        right: 0;\n      }\n    "])), t.tabBorderWidth, shift(t.tabPaddingX, "-" + t.tabBorderWidth), t.tabPaddingX, t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
   },
   focus: function focus(t) {
-    return css(_templateObject4(), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, t.tabPaddingX, t.tabPaddingX);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      bottom: -", ";\n      left: -", ";\n      position: absolute;\n      right: -", ";\n      top: 0;\n    "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, t.tabPaddingX, t.tabPaddingX);
   },
   disabled: function disabled(t) {
-    return css(_templateObject5(), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault), cssName(styles.vertical(t)));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: rgba(\n        ", ",\n        ", ",\n        ", ",\n        0.5\n      );\n      cursor: default;\n    "])), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault));
+  },
+  active: function active() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+  }
+});
+export var horizontalStyles = memoizeStyle({
+  active: function active(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+  },
+  disabled: function disabled() {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
+  },
+  primary: function primary(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+  },
+  success: function success(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+  },
+  warning: function warning(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+  },
+  error: function error(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverError);
+  }
+});
+export var verticalStyles = memoizeStyle({
+  active: function active(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+  },
+  disabled: function disabled() {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
   },
   primary: function primary(t) {
-    return css(_templateObject6(), t.tabColorHoverPrimary, cssName(styles.vertical(t)), t.tabColorHoverPrimary);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
   },
   success: function success(t) {
-    return css(_templateObject7(), t.tabColorHoverSuccess, cssName(styles.vertical(t)), t.tabColorHoverSuccess);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
   },
   warning: function warning(t) {
-    return css(_templateObject8(), t.tabColorHoverWarning, cssName(styles.vertical(t)), t.tabColorHoverWarning);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
   },
   error: function error(t) {
-    return css(_templateObject9(), t.tabColorHoverError, cssName(styles.vertical(t)), t.tabColorHoverError);
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["Tab.styles.ts"],"names":["css","cssName","memoizeStyle","shift","ColorFunctions","is8pxTheme","styles","root","t","paddingTop","tabPaddingY","paddingBottom","tabBorderWidth","tabFontSize","tabLineHeight","tabPaddingX","tabColorHover","vertical","focus","active","tabOutlineWidth","tabColorFocus","disabled","red","tabTextColorDefault","green","blue","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","jsStyles"],"mappings":"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","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { shift } from '../../lib/styles/DimensionFunctions';\r\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    const paddingTop = is8pxTheme(t) ? t.tabPaddingY : shift(t.tabPaddingY, '-1px');\r\n    const paddingBottom = is8pxTheme(t) ? `calc(${t.tabPaddingY} - ${t.tabBorderWidth})` : shift(t.tabPaddingY, '1px');\r\n    return css`\r\n      border-bottom: ${t.tabBorderWidth} solid transparent;\r\n      box-sizing: border-box;\r\n      color: inherit;\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      font-size: ${t.tabFontSize};\r\n      line-height: ${t.tabLineHeight};\r\n      margin-left: ${t.tabPaddingX};\r\n      margin-right: ${t.tabPaddingX};\r\n      padding-bottom: ${paddingBottom};\r\n      padding-top: ${paddingTop};\r\n      position: relative;\r\n      text-decoration: inherit;\r\n      transition: border-bottom 0.2s ease-out;\r\n\r\n      &:hover {\r\n        outline: inherit;\r\n        border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\r\n      }\r\n\r\n      &:focus {\r\n        outline: inherit;\r\n      }\r\n    `;\r\n  },\r\n\r\n  vertical(t: Theme) {\r\n    return css`\r\n      border-bottom: none;\r\n      border-left: ${t.tabBorderWidth} solid transparent;\r\n      display: block;\r\n      margin-left: 0;\r\n      margin-right: 0;\r\n      padding-left: ${shift(t.tabPaddingX, `-${t.tabBorderWidth}`)};\r\n      padding-right: ${t.tabPaddingX};\r\n\r\n      ${cssName(styles.root(t))}&:hover {\r\n        border-bottom: none;\r\n        border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\r\n      }\r\n\r\n      ${cssName(styles.focus(t))} {\r\n        bottom: 0;\r\n        left: -${t.tabBorderWidth};\r\n        right: 0;\r\n      }\r\n    `;\r\n  },\r\n\r\n  active(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        cursor: default;\r\n        border-bottom: ${t.tabBorderWidth} solid transparent;\r\n      }\r\n\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left: ${t.tabBorderWidth} solid transparent;\r\n      }\r\n    `;\r\n  },\r\n\r\n  focus(t: Theme) {\r\n    return css`\r\n      border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\r\n      bottom: -${t.tabBorderWidth};\r\n      left: -${t.tabPaddingX};\r\n      position: absolute;\r\n      right: -${t.tabPaddingX};\r\n      top: 0;\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      color: rgba(\r\n        ${ColorFunctions.red(t.tabTextColorDefault)},\r\n        ${ColorFunctions.green(t.tabTextColorDefault)},\r\n        ${ColorFunctions.blue(t.tabTextColorDefault)},\r\n        0.5\r\n      );\r\n      cursor: default;\r\n\r\n      &:hover {\r\n        border-bottom-color: transparent !important;\r\n      }\r\n\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: transparent !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  primary(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverPrimary};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverPrimary};\r\n      }\r\n    `;\r\n  },\r\n\r\n  success(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverSuccess};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverSuccess};\r\n      }\r\n    `;\r\n  },\r\n\r\n  warning(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverWarning};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverWarning};\r\n      }\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverError};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverError};\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Tab.styles.ts"],"names":["css","memoizeStyle","prefix","shift","ColorFunctions","globalClasses","focus","styles","root","t","paddingTop","tabPaddingY","paddingBottom","tabBorderWidth","tabTextColorDefault","tabFontSize","tabLineHeight","tabPaddingX","tabColorHover","vertical","tabOutlineWidth","tabColorFocus","disabled","red","green","blue","active","horizontalStyles","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles"],"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\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const paddingTop = t.tabPaddingY;\n    const paddingBottom = `calc(${t.tabPaddingY} - ${t.tabBorderWidth})`;\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: ${t.tabFontSize};\n      line-height: ${t.tabLineHeight};\n      margin-left: ${t.tabPaddingX};\n      margin-right: ${t.tabPaddingX};\n      padding-bottom: ${paddingBottom};\n      padding-top: ${paddingTop};\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\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\n  vertical(t: Theme) {\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(t.tabPaddingX, `-${t.tabBorderWidth}`)};\n      padding-right: ${t.tabPaddingX};\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\n  focus(t: Theme) {\n    return css`\n      border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n      bottom: -${t.tabBorderWidth};\n      left: -${t.tabPaddingX};\n      position: absolute;\n      right: -${t.tabPaddingX};\n      top: 0;\n    `;\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"]}

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

@@ -1,11 +1,27 @@
-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 { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    focus: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+    vertical(t: Theme): string;
+    focus(t: Theme): string;
+    disabled(t: Theme): string;
+    active(): string;
+};
+export declare const horizontalStyles: {
+    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 verticalStyles: {
+    active(t: Theme): string;
+    disabled(): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
 };