@bydata/react-supertabs 1.2.5 → 1.2.7

package/Readme.md

@@ -0,0 +1,322 @@
+# SuperTabs
+
+`SuperTabs` is a production-ready React navigation library for managing parent tabs and nested sub-tabs in complex applications.
+
+It provides a robust tab lifecycle with route integration, privilege-aware module access, and extensible UI controls for module-level workflows.
+
+### Highlights
+
+- Parent tab and sub-tab navigation with URL synchronization
+- Drag-and-drop tab reordering
+- Configurable module actions (`showAddButton` and `customAddButtons`)
+- Pluggable handlers for open, close, reorder, and fetch operations
+
+---
+
+## 1) Setup
+
+Wrap your app with `TabProvider`.
+
+```jsx
+import { TabProvider } from "components/SuperTabs/TabContext";
+import { alertService } from "super-notifier";
+
+<TabProvider
+  SITE_PREFIX={SITE_PREFIX}
+  SITE_PAGES={SITE_PAGES}
+  homeUrl="/app"
+  getUserDetails={getUser}
+  hasPrivilege={(privilege) => checkPrivilege(getUser().privileges, privilege)}
+  getTabs={getTabs}
+  handleOpenTab={handleOpenTab}
+  handleCloseTab={handleCloseTab}
+  handleReorderTabs={handleReorderTabs}
+  isDefaultExpanded={true}
+  alertService={alertService}
+>
+  <Main />
+</TabProvider>;
+```
+
+Render tabs in header:
+
+```jsx
+import SuperTabs from "components/SuperTabs/SuperTabs";
+
+<header>
+  <SuperTabs />
+</header>;
+```
+
+---
+
+## 2) `TabProvider` props
+
+### Required
+
+- `SITE_PREFIX: string`
+- `SITE_PAGES: Array<SitePage>`
+
+`SitePage` is typically:
+
+```js
+{
+  id: 2,
+  title: "Recruiter",
+  url: "/app/recruiter/f-home",
+  privilege: "RECRUITER",
+  containsSubTabs: true,
+  showAddButton: true, // boolean or privilege array
+  customAddButtons: [
+    { id: 1, name: "Data Grid", privilege: "RECRUITER" },
+    { id: 2, name: "Trend Master", privilege: "RECRUITER" }
+  ],
+  showInMobile: true,  // optional
+  isExternal: false    // optional
+}
+```
+
+### Optional
+
+- `homeUrl` (default: `/`)
+- `entityIdentifierKey` (default: `organization_id`)
+- `persistTabsAfterLogin` (default: `false`)
+- `preventHomeRedirect` (default: `false`)
+  - When `true`, clicking home opens module menu instead of redirecting.
+- `retainTabsAfterEntityChange` (default: `false`)
+- `shouldRedirectToSubTab` (default: `true`)
+- `isMobileView` (default: `false`)
+- `isDefaultExpanded` (default: `false`)
+- `getUserDetails` (function)
+- `hasPrivilege` (function)
+- `getTabs` (async function)
+- `handleOpenTab` (async function)
+- `handleCloseTab` (async function)
+- `handleReorderTabs` (async function)
+- `alertService` object with optional methods: `success`, `warning`, `error`, `info`, `alert`
+
+---
+
+## 3) API callback contracts
+
+### `getTabs({ payload, controller })`
+
+Expected shape:
+
+```js
+{
+  status: 1,
+  tabs: [],                // flat backend tabs with tab_info
+  current_tab: {} | null,  // current tab from backend
+  hasNoTabs: false         // true when backend has no open tabs
+}
+```
+
+### `handleOpenTab(payload[, controller])`
+
+Expected shape:
+
+```js
+{
+  status: 1,
+  tabId: 123,
+  children: [] // optional child tabs
+}
+```
+
+### `handleCloseTab(tabId)`
+
+Expected shape:
+
+```js
+{
+  status: 1,
+  current_tab_id: 456 // optional
+}
+```
+
+### `handleReorderTabs(payload)`
+
+Expected shape:
+
+```js
+{
+  status: 1;
+}
+```
+
+---
+
+## 4) Opening tabs
+
+### Option 1: `SuperLink`
+
+```jsx
+import SuperLink from "components/SuperTabs/SuperLink";
+
+<SuperLink tab={page} isSubTab={false}>
+  {page.title}
+</SuperLink>;
+```
+
+Open external links:
+
+```jsx
+<SuperLink tab={{ ...page, isExternal: true }} isSubTab={false} isExternal>
+  {page.title}
+</SuperLink>
+```
+
+### Option 2: `openSuperTabOnRowClick`
+
+```jsx
+import { useTabContext } from "components/SuperTabs/TabContext";
+
+const { openSuperTabOnRowClick } = useTabContext();
+
+function handleRowClick(row) {
+  openSuperTabOnRowClick({
+    tab: {
+      id: row.id,
+      name: row.name,
+      url: `/app/recruiter/f-${row.id}`,
+    },
+    isSubTab: true, // defaults to true
+  });
+}
+```
+
+---
+
+## 5) Tab object notes
+
+Common fields:
+
+- `id`
+- `url`
+- one of `name` / `title`
+
+Optional:
+
+- `showAvatar`, `firstName`, `lastName`, `imgSrc` or `img_url`
+- `tooltip` for hover text; falls back to tab title/name when empty
+- `isExternal`
+- any extra metadata your module uses
+
+```js
+{
+  id: 100,
+  url: "/app/profile/100",
+  tooltip: "Profile: John Doe",
+  firstName: "John",
+  lastName: "Doe",
+  showAvatar: true,
+  imgSrc: "https://cdn.example.com/u100.png"
+}
+```
+
+---
+
+## 6) Add button callbacks
+
+Bind module add callbacks using emitter:
+
+```jsx
+import { useCallback, useEffect } from "react";
+import { emitter } from "components/SuperTabs/SuperTabs";
+import { useTabContext } from "components/SuperTabs/TabContext";
+
+const { openSuperTabOnRowClick } = useTabContext();
+
+const handleTabAddBtn = useCallback(
+  (customButtonData) => {
+    // customButtonData is passed when using customAddButtons
+    openSuperTabOnRowClick({
+      tab: {
+        id: 123,
+        name: "New Funnel",
+        url: "/app/recruiter/f-123",
+      },
+      isSubTab: true,
+    });
+  },
+  [openSuperTabOnRowClick],
+);
+
+useEffect(() => {
+  const unsub = emitter.emit("bindCallback", {
+    id: 2, // same parent module id from SITE_PAGES
+    callback: handleTabAddBtn,
+  });
+  return unsub;
+}, [handleTabAddBtn]);
+```
+
+---
+
+## 7) Close cleanup event
+
+```jsx
+import { useEffect } from "react";
+import { emitter } from "components/SuperTabs/SuperTabs";
+
+useEffect(() => {
+  const unsub = emitter.subscribe(
+    "superTabClose",
+    ({ appId, isSubTab, tab }) => {
+      if (appId === 2 && isSubTab) {
+        // cleanup here
+      }
+    },
+  );
+  return unsub;
+}, []);
+```
+
+---
+
+## 8) Not Available page
+
+```jsx
+import NotAvailable from "components/SuperTabs/NotAvailable";
+
+<NotAvailable subTabName="Profile" />;
+```
+
+---
+
+## 9) Keep-alive (optional)
+
+Use shared keep-alive utility:
+
+```jsx
+import { withKeepAlive } from "components/KeepAlive";
+
+const Component = () => <div>Component</div>;
+export default withKeepAlive(Component, 2); // module id
+```
+
+Cleanup keep-alive cache on parent tab close:
+
+```jsx
+import { useEffect } from "react";
+import { useAliveScope } from "components/KeepAlive";
+import { emitter } from "components/SuperTabs/SuperTabs";
+
+const { drop } = useAliveScope();
+
+useEffect(() => {
+  const unsub = emitter.subscribe("superTabClose", ({ appId, isSubTab }) => {
+    if (appId && !isSubTab) {
+      drop(appId);
+    }
+  });
+  return unsub;
+}, [drop]);
+```
+
+---
+
+## 10) Styling note
+
+Home tab logo can be styled with `.brand-logo`.

