@elliemae/ds-tabs 2.0.3 → 2.0.7

package/cjs/config/useTabs.js

@@ -11,12 +11,9 @@ var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var defaultProps = require('../defaultProps.js');
 
 const useTabs = props => {
-  var _children$, _children$$props;
-
   const propsWithDefaults = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.tabsDefaultProps);
   const {
-    activeTab,
-    children
+    activeTab
   } = propsWithDefaults;
   const tabsRef = React.useRef({});
   const tabsRefAsArray = React.useRef([]);
@@ -24,7 +21,7 @@ const useTabs = props => {
   const carouselOnlyListRef = React.useRef(null);
   const tabsListRef = React.useRef(null);
   const actualActiveTabRef = React.useRef(null);
-  const [internalActiveTab, setInternalActiveTab] = React.useState(children === null || children === void 0 ? void 0 : (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : (_children$$props = _children$.props) === null || _children$$props === void 0 ? void 0 : _children$$props.tabId);
+  const [internalActiveTab, setInternalActiveTab] = React.useState('');
   const actualActiveTab = React.useMemo(() => {
     if (activeTab !== undefined) return activeTab;
     return internalActiveTab;
@@ -32,8 +29,14 @@ const useTabs = props => {
   React.useEffect(() => {
     var _focusableTabsRef$cur;
 
-    actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === internalActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
-  }, [internalActiveTab]);
+    actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === actualActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
+  }, [actualActiveTab]);
+  React.useEffect(() => {
+    if (activeTab === undefined) {
+      const firstAvailableTab = focusableTabsRef.current.find(el => el.ariaDisabled !== 'true');
+      setInternalActiveTab((firstAvailableTab === null || firstAvailableTab === void 0 ? void 0 : firstAvailableTab.dataset.tabId) || '');
+    }
+  }, [activeTab]);
   const ctx = React.useMemo(() => ({
     props: propsWithDefaults,
     tabsRef,

package/cjs/parts/carousel/Carousel.js

@@ -46,8 +46,7 @@ const Carousel = _ref => {
     "data-testid": DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
     buttonType: dsButton.BUTTON_TYPES.ICON
   }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {
-    size: dsIcon.DSIconSizes.S,
-    color: dsIcon.DSIconColors.PRIMARY
+    size: dsIcon.DSIconSizes.S
   }))), showChevrons.right && /*#__PURE__*/_jsx__default["default"](styles.StyledCarouselButtonWrapper, {
     tabType: type,
     right: showChevrons.right
@@ -58,8 +57,7 @@ const Carousel = _ref => {
     "data-testid": DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
     buttonType: dsButton.BUTTON_TYPES.ICON
   }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {
-    size: dsIcon.DSIconSizes.S,
-    color: dsIcon.DSIconColors.PRIMARY
+    size: dsIcon.DSIconSizes.S
   }))), /*#__PURE__*/jsxRuntime.jsx(styles.StyledChildrenWrap, {
     ref: carouselOnlyListRef,
     onClick: handleOnClick,

package/cjs/parts/carousel/styles.js

@@ -12,7 +12,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledCarouselBtn = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
   componentId: "sc-prv5a7-0"
-})(["margin:0;min-width:", ";width:", ";&:hover:not(:disabled){background-color:transparent;}background-color:transparent;border-radius:0px;"], _ref => {
+})(["margin:0;min-width:", ";width:", ";&:hover:not(:disabled){background-color:transparent;}background-color:transparent;border-radius:0px;& .em-ds-icon svg{fill:", ";}"], _ref => {
   let {
     theme
   } = _ref;
@@ -22,6 +22,11 @@ const StyledCarouselBtn = /*#__PURE__*/styled__default["default"](dsButton.DSBut
     theme
   } = _ref2;
   return theme.space.xs;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.brand[600];
 });
 const StyledCarouselWrapper = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-prv5a7-1"
@@ -31,27 +36,27 @@ const StyledChildrenWrap = /*#__PURE__*/styled__default["default"].div.withConfi
 })(["display:flex;flex-wrap:nowrap;flex:1;overflow-x:hidden;"]);
 const StyledCarouselButtonWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-prv5a7-3"
