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

package/components/Switcher/Switcher.styles/Switcher.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.styles.ts"],"names":["css","memoizeStyle","styles","wrap","input","label","error","t","borderColorError","jsStyles"],"mappings":"6+BAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOH,GAAP;;;;AAID,GANY;;AAQbI,EAAAA,KARa,mBAQL;AACN,WAAOJ,GAAP;;;;;;AAMD,GAfY;;AAiBbK,EAAAA,KAjBa,mBAiBL;AACN,WAAOL,GAAP;;;;;AAKD,GAvBY;;AAyBbM,EAAAA,KAzBa,iBAyBPC,CAzBO,EAyBG;AACd,WAAOP,GAAP;;AAE0BO,IAAAA,CAAC,CAACC,gBAF5B;;AAID,GA9BY,EAAf;;;AAiCA,OAAO,IAAMC,QAAQ,GAAGR,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  wrap() {\r\n    return css`\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n    `;\r\n  },\r\n\r\n  input() {\r\n    return css`\r\n      height: 0;\r\n      opacity: 0;\r\n      position: absolute;\r\n      width: 0;\r\n    `;\r\n  },\r\n\r\n  label() {\r\n    return css`\r\n      margin-right: 15px;\r\n      vertical-align: middle;\r\n      display: inline-block;\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      border-radius: 2px;\r\n      box-shadow: 0 0 0 2px ${t.borderColorError};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Switcher.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","css","wrap","input","caption","t","switcherTextColor","captionSmall","switcherCaptionGapSmall","switcherCaptionFontSizeSmall","switcherCaptionLineHeightSmall","captionMedium","switcherCaptionGapMedium","switcherCaptionFontSizeMedium","switcherCaptionLineHeightMedium","captionLarge","switcherCaptionGapLarge","switcherCaptionFontSizeLarge","switcherCaptionLineHeightLarge","error","insideWidth","parseInt","btnBorderWidth","outsideWidth","switcherOutlineWidth","switcherBorderRadius","borderColorError"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;;AAGA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;AAGD,OALU;;AAOXC,MAAAA,IAPW,kBAOJ;AACL,eAAOH,OAAO,CAACE,GAAf;;;;AAID,OAZU;;AAcXE,MAAAA,KAdW,mBAcH;AACN,eAAOJ,OAAO,CAACE,GAAf;;;;;;AAMD,OArBU;;AAuBXG,MAAAA,OAvBW,mBAuBHC,CAvBG,EAuBO;AAChB,eAAON,OAAO,CAACE,GAAf;AACWI,QAAAA,CAAC,CAACC,iBADb;;;;AAKD,OA7BU;;AA+BXC,MAAAA,YA/BW,wBA+BEF,CA/BF,EA+BY;AACrB,eAAON,OAAO,CAACE,GAAf;AACkBI,QAAAA,CAAC,CAACG,uBADpB;AAEeH,QAAAA,CAAC,CAACI,4BAFjB;AAGiBJ,QAAAA,CAAC,CAACK,8BAHnB;;AAKD,OArCU;;AAuCXC,MAAAA,aAvCW,yBAuCGN,CAvCH,EAuCa;AACtB,eAAON,OAAO,CAACE,GAAf;AACkBI,QAAAA,CAAC,CAACO,wBADpB;AAEeP,QAAAA,CAAC,CAACQ,6BAFjB;AAGiBR,QAAAA,CAAC,CAACS,+BAHnB;;AAKD,OA7CU;;AA+CXC,MAAAA,YA/CW,wBA+CEV,CA/CF,EA+CY;AACrB,eAAON,OAAO,CAACE,GAAf;AACkBI,QAAAA,CAAC,CAACW,uBADpB;AAEeX,QAAAA,CAAC,CAACY,4BAFjB;AAGiBZ,QAAAA,CAAC,CAACa,8BAHnB;;AAKD,OArDU;;AAuDXC,MAAAA,KAvDW,iBAuDLd,CAvDK,EAuDK;AACd,YAAMe,WAAW,GAAGC,QAAQ,CAAChB,CAAC,CAACiB,cAAH,CAA5B;AACA,YAAMC,YAAY,GAAMF,QAAQ,CAAChB,CAAC,CAACmB,oBAAH,CAAR,GAAmCJ,WAAzC,OAAlB;AACA,eAAOrB,OAAO,CAACE,GAAf;AACmBI,QAAAA,CAAC,CAACoB,oBADrB;AAE4BL,QAAAA,WAF5B,EAE6Cf,CAAC,CAACqB,gBAF/C,EAE0EH,YAF1E,EAE0FlB,CAAC,CAACqB,gBAF5F;;AAID,OA9DU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        line-height: normal;\n      `;\n    },\n\n    wrap() {\n      return emotion.css`\n        display: inline-block;\n        vertical-align: middle;\n      `;\n    },\n\n    input() {\n      return emotion.css`\n        height: 0;\n        opacity: 0;\n        position: absolute;\n        width: 0;\n      `;\n    },\n\n    caption(t: Theme) {\n      return emotion.css`\n        color: ${t.switcherTextColor};\n        vertical-align: middle;\n        display: inline-block;\n      `;\n    },\n\n    captionSmall(t: Theme) {\n      return emotion.css`\n        margin-right: ${t.switcherCaptionGapSmall};\n        font-size: ${t.switcherCaptionFontSizeSmall};\n        line-height: ${t.switcherCaptionLineHeightSmall};\n      `;\n    },\n\n    captionMedium(t: Theme) {\n      return emotion.css`\n        margin-right: ${t.switcherCaptionGapMedium};\n        font-size: ${t.switcherCaptionFontSizeMedium};\n        line-height: ${t.switcherCaptionLineHeightMedium};\n      `;\n    },\n\n    captionLarge(t: Theme) {\n      return emotion.css`\n        margin-right: ${t.switcherCaptionGapLarge};\n        font-size: ${t.switcherCaptionFontSizeLarge};\n        line-height: ${t.switcherCaptionLineHeightLarge};\n      `;\n    },\n\n    error(t: Theme) {\n      const insideWidth = parseInt(t.btnBorderWidth);\n      const outsideWidth = `${parseInt(t.switcherOutlineWidth) - insideWidth}px`;\n      return emotion.css`\n        border-radius: ${t.switcherBorderRadius};\n        box-shadow: inset 0 0 0 ${insideWidth}px ${t.borderColorError}, 0 0 0 ${outsideWidth} ${t.borderColorError};\n      `;\n    },\n  });\n"]}

