@elliemae/ds-tabs 2.2.0-alpha.2 → 2.2.0-next.1

package/cjs/parts/tabBar/styles.js

@@ -1,294 +1,200 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var styles_exports = {};
-__export(styles_exports, {
-  StyledRequiredMark: () => StyledRequiredMark,
-  StyledSelectionIndicator: () => StyledSelectionIndicator,
-  StyledSubTabsList: () => StyledSubTabsList,
-  StyledTabButton: () => StyledTabButton,
-  StyledTabList: () => StyledTabList,
-  StyledTabWrapper: () => StyledTabWrapper
+'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 "35px";
+  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  " : "";
 });
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_system = __toESM(require("@elliemae/ds-system"));
-var import_constants = __toESM(require("../../utils/constants"));
-const StyledSelectionIndicator = import_styled_components.default.div`
-  position: absolute;
-  height: 3px;
-  top: ${({ tabType, isDSMobile }) => {
-  if (isDSMobile)
-    return `35px`;
-  if (tabType === import_constants.TabTypes.NORMAL_SMALL)
-    return `15px`;
-  return `25px`;
-}};
-  margin-top: ${({ theme }) => theme.space.xxxs};
-  pointer-events: none;
-  transition: 200ms cubic-bezier(0.36, 0, 1, 1);
-  z-index: 10;
-  ${({ isDSMobile }) => isDSMobile ? ` 
-  margin-left: 0;
-  margin-top: 3px;
-  ` : ``}
-`;
-const mobileGradientsSettings = import_ds_system.css`
-  ${({ theme, mobileGradients, isDSMobile, fixedTabsHeaders }) => {
-  if (isDSMobile && !fixedTabsHeaders) {
-    if (mobileGradients.right && mobileGradients.left)
-      return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
-    if (mobileGradients.right)
-      return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${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%,  ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 100%);`;
-  }
-  return ``;
-}}
-`;
-const StyledTabWrapper = import_styled_components.default.div`
-  display: flex;
-  flex: 1;
-  flex-wrap: nowrap;
-  ${({ fixedTabsHeaders, isDSMobile }) => !fixedTabsHeaders && isDSMobile ? "" : "overflow-x: hidden;"}
-  ${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.brand[300]};` : ``}
-`;
-const StyledTabButton = import_styled_components.default.button`
-  position: relative;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  transition: 100ms cubic-bezier(0, 0, 0.42, 1);
-  text-transform: ${({ tabType }) => tabType === import_constants.TabTypes.SUBTABS ? `capitalize` : `uppercase`};
-  letter-spacing: 0px;
-  white-space: nowrap;
-  padding: 2px 0;
-  margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {
-  if (fixedTabsHeaders)
-    return "0px";
-  if (!fixedTabsHeaders && isDSMobile)
-    return "14px";
-  return "16px";
-}};
-
-  margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {
-  if (fixedTabsHeaders)
-    return "0px";
-  if (!fixedTabsHeaders && isDSMobile)
-    return "14px";
-  return "16px";
-}};
-
-  color: ${({ theme }) => theme.colors.neutral[700]};
-  ${(0, import_ds_system.onlySafariAndFirefox)("-webkit-text-stroke: 0.4px transparent;")}
-
-  ${({ tabType }) => tabType === import_constants.TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`}
-
-  ${({ theme, isActive, disabled }) => isActive && !disabled ? `
-          font-weight:  ${theme.fontWeights.semibold};
-          ${(0, import_ds_system.safariAndFirefoxBold)(`#353C46`)}
-
-          &:hover {
-            ${(0, import_ds_system.safariAndFirefoxBold)(`#1E79C2`)}
-          }
-          
-        ` : `
-      
-      `}
-
-  ${({ theme, disabled }) => disabled ? `
-          color: ${theme.colors.neutral[500]};
-          cursor: not-allowed;
-        ` : `
-      &:hover {
-        color: ${theme.colors.brand[600]};
-      }
-          `}
-
-
-  ${({ theme, showSeparator, tabType }) => showSeparator ? `
-          &:not(:last-of-type):before
-            {
-              content: "";
-              position: absolute;
-              width: 1px;
-              right: -16px;
-              top: 50%;
-              transform: translateY(-50%);
-              height: ${tabType === import_constants.TabTypes.SUBTABS ? `10px` : `16px`};
-              background: ${theme.colors.neutral[400]};
-            }` : ``}
-
-  ${({ theme, isDSMobile, tabType, isActive }) => !isDSMobile ? `
-  &:focus {
-    outline: none;
-    &:after {
-      position: absolute;
-      content: '';
-      top: 0;
-      left: -16px;
-      width: calc(100% + 32px);
-      height: 100%;
-      z-index: 5;
-      border-radius: 2px;
-      border: 2px solid ${theme.colors.brand[700]};
-    }
-
-    ${tabType !== import_constants.TabTypes.SUBTABS && isActive ? `
-      &:before {
-        position: absolute;
-        content: '';
-        left: -16px;
-        right: 0;
-        top: calc(100% - 2px);
-        transform: none;
-        width: calc(100% + 32px);
-        height: 2px;
-        z-index: 10;
-        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%);
-      }
-    ` : ``}
-  }
-  
-  ` : ``}
-
-  
-      
-${({ theme, isActive, disabled, isDSMobile }) => isDSMobile ? `
-    height:  40px;
-    color: ${theme.colors.brand[600]};
-    font-weight: ${theme.fontWeights.regular};
-    padding: 0;
-    font-size: 13px;
-    line-height: 1.3;
-    ${(0, import_ds_system.onlySafariAndFirefox)("-webkit-text-stroke: 0.4px transparent;")} 
-
-    &:focus {
-      font-weight: ${theme.fontWeights.regular};
-      font-size: 13px;
-      ${(0, import_ds_system.safariAndFirefoxBold)("#006AA9")}
-    }
-
-    ${isActive ? `
-        font-weight: ${theme.fontWeights.regular};
-        font-size: 13px;
-        ${(0, import_ds_system.safariAndFirefoxBold)("#006AA9")}
-        ` : ``}
-
-    ${isActive && !disabled ? `
-        font-size: 13px;
-        color:  ${theme.colors.brand[700]};
-        line-height: 1.3;
-        font-weight: ${theme.fontWeights.regular};
-        -webkit-font-smoothing: subpixel-antialiased; 
-        -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};` : ``}
+const mobileGradientsSettings = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref4 => {
+  let {
+    theme,
+    mobileGradients,
+    isDSMobile,
+    fixedTabsHeaders
+  } = _ref4;
 
-    ${!disabled ? `
-        &:hover,
-        &:focus {
-          outline: none;
-          color: ${theme.colors.brand[700]};
-          ${(0, import_ds_system.safariAndFirefoxBold)("#006AA9")}
-        }` : ``}
-
-    ` : ``}
-`;
-const StyledSubTabsList = import_styled_components.default.div`
-  position: relative;
-  display: flex;
-  flex-wrap: nowrap;
-  flex: 1;
-  width: 100%;
-  ${({ withCarousel }) => withCarousel ? "max-width: 100%;" : ""}
-`;
-const StyledTabList = import_styled_components.default.div`
-  position: relative;
-  display: flex;
-  flex-wrap: nowrap;
-  flex: 1;
-  width: 100%;
-  ${({ withCarousel, isDSMobile }) => withCarousel && !isDSMobile ? `max-width: 100%;` : ""}
-
-  ${({ theme, isDSMobile, tabType }) => tabType !== import_constants.TabTypes.NORMAL_SMALL && !isDSMobile ? `
-  &:after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 1px;
-    box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};
-    pointer-events: none;
-    bottom: 0px;
-  }
-  ` : ``}
-
-  ${StyledTabButton} {
-    padding-bottom: 0;
-    padding-top: 0;
+  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%);");
   }
 
-  ${({ theme, isDSMobile }) => isDSMobile ? `
-        
-         background: ${theme.colors.brand[200]};` : ``}
-
-  ${mobileGradientsSettings}
-
-
-  ${({ isDSMobile, fixedTabsHeaders }) => isDSMobile ? `
-      ${!fixedTabsHeaders ? `
-          z-index: 0;
-          overflow-x: auto;
-          overflow-y: hidden;
-          scrollbar-width: thin;
-          &::-webkit-scrollbar {
-            display: none;
-          }` : `
-         display: flex;
-        ${StyledTabButton} {
-          flex: 1;
-          overflow-x: hidden;
-        }`}` : ``}
-
-    ${StyledSelectionIndicator} {
-    ${({ indicatorStyle }) => `
-        width: ${indicatorStyle.width};
-        left: ${indicatorStyle.left};
-        `}
-  }
+  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;';
+}, _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:", ";", " ", " ", " ", " ", " ", " ", ""], _ref7 => {
+  let {
+    tabType
+  } = _ref7;
+  return tabType === constants.TabTypes.SUBTABS ? "capitalize" : "uppercase";
+}, _ref8 => {
+  let {
+    fixedTabsHeaders,
+    isDSMobile
+  } = _ref8;
+  if (fixedTabsHeaders) return '0px';
+  if (!fixedTabsHeaders && isDSMobile) return '14px';
+  return '16px';
+}, _ref9 => {
+  let {
+    fixedTabsHeaders,
+    isDSMobile
+  } = _ref9;
+  if (fixedTabsHeaders) return '0px';
+  if (!fixedTabsHeaders && isDSMobile) return '14px';
+  return '16px';
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral[700];
+}, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref11 => {
+  let {
+    tabType
+  } = _ref11;
+  return tabType === constants.TabTypes.NORMAL ? "height: 32px;" : "height: 22px;";
+}, _ref12 => {
+  let {
+    theme,
+    isActive,
+    disabled
+  } = _ref12;
+  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,
+    disabled
+  } = _ref13;
+  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: -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
+  } = _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%;", ""], _ref17 => {
+  let {
+    withCarousel
+  } = _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;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref18 => {
+  let {
+    withCarousel,
+    isDSMobile
+  } = _ref18;
+  return withCarousel && !isDSMobile ? "max-width: 100%;" : '';
+}, _ref19 => {
+  let {
+    theme,
+    isDSMobile,
+    tabType
+  } = _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
+  } = _ref20;
+  return isDSMobile ? "\n        \n         background: ".concat(theme.colors.brand[200], ";") : "";
+}, mobileGradientsSettings, _ref21 => {
+  let {
+    isDSMobile,
+    fixedTabsHeaders
+  } = _ref21;
+  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 {
+    indicatorStyle
+  } = _ref22;
+  return "\n        width: ".concat(indicatorStyle.width, ";\n        left: ").concat(indicatorStyle.left, ";\n        ");
+}, StyledSelectionIndicator, _ref23 => {
+  let {
+    theme,
+    indicatorStyle,
+    isDSMobile
+  } = _ref23;
+  return !isDSMobile ? indicatorStyle.backgroundWithTransparent : 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];
+});
 
-  ${StyledSelectionIndicator} {
-    background: ${({ theme, indicatorStyle, isDSMobile }) => !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600]};
-  }
-`;
-const StyledRequiredMark = import_styled_components.default.span`
-  color: ${({ theme }) => theme.colors.danger[900]};
-  font-size: 6px;
-  margin-left: 2px;
-  position: absolute;
-  top: 5px;
-`;
-module.exports = __toCommonJS(styles_exports);
-//# sourceMappingURL=styles.js.map
+exports.StyledRequiredMark = StyledRequiredMark;
+exports.StyledSelectionIndicator = StyledSelectionIndicator;
+exports.StyledSubTabsList = StyledSubTabsList;
+exports.StyledTabButton = StyledTabButton;
+exports.StyledTabList = StyledTabList;
+exports.StyledTabWrapper = StyledTabWrapper;