package/dist/Constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transitionDurationExtended = exports.transitionDuration = exports.fontStyle = exports.ToolbarButtonWidth = exports.SubTabWrapperPadding = exports.SubTabPadding = exports.SubTabGap = exports.StackButtonWidth = exports.MarginLeft = exports.MainTabGap = exports.HomeTabWidth = exports.CloseButtonWidth = exports.AvatarSize = void 0;
+exports.transitionDurationExtended = exports.transitionDuration = exports.fontStyle = exports.ToolbarButtonWidth = exports.SubTabWrapperPadding = exports.SubTabPadding = exports.SubTabGap = exports.StackButtonWidth = exports.MarginLeft = exports.MainTabGap = exports.HomeTabWidth = exports.DEFAULT_HOME_URL = exports.CloseButtonWidth = exports.AvatarSize = void 0;
 var transitionDuration = exports.transitionDuration = 300;
 var transitionDurationExtended = exports.transitionDurationExtended = 800;
 var HomeTabWidth = exports.HomeTabWidth = 36;
@@ -17,4 +17,6 @@ var AvatarSize = exports.AvatarSize = 20 + SubTabGap;
 var ToolbarButtonWidth = exports.ToolbarButtonWidth = 24;
 var CloseButtonWidth = exports.CloseButtonWidth = 20; // 24-4px is for the right padding adjustment
 
