@zohodesk/components 1.0.0-temp-197 → 1.0.0-temp-199

package/lib/Select/Select.module.css

@@ -1,135 +1,135 @@
-.input {
-  cursor: pointer;
-}
-
-.small {
-  max-height: var(--zd_size200) ;
-}
-
-.medium {
-  max-height: var(--zd_size350) ;
-}
-
-.large {
-  max-height: var(--zd_size400) ;
-}
-
-.emptyState {
-  font-size: var(--zd_font_size14) ;
-  color: var(--zdt_select_emptystate_text);
-  composes: semibold from '../common/common.module.css';
-}
-
-.box_small .emptyState {
-  padding: var(--zd_size12) var(--zd_size6) ;
-}
-
-.box_medium .emptyState {
-  padding: var(--zd_size12) var(--zd_size15) ;
-}
-
-.hide {
-  composes: vishidden from '../common/common.module.css';
-}
-
-.container {
-  position: relative;
-}
-/* css:lineheight-validation:ignore */
-.arrowIcon {
-  height: var(--zd_size8) ;
-  line-height: var(--zd_size8);
-}
-
-.small.search {
-  padding: 0 var(--zd_size5) ;
-}
-
-.medium.search {
-  padding: var(--zd_size3) var(--zd_size20) 0 ;
-}
-
-.title {
-  margin-bottom: var(--zd_size6) ;
-}
-
-.groupTitle {
-  margin: var(--zd_size6) 0 ;
-}
-
-.listItemContainer {
-  padding: var(--zd_size10) 0 ;
-}
-
-.responsivelistItemContainer {
-  padding: var(--zd_size10) 0 0 ;
-}
-
-.readonly {
-  --textboxicon_icon_cursor: not-allowed;
-}
-
-.transparentContainer .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.transparentContainer:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
-
-.disable {
-  color: var(--zdt_select_disable_text);
-}
-
-.leftIcon {
-  position: absolute;
-  top: 0 ;
-  bottom: 0 ;
-  width: var(--zd_size30) ;
-}
-
-[dir=ltr] .leftIcon {
-  left: 0 ;
-}
-
-[dir=rtl] .leftIcon {
-  right: 0 ;
-}
-
-[dir=ltr] .iconSelect {
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30) ;
-}
-
-.dropBoxList {
-  padding: var(--zd_size10) 0 ;
-}
-
-.responsivedropBoxList {
-  padding: var(--zd_size10) 0 0 0 ;
-}
-
-.rotate {
-  transform: rotateX(180deg);
-}
-
-.iconOnHoverStyle .arrowIcon,
-.iconOnHoverReadonly .arrowIcon,
-.iconOnHoverReadonly:hover .arrowIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.iconOnHoverStyle:hover .arrowIcon {
-  opacity: 1;
-  visibility: visible;
-}
-
-.loader {
-  padding: var(--zd_size10) ;
+.input {
+  cursor: pointer;
+}
+
+.small {
+  max-height: var(--zd_size200) ;
+}
+
+.medium {
+  max-height: var(--zd_size350) ;
+}
+
+.large {
+  max-height: var(--zd_size400) ;
+}
+
+.emptyState {
+  font-size: var(--zd_font_size14) ;
+  color: var(--zdt_select_emptystate_text);
+  composes: semibold from '../common/common.module.css';
+}
+
+.box_small .emptyState {
+  padding: var(--zd_size12) var(--zd_size6) ;
+}
+
+.box_medium .emptyState {
+  padding: var(--zd_size12) var(--zd_size15) ;
+}
+
+.hide {
+  composes: vishidden from '../common/common.module.css';
+}
+
+.container {
+  position: relative;
+}
+/* css:lineheight-validation:ignore */
+.arrowIcon {
+  height: var(--zd_size8) ;
+  line-height: var(--zd_size8);
+}
+
+.small.search {
+  padding: 0 var(--zd_size5) ;
+}
+
+.medium.search {
+  padding: var(--zd_size3) var(--zd_size20) 0 ;
+}
+
+.title {
+  margin-bottom: var(--zd_size6) ;
+}
+
+.groupTitle {
+  margin: var(--zd_size6) 0 ;
+}
+
+.listItemContainer {
+  padding: var(--zd_size10) 0 ;
+}
+
+.responsivelistItemContainer {
+  padding: var(--zd_size10) 0 0 ;
+}
+
+.readonly {
+  --textboxicon_icon_cursor: not-allowed;
+}
+
+.transparentContainer .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.transparentContainer:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+
+.disable {
+  color: var(--zdt_select_disable_text);
+}
+
+.leftIcon {
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  width: var(--zd_size30) ;
+}
+
+[dir=ltr] .leftIcon {
+  left: 0 ;
+}
+
+[dir=rtl] .leftIcon {
+  right: 0 ;
+}
+
+[dir=ltr] .iconSelect {
+  padding-left: var(--zd_size30) ;
+}
+
+[dir=rtl] .iconSelect {
+  padding-right: var(--zd_size30) ;
+}
+
+.dropBoxList {
+  padding: var(--zd_size10) 0 ;
+}
+
+.responsivedropBoxList {
+  padding: var(--zd_size10) 0 0 0 ;
+}
+
+.rotate {
+  transform: rotateX(180deg);
+}
+
+.iconOnHoverStyle .arrowIcon,
+.iconOnHoverReadonly .arrowIcon,
+.iconOnHoverReadonly:hover .arrowIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.iconOnHoverStyle:hover .arrowIcon {
+  opacity: 1;
+  visibility: visible;
+}
+
+.loader {
+  padding: var(--zd_size10) ;
 }

package/lib/Select/SelectWithAvatar.js

@@ -51,6 +51,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -208,7 +210,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           htmlId = _this$props.htmlId,
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
-          dataSelectorId = _this$props.dataSelectorId;
+          dataSelectorId = _this$props.dataSelectorId,
+          customProps = _this$props.customProps;
+      var _customProps$suggesti = customProps.suggestionsProps,
+          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -341,7 +346,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           a11y: {
             role: 'heading'
           }
-        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
           activeId: selectedId,
           suggestions: suggestions,
           getRef: _this2.suggestionItemRef,
@@ -357,7 +362,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaParentRole: 'listbox',
             role: 'option'
           }
