@bydata/react-supertabs 1.1.8 → 1.1.9

package/dist/NotAvailable.js

@@ -13,7 +13,7 @@ var NotAvailable = function NotAvailable(_ref) {
   var title = _ref.title,
     description = _ref.description,
     _ref$subTabName = _ref.subTabName,
-    subTabName = _ref$subTabName === void 0 ? 'Page' : _ref$subTabName;
+    subTabName = _ref$subTabName === void 0 ? "Page" : _ref$subTabName;
   var _useTabContext = (0, _TabContext.useTabContext)(),
     activeSubTab = _useTabContext.activeSubTab;
   var heading = title !== null && title !== void 0 ? title : (0, _Utils.getTitle)(activeSubTab);
@@ -24,7 +24,7 @@ var NotAvailable = function NotAvailable(_ref) {
     className: "not-available-content"
   }, /*#__PURE__*/_react["default"].createElement("h3", {
     className: "title"
-  }, heading.replace('Loading...', 'Untitled')), /*#__PURE__*/_react["default"].createElement("p", {
+  }, heading.replace("Loading...", "Untitled")), /*#__PURE__*/_react["default"].createElement("p", {
     className: "description"
   }, subHeading)));
 };

package/dist/SuperTabs.js

@@ -50,7 +50,11 @@ var tooltipStyles = {
   zIndex: 100000,
   boxShadow: "0px 1px 10px 0px rgba(0, 0, 0, 0.10)",
   marginBottom: "5px",
-  minWidth: "fit-content"
+  minWidth: "fit-content",
+  marginTop: "2px",
+  borderRadius: "2px",
+  backgroundColor: 'var(--tab-background-overlay, #272B32)',
+  color: 'var(--tab-text-normal, #BDC3CC)'
 };
 var filterSubTabs = function filterSubTabs(subTabs) {
   // const subTabsInList = [];
@@ -106,6 +110,7 @@ var SuperTabs = function SuperTabs(_ref) {
     updateExpandedID = _useTabContext.updateExpandedID,
     expandedTabIDRef = _useTabContext.expandedTabIDRef,
     updateCurrentTab = _useTabContext.updateCurrentTab,
+    openSuperTabOnRowClick = _useTabContext.openSuperTabOnRowClick,
     hasPrivilege = _useTabContext.hasPrivilege,
     subTabChange = _useTabContext.subTabChange,
     updateSubTabChange = _useTabContext.updateSubTabChange,
@@ -324,8 +329,6 @@ var SuperTabs = function SuperTabs(_ref) {
 
   // Hover handlers for brand wrapper
   var handleBrandHoverEnter = function handleBrandHoverEnter() {
-    console.log('handleBrandHoverEnter', isMobile, preventHomeRedirect);
-
     // Skip hover functionality on mobile devices to avoid conflicts
     if (isMobile) return;
 
@@ -849,7 +852,14 @@ var SuperTabs = function SuperTabs(_ref) {
           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' : '')
+          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' : ''),
+          onClick: function onClick() {
+            if (isActive) return;
+            openSuperTabOnRowClick({
+              tab: tab,
+              isSubTab: false
+            });
+          }
         }), /*#__PURE__*/_react["default"].createElement("div", {
           className: 'child-tabs-wrapper tab-' + tab.id + (showSubTabs ? ' expanded' : '')
           // (isActive ? ' active' : '')
@@ -870,6 +880,7 @@ var SuperTabs = function SuperTabs(_ref) {
           // title={tab.title}
           ,
           onClick: function onClick(e) {
+            e.stopPropagation();
             var ignoreActiveTabUpdate = false;
             if (containsSubTabs && !isActive) {
               var _lastOpenedUrl$curren;

package/dist/SuperTabs.scss

@@ -197,6 +197,7 @@ body[data-theme="light"] {
 
         display: flex;
         align-items: center;
+        cursor: pointer !important;
         transition-duration: var(--transition-duration-extended);
         transition-property: padding, opacity, border-color, max-width;
 
@@ -536,6 +537,7 @@ body[data-theme="light"] {
         align-items: center;
         position: relative;
         z-index: 10;
+        cursor: pointer !important;
 
         &:not(.active) {
             position: relative;

package/dist/TabContext.js

@@ -1496,7 +1496,7 @@ function TabProvider(_ref9) {
                   break;
                 }
                 pathName = window.location.pathname;
-                isHomeTab = pathName === homeUrl;
+                isHomeTab = pathName === homeUrl || pathName === '/';
                 _context10.n = 3;
                 return findDuplicateEntriesAndCloseTab(response.tabs);
               case 3:

package/dist/TabList.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 _ClickOutsideListener = _interopRequireDefault(require("./ClickOutsideListener"));
@@ -74,13 +75,16 @@ var TabList = function TabList(_ref) {
     if (popupElem) {
       var popupRect = popupElem.getBoundingClientRect();
       var windowWidth = window.innerWidth;
+      var top = "".concat(popupRect.bottom - 2, "px");
       if (popupRect.right + 300 > windowWidth) {
         position = {
-          right: "".concat(window.innerWidth - (popupRect === null || popupRect === void 0 ? void 0 : popupRect.right), "px")
+          right: "".concat(window.innerWidth - (popupRect === null || popupRect === void 0 ? void 0 : popupRect.right), "px"),
+          top: top
         };
       } else {
         position = {
-          left: "".concat((popupRect === null || popupRect === void 0 ? void 0 : popupRect.left) + 5, "px")
+          left: "".concat((popupRect === null || popupRect === void 0 ? void 0 : popupRect.left) + 5, "px"),
+          top: top
         };
       }
     }
@@ -134,7 +138,7 @@ var TabList = function TabList(_ref) {
     return exactMatches.flat().concat(otherMatches);
   };
   var filteredTabs = filterTabs(tabs);
-  return /*#__PURE__*/_react["default"].createElement(_ClickOutsideListener["default"], {
+  var tabListContent = /*#__PURE__*/_react["default"].createElement(_ClickOutsideListener["default"], {
     onOutsideClick: handleOutsideClick
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "tab-list-wrapper ".concat(showList ? 'show' : ''),
@@ -154,7 +158,7 @@ var TabList = function TabList(_ref) {
         closeList();
         setShowList(false);
       }
-    }, title), !(index == customAddButtons.length - 1) && /*#__PURE__*/_react["default"].createElement("span", {
+    }, title), !(index === customAddButtons.length - 1) && /*#__PURE__*/_react["default"].createElement("span", {
       className: "pipe"
     }));
   }) : showAddButton && !hasCustomAddButtons && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
@@ -232,5 +236,9 @@ var TabList = function TabList(_ref) {
   }) : /*#__PURE__*/_react["default"].createElement("div", {
     className: "tab-list-no-data"
   }, "No data found"))))));
+  if (!showList) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _reactDom.createPortal)(tabListContent, document.body);
 };
 var _default = exports["default"] = TabList;

package/dist/TabList.scss

@@ -1,11 +1,11 @@
 .tab-list-wrapper {
     padding-top: 12px;
     position: fixed;
-    top: calc(var(--header-height-other-tab) - 8px);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s;
     pointer-events: none;
+    z-index: 10000;
 
     &.show {
         opacity: 1;

package/package.json

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