@elliemae/ds-tabs 1.60.0 → 2.0.0-alpha.12

package/cjs/parts/carousel/useCarouselCallbacks.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var helpers = require('../../utils/helpers.js');
+var DSTabsCTX = require('../../DSTabsCTX.js');
+
+/* eslint-disable max-statements */
+const useCarouselCallbacks = _ref => {
+  let {
+    getVisibleItemsOffset,
+    updateIndicatorStyle,
+    recalcChevrons
+  } = _ref;
+  const {
+    focusableTabsRef,
+    carouselOnlyListRef
+  } = React.useContext(DSTabsCTX.DSTabsContext);
+  const rightButtonOnClick = React.useCallback(() => {
+    if (carouselOnlyListRef.current) {
+      carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();
+    }
+  }, [getVisibleItemsOffset, carouselOnlyListRef]);
+  const leftButtonOnClick = React.useCallback(() => {
+    if (carouselOnlyListRef.current) {
+      carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();
+    }
+  }, [getVisibleItemsOffset, carouselOnlyListRef]);
+  const handleOnScroll = React.useCallback(() => {
+    recalcChevrons();
+    if (updateIndicatorStyle) updateIndicatorStyle();
+  }, [recalcChevrons, updateIndicatorStyle]);
+  const handleOnClick = React.useCallback(_ref2 => {
+    let {
+      target
+    } = _ref2;
+
+    if (focusableTabsRef.current && target.getAttribute('role') === 'tab') {
+      const tabList = carouselOnlyListRef.current;
+      const tabButton = target;
+      const tabButtonDimensions = tabButton.getBoundingClientRect();
+      const tabListDimensions = tabList === null || tabList === void 0 ? void 0 : tabList.getBoundingClientRect();
+      const tabButtonIndex = tabButton.dataset.index;
+      const lastItemIndex = focusableTabsRef.current.length.toString();
+      const magicNumber = 34;
+      const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;
+
+      if (!helpers.isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) && tabListDimensions && carouselOnlyListRef.current) {
+        const containerWidth = tabListDimensions.width;
+        const halfContainer = containerWidth / 2;
+        const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;
+        const positionInContainer = elementScrollPosition % containerWidth;
+        const width = tabButton.offsetWidth + magicNumber;
+
+        if (positionInContainer > halfContainer) {
+          carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;
+        } else {
+          carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;
+        }
+      }
+    }
+  }, [focusableTabsRef, carouselOnlyListRef]);
+  return {
+    handleOnClick,
+    rightButtonOnClick,
+    leftButtonOnClick,
+    handleOnScroll
+  };
+};
+
+exports.useCarouselCallbacks = useCarouselCallbacks;

package/cjs/parts/tabBar/TabBar.js

