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

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

@@ -1,128 +1,104 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n      &", ":hover {\n        border-left-color: ", ";\n      }\n    "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: rgba(\n        ", ",\n        ", ",\n        ", ",\n        0.5\n      );\n      cursor: default;\n\n      &:hover {\n        border-bottom-color: transparent !important;\n      }\n\n      &", ":hover {\n        border-left-color: transparent !important;\n      }\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      bottom: -", ";\n      left: -", ";\n      position: absolute;\n      right: -", ";\n      top: 0;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      &:hover {\n        cursor: default;\n        border-bottom: ", " solid transparent;\n      }\n\n      &", ":hover {\n        border-left: ", " solid transparent;\n      }\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _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    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      border-bottom: ", " solid transparent;\n      box-sizing: border-box;\n      color: inherit;\n      cursor: pointer;\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n      padding-bottom: ", ";\n      padding-top: ", ";\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ", " solid ", ";\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
+import { memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { shift } from "../../../lib/styles/DimensionFunctions";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
-import { is8pxTheme } from "../../../lib/theming/ThemeHelpers";
-var styles = {
-  root: function root(t) {
-    var paddingTop = is8pxTheme(t) ? t.tabPaddingY : shift(t.tabPaddingY, '-1px');
-    var paddingBottom = is8pxTheme(t) ? "calc(" + t.tabPaddingY + " - " + t.tabBorderWidth + ")" : shift(t.tabPaddingY, '1px');
-    return css(_templateObject(), t.tabBorderWidth, t.tabFontSize, t.tabLineHeight, t.tabPaddingX, t.tabPaddingX, paddingBottom, paddingTop, t.tabBorderWidth, t.tabColorHover);
-  },
-  vertical: function vertical(t) {
-    return css(_templateObject2(), t.tabBorderWidth, shift(t.tabPaddingX, "-" + t.tabBorderWidth), t.tabPaddingX, cssName(styles.root(t)), t.tabBorderWidth, t.tabColorHover, cssName(styles.focus(t)), t.tabBorderWidth);
-  },
-  active: function active(t) {
-    return css(_templateObject3(), t.tabBorderWidth, cssName(styles.vertical(t)), t.tabBorderWidth);
-  },
-  focus: function focus(t) {
-    return css(_templateObject4(), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, t.tabPaddingX, t.tabPaddingX);
-  },
-  disabled: function disabled(t) {
-    return css(_templateObject5(), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault), cssName(styles.vertical(t)));
-  },
-  primary: function primary(t) {
-    return css(_templateObject6(), t.tabColorHoverPrimary, cssName(styles.vertical(t)), t.tabColorHoverPrimary);
-  },
-  success: function success(t) {
-    return css(_templateObject7(), t.tabColorHoverSuccess, cssName(styles.vertical(t)), t.tabColorHoverSuccess);
-  },
-  warning: function warning(t) {
-    return css(_templateObject8(), t.tabColorHoverWarning, cssName(styles.vertical(t)), t.tabColorHoverWarning);
-  },
-  error: function error(t) {
-    return css(_templateObject9(), t.tabColorHoverError, cssName(styles.vertical(t)), t.tabColorHoverError);
+import { fontSize, lineHeight, paddingX, paddingY } from "../helpers";
+export var globalClasses = prefix('tab')({
+  focus: 'focus'
+});
+export var getStyles = function getStyles(emotion) {
+  function tabRoot(t, size) {
+    return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " solid transparent;\n    box-sizing: border-box;\n    color: ", ";\n    cursor: pointer;\n    display: inline-block;\n    font-size: ", ";\n    line-height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    padding-bottom: calc(", " - ", ");\n    padding-top: ", ";\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ", " ", ";\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ", " solid ", ";\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  "])), t.tabBorderWidth, t.tabTextColorDefault, fontSize(t, size), lineHeight(t, size), paddingX(t, size), paddingX(t, size), paddingY(t, size), t.tabBorderWidth, paddingY(t, size), t.transitionDuration, t.transitionTimingFunction, t.tabBorderWidth, t.tabColorHover);
+  }
+
+  function tabVertical(t, size) {
+    return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    border-bottom: none;\n    border-left: ", " solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ", ";\n    padding-right: ", ";\n\n    &:hover {\n      border-bottom: none;\n      border-left: ", " solid ", ";\n    }\n\n    .", " {\n      bottom: 0;\n      left: -", ";\n      right: 0;\n    }\n  "])), t.tabBorderWidth, shift(paddingX(t, size), "-" + t.tabBorderWidth), paddingX(t, size), t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
   }
