@elliemae/ds-tabs 2.0.3 → 2.0.7

package/esm/parts/carousel/Carousel.js

@@ -1,6 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
-import { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';
+import { DSIconSizes } from '@elliemae/ds-icon';
 import { BUTTON_TYPES } from '@elliemae/ds-button';
 import { ChevronLeft, ChevronRight } from '@elliemae/ds-icons';
 import { StyledCarouselWrapper, StyledCarouselButtonWrapper, StyledCarouselBtn, StyledChildrenWrap } from './styles.js';
@@ -38,8 +38,7 @@ const Carousel = _ref => {
     "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
     buttonType: BUTTON_TYPES.ICON
   }, void 0, /*#__PURE__*/_jsx(ChevronLeft, {
-    size: DSIconSizes.S,
-    color: DSIconColors.PRIMARY
+    size: DSIconSizes.S
   }))), showChevrons.right && /*#__PURE__*/_jsx(StyledCarouselButtonWrapper, {
     tabType: type,
     right: showChevrons.right
@@ -50,8 +49,7 @@ const Carousel = _ref => {
     "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
     buttonType: BUTTON_TYPES.ICON
   }, void 0, /*#__PURE__*/_jsx(ChevronRight, {
-    size: DSIconSizes.S,
-    color: DSIconColors.PRIMARY
+    size: DSIconSizes.S
   }))), /*#__PURE__*/jsx(StyledChildrenWrap, {
     ref: carouselOnlyListRef,
     onClick: handleOnClick,

package/esm/parts/carousel/styles.js

@@ -4,7 +4,7 @@ import { TabTypes } from '../../utils/constants.js';
 
 const StyledCarouselBtn = /*#__PURE__*/styled(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;
@@ -14,6 +14,11 @@ const StyledCarouselBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
     theme
   } = _ref2;
   return theme.space.xs;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.brand[600];
 });
 const StyledCarouselWrapper = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-prv5a7-1"
@@ -23,27 +28,27 @@ const StyledChildrenWrap = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;flex-wrap:nowrap;flex:1;overflow-x:hidden;"]);
 const StyledCarouselButtonWrapper = /*#__PURE__*/styled.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 === TabTypes.NORMAL ? '32px' : '22px';
-}, _ref5 => {
+}, _ref6 => {
   let {
     tabType
-  } = _ref5;
+  } = _ref6;
   return tabType === TabTypes.NORMAL ? '5px' : '0px';
-}, _ref6 => {
+}, _ref7 => {
   let {
     theme,
     tabType
-  } = _ref6;
-  return tabType === TabTypes.NORMAL ? "\n border-bottom: 1px solid ".concat(theme.colors.neutral[200], ";") : "";
+  } = _ref7;
+  return tabType === 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 ") : "";
 });
 
 export { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap };

package/esm/parts/tabBar/TabBar.js

