@skbkontur/react-ui 0.0.0-2d05d1e54b → 0.0.0-2dd5039746

package/cjs/components/Switcher/Switcher.styles.js

@@ -1,16 +1,22 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject7() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 2px;\n      box-shadow: 0 0 0 ", " ", ";\n    "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      vertical-align: middle;\n      display: inline-block;\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      vertical-align: middle;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
+  root: function root() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      line-height: normal;\n    "])));
+
+
+  },
+
   wrap: function wrap() {
-    return (0, _Emotion.css)(_templateObject());
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      vertical-align: middle;\n    "])));
 
 
 
   },
 
   input: function input() {
-    return (0, _Emotion.css)(_templateObject2());
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    "])));
 
 
 
@@ -18,43 +24,43 @@ var styles = {
 
   },
 
-  label: function label() {
-    return (0, _Emotion.css)(_templateObject3());
+  caption: function caption(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      vertical-align: middle;\n      display: inline-block;\n    "])),
+    t.switcherTextColor);
 
 
 
   },
 
-  labelSmall: function labelSmall(t) {
-    return (0, _Emotion.css)(_templateObject4(),
-    t.switcherLabelGapSmall,
-    t.switcherLabelFontSizeSmall,
-    t.switcherLabelLineHeightSmall);
+  captionSmall: function captionSmall(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
+    t.switcherCaptionGapSmall,
+    t.switcherCaptionFontSizeSmall,
+    t.switcherCaptionLineHeightSmall);
 
   },
 
-  labelMedium: function labelMedium(t) {
-    return (0, _Emotion.css)(_templateObject5(),
-    t.switcherLabelGapMedium,
-    t.switcherLabelFontSizeMedium,
-    t.switcherLabelLineHeightMedium);
+  captionMedium: function captionMedium(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
+    t.switcherCaptionGapMedium,
+    t.switcherCaptionFontSizeMedium,
+    t.switcherCaptionLineHeightMedium);
 
   },
 
-  labelLarge: function labelLarge(t) {
-    return (0, _Emotion.css)(_templateObject6(),
-    t.switcherLabelGapLarge,
-    t.switcherLabelFontSizeLarge,
-    t.switcherLabelLineHeightLarge);
+  captionLarge: function captionLarge(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
+    t.switcherCaptionGapLarge,
+    t.switcherCaptionFontSizeLarge,
+    t.switcherCaptionLineHeightLarge);
 
   },
 
   error: function error(t) {
-    return (0, _Emotion.css)(_templateObject7(),
-
-    t.switcherOutlineWidth, t.borderColorError);
-
-  } };
-
+    var insideWidth = parseInt(t.btnBorderWidth);
+    var outsideWidth = parseInt(t.switcherOutlineWidth) - insideWidth + "px";
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n      box-shadow: inset 0 0 0 ", "px ", ", 0 0 0 ", " ", ";\n    "])),
+    t.switcherBorderRadius,
+    insideWidth, t.borderColorError, outsideWidth, t.borderColorError);
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.styles.ts"],"names":["styles","wrap","css","input","label","labelSmall","t","switcherLabelGapSmall","switcherLabelFontSizeSmall","switcherLabelLineHeightSmall","labelMedium","switcherLabelGapMedium","switcherLabelFontSizeMedium","switcherLabelLineHeightMedium","labelLarge","switcherLabelGapLarge","switcherLabelFontSizeLarge","switcherLabelLineHeightLarge","error","switcherOutlineWidth","borderColorError","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;;AAID,GANY;;AAQbC,EAAAA,KARa,mBAQL;AACN,eAAOD,YAAP;;;;;;AAMD,GAfY;;AAiBbE,EAAAA,KAjBa,mBAiBL;AACN,eAAOF,YAAP;;;;AAID,GAtBY;;AAwBbG,EAAAA,UAxBa,sBAwBFC,CAxBE,EAwBQ;AACnB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACC,qBADpB;AAEeD,IAAAA,CAAC,CAACE,0BAFjB;AAGiBF,IAAAA,CAAC,CAACG,4BAHnB;;AAKD,GA9BY;;AAgCbC,EAAAA,WAhCa,uBAgCDJ,CAhCC,EAgCS;AACpB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACK,sBADpB;AAEeL,IAAAA,CAAC,CAACM,2BAFjB;AAGiBN,IAAAA,CAAC,CAACO,6BAHnB;;AAKD,GAtCY;;AAwCbC,EAAAA,UAxCa,sBAwCFR,CAxCE,EAwCQ;AACnB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACS,qBADpB;AAEeT,IAAAA,CAAC,CAACU,0BAFjB;AAGiBV,IAAAA,CAAC,CAACW,4BAHnB;;AAKD,GA9CY;;AAgDbC,EAAAA,KAhDa,iBAgDPZ,CAhDO,EAgDG;AACd,eAAOJ,YAAP;;AAEsBI,IAAAA,CAAC,CAACa,oBAFxB,EAEgDb,CAAC,CAACc,gBAFlD;;AAID,GArDY,EAAf;;;AAwDO,IAAMC,QAAQ,GAAG,2BAAarB,MAAb,CAAjB,C","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      vertical-align: middle;\r\n      display: inline-block;\r\n    `;\r\n  },\r\n\r\n  labelSmall(t: Theme) {\r\n    return css`\r\n      margin-right: ${t.switcherLabelGapSmall};\r\n      font-size: ${t.switcherLabelFontSizeSmall};\r\n      line-height: ${t.switcherLabelLineHeightSmall};\r\n    `;\r\n  },\r\n\r\n  labelMedium(t: Theme) {\r\n    return css`\r\n      margin-right: ${t.switcherLabelGapMedium};\r\n      font-size: ${t.switcherLabelFontSizeMedium};\r\n      line-height: ${t.switcherLabelLineHeightMedium};\r\n    `;\r\n  },\r\n\r\n  labelLarge(t: Theme) {\r\n    return css`\r\n      margin-right: ${t.switcherLabelGapLarge};\r\n      font-size: ${t.switcherLabelFontSizeLarge};\r\n      line-height: ${t.switcherLabelLineHeightLarge};\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 ${t.switcherOutlineWidth} ${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":["styles","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":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;AAGD,GALgC;;AAOjCC,EAAAA,IAPiC,kBAO1B;AACL,eAAOD,YAAP;;;;AAID,GAZgC;;AAcjCE,EAAAA,KAdiC,mBAczB;AACN,eAAOF,YAAP;;;;;;AAMD,GArBgC;;AAuBjCG,EAAAA,OAvBiC,mBAuBzBC,CAvByB,EAuBf;AAChB,eAAOJ,YAAP;AACWI,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GA7BgC;;AA+BjCC,EAAAA,YA/BiC,wBA+BpBF,CA/BoB,EA+BV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACG,uBADpB;AAEeH,IAAAA,CAAC,CAACI,4BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,8BAHnB;;AAKD,GArCgC;;AAuCjCC,EAAAA,aAvCiC,yBAuCnBN,CAvCmB,EAuCT;AACtB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACO,wBADpB;AAEeP,IAAAA,CAAC,CAACQ,6BAFjB;AAGiBR,IAAAA,CAAC,CAACS,+BAHnB;;AAKD,GA7CgC;;AA+CjCC,EAAAA,YA/CiC,wBA+CpBV,CA/CoB,EA+CV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACW,uBADpB;AAEeX,IAAAA,CAAC,CAACY,4BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,8BAHnB;;AAKD,GArDgC;;AAuDjCC,EAAAA,KAvDiC,iBAuD3Bd,CAvD2B,EAuDjB;AACd,QAAMe,WAAW,GAAGC,QAAQ,CAAChB,CAAC,CAACiB,cAAH,CAA5B;AACA,QAAMC,YAAY,GAAMF,QAAQ,CAAChB,CAAC,CAACmB,oBAAH,CAAR,GAAmCJ,WAAzC,OAAlB;AACA,eAAOnB,YAAP;AACmBI,IAAAA,CAAC,CAACoB,oBADrB;AAE4BL,IAAAA,WAF5B,EAE6Cf,CAAC,CAACqB,gBAF/C,EAE0EH,YAF1E,EAE0FlB,CAAC,CAACqB,gBAF5F;;AAID,GA9DgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      line-height: normal;\n    `;\n  },\n\n  wrap() {\n    return css`\n      display: inline-block;\n      vertical-align: middle;\n    `;\n  },\n\n  input() {\n    return css`\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.switcherTextColor};\n      vertical-align: middle;\n      display: inline-block;\n    `;\n  },\n\n  captionSmall(t: Theme) {\n    return 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 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 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 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/cjs/components/Switcher/helpers.d.ts

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

package/cjs/components/Switcher/helpers.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;exports.mod = void 0;var mod = function mod(n, _mod) {return (n % _mod + _mod) % _mod;};exports.mod = mod;

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

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

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

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

package/cjs/components/Switcher/switcherTheme.d.ts

@@ -1 +1,2 @@
-export declare const getSwitcherTheme: (theme: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>;
+import { Theme } from '../../lib/theming/Theme';
+export declare const getSwitcherTheme: (theme: Theme) => Theme;

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

@@ -1 +1 @@
-{"version":3,"sources":["switcherTheme.ts"],"names":["getSwitcherTheme","theme","ThemeFactory","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":"yEAAA;;;AAGO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOC,2BAAaC,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEH,KAAK,CAACI,yBADxB;AAEEC,IAAAA,sBAAsB,EAAEL,KAAK,CAACM,iCAFhC;AAGEC,IAAAA,wBAAwB,EAAEP,KAAK,CAACQ,mCAHlC;;AAKEC,IAAAA,kBAAkB,EAAET,KAAK,CAACU,6BAL5B;AAMEC,IAAAA,gBAAgB,EAAEX,KAAK,CAACY,2BAN1B;AAOEC,IAAAA,gBAAgB,EAAEb,KAAK,CAACc,2BAP1B;AAQEC,IAAAA,gBAAgB,EAAEf,KAAK,CAACgB,2BAR1B;AASEC,IAAAA,oBAAoB,EAAEjB,KAAK,CAACkB,+BAT9B;;AAWEC,IAAAA,mBAAmB,EAAEnB,KAAK,CAACoB,8BAX7B;AAYEC,IAAAA,iBAAiB,EAAErB,KAAK,CAACsB,4BAZ3B;AAaEC,IAAAA,iBAAiB,EAAEvB,KAAK,CAACwB,4BAb3B;AAcEC,IAAAA,iBAAiB,EAAEzB,KAAK,CAAC0B,4BAd3B;AAeEC,IAAAA,qBAAqB,EAAE3B,KAAK,CAAC4B,gCAf/B;;AAiBEC,IAAAA,kBAAkB,EAAE7B,KAAK,CAAC8B,6BAjB5B;AAkBEC,IAAAA,gBAAgB,EAAE/B,KAAK,CAACgC,2BAlB1B;AAmBEC,IAAAA,gBAAgB,EAAEjC,KAAK,CAACkC,2BAnB1B;AAoBEC,IAAAA,gBAAgB,EAAEnC,KAAK,CAACoC,2BApB1B;AAqBEC,IAAAA,oBAAoB,EAAErC,KAAK,CAACsC,+BArB9B,EADK;;AAwBLtC,EAAAA,KAxBK,CAAP;;AA0BD,CA3BM,C","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nexport const getSwitcherTheme = (theme: Theme): Theme => {\r\n  return ThemeFactory.create(\r\n    {\r\n      btnBorderWidth: theme.switcherButtonBorderWidth,\r\n      btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,\r\n      btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,\r\n\r\n      btnLineHeightSmall: theme.switcherButtonLineHeightSmall,\r\n      btnFontSizeSmall: theme.switcherButtonFontSizeSmall,\r\n      btnPaddingXSmall: theme.switcherButtonPaddingXSmall,\r\n      btnPaddingYSmall: theme.switcherButtonPaddingYSmall,\r\n      btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,\r\n\r\n      btnLineHeightMedium: theme.switcherButtonLineHeightMedium,\r\n      btnFontSizeMedium: theme.switcherButtonFontSizeMedium,\r\n      btnPaddingXMedium: theme.switcherButtonPaddingXMedium,\r\n      btnPaddingYMedium: theme.switcherButtonPaddingYMedium,\r\n      btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,\r\n\r\n      btnLineHeightLarge: theme.switcherButtonLineHeightLarge,\r\n      btnFontSizeLarge: theme.switcherButtonFontSizeLarge,\r\n      btnPaddingXLarge: theme.switcherButtonPaddingXLarge,\r\n      btnPaddingYLarge: theme.switcherButtonPaddingYLarge,\r\n      btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge,\r\n    },\r\n    theme,\r\n  );\r\n};\r\n"]}
+{"version":3,"sources":["switcherTheme.ts"],"names":["getSwitcherTheme","theme","ThemeFactory","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":"yEAAA;;;AAGO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOC,2BAAaC,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEH,KAAK,CAACI,yBADxB;AAEEC,IAAAA,sBAAsB,EAAEL,KAAK,CAACM,iCAFhC;AAGEC,IAAAA,wBAAwB,EAAEP,KAAK,CAACQ,mCAHlC;;AAKEC,IAAAA,kBAAkB,EAAET,KAAK,CAACU,6BAL5B;AAMEC,IAAAA,gBAAgB,EAAEX,KAAK,CAACY,2BAN1B;AAOEC,IAAAA,gBAAgB,EAAEb,KAAK,CAACc,2BAP1B;AAQEC,IAAAA,gBAAgB,EAAEf,KAAK,CAACgB,2BAR1B;AASEC,IAAAA,oBAAoB,EAAEjB,KAAK,CAACkB,+BAT9B;;AAWEC,IAAAA,mBAAmB,EAAEnB,KAAK,CAACoB,8BAX7B;AAYEC,IAAAA,iBAAiB,EAAErB,KAAK,CAACsB,4BAZ3B;AAaEC,IAAAA,iBAAiB,EAAEvB,KAAK,CAACwB,4BAb3B;AAcEC,IAAAA,iBAAiB,EAAEzB,KAAK,CAAC0B,4BAd3B;AAeEC,IAAAA,qBAAqB,EAAE3B,KAAK,CAAC4B,gCAf/B;;AAiBEC,IAAAA,kBAAkB,EAAE7B,KAAK,CAAC8B,6BAjB5B;AAkBEC,IAAAA,gBAAgB,EAAE/B,KAAK,CAACgC,2BAlB1B;AAmBEC,IAAAA,gBAAgB,EAAEjC,KAAK,CAACkC,2BAnB1B;AAoBEC,IAAAA,gBAAgB,EAAEnC,KAAK,CAACoC,2BApB1B;AAqBEC,IAAAA,oBAAoB,EAAErC,KAAK,CAACsC,+BArB9B,EADK;;AAwBLtC,EAAAA,KAxBK,CAAP;;AA0BD,CA3BM,C","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/cjs/components/Tabs/Indicator.d.ts

@@ -11,18 +11,18 @@ 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 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/cjs/components/Tabs/Indicator.js

@@ -1,16 +1,18 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Indicator = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _reactDom = require("react-dom");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Indicator = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _getDOMRect = require("../../lib/dom/getDOMRect");
 
 var _Indicator = require("./Indicator.styles");
-var _TabsContext = require("./TabsContext");var
+var _TabsContext = require("./TabsContext");
 
+var _Tabs = require("./Tabs");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}var
 
 
 
@@ -24,7 +26,8 @@ var _TabsContext = require("./TabsContext");var
 
 
 
-Indicator = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Indicator, _React$Component);function Indicator() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+Indicator = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Indicator, _React$Component);function Indicator() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
     context = _this.context;_this.
 
@@ -32,7 +35,7 @@ Indicator = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
       styles: {} };_this.
 
 