+
+  function tabFocus(t, size) {
+    return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    border: ", " solid ", ";\n    bottom: -", ";\n    left: -", ";\n    position: absolute;\n    right: -", ";\n    top: 0;\n  "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, paddingX(t, size), paddingX(t, size));
+  }
+
+  return memoizeStyle({
+    rootSmall: function rootSmall(t) {
+      return tabRoot(t, 'small');
+    },
+    rootMedium: function rootMedium(t) {
+      return tabRoot(t, 'medium');
+    },
+    rootLarge: function rootLarge(t) {
+      return tabRoot(t, 'large');
+    },
+    verticalSmall: function verticalSmall(t) {
+      return tabVertical(t, 'small');
+    },
+    verticalMedium: function verticalMedium(t) {
+      return tabVertical(t, 'medium');
+    },
+    verticalLarge: function verticalLarge(t) {
+      return tabVertical(t, 'large');
+    },
+    focusSmall: function focusSmall(t) {
+      return tabFocus(t, 'small');
+    },
+    focusMedium: function focusMedium(t) {
+      return tabFocus(t, 'medium');
+    },
+    focusLarge: function focusLarge(t) {
+      return tabFocus(t, 'large');
+    },
+    disabled: function disabled(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        color: rgba(\n          ", ",\n          ", ",\n          ", ",\n          0.5\n        );\n        cursor: default;\n      "])), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault));
+    },
+    active: function active() {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n      "])));
+    }
+  });
+};
+export var getHorizontalStyles = function getHorizontalStyles(emotion) {
+  return memoizeStyle({
+    active: function active(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+    },
+    disabled: function disabled() {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
+    },
+    primary: function primary(t) {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+    },
+    success: function success(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+    },
+    warning: function warning(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+    },
+    error: function error(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverError);
+    }
+  });
 };