-})(["max-width:16px;position:absolute;z-index:200;", " width:16px;height:", ";padding-top:", ";background-color:white;", ";"], _ref3 => {
+})(["max-width:16px;position:absolute;z-index:200;", " width:16px;height:", ";padding-top:", ";background:white;", ";"], _ref4 => {
   let {
     right
-  } = _ref3;
+  } = _ref4;
   return right ? 'right: 0;' : "left: 0;";
-}, _ref4 => {
+}, _ref5 => {
   let {
     tabType
-  } = _ref4;
+  } = _ref5;
   return tabType === constants.TabTypes.NORMAL ? '32px' : '22px';
-}, _ref5 => {
+}, _ref6 => {
   let {
     tabType
-  } = _ref5;
+  } = _ref6;
   return tabType === constants.TabTypes.NORMAL ? '5px' : '0px';
-}, _ref6 => {
+}, _ref7 => {
   let {
     theme,
     tabType
-  } = _ref6;
-  return tabType === constants.TabTypes.NORMAL ? "\n border-bottom: 1px solid ".concat(theme.colors.neutral[200], ";") : "";
+  } = _ref7;
+  return tabType === constants.TabTypes.NORMAL ? "\n      background: linear-gradient(to bottom, white 0px, white 30px, ".concat(theme.colors.neutral[400], " 30px, ").concat(theme.colors.neutral[400], " 31px, white 31px , white 32px );\n ") : "";
 });
 
 exports.StyledCarouselBtn = StyledCarouselBtn;

package/cjs/parts/tabBar/TabBar.js

@@ -11,6 +11,7 @@ var useTabBar = require('./useTabBar.js');
 var styles = require('./styles.js');
 var DSTabsCTX = require('../../DSTabsCTX.js');
 var useKeyboardNavigation = require('../../utils/hooks/useKeyboardNavigation.js');
+var helpers = require('../../utils/helpers.js');
 var constants = require('../../utils/constants.js');
 var useTabsCallbacks = require('../../utils/hooks/useTabsCallbacks.js');
 var DSTabsDatatestid = require('../../DSTabsDatatestid.js');
