@skbkontur/react-ui 5.6.0 → 5.6.1-85c65.0

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

@@ -1 +1 @@
-{"version":3,"names":["React","throttle","globalObject","isInstanceOf","LayoutEvents","ThemeContext","cx","getRootNode","rootNode","getDOMRect","styles","TabsContext","TabsDataTids","Indicator","_class","_Indicator","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","context","state","eventListener","removeTabUpdatesListener","reflow","_this$context","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","_inheritsLoose","_proto","prototype","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","render","_this2","createElement","Consumer","theme","renderMain","_this$context2","indicators","getIndicators","error","warning","success","primary","disabled","indicatorRoot","className","root","style","ref","setRootNode","htmlNode","HTMLElement","rect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","Component","contextType"],"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":"6FAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,iBAAiB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;;AAEvD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,OAAO,KAAKC,YAAY,MAAM,wBAAwB;;AAEtD,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAASC,EAAE,QAAQ,2BAA2B;;AAE9C,SAASC,WAAW,EAAEC,QAAQ,QAAQ,oBAAoB;AAC1D,SAASC,UAAU,QAAQ,0BAA0B;;AAErD,SAASC,MAAM,QAAQ,oBAAoB;;AAE3C,SAASC,WAAW,QAAQ,eAAe;;AAE3C,SAASC,YAAY,QAAQ,QAAQ;;;;;;;;;;;;;;AAcrC;AACaC,SAAS,GADrBL,QAAQ,CAAAM,MAAA,IAAAC,UAAA,0BAAAC,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;MAC7BlB,MAAM,EAAE,CAAC;IACX,CAAC,CAAAO,KAAA;;;;IAIOY,aAAa;;IAEhB,IAAI,CAAAZ,KAAA;;IAEDa,wBAAwB,GAAyB,IAAI,CAAAb,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+DrDc,MAAM,GAAG9B,QAAQ,CAAC,YAAM;MAC9B,IAAA+B,aAAA,GAA8Bf,KAAA,CAAKU,OAAO,CAAlCM,MAAM,GAAAD,aAAA,CAANC,MAAM,CAAEC,SAAS,GAAAF,aAAA,CAATE,SAAS;MACzB,IAAMC,IAAI,GAAGF,MAAM,CAACC,SAAS,CAAC;MAC9B,IAAME,UAAU,GAAGnB,KAAA,CAAKoB,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,KAAKvB,KAAA,CAAKW,KAAK,CAAClB,MAAM,CAAC8B,IAAI,CAA8B;MAClH,CAAC;MACD,IAAIF,aAAa,EAAE;QACjBrB,KAAA,CAAKwB,QAAQ,CAAC,EAAE/B,MAAM,EAAE0B,UAAU,CAAC,CAAC,CAAC;MACvC;IACF,CAAC,EAAE,GAAG,CAAC,QAAAnB,KAAA,EAAAyB,cAAA,CAAA7B,SAAA,EAAAG,gBAAA,MAAA2B,MAAA,GAAA9B,SAAA,CAAA+B,SAAA,CAAAD,MAAA,CArEAE,iBAAiB,GAAxB,SAAAA,kBAAA,EAA2B,CACzB,IAAI,CAAChB,aAAa,GAAGzB,YAAY,CAAC0C,WAAW,CAAC,IAAI,CAACf,MAAM,CAAC,CAC1D,IAAI,CAACD,wBAAwB,GAAG,IAAI,CAACiB,KAAK,CAACC,UAAU,CAACC,EAAE,CAAC,IAAI,CAAClB,MAAM,CAAC,CACrE,IAAI,CAACA,MAAM,CAAC,CAAC,CACf,CAAC,CAAAY,MAAA,CAEMO,oBAAoB,GAA3B,SAAAA,qBAAA,EAA8B,CAC5B,IAAI,CAACnB,MAAM,CAACoB,MAAM,CAAC,CAAC,CAEpB,IAAI,IAAI,CAACtB,aAAa,EAAE,CACtB,IAAI,CAACA,aAAa,CAACuB,MAAM,CAAC,CAAC,CAC7B,CACA,IAAI,IAAI,CAACtB,wBAAwB,EAAE,CACjC,IAAI,CAACA,wBAAwB,CAAC,CAAC,CACjC,CACF,CAAC,CAAAa,MAAA,CAEMU,kBAAkB,GAAzB,SAAAA,mBAAA,EAA4B,CAC1B,IAAI,CAACtB,MAAM,CAAC,CAAC,CACf,CAAC,CAAAY,MAAA,CAEMW,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA,QACd,oBACEvD,KAAA,CAAAwD,aAAA,CAACnD,YAAY,CAACoD,QAAQ,QACnB,UAACC,KAAK,EAAK,CACVH,MAAI,CAACG,KAAK,GAAGA,KAAK,CAClB,OAAOH,MAAI,CAACI,UAAU,CAAC,CAAC,CAC1B,CACqB,CAAC,CAE5B,CAAC,CAAAhB,MAAA,CAEOgB,UAAU,GAAlB,SAAAA,WAAA,EAAqB,CACnB,IAAAC,cAAA,GAA8B,IAAI,CAACjC,OAAO,CAAlCM,MAAM,GAAA2B,cAAA,CAAN3B,MAAM,CAAEC,SAAS,GAAA0B,cAAA,CAAT1B,SAAS,CACzB,IAAMC,IAAI,GAAGF,MAAM,CAACC,SAAS,CAAC,CAC9B,IAAM2B,UAAyB,GAAI1B,IAAI,IAAIA,IAAI,CAAC2B,aAAa,IAAI3B,IAAI,CAAC2B,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,oBACEnE,KAAA,CAAAwD,aAAA,UACE,YAAU5C,YAAY,CAACwD,aAAc,EACrCC,SAAS,EAAE/D,EAAE,CACXI,MAAM,CAAC4D,IAAI,CAAC,IAAI,CAACZ,KAAK,CAAC,EACvBG,UAAU,CAACK,OAAO,IAAIxD,MAAM,CAACwD,OAAO,CAAC,IAAI,CAACR,KAAK,CAAC,EAChDG,UAAU,CAACI,OAAO,IAAIvD,MAAM,CAACuD,OAAO,CAAC,IAAI,CAACP,KAAK,CAAC,EAChDG,UAAU,CAACG,OAAO,IAAItD,MAAM,CAACsD,OAAO,CAAC,IAAI,CAACN,KAAK,CAAC,EAChDG,UAAU,CAACE,KAAK,IAAIrD,MAAM,CAACqD,KAAK,CAAC,IAAI,CAACL,KAAK,CAAC,EAC5C,IAAI,CAACX,KAAK,CAACsB,SACb,CAAE,EACFE,KAAK,EAAE,IAAI,CAAC3C,KAAK,CAAClB,MAAO,EACzB8D,GAAG,EAAE,IAAI,CAACC,WAAY,EACvB,CAAC,CAEN,CAAC,CAAA9B,MAAA;;EAcON,SAAS,GAAjB,SAAAA,UAAkBF,IAAS,EAAuB;IAChD,IAAMuC,QAAQ,GAAGnE,WAAW,CAAC4B,IAAI,CAAC;;IAElC,IAAIhC,YAAY,CAACuE,QAAQ,EAAExE,YAAY,CAACyE,WAAW,CAAC,EAAE;MACpD,IAAMC,IAAI,GAAGnE,UAAU,CAACiE,QAAQ,CAAC;MACjC,IAAI,IAAI,CAAC3B,KAAK,CAAC8B,QAAQ,EAAE;QACvB,OAAO;UACLC,KAAK,EAAE,IAAI,CAACpB,KAAK,CAACqB,cAAc;UAChCC,IAAI,EAAEN,QAAQ,CAACO,UAAU;UACzBC,GAAG,EAAER,QAAQ,CAACS,SAAS;UACvBC,MAAM,EAAER,IAAI,CAACS,MAAM,GAAGT,IAAI,CAACM;QAC7B,CAAC;MACH;;MAEA,IAAMH,cAAc,GAAGO,QAAQ,CAAC,IAAI,CAAC5B,KAAK,CAACqB,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;MACnE,OAAO;QACLC,IAAI,EAAEN,QAAQ,CAACO,UAAU;QACzBC,GAAG,EAAER,QAAQ,CAACa,YAAY,GAAGb,QAAQ,CAACS,SAAS,GAAGJ,cAAc;QAChED,KAAK,EAAEF,IAAI,CAACY,KAAK,GAAGZ,IAAI,CAACI;MAC3B,CAAC;IACH;;IAEA,OAAO,CAAC,CAAC;EACX,CAAC,QAAAnE,SAAA,GAhH4Bb,KAAK,CAACyF,SAAS,GAAA1E,UAAA,CAC9B2E,WAAW,GAAG/E,WAAW,EAAAI,UAAA,MAAAD,MAAA","ignoreList":[]}
+{"version":3,"names":["React","throttle","isInstanceOf","LayoutEvents","ThemeContext","getRootNode","rootNode","getDOMRect","withRenderEnvironment","getStyles","TabsContext","TabsDataTids","Indicator","_class","_Indicator","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","context","state","styles","eventListener","removeTabUpdatesListener","reflow","_this$context","getTab","activeTab","node","nodeStyles","stylesUpdated","some","prop","setState","_inheritsLoose","_proto","prototype","componentDidMount","addListener","globalObject","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","render","_this2","emotion","createElement","Consumer","theme","renderMain","_this$context2","indicators","getIndicators","error","warning","success","primary","disabled","indicatorRoot","className","cx","root","style","ref","setRootNode","htmlNode","HTMLElement","rect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","Component","contextType"],"sources":["Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport throttle from 'lodash.throttle';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\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';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\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@withRenderEnvironment\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 emotion!: Emotion;\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(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\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={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":[]}

package/components/Tabs/Indicator.d.ts

@@ -15,6 +15,10 @@ export declare class Indicator extends React.Component<IndicatorProps, Indicator
     static contextType: React.Context<TabsContextType<any>>;
     context: TabsContextType;
     state: IndicatorState;
+    private globalObject;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     private eventListener;
     private removeTabUpdatesListener;

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

@@ -1,20 +1,23 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-export var styles = memoizeStyle({
-  root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      height: ", ";\n      position: absolute;\n      transition: all 0.2s ease-out;\n      border-radius: ", ";\n    "])), t.tabColorFocus, t.tabBorderWidth, t.tabIndicatorBorderRadius);
-  },
-  primary: function primary(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorPrimary);
-  },
-  success: function success(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorSuccess);
-  },
-  warning: function warning(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorWarning);
-  },
-  error: function error(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorError);
-  }
+import { memoizeGetStyles } from "../../../lib/theming/Emotion";
+export var getStyles = memoizeGetStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    root: function root(t) {
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      height: ", ";\n      position: absolute;\n      transition: all 0.2s ease-out;\n      border-radius: ", ";\n    "])), t.tabColorFocus, t.tabBorderWidth, t.tabIndicatorBorderRadius);
+    },
+    primary: function primary(t) {
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorPrimary);
+    },
+    success: function success(t) {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorSuccess);
+    },
+    warning: function warning(t) {
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorWarning);
+    },
+    error: function error(t) {
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.tabColorError);
+    }
+  };
 });

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

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","root","t","_templateObject","_taggedTemplateLiteralLoose","tabColorFocus","tabBorderWidth","tabIndicatorBorderRadius","primary","_templateObject2","tabColorPrimary","success","_templateObject3","tabColorSuccess","warning","_templateObject4","tabColorWarning","error","_templateObject5","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":"4LAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOJ,GAAG,CAAAK,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACMF,CAAC,CAACG,aAAa;IACnBH,CAAC,CAACI,cAAc;;;IAGTJ,CAAC,CAACK,wBAAwB;;EAE/C,CAAC;;EAEDC,OAAO,WAAAA,QAACN,CAAQ,EAAE;IAChB,OAAOJ,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;IACMF,CAAC,CAACQ,eAAe;;EAEnC,CAAC;;EAEDC,OAAO,WAAAA,QAACT,CAAQ,EAAE;IAChB,OAAOJ,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;IACMF,CAAC,CAACW,eAAe;;EAEnC,CAAC;;EAEDC,OAAO,WAAAA,QAACZ,CAAQ,EAAE;IAChB,OAAOJ,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;IACMF,CAAC,CAACc,eAAe;;EAEnC,CAAC;;EAEDC,KAAK,WAAAA,MAACf,CAAQ,EAAE;IACd,OAAOJ,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;IACMF,CAAC,CAACiB,aAAa;;EAEjC;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["memoizeGetStyles","getStyles","_ref","css","root","t","_templateObject","_taggedTemplateLiteralLoose","tabColorFocus","tabBorderWidth","tabIndicatorBorderRadius","primary","_templateObject2","tabColorPrimary","success","_templateObject3","tabColorSuccess","warning","_templateObject4","tabColorWarning","error","_templateObject5","tabColorError"],"sources":["Indicator.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\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":";;AAEA,SAASA,gBAAgB,QAAQ,2BAA2B;;;AAG5D,OAAO,IAAMC,SAAS,GAAGD,gBAAgB,CAAC,UAAAE,IAAA,OAAGC,GAAG,GAAAD,IAAA,CAAHC,GAAG,QAAiB;IAC/DC,IAAI,WAAAA,KAACC,CAAQ,EAAE;MACb,OAAOF,GAAG,CAAAG,eAAA,KAAAA,eAAA,GAAAC,2BAAA;MACMF,CAAC,CAACG,aAAa;MACnBH,CAAC,CAACI,cAAc;;;MAGTJ,CAAC,CAACK,wBAAwB;;IAE/C,CAAC;;IAEDC,OAAO,WAAAA,QAACN,CAAQ,EAAE;MAChB,OAAOF,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;MACMF,CAAC,CAACQ,eAAe;;IAEnC,CAAC;;IAEDC,OAAO,WAAAA,QAACT,CAAQ,EAAE;MAChB,OAAOF,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;MACMF,CAAC,CAACW,eAAe;;IAEnC,CAAC;;IAEDC,OAAO,WAAAA,QAACZ,CAAQ,EAAE;MAChB,OAAOF,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;MACMF,CAAC,CAACc,eAAe;;IAEnC,CAAC;;IAEDC,KAAK,WAAAA,MAACf,CAAQ,EAAE;MACd,OAAOF,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;MACMF,CAAC,CAACiB,aAAa;;IAEjC;EACF,CAAC,EAAC,CAAC","ignoreList":[]}

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