-var fontStyle = exports.fontStyle = '600 12px "Open Sans", "Poppins", sans-serif'; // "same as supertabs.scss global font style"
+var fontStyle = exports.fontStyle = '600 12px "Open Sans", "Poppins", sans-serif'; // "same as supertabs.scss global font style" 
+
+var DEFAULT_HOME_URL = exports.DEFAULT_HOME_URL = "/";

package/dist/Readme.md

@@ -199,6 +199,7 @@ Common fields:
 Optional:
 
 - `showAvatar`, `firstName`, `lastName`, `imgSrc` or `img_url`
+- `tooltip` for hover text; falls back to tab title/name when empty
 - `isExternal`
 - any extra metadata your module uses
 
@@ -206,6 +207,7 @@ Optional:
 {
   id: 100,
   url: "/app/profile/100",
+  tooltip: "Profile: John Doe",
   firstName: "John",
   lastName: "Doe",
   showAvatar: true,

package/dist/SuperLink.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactRouterDom = require("react-router-dom");
+var _reactRouter = require("react-router");
 var _TabContext = require("./TabContext");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var SuperLink = function SuperLink(_ref) {
@@ -28,7 +28,7 @@ var SuperLink = function SuperLink(_ref) {
       isSubTab: isSubTab
     });
   };
-  return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
+  return /*#__PURE__*/_react["default"].createElement(_reactRouter.NavLink, {
     to: tab.url,
     title: tab.title || '',
     onClick: handleSuperLinkClick

package/dist/SuperTabs.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.emitter = exports["default"] = exports.SubTab = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactRouterDom = require("react-router-dom");
+var _reactRouter = require("react-router");
 var _superDnd = require("super-dnd");
-var _ClickOutsideListener = _interopRequireDefault(require("./ClickOutsideListener"));
-var _reactHoverText = _interopRequireDefault(require("react-hover-text"));
 var _superAvatar = _interopRequireDefault(require("super-avatar"));
-var _SuperLink = _interopRequireDefault(require("./SuperLink"));
 var _TabStack = _interopRequireDefault(require("./TabStack"));
+var _ClickOutsideListener = _interopRequireDefault(require("./ClickOutsideListener"));
+var _SuperLink = _interopRequireDefault(require("./SuperLink"));
+var _reactHoverText = _interopRequireDefault(require("react-hover-text"));
 var _TabContext = require("./TabContext");
 var _eventEmitter = _interopRequireDefault(require("./eventEmitter"));
 var _Utils = require("./Utils");
@@ -56,6 +56,13 @@ var tooltipStyles = {
   backgroundColor: 'var(--tab-background-overlay, #272B32)',
   color: 'var(--tab-text-normal, #BDC3CC)'
 };
+var getTooltipContent = function getTooltipContent(item, fallbackTitle) {
+  var customTooltip = item === null || item === void 0 ? void 0 : item.tooltip;
+  if (typeof customTooltip === 'string' && customTooltip.trim()) {
+    return customTooltip.trim();
+  }
+  return fallbackTitle;
+};
 var filterSubTabs = function filterSubTabs(subTabs) {
   // const subTabsInList = [];
   var subTabsInNavbar = [];
@@ -72,11 +79,10 @@ var filterSubTabs = function filterSubTabs(subTabs) {
   // return { subTabsInList, subTabsInNavbar };
 };
 var getActiveParentTabName = function getActiveParentTabName(url, homeUrl) {
-  var homeSegments = homeUrl.split('/').filter(Boolean);
-  if (homeSegments.length === 1) {
-    return url.split('/')[1]; // ex. /organization/1 => organization, /recruiter/home => recruiter
-  }
-  return url.split('/')[2]; // e.g. /app/organization/1 => organization (has app prefix)
+  var urlSegments = url.split('/').filter(Boolean);
+  // if homeUrl is default, return the first segment (e.g. /organization/1 => organization, /recruiter/home => recruiter)
+  // if not default, return the second segment (e.g. /app/organization/1 => organization (has app prefix))
+  return homeUrl === _Constants.DEFAULT_HOME_URL ? urlSegments[0] : urlSegments[1];
 };
 
 // function calculateTransitionDuration(totalWidth, avgWidth = maxTabWidth) {
@@ -150,8 +156,8 @@ var SuperTabs = function SuperTabs(_ref) {
       }, _callee);
     }))();
   }, [updateMaxWidth]);