package/cjs/parts/tabBar/useTabBar.js

@@ -1,101 +1,80 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var useTabBar_exports = {};
-__export(useTabBar_exports, {
-  useTabBar: () => useTabBar
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_resize_observer = __toESM(require("@react-hook/resize-observer"));
-var import_helpers = __toESM(require("../../utils/helpers"));
-var import_DSTabsCTX = __toESM(require("../../DSTabsCTX"));
-var import_constants = __toESM(require("../../utils/constants"));
+'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 }
-  } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
-  const [mobileGradients, setMobileGradients] = (0, import_react.useState)({ left: false, right: false });
-  const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(import_constants.defaultIndicatorStyles);
-  const getIndicatorStyles = (0, import_react.useCallback)(() => {
+    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 || !(0, import_helpers.isElementVisible)(activeTabButton, tabList))
-        return import_constants.defaultIndicatorStyles;
+      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;
+      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 backgroundWithTransparent = `linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2  ${tabClientWidth - 16}px,transparent ${tabClientWidth - 16}px,transparent ${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: `${position}px`,
-        width: `${tabClientWidth}px`,
+        left: "".concat(position, "px"),
+        width: "".concat(tabClientWidth, "px"),
         backgroundWithTransparent
       };
     }
-    return import_constants.defaultIndicatorStyles;
+
+    return constants.defaultIndicatorStyles;
   }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
-  const updateIndicatorStyle = (0, import_react.useCallback)(() => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100), [getIndicatorStyles, setIndicatorStyle]);
-  (0, import_resize_observer.default)(tabsListRef, updateIndicatorStyle);
-  const updateMobileGradients = (0, import_react.useCallback)(() => {
+  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;
+      const {
+        scrollLeft,
+        scrollWidth,
+        clientWidth
+      } = tabsListRef.current;
       setMobileGradients({
-        left: (0, import_helpers.shouldHaveLeftGradient)(scrollLeft),
-        right: (0, import_helpers.shouldHaveRightGradient)(scrollLeft, clientWidth, scrollWidth)
+        left: helpers.shouldHaveLeftGradient(scrollLeft),
+        right: helpers.shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth)
       });
     }
   }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
-  (0, import_react.useEffect)(() => {
-    if (showSelectionIndicator) {
-      updateIndicatorStyle();
-    }
-    if (isDSMobile && !fixedTabsHeaders) {
-      updateMobileGradients();
-    }
-  }, [
-    updateIndicatorStyle,
-    showSelectionIndicator,
-    actualActiveTab,
-    updateMobileGradients,
-    isDSMobile,
-    fixedTabsHeaders
-  ]);
-  (0, import_react.useLayoutEffect)(() => {
+  React.useLayoutEffect(() => {
     if (showSelectionIndicator) {
       updateIndicatorStyle();
     }
+
     if (isDSMobile && !fixedTabsHeaders) {
       updateMobileGradients();
     }
-  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders]);
+  }, [updateMobileGradients, showSelectionIndicator, updateIndicatorStyle, isDSMobile, fixedTabsHeaders, actualActiveTab]);
   return {
     updateIndicatorStyle,
     setIndicatorStyle,
@@ -104,5 +83,5 @@ const useTabBar = () => {
     updateMobileGradients
   };
 };
-module.exports = __toCommonJS(useTabBar_exports);
-//# sourceMappingURL=useTabBar.js.map
+
+exports.useTabBar = useTabBar;