@thecb/components 11.4.0-beta.0 → 11.4.1-beta.0

package/dist/index.esm.js

@@ -48414,14 +48414,27 @@ var Tab = function Tab(_ref) {
   }, /*#__PURE__*/React__default.createElement(Text$1, null, label));
 };
 
+var _excluded$N = ["tabsConfig", "tabsDisplayMode"];
 var HORIZONTAL = "horizontal";
 var Tabs = function Tabs(_ref) {
+  var _tabsConfig$tabs$;
   var tabsConfig = _ref.tabsConfig,
-    tabsDisplayMode = _ref.tabsDisplayMode;
-  var _useState = useState(tabsConfig.tabs[0].label),
+    _ref$tabsDisplayMode = _ref.tabsDisplayMode,
+    tabsDisplayMode = _ref$tabsDisplayMode === void 0 ? HORIZONTAL : _ref$tabsDisplayMode,
+    props = _objectWithoutProperties(_ref, _excluded$N);
+  var _useState = useState(((_tabsConfig$tabs$ = tabsConfig.tabs[0]) === null || _tabsConfig$tabs$ === void 0 ? void 0 : _tabsConfig$tabs$.label) || null),
     _useState2 = _slicedToArray(_useState, 2),
     activeTab = _useState2[0],
     toggleActiveTab = _useState2[1];
+  useEffect$1(function () {
+    var currentTabExists = tabsConfig.tabs.some(function (tab) {
+      return tab.label === activeTab;
+    });
+    if (!activeTab || !currentTabExists) {
+      var _tabsConfig$tabs$2;
+      toggleActiveTab(((_tabsConfig$tabs$2 = tabsConfig.tabs[0]) === null || _tabsConfig$tabs$2 === void 0 ? void 0 : _tabsConfig$tabs$2.label) || null);
+    }
+  }, [tabsConfig, activeTab]);
   var createTabs = function createTabs(tabConfig, activeTab) {
     return tabConfig.tabs.map(function (tab) {
       return /*#__PURE__*/React__default.createElement(Tab, {
@@ -48434,7 +48447,7 @@ var Tabs = function Tabs(_ref) {
       });
     });
   };
-  var showHorozontal = function showHorozontal(tabsConfig, activeTab) {
+  var showHorizontal = function showHorizontal(tabsConfig, activeTab) {
     return /*#__PURE__*/React__default.createElement(Cluster, {
       justify: "space-around"
     }, createTabs(tabsConfig, activeTab));
@@ -48442,11 +48455,11 @@ var Tabs = function Tabs(_ref) {
   var showVertical = function showVertical(tabsConfig, activeTab) {
     return /*#__PURE__*/React__default.createElement(Stack, null, createTabs(tabsConfig, activeTab));
   };
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Box, _extends({
     className: "tabs"
-  }, /*#__PURE__*/React__default.createElement(Box, {
+  }, props), /*#__PURE__*/React__default.createElement(Box, {
     className: "tab-list"
-  }, tabsDisplayMode == HORIZONTAL ? showHorozontal(tabsConfig, activeTab) : showVertical(tabsConfig, activeTab)), /*#__PURE__*/React__default.createElement(Box, {
+  }, tabsDisplayMode == HORIZONTAL ? showHorizontal(tabsConfig, activeTab) : showVertical(tabsConfig, activeTab)), /*#__PURE__*/React__default.createElement(Box, {
     className: "tab-content"
   }, /*#__PURE__*/React__default.createElement(Box, null, tabsConfig.tabs.map(function (tab, idx) {
     if (tab.label !== activeTab) return undefined;
@@ -48555,7 +48568,7 @@ var Timeout = function Timeout(_ref) {
 };
 var Timeout$1 = withWindowSize(Timeout);
 
-var _excluded$N = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
+var _excluded$O = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
 var VARIANTS = {
   SUCCESS: "success",
   ERROR: "error"
@@ -48584,7 +48597,7 @@ var ToastNotification = function ToastNotification(_ref) {
     screenReaderMessage = _ref.screenReaderMessage,
     _ref$showScreenReader = _ref.showScreenReaderMessage,
     showScreenReaderMessage = _ref$showScreenReader === void 0 ? true : _ref$showScreenReader,
-    rest = _objectWithoutProperties(_ref, _excluded$N);
+    rest = _objectWithoutProperties(_ref, _excluded$O);
   var screenReaderMessageRef = useRef();
   var LIVEREGION_TRANSITION_DELAY = 1000;
   useEffect$1(function () {
@@ -48767,7 +48780,7 @@ var PopupMenuItemContainer = styled(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$O = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$P = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -48783,7 +48796,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$O);
+    rest = _objectWithoutProperties(_ref, _excluded$P);
   return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -49022,7 +49035,7 @@ var ActionLinkButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$P = ["width", "height", "color"];
+var _excluded$Q = ["width", "height", "color"];
 var DropdownIconV2 = function DropdownIconV2(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "18" : _ref$width,
@@ -49030,7 +49043,7 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
     height = _ref$height === void 0 ? "19" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#292A33" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    props = _objectWithoutProperties(_ref, _excluded$Q);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
     width: width,
     height: height,
@@ -49177,7 +49190,7 @@ var SearchBox = function SearchBox(_ref) {
   }));
 };
 
-var _excluded$Q = ["width", "height", "color"];
+var _excluded$R = ["width", "height", "color"];
 var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "18" : _ref$width,
@@ -49185,7 +49198,7 @@ var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
     height = _ref$height === void 0 ? "18" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#FEFEFE" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
+    props = _objectWithoutProperties(_ref, _excluded$R);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -49881,7 +49894,7 @@ var fallbackValues$11 = {
   justifyContent: justifyContent
 };
 
-var _excluded$R = ["variant", "imageUrl", "isMobile", "theme", "extraStyles"],
+var _excluded$S = ["variant", "imageUrl", "isMobile", "theme", "extraStyles"],
   _excluded2$2 = ["theme", "isMobile"],
   _excluded3 = ["theme", "isMobile"],
   _excluded4 = ["theme", "isMobile"];
@@ -49904,7 +49917,7 @@ var HeroContainer = styled(function (_ref2) {
     isMobile = _ref2.isMobile,
     theme = _ref2.theme,
     extraStyles = _ref2.extraStyles,
-    props = _objectWithoutProperties(_ref2, _excluded$R);
+    props = _objectWithoutProperties(_ref2, _excluded$S);
   return /*#__PURE__*/React__default.createElement(Box, props);
 }).withConfig({
   displayName: "HeroImagestyled__HeroContainer",