@@ -0,0 +1,160 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var Carousel = require('../carousel/Carousel.js');
+var useTabBar = require('./useTabBar.js');
+var styles = require('./styles.js');
+var DSTabsCTX = require('../../DSTabsCTX.js');
+var useKeyboardNavigation = require('../../utils/hooks/useKeyboardNavigation.js');
+var constants = require('../../utils/constants.js');
+var useTabsCallbacks = require('../../utils/hooks/useTabsCallbacks.js');
+var DSTabsDatatestid = require('../../DSTabsDatatestid.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _StyledRequiredMark;
+const TabBar = () => {
+  const {
+    tabsRef,
+    focusableTabsRef,
+    tabsListRef,
+    tabsRefAsArray,
+    actualActiveTab,
+    props: {
+      type,
+      fixedTabsHeaders,
+      withCarousel,
+      isDSMobile,
+      showSeparator,
+      children: tabs
+    }
+  } = React.useContext(DSTabsCTX.DSTabsContext);
+  const {
+    lastTabInternalRef,
+    firstSubtabInternalRef
+  } = React.useContext(DSTabsCTX.DSTabsCrossRefContext);
+  const {
+    handleOnTabChange
+  } = useTabsCallbacks.useTabsCallbacks();
+  const {
+    handleOnKeyDown
+  } = useKeyboardNavigation.useKeyboardNavigation();
+  const {
+    indicatorStyle,
+    mobileGradients,
+    updateMobileGradients,
+    updateIndicatorStyle
+  } = useTabBar.useTabBar();
+  const renderTabs = React.useMemo(() => {
+    const availableTabIndexes = [];
+    return React__default["default"].Children.map(tabs, (tab, index) => {
+      const {
+        tabId = '',
+        title = '',
+        style,
+        required = false,
+        disabled = false,
+        ref,
+        onClick,
+        onKeyDown
+      } = tab.props;
+      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;
+
+            if (type === constants.TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
+              firstSubtabInternalRef.current = t;
+            }
+
+            if (type !== constants.TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
+              lastTabInternalRef.current = t;
+            }
+
+            if (ref) ref.current = t;
+          }
+        },
+        type: "button",
+        "aria-controls": tabId,
+        "aria-selected": actualActiveTab === tabId,
+        "aria-disabled": disabled,
+        "aria-labelledby": "".concat(tabId, "-label"),
+        isDSMobile: isDSMobile,
+        fixedTabsHeaders: fixedTabsHeaders,
+        tabType: type,
+        title: title,
+        "data-required": required,
+        "data-tab-id": tabId,
+        "data-index": index,
+        withCarousel: withCarousel,
+        isActive: actualActiveTab === tabId,
+        disabled: disabled,
+        showSeparator: showSeparator && type !== constants.TabTypes.NORMAL,
+        "data-testid": type === constants.TabTypes.NORMAL ? DSTabsDatatestid.DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.DSTabsDatatestid.SUBTAB_BUTTON,
+        id: "".concat(tabId, "-label"),
+        onClick: e => {
+          if (!disabled) {
+            handleOnTabChange(tabId, e);
+            updateIndicatorStyle();
+          }
+
+          if (onClick && !disabled) onClick(tabId, e);
+        },
+        onKeyDown: e => {
+          if (e.key === 'Enter') e.stopPropagation();
+          if (!disabled) handleOnKeyDown(e);
+          if (onKeyDown && !disabled) onKeyDown(e);
+        },
+        style: style,
+        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]);
+
+  if (type === constants.TabTypes.SUBTABS && !isDSMobile) {
+    return /*#__PURE__*/jsxRuntime.jsx(styles.StyledSubTabsList, {
+      withCarousel: withCarousel,
+      "data-testid": DSTabsDatatestid.DSTabsDatatestid.SUB_TAB_LIST,
+      ref: tabsListRef,
+      role: "tablist",
+      children: withCarousel ? /*#__PURE__*/_jsx__default["default"](Carousel.Carousel, {}, void 0, renderTabs) : renderTabs
+    });
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsxs(styles.StyledTabList, {
+    withCarousel: withCarousel,
+    ref: tabsListRef,
+    role: "tablist",
+    "data-testid": DSTabsDatatestid.DSTabsDatatestid.TAB_LIST,
+    isDSMobile: isDSMobile,
+    fixedTabsHeaders: fixedTabsHeaders,
+    mobileGradients: mobileGradients,
+    onScroll: updateMobileGradients,
+    indicatorStyle: indicatorStyle,
+    tabType: type,
+    children: [/*#__PURE__*/_jsx__default["default"](styles.StyledTabWrapper, {
+      isDSMobile: isDSMobile,
+      fixedTabsHeaders: fixedTabsHeaders
+    }, void 0, !isDSMobile && withCarousel ? /*#__PURE__*/_jsx__default["default"](Carousel.Carousel, {
+      updateIndicatorStyle: updateIndicatorStyle
+    }, void 0, renderTabs) : renderTabs), /*#__PURE__*/_jsx__default["default"](styles.StyledSelectionIndicator, {
+      isDSMobile: isDSMobile,
+      tabType: type
+    })]
+  });
+};
+
+exports.TabBar = TabBar;

package/cjs/parts/tabBar/styles.js

@@ -0,0 +1,199 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var constants = require('../../utils/constants.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject;
+const StyledSelectionIndicator = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-3hla56-0"
+})(["position:absolute;height:3px;top:", ";margin-top:", ";pointer-events:none;transition:200ms cubic-bezier(0.36,0,1,1);z-index:10;", ""], _ref => {
+  let {
+    tabType,
+    isDSMobile
+  } = _ref;
+  if (isDSMobile) return "34px";
+  if (tabType === constants.TabTypes.NORMAL_SMALL) return "15px";
+  return "25px";
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space.xxxs;
+}, _ref3 => {
+  let {
+    isDSMobile
+  } = _ref3;
+  return isDSMobile ? " \n  margin-left: 0;\n  margin-top: 3px;\n  " : "";
+});
+const mobileGradientsSettings = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref4 => {
+  let {
+    theme,
+    mobileGradients,
+    isDSMobile,
+    fixedTabsHeaders
+  } = _ref4;
+
+  if (isDSMobile && !fixedTabsHeaders) {
+    if (mobileGradients.right && mobileGradients.left) return "background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ".concat(theme.colors.brand[200], " 20%, ").concat(theme.colors.brand[200], " 80%, rgba(238,238,238,0) 100%);");
+    if (mobileGradients.right) return "background: linear-gradient(90deg, ".concat(theme.colors.brand[200], " 0%, ").concat(theme.colors.brand[200], " 80%, rgba(238,238,238,0) 100%);");
+    if (mobileGradients.left) return "background: linear-gradient(90deg, rgba(238,238,238,0) 0%,  ".concat(theme.colors.brand[200], " 20%, ").concat(theme.colors.brand[200], " 100%);");
+  }
+
+  return "";
+});
+const StyledTabWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-3hla56-1"
+})(["display:flex;flex:1;flex-wrap:nowrap;", ""], _ref5 => {
+  let {
+    fixedTabsHeaders,
+    isDSMobile
+  } = _ref5;
+  return !fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;';
+});
+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 => {
+  let {
+    tabType
+  } = _ref6;
+  return tabType === constants.TabTypes.SUBTABS ? "capitalize" : "uppercase";
+}, _ref7 => {
+  let {
+    fixedTabsHeaders,
+    isDSMobile
+  } = _ref7;
+  if (fixedTabsHeaders) return '0px';
+  if (!fixedTabsHeaders && isDSMobile) return '14px';
+  return '16px';
+}, _ref8 => {
+  let {
+    fixedTabsHeaders,
+    isDSMobile
+  } = _ref8;
+  if (fixedTabsHeaders) return '0px';
+  if (!fixedTabsHeaders && isDSMobile) return '14px';
+  return '16px';
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral[700];
+}, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref10 => {
+  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      ";
+}, _ref12 => {
+  let {
+    theme,
+    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          ");
+}, _ref13 => {
+  let {
+    theme,
+    isDSMobile
+  } = _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  ") : "";
+}, _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            }") : "";
+}, _ref15 => {
+  let {
+    theme,
+    isActive,
+    disabled,
+    isDSMobile
+  } = _ref15;
+  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 => {
+  let {
+    withCarousel
+  } = _ref16;
+  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 => {
+  let {
+    withCarousel,
+    isDSMobile
+  } = _ref17;
+  return withCarousel && !isDSMobile ? "max-width: 100%;" : '';
+}, _ref18 => {
+  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 => {
+  let {
+    theme,
+    isDSMobile
+  } = _ref19;
+  return isDSMobile ? "border-bottom: 1px solid ".concat(theme.colors.brand[300], ";\n         background: ").concat(theme.colors.brand[200], ";") : "";
+}, mobileGradientsSettings, _ref20 => {
+  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        ");
+}, StyledSelectionIndicator, _ref22 => {
+  let {
+    theme,
+    indicatorStyle,
+    isDSMobile
+  } = _ref22;
+  return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
+}, StyledSelectionIndicator, _ref23 => {
+  let {
+    theme,
+    indicatorStyle,
+    isDSMobile
+  } = _ref23;
+  return !isDSMobile ? indicatorStyle.backgroundWithTransparentAndWhite : theme.colors.brand[600];
+});
+const StyledRequiredMark = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-3hla56-5"
+})(["color:", ";font-size:6px;margin-left:2px;position:absolute;top:5px;"], _ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.colors.danger[900];
+});
+
+exports.StyledRequiredMark = StyledRequiredMark;
+exports.StyledSelectionIndicator = StyledSelectionIndicator;
+exports.StyledSubTabsList = StyledSubTabsList;
+exports.StyledTabButton = StyledTabButton;
+exports.StyledTabList = StyledTabList;
+exports.StyledTabWrapper = StyledTabWrapper;