package/components/Switcher/Switcher.styles.d.ts

@@ -1,6 +1,12 @@
-export declare const jsStyles: {
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    root(): string;
     wrap(): string;
     input(): string;
-    label(): string;
-    error(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    caption(t: Theme): string;
+    captionSmall(t: Theme): string;
+    captionMedium(t: Theme): string;
+    captionLarge(t: Theme): string;
+    error(t: Theme): string;
 };

package/components/Switcher/helpers/helpers.js

@@ -0,0 +1,3 @@
+export var mod = function mod(n, _mod) {
+  return (n % _mod + _mod) % _mod;
+};

package/components/Switcher/helpers/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["helpers.ts"],"names":["mod","n"],"mappings":"AAAA,OAAO,IAAMA,GAAG,GAAG,aAACC,CAAD,EAAYD,IAAZ,UAA4B,CAAEC,CAAC,GAAGD,IAAL,GAAYA,IAAb,IAAoBA,IAAhD,EAAZ","sourcesContent":["export const mod = (n: number, mod: number) => ((n % mod) + mod) % mod;\n"]}

package/components/Switcher/helpers/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Switcher/helpers.js",
+  "module": "helpers",
+  "types": "../helpers.d.ts",
+  "sideEffects": false
+}

package/components/Switcher/helpers.d.ts

@@ -0,0 +1 @@
+export declare const mod: (n: number, mod: number) => number;

package/components/Switcher/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from './Switcher';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from './Switcher';\n"]}