-export var jsStyles = memoizeStyle(styles);
+export var getVerticalStyles = function getVerticalStyles(emotion) {
+  return memoizeStyle({
+    active: function active(t) {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+    },
+    disabled: function disabled() {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
+    },
+    primary: function primary(t) {
+      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+    },
+    success: function success(t) {
+      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+    },
+    warning: function warning(t) {
+      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+    },
+    error: function error(t) {
+      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
+    }
+  });
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["Tab.styles.ts"],"names":["css","cssName","memoizeStyle","shift","ColorFunctions","is8pxTheme","styles","root","t","paddingTop","tabPaddingY","paddingBottom","tabBorderWidth","tabFontSize","tabLineHeight","tabPaddingX","tabColorHover","vertical","focus","active","tabOutlineWidth","tabColorFocus","disabled","red","tabTextColorDefault","green","blue","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","jsStyles"],"mappings":"o9GAAA,SAASA,GAAT,EAAcC,OAAd,EAAuBC,YAAvB,QAA2C,2BAA3C;AACA,SAASC,KAAT,QAAsB,qCAAtB;AACA,OAAO,KAAKC,cAAZ,MAAgC,iCAAhC;;AAEA,SAASC,UAAT,QAA2B,gCAA3B;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,QAAMC,UAAU,GAAGJ,UAAU,CAACG,CAAD,CAAV,GAAgBA,CAAC,CAACE,WAAlB,GAAgCP,KAAK,CAACK,CAAC,CAACE,WAAH,EAAgB,MAAhB,CAAxD;AACA,QAAMC,aAAa,GAAGN,UAAU,CAACG,CAAD,CAAV,aAAwBA,CAAC,CAACE,WAA1B,WAA2CF,CAAC,CAACI,cAA7C,SAAiET,KAAK,CAACK,CAAC,CAACE,WAAH,EAAgB,KAAhB,CAA5F;AACA,WAAOV,GAAP;AACmBQ,IAAAA,CAAC,CAACI,cADrB;;;;;AAMeJ,IAAAA,CAAC,CAACK,WANjB;AAOiBL,IAAAA,CAAC,CAACM,aAPnB;AAQiBN,IAAAA,CAAC,CAACO,WARnB;AASkBP,IAAAA,CAAC,CAACO,WATpB;AAUoBJ,IAAAA,aAVpB;AAWiBF,IAAAA,UAXjB;;;;;;;AAkBqBD,IAAAA,CAAC,CAACI,cAlBvB,EAkB+CJ,CAAC,CAACQ,aAlBjD;;;;;;;AAyBD,GA7BY;;AA+BbC,EAAAA,QA/Ba,oBA+BJT,CA/BI,EA+BM;AACjB,WAAOR,GAAP;;AAEiBQ,IAAAA,CAAC,CAACI,cAFnB;;;;AAMkBT,IAAAA,KAAK,CAACK,CAAC,CAACO,WAAH,QAAoBP,CAAC,CAACI,cAAtB,CANvB;AAOmBJ,IAAAA,CAAC,CAACO,WAPrB;;AASId,IAAAA,OAAO,CAACK,MAAM,CAACC,IAAP,CAAYC,CAAZ,CAAD,CATX;;AAWmBA,IAAAA,CAAC,CAACI,cAXrB,EAW6CJ,CAAC,CAACQ,aAX/C;;;AAcIf,IAAAA,OAAO,CAACK,MAAM,CAACY,KAAP,CAAaV,CAAb,CAAD,CAdX;;AAgBaA,IAAAA,CAAC,CAACI,cAhBf;;;;AAoBD,GApDY;;AAsDbO,EAAAA,MAtDa,kBAsDNX,CAtDM,EAsDI;AACf,WAAOR,GAAP;;;AAGqBQ,IAAAA,CAAC,CAACI,cAHvB;;;AAMKX,IAAAA,OAAO,CAACK,MAAM,CAACW,QAAP,CAAgBT,CAAhB,CAAD,CANZ;AAOmBA,IAAAA,CAAC,CAACI,cAPrB;;;AAUD,GAjEY;;AAmEbM,EAAAA,KAnEa,iBAmEPV,CAnEO,EAmEG;AACd,WAAOR,GAAP;AACYQ,IAAAA,CAAC,CAACY,eADd,EACuCZ,CAAC,CAACa,aADzC;AAEab,IAAAA,CAAC,CAACI,cAFf;AAGWJ,IAAAA,CAAC,CAACO,WAHb;;AAKYP,IAAAA,CAAC,CAACO,WALd;;;AAQD,GA5EY;;AA8EbO,EAAAA,QA9Ea,oBA8EJd,CA9EI,EA8EM;AACjB,WAAOR,GAAP;;AAEMI,IAAAA,cAAc,CAACmB,GAAf,CAAmBf,CAAC,CAACgB,mBAArB,CAFN;AAGMpB,IAAAA,cAAc,CAACqB,KAAf,CAAqBjB,CAAC,CAACgB,mBAAvB,CAHN;AAIMpB,IAAAA,cAAc,CAACsB,IAAf,CAAoBlB,CAAC,CAACgB,mBAAtB,CAJN;;;;;;;;;AAaKvB,IAAAA,OAAO,CAACK,MAAM,CAACW,QAAP,CAAgBT,CAAhB,CAAD,CAbZ;;;;AAiBD,GAhGY;;AAkGbmB,EAAAA,OAlGa,mBAkGLnB,CAlGK,EAkGK;AAChB,WAAOR,GAAP;;AAE2BQ,IAAAA,CAAC,CAACoB,oBAF7B;;AAIK3B,IAAAA,OAAO,CAACK,MAAM,CAACW,QAAP,CAAgBT,CAAhB,CAAD,CAJZ;AAKyBA,IAAAA,CAAC,CAACoB,oBAL3B;;;AAQD,GA3GY;;AA6GbC,EAAAA,OA7Ga,mBA6GLrB,CA7GK,EA6GK;AAChB,WAAOR,GAAP;;AAE2BQ,IAAAA,CAAC,CAACsB,oBAF7B;;AAIK7B,IAAAA,OAAO,CAACK,MAAM,CAACW,QAAP,CAAgBT,CAAhB,CAAD,CAJZ;AAKyBA,IAAAA,CAAC,CAACsB,oBAL3B;;;AAQD,GAtHY;;AAwHbC,EAAAA,OAxHa,mBAwHLvB,CAxHK,EAwHK;AAChB,WAAOR,GAAP;;AAE2BQ,IAAAA,CAAC,CAACwB,oBAF7B;;AAIK/B,IAAAA,OAAO,CAACK,MAAM,CAACW,QAAP,CAAgBT,CAAhB,CAAD,CAJZ;AAKyBA,IAAAA,CAAC,CAACwB,oBAL3B;;;AAQD,GAjIY;;AAmIbC,EAAAA,KAnIa,iBAmIPzB,CAnIO,EAmIG;AACd,WAAOR,GAAP;;AAE2BQ,IAAAA,CAAC,CAAC0B,kBAF7B;;AAIKjC,IAAAA,OAAO,CAACK,MAAM,CAACW,QAAP,CAAgBT,CAAhB,CAAD,CAJZ;AAKyBA,IAAAA,CAAC,CAAC0B,kBAL3B;;;AAQD,GA5IY,EAAf;;;AA+IA,OAAO,IAAMC,QAAQ,GAAGjC,YAAY,CAACI,MAAD,CAA7B","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { shift } from '../../lib/styles/DimensionFunctions';\r\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    const paddingTop = is8pxTheme(t) ? t.tabPaddingY : shift(t.tabPaddingY, '-1px');\r\n    const paddingBottom = is8pxTheme(t) ? `calc(${t.tabPaddingY} - ${t.tabBorderWidth})` : shift(t.tabPaddingY, '1px');\r\n    return css`\r\n      border-bottom: ${t.tabBorderWidth} solid transparent;\r\n      box-sizing: border-box;\r\n      color: inherit;\r\n      cursor: pointer;\r\n      display: inline-block;\r\n      font-size: ${t.tabFontSize};\r\n      line-height: ${t.tabLineHeight};\r\n      margin-left: ${t.tabPaddingX};\r\n      margin-right: ${t.tabPaddingX};\r\n      padding-bottom: ${paddingBottom};\r\n      padding-top: ${paddingTop};\r\n      position: relative;\r\n      text-decoration: inherit;\r\n      transition: border-bottom 0.2s ease-out;\r\n\r\n      &:hover {\r\n        outline: inherit;\r\n        border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\r\n      }\r\n\r\n      &:focus {\r\n        outline: inherit;\r\n      }\r\n    `;\r\n  },\r\n\r\n  vertical(t: Theme) {\r\n    return css`\r\n      border-bottom: none;\r\n      border-left: ${t.tabBorderWidth} solid transparent;\r\n      display: block;\r\n      margin-left: 0;\r\n      margin-right: 0;\r\n      padding-left: ${shift(t.tabPaddingX, `-${t.tabBorderWidth}`)};\r\n      padding-right: ${t.tabPaddingX};\r\n\r\n      ${cssName(styles.root(t))}&:hover {\r\n        border-bottom: none;\r\n        border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\r\n      }\r\n\r\n      ${cssName(styles.focus(t))} {\r\n        bottom: 0;\r\n        left: -${t.tabBorderWidth};\r\n        right: 0;\r\n      }\r\n    `;\r\n  },\r\n\r\n  active(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        cursor: default;\r\n        border-bottom: ${t.tabBorderWidth} solid transparent;\r\n      }\r\n\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left: ${t.tabBorderWidth} solid transparent;\r\n      }\r\n    `;\r\n  },\r\n\r\n  focus(t: Theme) {\r\n    return css`\r\n      border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\r\n      bottom: -${t.tabBorderWidth};\r\n      left: -${t.tabPaddingX};\r\n      position: absolute;\r\n      right: -${t.tabPaddingX};\r\n      top: 0;\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      color: rgba(\r\n        ${ColorFunctions.red(t.tabTextColorDefault)},\r\n        ${ColorFunctions.green(t.tabTextColorDefault)},\r\n        ${ColorFunctions.blue(t.tabTextColorDefault)},\r\n        0.5\r\n      );\r\n      cursor: default;\r\n\r\n      &:hover {\r\n        border-bottom-color: transparent !important;\r\n      }\r\n\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: transparent !important;\r\n      }\r\n    `;\r\n  },\r\n\r\n  primary(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverPrimary};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverPrimary};\r\n      }\r\n    `;\r\n  },\r\n\r\n  success(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverSuccess};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverSuccess};\r\n      }\r\n    `;\r\n  },\r\n\r\n  warning(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverWarning};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverWarning};\r\n      }\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      &:hover {\r\n        border-bottom-color: ${t.tabColorHoverError};\r\n      }\r\n      &${cssName(styles.vertical(t))}:hover {\r\n        border-left-color: ${t.tabColorHoverError};\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Tab.styles.ts"],"names":["memoizeStyle","prefix","shift","ColorFunctions","fontSize","lineHeight","paddingX","paddingY","globalClasses","focus","getStyles","emotion","tabRoot","t","size","css","tabBorderWidth","tabTextColorDefault","transitionDuration","transitionTimingFunction","tabColorHover","tabVertical","tabFocus","tabOutlineWidth","tabColorFocus","rootSmall","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","focusSmall","focusMedium","focusLarge","disabled","red","green","blue","active","getHorizontalStyles","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","getVerticalStyles"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { fontSize, lineHeight, paddingX, paddingY } from './helpers';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const getStyles = (emotion: Emotion) => {\n  function tabRoot(t: Theme, size: SizeProp) {\n    return emotion.css`\n    border-bottom: ${t.tabBorderWidth} solid transparent;\n    box-sizing: border-box;\n    color: ${t.tabTextColorDefault};\n    cursor: pointer;\n    display: inline-block;\n    font-size: ${fontSize(t, size)};\n    line-height: ${lineHeight(t, size)};\n    margin-left: ${paddingX(t, size)};\n    margin-right: ${paddingX(t, size)};\n    padding-bottom: calc(${paddingY(t, size)} - ${t.tabBorderWidth});\n    padding-top: ${paddingY(t, size)};\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  `;\n  }\n\n  function tabVertical(t: Theme, size: SizeProp) {\n    return emotion.css`\n    border-bottom: none;\n    border-left: ${t.tabBorderWidth} solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ${shift(paddingX(t, size), `-${t.tabBorderWidth}`)};\n    padding-right: ${paddingX(t, size)};\n\n    &:hover {\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    .${globalClasses.focus} {\n      bottom: 0;\n      left: -${t.tabBorderWidth};\n      right: 0;\n    }\n  `;\n  }\n\n  function tabFocus(t: Theme, size: SizeProp) {\n    return emotion.css`\n    border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n    bottom: -${t.tabBorderWidth};\n    left: -${paddingX(t, size)};\n    position: absolute;\n    right: -${paddingX(t, size)};\n    top: 0;\n  `;\n  }\n\n  return memoizeStyle({\n    rootSmall(t: Theme) {\n      return tabRoot(t, 'small');\n    },\n\n    rootMedium(t: Theme) {\n      return tabRoot(t, 'medium');\n    },\n\n    rootLarge(t: Theme) {\n      return tabRoot(t, 'large');\n    },\n\n    verticalSmall(t: Theme) {\n      return tabVertical(t, 'small');\n    },\n\n    verticalMedium(t: Theme) {\n      return tabVertical(t, 'medium');\n    },\n\n    verticalLarge(t: Theme) {\n      return tabVertical(t, 'large');\n    },\n\n    focusSmall(t: Theme) {\n      return tabFocus(t, 'small');\n    },\n\n    focusMedium(t: Theme) {\n      return tabFocus(t, 'medium');\n    },\n\n    focusLarge(t: Theme) {\n      return tabFocus(t, 'large');\n    },\n\n    disabled(t: Theme) {\n      return emotion.css`\n        color: rgba(\n          ${ColorFunctions.red(t.tabTextColorDefault)},\n          ${ColorFunctions.green(t.tabTextColorDefault)},\n          ${ColorFunctions.blue(t.tabTextColorDefault)},\n          0.5\n        );\n        cursor: default;\n      `;\n    },\n\n    active() {\n      return emotion.css`\n        cursor: default;\n      `;\n    },\n  });\n};\n\nexport const getHorizontalStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    active(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n    },\n\n    disabled() {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n    },\n\n    primary(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n    },\n\n    success(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n    },\n\n    warning(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n    },\n  });\n\nexport const getVerticalStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    active(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n    },\n\n    disabled() {\n      return emotion.css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n    },\n\n    primary(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n    },\n\n    success(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n    },\n\n    warning(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n    },\n  });\n"]}

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