@@ -1,8 +1,8 @@
 import type { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
     root(t: Theme): string;
     primary(t: Theme): string;
     success(t: Theme): string;
     warning(t: Theme): string;
     error(t: Theme): string;
-};
+}>;

package/components/Tabs/Tab/Tab.js

@@ -3,19 +3,18 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _Tab;
 import React from 'react';
 import invariant from 'invariant';
-import { globalObject } from '@skbkontur/global-object';
 import { ResizeDetector } from "../../../internal/ResizeDetector";
 import { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from "../../../lib/events/keyboard/identifiers";
-import { keyListener } from "../../../lib/events/keyListener";
+import { KeyListener } from "../../../lib/events/keyListener";
 import { isFunctionalComponent } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { getVisualStateDataAttributes } from "../../../internal/CommonWrapper/utils/getVisualStateDataAttributes";
+import { withRenderEnvironment } from "../../../lib/renderEnvironment";
 import { TabsContext, TabsContextDefaultValue } from "../TabsContext";
-import { globalClasses, horizontalStyles, styles, verticalStyles } from "../Tab.styles";
+import { globalClasses, getHorizontalStyles, getStyles, getVerticalStyles } from "../Tab.styles";
 export var TabDataTids = {
   root: 'Tab__root'
 };
@@ -23,7 +22,7 @@ export var TabDataTids = {
 /**
  * Вложенный элемент компонента Tabs.
  */
-export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Component) {
+export var Tab = withRenderEnvironment(_class = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Component) {
   function Tab(props) {
     var _this;
     _this = _React$Component.call(this, props) || this;
@@ -33,9 +32,6 @@ export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Compone
       focusedByKeyboard: false
     };
     _this.tabComponent = null;
-    _this.getUnderlyingNode = function () {
-      return _this.tabComponent;
-    };
     _this.getId = function () {
       return _this.props.id || _this.getProps().href;
     };
@@ -95,8 +91,8 @@ export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Compone
 
       // focus event fires before keyDown eventlistener
       // so we should check focusKeyPressed in async way
-      globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
-        if (keyListener.isTabPressed || keyListener.isArrowPressed) {
+      _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {
+        if (_this.keyListener.isTabPressed || _this.keyListener.isArrowPressed) {
           _this.setState({
             focusedByKeyboard: true
           });
@@ -117,6 +113,7 @@ export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Compone
   _inheritsLoose(Tab, _React$Component);
   var _proto = Tab.prototype;
   _proto.componentDidMount = function componentDidMount() {
+    this.keyListener = new KeyListener(this.globalObject);
     var id = this.getId();
     if (typeof id === 'string') {
       this.context.addTab(id, this.getTabInstance);
@@ -135,6 +132,9 @@ export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Compone
   };
   _proto.render = function render() {
     var _this2 = this;
+    this.styles = getStyles(this.emotion);
+    this.horizontalStyles = getHorizontalStyles(this.emotion);
+    this.verticalStyles = getVerticalStyles(this.emotion);
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
       return _this2.renderMain();
@@ -149,8 +149,11 @@ export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Compone
       disabled: Boolean(this.props.disabled)
     };
   };
+  _proto.getUnderlyingNode = function getUnderlyingNode() {
+    return this.tabComponent;
+  };
   _proto.renderMain = function renderMain() {
-    var _cx, _cx2;
+    var _this$cx, _this$cx2;
     var _this$props = this.props,
       children = _this$props.children,
       disabled = _this$props.disabled,
@@ -170,7 +173,7 @@ export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Compone
       isActive = this.context.activeTab === this.getId();
       isVertical = this.context.vertical;
     }
-    var orientationStyles = isVertical ? verticalStyles : horizontalStyles;
+    var orientationStyles = isVertical ? this.verticalStyles : this.horizontalStyles;
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, getVisualStateDataAttributes({
@@ -178,7 +181,7 @@ export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Compone
       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.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,
@@ -191,11 +194,11 @@ export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Compone
     }, /*#__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.cx(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.Component), _Tab.__KONTUR_REACT_UI__ = 'Tab', _Tab.displayName = 'Tab', _Tab.contextType = TabsContext, _Tab.defaultProps = {
   component: 'a',
   href: ''
-}, _Tab)) || _class;
+}, _Tab)) || _class) || _class;

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

@@ -1 +1 @@
-{"version":3,"names":["React","invariant","globalObject","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","getVisualStateDataAttributes","TabsContext","TabsContextDefaultValue","globalClasses","horizontalStyles","styles","verticalStyles","TabDataTids","root","Tab","_class","_Tab","_React$Component","props","_this","call","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","_this$getProps","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","_inheritsLoose","_proto","prototype","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","_this2","createElement","Consumer","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","_cx","_cx2","_this$props","children","ariaDescribedby","ariaLabel","_this$getProps2","Component","isActive","isVertical","vertical","orientationStyles","_extends","rootNodeRef","setRootNode","active","className","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","onBlur","onFocus","tabIndex","ref","onResize","focus","focusSmall","focusMedium","focusLarge","__KONTUR_REACT_UI__","displayName","contextType"],"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":[]}
+{"version":3,"names":["React","invariant","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","KeyListener","isFunctionalComponent","ThemeContext","CommonWrapper","rootNode","createPropsGetter","getVisualStateDataAttributes","withRenderEnvironment","TabsContext","TabsContextDefaultValue","globalClasses","getHorizontalStyles","getStyles","getVerticalStyles","TabDataTids","root","Tab","_class","_Tab","_React$Component","props","_this","call","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","_this$getProps","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","isArrowPressed","setState","handleBlur","_inheritsLoose","_proto","prototype","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","_this2","styles","emotion","horizontalStyles","verticalStyles","createElement","Consumer","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","getUnderlyingNode","_this$cx","_this$cx2","_this$props","children","ariaDescribedby","ariaLabel","_this$getProps2","Component","isActive","isVertical","vertical","orientationStyles","_extends","rootNodeRef","setRootNode","active","className","cx","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","onBlur","onFocus","tabIndex","ref","onResize","focus","focusSmall","focusMedium","focusLarge","__KONTUR_REACT_UI__","displayName","contextType"],"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 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';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\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@withRenderEnvironment\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 emotion!: Emotion;\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(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n    this.horizontalStyles = getHorizontalStyles(this.emotion);\n    this.verticalStyles = getVerticalStyles(this.emotion);\n\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(): TabIndicators {\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(): Nullable<React.ReactElement<Tab<T>>> {\n    return this.tabComponent;\n  }\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":[]}

package/components/Tabs/Tab.d.ts

@@ -52,23 +52,24 @@ export declare class Tab<T extends string = string> extends React.Component<TabP
     static defaultProps: DefaultProps;
     private getProps;
     state: TabState;
+    private globalObject;
+    private emotion;
+    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;
     componentWillUnmount(): void;
     render(): React.JSX.Element;
-    getIndicators(): {
-        error: boolean;
-        warning: boolean;
-        success: boolean;
-        primary: boolean;
-        disabled: boolean;
-    };
-    getUnderlyingNode: () => Nullable<React.ReactElement<Tab<T>, string | React.JSXElementConstructor<any>>>;
+    getIndicators(): TabIndicators;
+    getUnderlyingNode(): Nullable<React.ReactElement<Tab<T>>>;
     private renderMain;
     private getId;
     private refTabComponent;

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

@@ -1,92 +1,103 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-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";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+import { memoizeGetStyles, prefix } from "../../../lib/theming/Emotion";
 import { shift } from "../../../lib/styles/DimensionFunctions";
 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: color-mix(in srgb, ", ", transparent 50%);\n      cursor: default;\n    "])), t.tabTextColorDefault);
-  },
-  active: function active() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
-  }
+export var getStyles = memoizeGetStyles(function (emotion) {
+  return {
+    rootSmall: function rootSmall(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabRoot(t, 'small', emotion));
+    },
+    rootMedium: function rootMedium(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabRoot(t, 'medium', emotion));
+    },
+    rootLarge: function rootLarge(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabRoot(t, 'large', emotion));
+    },
+    verticalSmall: function verticalSmall(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabVertical(t, 'small', emotion));
+    },
+    verticalMedium: function verticalMedium(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabVertical(t, 'medium', emotion));
+    },
+    verticalLarge: function verticalLarge(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabVertical(t, 'large', emotion));
+    },
+    focusSmall: function focusSmall(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabFocus(t, 'small', emotion));
+    },
+    focusMedium: function focusMedium(t) {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabFocus(t, 'medium', emotion));
+    },
+    focusLarge: function focusLarge(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), tabFocus(t, 'large', emotion));
+    },
+    disabled: function disabled(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: color-mix(in srgb, ", ", transparent 50%);\n      cursor: default;\n    "])), t.tabTextColorDefault);
+    },
+    active: function active() {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n      "])));
+    }
+  };
 });
-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 getHorizontalStyles = memoizeGetStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    active: function active(t) {
+      return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+    },
+    disabled: function disabled() {
+      return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
+    },
+    primary: function primary(t) {
+      return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+    },
+    success: function success(t) {
+      return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+    },
+    warning: function warning(t) {
+      return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+    },
+    error: function error(t) {
+      return css(_templateObject17 || (_templateObject17 = _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);
-  }
+export var getVerticalStyles = memoizeGetStyles(function (_ref2) {
+  var css = _ref2.css;
+  return {
+    active: function active(t) {
+      return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+    },
+    disabled: function disabled() {
+      return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
+    },
+    primary: function primary(t) {
+      return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+    },
+    success: function success(t) {
+      return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+    },
+    warning: function warning(t) {
+      return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+    },
+    error: function error(t) {
+      return css(_templateObject23 || (_templateObject23 = _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 tabRoot(t, size, _ref3) {
+  var css = _ref3.css;
+  return css(_templateObject24 || (_templateObject24 = _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 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 tabVertical(t, size, _ref4) {
+  var css = _ref4.css;
+  return css(_templateObject25 || (_templateObject25 = _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 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));
+function tabFocus(t, size, _ref5) {
+  var css = _ref5.css;
+  return css(_templateObject26 || (_templateObject26 = _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));
 }