@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_lodash","_RenderEnvironmentContext","_isInstanceOf","LayoutEvents","_interopRequireWildcard","_ThemeContext","_rootNode","_getDOMRect","_Indicator2","_TabsContext","_Tabs","_class","_Indicator","Indicator","exports","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","context","state","styles","eventListener","removeTabUpdatesListener","reflow","throttle","_this$context","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","_inheritsLoose2","default","_proto","prototype","componentDidMount","addListener","globalObject","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","render","_this2","createElement","RenderEnvironmentContext","Consumer","_ref","emotion","cx","ThemeContext","theme","renderMain","_this$context2","indicators","getIndicators","error","warning","success","primary","disabled","TabsDataTids","indicatorRoot","className","root","style","ref","setRootNode","htmlNode","getRootNode","isInstanceOf","HTMLElement","rect","getDOMRect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","React","Component","contextType","TabsContext"],"sources":["Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport throttle from 'lodash.throttle';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\nimport type { GlobalObject } from '../../lib/globalObject';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport type { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getRootNode, rootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { getStyles } from './Indicator.styles';\nimport type { TabsContextType } from './TabsContext';\nimport { TabsContext } from './TabsContext';\nimport type { TabIndicators } from './Tab';\nimport { TabsDataTids } from './Tabs';\n\nexport interface IndicatorProps {\n  className?: string;\n  tabUpdates: {\n    on: (x0: () => void) => () => void;\n  };\n  vertical: boolean;\n}\n\nexport interface IndicatorState {\n  styles: React.CSSProperties;\n}\n\n@rootNode\nexport class Indicator extends React.Component<IndicatorProps, IndicatorState> {\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public state: IndicatorState = {\n    styles: {},\n  };\n\n  private globalObject!: GlobalObject;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n\n  private eventListener: Nullable<{\n    remove: () => void;\n  }> = null;\n\n  private removeTabUpdatesListener: Nullable<() => void> = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.eventListener = LayoutEvents.addListener(this.reflow, this.globalObject);\n    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);\n    this.reflow();\n  }\n\n  public componentWillUnmount() {\n    this.reflow.cancel();\n\n    if (this.eventListener) {\n      this.eventListener.remove();\n    }\n    if (this.removeTabUpdatesListener) {\n      this.removeTabUpdatesListener();\n    }\n  }\n\n  public componentDidUpdate() {\n    this.reflow();\n  }\n\n  public render() {\n    return (\n      <RenderEnvironmentContext.Consumer>\n        {({ globalObject, emotion }) => {\n          this.globalObject = globalObject;\n          this.cx = emotion.cx;\n          this.styles = getStyles(emotion);\n\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </RenderEnvironmentContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const indicators: TabIndicators = (node && node.getIndicators && node.getIndicators()) || {\n      error: false,\n      warning: false,\n      success: false,\n      primary: false,\n      disabled: false,\n    };\n    return (\n      <div\n        data-tid={TabsDataTids.indicatorRoot}\n        className={this.cx(\n          this.styles.root(this.theme),\n          indicators.primary && this.styles.primary(this.theme),\n          indicators.success && this.styles.success(this.theme),\n          indicators.warning && this.styles.warning(this.theme),\n          indicators.error && this.styles.error(this.theme),\n          this.props.className,\n        )}\n        style={this.state.styles}\n        ref={this.setRootNode}\n      />\n    );\n  }\n\n  private reflow = throttle(() => {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const nodeStyles = this.getStyles(node);\n    const stylesUpdated = ['left', 'top', 'width', 'height'].some(\n      (prop) => nodeStyles[prop as keyof React.CSSProperties] !== this.state.styles[prop as keyof React.CSSProperties],\n    );\n    if (stylesUpdated) {\n      this.setState({ styles: nodeStyles });\n    }\n  }, 100);\n\n  private getStyles(node: any): React.CSSProperties {\n    const htmlNode = getRootNode(node);\n\n    if (isInstanceOf(htmlNode, this.globalObject.HTMLElement)) {\n      const rect = getDOMRect(htmlNode);\n      if (this.props.vertical) {\n        return {\n          width: this.theme.tabBorderWidth,\n          left: htmlNode.offsetLeft,\n          top: htmlNode.offsetTop,\n          height: rect.bottom - rect.top,\n        };\n      }\n\n      const tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;\n      return {\n        left: htmlNode.offsetLeft,\n        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,\n        width: rect.right - rect.left,\n      };\n    }\n\n    return {};\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_lodash","_globalObject","_isInstanceOf","LayoutEvents","_interopRequireWildcard","_ThemeContext","_Emotion","_rootNode","_getDOMRect","_Indicator2","_TabsContext","_Tabs","_class","_Indicator","Indicator","exports","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","context","state","styles","eventListener","removeTabUpdatesListener","reflow","throttle","_this$context","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","_inheritsLoose2","default","_proto","prototype","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","render","_this2","createElement","ThemeContext","Consumer","theme","renderMain","_this$context2","indicators","getIndicators","error","warning","success","primary","disabled","TabsDataTids","indicatorRoot","className","cx","root","style","ref","setRootNode","htmlNode","getRootNode","isInstanceOf","globalObject","HTMLElement","rect","getDOMRect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","React","Component","contextType","TabsContext"],"sources":["Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport throttle from 'lodash.throttle';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport type { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getRootNode, rootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './Indicator.styles';\nimport type { TabsContextType } from './TabsContext';\nimport { TabsContext } from './TabsContext';\nimport type { TabIndicators } from './Tab';\nimport { TabsDataTids } from './Tabs';\n\nexport interface IndicatorProps {\n  className?: string;\n  tabUpdates: {\n    on: (x0: () => void) => () => void;\n  };\n  vertical: boolean;\n}\n\nexport interface IndicatorState {\n  styles: React.CSSProperties;\n}\n\n@rootNode\nexport class Indicator extends React.Component<IndicatorProps, IndicatorState> {\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public state: IndicatorState = {\n    styles: {},\n  };\n\n  private theme!: Theme;\n\n  private eventListener: Nullable<{\n    remove: () => void;\n  }> = null;\n\n  private removeTabUpdatesListener: Nullable<() => void> = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.eventListener = LayoutEvents.addListener(this.reflow);\n    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);\n    this.reflow();\n  }\n\n  public componentWillUnmount() {\n    this.reflow.cancel();\n\n    if (this.eventListener) {\n      this.eventListener.remove();\n    }\n    if (this.removeTabUpdatesListener) {\n      this.removeTabUpdatesListener();\n    }\n  }\n\n  public componentDidUpdate() {\n    this.reflow();\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  private renderMain() {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const indicators: TabIndicators = (node && node.getIndicators && node.getIndicators()) || {\n      error: false,\n      warning: false,\n      success: false,\n      primary: false,\n      disabled: false,\n    };\n    return (\n      <div\n        data-tid={TabsDataTids.indicatorRoot}\n        className={cx(\n          styles.root(this.theme),\n          indicators.primary && styles.primary(this.theme),\n          indicators.success && styles.success(this.theme),\n          indicators.warning && styles.warning(this.theme),\n          indicators.error && styles.error(this.theme),\n          this.props.className,\n        )}\n        style={this.state.styles}\n        ref={this.setRootNode}\n      />\n    );\n  }\n\n  private reflow = throttle(() => {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const nodeStyles = this.getStyles(node);\n    const stylesUpdated = ['left', 'top', 'width', 'height'].some(\n      (prop) => nodeStyles[prop as keyof React.CSSProperties] !== this.state.styles[prop as keyof React.CSSProperties],\n    );\n    if (stylesUpdated) {\n      this.setState({ styles: nodeStyles });\n    }\n  }, 100);\n\n  private getStyles(node: any): React.CSSProperties {\n    const htmlNode = getRootNode(node);\n\n    if (isInstanceOf(htmlNode, globalObject.HTMLElement)) {\n      const rect = getDOMRect(htmlNode);\n      if (this.props.vertical) {\n        return {\n          width: this.theme.tabBorderWidth,\n          left: htmlNode.offsetLeft,\n          top: htmlNode.offsetTop,\n          height: rect.bottom - rect.top,\n        };\n      }\n\n      const tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;\n      return {\n        left: htmlNode.offsetLeft,\n        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,\n        width: rect.right - rect.left,\n      };\n    }\n\n    return {};\n  }\n}\n"],"mappings":"4VAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;;AAEA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAC,uBAAA,CAAAL,OAAA;;AAEA,IAAAM,aAAA,GAAAN,OAAA;;AAEA,IAAAO,QAAA,GAAAP,OAAA;;AAEA,IAAAQ,SAAA,GAAAR,OAAA;AACA,IAAAS,WAAA,GAAAT,OAAA;;AAEA,IAAAU,WAAA,GAAAV,OAAA;;AAEA,IAAAW,YAAA,GAAAX,OAAA;;AAEA,IAAAY,KAAA,GAAAZ,OAAA,WAAsC,IAAAa,MAAA,EAAAC,UAAA;;;;;;;;;;;;;;;AAezBC,SAAS,GAAAC,OAAA,CAAAD,SAAA,OADrBE,kBAAQ,EAAAJ,MAAA,IAAAC,UAAA,0BAAAI,gBAAA,YAAAH,UAAA,OAAAI,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;IAGAU,OAAO,GAAoBV,KAAA,CAAKU,OAAO,CAAAV,KAAA;;IAEvCW,KAAK,GAAmB;MAC7BC,MAAM,EAAE,CAAC;IACX,CAAC,CAAAZ,KAAA;;;;IAIOa,aAAa;;IAEhB,IAAI,CAAAb,KAAA;;IAEDc,wBAAwB,GAAyB,IAAI,CAAAd,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+DrDe,MAAM,GAAG,IAAAC,eAAQ,EAAC,YAAM;MAC9B,IAAAC,aAAA,GAA8BjB,KAAA,CAAKU,OAAO,CAAlCQ,MAAM,GAAAD,aAAA,CAANC,MAAM,CAAEC,SAAS,GAAAF,aAAA,CAATE,SAAS;MACzB,IAAMC,IAAI,GAAGF,MAAM,CAACC,SAAS,CAAC;MAC9B,IAAME,UAAU,GAAGrB,KAAA,CAAKsB,SAAS,CAACF,IAAI,CAAC;MACvC,IAAMG,aAAa,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAACC,IAAI;QAC3D,UAACC,IAAI,UAAKJ,UAAU,CAACI,IAAI,CAA8B,KAAKzB,KAAA,CAAKW,KAAK,CAACC,MAAM,CAACa,IAAI,CAA8B;MAClH,CAAC;MACD,IAAIF,aAAa,EAAE;QACjBvB,KAAA,CAAK0B,QAAQ,CAAC,EAAEd,MAAM,EAAES,UAAU,CAAC,CAAC,CAAC;MACvC;IACF,CAAC,EAAE,GAAG,CAAC,QAAArB,KAAA,MAAA2B,eAAA,CAAAC,OAAA,EAAAhC,SAAA,EAAAG,gBAAA,MAAA8B,MAAA,GAAAjC,SAAA,CAAAkC,SAAA,CAAAD,MAAA,CArEAE,iBAAiB,GAAxB,SAAAA,kBAAA,EAA2B,CACzB,IAAI,CAAClB,aAAa,GAAG5B,YAAY,CAAC+C,WAAW,CAAC,IAAI,CAACjB,MAAM,CAAC,CAC1D,IAAI,CAACD,wBAAwB,GAAG,IAAI,CAACmB,KAAK,CAACC,UAAU,CAACC,EAAE,CAAC,IAAI,CAACpB,MAAM,CAAC,CACrE,IAAI,CAACA,MAAM,CAAC,CAAC,CACf,CAAC,CAAAc,MAAA,CAEMO,oBAAoB,GAA3B,SAAAA,qBAAA,EAA8B,CAC5B,IAAI,CAACrB,MAAM,CAACsB,MAAM,CAAC,CAAC,CAEpB,IAAI,IAAI,CAACxB,aAAa,EAAE,CACtB,IAAI,CAACA,aAAa,CAACyB,MAAM,CAAC,CAAC,CAC7B,CACA,IAAI,IAAI,CAACxB,wBAAwB,EAAE,CACjC,IAAI,CAACA,wBAAwB,CAAC,CAAC,CACjC,CACF,CAAC,CAAAe,MAAA,CAEMU,kBAAkB,GAAzB,SAAAA,mBAAA,EAA4B,CAC1B,IAAI,CAACxB,MAAM,CAAC,CAAC,CACf,CAAC,CAAAc,MAAA,CAEMW,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA,QACd,oBACE9D,MAAA,CAAAiD,OAAA,CAAAc,aAAA,CAACvD,aAAA,CAAAwD,YAAY,CAACC,QAAQ,QACnB,UAACC,KAAK,EAAK,CACVJ,MAAI,CAACI,KAAK,GAAGA,KAAK,CAClB,OAAOJ,MAAI,CAACK,UAAU,CAAC,CAAC,CAC1B,CACqB,CAAC,CAE5B,CAAC,CAAAjB,MAAA,CAEOiB,UAAU,GAAlB,SAAAA,WAAA,EAAqB,CACnB,IAAAC,cAAA,GAA8B,IAAI,CAACrC,OAAO,CAAlCQ,MAAM,GAAA6B,cAAA,CAAN7B,MAAM,CAAEC,SAAS,GAAA4B,cAAA,CAAT5B,SAAS,CACzB,IAAMC,IAAI,GAAGF,MAAM,CAACC,SAAS,CAAC,CAC9B,IAAM6B,UAAyB,GAAI5B,IAAI,IAAIA,IAAI,CAAC6B,aAAa,IAAI7B,IAAI,CAAC6B,aAAa,CAAC,CAAC,IAAK,EACxFC,KAAK,EAAE,KAAK,EACZC,OAAO,EAAE,KAAK,EACdC,OAAO,EAAE,KAAK,EACdC,OAAO,EAAE,KAAK,EACdC,QAAQ,EAAE,KAAK,CACjB,CAAC,CACD,oBACE3E,MAAA,CAAAiD,OAAA,CAAAc,aAAA,UACE,YAAUa,kBAAY,CAACC,aAAc,EACrCC,SAAS,EAAE,IAAAC,WAAE,EACX9C,kBAAM,CAAC+C,IAAI,CAAC,IAAI,CAACd,KAAK,CAAC,EACvBG,UAAU,CAACK,OAAO,IAAIzC,kBAAM,CAACyC,OAAO,CAAC,IAAI,CAACR,KAAK,CAAC,EAChDG,UAAU,CAACI,OAAO,IAAIxC,kBAAM,CAACwC,OAAO,CAAC,IAAI,CAACP,KAAK,CAAC,EAChDG,UAAU,CAACG,OAAO,IAAIvC,kBAAM,CAACuC,OAAO,CAAC,IAAI,CAACN,KAAK,CAAC,EAChDG,UAAU,CAACE,KAAK,IAAItC,kBAAM,CAACsC,KAAK,CAAC,IAAI,CAACL,KAAK,CAAC,EAC5C,IAAI,CAACZ,KAAK,CAACwB,SACb,CAAE,EACFG,KAAK,EAAE,IAAI,CAACjD,KAAK,CAACC,MAAO,EACzBiD,GAAG,EAAE,IAAI,CAACC,WAAY,EACvB,CAAC,CAEN,CAAC,CAAAjC,MAAA;;EAcOP,SAAS,GAAjB,SAAAA,UAAkBF,IAAS,EAAuB;IAChD,IAAM2C,QAAQ,GAAG,IAAAC,qBAAW,EAAC5C,IAAI,CAAC;;IAElC,IAAI,IAAA6C,0BAAY,EAACF,QAAQ,EAAEG,0BAAY,CAACC,WAAW,CAAC,EAAE;MACpD,IAAMC,IAAI,GAAG,IAAAC,sBAAU,EAACN,QAAQ,CAAC;MACjC,IAAI,IAAI,CAAC9B,KAAK,CAACqC,QAAQ,EAAE;QACvB,OAAO;UACLC,KAAK,EAAE,IAAI,CAAC1B,KAAK,CAAC2B,cAAc;UAChCC,IAAI,EAAEV,QAAQ,CAACW,UAAU;UACzBC,GAAG,EAAEZ,QAAQ,CAACa,SAAS;UACvBC,MAAM,EAAET,IAAI,CAACU,MAAM,GAAGV,IAAI,CAACO;QAC7B,CAAC;MACH;;MAEA,IAAMH,cAAc,GAAGO,QAAQ,CAAC,IAAI,CAAClC,KAAK,CAAC2B,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;MACnE,OAAO;QACLC,IAAI,EAAEV,QAAQ,CAACW,UAAU;QACzBC,GAAG,EAAEZ,QAAQ,CAACiB,YAAY,GAAGjB,QAAQ,CAACa,SAAS,GAAGJ,cAAc;QAChED,KAAK,EAAEH,IAAI,CAACa,KAAK,GAAGb,IAAI,CAACK;MAC3B,CAAC;IACH;;IAEA,OAAO,CAAC,CAAC;EACX,CAAC,QAAA7E,SAAA,GAhH4BsF,cAAK,CAACC,SAAS,GAAAxF,UAAA,CAC9ByF,WAAW,GAAGC,wBAAW,EAAA1F,UAAA,MAAAD,MAAA","ignoreList":[]}

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     primary(t: Theme): string;
     success(t: Theme): string;

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

@@ -1,41 +1,38 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      height: ", ";\n      position: absolute;\n      transition: all 0.2s ease-out;\n      border-radius: ", ";\n    "])),
+    t.tabColorFocus,
+    t.tabBorderWidth,
 
-var getStyles = exports.getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      root: function root(t) {
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        background: ", ";\n        height: ", ";\n        position: absolute;\n        transition: all 0.2s ease-out;\n        border-radius: ", ";\n      "])),
-        t.tabColorFocus,
-        t.tabBorderWidth,
 
+    t.tabIndicatorBorderRadius);
 
-        t.tabIndicatorBorderRadius);
+  },
 
-      },
+  primary: function primary(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
+    t.tabColorPrimary);
 
-      primary: function primary(t) {
-        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background: ", ";\n      "])),
-        t.tabColorPrimary);
+  },
 