@@ -1,11 +1,34 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    vertical(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    active(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    focus(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    disabled(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 globalClasses: {
+    focus: string;
+};
+export declare const getStyles: (emotion: Emotion) => {
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    verticalSmall(t: Theme): string;
+    verticalMedium(t: Theme): string;
+    verticalLarge(t: Theme): string;
+    focusSmall(t: Theme): string;
+    focusMedium(t: Theme): string;
+    focusLarge(t: Theme): string;
+    disabled(t: Theme): string;
+    active(): string;
+};
+export declare const getHorizontalStyles: (emotion: Emotion) => {
+    active(t: Theme): string;
+    disabled(): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
+};
+export declare const getVerticalStyles: (emotion: Emotion) => {
+    active(t: Theme): string;
+    disabled(): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
 };

package/components/Tabs/Tabs/Tabs.js

@@ -1,23 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import { findDOMNode } from 'react-dom';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
+import { globalObject } from '@skbkontur/global-object';
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { getRootNode } from "../../../lib/rootNode/getRootNode";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isInstanceOf } from "../../../lib/isInstanceOf";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { Indicator } from "../Indicator";
-import { jsStyles } from "../Tabs.styles";
+import { getStyles } from "../Tabs.styles";
 import { TabsContext } from "../TabsContext";
 import { Tab } from "../Tab";
-/**
-                              * Tabs wrapper
-                              *
-                              * contains static property `Tab`
-                              */
-
-export var Tabs =
-/*#__PURE__*/
-function (_React$Component) {
+export var TabsDataTids = {
+  root: 'Tabs__root',
+  indicatorRoot: 'Indicator__root'
+};
+export
+/**
+* Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
+*/
+var Tabs = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Tabs, _React$Component);
 
   function Tabs() {
@@ -28,7 +36,7 @@ function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.theme = void 0;
+    _this.getProps = createPropsGetter(Tabs.defaultProps);
     _this.tabs = [];
     _this.tabUpdates = {
       on: function on(cb) {
@@ -51,13 +59,9 @@ function (_React$Component) {
       var newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));
       var tab = tabs[newIndex];
       var tabNode = tab.getNode();
-      var htmlNode = null;
-
-      if (tabNode instanceof React.Component) {
-        htmlNode = findDOMNode(tabNode);
-      }
+      var htmlNode = getRootNode(tabNode);
 
-      if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {
+      if (isInstanceOf(htmlNode, globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
         htmlNode.focus();
       }
     };
@@ -110,49 +114,54 @@ function (_React$Component) {
     var _this2 = this;
 
     var _this$props2 = this.props,
-        vertical = _this$props2.vertical,
         value = _this$props2.value,
         width = _this$props2.width,
         children = _this$props2.children,
-        indicatorClassName = _this$props2.indicatorClassName;
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return React.createElement("div", {
-        className: cn(jsStyles.root(_this2.theme), vertical && jsStyles.vertical(_this2.theme)),
-        style: {
-          width: width
-        }
-      }, React.createElement(TabsContext.Provider, {
-        value: {
-          vertical: vertical,
-          activeTab: value,
-          getTab: _this2.getTab,
-          addTab: _this2.addTab,
-          removeTab: _this2.removeTab,
-          notifyUpdate: _this2.notifyUpdate,
-          shiftFocus: _this2.shiftFocus,
-          switchTab: _this2.switchTab
-        }
-      }, children, React.createElement(Indicator, {
-        className: indicatorClassName,
-        tabUpdates: _this2.tabUpdates,
-        vertical: vertical
-      })));
+        indicatorClassName = _this$props2.indicatorClassName,
+        ariaDescribedby = _this$props2['aria-describedby'];
+
+    var _this$getProps = this.getProps(),
+        vertical = _this$getProps.vertical,
+        size = _this$getProps.size;
+
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      var styles = getStyles(emotion);
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        var _emotion$cx;
+
+        _this2.theme = theme;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this2.setRootNode
+        }, _this2.props), /*#__PURE__*/React.createElement("div", {
+          "data-tid": TabsDataTids.root,
+          className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.rootSmall(_this2.theme)] = size === 'small', _emotion$cx[styles.rootMedium(_this2.theme)] = size === 'medium', _emotion$cx[styles.rootLarge(_this2.theme)] = size === 'large', _emotion$cx[styles.vertical()] = vertical, _emotion$cx)),
+          style: {
+            width: width
+          },
+          "aria-describedby": ariaDescribedby
+        }, /*#__PURE__*/React.createElement(TabsContext.Provider, {
+          value: {
+            vertical: vertical,
+            activeTab: value,
+            size: size,
+            getTab: _this2.getTab,
+            addTab: _this2.addTab,
+            removeTab: _this2.removeTab,
+            notifyUpdate: _this2.notifyUpdate,
+            shiftFocus: _this2.shiftFocus,
+            switchTab: _this2.switchTab
+          }
+        }, children, /*#__PURE__*/React.createElement(Indicator, {
+          className: indicatorClassName,
+          tabUpdates: _this2.tabUpdates,
+          vertical: _this2.getProps().vertical
+        }))));
+      });
     });
   };
 
   return Tabs;