package/cjs/parts/tabBar/useTabBar.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var useResizeObserver = require('@react-hook/resize-observer');
+var helpers = require('../../utils/helpers.js');
+var DSTabsCTX = require('../../DSTabsCTX.js');
+var constants = require('../../utils/constants.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
+
+const useTabBar = () => {
+  const {
+    actualActiveTab,
+    actualActiveTabRef,
+    tabsListRef,
+    props: {
+      showSelectionIndicator,
+      isDSMobile,
+      fixedTabsHeaders
+    }
+  } = React.useContext(DSTabsCTX.DSTabsContext);
+  const [mobileGradients, setMobileGradients] = React.useState({
+    left: false,
+    right: false
+  });
+  const [indicatorStyle, setIndicatorStyle] = React.useState(constants.defaultIndicatorStyles);
+  const getIndicatorStyles = React.useCallback(() => {
+    if (tabsListRef.current) {
+      const tabList = tabsListRef.current;
+      const activeTabButton = actualActiveTabRef.current;
+      if (!activeTabButton || !helpers.isElementVisible(activeTabButton, tabList)) return constants.defaultIndicatorStyles; // The missingMargins are to make the selection indicator white marks work properly in desktop, we need
+      // the full width of the tab button with margins.
+
+      const missingMargins = isDSMobile ? 0 : 16;
+      const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2; // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)
+      // 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
+      };
+    }
+
+    return constants.defaultIndicatorStyles;
+  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
+  const updateIndicatorStyle = React.useCallback(() => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100), [getIndicatorStyles, setIndicatorStyle]);
+  useResizeObserver__default["default"](tabsListRef, updateIndicatorStyle);
+  const updateMobileGradients = React.useCallback(() => {
+    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
+      const {
+        scrollLeft,
+        scrollWidth,
+        clientWidth
+      } = tabsListRef.current;
+      setMobileGradients({
+        left: helpers.shouldHaveLeftGradient(scrollLeft),
+        right: helpers.shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth)
+      });
+    }
+  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
+  React.useEffect(() => {
+    if (showSelectionIndicator) {
+      updateIndicatorStyle();
+    }
+
+    if (isDSMobile && !fixedTabsHeaders) {
+      updateMobileGradients();
+    }
+  }, [updateIndicatorStyle, showSelectionIndicator, actualActiveTab, updateMobileGradients, isDSMobile, fixedTabsHeaders]);
+  React.useLayoutEffect(() => {
+    if (showSelectionIndicator) {
+      updateIndicatorStyle();
+    }
+
+    if (isDSMobile && !fixedTabsHeaders) {
+      updateMobileGradients();
+    }
+  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders]);
+  return {
+    updateIndicatorStyle,
+    setIndicatorStyle,
+    indicatorStyle,
+    mobileGradients,
+    updateMobileGradients
+  };
+};
+
+exports.useTabBar = useTabBar;

package/cjs/parts/tabsContent/TabsContent.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var TabsPanels = require('../tabsPanel/TabsPanels.js');
+var TabBar = require('../tabBar/TabBar.js');
+var styles = require('./styles.js');
+var DSTabsCTX = require('../../DSTabsCTX.js');
+var DSTabsDatatestid = require('../../DSTabsDatatestid.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _TabBar, _TabsPanels;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const TabsContent = () => {
+  const {
+    props: {
+      containerProps,
+      innerRef,
+      tabsListAriaLabel,
+      tabBarExtraContent
+    }
+  } = React.useContext(DSTabsCTX.DSTabsContext);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+    ref: innerRef,
+    "data-testid": DSTabsDatatestid.DSTabsDatatestid.TABS_CONTAINER,
+    children: [/*#__PURE__*/_jsx__default["default"](styles.StyledTabBarContainer, {
+      "aria-label": tabsListAriaLabel,
+      role: "tablist"
+    }, void 0, _TabBar || (_TabBar = /*#__PURE__*/_jsx__default["default"](TabBar.TabBar, {})), tabBarExtraContent), _TabsPanels || (_TabsPanels = /*#__PURE__*/_jsx__default["default"](TabsPanels.TabsPanels, {}))]
+  }));
+};
+
+exports.TabsContent = TabsContent;