@@ -28,6 +29,7 @@ const TabBar = () => {
     focusableTabsRef,
     tabsListRef,
     tabsRefAsArray,
+    carouselOnlyListRef,
     actualActiveTab,
     props: {
       type,
@@ -70,21 +72,21 @@ const TabBar = () => {
       if (!disabled) availableTabIndexes.push(index);
       return /*#__PURE__*/jsxRuntime.jsxs(styles.StyledTabButton, {
         role: "tab",
-        ref: t => {
-          if (tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
-            tabsRefAsArray.current[index] = t;
-            if (!disabled && !focusableTabsRef.current.includes(t)) focusableTabsRef.current.push(t);
-            tabsRef.current[index] = t;
+        ref: tabButtonRef => {
+          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
+            tabsRefAsArray.current[index] = tabButtonRef;
+            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef)) focusableTabsRef.current.push(tabButtonRef);
+            tabsRef.current[index] = tabButtonRef;
 
             if (type === constants.TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
-              firstSubtabInternalRef.current = t;
+              firstSubtabInternalRef.current = tabButtonRef;
             }
 
             if (type !== constants.TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
-              lastTabInternalRef.current = t;
+              lastTabInternalRef.current = tabButtonRef;
             }
 
-            if (ref) ref.current = t;
+            if (ref) ref.current = tabButtonRef;
           }
         },
         type: "button",
@@ -113,6 +115,12 @@ const TabBar = () => {
 
           if (onClick && !disabled) onClick(tabId, e);
         },
+        onFocus: e => {
+          if (withCarousel) helpers.centerTab({
+            e,
+            listRef: carouselOnlyListRef
+          });
+        },
         onKeyDown: e => {
           if (e.key === 'Enter') e.stopPropagation();
           if (!disabled) handleOnKeyDown(e);
@@ -122,7 +130,7 @@ const TabBar = () => {
         children: [title, required && (_StyledRequiredMark || (_StyledRequiredMark = /*#__PURE__*/_jsx__default["default"](styles.StyledRequiredMark, {}, void 0, "\u25CF")))]
       }, tabId);
     });
-  }, [tabs, actualActiveTab, isDSMobile, fixedTabsHeaders, type, withCarousel, showSeparator, tabsRefAsArray, focusableTabsRef, tabsRef, firstSubtabInternalRef, lastTabInternalRef, handleOnTabChange, updateIndicatorStyle, handleOnKeyDown]);
+  }, [tabs, actualActiveTab, isDSMobile, fixedTabsHeaders, type, withCarousel, showSeparator, tabsRefAsArray, focusableTabsRef, tabsRef, firstSubtabInternalRef, lastTabInternalRef, handleOnTabChange, updateIndicatorStyle, carouselOnlyListRef, handleOnKeyDown]);
 
   if (type === constants.TabTypes.SUBTABS && !isDSMobile) {
     return /*#__PURE__*/jsxRuntime.jsx(styles.StyledSubTabsList, {

package/cjs/parts/tabBar/styles.js

@@ -20,7 +20,7 @@ const StyledSelectionIndicator = /*#__PURE__*/styled__default["default"].div.wit
     tabType,
     isDSMobile
   } = _ref;
-  if (isDSMobile) return "34px";
+  if (isDSMobile) return "35px";
   if (tabType === constants.TabTypes.NORMAL_SMALL) return "15px";
   return "25px";
 }, _ref2 => {
@@ -52,135 +52,136 @@ const mobileGradientsSettings = dsSystem.css(_templateObject || (_templateObject
 });
 const StyledTabWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-3hla56-1"
-})(["display:flex;flex:1;flex-wrap:nowrap;", ""], _ref5 => {
+})(["display:flex;flex:1;flex-wrap:nowrap;", " ", ""], _ref5 => {
   let {
     fixedTabsHeaders,
     isDSMobile
   } = _ref5;
   return !fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;';
+}, _ref6 => {
+  let {
+    theme,
+    isDSMobile
+  } = _ref6;
+  return isDSMobile ? "border-bottom: 1px solid ".concat(theme.colors.brand[300], ";") : "";
 });
 const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfig({
   componentId: "sc-3hla56-2"
-})(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref6 => {
+})(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref7 => {
   let {
     tabType
-  } = _ref6;
+  } = _ref7;
   return tabType === constants.TabTypes.SUBTABS ? "capitalize" : "uppercase";
-}, _ref7 => {
+}, _ref8 => {
   let {
     fixedTabsHeaders,
     isDSMobile
-  } = _ref7;
+  } = _ref8;
   if (fixedTabsHeaders) return '0px';
   if (!fixedTabsHeaders && isDSMobile) return '14px';
   return '16px';
-}, _ref8 => {
+}, _ref9 => {
   let {
     fixedTabsHeaders,
     isDSMobile
-  } = _ref8;
+  } = _ref9;
   if (fixedTabsHeaders) return '0px';
   if (!fixedTabsHeaders && isDSMobile) return '14px';
   return '16px';