-        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/Select/SelectWithIcon.js

@@ -45,6 +45,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -410,7 +412,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           i18nKeys = _this$props7.i18nKeys,
           htmlId = _this$props7.htmlId,
           isLoading = _this$props7.isLoading,
-          dataSelectorId = _this$props7.dataSelectorId;
+          dataSelectorId = _this$props7.dataSelectorId,
+          customProps = _this$props7.customProps;
+      var _customProps$listItem = customProps.listItemProps,
+          listItemProps = _customProps$listItem === void 0 ? {} : _customProps$listItem;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -536,7 +541,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           var iconName = options.iconName,
               iconSize = options.iconSize,
               iconColor = options.iconColor;
-          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
             key: options[idKey],
             value: options[valueKey],
             size: "medium",
@@ -560,7 +565,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
               ariaSelected: selectedId === options[idKey],
               ariaLabel: options[valueKey]
             }
-          });
+          }, listItemProps));
         })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/Select/props/defaultProps.js

@@ -80,7 +80,8 @@ var GroupSelect_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
 var SelectWithAvatar_defaultProps = {
@@ -105,7 +106,8 @@ var SelectWithAvatar_defaultProps = {
   isSearchClearOnClose: true,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
@@ -117,5 +119,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -186,7 +186,8 @@ var GroupSelect_propTypes = {
   }),
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
-  isDefaultSelectValue: _propTypes["default"].bool
+  isDefaultSelectValue: _propTypes["default"].bool,
+  customProps: _propTypes["default"].string
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
 
@@ -249,7 +250,8 @@ var SelectWithAvatar_propTypes = _objectSpread(_objectSpread({}, Select_propType
   htmlId: _propTypes["default"].string,
   needEffect: _propTypes["default"].bool,
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  customProps: _propTypes["default"].string
 });
 
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
@@ -305,6 +307,7 @@ var SelectWithIcon_propTypes = {
   searchBoxSize: _propTypes["default"].string,
   needResponsive: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
-  emptyMessage: _propTypes["default"].string
+  emptyMessage: _propTypes["default"].string,
+  customProps: _propTypes["default"].string
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/lib/Stencils/Stencils.module.css

@@ -1,96 +1,96 @@
-.varClass {
-  /* stencils default variables */
-  --stencil_height: var(--zd_size9);
-  --stencil_width: 100%;
-  --stencil_border_radius: 5px;
-}
-.container {
-  composes: varClass;
-  height: var(--stencil_height);
-  width: var(--stencil_width);
-  border-radius: var(--stencil_border_radius);
-}
-.stencil {
-  background-size: 800px 1px;
-}
-[dir=ltr] .stencil {
-  animation-name:  placeHolderShimmer-ltr ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-[dir=rtl] .stencil {
-  animation-name:  placeHolderShimmer-rtl ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-@keyframes placeHolderShimmer-ltr {
-  0% {
-    background-position: calc(var(--zd_size468) * -1) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 0;
-  }
-}
-@keyframes placeHolderShimmer-rtl {
-  0% {
-    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 100%;
-  }
-}
-
-.rectangular {
-  composes: stencil;
-  --stencil_height: var(--zd_size9);
-  --stencil_border_radius: 5px;
-}
-.primary {
-  background-color: var(--zdt_stencil_primary_bg);
-  background-image: var(--zdt_stencil_primary_gradient_bg);
-}
-.secondary {
-  background-color: var(--zdt_stencil_secondary_bg);
-  background-image: var(--zdt_stencil_secondary_gradient_bg);
-}
-.dark {
-  background-color: var(--zdt_stencil_dark_bg);
-  background-image: var(--zdt_stencil_dark_gradient_bg);
-}
-
-.small {
-  --stencil_width: var(--zd_size110);
-}
-.default {
-  --stencil_width: 100%;
-}
-.medium {
-  --stencil_width: var(--zd_size170);
-}
-.large {
-  --stencil_width: var(--zd_size220);
-}
-
-.circle {
-  composes: stencil;
-  --stencil_border_radius: 50%;
-}
-.clarge {
-  --stencil_width: var(--zd_size42);
-  --stencil_height: var(--zd_size42);
-}
-.cmedium,
-.cdefault {
-  --stencil_width: var(--zd_size30);
-  --stencil_height: var(--zd_size30);
-}
-.csmall {
-  --stencil_width: var(--zd_size20);
-  --stencil_height: var(--zd_size20);
-}
+.varClass {
+  /* stencils default variables */
+  --stencil_height: var(--zd_size9);
+  --stencil_width: 100%;
+  --stencil_border_radius: 5px;
+}
+.container {
+  composes: varClass;
+  height: var(--stencil_height);
+  width: var(--stencil_width);
+  border-radius: var(--stencil_border_radius);
+}
+.stencil {
+  background-size: 800px 1px;
+}
+[dir=ltr] .stencil {
+  animation-name:  placeHolderShimmer-ltr ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+[dir=rtl] .stencil {
+  animation-name:  placeHolderShimmer-rtl ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+@keyframes placeHolderShimmer-ltr {
+  0% {
+    background-position: calc(var(--zd_size468) * -1) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 0;
+  }
+}
+@keyframes placeHolderShimmer-rtl {
+  0% {
+    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 100%;
+  }
+}
+
+.rectangular {
+  composes: stencil;
+  --stencil_height: var(--zd_size9);
+  --stencil_border_radius: 5px;
+}
+.primary {
+  background-color: var(--zdt_stencil_primary_bg);
+  background-image: var(--zdt_stencil_primary_gradient_bg);
+}
+.secondary {
+  background-color: var(--zdt_stencil_secondary_bg);
+  background-image: var(--zdt_stencil_secondary_gradient_bg);
+}
+.dark {
+  background-color: var(--zdt_stencil_dark_bg);
+  background-image: var(--zdt_stencil_dark_gradient_bg);
+}
+
+.small {
+  --stencil_width: var(--zd_size110);
+}
+.default {
+  --stencil_width: 100%;
+}
+.medium {
+  --stencil_width: var(--zd_size170);
+}
+.large {
+  --stencil_width: var(--zd_size220);
+}
+
+.circle {
+  composes: stencil;
+  --stencil_border_radius: 50%;
+}
+.clarge {
+  --stencil_width: var(--zd_size42);
+  --stencil_height: var(--zd_size42);
+}
+.cmedium,
+.cdefault {
+  --stencil_width: var(--zd_size30);
+  --stencil_height: var(--zd_size30);
+}
+.csmall {
+  --stencil_width: var(--zd_size20);
+  --stencil_height: var(--zd_size20);
+}

package/lib/Switch/Switch.module.css

@@ -6,7 +6,7 @@
   /* switch circle default variables */
   --switch_circle_bg_color: var(--zdt_switch_circle_bg);
   --switch_circle_border_radius: 50px;
-  --switch_cricle_box_shadow: var(--zd_bs_contrast_outline, 0 1px 4px 0 var(--zdt_switch_circle_shadow));
+  --switch_cricle_box_shadow: var(--zd_bs_switch_default);
 }
 
 .container {
@@ -49,7 +49,6 @@
 }
 
 .checked+.label {
-  /* css:validation:ignore */
   box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
 }
 

package/lib/Tab/TabContent.module.css

@@ -1,4 +1,4 @@
-/* $Id$ */
-.container {
-  position: relative;
-}
+/* $Id$ */
+.container {
+  position: relative;
+}

package/lib/Tab/Tabs.js

@@ -195,9 +195,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           tabKeys = _this$state.tabKeys;
 
       if (prevProps.children && children) {
-        /**
-         * To recalculate the dimensions of tabs we are checking the children length.
-         * and also checking the tab id and their order.
+        /**
+         * To recalculate the dimensions of tabs we are checking the children length.
+         * and also checking the tab id and their order.
          */
         var newTabKeys = [];
 
@@ -382,14 +382,14 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         });
 
         if (selectedTabDimension > totalDimension) {
-          /* let { align } = this.props;
-          let newDim = `${remConvert(totalDimension)}rem`;
-          let newTabs;
-          if (align === 'vertical') {
-            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
-          } else {
-            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
-          }
+          /* let { align } = this.props;
+          let newDim = `${remConvert(totalDimension)}rem`;
+          let newTabs;
+          if (align === 'vertical') {
+            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxWidth: newDim } }));
+          } else {
+            newTabs = mainTabs.map(tab => React.cloneElement(tab, { style: { maxHeight: newDim } }));
+          }
           mainTabs = newTabs; */
           this.setMaxDim(totalDimension);
         }