@@ -7,6 +7,7 @@ import { useTabBar } from './useTabBar.js';
 import { StyledTabButton, StyledRequiredMark, StyledSubTabsList, StyledTabList, StyledTabWrapper, StyledSelectionIndicator } from './styles.js';
 import { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';
 import { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';
+import { centerTab } from '../../utils/helpers.js';
 import { TabTypes } from '../../utils/constants.js';
 import { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';
 import { DSTabsDatatestid } from '../../DSTabsDatatestid.js';
@@ -19,6 +20,7 @@ const TabBar = () => {
     focusableTabsRef,
     tabsListRef,
     tabsRefAsArray,
+    carouselOnlyListRef,
     actualActiveTab,
     props: {
       type,
@@ -61,21 +63,21 @@ const TabBar = () => {
       if (!disabled) availableTabIndexes.push(index);
       return /*#__PURE__*/jsxs(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 === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
-              firstSubtabInternalRef.current = t;
+              firstSubtabInternalRef.current = tabButtonRef;
             }
 
             if (type !== 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",
@@ -104,6 +106,12 @@ const TabBar = () => {
 
           if (onClick && !disabled) onClick(tabId, e);
         },
+        onFocus: e => {
+          if (withCarousel) centerTab({
+            e,
+            listRef: carouselOnlyListRef
+          });
+        },
         onKeyDown: e => {
           if (e.key === 'Enter') e.stopPropagation();
           if (!disabled) handleOnKeyDown(e);
@@ -113,7 +121,7 @@ const TabBar = () => {
         children: [title, required && (_StyledRequiredMark || (_StyledRequiredMark = /*#__PURE__*/_jsx(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 === TabTypes.SUBTABS && !isDSMobile) {
     return /*#__PURE__*/jsx(StyledSubTabsList, {

package/esm/parts/tabBar/styles.js

@@ -11,7 +11,7 @@ const StyledSelectionIndicator = /*#__PURE__*/styled.div.withConfig({
     tabType,
     isDSMobile
   } = _ref;
-  if (isDSMobile) return "34px";
+  if (isDSMobile) return "35px";
   if (tabType === TabTypes.NORMAL_SMALL) return "15px";
   return "25px";
 }, _ref2 => {
@@ -43,135 +43,136 @@ const mobileGradientsSettings = css(_templateObject || (_templateObject = _tagge
 });
 const StyledTabWrapper = /*#__PURE__*/styled.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.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 === 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];
-}, onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref10 => {
+}, onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref11 => {
   let {
     tabType
-  } = _ref10;
-  return tabType === TabTypes.NORMAL ? "height: 32px;" : "height: 22px;";
-}, _ref11 => {
-  let {
-    theme,
-    isActive,
-    disabled
   } = _ref11;
-  return isActive && !disabled ? "\n          font-weight:  ".concat(theme.fontWeights.semibold, ";\n          ").concat(safariAndFirefoxBold("#353C46"), "\n\n          &:hover {\n            ").concat(safariAndFirefoxBold("#1E79C2"), "\n          }\n          \n        ") : "\n      \n      ";
+  return tabType === 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(safariAndFirefoxBold("#353C46"), "\n\n          &:hover {\n            ").concat(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 === 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 === 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 !== 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(onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), " \n\n    &:focus {\n      font-weight: ").concat(theme.fontWeights.regular, ";\n      font-size: 13px;\n      ").concat(safariAndFirefoxBold('#006AA9'), "\n    }\n\n    ").concat(isActive ? "\n        font-weight: ".concat(theme.fontWeights.regular, ";\n        font-size: 13px;\n        ").concat(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(safariAndFirefoxBold('#006AA9'), "\n        }") : "", "\n\n    ") : "";
 });
 const StyledSubTabsList = /*#__PURE__*/styled.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.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 !== 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 !== 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.span.withConfig({
   componentId: "sc-3hla56-5"

package/esm/parts/tabBar/useTabBar.js

@@ -1,5 +1,5 @@
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useContext, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { useContext, useState, useCallback, useLayoutEffect } from 'react';
 import useResizeObserver from '@react-hook/resize-observer';
 import { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';
 import { DSTabsContext } from '../../DSTabsCTX.js';
@@ -33,12 +33,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
       };
     }
@@ -60,15 +58,6 @@ const useTabBar = () => {
       });
     }
   }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
-  useEffect(() => {
-    if (showSelectionIndicator) {
-      updateIndicatorStyle();
-    }
-
-    if (isDSMobile && !fixedTabsHeaders) {
-      updateMobileGradients();
-    }
-  }, [updateIndicatorStyle, showSelectionIndicator, actualActiveTab, updateMobileGradients, isDSMobile, fixedTabsHeaders]);
   useLayoutEffect(() => {
     if (showSelectionIndicator) {
       updateIndicatorStyle();
@@ -77,7 +66,7 @@ const useTabBar = () => {
     if (isDSMobile && !fixedTabsHeaders) {
       updateMobileGradients();
     }
-  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders]);
+  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders, actualActiveTab]);
   return {
     updateIndicatorStyle,
     setIndicatorStyle,

package/esm/parts/tabsPanel/TabsPanels.js

@@ -1,9 +1,14 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.constructor.js';
+import 'core-js/modules/esnext.async-iterator.to-array.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.to-array.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import React, { useContext, useCallback, useMemo } from 'react';
 import SwipeableViews from 'react-swipeable-views';
-import { getIdByIndex, getIndexById } from '../../utils/helpers.js';
 import { StyledPanelContainer } from './styles.js';
 import { DSTabsContext } from '../../DSTabsCTX.js';
 import { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';
@@ -25,18 +30,38 @@ const TabsPanels = () => {
     handleOnTabChange,
     handleOnMouseDown
   } = useTabsCallbacks();
-  const handleOnChangeIndex = useCallback(index => {
-    handleOnTabChange(getIdByIndex(tabs, index));
-    if (focusableTabsRef.current) focusableTabsRef.current[index].click();
-  }, [focusableTabsRef, handleOnTabChange, tabs]);
+  const handleOnChangeIndex = 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 = useMemo(() => {
+    const childrenArray = React.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 = useMemo(() => React.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(StyledPanelContainer, {
       id: panelId,
       "aria-labelledby": "".concat(panelId, "-label"),
@@ -54,7 +79,7 @@ const TabsPanels = () => {
   if (animated) {
     return /*#__PURE__*/_jsx(SwipeableViews, {
       enableMouseEvents: enableMouseEvents,
-      index: getIndexById(tabs, actualActiveTab),
+      index: firstSlideToShow,
       onChangeIndex: handleOnChangeIndex
     }, void 0, panels);
   }

package/esm/utils/constants.js

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

package/esm/utils/helpers.js

@@ -21,6 +21,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();
@@ -29,9 +56,7 @@ 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) > MOBILE_GRADIENT_WIDTH;
 const shouldHaveRightGradient = (scrollLeft, clientWidth, scrollWidth) => Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);
 
-export { getIdByIndex, getIndexById, getVisibleDimensions, isElementVisible, isElementVisibleCarousel, shouldHaveLeftGradient, shouldHaveRightGradient };
+export { centerTab, getVisibleDimensions, isElementVisible, isElementVisibleCarousel, shouldHaveLeftGradient, shouldHaveRightGradient };

package/esm/utils/hooks/useTabsCallbacks.js

@@ -1,4 +1,5 @@
 import { useContext, useCallback } from 'react';
+import { centerTab } from '../helpers.js';
 import { DSTabsContext } from '../../DSTabsCTX.js';
 
 const useTabsCallbacks = () => {
@@ -12,36 +13,17 @@ const useTabsCallbacks = () => {
       fixedTabsHeaders
     }
   } = useContext(DSTabsContext);
-  const centerTabWhenTabChangeMobile = 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 = useCallback((tabId, e) => {
     setInternalActiveTab(tabId);
     onTabChange(tabId, e);
 
     if (isDSMobile && !fixedTabsHeaders && e) {
-      centerTabWhenTabChangeMobile(e);
+      centerTab({
+        e,
+        listRef: tabsListRef
+      });
     }
-  }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
+  }, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
   const handleOnMouseDown = useCallback(e => {
     const role = e.target.getAttribute('role');
     if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "2.0.3",
+  "version": "2.0.7",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "module": "./esm/index.js",
@@ -128,11 +128,11 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.0.3",
-    "@elliemae/ds-icon": "2.0.3",
-    "@elliemae/ds-icons": "2.0.3",
-    "@elliemae/ds-props-helpers": "2.0.3",
-    "@elliemae/ds-system": "2.0.3",
+    "@elliemae/ds-button": "2.0.7",
+    "@elliemae/ds-icon": "2.0.7",
+    "@elliemae/ds-icons": "2.0.7",
+    "@elliemae/ds-props-helpers": "2.0.7",
+    "@elliemae/ds-system": "2.0.7",
     "@react-hook/resize-observer": "~1.2.5",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",

package/types/DSTabsTypes.d.ts

@@ -124,7 +124,6 @@ export interface MobileGradientsT {
 export interface IndicatorStyleT {
     left: string;
     width: string;
-    backgroundWithTransparentAndWhite: string;
     backgroundWithTransparent: string;
 }
 export interface UseCarouselReturnTypeT {
@@ -163,6 +162,10 @@ export interface VisibleDimensionsT {
     width: number;
     height: number;
 }
+export interface CenterTabPropsT {
+    e?: React.MouseEvent | React.FocusEvent;
+    listRef: React.MutableRefObject<HTMLDivElement | null>;
+}
 export interface StyledTabWrapperPropsT {
     isDSMobile: boolean;
     fixedTabsHeaders: boolean;

package/types/utils/constants.d.ts

@@ -8,7 +8,6 @@ export declare const MOBILE_GRADIENT_WIDTH = 24;
 export declare const defaultIndicatorStyles: {
     left: string;
     width: string;
-    backgroundWithTransparentAndWhite: string;
     backgroundWithTransparent: string;
 };
 export declare const gradientOffsetsAccordingType: {

package/types/utils/helpers.d.ts

@@ -1,8 +1,7 @@
-import type { DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';
+import type { CenterTabPropsT, VisibleDimensionsT } from '../DSTabsTypes';
 export declare const isElementVisible: (tab: HTMLElement, tabList: HTMLElement) => boolean;
 export declare const isElementVisibleCarousel: (tab: HTMLElement | null, tabContainer: HTMLDivElement | null, firstOrLastItem?: boolean) => boolean;
+export declare const centerTab: ({ e, listRef }: CenterTabPropsT) => void;
 export declare const getVisibleDimensions: (node: HTMLElement, referenceNode: HTMLElement) => VisibleDimensionsT;
-export declare const getIndexById: (children: React.ReactElement<DSTabPropsWithDefaultT>[], activeId?: string | undefined) => number;
-export declare const getIdByIndex: (children: React.ReactElement<DSTabPropsWithDefaultT>[], index: number) => string;
 export declare const shouldHaveLeftGradient: (scrollLeft: number) => boolean;
 export declare const shouldHaveRightGradient: (scrollLeft: number, clientWidth: number, scrollWidth: number) => boolean;