@epignosis_llc/gnosis 6.8.0 → 6.8.1

package/dist/cjs/index.cjs

@@ -22617,7 +22617,7 @@ var TabsContent = function TabsContent(_ref) {
   }, content) : null;
 };
 
-var _excluded$w = ["tabs", "stickyHeader", "selectedTab", "onChangeTab", "inlineEndComponent", "testIds"];
+var _excluded$w = ["tabs", "stickyHeader", "selectedTab", "controlled", "onChangeTab", "inlineEndComponent", "testIds"];
 var Tabs = function Tabs(_ref) {
   var _ref$tabs = _ref.tabs,
     tabs = _ref$tabs === void 0 ? [] : _ref$tabs,
@@ -22625,24 +22625,39 @@ var Tabs = function Tabs(_ref) {
     stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
     _ref$selectedTab = _ref.selectedTab,
     selectedTab = _ref$selectedTab === void 0 ? 0 : _ref$selectedTab,
+    _ref$controlled = _ref.controlled,
+    controlled = _ref$controlled === void 0 ? false : _ref$controlled,
     onChangeTab = _ref.onChangeTab,
     inlineEndComponent = _ref.inlineEndComponent,
     testIds = _ref.testIds,
     rest = _objectWithoutProperties$1(_ref, _excluded$w);
   var _useState = React.useState(selectedTab),
     _useState2 = _slicedToArray$1(_useState, 2),
-    activeTab = _useState2[0],
-    setActiveTab = _useState2[1];
-  var tabsLength = tabs.length - 1;
+    internalActiveTab = _useState2[0],
+    setInternalActiveTab = _useState2[1];
+  // Tabs without content are not rendered, so every index (selection, bounds, keyboard,
+  // arrows) refers to this filtered collection — matching what onChangeTab emits.
+  var tabsWithContent = tabs.filter(function (tab) {
+    return tab.content;
+  });
+  var tabsLength = tabsWithContent.length - 1;
   var tabsNavEl = React.useRef(null);
   var _useState3 = React.useState(false),
     _useState4 = _slicedToArray$1(_useState3, 2),
     isOverflowActive = _useState4[0],
     setIsOverflowActive = _useState4[1];
   var dir = document.dir;
+  var clampTabIndex = function clampTabIndex(index) {
+    if (index < 0) return 0;
+    if (index > tabsLength) return tabsLength;
+    return index;
+  };
+  var activeTab = controlled ? clampTabIndex(selectedTab) : internalActiveTab;
   var onSelectTab = function onSelectTab(index) {
     scrollToTab(index);
-    setActiveTab(index);
+    if (!controlled) {
+      setInternalActiveTab(index);
+    }
     onChangeTab && onChangeTab(index);
   };
   var showLeftArrow = function showLeftArrow() {
@@ -22651,33 +22666,21 @@ var Tabs = function Tabs(_ref) {
   };
   var handLeftArrowClick = function handLeftArrowClick() {
     if (activeTab > 0) {
-      scrollToTab(activeTab - 1);
-      setActiveTab(function (currentTab) {
-        return currentTab - 1;
-      });
+      // Route through onSelectTab so controlled parents are notified of the new selection.
+      onSelectTab(activeTab - 1);
     }
   };
   var showRightArrow = function showRightArrow() {
-    if (!isOverflowActive || !tabs.length) return false;
+    if (!isOverflowActive || !tabsWithContent.length) return false;
     return activeTab < tabsLength;
   };
   var handRightArrowClick = function handRightArrowClick() {
-    if (tabs.length && activeTab < tabsLength) {
-      scrollToTab(activeTab + 1);
-      setActiveTab(function (currentTab) {
-        return currentTab + 1;
-      });
+    if (tabsWithContent.length && activeTab < tabsLength) {
+      onSelectTab(activeTab + 1);
     }
   };
   React.useEffect(function () {
-    var newSelectedTab = selectedTab;
-    if (selectedTab < 0) {
-      newSelectedTab = 0;
-    }
-    if (selectedTab > tabsLength) {
-      newSelectedTab = tabsLength;
-    }
-    setActiveTab(newSelectedTab);
+    setInternalActiveTab(clampTabIndex(selectedTab));
   }, [selectedTab]);
   React.useEffect(function () {
     toggleTabsArrow();
@@ -22706,15 +22709,9 @@ var Tabs = function Tabs(_ref) {
   };
   var handleKeyDown = function handleKeyDown(e, index) {
     if (e.key === "ArrowRight" && index < tabsLength) {
-      // If next tab is undefined, do nothing
-      if (tabs[index + 1].content) {
-        onSelectTab(index + 1);
-      }
+      onSelectTab(index + 1);
     } else if (e.key === "ArrowLeft" && index > 0) {
-      // If prev tab is undefined, do nothing
-      if (tabs[index - 1].content) {
-        onSelectTab(index - 1);
-      }
+      onSelectTab(index - 1);
     }
   };
   return jsx("section", _extends$s({
@@ -22743,9 +22740,7 @@ var Tabs = function Tabs(_ref) {
     ref: tabsNavEl
   }, (testIds === null || testIds === void 0 ? void 0 : testIds.nav) && {
     "data-testid": testIds.nav
-  }), tabs.filter(function (tab) {
-    return tab.content;
-  }).map(function (_ref2, index) {
+  }), tabsWithContent.map(function (_ref2, index) {
     var title = _ref2.title,
       id = _ref2.id;
     return jsx(TabsNavItem, {
@@ -22777,9 +22772,7 @@ var Tabs = function Tabs(_ref) {
     role: "region"
   }, (testIds === null || testIds === void 0 ? void 0 : testIds.content) && {
     "data-testid": testIds.content
-  }), tabs.filter(function (tab) {
-    return tab.content;
-  }).map(function (_ref3, index) {
+  }), tabsWithContent.map(function (_ref3, index) {
     var content = _ref3.content;
     return jsx(TabsContent, {
       key: index,