@bydata/react-supertabs 1.1.1 → 1.1.3

package/dist/SuperTabs.js

@@ -17,9 +17,9 @@ var _eventEmitter = _interopRequireDefault(require("./eventEmitter"));
 var _Utils = require("./Utils");
 var _Constants = require("./Constants");
 require("./SuperTabs.scss");
+var _jsxRuntime = require("react/jsx-runtime");
 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."); }
@@ -684,323 +684,344 @@ var SuperTabs = function SuperTabs(_ref) {
   //     }
   // }, [activeTab, activeSubTab]);
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("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
+    ref: superTabsWrapperElemRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_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
         });
-      }).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")
-            };
-          }
+      },
+      exact: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "brand-wrapper",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "brand-logo ".concat((0, _Utils.isDev)() ? 'dev' : '')
+        })
+      })
+    }), showMainMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutsideListener["default"], {
+      onOutsideClick: function onOutsideClick() {
+        // Only close via click outside if not triggered by hover
+        if (!isHoveringBrand) {
+          setShowMainMenu(false);
         }
-        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")
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "app-pages-wrapper",
+        onMouseEnter: handleMenuHoverEnter,
+        onMouseLeave: handleMenuHoverLeave,
+        children: SITE_PAGES.map(function (page, index) {
+          var _page$isExternal;
+          if (isMobile && !(page !== null && page !== void 0 && page.showInMobile) || !hasPrivilege(page.privilege)) {
+            return null;
           }
-          // 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";
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "module",
+            onClick: function onClick() {
+              return setShowMainMenu(false);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SuperLink["default"], {
+              tab: page,
+              isSubTab: false,
+              isExternal: (_page$isExternal = page.isExternal) !== null && _page$isExternal !== void 0 ? _page$isExternal : undefined,
+              children: page.title
+            })
+          }, index);
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_superDnd.DragDropContext, {
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_superDnd.Droppable, {
+        droppableId: "HEADER_TABS",
+        direction: "horizontal",
+        children: function children(provided) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+            className: "main-tabs"
+          }, provided.droppableProps), {}, {
+            ref: provided.innerRef,
+            children: [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;
               }
-              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;
-                  // });
+              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")
+                    };
+                  }
                 }
-                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);
-  })));
+                return {
+                  width: '0px'
+                };
+              };
+              return containsSubTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_superDnd.Draggable, {
+                draggableId: String(index),
+                index: index,
+                isDragDisabled: isMobileScreen,
+                children: function children(provided, snapshot) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread(_objectSpread({}, 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' : ''),
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      className: 'child-tabs-wrapper tab-' + tab.id + (showSubTabs ? ' expanded' : '')
+                      // (isActive ? ' active' : '')
+                      ,
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHoverText["default"], {
+                        content: tab.title,
+                        delay: 500,
+                        followCursor: true,
+                        placement: "bottom",
+                        stylingOptions: tooltipStyles,
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_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,
+                          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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__*/(0, _jsxRuntime.jsxs)("div", {
+                      className: "sub-tabs-wrapper tab-".concat(tab.id, " ").concat(showSubTabs ? 'expanded' : ''),
+                      style: getStylesForSubTabsWrapper(tab, isActive),
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_superDnd.DragDropContext, {
+                        onDragStart: handleSubTabDragStart,
+                        onDragEnd: function onDragEnd(res) {
+                          return handleSubTabDragEnd(res, tab.id);
+                        },
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_superDnd.Droppable, {
+                          droppableId: "HEADER_SUB_TABS_".concat(tab.id),
+                          direction: "horizontal",
+                          children: function children(subprovided) {
+                            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+                              className: "sub-tab-group",
+                              ref: subprovided.innerRef
+                            }, subprovided.droppableProps), {}, {
+                              children: [subTabsInNavbar.map(function (subTab, subIndex) {
+                                return /*#__PURE__*/(0, _jsxRuntime.jsx)(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
+                                }, subTab.id);
+                              }), subprovided.placeholder]
+                            }));
+                          }
+                        })
+                      }), (showChevron || showAddButton) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_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
+                      })]
+                    })]
+                  }));
+                }
+              }, index) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_superDnd.Draggable, {
+                draggableId: String(index),
+                index: index,
+                isDragDisabled: isMobileScreen,
+                children: function children(provided, snapshot) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHoverText["default"], {
+                    content: tab.title,
+                    delay: 500,
+                    followCursor: true,
+                    placement: "bottom",
+                    stylingOptions: tooltipStyles,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.NavLink, _objectSpread(_objectSpread(_objectSpread({}, 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}
+                      ,
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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
+                      })
+                    }))
+                  });
+                }
+              }, index);
+            }), provided.placeholder]
+          }));
+        }
+      })
+    })]
+  });
 };
 var TabContentWrapper = function TabContentWrapper(_ref9) {
   var tab = _ref9.tab,
@@ -1022,68 +1043,79 @@ var TabContentWrapper = function TabContentWrapper(_ref9) {
   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
-      });
-    }
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "tab-content-wrapper",
+      children: [!isSubTab && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "single-tab ".concat(showNotificationDot ? 'show-notification-dot' : '')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "tab-title-wrapper",
+        children: [showAvatar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_superAvatar["default"], {
+          firstName: tab.firstName,
+          lastName: tab.lastName,
+          imgSrc: tab.imgSrc || tab.img_url,
+          width: 20,
+          height: 20,
+          fontSize: 8,
+          borderRadius: 12
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "tab-title",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: title
+          })
+        })]
+      }), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "tab-close-btn-wrapper",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsx)("div", {
+        className: "active-sub-tab-btn-wrapper",
+        children: hiddenExternalToolbars[tab.id] && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "tab-hide-toolbar-btn-wrapper",
+          onClick: function onClick(e) {
+            e.preventDefault();
+            showExternalToolbar(tab.id);
+            setShowTooltip(false);
+            setTimeout(function () {
+              setShowTooltip(true);
+            }, 100);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "tab-hide-toolbar-btn",
+            title: "Show Toolbar"
+          })
+        })
+      })]
+    }), Suffix && isActive && window.innerWidth < 640 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Suffix, {}), !isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "tab-close-btn-wrapper",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("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;
@@ -1145,52 +1177,55 @@ var SubTab = exports.SubTab = function SubTab(_ref0) {
       opacity: isVisible ? 1 : 0
     }, draggableStyle);
   };
-  return /*#__PURE__*/_react["default"].createElement(_superDnd.Draggable, {
-    key: subIndex,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_superDnd.Draggable, {
     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
-    })));
-  });
+    index: subIndex,
+    children: function children(subprovided, snapshot) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHoverText["default"], {
+        content: title,
+        delay: 500,
+        followCursor: true,
+        show: showTooltip,
+        placement: "bottom",
+        stylingOptions: tooltipStyles,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.NavLink, _objectSpread(_objectSpread(_objectSpread({}, 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}
+          ,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TabContentWrapper, {
+            tab: subTab,
+            tabTitle: title,
+            isActive: isSubTabActive,
+            index: subIndex,
+            handleTabClose: handleTabClose,
+            isSubTab: true,
+            SITE_PREFIX: SITE_PREFIX,
+            parentIndex: index,
+            setShowTooltip: setShowTooltip
+          })
+        }))
+      });
+    }
+  }, subIndex);
 };
 var _default = exports["default"] = SuperTabs;