package/cjs/parts/tabsContent/styles.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledTabBarContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-vm3k1y-0"
+})(["display:flex;overflow-x:hidden;"]);
+
+exports.StyledTabBarContainer = StyledTabBarContainer;

package/cjs/parts/tabsPanel/TabsPanels.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+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');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var SwipeableViews__default = /*#__PURE__*/_interopDefaultLegacy(SwipeableViews);
+
+const TabsPanels = () => {
+  const {
+    actualActiveTab,
+    focusableTabsRef,
+    props: {
+      animated,
+      enableMouseEvents,
+      onlyRenderActiveTab,
+      children: tabs,
+      isDSMobile
+    }
+  } = React.useContext(DSTabsCTX.DSTabsContext);
+  const {
+    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 panels = React.useMemo(() => React__default["default"].Children.map(tabs, tab => {
+    const {
+      tabId: panelId = '',
+      style,
+      children: content
+    } = tab.props;
+    const isActive = actualActiveTab === panelId;
+    const shouldRender = !onlyRenderActiveTab || isActive;
+    return shouldRender && /*#__PURE__*/_jsx__default["default"](styles.StyledPanelContainer, {
+      id: panelId,
+      "aria-labelledby": "".concat(panelId, "-label"),
+      "aria-hidden": !isActive,
+      "data-panel-id": panelId,
+      "data-testid": "ds-tabs-tab-panel",
+      hidden: !isActive,
+      onMouseDown: handleOnMouseDown,
+      role: "tabpanel",
+      style: style,
+      isDSMobile: isDSMobile
+    }, panelId, content);
+  }), [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs]);
+
+  if (animated) {
+    return /*#__PURE__*/_jsx__default["default"](SwipeableViews__default["default"], {
+      enableMouseEvents: enableMouseEvents,
+      index: helpers.getIndexById(tabs, actualActiveTab),
+      onChangeIndex: handleOnChangeIndex
+    }, void 0, panels);
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: panels
+  });
+};
+
+exports.TabsPanels = TabsPanels;