package/components/Switcher/switcherTheme/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Switcher/switcherTheme.js",
+  "module": "switcherTheme",
+  "types": "../switcherTheme.d.ts",
+  "sideEffects": false
+}

package/components/Switcher/switcherTheme/switcherTheme.js

@@ -0,0 +1,23 @@
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+export var getSwitcherTheme = function getSwitcherTheme(theme) {
+  return ThemeFactory.create({
+    btnBorderWidth: theme.switcherButtonBorderWidth,
+    btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,
+    btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,
+    btnLineHeightSmall: theme.switcherButtonLineHeightSmall,
+    btnFontSizeSmall: theme.switcherButtonFontSizeSmall,
+    btnPaddingXSmall: theme.switcherButtonPaddingXSmall,
+    btnPaddingYSmall: theme.switcherButtonPaddingYSmall,
+    btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,
+    btnLineHeightMedium: theme.switcherButtonLineHeightMedium,
+    btnFontSizeMedium: theme.switcherButtonFontSizeMedium,
+    btnPaddingXMedium: theme.switcherButtonPaddingXMedium,
+    btnPaddingYMedium: theme.switcherButtonPaddingYMedium,
+    btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,
+    btnLineHeightLarge: theme.switcherButtonLineHeightLarge,
+    btnFontSizeLarge: theme.switcherButtonFontSizeLarge,
+    btnPaddingXLarge: theme.switcherButtonPaddingXLarge,
+    btnPaddingYLarge: theme.switcherButtonPaddingYLarge,
+    btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge
+  }, theme);
+};

package/components/Switcher/switcherTheme/switcherTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["switcherTheme.ts"],"names":["ThemeFactory","getSwitcherTheme","theme","create","btnBorderWidth","switcherButtonBorderWidth","btnDisabledBorderColor","switcherButtonDisabledBorderColor","btnCheckedDisabledShadow","switcherButtonCheckedDisabledShadow","btnLineHeightSmall","switcherButtonLineHeightSmall","btnFontSizeSmall","switcherButtonFontSizeSmall","btnPaddingXSmall","switcherButtonPaddingXSmall","btnPaddingYSmall","switcherButtonPaddingYSmall","btnBorderRadiusSmall","switcherButtonBorderRadiusSmall","btnLineHeightMedium","switcherButtonLineHeightMedium","btnFontSizeMedium","switcherButtonFontSizeMedium","btnPaddingXMedium","switcherButtonPaddingXMedium","btnPaddingYMedium","switcherButtonPaddingYMedium","btnBorderRadiusMedium","switcherButtonBorderRadiusMedium","btnLineHeightLarge","switcherButtonLineHeightLarge","btnFontSizeLarge","switcherButtonFontSizeLarge","btnPaddingXLarge","switcherButtonPaddingXLarge","btnPaddingYLarge","switcherButtonPaddingYLarge","btnBorderRadiusLarge","switcherButtonBorderRadiusLarge"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;AAGA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOF,YAAY,CAACG,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEF,KAAK,CAACG,yBADxB;AAEEC,IAAAA,sBAAsB,EAAEJ,KAAK,CAACK,iCAFhC;AAGEC,IAAAA,wBAAwB,EAAEN,KAAK,CAACO,mCAHlC;;AAKEC,IAAAA,kBAAkB,EAAER,KAAK,CAACS,6BAL5B;AAMEC,IAAAA,gBAAgB,EAAEV,KAAK,CAACW,2BAN1B;AAOEC,IAAAA,gBAAgB,EAAEZ,KAAK,CAACa,2BAP1B;AAQEC,IAAAA,gBAAgB,EAAEd,KAAK,CAACe,2BAR1B;AASEC,IAAAA,oBAAoB,EAAEhB,KAAK,CAACiB,+BAT9B;;AAWEC,IAAAA,mBAAmB,EAAElB,KAAK,CAACmB,8BAX7B;AAYEC,IAAAA,iBAAiB,EAAEpB,KAAK,CAACqB,4BAZ3B;AAaEC,IAAAA,iBAAiB,EAAEtB,KAAK,CAACuB,4BAb3B;AAcEC,IAAAA,iBAAiB,EAAExB,KAAK,CAACyB,4BAd3B;AAeEC,IAAAA,qBAAqB,EAAE1B,KAAK,CAAC2B,gCAf/B;;AAiBEC,IAAAA,kBAAkB,EAAE5B,KAAK,CAAC6B,6BAjB5B;AAkBEC,IAAAA,gBAAgB,EAAE9B,KAAK,CAAC+B,2BAlB1B;AAmBEC,IAAAA,gBAAgB,EAAEhC,KAAK,CAACiC,2BAnB1B;AAoBEC,IAAAA,gBAAgB,EAAElC,KAAK,CAACmC,2BApB1B;AAqBEC,IAAAA,oBAAoB,EAAEpC,KAAK,CAACqC,+BArB9B,EADK;;AAwBLrC,EAAAA,KAxBK,CAAP;;AA0BD,CA3BM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getSwitcherTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      btnBorderWidth: theme.switcherButtonBorderWidth,\n      btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,\n      btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,\n\n      btnLineHeightSmall: theme.switcherButtonLineHeightSmall,\n      btnFontSizeSmall: theme.switcherButtonFontSizeSmall,\n      btnPaddingXSmall: theme.switcherButtonPaddingXSmall,\n      btnPaddingYSmall: theme.switcherButtonPaddingYSmall,\n      btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,\n\n      btnLineHeightMedium: theme.switcherButtonLineHeightMedium,\n      btnFontSizeMedium: theme.switcherButtonFontSizeMedium,\n      btnPaddingXMedium: theme.switcherButtonPaddingXMedium,\n      btnPaddingYMedium: theme.switcherButtonPaddingYMedium,\n      btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,\n\n      btnLineHeightLarge: theme.switcherButtonLineHeightLarge,\n      btnFontSizeLarge: theme.switcherButtonFontSizeLarge,\n      btnPaddingXLarge: theme.switcherButtonPaddingXLarge,\n      btnPaddingYLarge: theme.switcherButtonPaddingYLarge,\n      btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge,\n    },\n    theme,\n  );\n};\n"]}