-  var history = (0, _reactRouterDom.useHistory)();
-  var location = (0, _reactRouterDom.useLocation)();
+  var navigate = (0, _reactRouter.useNavigate)();
+  var location = (0, _reactRouter.useLocation)();
   var _useState = (0, _react.useState)(function (isDefaultExpanded) {
       if (isDefaultExpanded) updateMaxWidth();
       return isDefaultExpanded;
@@ -705,8 +711,8 @@ var SuperTabs = function SuperTabs(_ref) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "super-tabs-wrapper",
     ref: superTabsWrapperElemRef
-  }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
-    to: "/",
+  }, /*#__PURE__*/_react["default"].createElement(_reactRouter.NavLink, {
+    to: homeUrl,
     className: "home-tab",
     ref: homeTabRef
     // activeClassName="active"
@@ -734,7 +740,7 @@ var SuperTabs = function SuperTabs(_ref) {
       });
       resetMaxWidth();
     },
-    exact: true
+    end: true
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "brand-wrapper"
   }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -884,12 +890,12 @@ var SuperTabs = function SuperTabs(_ref) {
           className: 'child-tabs-wrapper tab-' + tab.id + (showSubTabs ? ' expanded' : '')
           // (isActive ? ' active' : '')
         }, /*#__PURE__*/_react["default"].createElement(_reactHoverText["default"], {
-          content: tab.title,
+          content: getTooltipContent(tab, tab.title),
           delay: 500,
           followCursor: true,
           placement: "bottom",
           stylingOptions: tooltipStyles
-        }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
+        }, /*#__PURE__*/_react["default"].createElement(_reactRouter.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' : '')
@@ -922,7 +928,7 @@ var SuperTabs = function SuperTabs(_ref) {
                   //     return updated;
                   // });
                 }
-                history.push(lastOpenedTabUrl || tab.url);
+                navigate(lastOpenedTabUrl || tab.url);
                 // } else {
                 // setTimeout(() => {
                 //     toggleSubTabs(tab);
@@ -935,7 +941,7 @@ var SuperTabs = function SuperTabs(_ref) {
               ignoreActiveTabUpdate: ignoreActiveTabUpdate
             });
           },