-}(React.Component);
-Tabs.__KONTUR_REACT_UI__ = 'Tabs';
-Tabs.propTypes = {
-  children: PropTypes.node,
-  indicatorClassName: PropTypes.string,
-  value: PropTypes.string.isRequired,
-  vertical: PropTypes.bool,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  onValueChange: PropTypes.func
-};
-Tabs.defaultProps = {
-  vertical: false
-};
-Tabs.Tab = Tab;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.displayName = 'Tabs', _class2.defaultProps = {
+  vertical: false,
+  size: 'large'
+}, _class2.Tab = Tab, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.tsx"],"names":["React","findDOMNode","PropTypes","cn","ThemeContext","Indicator","jsStyles","TabsContext","Tab","Tabs","theme","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","Component","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","vertical","width","children","indicatorClassName","root","activeTab","__KONTUR_REACT_UI__","propTypes","node","string","isRequired","bool","oneOfType","number","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { findDOMNode } from 'react-dom';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { Indicator } from './Indicator';\r\nimport { jsStyles } from './Tabs.styles';\r\nimport { TabsContext } from './TabsContext';\r\nimport { Tab } from './Tab';\r\n\r\nexport interface TabsProps {\r\n  /**\r\n   * Tab component should be child of Tabs component\r\n   */\r\n  children?: React.ReactNode;\r\n\r\n  /**\r\n   * Classname of indicator\r\n   */\r\n  indicatorClassName?: string;\r\n\r\n  /**\r\n   * Tabs change event\r\n   */\r\n  onValueChange?: (value: string) => void;\r\n\r\n  /**\r\n   * Active tab identifier\r\n   */\r\n  value: string;\r\n\r\n  /**\r\n   * Vertical indicator\r\n   * @default false\r\n   */\r\n  vertical: boolean;\r\n\r\n  /**\r\n   * Width of tabs container\r\n   */\r\n  width?: number | string;\r\n}\r\n\r\n/**\r\n * Tabs wrapper\r\n *\r\n * contains static property `Tab`\r\n */\r\nexport class Tabs extends React.Component<TabsProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Tabs';\r\n\r\n  public static propTypes = {\r\n    children: PropTypes.node,\r\n    indicatorClassName: PropTypes.string,\r\n    value: PropTypes.string.isRequired,\r\n    vertical: PropTypes.bool,\r\n    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n    onValueChange: PropTypes.func,\r\n  };\r\n  public static defaultProps = {\r\n    vertical: false,\r\n  };\r\n\r\n  public static Tab = Tab;\r\n\r\n  private theme!: Theme;\r\n\r\n  private tabs: Array<{\r\n    getNode: () => Tab | null;\r\n    id: string;\r\n  }> = [];\r\n\r\n  private tabUpdates = {\r\n    on: (cb: () => void) => {\r\n      const index = this.listeners.push(cb);\r\n      return () => {\r\n        this.listeners.splice(index, 1);\r\n      };\r\n    },\r\n  };\r\n\r\n  private listeners: Array<() => void> = [];\r\n\r\n  public render(): JSX.Element {\r\n    const { vertical, value, width, children, indicatorClassName } = this.props;\r\n\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return (\r\n            <div className={cn(jsStyles.root(this.theme), vertical && jsStyles.vertical(this.theme))} style={{ width }}>\r\n              <TabsContext.Provider\r\n                value={{\r\n                  vertical,\r\n                  activeTab: value,\r\n                  getTab: this.getTab,\r\n                  addTab: this.addTab,\r\n                  removeTab: this.removeTab,\r\n                  notifyUpdate: this.notifyUpdate,\r\n                  shiftFocus: this.shiftFocus,\r\n                  switchTab: this.switchTab,\r\n                }}\r\n              >\r\n                {children}\r\n                <Indicator className={indicatorClassName} tabUpdates={this.tabUpdates} vertical={vertical} />\r\n              </TabsContext.Provider>\r\n            </div>\r\n          );\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private shiftFocus = (fromTab: string, delta: number) => {\r\n    const { tabs } = this;\r\n    const index = tabs.findIndex(x => x.id === fromTab);\r\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\r\n    const tab = tabs[newIndex];\r\n\r\n    const tabNode = tab.getNode();\r\n    let htmlNode = null;\r\n    if (tabNode instanceof React.Component) {\r\n      htmlNode = findDOMNode(tabNode);\r\n    }\r\n\r\n    if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {\r\n      htmlNode.focus();\r\n    }\r\n  };\r\n\r\n  private notifyUpdate = () => {\r\n    this.listeners.forEach(cb => cb());\r\n  };\r\n\r\n  private switchTab = (id: string) => {\r\n    const { onValueChange, value } = this.props;\r\n    if (id !== value && onValueChange) {\r\n      onValueChange(id);\r\n    }\r\n  };\r\n\r\n  private getTab = (id: string): Tab | null => {\r\n    const { getNode = null } = this.tabs.find(x => x.id === id) || {};\r\n    return getNode && getNode();\r\n  };\r\n\r\n  private addTab = (id: string, getNode: () => any) => {\r\n    this.tabs = this.tabs.concat({ id, getNode });\r\n  };\r\n\r\n  private removeTab = (id: string) => {\r\n    this.tabs = this.tabs.filter(tab => tab.id !== id);\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Tabs.tsx"],"names":["React","globalObject","CommonWrapper","EmotionConsumer","getRootNode","rootNode","createPropsGetter","isInstanceOf","ThemeContext","Indicator","getStyles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","findIndex","x","id","newIndex","Math","max","min","length","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","props","onValueChange","value","getTab","find","addTab","concat","removeTab","filter","render","width","children","indicatorClassName","ariaDescribedby","vertical","size","emotion","styles","theme","setRootNode","cx","rootSmall","rootMedium","rootLarge","activeTab","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { emptyHandler } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { Indicator } from './Indicator';\nimport { getStyles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\ntype ValueBaseType = string;\ninterface TabType<T extends ValueBaseType> {\n  getNode: () => Tab<T> | null;\n  id: T;\n}\n\nexport interface TabsProps<T extends ValueBaseType = string> extends CommonProps {\n  /**\n   * Позволяет задать кастомный класс подчёркиванию таба.\n   */\n  indicatorClassName?: string;\n\n  /**\n   * Задаёт размер контрола.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: SizeProp;\n\n  /**\n   * Задаёт текущий активный `<Tab />`. Принимает `id` таба.\n   */\n  value: T;\n\n  /**\n   * Функция, позволяющая изменить текущий активный `<Tab />`.\n   */\n  onValueChange?: (value: T) => void;\n\n  /**\n   * Переводит компонент в режим вертикального отображения.\n   * @default false\n   */\n  vertical?: boolean;\n\n  /**\n   * `CSS`-свойство `width`.\n   */\n  width?: number | string;\n\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его.\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const TabsDataTids = {\n  root: 'Tabs__root',\n  indicatorRoot: 'Indicator__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;\n\n/**\n * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'Tabs';\n  public static displayName = 'Tabs';\n\n  public static defaultProps: DefaultProps = {\n    vertical: false,\n    size: 'large',\n  };\n\n  private getProps = createPropsGetter(Tabs.defaultProps);\n\n  public static Tab = Tab;\n\n  private theme!: Theme;\n\n  private tabs: Array<TabType<T>> = [];\n\n  private tabUpdates = {\n    on: (cb: () => void) => {\n      const index = this.listeners.push(cb);\n      return () => {\n        this.listeners.splice(index, 1);\n      };\n    },\n  };\n\n  private listeners: Array<typeof emptyHandler> = [];\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    const { value, width, children, indicatorClassName, 'aria-describedby': ariaDescribedby } = this.props;\n    const { vertical, size } = this.getProps();\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          const styles = getStyles(emotion);\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return (\n                  <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n                    <div\n                      data-tid={TabsDataTids.root}\n                      className={emotion.cx({\n                        [styles.rootSmall(this.theme)]: size === 'small',\n                        [styles.rootMedium(this.theme)]: size === 'medium',\n                        [styles.rootLarge(this.theme)]: size === 'large',\n                        [styles.vertical()]: vertical,\n                      })}\n                      style={{ width }}\n                      aria-describedby={ariaDescribedby}\n                    >\n                      <TabsContext.Provider\n                        value={{\n                          vertical,\n                          activeTab: value,\n                          size,\n                          getTab: this.getTab,\n                          addTab: this.addTab,\n                          removeTab: this.removeTab,\n                          notifyUpdate: this.notifyUpdate,\n                          shiftFocus: this.shiftFocus,\n                          switchTab: this.switchTab,\n                        }}\n                      >\n                        {children}\n                        <Indicator\n                          className={indicatorClassName}\n                          tabUpdates={this.tabUpdates}\n                          vertical={this.getProps().vertical}\n                        />\n                      </TabsContext.Provider>\n                    </div>\n                  </CommonWrapper>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n    const { tabs } = this;\n    const index = tabs.findIndex((x) => x.id === fromTab);\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n    const tab = tabs[newIndex];\n\n    const tabNode = tab.getNode();\n    const htmlNode = getRootNode(tabNode);\n\n    if (isInstanceOf(htmlNode, globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {\n      htmlNode.focus();\n    }\n  };\n\n  private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n    this.listeners.forEach((cb) => cb());\n  };\n\n  private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n    const { onValueChange, value } = this.props;\n    if (id !== value && onValueChange) {\n      onValueChange(id);\n    }\n  };\n\n  private getTab: TabsContextType<T>['getTab'] = (id) => {\n    const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n    return getNode && getNode();\n  };\n\n  private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n    this.tabs = this.tabs.concat({ id, getNode });\n  };\n\n  private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n    this.tabs = this.tabs.filter((tab) => tab.id !== id);\n  };\n}\n"]}

package/components/Tabs/Tabs.d.ts

@@ -1,56 +1,60 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { AriaAttributes } from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
 import { Tab } from './Tab';
-export interface TabsProps {
+declare type ValueBaseType = string;
+export interface TabsProps<T extends ValueBaseType = string> extends CommonProps {
     /**
-     * Tab component should be child of Tabs component
+     * Позволяет задать кастомный класс подчёркиванию таба.
      */
