@megafon/ui-core 3.12.0 → 4.0.0-beta.10

package/dist/es/components/Select/Select.js

@@ -17,7 +17,6 @@ import { Fragment, useEffect, useReducer, useCallback } from 'react';
 import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
 import * as PropTypes from 'prop-types';
-import InputLabel from "../InputLabel/InputLabel";
 import "./Select.css";
 import selectReducer, { initialState, SelectActions } from "./reducer/selectReducer";
 var UPDATE_ITEMS_LIST = SelectActions.UPDATE_ITEMS_LIST,
@@ -325,6 +324,15 @@ var Select = function Select(_ref) {
     !filterValue && node && itemsNodeList.current.push(node);
   }, [filterValue]);
 
+  var renderLabel = function renderLabel() {
+    return /*#__PURE__*/React.createElement("label", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label), {
+      htmlFor: labelId,
+      className: cn('label')
+    }), label, required && /*#__PURE__*/React.createElement("span", {
+      className: cn('require-mark')
+    }, "*"));
+  };
+
   var renderTitle = function renderTitle() {
     var item = items.find(function (elem) {
       return elem.value === currentValue;
@@ -336,26 +344,30 @@ var Select = function Select(_ref) {
     }
 
     return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
-      className: cn('title', {
-        placeholder: !!placeholder && currentValue === undefined
-      }, [classes === null || classes === void 0 ? void 0 : classes.title]),
+      className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title]),
       role: "button",
       tabIndex: 0,
       onClick: handleSelectClick
     }), /*#__PURE__*/React.createElement("div", {
-      className: cn('title-inner', [classes === null || classes === void 0 ? void 0 : classes.titleInner])
-    }, inputTitle));
+      className: cn('title-inner', {
+        placeholder: currentValue === undefined
+      }, [classes === null || classes === void 0 ? void 0 : classes.titleInner])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('title-value')
+    }, inputTitle), label && renderLabel()));
   };
 
   var renderCombobox = function renderCombobox() {
-    return /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
-      className: cn('combobox'),
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+      className: cn('combobox', {
+        placeholder: inputValue === undefined
+      }),
       onFocus: handleComboboxFocus,
       onChange: handleChangeCombobox,
       type: "text",
       value: inputValue,
       placeholder: placeholder
-    }));
+    })), label && renderLabel());
   };
 
   var renderChildren = function renderChildren() {
@@ -399,15 +411,10 @@ var Select = function Select(_ref) {
     ref: selectNode
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
-  }, label && /*#__PURE__*/React.createElement(InputLabel, {
-    dataAttrs: {
-      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label
-    },
-    htmlFor: labelId
-  }, label, required && /*#__PURE__*/React.createElement("span", {
-    className: cn('require-mark')
-  }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: cn('control', classes.control),
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('control', {
+      labeled: !!label
+    }, classes.control),
     onKeyDown: handleKeyDown
   }, type === SelectTypes.COMBOBOX && renderCombobox(), type === SelectTypes.CLASSIC && renderTitle()), renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.noticeText), {
     className: cn('text', {

package/dist/es/components/Switcher/Switcher.css

@@ -13,7 +13,7 @@
 }
 .mfui-switcher__content_size_small {
   font-size: 12px;
-  line-height: 16px;
+  line-height: 18px;
 }
 .mfui-switcher__content_left {
   margin-right: 12px;

package/dist/es/components/Tabs/Tabs.css

@@ -1,13 +1,28 @@
+.mfui-tabs .swiper-wrapper {
+  position: relative;
+  z-index: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+}
+.mfui-tabs__swiper-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
 .mfui-tabs__swiper {
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
   font-weight: 500;
   position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  display: inline-block;
+  width: 100%;
+  padding: 4px;
+  border-radius: 12px;
   overflow: hidden;
+  background-color: var(--spbSky0);
 }
 .mfui-tabs__swiper:before,
 .mfui-tabs__swiper:after {
@@ -17,17 +32,17 @@
   bottom: 0;
   z-index: 1;
   width: 64px;
+  background: -webkit-gradient(linear, right top, left top, from(var(--stcBlack5)), color-stop(64%, transparent));
+  background: linear-gradient(270deg, var(--stcBlack5) 0%, transparent 64%);
   pointer-events: none;
 }
 .mfui-tabs__swiper:before {
   left: 0;
-  background: -webkit-gradient(linear, left top, right top, from(var(--base)), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to right, var(--base), rgba(255, 255, 255, 0));
+  -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
+          transform: matrix(-1, 0, 0, 1, 0, 0);
 }
 .mfui-tabs__swiper:after {
   right: 0;
-  background: -webkit-gradient(linear, right top, left top, from(var(--base)), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to left, var(--base), rgba(255, 255, 255, 0));
 }
 .mfui-tabs__swiper_beginning:before {
   display: none;
@@ -35,68 +50,11 @@
 .mfui-tabs__swiper_end:after {
   display: none;
 }
-.mfui-tabs .swiper-wrapper {
-  position: relative;
-  z-index: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  max-width: 100%;
-}
-@media screen and (max-width: 767px) {
-  .mfui-tabs .swiper-wrapper {
-    width: 100%;
-  }
-}
 .mfui-tabs__slide {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-}
-@media screen and (max-width: 767px) {
-  .mfui-tabs__slide {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-  }
-}
-.mfui-tabs__tab-inner {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-sizing: content-box;
-          box-sizing: content-box;
-  height: 32px;
-  color: var(--content);
-  white-space: nowrap;
-  text-decoration: none;
-  cursor: pointer;
-  fill: var(--content);
-}
-.mfui-tabs__tab-inner:hover {
-  color: var(--brandGreen);
-  fill: var(--brandGreen);
-}
-.mfui-tabs__tab-inner_current {
-  color: var(--brandGreen);
-  fill: var(--brandGreen);
-}
-.mfui-tabs__tab-icon {
-  width: 32px;
-  height: 32px;
-}
-.mfui-tabs__tab-icon:not(:last-child) {
-  margin-right: 8px;
-}
-.mfui-tabs__tab-icon svg {
-  width: 100%;
-  height: 100%;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
 }
 .mfui-tabs__panel {
   display: none;
@@ -106,10 +64,14 @@
 }
 .mfui-tabs__underline {
   position: absolute;
+  top: 0;
   bottom: 0;
-  left: 0;
-  height: 2px;
-  background-color: var(--brandGreen);
+  left: auto;
+  z-index: 0;
+  border-radius: 8px;
+  background-color: var(--stcWhite);
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
 }
@@ -125,6 +87,11 @@
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   cursor: pointer;
+  opacity: 1;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+  -webkit-transition-property: background-color, opacity;
+  transition-property: background-color, opacity;
   fill: var(--base);
 }
 @media screen and (max-width: 1023px) {
@@ -132,95 +99,129 @@
     display: none;
   }
 }
+.mfui-tabs__arrow:hover {
+  background-color: var(--spbSky3);
+}
+.mfui-tabs__arrow:active {
+  background-color: var(--buttonDown);
+}
 .mfui-tabs__arrow_prev {
-  left: 0;
+  left: 14px;
 }
 .mfui-tabs__arrow_next {
-  right: 0;
+  right: 14px;
+  -webkit-transform: translateY(-50%) rotate(180deg);
+          transform: translateY(-50%) rotate(180deg);
 }
 .mfui-tabs__arrow_hide {
-  display: none;
+  opacity: 0;
+  pointer-events: none;
 }
-.mfui-tabs_size_small .mfui-tabs__slide:not(:last-child) .mfui-tabs__tab {
-  padding-right: 40px;
+.mfui-tabs__tab-inner {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  height: 36px;
+  padding: 2px 12px;
+  color: var(--spbSky3);
+  white-space: nowrap;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
+  fill: var(--spbSky3);
 }
-@media screen and (max-width: 767px) {
-  .mfui-tabs_size_small .mfui-tabs__slide:not(:last-child) .mfui-tabs__tab {
-    padding-right: 32px;
-  }
+.mfui-tabs__tab-inner:focus {
+  color: var(--spbSky3);
+  fill: var(--spbSky3);
 }
-.mfui-tabs_size_small .mfui-tabs__tab-inner {
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: start;
-  height: 24px;
-  padding: 7px 0;
+.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover {
+  color: var(--content);
+  fill: var(--content);
 }
-@media screen and (max-width: 767px) {
-  .mfui-tabs_size_small .mfui-tabs__tab-inner {
-    padding: 3px 0;
-  }
+.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):active {
+  color: var(--buttonDown);
+  fill: var(--buttonDown);
 }
-.mfui-tabs_size_small .mfui-tabs__tab-icon {
-  width: 24px;
-  height: 24px;
+.mfui-tabs__tab-inner_with-icon {
+  padding-left: 8px;
 }
-.mfui-tabs_size_medium .mfui-tabs__tab-inner {
-  padding: 7px 24px;
+.mfui-tabs__tab-inner_current {
+  color: var(--stcBlack);
+  cursor: auto;
+  fill: var(--stcBlack);
 }
-@media screen and (max-width: 767px) {
-  .mfui-tabs_size_medium .mfui-tabs__tab-inner {
-    padding: 3px 16px;
-  }
+.mfui-tabs__tab-icon {
+  width: 32px;
+  height: 32px;
+  margin-right: 4px;
+}
+.mfui-tabs__tab-icon svg {
+  width: 100%;
+  height: 100%;
 }
 .mfui-tabs_size_large .mfui-tabs__swiper {
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 24px;
-  letter-spacing: 0.5px;
+  padding: 6px;
 }
-@media screen and (min-width: 1280px) {
+@media screen and (min-width: 768px) {
   .mfui-tabs_size_large .mfui-tabs__swiper {
-    font-size: 20px;
-    line-height: 28px;
+    padding: 8px;
   }
 }
 .mfui-tabs_size_large .mfui-tabs__tab-inner {
-  padding: 11px 24px;
+  height: 48px;
+  padding: 8px 24px;
 }
-@media screen and (max-width: 767px) {
+@media screen and (min-width: 768px) {
   .mfui-tabs_size_large .mfui-tabs__tab-inner {
-    padding: 7px 16px;
+    height: 56px;
+    padding: 12px 40px;
   }
 }
-.mfui-tabs_h-align_center .mfui-tabs__swiper {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+.mfui-tabs_size_large .mfui-tabs__tab-inner_with-icon {
+  padding-left: 20px;
 }
-.mfui-tabs_h-align_center .mfui-tabs__tab {
-  border-bottom: 1px solid var(--stcWhite);
+@media screen and (min-width: 768px) {
+  .mfui-tabs_size_large .mfui-tabs__tab-inner_with-icon {
+    padding-left: 28px;
+  }
 }
-.mfui-tabs_h-align_left .mfui-tabs__swiper-wrapper {
-  position: relative;
+.mfui-tabs_size_large .mfui-tabs__tab-icon {
+  margin-right: 6px;
 }
-.mfui-tabs_h-align_left .mfui-tabs__swiper-wrapper:before {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background-color: var(--spbSky2);
+.mfui-tabs_auto-width .mfui-tabs__swiper {
+  width: auto;
+  max-width: 100%;
+}
+.mfui-tabs_auto-width .mfui-tabs__slide {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+}
+.mfui-tabs_auto-width.mfui-tabs_h-align_center .mfui-tabs__swiper-wrapper {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-tabs_indents .mfui-tabs__swiper {
+  .mfui-tabs_indents .mfui-tabs__swiper-wrapper {
     margin: 0 -48px;
     padding: 0 48px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-tabs_indents .mfui-tabs__swiper {
+  .mfui-tabs_indents .mfui-tabs__swiper-wrapper {
     margin: 0 -16px;
     padding: 0 16px;
   }
@@ -233,35 +234,31 @@
   z-index: 100;
   background-color: var(--base);
 }
-.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:before {
-  left: 0;
-  background: -webkit-gradient(linear, left top, right top, from(var(--brandGreen)), to(transparent));
-  background: linear-gradient(to right, var(--brandGreen), transparent);
-}
-.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:after {
-  right: 0;
-  background: -webkit-gradient(linear, right top, left top, from(var(--brandGreen)), to(transparent));
-  background: linear-gradient(to left, var(--brandGreen), transparent);
-}
-.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab {
-  border-color: var(--stcBlack5);
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper {
+  background-color: var(--stcBlack50);
 }
-.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner {
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current) {
   color: var(--stcWhite50);
   fill: var(--stcWhite50);
 }
-.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:hover {
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current):hover {
   color: var(--stcWhite);
   fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current {
-  color: var(--stcWhite);
-  fill: var(--stcWhite);
+  color: var(--stcBlack);
+  fill: var(--stcBlack);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__underline {
   background-color: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow {
   background-color: var(--stcWhite);
-  fill: var(--brandGreen);
+  fill: var(--stcBlack);
+}
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow:hover {
+  background-color: var(--stcWhite50);
+}
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow:active {
+  background-color: var(--stcBlack0);
 }

package/dist/es/components/Tabs/Tabs.d.ts

@@ -1,22 +1,21 @@
 import * as React from 'react';
 import './Tabs.less';
 import { ITabProps } from './Tab';
-export declare const TabSize: {
-    readonly SMALL: "small";
-    readonly MEDIUM: "medium";
-    readonly LARGE: "large";
-};
 export declare const TabHAlign: {
     readonly LEFT: "left";
     readonly CENTER: "center";
 };
+export declare const TabSize: {
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
 export declare const TabColorTheme: {
     readonly WHITE: "white";
     readonly GREEN: "green";
 };
 declare type TabSizeType = typeof TabSize[keyof typeof TabSize];
-declare type TabHAlignType = typeof TabHAlign[keyof typeof TabHAlign];
 declare type TabColorThemeType = typeof TabColorTheme[keyof typeof TabColorTheme];
+declare type TabHAlignType = typeof TabHAlign[keyof typeof TabHAlign];
 export interface ITabsProps {
     /** Дополнительный класс для корневого элемента */
     className?: string;
@@ -37,10 +36,12 @@ export interface ITabsProps {
     };
     /** Размер табов */
     size?: TabSizeType;
-    /** Горизонтальное выравнивание */
-    hAlign?: TabHAlignType;
     /** Цветовая тема табов для определенных фонов */
     tabColorTheme?: TabColorThemeType;
+    /** Ширина табов по размеру содержимого */
+    autoWidth?: boolean;
+    /** Горизонтальное выравнивание (только для autoWidth = true) */
+    hAlign?: TabHAlignType;
     /** Фиксация табов у верхней границы окна */
     sticky?: boolean;
     /** Индекс активного таба (включает режим управления табами снаружи) */

package/dist/es/components/Tabs/Tabs.js

@@ -22,23 +22,14 @@ var ArrowLeft = function ArrowLeft(props) {
   }));
 };
 
-var ArrowRight = function ArrowRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M8 13l3-3-3-3 1-1 4 4-4 4z"
-  }));
+export var TabHAlign = {
+  LEFT: 'left',
+  CENTER: 'center'
 };
-
 export var TabSize = {
-  SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large'
 };
-export var TabHAlign = {
-  LEFT: 'left',
-  CENTER: 'center'
-};
 export var TabColorTheme = {
   WHITE: 'white',
   GREEN: 'green'
@@ -55,17 +46,19 @@ var Tabs = function Tabs(_ref) {
       activeTabClass = _ref$classes.activeTab,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
-      _ref$hAlign = _ref.hAlign,
-      hAlign = _ref$hAlign === void 0 ? 'left' : _ref$hAlign,
       _ref$tabColorTheme = _ref.tabColorTheme,
       tabColorTheme = _ref$tabColorTheme === void 0 ? 'white' : _ref$tabColorTheme,
       _ref$sticky = _ref.sticky,
       sticky = _ref$sticky === void 0 ? false : _ref$sticky,
+      _ref$hAlign = _ref.hAlign,
+      hAlign = _ref$hAlign === void 0 ? 'left' : _ref$hAlign,
       _ref$defaultIndex = _ref.defaultIndex,
       defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
       outerIndex = _ref.currentIndex,
       _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
       renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
+      _ref$autoWidth = _ref.autoWidth,
+      autoWidth = _ref$autoWidth === void 0 ? false : _ref$autoWidth,
       children = _ref.children,
       dataAttrs = _ref.dataAttrs,
       onTabClick = _ref.onTabClick,
@@ -275,7 +268,8 @@ var Tabs = function Tabs(_ref) {
     return /*#__PURE__*/React.createElement(ElementType, _extends({
       href: href,
       className: cn('tab-inner', {
-        current: currentIndex === index
+        current: currentIndex === index,
+        'with-icon': !!icon
       }),
       onClick: handleTabInnerClick(index)
     }, filterDataAttrs(attr, index + 1)), !!icon && /*#__PURE__*/React.createElement("div", {
@@ -368,10 +362,11 @@ var Tabs = function Tabs(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,
-      'h-align': hAlign,
       'tab-color': tabColorTheme,
+      'h-align': hAlign,
       indents: !innerIndentsClass,
-      sticky: isSticky
+      sticky: isSticky,
+      'auto-width': autoWidth
     }, [className, rootClass]),
     ref: rootRef
   }), /*#__PURE__*/React.createElement("div", {
@@ -411,7 +406,7 @@ var Tabs = function Tabs(_ref) {
       hide: isBeginning
     }),
     onClick: handlePrevArrowClick
-  })), /*#__PURE__*/React.createElement(ArrowRight, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
+  })), /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
     className: cn('arrow', {
       next: true,
       hide: isEnd
@@ -437,6 +432,7 @@ Tabs.propTypes = {
   }),
   size: PropTypes.oneOf(Object.values(TabSize)),
   hAlign: PropTypes.oneOf(Object.values(TabHAlign)),
+  autoWidth: PropTypes.bool,
   tabColorTheme: PropTypes.oneOf(Object.values(TabColorTheme)),
   sticky: PropTypes.bool,
   currentIndex: PropTypes.number,