package/components/Switcher/switcherTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const getSwitcherTheme: (theme: Theme) => Theme;

package/components/Tabs/Indicator/Indicator.js

@@ -1,15 +1,20 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import throttle from 'lodash.throttle';
-import cn from 'classnames';
+import { globalObject } from '@skbkontur/global-object';
+import { isInstanceOf } from "../../../lib/isInstanceOf";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { jsStyles } from "../Indicator.styles";
+import { getStyles } from "../Indicator.styles";
 import { TabsContext } from "../TabsContext";
-export var Indicator =
-/*#__PURE__*/
-function (_React$Component) {
+import { TabsDataTids } from "../Tabs";
+export var Indicator = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Indicator, _React$Component);
 
   function Indicator() {
@@ -24,11 +29,9 @@ function (_React$Component) {
     _this.state = {
       styles: {}
     };
-    _this.theme = void 0;
     _this.eventListener = null;
     _this.removeTabUpdatesListener = null;
-
-    _this.reflow = function () {
+    _this.reflow = throttle(function () {
       var _this$context = _this.context,
           getTab = _this$context.getTab,
           activeTab = _this$context.activeTab;
@@ -45,22 +48,20 @@ function (_React$Component) {
           styles: nodeStyles
         });
       }
-    };
-
-    _this.throttledReflow = throttle(_this.reflow, 100);
+    }, 100);
     return _this;
   }
 
   var _proto = Indicator.prototype;
 
   _proto.componentDidMount = function componentDidMount() {
-    this.eventListener = LayoutEvents.addListener(this.throttledReflow);
+    this.eventListener = LayoutEvents.addListener(this.reflow);
     this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);
     this.reflow();
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
-    this.throttledReflow.cancel();
+    this.reflow.cancel();
 
     if (this.eventListener) {
       this.eventListener.remove();
@@ -71,16 +72,19 @@ function (_React$Component) {
     }
   };
 