-      },
+  success: function success(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
+    t.tabColorSuccess);
 
-      success: function success(t) {
-        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background: ", ";\n      "])),
-        t.tabColorSuccess);
+  },
 
-      },
+  warning: function warning(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
+    t.tabColorWarning);
 
-      warning: function warning(t) {
-        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background: ", ";\n      "])),
-        t.tabColorWarning);
+  },
 
-      },
+  error: function error(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
+    t.tabColorError);
 
-      error: function error(t) {
-        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background: ", ";\n      "])),
-        t.tabColorError);
-
-      }
-    }));};
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","getStyles","exports","emotion","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","tabColorFocus","tabBorderWidth","tabIndicatorBorderRadius","primary","tabColorPrimary","success","tabColorSuccess","warning","tabColorWarning","error","tabColorError"],"sources":["Indicator.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        background: ${t.tabColorFocus};\n        height: ${t.tabBorderWidth};\n        position: absolute;\n        transition: all 0.2s ease-out;\n        border-radius: ${t.tabIndicatorBorderRadius};\n      `;\n    },\n\n    primary(t: Theme) {\n      return emotion.css`\n        background: ${t.tabColorPrimary};\n      `;\n    },\n\n    success(t: Theme) {\n      return emotion.css`\n        background: ${t.tabColorSuccess};\n      `;\n    },\n\n    warning(t: Theme) {\n      return emotion.css`\n        background: ${t.tabColorWarning};\n      `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n        background: ${t.tabColorError};\n      `;\n    },\n  });\n"],"mappings":";;AAEA,IAAAA,QAAA,GAAAC,OAAA,8BAAyD,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;;AAGlD,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAIE,OAAgB;IACxC,IAAAC,qBAAY,EAAC;MACXC,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,OAAOH,OAAO,CAACI,GAAG,CAAAX,eAAA,KAAAA,eAAA,OAAAY,4BAAA,CAAAC,OAAA;QACFH,CAAC,CAACI,aAAa;QACnBJ,CAAC,CAACK,cAAc;;;QAGTL,CAAC,CAACM,wBAAwB;;MAE/C,CAAC;;MAEDC,OAAO,WAAAA,QAACP,CAAQ,EAAE;QAChB,OAAOH,OAAO,CAACI,GAAG,CAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;QACFH,CAAC,CAACQ,eAAe;;MAEnC,CAAC;;MAEDC,OAAO,WAAAA,QAACT,CAAQ,EAAE;QAChB,OAAOH,OAAO,CAACI,GAAG,CAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;QACFH,CAAC,CAACU,eAAe;;MAEnC,CAAC;;MAEDC,OAAO,WAAAA,QAACX,CAAQ,EAAE;QAChB,OAAOH,OAAO,CAACI,GAAG,CAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;QACFH,CAAC,CAACY,eAAe;;MAEnC,CAAC;;MAEDC,KAAK,WAAAA,MAACb,CAAQ,EAAE;QACd,OAAOH,OAAO,CAACI,GAAG,CAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;QACFH,CAAC,CAACc,aAAa;;MAEjC;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","styles","exports","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","tabColorFocus","tabBorderWidth","tabIndicatorBorderRadius","primary","tabColorPrimary","success","tabColorSuccess","warning","tabColorWarning","error","tabColorError"],"sources":["Indicator.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      background: ${t.tabColorFocus};\n      height: ${t.tabBorderWidth};\n      position: absolute;\n      transition: all 0.2s ease-out;\n      border-radius: ${t.tabIndicatorBorderRadius};\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      background: ${t.tabColorPrimary};\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      background: ${t.tabColorSuccess};\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      background: ${t.tabColorWarning};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      background: ${t.tabColorError};\n    `;\n  },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;;AAGvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAV,eAAA,KAAAA,eAAA,OAAAW,4BAAA,CAAAC,OAAA;IACMH,CAAC,CAACI,aAAa;IACnBJ,CAAC,CAACK,cAAc;;;IAGTL,CAAC,CAACM,wBAAwB;;EAE/C,CAAC;;EAEDC,OAAO,WAAAA,QAACP,CAAQ,EAAE;IAChB,WAAOC,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACMH,CAAC,CAACQ,eAAe;;EAEnC,CAAC;;EAEDC,OAAO,WAAAA,QAACT,CAAQ,EAAE;IAChB,WAAOC,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACMH,CAAC,CAACU,eAAe;;EAEnC,CAAC;;EAEDC,OAAO,WAAAA,QAACX,CAAQ,EAAE;IAChB,WAAOC,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;IACMH,CAAC,CAACY,eAAe;;EAEnC,CAAC;;EAEDC,KAAK,WAAAA,MAACb,CAAQ,EAAE;IACd,WAAOC,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;IACMH,CAAC,CAACc,aAAa;;EAEjC;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -52,16 +52,10 @@ export declare class Tab<T extends string = string> extends React.Component<TabP
     static defaultProps: DefaultProps;
     private getProps;
     state: TabState;
-    private globalObject;
-    private cx;
-    private styles;
-    private horizontalStyles;
-    private verticalStyles;
     private theme;
     private tabComponent;
     getRootNode: TGetRootNode;
     private setRootNode;
-    private keyListener;
     constructor(props: TabProps<T>);
     componentDidMount(): void;
     componentDidUpdate(): void;

package/cjs/components/Tabs/Tab.js

@@ -1,9 +1,7 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TabDataTids = exports.Tab = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _invariant = _interopRequireDefault(require("invariant"));
-
-
-var _RenderEnvironmentContext = require("../../lib/theming/RenderEnvironmentContext");
+var _globalObject = require("@skbkontur/global-object");
 
 var _ResizeDetector = require("../../internal/ResizeDetector");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -14,6 +12,7 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
@@ -96,12 +95,6 @@ Tab = exports.Tab = (0, _rootNode.rootNode)(_class = (_Tab = /*#__PURE__*/functi
 
 
 
-
-
-
-
-
-
 
 
 
@@ -141,19 +134,6 @@ Tab = exports.Tab = (0, _rootNode.rootNode)(_class = (_Tab = /*#__PURE__*/functi
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -302,8 +282,8 @@ Tab = exports.Tab = (0, _rootNode.rootNode)(_class = (_Tab = /*#__PURE__*/functi
 
       // focus event fires before keyDown eventlistener
       // so we should check focusKeyPressed in async way
-      _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {
-        if (_this.keyListener.isTabPressed || _this.keyListener.isArrowPressed) {
+      _globalObject.globalObject.requestAnimationFrame == null || _globalObject.globalObject.requestAnimationFrame(function () {
+        if (_keyListener.keyListener.isTabPressed || _keyListener.keyListener.isArrowPressed) {
           _this.setState({ focusedByKeyboard: true });
         }
       });
@@ -315,4 +295,4 @@ Tab = exports.Tab = (0, _rootNode.rootNode)(_class = (_Tab = /*#__PURE__*/functi
       }
 
       _this.setState({ focusedByKeyboard: false });
-    };(0, _invariant.default)(_this.context !== _TabsContext.TabsContextDefaultValue, 'Tab should be placed inside Tabs component');return _this;}(0, _inheritsLoose2.default)(Tab, _React$Component);var _proto = Tab.prototype;_proto.componentDidMount = function componentDidMount() {this.keyListener = new _keyListener.KeyListener(this.globalObject);var id = this.getId();if (typeof id === 'string') {this.context.addTab(id, this.getTabInstance);}};_proto.componentDidUpdate = function componentDidUpdate() {if (this.context.activeTab === this.props.id) {this.context.notifyUpdate();}};_proto.componentWillUnmount = function componentWillUnmount() {var id = this.getId();if (typeof id === 'string') {this.context.removeTab(id);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_RenderEnvironmentContext.RenderEnvironmentContext.Consumer, null, function (_ref) {var globalObject = _ref.globalObject,emotion = _ref.emotion;_this2.globalObject = globalObject;_this2.cx = emotion.cx;_this2.styles = (0, _Tab2.getStyles)(emotion);_this2.horizontalStyles = (0, _Tab2.getHorizontalStyles)(emotion);_this2.verticalStyles = (0, _Tab2.getVerticalStyles)(emotion);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.getIndicators = function getIndicators() {return { error: Boolean(this.props.error), warning: Boolean(this.props.warning), success: Boolean(this.props.success), primary: Boolean(this.props.primary), disabled: Boolean(this.props.disabled) };};_proto.renderMain = function renderMain() {var _this$cx, _this$cx2;var _this$props = this.props,children = _this$props.children,disabled = _this$props.disabled,error = _this$props.error,warning = _this$props.warning,success = _this$props.success,primary = _this$props.primary,ariaDescribedby = _this$props['aria-describedby'],ariaLabel = _this$props['aria-label'];var _this$getProps2 = this.getProps(),Component = _this$getProps2.component,href = _this$getProps2.href;var isActive = false;var isVertical = false;var id = this.getId();if (typeof id === 'string') {isActive = this.context.activeTab === this.getId();isVertical = this.context.vertical;}var orientationStyles = isVertical ? this.verticalStyles : this.horizontalStyles;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ active: isActive, disabled: disabled }), this.props), /*#__PURE__*/_react.default.createElement(Component, { "data-tid": TabDataTids.root, className: this.cx((_this$cx = {}, _this$cx[this.styles.rootSmall(this.theme)] = this.context.size === 'small', _this$cx[this.styles.rootMedium(this.theme)] = this.context.size === 'medium', _this$cx[this.styles.rootLarge(this.theme)] = this.context.size === 'large', _this$cx[this.styles.verticalSmall(this.theme)] = !!isVertical && this.context.size === 'small', _this$cx[this.styles.verticalMedium(this.theme)] = !!isVertical && this.context.size === 'medium', _this$cx[this.styles.verticalLarge(this.theme)] = !!isVertical && this.context.size === 'large', _this$cx[orientationStyles.primary(this.theme)] = !!primary, _this$cx[orientationStyles.success(this.theme)] = !!success, _this$cx[orientationStyles.warning(this.theme)] = !!warning, _this$cx[orientationStyles.error(this.theme)] = !!error, _this$cx[this.styles.active()] = !!isActive, _this$cx[orientationStyles.active(this.theme)] = !!isActive, _this$cx[this.styles.disabled(this.theme)] = !!disabled, _this$cx[orientationStyles.disabled()] = !!disabled, _this$cx)), onBlur: this.handleBlur, onClick: this.switchTab, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, tabIndex: disabled ? -1 : 0, ref: (0, _utils.isFunctionalComponent)(Component) ? null : this.refTabComponent, href: href, "aria-describedby": ariaDescribedby, "aria-label": ariaLabel }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.context.notifyUpdate }, children), this.state.focusedByKeyboard && /*#__PURE__*/_react.default.createElement("div", { className: this.cx(_Tab2.globalClasses.focus, (_this$cx2 = {}, _this$cx2[this.styles.focusSmall(this.theme)] = this.context.size === 'small', _this$cx2[this.styles.focusMedium(this.theme)] = this.context.size === 'medium', _this$cx2[this.styles.focusLarge(this.theme)] = this.context.size === 'large', _this$cx2)) })));};return Tab;}(_react.default.Component), _Tab.__KONTUR_REACT_UI__ = 'Tab', _Tab.displayName = 'Tab', _Tab.contextType = _TabsContext.TabsContext, _Tab.defaultProps = { component: 'a', href: '' }, _Tab)) || _class;
+    };(0, _invariant.default)(_this.context !== _TabsContext.TabsContextDefaultValue, 'Tab should be placed inside Tabs component');return _this;}(0, _inheritsLoose2.default)(Tab, _React$Component);var _proto = Tab.prototype;_proto.componentDidMount = function componentDidMount() {var id = this.getId();if (typeof id === 'string') {this.context.addTab(id, this.getTabInstance);}};_proto.componentDidUpdate = function componentDidUpdate() {if (this.context.activeTab === this.props.id) {this.context.notifyUpdate();}};_proto.componentWillUnmount = function componentWillUnmount() {var id = this.getId();if (typeof id === 'string') {this.context.removeTab(id);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getIndicators = function getIndicators() {return { error: Boolean(this.props.error), warning: Boolean(this.props.warning), success: Boolean(this.props.success), primary: Boolean(this.props.primary), disabled: Boolean(this.props.disabled) };};_proto.renderMain = function renderMain() {var _cx, _cx2;var _this$props = this.props,children = _this$props.children,disabled = _this$props.disabled,error = _this$props.error,warning = _this$props.warning,success = _this$props.success,primary = _this$props.primary,ariaDescribedby = _this$props['aria-describedby'],ariaLabel = _this$props['aria-label'];var _this$getProps2 = this.getProps(),Component = _this$getProps2.component,href = _this$getProps2.href;var isActive = false;var isVertical = false;var id = this.getId();if (typeof id === 'string') {isActive = this.context.activeTab === this.getId();isVertical = this.context.vertical;}var orientationStyles = isVertical ? _Tab2.verticalStyles : _Tab2.horizontalStyles;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ active: isActive, disabled: disabled }), this.props), /*#__PURE__*/_react.default.createElement(Component, { "data-tid": TabDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_Tab2.styles.rootSmall(this.theme)] = this.context.size === 'small', _cx[_Tab2.styles.rootMedium(this.theme)] = this.context.size === 'medium', _cx[_Tab2.styles.rootLarge(this.theme)] = this.context.size === 'large', _cx[_Tab2.styles.verticalSmall(this.theme)] = !!isVertical && this.context.size === 'small', _cx[_Tab2.styles.verticalMedium(this.theme)] = !!isVertical && this.context.size === 'medium', _cx[_Tab2.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[_Tab2.styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[_Tab2.styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)), onBlur: this.handleBlur, onClick: this.switchTab, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, tabIndex: disabled ? -1 : 0, ref: (0, _utils.isFunctionalComponent)(Component) ? null : this.refTabComponent, href: href, "aria-describedby": ariaDescribedby, "aria-label": ariaLabel }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.context.notifyUpdate }, children), this.state.focusedByKeyboard && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tab2.globalClasses.focus, (_cx2 = {}, _cx2[_Tab2.styles.focusSmall(this.theme)] = this.context.size === 'small', _cx2[_Tab2.styles.focusMedium(this.theme)] = this.context.size === 'medium', _cx2[_Tab2.styles.focusLarge(this.theme)] = this.context.size === 'large', _cx2)) })));};return Tab;}(_react.default.Component), _Tab.__KONTUR_REACT_UI__ = 'Tab', _Tab.displayName = 'Tab', _Tab.contextType = _TabsContext.TabsContext, _Tab.defaultProps = { component: 'a', href: '' }, _Tab)) || _class;

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_invariant","_RenderEnvironmentContext","_ResizeDetector","_identifiers","_keyListener","_utils","_ThemeContext","_CommonWrapper","_rootNode","_createPropsGetter","_getVisualStateDataAttributes","_TabsContext","_Tab2","_class","_Tab","TabDataTids","exports","root","Tab","rootNode","_React$Component","props","_this","call","context","getProps","createPropsGetter","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","_this$getProps","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","isKeyArrow","delta","isKeyArrowLeft","isKeyArrowUp","shiftFocus","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","isArrowPressed","setState","handleBlur","invariant","TabsContextDefaultValue","_inheritsLoose2","default","_proto","prototype","componentDidMount","KeyListener","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","_this2","createElement","RenderEnvironmentContext","Consumer","_ref","emotion","cx","styles","getStyles","horizontalStyles","getHorizontalStyles","verticalStyles","getVerticalStyles","ThemeContext","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","_this$cx","_this$cx2","_this$props","children","ariaDescribedby","ariaLabel","_this$getProps2","Component","isActive","isVertical","vertical","orientationStyles","CommonWrapper","_extends2","rootNodeRef","setRootNode","getVisualStateDataAttributes","active","className","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","onBlur","onFocus","tabIndex","ref","isFunctionalComponent","ResizeDetector","onResize","globalClasses","focus","focusSmall","focusMedium","focusLarge","React","__KONTUR_REACT_UI__","displayName","contextType","TabsContext"],"sources":["Tab.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport invariant from 'invariant';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\nimport type { GlobalObject } from '../../lib/globalObject';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { KeyListener } from '../../lib/events/keyListener';\nimport type { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport type { TabsContextType } from './TabsContext';\nimport { TabsContext, TabsContextDefaultValue } from './TabsContext';\nimport { globalClasses, getHorizontalStyles, getStyles, getVerticalStyles } from './Tab.styles';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport const TabDataTids = {\n  root: 'Tab__root',\n} as const;\n\nexport 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  component?: React.ComponentType<any> | string;\n\n  /** Задает HTML-атрибут `href` - адрес, на который следует перейти. */\n  href?: string;\n\n  /** Задает уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран. */\n  id?: T;\n\n  /**`HTML`-событие `onclick`. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /** `HTML`-событие `onkeydown`. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /** Делает компонент недоступным. */\n  disabled?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\". */\n  error?: boolean;\n\n  /** Переводит контрол в состояние валидации \"предупреждение\". */\n  warning?: boolean;\n\n  /** Устанавливает визульное состояние валидации \"успех\". */\n  success?: boolean;\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 globalObject!: GlobalObject;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private horizontalStyles!: ReturnType<typeof getHorizontalStyles>;\n  private verticalStyles!: ReturnType<typeof getVerticalStyles>;\n  private theme!: Theme;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private keyListener!: KeyListener;\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    this.keyListener = new KeyListener(this.globalObject);\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      <RenderEnvironmentContext.Consumer>\n        {({ globalObject, emotion }) => {\n          this.globalObject = globalObject;\n          this.cx = emotion.cx;\n          this.styles = getStyles(emotion);\n          this.horizontalStyles = getHorizontalStyles(emotion);\n          this.verticalStyles = getVerticalStyles(emotion);\n\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </RenderEnvironmentContext.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 ? this.verticalStyles : this.horizontalStyles;\n\n    return (\n      <CommonWrapper\n        rootNodeRef={this.setRootNode}\n        {...getVisualStateDataAttributes({ active: isActive, disabled })}\n        {...this.props}\n      >\n        <Component\n          data-tid={TabDataTids.root}\n          className={this.cx({\n            [this.styles.rootSmall(this.theme)]: this.context.size === 'small',\n            [this.styles.rootMedium(this.theme)]: this.context.size === 'medium',\n            [this.styles.rootLarge(this.theme)]: this.context.size === 'large',\n            [this.styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n            [this.styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n            [this.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            [this.styles.active()]: !!isActive,\n            [orientationStyles.active(this.theme)]: !!isActive,\n            [this.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.cx(globalClasses.focus, {\n                [this.styles.focusSmall(this.theme)]: this.context.size === 'small',\n                [this.styles.focusMedium(this.theme)]: this.context.size === 'medium',\n                [this.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    this.globalObject.requestAnimationFrame?.(() => {\n      if (this.keyListener.isTabPressed || this.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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_invariant","_globalObject","_ResizeDetector","_identifiers","_keyListener","_utils","_ThemeContext","_CommonWrapper","_Emotion","_rootNode","_createPropsGetter","_getVisualStateDataAttributes","_TabsContext","_Tab2","_class","_Tab","TabDataTids","exports","root","Tab","rootNode","_React$Component","props","_this","call","context","getProps","createPropsGetter","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","_this$getProps","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","isKeyArrow","delta","isKeyArrowLeft","isKeyArrowUp","shiftFocus","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","isArrowPressed","setState","handleBlur","invariant","TabsContextDefaultValue","_inheritsLoose2","default","_proto","prototype","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","_this2","createElement","ThemeContext","Consumer","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","_cx","_cx2","_this$props","children","ariaDescribedby","ariaLabel","_this$getProps2","Component","isActive","isVertical","vertical","orientationStyles","verticalStyles","horizontalStyles","CommonWrapper","_extends2","rootNodeRef","setRootNode","getVisualStateDataAttributes","active","className","cx","styles","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","onBlur","onFocus","tabIndex","ref","isFunctionalComponent","ResizeDetector","onResize","globalClasses","focus","focusSmall","focusMedium","focusLarge","React","__KONTUR_REACT_UI__","displayName","contextType","TabsContext"],"sources":["Tab.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React 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 type { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport type { TabsContextType } from './TabsContext';\nimport { TabsContext, TabsContextDefaultValue } from './TabsContext';\nimport { globalClasses, horizontalStyles, styles, verticalStyles } from './Tab.styles';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport const TabDataTids = {\n  root: 'Tab__root',\n} as const;\n\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  component?: React.ComponentType<any> | string;\n\n  /** Задает HTML-атрибут `href` - адрес, на который следует перейти. */\n  href?: string;\n\n  /** Задает уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран. */\n  id?: T;\n\n  /**`HTML`-событие `onclick`. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /** `HTML`-событие `onkeydown`. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /** Делает компонент недоступным. */\n  disabled?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\". */\n  error?: boolean;\n\n  /** Переводит контрол в состояние валидации \"предупреждение\". */\n  warning?: boolean;\n\n  /** Устанавливает визульное состояние валидации \"успех\". */\n  success?: boolean;\n\n  /** Задает визульное состояние главного элемента. */\n  primary?: boolean;\n}\n\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;\n\n/**\n * Вложенный элемент компонента Tabs.\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n  public static __KONTUR_REACT_UI__ = 'Tab';\n  public static displayName = 'Tab';\n\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public static defaultProps: DefaultProps = {\n    component: 'a',\n    href: '',\n  };\n\n  private getProps = createPropsGetter(Tab.defaultProps);\n\n  public state: TabState = {\n    focusedByKeyboard: false,\n  };\n\n  private theme!: Theme;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: TabProps<T>) {\n    super(props);\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n  }\n\n  public componentDidMount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.addTab(id, this.getTabInstance);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.context.activeTab === this.props.id) {\n      this.context.notifyUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.removeTab(id);\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getIndicators() {\n    return {\n      error: Boolean(this.props.error),\n      warning: Boolean(this.props.warning),\n      success: Boolean(this.props.success),\n      primary: Boolean(this.props.primary),\n      disabled: Boolean(this.props.disabled),\n    };\n  }\n\n  public getUnderlyingNode = () => this.tabComponent;\n\n  private renderMain() {\n    const {\n      children,\n      disabled,\n      error,\n      warning,\n      success,\n      primary,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n    } = this.props;\n    const { component: Component, href } = this.getProps();\n\n    let isActive = false;\n    let isVertical = false;\n\n    const id = this.getId();\n    if (typeof id === 'string') {\n      isActive = this.context.activeTab === this.getId();\n      isVertical = this.context.vertical;\n    }\n    const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n    return (\n      <CommonWrapper\n        rootNodeRef={this.setRootNode}\n        {...getVisualStateDataAttributes({ active: isActive, disabled })}\n        {...this.props}\n      >\n        <Component\n          data-tid={TabDataTids.root}\n          className={cx({\n            [styles.rootSmall(this.theme)]: this.context.size === 'small',\n            [styles.rootMedium(this.theme)]: this.context.size === 'medium',\n            [styles.rootLarge(this.theme)]: this.context.size === 'large',\n            [styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n            [styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n            [styles.verticalLarge(this.theme)]: !!isVertical && this.context.size === 'large',\n            [orientationStyles.primary(this.theme)]: !!primary,\n            [orientationStyles.success(this.theme)]: !!success,\n            [orientationStyles.warning(this.theme)]: !!warning,\n            [orientationStyles.error(this.theme)]: !!error,\n            [styles.active()]: !!isActive,\n            [orientationStyles.active(this.theme)]: !!isActive,\n            [styles.disabled(this.theme)]: !!disabled,\n            [orientationStyles.disabled()]: !!disabled,\n          })}\n          onBlur={this.handleBlur}\n          onClick={this.switchTab}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={disabled ? -1 : 0}\n          ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n          href={href}\n          aria-describedby={ariaDescribedby}\n          aria-label={ariaLabel}\n        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && (\n            <div\n              className={cx(globalClasses.focus, {\n                [styles.focusSmall(this.theme)]: this.context.size === 'small',\n                [styles.focusMedium(this.theme)]: this.context.size === 'medium',\n                [styles.focusLarge(this.theme)]: this.context.size === 'large',\n              })}\n            />\n          )}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.getProps().href;\n\n  private refTabComponent = (instance: React.ReactElement<any>) => {\n    this.tabComponent = instance;\n  };\n\n  private getTabInstance = () => this;\n\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      event.preventDefault();\n      return;\n    }\n    const { href, component } = this.getProps();\n\n    const id = this.props.id || href;\n    if (this.props.onClick) {\n      this.props.onClick(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n    }\n    if (typeof id === 'string') {\n      this.context.switchTab(id);\n    }\n    if (component === 'a' && !href) {\n      event.preventDefault();\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n      if (e.defaultPrevented) {\n        return;\n      }\n    }\n    const id = this.getId();\n    if (typeof id !== 'string') {\n      return;\n    }\n    if (!isKeyArrow(e)) {\n      return;\n    }\n    e.preventDefault();\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n    this.context.shiftFocus(id, delta);\n  };\n\n  private handleFocus = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    // focus event fires before keyDown eventlistener\n    // so we should check focusKeyPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed || keyListener.isArrowPressed) {\n        this.setState({ focusedByKeyboard: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/Tabs/Tab.md

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

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

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