@bydata/react-supertabs 1.1.5 → 1.1.6

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,344 +684,323 @@ var SuperTabs = function SuperTabs(_ref) {
   //     }
   // }, [activeTab, activeSubTab]);
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: "super-tabs-wrapper",
-    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
+    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
         });
-      },
-      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);
+      }).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")
+            };
+          }
         }
-      },
-      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;
+        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")
           }
-          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;
+          // 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";
               }
-              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")
-                    };
-                  }
+              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;
+                  // });
                 }
-                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]
-          }));
-        }
-      })
-    })]
-  });
+                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,
@@ -1043,79 +1022,68 @@ var TabContentWrapper = function TabContentWrapper(_ref9) {
   var _useTabContext2 = (0, _TabContext.useTabContext)(),
     hiddenExternalToolbars = _useTabContext2.hiddenExternalToolbars,
     showExternalToolbar = _useTabContext2.showExternalToolbar;
-  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
-          });
-        }
-      })
-    })]
-  });
+  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;
@@ -1177,55 +1145,52 @@ var SubTab = exports.SubTab = function SubTab(_ref0) {
       opacity: isVisible ? 1 : 0
     }, draggableStyle);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_superDnd.Draggable, {
+  return /*#__PURE__*/_react["default"].createElement(_superDnd.Draggable, {
+    key: subIndex,
     draggableId: String(subIndex),
     isDragDisabled: !showSubTabs,
-    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);
+    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;