@skbkontur/react-ui 0.0.0-9216939ede → 0.0.0-95a1dbe516

package/components/Tabs/Tab/Tab.js

@@ -11,13 +11,14 @@ import { ResizeDetector } from "../../../internal/ResizeDetector";
 import { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from "../../../lib/events/keyboard/identifiers";
 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 { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { getVisualStateDataAttributes } from "../../../internal/CommonWrapper/getVisualStateDataAttributes";
+import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
 import { TabsContext, TabsContextDefaultValue } from "../TabsContext";
-import { styles, horizontalStyles, verticalStyles, globalClasses } from "../Tab.styles";
+import { getHorizontalStyles, getStyles, getVerticalStyles, globalClasses } from "../Tab.styles";
 export var TabDataTids = {
   root: 'Tab__root'
 };
@@ -174,9 +175,12 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+        _this2.theme = theme;
+        return _this2.renderMain();
+      });
     });
   };
 
@@ -191,7 +195,7 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
   };
 
   _proto.renderMain = function renderMain() {
-    var _cx, _cx2;
+    var _this$emotion$cx, _this$emotion$cx2;
 
     var _this$props = this.props,
         children = _this$props.children,
@@ -216,12 +220,16 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
       isVertical = this.context.vertical;
     }
 
-    var orientationStyles = isVertical ? verticalStyles : horizontalStyles;
+    var orientationStyles = isVertical ? getVerticalStyles(this.emotion) : getHorizontalStyles(this.emotion);
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
-    }, this.props), /*#__PURE__*/React.createElement(Component, {
+    }, getVisualStateDataAttributes({
+      active: isActive,
+      disabled: disabled
+    }), this.props), /*#__PURE__*/React.createElement(Component, {
       "data-tid": TabDataTids.root,
-      className: cx((_cx = {}, _cx[styles.rootSmall(this.theme)] = this.context.size === 'small', _cx[styles.rootMedium(this.theme)] = this.context.size === 'medium', _cx[styles.rootLarge(this.theme)] = this.context.size === 'large', _cx[styles.verticalSmall(this.theme)] = !!isVertical && this.context.size === 'small', _cx[styles.verticalMedium(this.theme)] = !!isVertical && this.context.size === 'medium', _cx[styles.verticalLarge(this.theme)] = !!isVertical && this.context.size === 'large', _cx[orientationStyles.primary(this.theme)] = !!primary, _cx[orientationStyles.success(this.theme)] = !!success, _cx[orientationStyles.warning(this.theme)] = !!warning, _cx[orientationStyles.error(this.theme)] = !!error, _cx[styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)),
+      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,
@@ -234,12 +242,12 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
     }, /*#__PURE__*/React.createElement(ResizeDetector, {
       onResize: this.context.notifyUpdate
     }, children), this.state.focusedByKeyboard && /*#__PURE__*/React.createElement("div", {
-      className: cx(globalClasses.focus, (_cx2 = {}, _cx2[styles.focusSmall(this.theme)] = this.context.size === 'small', _cx2[styles.focusMedium(this.theme)] = this.context.size === 'medium', _cx2[styles.focusLarge(this.theme)] = this.context.size === 'large', _cx2))
+      className: this.emotion.cx(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.Component), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.contextType = TabsContext, _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.displayName = 'Tab', _class2.contextType = TabsContext, _class2.defaultProps = {
   component: 'a',
   href: ''
 }, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Tab.tsx"],"names":["React","invariant","globalObject","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","TabsContext","TabsContextDefaultValue","styles","horizontalStyles","verticalStyles","globalClasses","TabDataTids","root","Tab","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","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","ariaDescribedby","ariaLabel","Component","isActive","isVertical","vertical","orientationStyles","setRootNode","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","active","focus","focusSmall","focusMedium","focusLarge","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport const TabDataTids = {\n  root: 'Tab__root',\n} as const;\n\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\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public static defaultProps: DefaultProps = {\n    component: 'a',\n    href: '',\n  };\n\n  private getProps = createPropsGetter(Tab.defaultProps);\n\n  public state: TabState = {\n    focusedByKeyboard: false,\n  };\n\n  private theme!: Theme;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: TabProps<T>) {\n    super(props);\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n  }\n\n  public componentDidMount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.addTab(id, this.getTabInstance);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.context.activeTab === this.props.id) {\n      this.context.notifyUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.removeTab(id);\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getIndicators() {\n    return {\n      error: Boolean(this.props.error),\n      warning: Boolean(this.props.warning),\n      success: Boolean(this.props.success),\n      primary: Boolean(this.props.primary),\n      disabled: Boolean(this.props.disabled),\n    };\n  }\n\n  public getUnderlyingNode = () => this.tabComponent;\n\n  private renderMain() {\n    const {\n      children,\n      disabled,\n      error,\n      warning,\n      success,\n      primary,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n    } = this.props;\n    const { component: Component, href } = this.getProps();\n\n    let isActive = false;\n    let isVertical = false;\n\n    const id = this.getId();\n    if (typeof id === 'string') {\n      isActive = this.context.activeTab === this.getId();\n      isVertical = this.context.vertical;\n    }\n    const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Component\n          data-tid={TabDataTids.root}\n          className={cx({\n            [styles.rootSmall(this.theme)]: this.context.size === 'small',\n            [styles.rootMedium(this.theme)]: this.context.size === 'medium',\n            [styles.rootLarge(this.theme)]: this.context.size === 'large',\n            [styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n            [styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n            [styles.verticalLarge(this.theme)]: !!isVertical && this.context.size === 'large',\n            [orientationStyles.primary(this.theme)]: !!primary,\n            [orientationStyles.success(this.theme)]: !!success,\n            [orientationStyles.warning(this.theme)]: !!warning,\n            [orientationStyles.error(this.theme)]: !!error,\n            [styles.active()]: !!isActive,\n            [orientationStyles.active(this.theme)]: !!isActive,\n            [styles.disabled(this.theme)]: !!disabled,\n            [orientationStyles.disabled()]: !!disabled,\n          })}\n          onBlur={this.handleBlur}\n          onClick={this.switchTab}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={disabled ? -1 : 0}\n          ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n          href={href}\n          aria-describedby={ariaDescribedby}\n          aria-label={ariaLabel}\n        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && (\n            <div\n              className={cx(globalClasses.focus, {\n                [styles.focusSmall(this.theme)]: this.context.size === 'small',\n                [styles.focusMedium(this.theme)]: this.context.size === 'medium',\n                [styles.focusLarge(this.theme)]: this.context.size === 'large',\n              })}\n            />\n          )}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.getProps().href;\n\n  private refTabComponent = (instance: React.ReactElement<any>) => {\n    this.tabComponent = instance;\n  };\n\n  private getTabInstance = () => this;\n\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const { href, component } = this.getProps();\n\n    const id = this.props.id || href;\n    if (this.props.onClick) {\n      this.props.onClick(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n    }\n    if (typeof id === 'string') {\n      this.context.switchTab(id);\n    }\n    if (component === 'a' && !href) {\n      event.preventDefault();\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n      if (e.defaultPrevented) {\n        return;\n      }\n    }\n    const id = this.getId();\n    if (typeof id !== 'string') {\n      return;\n    }\n    if (!isKeyArrow(e)) {\n      return;\n    }\n    e.preventDefault();\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n    this.context.shiftFocus(id, delta);\n  };\n\n  private handleFocus = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    // focus event fires before keyDown eventlistener\n    // so we should check focusKeyPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed || keyListener.isArrowPressed) {\n        this.setState({ focusedByKeyboard: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"]}
+{"version":3,"sources":["Tab.tsx"],"names":["React","invariant","globalObject","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","CommonWrapper","EmotionConsumer","rootNode","createPropsGetter","getVisualStateDataAttributes","ThemeConsumer","TabsContext","TabsContextDefaultValue","getHorizontalStyles","getStyles","getVerticalStyles","globalClasses","TabDataTids","root","Tab","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","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","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","focus","focusSmall","focusMedium","focusLarge","__KONTUR_REACT_UI__","displayName","contextType"],"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 { ThemeConsumer } 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            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeConsumer>\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/components/Tabs/Tab.d.ts

@@ -68,12 +68,14 @@ declare type DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;
  */
 export declare class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static contextType: React.Context<TabsContextType<any>>;
     context: TabsContextType;
     static defaultProps: DefaultProps;
     private getProps;
     state: TabState;
     private theme;
+    private emotion;
     private tabComponent;
     private setRootNode;
     constructor(props: TabProps<T>);

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

@@ -2,97 +2,103 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 
-import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { shift } from "../../../lib/styles/DimensionFunctions";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
 import { fontSize, lineHeight, paddingX, paddingY } from "../helpers";
 export var globalClasses = prefix('tab')({
   focus: 'focus'
 });
-export var styles = memoizeStyle({
-  rootSmall: function rootSmall(t) {
-    return tabRoot(t, 'small');
-  },
-  rootMedium: function rootMedium(t) {
-    return tabRoot(t, 'medium');
-  },
-  rootLarge: function rootLarge(t) {
-    return tabRoot(t, 'large');
-  },
-  verticalSmall: function verticalSmall(t) {
-    return tabVertical(t, 'small');
-  },
-  verticalMedium: function verticalMedium(t) {
-    return tabVertical(t, 'medium');
-  },
-  verticalLarge: function verticalLarge(t) {
-    return tabVertical(t, 'large');
-  },
-  focusSmall: function focusSmall(t) {
-    return tabFocus(t, 'small');
-  },
-  focusMedium: function focusMedium(t) {
-    return tabFocus(t, 'medium');
-  },
-  focusLarge: function focusLarge(t) {
-    return tabFocus(t, 'large');
-  },
-  disabled: function disabled(t) {
-    return css(_templateObject || (_templateObject = _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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+export var getStyles = function getStyles(emotion) {
+  function tabRoot(t, size) {
+    return emotion.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: calc(", " - ", ");\n    padding-top: ", ";\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ", " ", ";\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ", " solid ", ";\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  "])), t.tabBorderWidth, t.tabTextColorDefault, fontSize(t, size), lineHeight(t, size), paddingX(t, size), paddingX(t, size), paddingY(t, size), t.tabBorderWidth, paddingY(t, size), t.transitionDuration, t.transitionTimingFunction, t.tabBorderWidth, t.tabColorHover);
   }
-});
-export var horizontalStyles = memoizeStyle({
-  active: function active(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
-  },
-  disabled: function disabled() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
-  },
-  primary: function primary(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
-  },
-  success: function success(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
-  },
-  warning: function warning(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
-  },
-  error: function error(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverError);
-  }
-});
-export var verticalStyles = memoizeStyle({
-  active: function active(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
-  },
-  disabled: function disabled() {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
-  },
-  primary: function primary(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
-  },
-  success: function success(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
-  },
-  warning: function warning(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
-  },
-  error: function error(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
-  }
-});
 
-function tabRoot(t, size) {
-  return css(_templateObject15 || (_templateObject15 = _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: calc(", " - ", ");\n    padding-top: ", ";\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ", " ", ";\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ", " solid ", ";\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  "])), t.tabBorderWidth, t.tabTextColorDefault, fontSize(t, size), lineHeight(t, size), paddingX(t, size), paddingX(t, size), paddingY(t, size), t.tabBorderWidth, paddingY(t, size), t.transitionDuration, t.transitionTimingFunction, t.tabBorderWidth, t.tabColorHover);
-}
+  function tabVertical(t, size) {
+    return emotion.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(paddingX(t, size), "-" + t.tabBorderWidth), paddingX(t, size), t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
+  }
 
-function tabVertical(t, size) {
-  return css(_templateObject16 || (_templateObject16 = _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(paddingX(t, size), "-" + t.tabBorderWidth), paddingX(t, size), t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
-}
+  function tabFocus(t, size) {
+    return emotion.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, paddingX(t, size), paddingX(t, size));
+  }
 
-function tabFocus(t, size) {
-  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n    border: ", " solid ", ";\n    bottom: -", ";\n    left: -", ";\n    position: absolute;\n    right: -", ";\n    top: 0;\n  "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, paddingX(t, size), paddingX(t, size));
-}
+  return memoizeStyle({
+    rootSmall: function rootSmall(t) {
+      return tabRoot(t, 'small');
+    },
+    rootMedium: function rootMedium(t) {
+      return tabRoot(t, 'medium');
+    },
+    rootLarge: function rootLarge(t) {
+      return tabRoot(t, 'large');
+    },
+    verticalSmall: function verticalSmall(t) {
+      return tabVertical(t, 'small');
+    },
+    verticalMedium: function verticalMedium(t) {
+      return tabVertical(t, 'medium');
+    },
+    verticalLarge: function verticalLarge(t) {
+      return tabVertical(t, 'large');
+    },
+    focusSmall: function focusSmall(t) {
+      return tabFocus(t, 'small');
+    },
+    focusMedium: function focusMedium(t) {
+      return tabFocus(t, 'medium');
+    },
+    focusLarge: function focusLarge(t) {
+      return tabFocus(t, 'large');
+    },
+    disabled: function disabled(t) {
+      return emotion.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 emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n      "])));
+    }
+  });
+};
+export var getHorizontalStyles = function getHorizontalStyles(emotion) {
+  return memoizeStyle({
+    active: function active(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+    },
+    disabled: function disabled() {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
+    },
+    primary: function primary(t) {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+    },
+    success: function success(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+    },
+    warning: function warning(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+    },
+    error: function error(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverError);
+    }
+  });
+};
+export var getVerticalStyles = function getVerticalStyles(emotion) {
+  return memoizeStyle({
+    active: function active(t) {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+    },
+    disabled: function disabled() {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
+    },
+    primary: function primary(t) {
+      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+    },
+    success: function success(t) {
+      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+    },
+    warning: function warning(t) {
+      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+    },
+    error: function error(t) {
+      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
+    }
+  });
+};

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

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

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

@@ -1,8 +1,9 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     focus: string;
 };
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     rootSmall(t: Theme): string;
     rootMedium(t: Theme): string;
     rootLarge(t: Theme): string;
@@ -15,7 +16,7 @@ export declare const styles: {
     disabled(t: Theme): string;
     active(): string;
 };
-export declare const horizontalStyles: {
+export declare const getHorizontalStyles: (emotion: Emotion) => {
     active(t: Theme): string;
     disabled(): string;
     primary(t: Theme): string;
@@ -23,7 +24,7 @@ export declare const horizontalStyles: {
     warning(t: Theme): string;
     error(t: Theme): string;
 };
-export declare const verticalStyles: {
+export declare const getVerticalStyles: (emotion: Emotion) => {
     active(t: Theme): string;
     disabled(): string;
     primary(t: Theme): string;

package/components/Tabs/Tabs/Tabs.js

@@ -6,15 +6,15 @@ var _class, _class2, _temp;
 
 import React from 'react';
 import { globalObject } from '@skbkontur/global-object';
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { getRootNode } from "../../../lib/rootNode/getRootNode";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isInstanceOf } from "../../../lib/isInstanceOf";
+import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
 import { Indicator } from "../Indicator";
-import { styles } from "../Tabs.styles";
+import { getStyles } from "../Tabs.styles";
 import { TabsContext } from "../TabsContext";
 import { Tab } from "../Tab";
 export var TabsDataTids = {
@@ -124,41 +124,44 @@ var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
         vertical = _this$getProps.vertical,
         size = _this$getProps.size;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      var _cx;
-
-      _this2.theme = theme;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-        rootNodeRef: _this2.setRootNode
-      }, _this2.props), /*#__PURE__*/React.createElement("div", {
-        "data-tid": TabsDataTids.root,
-        className: cx((_cx = {}, _cx[styles.rootSmall(_this2.theme)] = size === 'small', _cx[styles.rootMedium(_this2.theme)] = size === 'medium', _cx[styles.rootLarge(_this2.theme)] = size === 'large', _cx[styles.vertical()] = vertical, _cx)),
-        style: {
-          width: width
-        },
-        "aria-describedby": ariaDescribedby
-      }, /*#__PURE__*/React.createElement(TabsContext.Provider, {
-        value: {
-          vertical: vertical,
-          activeTab: value,
-          size: size,
-          getTab: _this2.getTab,
-          addTab: _this2.addTab,
-          removeTab: _this2.removeTab,
-          notifyUpdate: _this2.notifyUpdate,
-          shiftFocus: _this2.shiftFocus,
-          switchTab: _this2.switchTab
-        }
-      }, children, /*#__PURE__*/React.createElement(Indicator, {
-        className: indicatorClassName,
-        tabUpdates: _this2.tabUpdates,
-        vertical: _this2.getProps().vertical
-      }))));
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      var styles = getStyles(emotion);
+      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+        var _emotion$cx;
+
+        _this2.theme = theme;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this2.setRootNode
+        }, _this2.props), /*#__PURE__*/React.createElement("div", {
+          "data-tid": TabsDataTids.root,
+          className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.rootSmall(_this2.theme)] = size === 'small', _emotion$cx[styles.rootMedium(_this2.theme)] = size === 'medium', _emotion$cx[styles.rootLarge(_this2.theme)] = size === 'large', _emotion$cx[styles.vertical()] = vertical, _emotion$cx)),
+          style: {
+            width: width
+          },
+          "aria-describedby": ariaDescribedby
+        }, /*#__PURE__*/React.createElement(TabsContext.Provider, {
+          value: {
+            vertical: vertical,
+            activeTab: value,
+            size: size,
+            getTab: _this2.getTab,
+            addTab: _this2.addTab,
+            removeTab: _this2.removeTab,
+            notifyUpdate: _this2.notifyUpdate,
+            shiftFocus: _this2.shiftFocus,
+            switchTab: _this2.switchTab
+          }
+        }, children, /*#__PURE__*/React.createElement(Indicator, {
+          className: indicatorClassName,
+          tabUpdates: _this2.tabUpdates,
+          vertical: _this2.getProps().vertical
+        }))));
+      });
     });
   };
 
   return Tabs;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.displayName = 'Tabs', _class2.defaultProps = {
   vertical: false,
   size: 'large'
 }, _class2.Tab = Tab, _temp)) || _class;