-    theme = void 0;_this.
+
 
     eventListener =
 
@@ -97,8 +100,11 @@ Indicator = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
 
 
 
-    reflow = function () {var _this$context =
-      _this.context,getTab = _this$context.getTab,activeTab = _this$context.activeTab;
+
+
+
+    reflow = (0, _lodash.default)(function () {
+      var _this$context = _this.context,getTab = _this$context.getTab,activeTab = _this$context.activeTab;
       var node = getTab(activeTab);
       var nodeStyles = _this.getStyles(node);
       var stylesUpdated = ['left', 'top', 'width', 'height'].some(
@@ -107,33 +113,29 @@ Indicator = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
       if (stylesUpdated) {
         _this.setState({ styles: nodeStyles });
       }
-    };_this.
-
-    throttledReflow = (0, _lodash.default)(_this.reflow, 100);return _this;}var _proto = Indicator.prototype;_proto.componentDidMount = function componentDidMount() {this.eventListener = LayoutEvents.addListener(this.throttledReflow);this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);this.reflow();};_proto.componentWillUnmount = function componentWillUnmount() {this.throttledReflow.cancel();if (this.eventListener) {this.eventListener.remove();}if (this.removeTabUpdatesListener) {this.removeTabUpdatesListener();}};_proto.componentDidUpdate = function componentDidUpdate(_, prevState) {this.reflow();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$context2 = this.context,getTab = _this$context2.getTab,activeTab = _this$context2.activeTab;var node = getTab(activeTab);var indicators = node && node.getIndicators && node.getIndicators() || { error: false, warning: false, success: false, primary: false, disabled: false };return /*#__PURE__*/_react.default.createElement("div", { className: (0, _classnames.default)(_Indicator.jsStyles.root(this.theme), indicators.primary && _Indicator.jsStyles.primary(this.theme), indicators.success && _Indicator.jsStyles.success(this.theme), indicators.warning && _Indicator.jsStyles.warning(this.theme), indicators.error && _Indicator.jsStyles.error(this.theme), this.props.className), style: this.state.styles });};_proto.
+    }, 100);return _this;}var _proto = Indicator.prototype;_proto.componentDidMount = function componentDidMount() {this.eventListener = LayoutEvents.addListener(this.reflow);this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);this.reflow();};_proto.componentWillUnmount = function componentWillUnmount() {this.reflow.cancel();if (this.eventListener) {this.eventListener.remove();}if (this.removeTabUpdatesListener) {this.removeTabUpdatesListener();}};_proto.componentDidUpdate = function componentDidUpdate() {this.reflow();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$context2 = this.context,getTab = _this$context2.getTab,activeTab = _this$context2.activeTab;var node = getTab(activeTab);var indicators = node && node.getIndicators && node.getIndicators() || { error: false, warning: false, success: false, primary: false, disabled: false };return /*#__PURE__*/_react.default.createElement("div", { "data-tid": _Tabs.TabsDataTids.indicatorRoot, className: (0, _Emotion.cx)(_Indicator.styles.root(this.theme), indicators.primary && _Indicator.styles.primary(this.theme), indicators.success && _Indicator.styles.success(this.theme), indicators.warning && _Indicator.styles.warning(this.theme), indicators.error && _Indicator.styles.error(this.theme), this.props.className), style: this.state.styles, ref: this.setRootNode });};_proto.
 
   getStyles = function getStyles(node) {
-    if (node instanceof _react.default.Component) {
-      node = (0, _reactDom.findDOMNode)(node);
-    }
+    var htmlNode = (0, _rootNode.getRootNode)(node);
 
-    if (node instanceof HTMLElement) {
-      var rect = node.getBoundingClientRect();
+    if (htmlNode && htmlNode instanceof HTMLElement) {
+      var rect = (0, _getDOMRect.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 - tabBorderWidth,
+        left: htmlNode.offsetLeft,
+        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,
         width: rect.right - rect.left };
 
     }
 
     return {};
-  };return Indicator;}(_react.default.Component);exports.Indicator = Indicator;Indicator.contextType = _TabsContext.TabsContext;
+  };return Indicator;}(_react.default.Component), _class2.contextType = _TabsContext.TabsContext, _temp)) || _class;exports.Indicator = Indicator;

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