-    children?: React.ReactNode;
+    indicatorClassName?: string;
     /**
-     * Classname of indicator
+     * Задаёт размер контрола.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
      */
-    indicatorClassName?: string;
+    size?: SizeProp;
     /**
-     * Tabs change event
+     * Задаёт текущий активный `<Tab />`. Принимает `id` таба.
      */
-    onValueChange?: (value: string) => void;
+    value: T;
     /**
-     * Active tab identifier
+     * Функция, позволяющая изменить текущий активный `<Tab />`.
      */
-    value: string;
+    onValueChange?: (value: T) => void;
     /**
-     * Vertical indicator
+     * Переводит компонент в режим вертикального отображения.
      * @default false
      */
-    vertical: boolean;
+    vertical?: boolean;
     /**
-     * Width of tabs container
+     * `CSS`-свойство `width`.
      */
     width?: number | string;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его.
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
+export declare const TabsDataTids: {
+    readonly root: "Tabs__root";
+    readonly indicatorRoot: "Indicator__root";
+};
+declare type DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;
 /**
- * Tabs wrapper
- *
- * contains static property `Tab`
+ * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
  */
-export declare class Tabs extends React.Component<TabsProps> {
+export declare class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {
     static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        indicatorClassName: PropTypes.Requireable<string>;
-        value: PropTypes.Validator<string>;
-        vertical: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<string | number>;
-        onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        vertical: boolean;
-    };
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
     static Tab: typeof Tab;
     private theme;
     private tabs;
     private tabUpdates;
     private listeners;
+    private setRootNode;
     render(): JSX.Element;
     private shiftFocus;
     private notifyUpdate;
@@ -59,3 +63,4 @@ export declare class Tabs extends React.Component<TabsProps> {
     private addTab;
     private removeTab;
 }
+export {};