-}, _ref9 => {
+}, _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.colors.neutral[700];
-}, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref10 => {
+}, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref11 => {
   let {
     tabType
-  } = _ref10;
-  return tabType === constants.TabTypes.NORMAL ? "height: 32px;" : "height: 22px;";
-}, _ref11 => {
-  let {
-    theme,
-    isActive,
-    disabled
   } = _ref11;
-  return isActive && !disabled ? "\n          font-weight:  ".concat(theme.fontWeights.semibold, ";\n          ").concat(dsSystem.safariAndFirefoxBold("#353C46"), "\n\n          &:hover {\n            ").concat(dsSystem.safariAndFirefoxBold("#1E79C2"), "\n          }\n          \n        ") : "\n      \n      ";
+  return tabType === constants.TabTypes.NORMAL ? "height: 32px;" : "height: 22px;";
 }, _ref12 => {
   let {
     theme,
+    isActive,
     disabled
   } = _ref12;
-  return disabled ? "\n          color: ".concat(theme.colors.neutral[500], ";\n          cursor: not-allowed;\n        ") : "\n      &:hover {\n        color: ".concat(theme.colors.brand[600], ";\n      }\n          ");
+  return isActive && !disabled ? "\n          font-weight:  ".concat(theme.fontWeights.semibold, ";\n          ").concat(dsSystem.safariAndFirefoxBold("#353C46"), "\n\n          &:hover {\n            ").concat(dsSystem.safariAndFirefoxBold("#1E79C2"), "\n          }\n          \n        ") : "\n      \n      ";
 }, _ref13 => {
   let {
     theme,
-    isDSMobile
+    disabled
   } = _ref13;
-  return !isDSMobile ? "\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: 0;\n      left: -16px;\n      width: calc(100% + 32px);\n      height: 100%;\n      z-index: 5;\n      border-radius: 2px;\n      border: 2px solid ".concat(theme.colors.brand[600], ";\n    }\n  }\n  \n  ") : "";
+  return disabled ? "\n          color: ".concat(theme.colors.neutral[500], ";\n          cursor: not-allowed;\n        ") : "\n      &:hover {\n        color: ".concat(theme.colors.brand[600], ";\n      }\n          ");
 }, _ref14 => {
   let {
     theme,
     showSeparator,
     tabType
   } = _ref14;
-  return showSeparator ? "\n          &:not(:last-of-type):before\n            {\n              content: \"\";\n              position: absolute;\n              width: 1px;\n              right: -17px;\n              top: 50%;\n              transform: translateY(-50%);\n              height: ".concat(tabType === constants.TabTypes.NORMAL_SMALL ? "10px" : "16px", ";\n              background-color: ").concat(theme.colors.neutral[400], ";\n            }") : "";
+  return showSeparator ? "\n          &:not(:last-of-type):before\n            {\n              content: \"\";\n              position: absolute;\n              width: 1px;\n              right: -16px;\n              top: 50%;\n              transform: translateY(-50%);\n              height: ".concat(tabType === constants.TabTypes.SUBTABS ? "10px" : "16px", ";\n              background: ").concat(theme.colors.neutral[400], ";\n            }") : "";
 }, _ref15 => {
+  let {
+    theme,
+    isDSMobile,
+    tabType,
+    isActive
+  } = _ref15;
+  return !isDSMobile ? "\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: 0;\n      left: -16px;\n      width: calc(100% + 32px);\n      height: 100%;\n      z-index: 5;\n      border-radius: 2px;\n      border: 2px solid ".concat(theme.colors.brand[700], ";\n    }\n\n    ").concat(tabType !== constants.TabTypes.SUBTABS && isActive ? "\n      &:before {\n        position: absolute;\n        content: '';\n        left: -16px;\n        right: 0;\n        top: calc(100% - 2px);\n        transform: none;\n        width: calc(100% + 32px);\n        height: 2px;\n        z-index: 10;\n        background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px),  white calc(100% - 16px), white calc(100% - 12px),  transparent calc(100% - 12px), transparent 100%);\n      }\n    " : "", "\n  }\n  \n  ") : "";
+}, _ref16 => {
   let {
     theme,
     isActive,
     disabled,
     isDSMobile
-  } = _ref15;
+  } = _ref16;
   return isDSMobile ? "\n    height:  40px;\n    color: ".concat(theme.colors.brand[600], ";\n    font-weight: ").concat(theme.fontWeights.regular, ";\n    padding: 0;\n    font-size: 13px;\n    line-height: 1.3;\n    ").concat(dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), " \n\n    &:focus {\n      font-weight: ").concat(theme.fontWeights.regular, ";\n      font-size: 13px;\n      ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n    }\n\n    ").concat(isActive ? "\n        font-weight: ".concat(theme.fontWeights.regular, ";\n        font-size: 13px;\n        ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n        ") : "", "\n\n    ").concat(isActive && !disabled ? "\n        font-size: 13px;\n        color:  ".concat(theme.colors.brand[700], ";\n        line-height: 1.3;\n        font-weight: ").concat(theme.fontWeights.regular, ";\n        -webkit-font-smoothing: subpixel-antialiased; \n        -webkit-text-stroke: 0.4px ").concat(theme.colors.brand[700], ";") : "", "\n\n    ").concat(!disabled ? "\n        &:hover,\n        &:focus {\n          outline: none;\n          color: ".concat(theme.colors.brand[700], ";\n          ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n        }") : "", "\n\n    ") : "";
 });
 const StyledSubTabsList = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-3hla56-3"