@@ -1 +1 @@
-{"version":3,"sources":["Indicator.tsx"],"names":["Indicator","context","state","styles","theme","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","throttledReflow","componentDidMount","LayoutEvents","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","_","prevState","render","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","jsStyles","root","className","React","Component","HTMLElement","rect","getBoundingClientRect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","contextType","TabsContext"],"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      const tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;\r\n      return {\r\n        left: node.offsetLeft,\r\n        top: node.offsetHeight + node.offsetTop - tabBorderWidth,\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":["Indicator","rootNode","context","state","styles","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","componentDidMount","LayoutEvents","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","render","theme","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","TabsDataTids","indicatorRoot","root","className","setRootNode","htmlNode","HTMLElement","rect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","React","Component","contextType","TabsContext"],"mappings":"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","sourcesContent":["import React from 'react';\nimport throttle from 'lodash.throttle';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } 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\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      <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 (htmlNode && htmlNode instanceof 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/cjs/components/Tabs/Indicator.styles.d.ts

@@ -1,7 +1,8 @@
-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 { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["Indicator.styles.ts"],"names":["styles","root","t","css","tabColorFocus","tabBorderWidth","primary","tabColorPrimary","success","tabColorSuccess","warning","tabColorWarning","error","tabColorError","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACE,aADlB;AAEYF,IAAAA,CAAC,CAACG,cAFd;;;;AAMD,GARY;;AAUbC,EAAAA,OAVa,mBAULJ,CAVK,EAUK;AAChB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACK,eADlB;;AAGD,GAdY;;AAgBbC,EAAAA,OAhBa,mBAgBLN,CAhBK,EAgBK;AAChB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACO,eADlB;;AAGD,GApBY;;AAsBbC,EAAAA,OAtBa,mBAsBLR,CAtBK,EAsBK;AAChB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACS,eADlB;;AAGD,GA1BY;;AA4BbC,EAAAA,KA5Ba,iBA4BPV,CA5BO,EA4BG;AACd,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACW,aADlB;;AAGD,GAhCY,EAAf;;;AAmCO,IAAMC,QAAQ,GAAG,2BAAad,MAAb,CAAjB,C","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":["styles","root","t","css","tabColorFocus","tabBorderWidth","primary","tabColorPrimary","success","tabColorSuccess","warning","tabColorWarning","error","tabColorError"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACE,aADlB;AAEYF,IAAAA,CAAC,CAACG,cAFd;;;;AAMD,GARgC;;AAUjCC,EAAAA,OAViC,mBAUzBJ,CAVyB,EAUf;AAChB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACK,eADlB;;AAGD,GAdgC;;AAgBjCC,EAAAA,OAhBiC,mBAgBzBN,CAhByB,EAgBf;AAChB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACO,eADlB;;AAGD,GApBgC;;AAsBjCC,EAAAA,OAtBiC,mBAsBzBR,CAtByB,EAsBf;AAChB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACS,eADlB;;AAGD,GA1BgC;;AA4BjCC,EAAAA,KA5BiC,iBA4B3BV,CA5B2B,EA4BjB;AACd,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACW,aADlB;;AAGD,GAhCgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { 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    `;\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"]}

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { AriaAttributes } from 'react';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { TabsContextType } from './TabsContext';
@@ -10,7 +9,10 @@ export interface TabIndicators {
     primary: boolean;
     disabled: boolean;
 }
-export interface TabProps extends CommonProps {
+export declare const TabDataTids: {
+    readonly root: "Tab__root";
+};
+export interface TabProps<T extends string = string> extends CommonProps {
     /**
      * Tab content
      */
@@ -26,7 +28,7 @@ export interface TabProps extends CommonProps {
     /**
      * Tab identifier
      */
-    id?: string;
+    id?: T;
     /**
      * Click event
      */
@@ -40,11 +42,11 @@ export interface TabProps extends CommonProps {
      */
     disabled?: boolean;
     /**
-     * Error indicator
+     * Состояние валидации при ошибке.
      */
     error?: boolean;
     /**
-     * Warning indicator
+     * Состояние валидации при предупреждении.
      */
     warning?: boolean;
     /**
@@ -59,10 +61,15 @@ export interface TabProps extends CommonProps {
      * Style property
      */
     style?: React.CSSProperties;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
 export interface TabState {
     focusedByKeyboard: boolean;
 }
+declare type DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;
 /**
  * Tab element of Tabs component
  *
@@ -78,28 +85,17 @@ export interface TabState {
  *
  * Works only inside Tabs component, otherwise throws
  */
-export declare class Tab extends React.Component<TabProps, TabState> {
+export declare class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {
     static __KONTUR_REACT_UI__: string;
-    static contextType: React.Context<TabsContextType>;
+    static contextType: React.Context<TabsContextType<any>>;
     context: TabsContextType;
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        component: PropTypes.Requireable<any>;
-        disabled: PropTypes.Requireable<boolean>;
-        href: PropTypes.Validator<string>;
-        id: PropTypes.Validator<string>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        component: string;
-        href: string;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: TabState;
     private theme;
     private tabComponent;
-    private isArrowKeyPressed;
-    UNSAFE_componentWillMount(): void;
+    private setRootNode;
+    constructor(props: TabProps<T>);
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
@@ -111,15 +107,14 @@ export declare class Tab extends React.Component<TabProps, TabState> {
         primary: boolean;
         disabled: boolean;
     };
-    getUnderlyingNode: () => Nullable<React.ReactElement<Tab, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>>;
+    getUnderlyingNode: () => Nullable<React.ReactElement<Tab<T>, string | React.JSXElementConstructor<any>>>;
     private renderMain;
     private getId;
     private refTabComponent;
-    private handleKeyDownGlobal;
     private getTabInstance;
     private switchTab;
-    private handleMouseDown;
     private handleKeyDown;
     private handleFocus;
     private handleBlur;
 }
+export {};