-          exact: tab.fixed
+          end: tab.fixed
         }, /*#__PURE__*/_react["default"].createElement(TabContentWrapper, {
           tab: tab,
           index: index,
@@ -1002,12 +1008,12 @@ var SuperTabs = function SuperTabs(_ref) {
         isDragDisabled: isMobileScreen
       }, function (provided, snapshot) {
         return /*#__PURE__*/_react["default"].createElement(_reactHoverText["default"], {
-          content: tab.title,
+          content: getTooltipContent(tab, tab.title),
           delay: 500,
           followCursor: true,
           placement: "bottom",
           stylingOptions: tooltipStyles
-        }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, _extends({}, provided.draggableProps, provided.dragHandleProps, {
+        }, /*#__PURE__*/_react["default"].createElement(_reactRouter.NavLink, _extends({}, provided.draggableProps, provided.dragHandleProps, {
           ref: provided.innerRef,
           to: url,
           onClick: function onClick() {
@@ -1017,7 +1023,7 @@ var SuperTabs = function SuperTabs(_ref) {
           },
           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
+          end: true
           // exact={tab.exact}
           // title={tab.title}
         }), /*#__PURE__*/_react["default"].createElement(TabContentWrapper, {
@@ -1141,7 +1147,7 @@ var SubTab = exports.SubTab = function SubTab(_ref0) {
   var _useTabContext3 = (0, _TabContext.useTabContext)(),
     hiddenExternalToolbars = _useTabContext3.hiddenExternalToolbars,
     tabModePreference = _useTabContext3.tabModePreference;
-  var location = (0, _reactRouterDom.useLocation)();
+  var location = (0, _reactRouter.useLocation)();
   var subTabUrl = (_subTab$url = subTab.url) !== null && _subTab$url !== void 0 ? _subTab$url : "/".concat(tabUrl, "/f-").concat(subTab.id);
   var subTabUrlWithoutSearchParam = subTabUrl.split('?')[0];
   var pathname = location.pathname;
@@ -1186,13 +1192,13 @@ var SubTab = exports.SubTab = function SubTab(_ref0) {
     index: subIndex
   }, function (subprovided, snapshot) {
     return /*#__PURE__*/_react["default"].createElement(_reactHoverText["default"], {
-      content: title,
+      content: getTooltipContent(subTab, title),
       delay: 500,
       followCursor: true,
       show: showTooltip,
       placement: "bottom",
       stylingOptions: tooltipStyles
-    }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, _extends({}, subprovided.draggableProps, subprovided.dragHandleProps, {
+    }, /*#__PURE__*/_react["default"].createElement(_reactRouter.NavLink, _extends({}, subprovided.draggableProps, subprovided.dragHandleProps, {
       ref: subprovided.innerRef,
       to: subTabUrl,
       id: "tab-".concat(tab.id, "-") + subTab.id.toString().replace('/', '-'),
@@ -1206,7 +1212,7 @@ var SubTab = exports.SubTab = function SubTab(_ref0) {
       style: getItemStyle(showSubTabs || show, subprovided.draggableProps.style, width)
       // title={subTab.name}
       ,
-      exact: false,
+      end: false,
       onClick: function onClick() {
         return handleTabClick({
           tab: subTab,

package/dist/SuperTabs.scss

@@ -752,7 +752,7 @@ body[data-theme="light"] {
         width: 5px;
         height: 10px;
         background-color: var(--tab-text-active);
-        mask: url(./images/icon-chevron-right.svg) no-repeat center center;
+        mask: url(../../images/icon-chevron-right.svg) no-repeat center center;
         mask-size: 5px;
         transition: background-color ease-out var(--transition-duration),
             var(--transition-duration) var(--transition-duration-extended);

package/dist/TabContext.js

@@ -9,7 +9,7 @@ exports.TabProvider = TabProvider;
 exports.getUniqueIdentifier = void 0;
 exports.useTabContext = useTabContext;
 var _react = _interopRequireWildcard(require("react"));
-var _reactRouterDom = require("react-router-dom");
+var _reactRouter = require("react-router");
 var _usePrevious = _interopRequireDefault(require("./usePrevious"));
 var _Utils = require("./Utils");
 var _Constants = require("./Constants");
@@ -154,7 +154,7 @@ function TabProvider(_ref9) {
     SITE_PREFIX = _ref9.SITE_PREFIX,
     SITE_PAGES = _ref9.SITE_PAGES,
     _ref9$homeUrl = _ref9.homeUrl,
-    homeUrl = _ref9$homeUrl === void 0 ? '/' : _ref9$homeUrl,
+    homeUrl = _ref9$homeUrl === void 0 ? _Constants.DEFAULT_HOME_URL : _ref9$homeUrl,
     _ref9$entityIdentifie = _ref9.entityIdentifierKey,
     entityIdentifierKey = _ref9$entityIdentifie === void 0 ? 'organization_id' : _ref9$entityIdentifie,
     _ref9$persistTabsAfte = _ref9.persistTabsAfterLogin,
@@ -211,8 +211,8 @@ function TabProvider(_ref9) {
     isDefaultExpanded = _ref9$isDefaultExpand === void 0 ? false : _ref9$isDefaultExpand,
     _ref9$alertService = _ref9.alertService,
     alertService = _ref9$alertService === void 0 ? {} : _ref9$alertService;
-  var history = (0, _reactRouterDom.useHistory)();
-  var location = (0, _reactRouterDom.useLocation)();
+  var navigate = (0, _reactRouter.useNavigate)();
+  var location = (0, _reactRouter.useLocation)();
   var homeTabIdRef = (0, _react.useRef)(null);
   var superTabsWrapperElemRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
@@ -536,9 +536,11 @@ function TabProvider(_ref9) {
       }
     }
     setTabModePreference(updatedTabModePreference);
-    history.replace({
+    navigate({
       pathname: location.pathname,
       search: "?".concat(searchParams.toString())
+    }, {
+      replace: true
     });
   };
   var openSuperTabOnRowClick = function openSuperTabOnRowClick() {
@@ -553,7 +555,7 @@ function TabProvider(_ref9) {
     var isTabOpen = !isSubTab && tabsRef.current.some(function (t) {
       return t.url === tab.url;
     });
-    history.push(tab.url);
+    navigate(tab.url);
     // if (!isSubTab && tab.skipAPICall) return;
     isSubTab ? openSubTab({
       tab: tab
@@ -727,7 +729,7 @@ function TabProvider(_ref9) {
                   subTabs: _subTabs.sort(_Utils.sortByOrder)
                 }) : t;
               });
-              var pathName = history.location.pathname;
+              var pathName = location.pathname;
               var isSubTabActive = _subTabs.find(function (t) {
                 return t.url === pathName;
               });
@@ -1189,7 +1191,9 @@ function TabProvider(_ref9) {
                   if (tabModePreference.includes(newActiveSubTab.tabId)) {
                     url += "?edit=true";
                   }
-                  history.replace(url);
+                  navigate(url, {
+                    replace: true
+                  });
                 } else {
                   updateActiveSubTab({});
                   lastOpenedUrl.current[currentEntityId + '_' + activeTabRef.current.id] = null;
@@ -1197,7 +1201,9 @@ function TabProvider(_ref9) {
                   if (tabModePreference.includes(activeTabRef.current.tabId)) {
                     _url += "?edit=true";
                   }
-                  history.replace(_url);
+                  navigate(_url, {
+                    replace: true
+                  });
                 }
               } else {
                 newTabs[parentTabIndex].subTabs = newTabs[parentTabIndex].subTabs.map(function (subTab) {
@@ -1230,11 +1236,15 @@ function TabProvider(_ref9) {
                   var newActiveTab = nextTab !== null && nextTab !== void 0 ? nextTab : newTabs[tabIndex - 1];
                   updateActiveTab(newActiveTab);
                   lastOpenedUrl.current[currentEntityId + '_' + activeTabRef.current.id] = newActiveTab;
-                  history.replace(newActiveTab.url);
+                  navigate(newActiveTab.url, {
+                    replace: true
+                  });
                 } else {
                   lastOpenedUrl.current[currentEntityId + '_' + activeTabRef.current.id] = null;
                   updateActiveTab({});
-                  history.replace("/");
+                  navigate("/", {
+                    replace: true
+                  });
                 }
               }
               newTabs = newTabs.filter(function (t) {
@@ -1549,7 +1559,7 @@ function TabProvider(_ref9) {
                   _context10.n = 13;
                   break;
                 }
-                pathName = history.location.pathname;
+                pathName = location.pathname;
                 isHomeTab = pathName === homeUrl || pathName === '/';
                 _context10.n = 3;
                 return findDuplicateEntriesAndCloseTab(response.tabs);
@@ -1578,7 +1588,9 @@ function TabProvider(_ref9) {
                     // lastOpenedUrl.current[activeTab.id] = activeSubTab.url;
                   }
                   isHomeTab = false;
-                  history.replace(pathName);
+                  navigate(pathName, {
+                    replace: true
+                  });
                 }
                 isCurrentTabOpen = !isHomeTab && tabsOutput.find(function (tab) {
                   var _tab$tab_info$url;
@@ -1613,7 +1625,7 @@ function TabProvider(_ref9) {
                 _context10.n = 6;
                 break;
               case 5:
-                history.push(homeUrl);
+                navigate(homeUrl);
               case 6:
                 _context10.n = 10;
                 break;
@@ -1806,7 +1818,7 @@ function TabProvider(_ref9) {
                       };
                     }());
                     if (activeTab.url) {
-                      history.push(activeTab.url);
+                      navigate(activeTab.url);
                     }
                   }
                 }

package/dist/TabList.js

@@ -8,7 +8,7 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _TabContext = require("./TabContext");
-var _reactRouterDom = require("react-router-dom");
+var _reactRouter = require("react-router");
 var _ClickOutsideListener = _interopRequireDefault(require("./ClickOutsideListener"));
 require("./TabList.scss");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -188,7 +188,7 @@ var TabList = function TabList(_ref) {
     className: "tab-list-tabs-wrapper"
   }, filteredTabs.length > 0 ? filteredTabs.map(function (tab, index) {
     var title = tab.title || tab.name || (tab !== null && tab !== void 0 && tab.firstName ? "".concat(tab.firstName, " ").concat(tab.lastName || '') : 'Untitled');
-    return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
+    return /*#__PURE__*/_react["default"].createElement(_reactRouter.NavLink, {
       className: "tab-list-open-tab ".concat(id === activeTab.id && tab.id === activeSubTab.id ? 'active' : ''),
       key: tab.id || index,
       onClick: function onClick(e) {

package/dist/Utils.js

@@ -13,7 +13,9 @@ exports.getTextWidth = getTextWidth;
 exports.getUserDetailsFromToken = exports.getUniqueId = exports.getTitle = void 0;
 exports.isChildPath = isChildPath;
 exports.isDev = isDev;
-exports.normalizeUrl = exports.isEmpty = void 0;
+exports.isEmpty = void 0;
+exports.isStage = isStage;
+exports.normalizeUrl = void 0;
 exports.removeSpaces = removeSpaces;
 exports.reorder = reorder;
 exports.reorderSubTabs = reorderSubTabs;
@@ -163,6 +165,9 @@ function reorderSubTabs(array, sourceIndex, destinationIndex) {
 function isDev() {
   return process.env.REACT_APP_CUSTOM_NODE_ENV === 'development';
 }
+function isStage() {
+  return process.env.REACT_APP_CUSTOM_NODE_ENV === 'stage';
+}
 function removeSpaces(str) {
   return str.replace(/\s/g, '');
 }

package/dist/images/icon-stack.svg

@@ -0,0 +1,6 @@
+<svg width="36" height="30" viewBox="0 0 36 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 4.00098C8 2.89641 8.89543 2.00098 10 2.00098H32C33.1046 2.00098 34 2.89641 34 4.00098V26.001C34 27.1055 33.1046 28.001 32 28.001H10C8.89543 28.001 8 27.1055 8 26.001V4.00098Z" fill="#1D2024"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0.000976562H32C34.2091 0.000976562 36 1.79184 36 4.00098V26.001C36 28.2101 34.2091 30.001 32 30.001H10C7.79086 30.001 6 28.2101 6 26.001V4.00098C6 1.79184 7.79086 0.000976562 10 0.000976562ZM10 2.00098C8.89543 2.00098 8 2.89641 8 4.00098V26.001C8 27.1055 8.89543 28.001 10 28.001H32C33.1046 28.001 34 27.1055 34 26.001V4.00098C34 2.89641 33.1046 2.00098 32 2.00098H10Z" fill="black"/>
+    <path d="M2 4.00098C2 2.89641 2.89543 2.00098 4 2.00098H26C27.1046 2.00098 28 2.89641 28 4.00098V26.001C28 27.1055 27.1046 28.001 26 28.001H4C2.89543 28.001 2 27.1055 2 26.001V4.00098Z" fill="#1D2024"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 0.000976562H26C28.2091 0.000976562 30 1.79184 30 4.00098V26.001C30 28.2101 28.2091 30.001 26 30.001H4C1.79086 30.001 0 28.2101 0 26.001V4.00098C0 1.79184 1.79086 0.000976562 4 0.000976562ZM4 2.00098C2.89543 2.00098 2 2.89641 2 4.00098V26.001C2 27.1055 2.89543 28.001 4 28.001H26C27.1046 28.001 28 27.1055 28 26.001V4.00098C28 2.89641 27.1046 2.00098 26 2.00098H4Z" fill="black"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bydata/react-supertabs",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "A customizable React super tabs component.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/README.md

@@ -1,262 +0,0 @@
-# React SuperTabs
-
-**SuperTabs** is a powerful and user-friendly tab management component. It enables seamless navigation by opening modules as tabs, with support for sub-tabs, smooth transitions. An experimental _keep-alive_ feature ensures components stay active across tab switches for enhanced usability.
-
-### SuperTabs Features
-------
--   **Tab-based Navigation**: Open modules as tabs for an intuitive and efficient navigation experience.
--   **Sub-Tabs Support**: Create nested sub-tabs within a main tab for hierarchical organization.
--   **Smooth Transitions**: Enjoy a polished user experience with fluid tab-switching animations.
--   **Keep-Alive (Experimental)**: Maintain the state of components across tab switches for seamless interaction (experimental feature).
-
-### Installation
-------
-
-```bash
-npm install @bydata/react-supertabs
-```
-
-### Usage
-------
-
-#### Basic
-
->**Import TabProvider and wrap it around the main wrapper**
-
- - This is needed to access useTabContext.
- - Make sure to pass `SITE_PREFIX` and `SITE_PAGES` (From Navigation.js)
- - `homeUrl` is optional and defaults to "/"
- - `persistTabsAfterLogin` is optional and defaults to "false"
-    - Used to preserve tab state upon login.
- - `entityIdentifierKey` is optional and defaults to 'organization_id',
-    - Used to identify the organization / client id
- - `preventHomeRedirect` is optional and defaults to false,
-    - This will open a menu on click of home button instead of redirecting 
- - `handleOpenTab` async function to open the tab in backend
-    - expects the following keys in return
-    - { status: 1, tabId, children: undefined }
- - `handleCloseTab` async function to open the tab in backend
-    - expects the following keys in return
-    - { status: 1, current_tab_id: 123 }
- - `handleReorderTabs` async function to open the tab in backend
-    - { status: 1 }
- - `getTabs` async function to open the tab in backend async () => { },
-    - expects the following keys in return
-    - { status: 1, tabs: [], current_tab: {} || null, hasNoTabs }
-    - hasNoTabs = user for whom there are no tabs open
- - `getUserDetails` function which return the user details from user token
- - `hasPrivilege` function which checks if the user has the privilege passed in function param
- - `alertService` An object containing different methods for displaying toast alerts.
-    - can call success, warning, error, info, alert methods.
-    - super-notifier - NPM package can be used here
-    - https://www.npmjs.com/package/super-notifier
-
-```
-Eg. 
-const SITE_PREFIX = 'teamLink_'
-const API_BASE_URL = 'https://api.teamlink.com/data_stream'
-const SITE_PAGES = [{
-	title:  "Organization",
-	url:  "/app/organization",
-	privilege:  "ORGANIZATION",
-	id:  1,
-},
-{
-	title:  "Recruiter",
-	url:  "/app/recruiter/f-home",
-	privilege:  "RECRUITER",
-	showAddButton:  true,
-    customAddButtons: [
-      {
-        name: "Data Grid",
-        id: 1,
-      },
-      {
-        name: "Trend Master",
-        id: 2,
-      }
-    ],
-	containsSubTabs:  true,
-	id:  2,
-}]
-
-// showAddButton - can be added if the module needs plus button.
-// containsSubTabs - can be added if the tab includes sub tabs.
-// customAddButtons - These buttons will be added in the sub tab list. Clicking on the button will trigger the binded callback with object as param.
-
-import { TabProvider } from '@bydata/react-supertabs';
-<TabProvider
-    SITE_PREFIX={SITE_PREFIX}
-    SITE_PAGES={SITE_PAGES}
-    homeUrl="/app"
-    getTabs={getTabs}
-    handleOpenTab={handleOpenTab}
-    handleCloseTab={handleCloseTab}
-    handleReorderTabs={handleReorderTabs}
-    alertService={alertService}
->
-    <Main />
-</TabProvider>
-```
-
->**Render the component within the App's header**
-```
-import { SuperTabs, useTabContext } from '@bydata/react-supertabs';
-
-<header>
-    <SuperTabs />
-</header>
-```
-
->**Wrap the hyperlink as follows:**
-
-Each tab should contain all the necessary information to be stored.
-
-Mandatory Fields:
--   `id`
--   `name`
--   `url`
-
-For Avatar:
--   `showAvatar` must be set to `true`
--   The following fields must be provided:
-    -   `firstName`
-    -   `lastName`
-    -   `imgSrc`
-
-```
-// Tab object Examples
-
-{
-    id: 1,
-    name: 'title',
-    url: '/recruiter/f-1`
-}
-
-{
-    id: 100,
-    url: '/profile/100`
-    firstName: 'John',
-    lastName: 'Doe',
-    showAvatar: true,
-    imgSrc: img_url,
-    department,
-    designation,
-    department_id,
-}
-```
-```
-import { SuperLink } from '@bydata/react-supertabs';
-<SuperLink tab={page} isSubTab={false}>
-    {page.title}
-</SuperLink>
-```
-
-OR
-
-```
-import { useTabContext } from '@bydata/react-supertabs';
-const { openSuperTabOnRowClick } = useTabContext();
-
-function handleRowClick(e) {
-    const tab = { id: e.id, name: e.name, url: `/recruiter/f-${e.id}` };
-    // isSubTab defaults to true
-    openSuperTabOnRowClick({ tab, isSubTab });
-}
-```
-
->**Bind the callback for the plus button to each module during the initial render.**
-
-If a module requires a plus button for adding a new tab, you can include the following:
-```
-import { emitter, useTabContext } from '@bydata/react-supertabs';
-
-const { openSuperTabOnRowClick } = useTabContext();
-
-const handleTabAddBtn = useCallback(() => {
-    openSuperTabOnRowClick({
-        tab: {
-            id: 123,
-            name: `New Funnel`,
-            url: `/recruiter/f-${123}`,
-        },
-        isSubTab: true,
-    });
-}, [openSuperTabOnRowClick]);
-
-useEffect(() => {
-    const unsub = emitter.emit("bindCallback", {
-        id: 2, // Same id provided for this module in navigation.js
-        callback: handleTabAddBtn,
-    });
-    return unsub;
-}, [handleTabAddBtn]);
-```
-
-> Note: The logo of the home tab can be updated by targeting the `brand-logo` class.
-
------
-
-#### Advanced
-
->**Cleanup**
-
-When a tab is closed, it may be necessary to clean up some data. The `superTabClose` event can be utilized for this purpose.
-
-```
-import { emitter } from '@bydata/react-supertabs';
-
-useEffect(() => {
-	const  unsub  =  emitter.subscribe('superTabClose', ({ appId, isSubTab, tab }) => {
-		// Same id provided for this module in navigation.js
-		if (appId === 2 && isSubTab) {
-			// handle clean up here
-		}
-	})
-	return unsub;
-}, []);
-```
-
->**Not Available page**
-- If a profile is deleted, the tab will remain open. To address this, we can display a "Page Not Available" message.
-
-```
-import { NotAvailable } from '@bydata/react-supertabs';
-
-<NotAvailable  subTabName='Profile' />
-```
-
->**Keep Alive  (Experimental)**
-
-```
-import { withKeepAlive } from '@bydata/react-supertabs';
-
-// Same id provided for this module in navigation.js
-export  default  withKeepAlive(Component, Unique ID);
-
-Eg.
-const  Component  = () => {
-	return <div>Component</div>
-}
-
-export  default  withKeepAlive(Component, 2);
-```
-Keep Alive Cleanup
-```
-// This can be incorporated into a component that is always rendered, such as the header.
-
-import { useAliveScope, emitter } from '@bydata/react-supertabs';
-
-const { drop } =  useAliveScope();
-
-useEffect(() => {
-	const unsub = emitter.subscribe('superTabClose', (e) => {
-		const { appId, isSubTab } =  e;
-		if (appId && !isSubTab) {
-			// drop the cache of the tab
-			drop(appId);
-		}
-	})
-	return unsub;
-}, []);
-```