@bydata/react-supertabs 1.2.0 → 1.2.1

package/README.md

@@ -9,7 +9,14 @@
 -   **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 and usage
+### Installation
+------
+
+```bash
+npm install @bydata/react-supertabs
+```
+
+### Usage
 ------
 
 #### Basic
@@ -77,7 +84,7 @@ const SITE_PAGES = [{
 // 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 'components/SuperTabs/TabContext';
+import { TabProvider } from '@bydata/react-supertabs';
 <TabProvider
     SITE_PREFIX={SITE_PREFIX}
     SITE_PAGES={SITE_PAGES}
@@ -94,7 +101,7 @@ import { TabProvider } from 'components/SuperTabs/TabContext';
 
 >**Render the component within the App's header**
 ```
-import { useTabContext } from "components/SuperTabs/TabContext";
+import { SuperTabs, useTabContext } from '@bydata/react-supertabs';
 
 <header>
     <SuperTabs />
@@ -139,7 +146,7 @@ For Avatar:
 }
 ```
 ```
-import SuperLink from "components/SuperTabs/SuperLink";
+import { SuperLink } from '@bydata/react-supertabs';
 <SuperLink tab={page} isSubTab={false}>
     {page.title}
 </SuperLink>
@@ -148,7 +155,7 @@ import SuperLink from "components/SuperTabs/SuperLink";
 OR
 
 ```
-import { useTabContext } from "components/SuperTabs/TabContext";
+import { useTabContext } from '@bydata/react-supertabs';
 const { openSuperTabOnRowClick } = useTabContext();
 
 function handleRowClick(e) {
@@ -162,8 +169,7 @@ function handleRowClick(e) {
 
 If a module requires a plus button for adding a new tab, you can include the following:
 ```
-import { emitter } from "components/SuperTabs/SuperTabs";
-import { useTabContext } from "components/SuperTabs/TabContext";
+import { emitter, useTabContext } from '@bydata/react-supertabs';
 
 const { openSuperTabOnRowClick } = useTabContext();
 
@@ -198,7 +204,7 @@ useEffect(() => {
 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  'components/SuperTabs/SuperTabs';
+import { emitter } from '@bydata/react-supertabs';
 
 useEffect(() => {
 	const  unsub  =  emitter.subscribe('superTabClose', ({ appId, isSubTab, tab }) => {
@@ -215,7 +221,7 @@ useEffect(() => {
 - If a profile is deleted, the tab will remain open. To address this, we can display a "Page Not Available" message.
 
 ```
-import  NotAvailable  from  'components/SuperTabs/NotAvailable';
+import { NotAvailable } from '@bydata/react-supertabs';
 
 <NotAvailable  subTabName='Profile' />
 ```
@@ -223,7 +229,7 @@ import  NotAvailable  from  'components/SuperTabs/NotAvailable';
 >**Keep Alive  (Experimental)**
 
 ```
-import { withKeepAlive } from  "components/SuperTabs/KeepAlive";
+import { withKeepAlive } from '@bydata/react-supertabs';
 
 // Same id provided for this module in navigation.js
 export  default  withKeepAlive(Component, Unique ID);
@@ -239,8 +245,7 @@ Keep Alive Cleanup
 ```
 // This can be incorporated into a component that is always rendered, such as the header.
 
-import { useAliveScope } from  "components/SuperTabs/KeepAlive";
-import  { emitter } from  "components/SuperTabs/SuperTabs";
+import { useAliveScope, emitter } from '@bydata/react-supertabs';
 
 const { drop } =  useAliveScope();
 

package/dist/SuperTabs.js

@@ -91,6 +91,7 @@ var SuperTabs = function SuperTabs(_ref) {
   var addButtonCallBackRefs = (0, _react.useRef)({});
   var transitionTimeOutRef = (0, _react.useRef)(null);
   var expandingTabIdRef = (0, _react.useRef)(null);
+  var homeTabRef = (0, _react.useRef)(null);
   var _useTabContext = (0, _TabContext.useTabContext)(),
     lastOpenedUrl = _useTabContext.lastOpenedUrl,
     SITE_PAGES = _useTabContext.SITE_PAGES,
@@ -169,6 +170,10 @@ var SuperTabs = function SuperTabs(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isHoveringBrand = _useState8[0],
     setIsHoveringBrand = _useState8[1];
+  var _useState9 = (0, _react.useState)(5),
+    _useState0 = _slicedToArray(_useState9, 2),
+    appPagesLeft = _useState0[0],
+    setAppPagesLeft = _useState0[1];
 
   // Refs for hover timeout management
   var hoverTimeoutRef = (0, _react.useRef)(null);
@@ -326,6 +331,15 @@ var SuperTabs = function SuperTabs(_ref) {
       clearTimeout(hoverOffTimeoutRef.current);
     };
   }, []);
+  var updateAppPagesPosition = (0, _react.useCallback)(function () {
+    var _homeTabRef$current;
+    var homeTabRect = (_homeTabRef$current = homeTabRef.current) === null || _homeTabRef$current === void 0 ? void 0 : _homeTabRef$current.getBoundingClientRect();
+    if (!homeTabRect) return;
+    setAppPagesLeft(Math.max(0, homeTabRect.x));
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    updateAppPagesPosition();
+  }, [updateAppPagesPosition, showMainMenu]);
 
   // Hover handlers for brand wrapper
   var handleBrandHoverEnter = function handleBrandHoverEnter() {
@@ -495,8 +509,8 @@ var SuperTabs = function SuperTabs(_ref) {
         setIsSubTabCollapsing(false);
       }, 1000);
       setTimeout(function () {
-        resetMaxWidth(null);
-      }, 200);
+        updateMaxWidth();
+      }, 210);
     } else {
       if (superTabsWrapperElemRef.current) superTabsWrapperElemRef.current.style.setProperty('--transition-duration-extended', "".concat(_Constants.transitionDurationExtended, "ms"));
       // expandedTabIDRef.current = id;
@@ -692,7 +706,8 @@ var SuperTabs = function SuperTabs(_ref) {
     ref: superTabsWrapperElemRef
   }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.NavLink, {
     to: homeUrl,
-    className: "home-tab"
+    className: "home-tab",
+    ref: homeTabRef
     // activeClassName="active"
     // title="Home"
     ,
@@ -716,6 +731,7 @@ var SuperTabs = function SuperTabs(_ref) {
         tab: (0, _Utils.getHomeTab)(homeUrl),
         isHomeTab: true
       });
+      resetMaxWidth();
     },
     exact: true
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -731,6 +747,9 @@ var SuperTabs = function SuperTabs(_ref) {
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "app-pages-wrapper",
+    style: {
+      left: "".concat(appPagesLeft, "px")
+    },
     onMouseEnter: handleMenuHoverEnter,
     onMouseLeave: handleMenuHoverLeave
   }, SITE_PAGES.map(function (page, index) {
@@ -817,7 +836,7 @@ var SuperTabs = function SuperTabs(_ref) {
       }, 0) : subTabWithOpenOrderOneWidth || 0;
       var getItemStyle = function getItemStyle(draggableStyle) {
         return _objectSpread({
-          maxWidth: expandedTabID ? "".concat(tab.width + additionalWidth || width, "px") : "".concat(width, "px")
+          maxWidth: maxWidth ? "".concat(maxWidth, "px") : "".concat(width, "px")
         }, draggableStyle);
       };
       var _filterSubTabs = filterSubTabs(tab.subTabs),
@@ -873,9 +892,10 @@ var SuperTabs = function SuperTabs(_ref) {
           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 ? `${(tab.width + additionalWidth || width) - 10}px` : `${width}px` }}
           ,
           style: {
-            maxWidth: expandedTabID ? "".concat((tab.width + additionalWidth || width) - 10, "px") : "".concat(width, "px")
+            maxWidth: maxWidth ? "".concat(maxWidth, "px") : "".concat(width, "px")
           }
           // title={tab.title}
           ,
@@ -1052,7 +1072,7 @@ var TabContentWrapper = function TabContentWrapper(_ref9) {
   }, /*#__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",
+    className: "super-tab-close-btn",
     title: "Close tab",
     onClick: function onClick(e) {
       e.preventDefault();
@@ -1082,7 +1102,7 @@ var TabContentWrapper = function TabContentWrapper(_ref9) {
   })))), 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",
+    className: "super-tab-close-btn",
     title: "Close tab",
     onClick: function onClick(e) {
       e.preventDefault();
@@ -1113,10 +1133,10 @@ var SubTab = exports.SubTab = function SubTab(_ref0) {
     index = _ref0.index,
     hasSingleSubTab = _ref0.hasSingleSubTab;
   // const { closingUnexpandedSubTab, openingUnexpandedSubTab, subTabChange } = useTabContext();
-  var _useState9 = (0, _react.useState)(true),
-    _useState0 = _slicedToArray(_useState9, 2),
-    showTooltip = _useState0[0],
-    setShowTooltip = _useState0[1];
+  var _useState1 = (0, _react.useState)(true),
+    _useState10 = _slicedToArray(_useState1, 2),
+    showTooltip = _useState10[0],
+    setShowTooltip = _useState10[1];
   var _useTabContext3 = (0, _TabContext.useTabContext)(),
     hiddenExternalToolbars = _useTabContext3.hiddenExternalToolbars,
     tabModePreference = _useTabContext3.tabModePreference;
@@ -1151,8 +1171,9 @@ var SubTab = exports.SubTab = function SubTab(_ref0) {
     return _objectSpread({
       // calculateWidth({ text: title, hasAvatar: subTab.showAvatar, });
       marginLeft: isVisible ? "".concat(_Constants.MarginLeft, "px") : '0px',
-      // maxWidth: maxWidth ? `${maxWidth}px` : `${width}px`,
+      // maxWidth: maxWidth && !isSubTabActive ? `${maxWidth}px` : `${width}px`,
       width: isVisible ? "".concat(expandedTabID === tab.id || closingTabID === tab.id ? subTab.width + additionalWidth || width : width, "px") : '0px',
+      // width: isVisible ? `${!isSubTabActive && (expandedTabID === tab.id || closingTabID === tab.id) ? subTab.width + additionalWidth || width : width}px` : '0px',
       opacity: isVisible ? 1 : 0
     }, draggableStyle);
   };
@@ -1176,6 +1197,7 @@ var SubTab = exports.SubTab = function SubTab(_ref0) {
       className: "tab sub-tab" + (show ? ' show' : '') + (
       // (isTabClosing ? ' slide-out' : '') +
       // (isTabOpening ? ' fade-in' : '') +
+      // (expandedTabID && subTab.width && !isSubTabActive && compareDecimals(subTab.width, width) === -1 ? ' fade-at-end' : '') +
       expandedTabID && subTab.width && (0, _Utils.compareDecimals)(subTab.width, width) === -1 ? ' fade-at-end' : '') + (
       // (closingUnexpandedSubTab || openingUnexpandedSubTab ? ' no-transition' : '') +
       snapshot.isDragging ? ' dragging' : '') + (subTab.isFixed ? ' fixed' : ''),

package/dist/SuperTabs.scss

@@ -72,7 +72,7 @@ body[data-theme="light"] {
         .app-pages-wrapper {
             // Adjust positioning for mobile if needed
             top: calc(100% + 10px);
-            left: 0;
+            // left: 0;
             width: calc(100vw - 20px);
             max-width: 280px;
         }
@@ -169,25 +169,6 @@ body[data-theme="light"] {
         }
     }
 
-    .tab-close-btn {
-        height: 16px;
-        width: 16px;
-        padding: 0;
-        position: relative;
-        top: 0;
-
-        cursor: pointer;
-        border: none;
-        background-color: var(--tab-text-active);
-        mask: url(./images/icon-close-lite.svg) no-repeat center center;
-        mask-size: 8px;
-        transition: background-color ease-out (--transition-duration);
-
-        &:hover {
-            background-color: var(--tab-text-active);
-        }
-    }
-
     .tab {
         position: relative;
         color: var(--tab-text-active);
@@ -398,7 +379,7 @@ body[data-theme="light"] {
                 animation-timing-function: cubic-bezier(0.07, -0.24, 0.6, 0.34);
                 animation-duration: var(--transition-duration);
 
-                .tab-close-btn {
+                .super-tab-close-btn {
                     background-color: var(--tab-color-white);
                 }
             }
@@ -891,4 +872,23 @@ body[data-theme="light"] {
             transform: translateY(0) scale(1);
         }
     }
+}
+
+.super-tab-close-btn {
+    height: 16px;
+    width: 16px;
+    padding: 0;
+    position: relative;
+    top: 0;
+
+    cursor: pointer;
+    border: none;
+    background-color: var(--tab-text-active);
+    mask: url(./images/icon-close-lite.svg) no-repeat center center;
+    mask-size: 8px;
+    transition: background-color ease-out var(--transition-duration);
+
+    &:hover {
+        background-color: var(--tab-text-active);
+    }
 }

package/dist/TabContext.js

@@ -390,16 +390,29 @@ function TabProvider(_ref9) {
     var openedSubTabsLength = subTabs.filter(function (t) {
       return t.order !== 0;
     }).length;
-    var totalTabs = openParentTabsLength + (expandedTabIDRef.current ? openedSubTabsLength : subTabWithOpenOrderOne ? 1 : 0);
-    var containerWidth = ((_superTabsWrapperElem = superTabsWrapperElemRef.current) === null || _superTabsWrapperElem === void 0 ? void 0 : _superTabsWrapperElem.offsetWidth) - (_Constants.HomeTabWidth + _Constants.MainTabGap * openParentTabsLength + openedSubTabsLength * _Constants.MarginLeft + _Constants.StackButtonWidth + _Constants.SubTabWrapperPadding);
-    var maxWidth = Math.ceil(containerWidth / totalTabs * 100) / 100;
+    var totalVisibleTabs = openParentTabsLength + (expandedTabIDRef.current ? openedSubTabsLength : subTabWithOpenOrderOne ? 1 : 0);
+    var visibleSubTabsForMargin = expandedTabIDRef.current ? openedSubTabsLength : 0;
+    var containerWidth = ((_superTabsWrapperElem = superTabsWrapperElemRef.current) === null || _superTabsWrapperElem === void 0 ? void 0 : _superTabsWrapperElem.offsetWidth) - (_Constants.HomeTabWidth + _Constants.MainTabGap * openParentTabsLength + visibleSubTabsForMargin * _Constants.MarginLeft + _Constants.StackButtonWidth + _Constants.SubTabWrapperPadding);
+    // console.log('offsetWidth', superTabsWrapperElemRef.current?.offsetWidth, 'HomeTabWidth', HomeTabWidth, 'MainTabGap', MainTabGap, 'openedSubTabsLength', openedSubTabsLength, 'MarginLeft', MarginLeft, 'StackButtonWidth', StackButtonWidth, 'SubTabWrapperPadding', SubTabWrapperPadding);
+    // console.log('offsetWidth', superTabsWrapperElemRef.current?.offsetWidth, 'HomeTabWidth', HomeTabWidth, 'MainTabGap', MainTabGap * openParentTabsLength, 'openedSubTabsLength', visibleSubTabsForMargin * MarginLeft, 'StackButtonWidth', StackButtonWidth, 'SubTabWrapperPadding', SubTabWrapperPadding);
+    var maxWidth = Math.ceil(containerWidth / totalVisibleTabs * 100) / 100;
     var totalMinWidth = 0;
     var numElementsNeedingSpace = 0;
 
     // Calculate the total width and minimum width of all elements
     var activeTabWidth = activeTabRef.current ? (0, _Utils.getTextWidth)((0, _Utils.getTitle)(activeTabRef.current), _Constants.fontStyle) + 42 : 0;
-    var tabLengthWithoutActiveTab = totalTabs - 1;
-    maxWidth = maxWidth - (activeTabWidth - maxWidth) / tabLengthWithoutActiveTab;
+    var tabLengthWithoutActiveTab = totalVisibleTabs - 1;
+    var subTabWithOpenOrderOneWidth = subTabWithOpenOrderOne ? Math.ceil((0, _Utils.calculateWidth)({
+      text: (0, _Utils.getTitle)(subTabWithOpenOrderOne),
+      hasAvatar: subTabWithOpenOrderOne.showAvatar,
+      addMargin: false
+    }) * 100) / 100 : 0;
+    var shouldReserveOpenSubTabWidth = !expandedTabIDRef.current ? !!subTabWithOpenOrderOne : !!openedSubTabsLength;
+    var tabLengthWithoutReservedTabs = tabLengthWithoutActiveTab - (shouldReserveOpenSubTabWidth ? 1 : 0);
+    var widthToRedistribute = activeTabWidth - maxWidth + (shouldReserveOpenSubTabWidth ? subTabWithOpenOrderOneWidth - maxWidth : 0);
+    if (tabLengthWithoutReservedTabs > 0) {
+      maxWidth = maxWidth - widthToRedistribute / tabLengthWithoutReservedTabs;
+    }
     setMaxWidth(maxWidth);
     var newData = data.map(function (tab) {
       var _activeTabRef$current2;
@@ -1064,13 +1077,18 @@ function TabProvider(_ref9) {
       }
       return tabsCopy;
     });
+    var oldTitle = (0, _Utils.getTitle)(oldTab);
+    var newTitle = (0, _Utils.getTitle)(newTab);
+    if (oldTitle !== newTitle) {
+      updateMaxWidth();
+    }
     // openTab({ tab, isSubTab });
     updateCurrentTab({
       tab: tab,
       isSubTab: isSubTab,
       parentId: activeTabRef.current.id
     });
-  }, [updateCurrentTab, updateActiveSubTab, updateActiveTab, updateTabs, currentEntityId]);
+  }, [updateTabs, updateCurrentTab, currentEntityId, updateActiveSubTab, updateActiveTab, updateMaxWidth]);
   var closeTab = (0, _react.useCallback)(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
     var _ref25,
       tab,

package/dist/TabList.js

@@ -178,7 +178,7 @@ var TabList = function TabList(_ref) {
     value: tabListSearch,
     onChange: handleSearch
   }), tabListSearch.trim() && /*#__PURE__*/_react["default"].createElement("button", {
-    className: "tab-list-close tab-close-btn",
+    className: "tab-list-close super-tab-close-btn",
     onClick: function onClick() {
       return setTabListSearch('');
     }
@@ -220,7 +220,7 @@ var TabList = function TabList(_ref) {
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "title-wrapper"
     }, title, !tab.isFixed && /*#__PURE__*/_react["default"].createElement("span", {
-      className: "tab-list-close-btn tab-close-btn",
+      className: "tab-list-close-btn super-tab-close-btn",
       onClick: function onClick(e) {
         e.preventDefault();
         e.stopPropagation();

package/dist/TabList.scss

@@ -115,7 +115,7 @@
                 width: 100%;
             }
 
-            .tab-close-btn {
+            .super-tab-close-btn {
                 opacity: 0;
                 visibility: hidden;
                 transition: all 0.3s;
@@ -125,7 +125,7 @@
             &:hover {
                 background-color: var(--tab-background-button-secondary);
 
-                .tab-close-btn {
+                .super-tab-close-btn {
                     opacity: 1;
                     visibility: visible;
                 }
@@ -225,7 +225,7 @@
                     transition: all 0.3s;
                 }
 
-                .tab-close-btn {
+                .super-tab-close-btn {
                     opacity: 1;
                     visibility: visible;
                 }
@@ -259,7 +259,7 @@
                 background-color: var(--tab-background-button-secondary);
             }
 
-            .tab-close-btn {
+            .super-tab-close-btn {
                 opacity: 0;
                 visibility: hidden;
                 transition: background-color 0.3s;

package/package.json

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