-})(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref16 => {
+})(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref17 => {
   let {
     withCarousel
-  } = _ref16;
+  } = _ref17;
   return withCarousel ? 'max-width: 100%;' : '';
 });
 const StyledTabList = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-3hla56-4"
-})(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}&:not(:focus-within){", "{background:", ";}}&:focus-within{", "{background:", "}"], _ref17 => {
+})(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref18 => {
   let {
     withCarousel,
     isDSMobile
-  } = _ref17;
+  } = _ref18;
   return withCarousel && !isDSMobile ? "max-width: 100%;" : '';
-}, _ref18 => {
+}, _ref19 => {
   let {
     theme,
     isDSMobile,
     tabType
-  } = _ref18;
-  return tabType !== constants.TabTypes.NORMAL_SMALL ? "\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-bottom-width: 1px;\n    border-bottom-style: solid;\n    border-bottom-color: ".concat(isDSMobile ? theme.colors.brand[200] : theme.colors.neutral[200], ";\n    pointer-events: none;\n  }\n  ") : "";
-}, StyledTabButton, _ref19 => {
+  } = _ref19;
+  return tabType !== constants.TabTypes.NORMAL_SMALL && !isDSMobile ? "\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    box-shadow: 0px 0px 0px 1px ".concat(theme.colors.neutral[400], ";\n    pointer-events: none;\n    bottom: 0px;\n  }\n  ") : "";
+}, StyledTabButton, _ref20 => {
   let {
     theme,
     isDSMobile
-  } = _ref19;
-  return isDSMobile ? "border-bottom: 1px solid ".concat(theme.colors.brand[300], ";\n         background: ").concat(theme.colors.brand[200], ";") : "";
-}, mobileGradientsSettings, _ref20 => {
+  } = _ref20;
+  return isDSMobile ? "\n        \n         background: ".concat(theme.colors.brand[200], ";") : "";
+}, mobileGradientsSettings, _ref21 => {
   let {
     isDSMobile,
     fixedTabsHeaders
-  } = _ref20;
-  return isDSMobile ? "\n      ".concat(!fixedTabsHeaders ? "\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          scrollbar-width: thin;\n          &::-webkit-scrollbar {\n            display: none;\n          }" : "\n         display: flex;\n        ".concat(StyledTabButton, " {\n          flex: 1;\n          overflow-x: hidden;\n        }")) : "";
-}, StyledSelectionIndicator, _ref21 => {
-  let {
-    indicatorStyle
   } = _ref21;
-  return "\n        width: ".concat(indicatorStyle.width, ";\n        left: ").concat(indicatorStyle.left, ";\n        ");
+  return isDSMobile ? "\n      ".concat(!fixedTabsHeaders ? "\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          scrollbar-width: thin;\n          &::-webkit-scrollbar {\n            display: none;\n          }" : "\n         display: flex;\n        ".concat(StyledTabButton, " {\n          flex: 1;\n          overflow-x: hidden;\n        }")) : "";
 }, StyledSelectionIndicator, _ref22 => {
   let {
-    theme,
-    indicatorStyle,
-    isDSMobile
+    indicatorStyle
   } = _ref22;
-  return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
+  return "\n        width: ".concat(indicatorStyle.width, ";\n        left: ").concat(indicatorStyle.left, ";\n        ");
 }, StyledSelectionIndicator, _ref23 => {
   let {
     theme,
     indicatorStyle,
     isDSMobile
   } = _ref23;
-  return !isDSMobile ? indicatorStyle.backgroundWithTransparentAndWhite : theme.colors.brand[600];
+  return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
 });
 const StyledRequiredMark = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-3hla56-5"

