@bydata/react-supertabs 1.1.0

package/dist/SuperTabs.js

@@ -0,0 +1,1196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emitter = exports["default"] = exports.SubTab = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _superDnd = require("super-dnd");
+var _ClickOutsideListener = _interopRequireDefault(require("./ClickOutsideListener"));
+var _reactHoverText = _interopRequireDefault(require("react-hover-text"));
+var _superAvatar = _interopRequireDefault(require("super-avatar"));
+var _SuperLink = _interopRequireDefault(require("./SuperLink"));
+var _TabStack = _interopRequireDefault(require("./TabStack"));
+var _TabContext = require("./TabContext");
+var _eventEmitter = _interopRequireDefault(require("./eventEmitter"));
+var _Utils = require("./Utils");
+var _Constants = require("./Constants");
+require("./SuperTabs.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; } // components
+// contexts
+// services
+// utils and constants
+// styles
+var emitter = exports.emitter = new _eventEmitter["default"]();
+var tooltipStyles = {
+  position: "fixed",
+  zIndex: 100000,
+  boxShadow: "0px 1px 10px 0px rgba(0, 0, 0, 0.10)",
+  marginBottom: "5px",
+  minWidth: "fit-content"
+};
+var filterSubTabs = function filterSubTabs(subTabs) {
+  // const subTabsInList = [];
+  var subTabsInNavbar = [];
+  subTabs.forEach(function (subTab) {
+    if (subTab.order !== 0) {
+      subTabsInNavbar.push(subTab);
+      // } else {
+      //     subTabsInList.push(subTab);
+    }
+  });
+  return {
+    subTabsInNavbar: subTabsInNavbar
+  };
+  // return { subTabsInList, subTabsInNavbar };
+};
+var getActiveParentTabName = function getActiveParentTabName(url, homeUrl) {
+  if (homeUrl === '/') {
+    return url.split('/')[1]; // ex. /organization/1 => organization, /recruiter/home => recruiter
+  }
+  return url.split('/')[2]; // ex. /app/organization/1 => organization, /app/recruiter/home => recruiter
+};
+
+// function calculateTransitionDuration(totalWidth, avgWidth = maxTabWidth) {
+//     // return (totalWidth / avgWidth) * 100;
+//     // return (totalWidth / transitionDurationExtended) * avgWidth;
+//     return (totalWidth / avgWidth) * transitionDurationExtended;
+// }
+
+var SuperTabs = function SuperTabs(_ref) {
+  var Suffix = _ref.Suffix;
+  var draggingTimeOutRef = (0, _react.useRef)(null);
+  var timeOutRef = (0, _react.useRef)(null);
+  var addButtonCallBackRefs = (0, _react.useRef)({});
+  var transitionTimeOutRef = (0, _react.useRef)(null);
+  var expandingTabIdRef = (0, _react.useRef)(null);
+  var _useTabContext = (0, _TabContext.useTabContext)(),
+    lastOpenedUrl = _useTabContext.lastOpenedUrl,
+    SITE_PAGES = _useTabContext.SITE_PAGES,
+    SITE_PREFIX = _useTabContext.SITE_PREFIX,
+    tabs = _useTabContext.tabs,
+    updateTabs = _useTabContext.updateTabs,
+    closeTab = _useTabContext.closeTab,
+    reorderTabs = _useTabContext.reorderTabs,
+    activeTab = _useTabContext.activeTab,
+    activeTabRef = _useTabContext.activeTabRef,
+    updateActiveTab = _useTabContext.updateActiveTab,
+    activeSubTab = _useTabContext.activeSubTab,
+    updateActiveSubTab = _useTabContext.updateActiveSubTab,
+    subTabWrapperWidth = _useTabContext.subTabWrapperWidth,
+    setSubTabWrapperWidth = _useTabContext.setSubTabWrapperWidth,
+    expandedTabID = _useTabContext.expandedTabID,
+    updateExpandedID = _useTabContext.updateExpandedID,
+    expandedTabIDRef = _useTabContext.expandedTabIDRef,
+    updateCurrentTab = _useTabContext.updateCurrentTab,
+    hasPrivilege = _useTabContext.hasPrivilege,
+    subTabChange = _useTabContext.subTabChange,
+    updateSubTabChange = _useTabContext.updateSubTabChange,
+    superTabsWrapperElemRef = _useTabContext.superTabsWrapperElemRef,
+    maxWidth = _useTabContext.maxWidth,
+    updateMaxWidth = _useTabContext.updateMaxWidth,
+    resetMaxWidth = _useTabContext.resetMaxWidth,
+    currentEntityId = _useTabContext.currentEntityId,
+    homeUrl = _useTabContext.homeUrl,
+    preventHomeRedirect = _useTabContext.preventHomeRedirect,
+    hiddenExternalToolbars = _useTabContext.hiddenExternalToolbars,
+    tabModePreference = _useTabContext.tabModePreference,
+    isMobileView = _useTabContext.isMobileView,
+    isDefaultExpanded = _useTabContext.isDefaultExpanded;
+  var isMobile = window.innerWidth < 640;
+  (0, _react.useLayoutEffect)(function () {
+    var _superTabsWrapperElem;
+    if (!isDefaultExpanded) return;
+    var storedExpandedIds = JSON.parse(sessionStorage.getItem("".concat(SITE_PREFIX, "expandedIds"))) || [];
+    if (!storedExpandedIds.length) return;
+    (_superTabsWrapperElem = superTabsWrapperElemRef.current) === null || _superTabsWrapperElem === void 0 || (_superTabsWrapperElem = _superTabsWrapperElem.classList) === null || _superTabsWrapperElem === void 0 || _superTabsWrapperElem.add('nested-tabs-visible');
+  }, [isDefaultExpanded, SITE_PREFIX]);
+  (0, _react.useLayoutEffect)(function () {
+    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            _context.n = 1;
+            return document.fonts.load(_Constants.fontStyle);
+          case 1:
+            updateMaxWidth();
+          case 2:
+            return _context.a(2);
+        }
+      }, _callee);
+    }))();
+  }, [updateMaxWidth]);
+  var history = (0, _reactRouterDom.useHistory)();
+  var location = (0, _reactRouterDom.useLocation)();
+  var _useState = (0, _react.useState)(function (isDefaultExpanded) {
+      if (isDefaultExpanded) updateMaxWidth();
+      return isDefaultExpanded;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSubTabCollapsing = _useState2[0],
+    setIsSubTabCollapsing = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    closingTabID = _useState4[0],
+    setClosingTabID = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showMainMenu = _useState6[0],
+    setShowMainMenu = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isHoveringBrand = _useState8[0],
+    setIsHoveringBrand = _useState8[1];
+
+  // Refs for hover timeout management
+  var hoverTimeoutRef = (0, _react.useRef)(null);
+  var hoverOffTimeoutRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var unsub = emitter.subscribe('bindCallback', function (_ref3) {
+      var id = _ref3.id,
+        callback = _ref3.callback;
+      return addButtonCallBackRefs.current[id] = callback;
+    });
+    return unsub;
+  }, [activeTab]);
+
+  // for adjusting width and animation of subtab wrapper when we open new tab from tab list.
+  (0, _react.useLayoutEffect)(function () {
+    if (subTabChange && !expandedTabID) {
+      var _subTabChange$newTab, _subTabChange$oldTab;
+      if (!(subTabChange !== null && subTabChange !== void 0 && subTabChange.oldTab) || (subTabChange === null || subTabChange === void 0 || (_subTabChange$newTab = subTabChange.newTab) === null || _subTabChange$newTab === void 0 ? void 0 : _subTabChange$newTab.id) === (subTabChange === null || subTabChange === void 0 || (_subTabChange$oldTab = subTabChange.oldTab) === null || _subTabChange$oldTab === void 0 ? void 0 : _subTabChange$oldTab.id)) return;
+      var openingTab = document.querySelector("#tab-".concat(subTabChange.parentTabId, "-").concat(subTabChange.newTab.id.toString().replace('/', '-')));
+      var closingTab = document.querySelector("#tab-".concat(subTabChange.parentTabId, "-").concat(subTabChange.oldTab.id.toString().replace('/', '-')));
+      var subTabGroup = document.querySelector(".sub-tabs-wrapper.tab-".concat(subTabChange.parentTabId));
+      var openingTabWidth = openingTab.style.width;
+      var closingTabWidth = (0, _Utils.calculateWidth)({
+        text: (0, _Utils.getTitle)(subTabChange.oldTab),
+        hasAvatar: subTabChange.oldTab.showAvatar,
+        addMargin: true
+      });
+      var subTabGroupWidth = "".concat(subTabGroup.scrollWidth, "px");
+      var subTabGroupUpdatedWidth = (0, _Utils.getCssUnitDifference)(openingTabWidth, "-42px");
+
+      // const isNewTabSmaller = getCssUnitDifference(openingTabWidth, `${closingTabWidth}px`).includes('-');
+      // setSubTabWrapperWidth(subTabGroupUpdatedWidth)
+
+      if (closingTab) {
+        closingTab.style.width = "".concat(closingTabWidth, "px");
+        closingTab.style.marginLeft = "".concat(_Constants.MarginLeft, "px");
+        closingTab.classList.add('slide-out');
+      }
+      subTabGroup.style.width = subTabGroupWidth;
+      subTabGroup.style.transition = "width ".concat(_Constants.transitionDuration, "ms");
+      openingTab.style.width = "0px";
+      openingTab.style.marginLeft = "0px";
+      openingTab.style.transition = "opacity 50ms";
+      openingTab.style.opacity = "0";
+      setTimeout(function () {
+        if (closingTab) {
+          closingTab.style.opacity = "0";
+          closingTab.style.width = "0px";
+          closingTab.style.marginLeft = "0px";
+        }
+
+        // openingTab.classList.add('fade-in');
+        openingTab.style.width = openingTabWidth;
+        openingTab.style.marginLeft = "".concat(_Constants.MarginLeft, "px");
+
+        // if (!isNewTabSmaller) subTabGroup.style.width = subTabGroupUpdatedWidth;
+        // if (!isNewTabSmaller) setSubTabWrapperWidth(subTabGroupUpdatedWidth);
+        setSubTabWrapperWidth(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, currentEntityId + '_' + activeTabRef.current.id, subTabGroupUpdatedWidth));
+        });
+        subTabGroup.style.width = subTabGroupUpdatedWidth;
+        setTimeout(function () {
+          // subTabGroup.style.removeProperty('width');
+          openingTab.style.opacity = "1";
+          subTabGroup.style.removeProperty('transition');
+          // openingTab.style.removeProperty('transition');
+          // openingTab.style.removeProperty('opacity');
+          setTimeout(function () {
+            if (closingTab) closingTab.classList.remove('slide-out');
+            // if (isNewTabSmaller) subTabGroup.style.width = subTabGroupUpdatedWidth;
+            // if (isNewTabSmaller) setSubTabWrapperWidth(subTabGroupUpdatedWidth);
+            // if (isNewTabSmaller) {
+            //     setSubTabWrapperWidth(prev => ({ ...prev, [activeTabRef.current.id]: subTabGroupUpdatedWidth }));
+            //     subTabGroup.style.width = subTabGroupUpdatedWidth;
+            // }
+
+            setTimeout(function () {
+              // if (isNewTabSmaller) subTabGroup.style.removeProperty('transition');
+              updateSubTabChange(null);
+            }, _Constants.transitionDuration);
+
+            // subTabGroup.style.removeProperty('width');
+
+            // openingTab.style.removeProperty('width');
+            // openingTab.style.removeProperty('margin-left');
+            openingTab.style.removeProperty('transition');
+            openingTab.style.removeProperty('opacity');
+          }, _Constants.transitionDuration);
+          // parentSuperTab.style.removeProperty('width');
+          // subTabGroup.style.width = 'unset';
+          // parentSuperTab.style.width = 'unset';
+          // openingTab.classList.remove('fade-in');
+        }, _Constants.transitionDuration);
+      }, _Constants.transitionDuration);
+    }
+  }, [expandedTabID, subTabChange, currentEntityId]);
+
+  // useEffect(() => {
+  //     const openedPage = SITE_PAGES.find(page => page.url === location.pathname);
+  //     if (openedPage?.containsSubTabs) {
+  //         toggleSubTabs(openedPage);
+  //     }
+  //     // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [SITE_PAGES]);
+
+  (0, _react.useEffect)(function () {
+    SITE_PAGES.forEach(function (page) {
+      // const pageUrl = removeAfterLastSlashIfEndsWithHome(page.url);
+      // const locationPathname = removeAfterLastSlashIfEndsWithHome(location.pathname);
+
+      // console.log('pageUrl === locationPathname', page.url, location.pathname, pageUrl, locationPathname);
+
+      // if (pageUrl === locationPathname) {
+      //     updateActiveTab(tabs.filter(tab => tab.url === page.url)[0]);
+      // } else {
+      //     console.log('locationPathname else');
+      // }
+
+      if (page.url === location.pathname) {
+        updateTabs(function (prev) {
+          var newTabs = structuredClone(prev);
+          // Check by both URL and ID to prevent duplicates
+          var openedTabIndex = newTabs.findIndex(function (tab) {
+            return tab.url === page.url || tab.id === page.id;
+          });
+          if (openedTabIndex !== -1) {
+            // Page is already opened, update the lastOpened flag
+            newTabs = newTabs.map(function (tab, index) {
+              return _objectSpread(_objectSpread({}, tab), {}, {
+                lastOpened: index === openedTabIndex
+              });
+            });
+            return newTabs;
+          }
+          for (var i = 0; i < newTabs.length; i++) {
+            newTabs[i].lastOpened = false;
+          }
+          newTabs.push(_objectSpread(_objectSpread({}, page), {}, {
+            subTabs: [],
+            lastOpened: true
+          }));
+          return newTabs;
+        });
+      }
+    });
+    return function () {
+      if (draggingTimeOutRef.current) clearTimeout(draggingTimeOutRef.current);
+    };
+  }, [SITE_PAGES, location.pathname, updateTabs]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      clearTimeout(timeOutRef.current);
+      clearTimeout(transitionTimeOutRef.current);
+      clearTimeout(hoverTimeoutRef.current);
+      clearTimeout(hoverOffTimeoutRef.current);
+    };
+  }, []);
+
+  // Hover handlers for brand wrapper
+  var handleBrandHoverEnter = function handleBrandHoverEnter() {
+    console.log('handleBrandHoverEnter', isMobile, preventHomeRedirect);
+
+    // Skip hover functionality on mobile devices to avoid conflicts
+    if (isMobile) return;
+
+    // Clear any existing hover-off timeout
+    if (hoverOffTimeoutRef.current) {
+      clearTimeout(hoverOffTimeoutRef.current);
+      hoverOffTimeoutRef.current = null;
+    }
+
+    // Set hover timeout with delay to prevent accidental triggers
+    hoverTimeoutRef.current = setTimeout(function () {
+      if (!preventHomeRedirect && !isMobile) {
+        setIsHoveringBrand(true);
+        setShowMainMenu(true);
+      }
+    }, 300); // 300ms delay before showing menu
+  };
+  var handleBrandHoverLeave = function handleBrandHoverLeave() {
+    // Skip hover functionality on mobile devices
+    if (isMobile) return;
+
+    // Clear any existing hover timeout
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+
+    // Set hover-off timeout with delay to prevent flickering
+    hoverOffTimeoutRef.current = setTimeout(function () {
+      setIsHoveringBrand(false);
+      setShowMainMenu(false);
+    }, 150); // 150ms delay before hiding menu
+  };
+  var handleMenuHoverEnter = function handleMenuHoverEnter() {
+    // Skip hover functionality on mobile devices
+    if (isMobile) return;
+
+    // Clear hover-off timeout when user hovers over menu
+    if (hoverOffTimeoutRef.current) {
+      clearTimeout(hoverOffTimeoutRef.current);
+      hoverOffTimeoutRef.current = null;
+    }
+  };
+  var handleMenuHoverLeave = function handleMenuHoverLeave() {
+    // Skip hover functionality on mobile devices
+    if (isMobile) return;
+
+    // Start hide timeout when leaving menu
+    hoverOffTimeoutRef.current = setTimeout(function () {
+      setIsHoveringBrand(false);
+      setShowMainMenu(false);
+    }, 150);
+  };
+  var handleDragStart = function handleDragStart() {
+    var superTabsWrapperElem = superTabsWrapperElemRef.current;
+    if (superTabsWrapperElem) superTabsWrapperElem.classList.add('dragging-in-progress');
+    var tabsWithChildWrapperElem = document.querySelector('.tab-with-child-wrapper');
+    if (tabsWithChildWrapperElem) tabsWithChildWrapperElem.classList.add('dragging-in-progress');
+  };
+  var handleDragEnd = function handleDragEnd(res) {
+    var destination = res.destination,
+      source = res.source;
+    draggingTimeOutRef.current = setTimeout(function () {
+      var superTabsWrapperElem = superTabsWrapperElemRef.current;
+      if (superTabsWrapperElem) superTabsWrapperElem.classList.remove('dragging-in-progress');
+    }, _Constants.transitionDuration);
+    var tabsWithChildWrapperElem = document.querySelector('.tab-with-child-wrapper');
+    if (tabsWithChildWrapperElem) tabsWithChildWrapperElem.classList.remove('dragging-in-progress');
+    if (!destination) return;
+    if (destination.index === source.index) return;
+    reorderTabs({
+      tab: tabs[source.index],
+      order: destination.index + 1
+    });
+    updateTabs(function (prev) {
+      var updatedTabs = (0, _Utils.reorder)(prev, source.index, destination.index);
+      return updatedTabs;
+    });
+  };
+  var handleSubTabDragStart = function handleSubTabDragStart() {
+    var subTabsWrapperElem = document.querySelector('.sub-tabs-wrapper.expanded');
+    if (subTabsWrapperElem) subTabsWrapperElem.classList.add('dragging-in-progress');
+  };
+  var handleSubTabDragEnd = function handleSubTabDragEnd(res, parentId) {
+    draggingTimeOutRef.current = setTimeout(function () {
+      var subTabsWrapperElem = document.querySelector('.sub-tabs-wrapper.expanded');
+      if (subTabsWrapperElem) subTabsWrapperElem.classList.remove('dragging-in-progress');
+    }, _Constants.transitionDuration);
+    var destination = res.destination,
+      source = res.source;
+    if (!destination) return;
+    if (destination.index === source.index) return;
+    var parentIndex = tabs.findIndex(function (tab) {
+      return tab.id === parentId;
+    });
+    reorderTabs({
+      tab: tabs[parentIndex].subTabs.filter(function (t) {
+        return t.order !== 0;
+      })[source.index],
+      order: destination.index + 1
+    });
+    updateTabs(function (prev) {
+      var parentIndex = prev.findIndex(function (tab) {
+        return tab.id === activeTab.id;
+      });
+      var updatedTabs = (0, _Utils.reorderSubTabs)(prev[parentIndex].subTabs, source.index, destination.index);
+      prev[parentIndex].subTabs = updatedTabs;
+      return _toConsumableArray(prev);
+    });
+  };
+  var handleTabClose = function handleTabClose() {
+    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      tab = _ref4.tab,
+      tabIndex = _ref4.tabIndex,
+      isSubTab = _ref4.isSubTab,
+      parentIndex = _ref4.parentIndex;
+    closeTab({
+      tab: tab,
+      isSubTab: isSubTab
+    });
+    updateSubTabChange(null);
+    var appId = !isSubTab ? tab.id : tabs[parentIndex].id;
+    emitter.emit('superTabClose', {
+      appId: appId,
+      tab: tab,
+      isSubTab: isSubTab
+    });
+
+    // const id = !isSubTab ? tab.id : activeTab.id;
+    if (isSubTab ? tabs[parentIndex].subTabs.length <= 2 : tab.id === expandedTabID) {
+      updateExpandedID(null);
+    }
+
+    // if (lastOpenedSubTabs.hasOwnProperty(appId)) {
+    //     setLastOpenedSubTabs((prev) => {
+    //         const updated = { ...prev };
+    //         if (lastOpenedSubTabs[appId]?.id === tab.id) {
+    //             updated[appId] = null;
+    //         }
+    //         return updated;
+    //     });
+    // }
+
+    if (!isSubTab) {
+      if (activeSubTab.url && (0, _Utils.isChildPath)(tab.url, activeSubTab.url)) {
+        updateActiveSubTab({});
+      }
+    } else {
+      setSubTabWrapperWidth(function (prev) {
+        var updated = _objectSpread({}, prev);
+        delete updated[currentEntityId + '_' + appId];
+        return updated;
+      });
+    }
+  };
+  var toggleSubTabs = function toggleSubTabs(tab, subTabs) {
+    clearTimeout(timeOutRef.current);
+    var id = tab.id;
+    var isTabExpanded = expandedTabID === id;
+    if (isTabExpanded) {
+      setIsSubTabCollapsing(true);
+      transitionTimeOutRef.current = setTimeout(function () {
+        if (superTabsWrapperElemRef.current) superTabsWrapperElemRef.current.style.setProperty('--transition-duration-extended', "".concat(_Constants.transitionDuration, "ms"));
+        setIsSubTabCollapsing(false);
+      }, 1000);
+      setTimeout(function () {
+        resetMaxWidth(null);
+      }, 200);
+    } else {
+      if (superTabsWrapperElemRef.current) superTabsWrapperElemRef.current.style.setProperty('--transition-duration-extended', "".concat(_Constants.transitionDurationExtended, "ms"));
+      // expandedTabIDRef.current = id;
+      updateMaxWidth();
+      // let parentTabsWidth = HomeTabWidth;
+      // document.querySelectorAll('.parent-super-tab').forEach((elem) => {
+      //     parentTabsWidth += (elem.offsetWidth + MainTabGap);
+      // });
+      // console.log('parentTabsWidth', parentTabsWidth);
+    }
+    if (isTabExpanded) {
+      // document.querySelectorAll('.sub-tabs-wrapper.expanded .sub-tab-group .sub-tab:not(.active, .show)').forEach((elem) => {
+      document.querySelectorAll(".tab-".concat(id, ".sub-tabs-wrapper .sub-tab-group .sub-tab:not(.active, .show)")).forEach(function (elem) {
+        elem.classList.add('hide-sub-tab');
+      });
+      timeOutRef.current = setTimeout(function () {
+        var _superTabsWrapperElem2;
+        // document.querySelectorAll('.sub-tabs-wrapper.expanded .sub-tab-group .sub-tab:not(.active, .show)').forEach((elem) => {
+        document.querySelectorAll(".tab-".concat(id, ".sub-tabs-wrapper .sub-tab-group .sub-tab:not(.active, .show)")).forEach(function (elem) {
+          elem.classList.remove('hide-sub-tab');
+        });
+        (_superTabsWrapperElem2 = superTabsWrapperElemRef.current) === null || _superTabsWrapperElem2 === void 0 || _superTabsWrapperElem2.classList.remove('nested-tabs-visible');
+        var storedExpandedIds = JSON.parse(sessionStorage.getItem("".concat(SITE_PREFIX, "expandedIds"))) || [];
+        if (storedExpandedIds.some(function (_ref5) {
+          var id = _ref5.id;
+          return id === tab.id;
+        })) {
+          sessionStorage.setItem("".concat(SITE_PREFIX, "expandedIds"), JSON.stringify(storedExpandedIds.filter(function (_ref6) {
+            var id = _ref6.id;
+            return id !== tab.id;
+          })));
+        }
+        updateExpandedID(null);
+      }, 200);
+    } else {
+      var _superTabsWrapperElem3;
+      // let subTabsWidth = 0;
+      // tab?.subTabs?.forEach(subTab => {
+      //     // if (openedSubTab?.id !== subTab.id) {
+      //     //     const title = (subTab.title || subTab.name || (subTab?.firstName ? `${subTab.firstName} ${subTab.lastName || ''}` : 'Untitled')).trim();
+      //     //     subTabsWidth += calculateWidth(title, subTab.showAvatar);
+      //     // }
+      //     const title = (subTab.title || subTab.name || (subTab?.firstName ? `${subTab.firstName} ${subTab.lastName || ''}` : 'Untitled')).trim();
+      //     subTabsWidth += calculateWidth({ text: title, hasAvatar: subTab.showAvatar, addMargin: true });
+      // })
+      // const transitionDuration = subTabsWidth > 0 ? calculateTransitionDuration(Math.ceil(subTabsWidth)) : transitionDurationExtended;
+      // superTabsWrapperElemRef.current?.style.setProperty('--transition-duration-extended', `${transitionDuration}ms`);
+      // console.log('transitionDuration', subTabsWidth, Math.ceil(subTabsWidth), transitionDuration);
+
+      (_superTabsWrapperElem3 = superTabsWrapperElemRef.current) === null || _superTabsWrapperElem3 === void 0 || _superTabsWrapperElem3.classList.add('nested-tabs-visible');
+      expandedTabIDRef.current = id;
+      updateExpandedID(id);
+      updateMaxWidth();
+    }
+  };
+  var closeSubTabStack = function closeSubTabStack() {
+    var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : expandedTabID;
+    clearTimeout(timeOutRef.current);
+    setClosingTabID(id);
+    if (expandingTabIdRef.current === id) {
+      var subTabOpenElem = document.querySelector(".tab-".concat(id, ".sub-tabs-wrapper .sub-tab-group .sub-tab.show"));
+      if (subTabOpenElem) {
+        subTabOpenElem.style.width = '0px';
+      }
+    }
+    var subTabElems = document.querySelectorAll(".tab-".concat(id, ".sub-tabs-wrapper .sub-tab-group .sub-tab"));
+    subTabElems === null || subTabElems === void 0 || subTabElems.forEach(function (elem) {
+      setTimeout(function () {
+        elem.classList.add('hide-sub-tab');
+      }, 0);
+    });
+    if (!expandingTabIdRef.current) {
+      subTabElems === null || subTabElems === void 0 || subTabElems.forEach(function (elem) {
+        elem.style.width = '0px';
+        elem.style.marginLeft = '0px';
+      });
+    }
+    updateExpandedID(null);
+    timeOutRef.current = setTimeout(function () {
+      setClosingTabID(null);
+      if (!expandingTabIdRef.current) {
+        var _superTabsWrapperElem4;
+        (_superTabsWrapperElem4 = superTabsWrapperElemRef.current) === null || _superTabsWrapperElem4 === void 0 || _superTabsWrapperElem4.classList.remove('nested-tabs-visible');
+      }
+      subTabElems === null || subTabElems === void 0 || subTabElems.forEach(function (elem) {
+        elem.classList.remove('hide-sub-tab');
+      });
+      if (expandingTabIdRef.current) expandingTabIdRef.current = null;
+    }, _Constants.transitionDurationExtended);
+  };
+  var handleTabClick = function handleTabClick() {
+    var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      tab = _ref7.tab,
+      parentId = _ref7.parentId,
+      isSubTab = _ref7.isSubTab,
+      _ref7$ignoreActiveTab = _ref7.ignoreActiveTabUpdate,
+      ignoreActiveTabUpdate = _ref7$ignoreActiveTab === void 0 ? false : _ref7$ignoreActiveTab,
+      _ref7$sort = _ref7.sort,
+      sort = _ref7$sort === void 0 ? false : _ref7$sort;
+    if (location.pathname === tab.url.split('?')[0]) return;
+    updateCurrentTab({
+      tab: tab,
+      ignoreActiveTabUpdate: ignoreActiveTabUpdate,
+      parentId: parentId,
+      isSubTab: isSubTab,
+      sort: sort
+    });
+    setTimeout(function () {
+      // expandedTabIDRef.current = null;
+      updateMaxWidth();
+    }, 0);
+    if (isSubTab) {
+      // lastOpenedUrl.current[parentId] = tab;
+      // updateActiveSubTab(tab);
+      // setLastOpenedSubTabs((prev) => {
+      //     const updated = { ...prev };
+      //     updated[parentId] = isSubTab ? tab : null;
+      //     return updated;
+      // });
+      if (subTabWrapperWidth[currentEntityId + '_' + parentId]) {
+        setSubTabWrapperWidth(function (prev) {
+          var updated = _objectSpread({}, prev);
+          delete updated[currentEntityId + '_' + parentId];
+          return updated;
+        });
+      }
+    } else {
+      var storedExpandedIds = JSON.parse(sessionStorage.getItem("".concat(SITE_PREFIX, "expandedIds"))) || [];
+      var isTabExpanded = storedExpandedIds.find(function (_ref8) {
+        var id = _ref8.id;
+        return id === tab.id;
+      });
+      if (expandedTabID && tab.id !== expandedTabID) {
+        closeSubTabStack();
+      } else if (superTabsWrapperElemRef.current) {
+        // superTabsWrapperElemRef.current.style.setProperty('--transition-duration-extended', `${transitionDuration}ms`);
+        superTabsWrapperElemRef.current.style.setProperty('--transition-duration-extended', "".concat(isTabExpanded ? _Constants.transitionDurationExtended : _Constants.transitionDuration, "ms"));
+        // if (activeTab?.id && activeTab.id !== tab.id) closeSubTabStack(activeTab.id);
+      }
+      if (isTabExpanded) {
+        expandingTabIdRef.current = tab.id;
+        sessionStorage.setItem("".concat(SITE_PREFIX, "expandedIds"), JSON.stringify(storedExpandedIds.map(function (item) {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            active: item.id === tab.id
+          });
+        })));
+        requestAnimationFrame(function () {
+          var _superTabsWrapperElem5;
+          updateExpandedID(tab.id);
+          (_superTabsWrapperElem5 = superTabsWrapperElemRef.current) === null || _superTabsWrapperElem5 === void 0 || (_superTabsWrapperElem5 = _superTabsWrapperElem5.classList) === null || _superTabsWrapperElem5 === void 0 || _superTabsWrapperElem5.add('nested-tabs-visible');
+          updateMaxWidth();
+        });
+      }
+      var subTabsWrapperElem = document.querySelectorAll('.sub-tabs-wrapper');
+      subTabsWrapperElem.forEach(function (elem) {
+        elem.style.transition = "width ease-out ".concat(expandedTabID ? _Constants.transitionDurationExtended : _Constants.transitionDuration, "ms");
+      });
+      setTimeout(function () {
+        subTabsWrapperElem.forEach(function (elem) {
+          elem.style.removeProperty('transition');
+        });
+      }, (expandedTabID ? _Constants.transitionDurationExtended : _Constants.transitionDuration) + 50);
+
+      // if (ignoreActiveTabUpdate) return;
+      // lastOpenedUrl.current[tab.id] = tab;
+      // updateActiveTab(tab);
+      // if (activeSubTab.url && isChildPath(tab.url, activeSubTab.url)) {
+      //     updateActiveSubTab({});
+      // }
+      // updateActiveSubTab({});
+      // setLastOpenedSubTabs((prev) => {
+      //     const updated = { ...prev };
+      //     updated[tab.id] = null;
+      //     return updated;
+      // });
+    }
+  };
+
+  // useEffect(() => {
+  //     if (activeTab) {
+  //         setLastOpenedSubTabs((prev) => {
+  //             const updated = { ...prev };
+  //             if (activeSubTab?.url && activeTab?.url && isChildPath(activeTab?.url, activeSubTab?.url)) {
+  //                 updated[activeTab.id] = activeSubTab;
+  //             }
+  //             return updated;
+  //         });
+  //     }
+  // }, [activeTab, activeSubTab]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "super-tabs-wrapper",
+    ref: superTabsWrapperElemRef
+  }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
+    to: homeUrl,
+    className: "home-tab"
+    // activeClassName="active"
+    // title="Home"
+    ,
+    onMouseEnter: handleBrandHoverEnter,
+    onMouseLeave: handleBrandHoverLeave,
+    onClick: function onClick(e) {
+      if (preventHomeRedirect) {
+        e.preventDefault();
+        setShowMainMenu(true);
+        return;
+      }
+      // if (expandedTabID || activeTab?.id) {
+      if (expandedTabID) {
+        // updateExpandedID(null);
+        // closeSubTabStack(expandedTabID ?? activeTab.id);
+        closeSubTabStack(expandedTabID);
+      }
+      updateActiveTab({});
+      updateActiveSubTab({});
+      updateCurrentTab({
+        tab: (0, _Utils.getHomeTab)(homeUrl),
+        isHomeTab: true
+      });
+    },
+    exact: true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "brand-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "brand-logo ".concat((0, _Utils.isDev)() ? 'dev' : '')
+  }))), showMainMenu && /*#__PURE__*/_react["default"].createElement(_ClickOutsideListener["default"], {
+    onOutsideClick: function onOutsideClick() {
+      // Only close via click outside if not triggered by hover
+      if (!isHoveringBrand) {
+        setShowMainMenu(false);
+      }
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "app-pages-wrapper",
+    onMouseEnter: handleMenuHoverEnter,
+    onMouseLeave: handleMenuHoverLeave
+  }, SITE_PAGES.map(function (page, index) {
+    var _page$isExternal;
+    if (isMobile && !(page !== null && page !== void 0 && page.showInMobile) || !hasPrivilege(page.privilege)) {
+      return null;
+    }
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: "module",
+      onClick: function onClick() {
+        return setShowMainMenu(false);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_SuperLink["default"], {
+      tab: page,
+      isSubTab: false,
+      isExternal: (_page$isExternal = page.isExternal) !== null && _page$isExternal !== void 0 ? _page$isExternal : undefined
+    }, page.title));
+  }))), /*#__PURE__*/_react["default"].createElement(_superDnd.DragDropContext, {
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/_react["default"].createElement(_superDnd.Droppable, {
+    droppableId: "HEADER_TABS",
+    direction: "horizontal"
+  }, function (provided) {
+    return /*#__PURE__*/_react["default"].createElement("div", _extends({
+      className: "main-tabs"
+    }, provided.droppableProps, {
+      ref: provided.innerRef
+    }), tabs.map(function (tab, index) {
+      var _tab$subTabs, _tab$subTabs2, _tab$subTabs3, _tab$subTabs4;
+      var url = tab.url;
+      var pathname = window.location.pathname;
+      var formattedPathname = getActiveParentTabName(pathname, homeUrl);
+      var tabUrl = getActiveParentTabName(tab.url, homeUrl);
+      if (tabUrl === formattedPathname) {
+        url = pathname;
+      }
+      var hasAccessToTab = hasPrivilege(tab.privilege);
+      var showNotificationDot = tab.showNotificationDot || false;
+      // const hasSubTabs = tab?.subTabs?.length > 0;
+      var containsSubTabs = tab === null || tab === void 0 ? void 0 : tab.containsSubTabs;
+      var showSubTabs = expandedTabID === tab.id;
+      var isTabClosing = closingTabID === tab.id;
+      var isActive = tabUrl === formattedPathname;
+
+      // const isActiveWithSubTabsExpanded = isActive && containsSubTabs && showSubTabs;
+      // const openedSubTab = lastOpenedSubTabs[tab.id];
+      // const isSubTabOpened = tab?.subTabs?.some(t => t.id === openedSubTab?.id)
+      // const subTabsLength = (isSubTabOpened ? tab?.subTabs?.length - 1 : tab?.subTabs?.length) || 0;
+      var hasAddBtnPrivilege = typeof tab.showAddButton === 'boolean' ? tab.showAddButton : _typeof(tab.showAddButton) === 'object' && Array.isArray(tab.showAddButton) ? hasPrivilege(tab.showAddButton) : false;
+      var showAddButton = hasAddBtnPrivilege && !isMobileView ? (tab === null || tab === void 0 || (_tab$subTabs = tab.subTabs) === null || _tab$subTabs === void 0 ? void 0 : _tab$subTabs.length) <= 1 : false;
+      var showChevron = (tab === null || tab === void 0 || (_tab$subTabs2 = tab.subTabs) === null || _tab$subTabs2 === void 0 ? void 0 : _tab$subTabs2.length) > 1;
+      var widthLessThan520 = window.innerWidth < 520;
+      var isMobileScreen = window.innerWidth < 640;
+      if (widthLessThan520 && !tab.lastOpened && !tab.isFixed) return null;
+      var shrinkedTab = tab.id === expandedTabID ? false : expandedTabID;
+      var additionalWidth = 0; // tab.url === pathname ? 24 : 0 + hiddenExternalToolbars[tab.id] ? 24 : 0;
+      var width = (0, _Utils.getTextWidth)(tab.title, _Constants.fontStyle) + 42 + additionalWidth;
+      var subTabWithOpenOrderOne = (tab === null || tab === void 0 || (_tab$subTabs3 = tab.subTabs) === null || _tab$subTabs3 === void 0 ? void 0 : _tab$subTabs3.length) >= 1 && tab.subTabs.find(function (t) {
+        return t.open_order === 1;
+      });
+      var isSubTabActive = tab.url !== pathname && isActive;
+      var hasCloseButton = false; // isSubTabActive;  // TODO: This will be used in next release (pending for design update)
+      var hasToolbarButton = tab.url !== pathname && hiddenExternalToolbars[subTabWithOpenOrderOne === null || subTabWithOpenOrderOne === void 0 ? void 0 : subTabWithOpenOrderOne.id];
+      var subTabWithOpenOrderOneWidth = subTabWithOpenOrderOne && (0, _Utils.calculateWidth)({
+        text: (0, _Utils.getTitle)(subTabWithOpenOrderOne),
+        hasAvatar: subTabWithOpenOrderOne.showAvatar,
+        hasCloseButton: hasCloseButton,
+        hasToolbarButton: hasToolbarButton
+      });
+      var isExpandedTab = expandedTabID === tab.id;
+      var subTabsWidth = isDefaultExpanded && isExpandedTab ? tab === null || tab === void 0 || (_tab$subTabs4 = tab.subTabs) === null || _tab$subTabs4 === void 0 ? void 0 : _tab$subTabs4.map(function (subTab) {
+        var title = (0, _Utils.getTitle)(subTab);
+        return (0, _Utils.calculateWidth)({
+          text: title,
+          hasAvatar: subTab.showAvatar,
+          hasCloseButton: hasCloseButton,
+          hasToolbarButton: hasToolbarButton,
+          addMargin: true
+        });
+      }).reduce(function (acc, width) {
+        return acc + width;
+      }, 0) : subTabWithOpenOrderOneWidth || 0;
+      var getItemStyle = function getItemStyle(draggableStyle) {
+        return _objectSpread({
+          maxWidth: expandedTabID ? "".concat(tab.width + additionalWidth || width, "px") : "".concat(width, "px")
+        }, draggableStyle);
+      };
+      var _filterSubTabs = filterSubTabs(tab.subTabs),
+        subTabsInNavbar = _filterSubTabs.subTabsInNavbar;
+      var getStylesForSubTabsWrapper = function getStylesForSubTabsWrapper(tab, isActive) {
+        if (isActive) {
+          if (showSubTabs || isSubTabCollapsing || !subTabsWidth) {
+            return {
+              width: '100%'
+            };
+          } else if (subTabWrapperWidth[currentEntityId + '_' + tab.id] && isSubTabActive) {
+            return {
+              width: subTabWrapperWidth[currentEntityId + '_' + tab.id] + (hasToolbarButton ? _Constants.ToolbarButtonWidth : 0)
+            };
+          } else {
+            return {
+              width: "".concat(subTabsWidth + (showChevron || showAddButton ? 42 : 5), "px")
+            };
+          }
+        }
+        return {
+          width: '0px'
+        };
+      };
+      return containsSubTabs ? /*#__PURE__*/_react["default"].createElement(_superDnd.Draggable, {
+        draggableId: String(index),
+        index: index,
+        key: index,
+        isDragDisabled: isMobileScreen
+      }, function (provided, snapshot) {
+        return /*#__PURE__*/_react["default"].createElement("div", _extends({}, provided.draggableProps, provided.dragHandleProps, {
+          ref: provided.innerRef
+          // (snapshot.isDragging ? " dragging" : "") +
+          ,
+          className: 'tab-with-child-wrapper parent-super-tab' + " tab-".concat(tab.id) + (isActive ? ' active' : '') + (closingTabID === tab.id ? ' stack-closing' : '') + (shrinkedTab ? ' shrinked-parent-tab' : '') + (snapshot.isDragging ? ' dragging' : '')
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: 'child-tabs-wrapper tab-' + tab.id + (showSubTabs ? ' expanded' : '')
+          // (isActive ? ' active' : '')
+        }, /*#__PURE__*/_react["default"].createElement(_reactHoverText["default"], {
+          content: tab.title,
+          delay: 500,
+          followCursor: true,
+          placement: "bottom",
+          stylingOptions: tooltipStyles
+        }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
+          to: tab.url,
+          className: "tab" + " tab-" + tab.id + ((expandedTabID ? tab.width : maxWidth) && (0, _Utils.compareDecimals)(expandedTabID ? tab.width || width : maxWidth, width) === -1 ? ' fade-at-end' : '') + (!hasAccessToTab ? ' disabled-tab' : '') + (containsSubTabs ? ' has-child' : '') + (shrinkedTab ? ' shrinked-tab' : '')
+          // (showSubTabs ? ' expanded' : '')
+          ,
+          style: {
+            maxWidth: expandedTabID ? "".concat((tab.width + additionalWidth || width) - 10, "px") : "".concat(width, "px")
+          }
+          // title={tab.title}
+          ,
+          onClick: function onClick(e) {
+            var ignoreActiveTabUpdate = false;
+            if (containsSubTabs && !isActive) {
+              var _lastOpenedUrl$curren;
+              var lastOpenedTab = (_lastOpenedUrl$curren = lastOpenedUrl.current) === null || _lastOpenedUrl$curren === void 0 ? void 0 : _lastOpenedUrl$curren[currentEntityId + '_' + tab.id];
+              updateActiveTab(tab);
+              ignoreActiveTabUpdate = true;
+              var lastOpenedTabUrl = lastOpenedTab === null || lastOpenedTab === void 0 ? void 0 : lastOpenedTab.url;
+              if (lastOpenedTabUrl && tabModePreference.includes(lastOpenedTab === null || lastOpenedTab === void 0 ? void 0 : lastOpenedTab.tabId)) {
+                lastOpenedTabUrl += "?edit=true";
+              }
+              if (lastOpenedTab !== null && lastOpenedTab !== void 0 && lastOpenedTab.url && (lastOpenedTab === null || lastOpenedTab === void 0 ? void 0 : lastOpenedTab.url) !== tab.url) {
+                e.preventDefault();
+                if ((lastOpenedTab === null || lastOpenedTab === void 0 ? void 0 : lastOpenedTab.url) !== tab.url) {
+                  updateActiveSubTab(lastOpenedTab || {});
+                  // setLastOpenedSubTabs((prev) => {
+                  //     const updated = { ...prev };
+                  //     updated[tab.id] = lastOpenedTab;
+                  //     return updated;
+                  // });
+                }
+                history.push(lastOpenedTabUrl || tab.url);
+                // } else {
+                // setTimeout(() => {
+                //     toggleSubTabs(tab);
+                // }, 0);
+              }
+            }
+            handleTabClick({
+              tab: tab,
+              parentId: tab.id,
+              ignoreActiveTabUpdate: ignoreActiveTabUpdate
+            });
+          },
+          exact: tab.fixed
+        }, /*#__PURE__*/_react["default"].createElement(TabContentWrapper, {
+          tab: tab,
+          index: index,
+          isActive: tab.url === pathname,
+          handleTabClose: handleTabClose,
+          isSubTab: false,
+          containsSubTabs: containsSubTabs,
+          SITE_PREFIX: SITE_PREFIX,
+          Suffix: (Suffix === null || Suffix === void 0 ? void 0 : Suffix[tab === null || tab === void 0 ? void 0 : tab.id]) || null
+        })))), containsSubTabs && /*#__PURE__*/_react["default"].createElement("div", {
+          className: "sub-tabs-wrapper tab-".concat(tab.id, " ").concat(showSubTabs ? 'expanded' : ''),
+          style: getStylesForSubTabsWrapper(tab, isActive)
+        }, /*#__PURE__*/_react["default"].createElement(_superDnd.DragDropContext, {
+          onDragStart: handleSubTabDragStart,
+          onDragEnd: function onDragEnd(res) {
+            return handleSubTabDragEnd(res, tab.id);
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_superDnd.Droppable, {
+          droppableId: "HEADER_SUB_TABS_".concat(tab.id),
+          direction: "horizontal"
+        }, function (subprovided) {
+          return /*#__PURE__*/_react["default"].createElement("div", _extends({
+            className: "sub-tab-group",
+            ref: subprovided.innerRef
+          }, subprovided.droppableProps), subTabsInNavbar.map(function (subTab, subIndex) {
+            return /*#__PURE__*/_react["default"].createElement(SubTab, {
+              activeTab: activeTab,
+              closingTabID: closingTabID,
+              expandedTabID: expandedTabID,
+              maxWidth: maxWidth,
+              showSubTabs: showSubTabs,
+              subIndex: subIndex,
+              hasSingleSubTab: tab.subTabs.length === 1,
+              subTab: subTab,
+              tab: tab,
+              tabUrl: tabUrl,
+              handleTabClick: handleTabClick,
+              handleTabClose: handleTabClose,
+              SITE_PREFIX: SITE_PREFIX,
+              index: index,
+              key: subTab.id
+            });
+          }), subprovided.placeholder);
+        })), (showChevron || showAddButton) && /*#__PURE__*/_react["default"].createElement(_TabStack["default"], {
+          handleTabClick: handleTabClick,
+          handleTabClose: handleTabClose,
+          index: index,
+          isActive: isActive,
+          isTabClosing: isTabClosing,
+          showAddButton: showAddButton,
+          showChevron: showChevron,
+          showSubTabs: showSubTabs,
+          subTabsInList: tab.subTabs,
+          tab: tab,
+          toggleSubTabs: toggleSubTabs,
+          addButtonCallBackRefs: addButtonCallBackRefs,
+          SITE_PREFIX: SITE_PREFIX,
+          isMobileView: isMobileView
+        })));
+      }) : /*#__PURE__*/_react["default"].createElement(_superDnd.Draggable, {
+        key: index,
+        draggableId: String(index),
+        index: index,
+        isDragDisabled: isMobileScreen
+      }, function (provided, snapshot) {
+        return /*#__PURE__*/_react["default"].createElement(_reactHoverText["default"], {
+          content: tab.title,
+          delay: 500,
+          followCursor: true,
+          placement: "bottom",
+          stylingOptions: tooltipStyles
+        }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, _extends({}, provided.draggableProps, provided.dragHandleProps, {
+          ref: provided.innerRef,
+          to: url,
+          onClick: function onClick() {
+            handleTabClick({
+              tab: tab
+            });
+          },
+          className: "tab parent-super-tab" + (snapshot.isDragging ? " dragging" : "") + (maxWidth && (0, _Utils.compareDecimals)(maxWidth, width) === -1 ? ' fade-at-end' : '') + (expandedTabID ? ' shrinked-tab' : '') + (!hasAccessToTab ? " disabled-tab" : ""),
+          style: getItemStyle(provided.draggableProps.style),
+          exact: true
+          // exact={tab.exact}
+          // title={tab.title}
+        }), /*#__PURE__*/_react["default"].createElement(TabContentWrapper, {
+          tab: tab,
+          index: index,
+          isActive: tab.url === pathname,
+          showNotificationDot: showNotificationDot,
+          handleTabClose: handleTabClose,
+          isSubTab: false,
+          SITE_PREFIX: SITE_PREFIX,
+          Suffix: (Suffix === null || Suffix === void 0 ? void 0 : Suffix[tab === null || tab === void 0 ? void 0 : tab.id]) || null
+        })));
+      });
+    }), provided.placeholder);
+  })));
+};
+var TabContentWrapper = function TabContentWrapper(_ref9) {
+  var tab = _ref9.tab,
+    index = _ref9.index,
+    tabTitle = _ref9.tabTitle,
+    _ref9$isActive = _ref9.isActive,
+    isActive = _ref9$isActive === void 0 ? false : _ref9$isActive,
+    handleTabClose = _ref9.handleTabClose,
+    isSubTab = _ref9.isSubTab,
+    _ref9$Suffix = _ref9.Suffix,
+    Suffix = _ref9$Suffix === void 0 ? null : _ref9$Suffix,
+    parentIndex = _ref9.parentIndex,
+    containsSubTabs = _ref9.containsSubTabs,
+    setShowTooltip = _ref9.setShowTooltip;
+  // const isFixed = tab.isFixed || false;
+  var showAvatar = tab.showAvatar || false;
+  var showNotificationDot = tab.showNotificationDot || false;
+  var title = tabTitle !== null && tabTitle !== void 0 ? tabTitle : (0, _Utils.getTitle)(tab);
+  var _useTabContext2 = (0, _TabContext.useTabContext)(),
+    hiddenExternalToolbars = _useTabContext2.hiddenExternalToolbars,
+    showExternalToolbar = _useTabContext2.showExternalToolbar;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tab-content-wrapper"
+  }, !isSubTab && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "single-tab ".concat(showNotificationDot ? 'show-notification-dot' : '')
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tab-title-wrapper"
+  }, showAvatar && /*#__PURE__*/_react["default"].createElement(_superAvatar["default"], {
+    firstName: tab.firstName,
+    lastName: tab.lastName,
+    imgSrc: tab.imgSrc || tab.img_url,
+    width: 20,
+    height: 20,
+    fontSize: 8,
+    borderRadius: 12
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tab-title"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, title))), isActive && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tab-close-btn-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    className: "tab-close-btn",
+    title: "Close tab",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleTabClose({
+        tab: tab,
+        index: index,
+        isSubTab: isSubTab,
+        parentIndex: parentIndex
+      });
+    }
+  })), isActive && false && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "active-sub-tab-btn-wrapper"
+  }, hiddenExternalToolbars[tab.id] && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tab-hide-toolbar-btn-wrapper",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      showExternalToolbar(tab.id);
+      setShowTooltip(false);
+      setTimeout(function () {
+        setShowTooltip(true);
+      }, 100);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    className: "tab-hide-toolbar-btn",
+    title: "Show Toolbar"
+  })))), Suffix && isActive && window.innerWidth < 640 && /*#__PURE__*/_react["default"].createElement(Suffix, null), !isActive && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tab-close-btn-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    className: "tab-close-btn",
+    title: "Close tab",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleTabClose({
+        tab: tab,
+        index: index,
+        isSubTab: isSubTab,
+        parentIndex: parentIndex
+      });
+    }
+  })));
+};
+var SubTab = exports.SubTab = function SubTab(_ref0) {
+  var _subTab$url;
+  var activeTab = _ref0.activeTab,
+    closingTabID = _ref0.closingTabID,
+    expandedTabID = _ref0.expandedTabID,
+    maxWidth = _ref0.maxWidth,
+    showSubTabs = _ref0.showSubTabs,
+    subIndex = _ref0.subIndex,
+    subTab = _ref0.subTab,
+    tab = _ref0.tab,
+    tabUrl = _ref0.tabUrl,
+    handleTabClick = _ref0.handleTabClick,
+    handleTabClose = _ref0.handleTabClose,
+    SITE_PREFIX = _ref0.SITE_PREFIX,
+    index = _ref0.index,
+    hasSingleSubTab = _ref0.hasSingleSubTab;
+  // const { closingUnexpandedSubTab, openingUnexpandedSubTab, subTabChange } = useTabContext();
+  var _useState9 = (0, _react.useState)(true),
+    _useState0 = _slicedToArray(_useState9, 2),
+    showTooltip = _useState0[0],
+    setShowTooltip = _useState0[1];
+  var _useTabContext3 = (0, _TabContext.useTabContext)(),
+    hiddenExternalToolbars = _useTabContext3.hiddenExternalToolbars,
+    tabModePreference = _useTabContext3.tabModePreference;
+  var subTabUrl = (_subTab$url = subTab.url) !== null && _subTab$url !== void 0 ? _subTab$url : "/".concat(tabUrl, "/f-").concat(subTab.id);
+  var subTabUrlWithoutSearchParam = subTabUrl.split('?')[0];
+  var pathname = window.location.pathname;
+  var isSubTabActive = subTabUrlWithoutSearchParam === pathname;
+  var title = (0, _Utils.getTitle)(subTab);
+  var hasToolbarButton = isSubTabActive && hiddenExternalToolbars[subTab.id];
+  var hasCloseButton = false; // isSubTabActive;  // TODO: This will be used in next release (pending for design update)
+  var width = (0, _Utils.calculateWidth)({
+    text: title,
+    hasAvatar: subTab.showAvatar,
+    addMargin: false,
+    hasToolbarButton: hasToolbarButton,
+    hasCloseButton: hasCloseButton
+  });
+  var additionalWidth = 0; // (hasToolbarButton ? ToolbarButtonWidth : 0) + (hasCloseButton ? CloseButtonWidth : 0);
+  var isEditMode = tabModePreference.includes(subTab.tabId);
+  if (isEditMode) {
+    subTabUrl += "?edit=true";
+  }
+
+  // const show = (subTab.id === openedSubTab?.id && (activeTab.id === tab.id || closingTabID === tab.id)) || (hasSingleSubTab && activeTab.id === tab.id);
+  // const isTabClosing = subTabChange?.oldTab?.id === subTab.id;
+  // const isTabOpening = subTabChange?.newTab?.id === subTab.id;
+  var show = subTab.open_order === 1 && (activeTab.id === tab.id || closingTabID === tab.id) || hasSingleSubTab && activeTab.id === tab.id;
+  var getItemStyle = function getItemStyle(isVisible, draggableStyle, width) {
+    // const duration = tab.id === 6 ? calculateTransitionDuration(Math.ceil(width)) : transitionDurationExtended;
+    // const transition = `transition: all ${duration}ms, opacity ${transitionDuration}ms ${duration}ms`;
+
+    return _objectSpread({
+      // calculateWidth({ text: title, hasAvatar: subTab.showAvatar, });
+      marginLeft: isVisible ? "".concat(_Constants.MarginLeft, "px") : '0px',
+      // maxWidth: maxWidth ? `${maxWidth}px` : `${width}px`,
+      width: isVisible ? "".concat(expandedTabID === tab.id || closingTabID === tab.id ? subTab.width + additionalWidth || width : width, "px") : '0px',
+      opacity: isVisible ? 1 : 0
+    }, draggableStyle);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_superDnd.Draggable, {
+    key: subIndex,
+    draggableId: String(subIndex),
+    isDragDisabled: !showSubTabs,
+    index: subIndex
+  }, function (subprovided, snapshot) {
+    return /*#__PURE__*/_react["default"].createElement(_reactHoverText["default"], {
+      content: title,
+      delay: 500,
+      followCursor: true,
+      show: showTooltip,
+      placement: "bottom",
+      stylingOptions: tooltipStyles
+    }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, _extends({}, subprovided.draggableProps, subprovided.dragHandleProps, {
+      ref: subprovided.innerRef,
+      to: subTabUrl,
+      id: "tab-".concat(tab.id, "-") + subTab.id.toString().replace('/', '-'),
+      className: "tab sub-tab" + (show ? ' show' : '') + (
+      // (isTabClosing ? ' slide-out' : '') +
+      // (isTabOpening ? ' fade-in' : '') +
+      expandedTabID && subTab.width && (0, _Utils.compareDecimals)(subTab.width, width) === -1 ? ' fade-at-end' : '') + (
+      // (closingUnexpandedSubTab || openingUnexpandedSubTab ? ' no-transition' : '') +
+      snapshot.isDragging ? ' dragging' : '') + (subTab.isFixed ? ' fixed' : ''),
+      style: getItemStyle(showSubTabs || show, subprovided.draggableProps.style, width)
+      // title={subTab.name}
+      ,
+      exact: false,
+      onClick: function onClick() {
+        return handleTabClick({
+          tab: subTab,
+          parentId: tab.id,
+          isSubTab: true
+        });
+      }
+      // key={subIndex}
+    }), /*#__PURE__*/_react["default"].createElement(TabContentWrapper, {
+      tab: subTab,
+      tabTitle: title,
+      isActive: isSubTabActive,
+      index: subIndex,
+      handleTabClose: handleTabClose,
+      isSubTab: true,
+      SITE_PREFIX: SITE_PREFIX,
+      parentIndex: index,
+      setShowTooltip: setShowTooltip
+    })));
+  });
+};
+var _default = exports["default"] = SuperTabs;