-  _proto.componentDidUpdate = function componentDidUpdate(_, prevState) {
+  _proto.componentDidUpdate = function componentDidUpdate() {
     this.reflow();
   };
 
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return _this2.renderMain();
+      });
     });
   };
 
@@ -96,32 +100,34 @@ function (_React$Component) {
       primary: false,
       disabled: false
     };
-    return React.createElement("div", {
-      className: cn(jsStyles.root(this.theme), indicators.primary && jsStyles.primary(this.theme), indicators.success && jsStyles.success(this.theme), indicators.warning && jsStyles.warning(this.theme), indicators.error && jsStyles.error(this.theme), this.props.className),
-      style: this.state.styles
+    var styles = getStyles(this.emotion);
+    return /*#__PURE__*/React.createElement("div", {
+      "data-tid": TabsDataTids.indicatorRoot,
+      className: this.emotion.cx(styles.root(this.theme), indicators.primary && styles.primary(this.theme), indicators.success && styles.success(this.theme), indicators.warning && styles.warning(this.theme), indicators.error && styles.error(this.theme), this.props.className),
+      style: this.state.styles,
+      ref: this.setRootNode
     });
   };
 
   _proto.getStyles = function getStyles(node) {
-    if (node instanceof React.Component) {
-      node = findDOMNode(node);
-    }
+    var htmlNode = getRootNode(node);
 
-    if (node instanceof HTMLElement) {
-      var rect = node.getBoundingClientRect();
+    if (isInstanceOf(htmlNode, globalObject.HTMLElement)) {
+      var rect = getDOMRect(htmlNode);
 
       if (this.props.vertical) {
         return {
           width: this.theme.tabBorderWidth,
-          left: node.offsetLeft,
-          top: node.offsetTop,
+          left: htmlNode.offsetLeft,
+          top: htmlNode.offsetTop,
           height: rect.bottom - rect.top
         };
       }
 
+      var tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;
       return {
-        left: node.offsetLeft,
-        top: node.offsetHeight + node.offsetTop - 3,
+        left: htmlNode.offsetLeft,
+        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,
         width: rect.right - rect.left
       };
     }
@@ -130,5 +136,4 @@ function (_React$Component) {
   };
 
   return Indicator;
-}(React.Component);
-Indicator.contextType = TabsContext;
+}(React.Component), _class2.contextType = TabsContext, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Indicator.tsx"],"names":["React","findDOMNode","throttle","cn","LayoutEvents","ThemeContext","jsStyles","TabsContext","Indicator","context","state","styles","theme","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","throttledReflow","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","_","prevState","render","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","root","className","Component","HTMLElement","rect","getBoundingClientRect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","offsetHeight","right","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { findDOMNode } from 'react-dom';\r\nimport throttle from 'lodash.throttle';\r\nimport cn from 'classnames';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './Indicator.styles';\r\nimport { TabsContext, TabsContextType } from './TabsContext';\r\nimport { TabIndicators } from './Tab';\r\n\r\nexport interface IndicatorProps {\r\n  className?: string;\r\n  tabUpdates: {\r\n    on: (x0: () => void) => () => void;\r\n  };\r\n  vertical: boolean;\r\n}\r\n\r\nexport interface IndicatorState {\r\n  styles: React.CSSProperties;\r\n}\r\n\r\nexport class Indicator extends React.Component<IndicatorProps, IndicatorState> {\r\n  public static contextType = TabsContext;\r\n  public context: TabsContextType = this.context;\r\n\r\n  public state: IndicatorState = {\r\n    styles: {},\r\n  };\r\n\r\n  private theme!: Theme;\r\n\r\n  private eventListener: Nullable<{\r\n    remove: () => void;\r\n  }> = null;\r\n\r\n  private removeTabUpdatesListener: Nullable<() => void> = null;\r\n\r\n  public componentDidMount() {\r\n    this.eventListener = LayoutEvents.addListener(this.throttledReflow);\r\n    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);\r\n    this.reflow();\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    this.throttledReflow.cancel();\r\n\r\n    if (this.eventListener) {\r\n      this.eventListener.remove();\r\n    }\r\n    if (this.removeTabUpdatesListener) {\r\n      this.removeTabUpdatesListener();\r\n    }\r\n  }\r\n\r\n  public componentDidUpdate(_: IndicatorProps, prevState: IndicatorState) {\r\n    this.reflow();\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { getTab, activeTab } = this.context;\r\n    const node = getTab(activeTab);\r\n    const indicators: TabIndicators = (node && node.getIndicators && node.getIndicators()) || {\r\n      error: false,\r\n      warning: false,\r\n      success: false,\r\n      primary: false,\r\n      disabled: false,\r\n    };\r\n    return (\r\n      <div\r\n        className={cn(\r\n          jsStyles.root(this.theme),\r\n          indicators.primary && jsStyles.primary(this.theme),\r\n          indicators.success && jsStyles.success(this.theme),\r\n          indicators.warning && jsStyles.warning(this.theme),\r\n          indicators.error && jsStyles.error(this.theme),\r\n          this.props.className,\r\n        )}\r\n        style={this.state.styles}\r\n      />\r\n    );\r\n  }\r\n\r\n  private reflow = () => {\r\n    const { getTab, activeTab } = this.context;\r\n    const node = getTab(activeTab);\r\n    const nodeStyles = this.getStyles(node);\r\n    const stylesUpdated = ['left', 'top', 'width', 'height'].some(\r\n      prop => nodeStyles[prop as keyof React.CSSProperties] !== this.state.styles[prop as keyof React.CSSProperties],\r\n    );\r\n    if (stylesUpdated) {\r\n      this.setState({ styles: nodeStyles });\r\n    }\r\n  };\r\n\r\n  private throttledReflow = throttle(this.reflow, 100);\r\n\r\n  private getStyles(node: any): React.CSSProperties {\r\n    if (node instanceof React.Component) {\r\n      node = findDOMNode(node);\r\n    }\r\n\r\n    if (node instanceof HTMLElement) {\r\n      const rect = node.getBoundingClientRect();\r\n      if (this.props.vertical) {\r\n        return {\r\n          width: this.theme.tabBorderWidth,\r\n          left: node.offsetLeft,\r\n          top: node.offsetTop,\r\n          height: rect.bottom - rect.top,\r\n        };\r\n      }\r\n\r\n      return {\r\n        left: node.offsetLeft,\r\n        top: node.offsetHeight + node.offsetTop - 3,\r\n        width: rect.right - rect.left,\r\n      };\r\n    }\r\n\r\n    return {};\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Indicator.tsx"],"names":["React","throttle","globalObject","isInstanceOf","LayoutEvents","EmotionConsumer","getRootNode","rootNode","getDOMRect","ThemeContext","getStyles","TabsContext","TabsDataTids","Indicator","context","state","styles","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","stylesUpdated","some","prop","setState","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","render","emotion","theme","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","indicatorRoot","cx","root","className","setRootNode","htmlNode","HTMLElement","rect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","Component","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport throttle from 'lodash.throttle';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Indicator.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { 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  private emotion!: Emotion;\n\n  private eventListener: Nullable<{\n    remove: () => void;\n  }> = null;\n\n  private removeTabUpdatesListener: Nullable<() => void> = null;\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  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    const styles = getStyles(this.emotion);\n    return (\n      <div\n        data-tid={TabsDataTids.indicatorRoot}\n        className={this.emotion.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"]}

package/components/Tabs/Indicator.d.ts

@@ -11,18 +11,19 @@ export interface IndicatorState {
     styles: React.CSSProperties;
 }
 export declare class Indicator extends React.Component<IndicatorProps, IndicatorState> {
-    static contextType: React.Context<TabsContextType>;
+    static contextType: React.Context<TabsContextType<any>>;
     context: TabsContextType;
     state: IndicatorState;
     private theme;
+    private emotion;
     private eventListener;
     private removeTabUpdatesListener;
+    private setRootNode;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(_: IndicatorProps, prevState: IndicatorState): void;
+    componentDidUpdate(): void;
     render(): JSX.Element;
     private renderMain;
     private reflow;
-    private throttledReflow;
     private getStyles;
 }

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

@@ -1,71 +1,24 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      height: ", ";\n      position: absolute;\n      transition: all 0.2s ease-out;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
-  root: function root(t) {
-    return css(_templateObject(), t.tabColorFocus, t.tabBorderWidth);
-  },
-  primary: function primary(t) {
-    return css(_templateObject2(), t.tabColorPrimary);
-  },
-  success: function success(t) {
-    return css(_templateObject3(), t.tabColorSuccess);
-  },
-  warning: function warning(t) {
-    return css(_templateObject4(), t.tabColorWarning);
-  },
-  error: function error(t) {
-    return css(_templateObject5(), t.tabColorError);
-  }
-};
-export var jsStyles = memoizeStyle(styles);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root(t) {
+      return emotion.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 emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.tabColorPrimary);
+    },
+    success: function success(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.tabColorSuccess);
+    },
+    warning: function warning(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.tabColorWarning);
+    },
+    error: function error(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.tabColorError);
+    }
+  });
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["Indicator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","tabColorFocus","tabBorderWidth","primary","tabColorPrimary","success","tabColorSuccess","warning","tabColorWarning","error","tabColorError","jsStyles"],"mappings":"ujCAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACC,aADlB;AAEYD,IAAAA,CAAC,CAACE,cAFd;;;;AAMD,GARY;;AAUbC,EAAAA,OAVa,mBAULH,CAVK,EAUK;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACI,eADlB;;AAGD,GAdY;;AAgBbC,EAAAA,OAhBa,mBAgBLL,CAhBK,EAgBK;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACM,eADlB;;AAGD,GApBY;;AAsBbC,EAAAA,OAtBa,mBAsBLP,CAtBK,EAsBK;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACQ,eADlB;;AAGD,GA1BY;;AA4BbC,EAAAA,KA5Ba,iBA4BPT,CA5BO,EA4BG;AACd,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACU,aADlB;;AAGD,GAhCY,EAAf;;;AAmCA,OAAO,IAAMC,QAAQ,GAAGd,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      background: ${t.tabColorFocus};\r\n      height: ${t.tabBorderWidth};\r\n      position: absolute;\r\n      transition: all 0.2s ease-out;\r\n    `;\r\n  },\r\n\r\n  primary(t: Theme) {\r\n    return css`\r\n      background: ${t.tabColorPrimary};\r\n    `;\r\n  },\r\n\r\n  success(t: Theme) {\r\n    return css`\r\n      background: ${t.tabColorSuccess};\r\n    `;\r\n  },\r\n\r\n  warning(t: Theme) {\r\n    return css`\r\n      background: ${t.tabColorWarning};\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      background: ${t.tabColorError};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Indicator.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","t","css","tabColorFocus","tabBorderWidth","tabIndicatorBorderRadius","primary","tabColorPrimary","success","tabColorSuccess","warning","tabColorWarning","error","tabColorError"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;;AAGA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,gBACNC,CADM,EACI;AACb,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACE,aADlB;AAEYF,QAAAA,CAAC,CAACG,cAFd;;;AAKmBH,QAAAA,CAAC,CAACI,wBALrB;;AAOD,OATU;;AAWXC,MAAAA,OAXW,mBAWHL,CAXG,EAWO;AAChB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACM,eADlB;;AAGD,OAfU;;AAiBXC,MAAAA,OAjBW,mBAiBHP,CAjBG,EAiBO;AAChB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACQ,eADlB;;AAGD,OArBU;;AAuBXC,MAAAA,OAvBW,mBAuBHT,CAvBG,EAuBO;AAChB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACU,eADlB;;AAGD,OA3BU;;AA6BXC,MAAAA,KA7BW,iBA6BLX,CA7BK,EA6BK;AACd,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACY,aADlB;;AAGD,OAjCU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { 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"]}

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

@@ -1,7 +1,9 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    primary(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    success(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    warning(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    error(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    root(t: Theme): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
 };