package/cjs/parts/tabBar/useTabBar.js

@@ -41,12 +41,10 @@ const useTabBar = () => {
       // behavior that adds scroll to the tabList
 
       const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
-      const backgroundWithTransparentAndWhite = "linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, #1E79C2 16px, #1E79C2 ".concat(tabClientWidth - 16, "px,white ").concat(tabClientWidth - 16, "px,white ").concat(tabClientWidth - 12, "px,transparent ").concat(tabClientWidth - 12, "px,transparent ").concat(tabClientWidth, "px )");
       const backgroundWithTransparent = "linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2  ".concat(tabClientWidth - 16, "px,transparent ").concat(tabClientWidth - 16, "px,transparent ").concat(tabClientWidth, "px )");
       return {
         left: "".concat(position, "px"),
         width: "".concat(tabClientWidth, "px"),
-        backgroundWithTransparentAndWhite,
         backgroundWithTransparent
       };
     }
@@ -68,15 +66,6 @@ const useTabBar = () => {
       });
     }
   }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
-  React.useEffect(() => {
-    if (showSelectionIndicator) {
-      updateIndicatorStyle();
-    }
-
-    if (isDSMobile && !fixedTabsHeaders) {
-      updateMobileGradients();
-    }
-  }, [updateIndicatorStyle, showSelectionIndicator, actualActiveTab, updateMobileGradients, isDSMobile, fixedTabsHeaders]);
   React.useLayoutEffect(() => {
     if (showSelectionIndicator) {
       updateIndicatorStyle();
@@ -85,7 +74,7 @@ const useTabBar = () => {
     if (isDSMobile && !fixedTabsHeaders) {
       updateMobileGradients();
     }
-  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders]);
+  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders, actualActiveTab]);
   return {
     updateIndicatorStyle,
     setIndicatorStyle,

package/cjs/parts/tabsPanel/TabsPanels.js

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.constructor.js');
+require('core-js/modules/esnext.async-iterator.to-array.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.to-array.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var SwipeableViews = require('react-swipeable-views');
-var helpers = require('../../utils/helpers.js');
 var styles = require('./styles.js');
 var DSTabsCTX = require('../../DSTabsCTX.js');
 var useTabsCallbacks = require('../../utils/hooks/useTabsCallbacks.js');
@@ -35,18 +40,38 @@ const TabsPanels = () => {
     handleOnTabChange,
     handleOnMouseDown
   } = useTabsCallbacks.useTabsCallbacks();
-  const handleOnChangeIndex = React.useCallback(index => {
-    handleOnTabChange(helpers.getIdByIndex(tabs, index));
-    if (focusableTabsRef.current) focusableTabsRef.current[index].click();
-  }, [focusableTabsRef, handleOnTabChange, tabs]);
+  const handleOnChangeIndex = React.useCallback((index, indexLatest) => {
+    if (!focusableTabsRef.current) return;
+    const offset = index - indexLatest;
+
+    if (focusableTabsRef.current) {
+      var _focusableTabsRef$cur, _focusableTabsRef$cur2, _focusableTabsRef$cur3, _focusableTabsRef$cur4;
+
+      const currentIndexFocusable = (_focusableTabsRef$cur = focusableTabsRef.current) === null || _focusableTabsRef$cur === void 0 ? void 0 : _focusableTabsRef$cur.findIndex(el => el.dataset.tabId === actualActiveTab);
+      const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;
+      if (newFocusableIndex < 0 || newFocusableIndex > ((_focusableTabsRef$cur2 = focusableTabsRef.current) === null || _focusableTabsRef$cur2 === void 0 ? void 0 : _focusableTabsRef$cur2.length) || !((_focusableTabsRef$cur3 = focusableTabsRef.current) !== null && _focusableTabsRef$cur3 !== void 0 && _focusableTabsRef$cur3[newFocusableIndex])) return;
+      handleOnTabChange((_focusableTabsRef$cur4 = focusableTabsRef.current[newFocusableIndex].dataset) === null || _focusableTabsRef$cur4 === void 0 ? void 0 : _focusableTabsRef$cur4.tabId); // swiping does not trigger centerTab function inside handleOnTabChange because there is no event
+      // by clicking we are manually forcing to center the tab
+
+      focusableTabsRef.current[newFocusableIndex].click();
+    }
+  }, [actualActiveTab, focusableTabsRef, handleOnTabChange]);
+  const firstSlideToShow = React.useMemo(() => {
+    const childrenArray = React__default["default"].Children.toArray(tabs);
+    const index = childrenArray.filter(tab => tab.props.disabled !== true).findIndex(tab => tab.props.tabId === actualActiveTab);
+    if (index === -1) return 0;
+    return index;
+  }, [actualActiveTab, tabs]);
   const panels = React.useMemo(() => React__default["default"].Children.map(tabs, tab => {
     const {
       tabId: panelId = '',
       style,
-      children: content
+      children: content,
+      disabled
     } = tab.props;
     const isActive = actualActiveTab === panelId;
     const shouldRender = !onlyRenderActiveTab || isActive;
+    if (disabled) return null;
     return shouldRender && /*#__PURE__*/_jsx__default["default"](styles.StyledPanelContainer, {
       id: panelId,
       "aria-labelledby": "".concat(panelId, "-label"),
@@ -64,7 +89,7 @@ const TabsPanels = () => {
   if (animated) {
     return /*#__PURE__*/_jsx__default["default"](SwipeableViews__default["default"], {
       enableMouseEvents: enableMouseEvents,
-      index: helpers.getIndexById(tabs, actualActiveTab),
+      index: firstSlideToShow,
       onChangeIndex: handleOnChangeIndex
     }, void 0, panels);
   }

package/cjs/utils/constants.js

@@ -12,7 +12,6 @@ const MOBILE_GRADIENT_WIDTH = 24;
 const defaultIndicatorStyles = {
   left: '0px',
   width: '0px',
-  backgroundWithTransparentAndWhite: '',
   backgroundWithTransparent: ''
 };
 const gradientOffsetsAccordingType = {

package/cjs/utils/helpers.js

@@ -25,6 +25,33 @@ const isElementVisibleCarousel = function (tab, tabContainer) {
 
   return false;
 };
+const centerTab = _ref => {
+  let {
+    e,
+    listRef
+  } = _ref;
+
+  if (listRef.current) {
+    const {
+      offsetLeft
+    } = e === null || e === void 0 ? void 0 : e.target;
+    const {
+      width: tabWidth
+    } = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
+    const {
+      width: listWidth
+    } = listRef.current.getBoundingClientRect();
+    const extraSideSpace = listWidth - tabWidth;
+    const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
+    const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
+    listRef.current.scrollTo({
+      top: 0,
+      left: centeredLeftOffset,
+      behavior: 'smooth'
+    });
+    e === null || e === void 0 ? void 0 : e.preventDefault();
+  }
+};
 const getVisibleDimensions = (node, referenceNode) => {
   const nodeDimensions = node.getBoundingClientRect();
   const referenceNodeDimensions = referenceNode.getBoundingClientRect();
@@ -33,13 +60,10 @@ const getVisibleDimensions = (node, referenceNode) => {
     height: Math.min(node.clientHeight, referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top, node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top))
   };
 };
-const getIndexById = (children, activeId) => children && children.findIndex(item => item.props.tabId === activeId);
-const getIdByIndex = (children, index) => children && children[index].props.tabId || '';
 const shouldHaveLeftGradient = scrollLeft => Math.abs(scrollLeft) > constants.MOBILE_GRADIENT_WIDTH;
 const shouldHaveRightGradient = (scrollLeft, clientWidth, scrollWidth) => Math.abs(scrollLeft) <= scrollWidth - (clientWidth + constants.MOBILE_GRADIENT_WIDTH);
 
-exports.getIdByIndex = getIdByIndex;
-exports.getIndexById = getIndexById;
+exports.centerTab = centerTab;
 exports.getVisibleDimensions = getVisibleDimensions;
 exports.isElementVisible = isElementVisible;
 exports.isElementVisibleCarousel = isElementVisibleCarousel;

package/cjs/utils/hooks/useTabsCallbacks.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var helpers = require('../helpers.js');
 var DSTabsCTX = require('../../DSTabsCTX.js');
 
 const useTabsCallbacks = () => {
@@ -16,36 +17,17 @@ const useTabsCallbacks = () => {
       fixedTabsHeaders
     }
   } = React.useContext(DSTabsCTX.DSTabsContext);
-  const centerTabWhenTabChangeMobile = React.useCallback(e => {
-    if (tabsListRef.current) {
-      const {
-        offsetLeft
-      } = e === null || e === void 0 ? void 0 : e.target;
-      const {
-        width: tabWidth
-      } = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
-      const {
-        width: listWidth
-      } = tabsListRef.current.getBoundingClientRect();
-      const extraSideSpace = listWidth - tabWidth;
-      const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
-      const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
-      tabsListRef.current.scrollTo({
-        top: 0,
-        left: centeredLeftOffset,
-        behavior: 'smooth'
-      });
-      e === null || e === void 0 ? void 0 : e.preventDefault();
-    }
-  }, [tabsListRef]);
   const handleOnTabChange = React.useCallback((tabId, e) => {
     setInternalActiveTab(tabId);
     onTabChange(tabId, e);
 
     if (isDSMobile && !fixedTabsHeaders && e) {
-      centerTabWhenTabChangeMobile(e);
+      helpers.centerTab({
+        e,
+        listRef: tabsListRef
+      });
     }
-  }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
+  }, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
   const handleOnMouseDown = React.useCallback(e => {
     const role = e.target.getAttribute('role');
     if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();

package/esm/config/useTabs.js

@@ -7,12 +7,9 @@ import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
 import { tabsDefaultProps } from '../defaultProps.js';
 
 const useTabs = props => {
-  var _children$, _children$$props;
-
   const propsWithDefaults = useMemoMergePropsWithDefault(props, tabsDefaultProps);
   const {
-    activeTab,
-    children
+    activeTab
   } = propsWithDefaults;
   const tabsRef = useRef({});
   const tabsRefAsArray = useRef([]);
@@ -20,7 +17,7 @@ const useTabs = props => {
   const carouselOnlyListRef = useRef(null);
   const tabsListRef = useRef(null);
   const actualActiveTabRef = useRef(null);
-  const [internalActiveTab, setInternalActiveTab] = useState(children === null || children === void 0 ? void 0 : (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : (_children$$props = _children$.props) === null || _children$$props === void 0 ? void 0 : _children$$props.tabId);
+  const [internalActiveTab, setInternalActiveTab] = useState('');
   const actualActiveTab = useMemo(() => {
     if (activeTab !== undefined) return activeTab;
     return internalActiveTab;
@@ -28,8 +25,14 @@ const useTabs = props => {
   useEffect(() => {
     var _focusableTabsRef$cur;
 
-    actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === internalActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
-  }, [internalActiveTab]);
+    actualActiveTabRef.current = (_focusableTabsRef$cur = focusableTabsRef.current.find(el => el.dataset.tabId === actualActiveTab)) !== null && _focusableTabsRef$cur !== void 0 ? _focusableTabsRef$cur : null;
+  }, [actualActiveTab]);
+  useEffect(() => {
+    if (activeTab === undefined) {
+      const firstAvailableTab = focusableTabsRef.current.find(el => el.ariaDisabled !== 'true');
+      setInternalActiveTab((firstAvailableTab === null || firstAvailableTab === void 0 ? void 0 : firstAvailableTab.dataset.tabId) || '');
+    }
+  }, [activeTab]);
   const ctx = useMemo(() => ({
     props: propsWithDefaults,
     tabsRef,