@bydata/react-supertabs 1.1.0

package/dist/TabList.js

@@ -0,0 +1,234 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _TabContext = require("./TabContext");
+var _reactRouterDom = require("react-router-dom");
+var _ClickOutsideListener = _interopRequireDefault(require("./ClickOutsideListener"));
+require("./TabList.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var TabList = function TabList(_ref) {
+  var closeList = _ref.closeList,
+    handleTabClick = _ref.handleTabClick,
+    id = _ref.id,
+    isTabExpanded = _ref.isTabExpanded,
+    onAddButtonClick = _ref.onAddButtonClick,
+    onClose = _ref.onClose,
+    _ref$showAddButton = _ref.showAddButton,
+    showAddButton = _ref$showAddButton === void 0 ? true : _ref$showAddButton,
+    showTabStack = _ref.showTabStack,
+    tabs = _ref.tabs,
+    parentIndex = _ref.parentIndex,
+    customAddButtons = _ref.customAddButtons,
+    tabListSearch = _ref.tabListSearch,
+    setTabListSearch = _ref.setTabListSearch,
+    hasCustomAddButtons = _ref.hasCustomAddButtons;
+  var timeOutRef = (0, _react.useRef)(null);
+  var searchWrapperRef = (0, _react.useRef)(null);
+  // const { setOpeningUnexpandedSubTab, openingUnexpandedSubTabTimeoutRef, setSubTabChange, } = useTabContext();
+  var _useTabContext = (0, _TabContext.useTabContext)(),
+    activeTab = _useTabContext.activeTab,
+    activeSubTab = _useTabContext.activeSubTab,
+    updateSubTabChange = _useTabContext.updateSubTabChange;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchExpanded = _useState2[0],
+    setSearchExpanded = _useState2[1];
+  var _useState3 = (0, _react.useState)(showTabStack === id),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showList = _useState4[0],
+    setShowList = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    position = _useState6[0],
+    setPosition = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (showTabStack === '') {
+      setShowList(showTabStack === id);
+    } else {
+      timeOutRef.current = setTimeout(function () {
+        setShowList(showTabStack === id);
+        if (showTabStack !== id) {
+          setSearchExpanded(false);
+        }
+      }, 200);
+    }
+    return function () {
+      return clearTimeout(timeOutRef.current);
+    };
+  }, [showTabStack, id]);
+  (0, _react.useLayoutEffect)(function () {
+    var popupElem = document.querySelector(".stack-".concat(id));
+    var position = null;
+    if (popupElem) {
+      var popupRect = popupElem.getBoundingClientRect();
+      var windowWidth = window.innerWidth;
+      if (popupRect.right + 300 > windowWidth) {
+        position = {
+          right: "".concat(window.innerWidth - (popupRect === null || popupRect === void 0 ? void 0 : popupRect.right), "px")
+        };
+      } else {
+        position = {
+          left: "".concat((popupRect === null || popupRect === void 0 ? void 0 : popupRect.left) + 5, "px")
+        };
+      }
+    }
+    if (position && showTabStack) setPosition(position);
+  }, [id, showTabStack]);
+  var handleSearch = function handleSearch(e) {
+    setTabListSearch(e.target.value);
+  };
+  var expandSearch = function expandSearch() {
+    if (!searchExpanded) {
+      setSearchExpanded(true);
+      searchWrapperRef.current.focus();
+    }
+  };
+  var handlePlusButtonClick = function handlePlusButtonClick() {
+    onAddButtonClick();
+    closeList();
+  };
+  var handleOutsideClick = function handleOutsideClick(e) {
+    var _e$target, _e$target2;
+    if (typeof (e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.className) === 'string' && e !== null && e !== void 0 && (_e$target2 = e.target) !== null && _e$target2 !== void 0 && (_e$target2 = _e$target2.className) !== null && _e$target2 !== void 0 && _e$target2.includes('tab-list')) return; // This is to handle the case when the click is outside the tab list (breaking page for svg )
+    showAddButton && setSearchExpanded(false);
+    setTabListSearch('');
+    setShowList(false);
+    closeList();
+  };
+  var filterTabs = function filterTabs(tabList) {
+    var searchString = tabListSearch.toLowerCase().trim();
+    if (!searchString) return tabList;
+    var exactMatches = [];
+    var otherMatches = [];
+    tabList.forEach(function (tab) {
+      var title = tab.title || tab.name || (tab !== null && tab !== void 0 && tab.firstName ? "".concat(tab.firstName, " ").concat(tab.lastName || "") : "Untitled");
+      var tabTitle = title.toLowerCase().trim();
+      if (tabTitle.includes(searchString)) {
+        var nameParts = tabTitle.split(" ");
+        var isExactMatch = false;
+        for (var i = 0; i < nameParts.length; i++) {
+          if (nameParts[i].startsWith(searchString)) {
+            if (!exactMatches[i]) exactMatches[i] = [];
+            exactMatches[i].push(tab);
+            isExactMatch = true;
+            break; // no need to check further parts
+          }
+        }
+        if (!isExactMatch) {
+          otherMatches.push(tab);
+        }
+      }
+    });
+    return exactMatches.flat().concat(otherMatches);
+  };
+  var filteredTabs = filterTabs(tabs);
+  return /*#__PURE__*/React.createElement(_ClickOutsideListener["default"], {
+    onOutsideClick: handleOutsideClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tab-list-wrapper ".concat(showList ? 'show' : ''),
+    style: position
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tab-list"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tab-list-header ".concat(hasCustomAddButtons ? 'wrap' : '')
+  }, customAddButtons.length > 0 ? customAddButtons.map(function (predefinedSubTab, index) {
+    var title = predefinedSubTab.title || predefinedSubTab.name || (predefinedSubTab !== null && predefinedSubTab !== void 0 && predefinedSubTab.firstName ? "".concat(predefinedSubTab.firstName, " ").concat(predefinedSubTab.lastName || '') : 'Untitled');
+    return /*#__PURE__*/React.createElement(_react.Fragment, {
+      key: predefinedSubTab.id || index
+    }, /*#__PURE__*/React.createElement("button", {
+      className: "icon-add",
+      onClick: function onClick() {
+        onAddButtonClick(predefinedSubTab);
+        closeList();
+        setShowList(false);
+      }
+    }, title), !(index == customAddButtons.length - 1) && /*#__PURE__*/React.createElement("span", {
+      className: "pipe"
+    }));
+  }) : showAddButton && !hasCustomAddButtons && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    className: "icon-add",
+    onClick: handlePlusButtonClick
+  }, "Tab"), /*#__PURE__*/React.createElement("span", {
+    className: "pipe"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "tab-list-search-wrapper ".concat(!showAddButton || hasCustomAddButtons ? 'no-add-tab' : '', " ").concat(searchExpanded || !showAddButton || hasCustomAddButtons ? 'expanded' : ''),
+    onClick: expandSearch
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tab-list-search-wrapper-inner"
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: searchWrapperRef,
+    type: "text",
+    className: "tab-list-search",
+    value: tabListSearch,
+    onChange: handleSearch
+  }), tabListSearch.trim() && /*#__PURE__*/React.createElement("button", {
+    className: "tab-list-close tab-close-btn",
+    onClick: function onClick() {
+      return setTabListSearch('');
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "tab-list-open-tabs"
+  }, /*#__PURE__*/React.createElement("div", {
+    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.createElement(_reactRouterDom.NavLink, {
+      className: "tab-list-open-tab ".concat(id === activeTab.id && tab.id === activeSubTab.id ? 'active' : ''),
+      key: tab.id || index,
+      onClick: function onClick(e) {
+        // e.preventDefault();
+        handleTabClick({
+          tab: tab,
+          isSubTab: true,
+          parentId: id,
+          sort: true
+        });
+        // clearTimeout(openingUnexpandedSubTabTimeoutRef.current);
+        updateSubTabChange({
+          parentTabId: id,
+          newTab: tab,
+          oldTab: tabs.find(function (t) {
+            return t.open_order === 1;
+          })
+        });
+        // setOpeningUnexpandedSubTab(true);
+        // openingUnexpandedSubTabTimeoutRef.current = setTimeout(() => {
+        //     setOpeningUnexpandedSubTab(false);
+        // }, 300);
+        closeList();
+        setShowList(false);
+      },
+      to: tab.url
+    }, tab.icon && /*#__PURE__*/React.createElement("span", {
+      className: "icon-container ".concat(tab.icon)
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "title-wrapper"
+    }, title, !tab.isFixed && /*#__PURE__*/React.createElement("span", {
+      className: "tab-list-close-btn tab-close-btn",
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose({
+          tab: tab,
+          isSubTab: true,
+          parentIndex: parentIndex
+        });
+        closeList();
+        setShowList(false);
+      }
+    })));
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "tab-list-no-data"
+  }, "No data found"))))));
+};
+var _default = exports["default"] = TabList;

package/dist/TabList.scss

@@ -0,0 +1,274 @@
+.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;
+
+    &.show {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+    }
+
+    .pipe {
+        width: 1px;
+        height: 12px;
+        background-color: var(--tab-text-normal);
+    }
+
+    .icon-add {
+        background-color: transparent;
+        border: none;
+        color: var(--tab-text-normal);
+        transition: all 0.3s;
+        padding: 0 0 0 13px;
+        font-weight: 600;
+        position: relative;
+
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            background-color: var(--tab-text-normal);
+            height: 1.5px;
+            width: 8px;
+            left: 0;
+            top: 50%;
+            transition: all 0.3s;
+        }
+
+        &::after {
+            transform: rotate(90deg);
+        }
+
+        &:hover {
+            color: var(--tab-text-active);
+
+            &::before,
+            &::after {
+                background-color: var(--tab-text-active);
+            }
+        }
+    }
+
+    .tab-list {
+        background-color: var(--tab-background-overlay, #272B32);
+        width: 300px;
+        border-radius: 2px;
+        padding: 7px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        box-shadow: 0px 5px 10px 0px #00000080;
+
+        .tab-list-open-tabs,
+        .tab-list-tabs-wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
+        .tab-list-tabs-wrapper {
+            max-height: 50vh;
+            overflow-y: auto;
+        }
+
+        .tab-list-no-data,
+        .tab-list-open-tab {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            min-height: 38px;
+            padding: 0 10px;
+        }
+
+        .tab-list-no-data {
+            justify-content: center;
+            color: var(--tab-text-normal);
+        }
+
+        .tab-list-open-tab {
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            background-color: transparent;
+            border: none;
+            color: var(--tab-text-active);
+            display: flex;
+            justify-content: flex-start;
+            column-gap: 10px;
+
+            .icon-container {
+                display: inline-block;
+                width: 14px;
+                height: 11px;
+                background-color: var(--tab-text-active);
+            }
+
+            .title-wrapper {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+            }
+
+            .tab-close-btn {
+                opacity: 0;
+                visibility: hidden;
+                transition: all 0.3s;
+            }
+
+            &.active,
+            &:hover {
+                background-color: var(--tab-background-button-secondary);
+
+                .tab-close-btn {
+                    opacity: 1;
+                    visibility: visible;
+                }
+            }
+        }
+
+        .close-btn {
+            color: var(--tab-text-normal);
+            cursor: pointer;
+        }
+
+        .close-btn:hover {
+            color: var(--tab-text-active);
+        }
+    }
+
+    .tab-list-header {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+        height: 38px;
+        padding: 7px 10px;
+
+        &.wrap {
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            height: unset;
+        }
+
+        // .icon-plus {
+        //     width: 30px;
+        //     height: 30px;
+        //     border-radius: 2px;
+        //     background-color: #26282B;
+
+        //     &:hover {
+
+        //         &::before,
+        //         &::after {
+        //             background-color: #FFF;
+        //         }
+        //     }
+        // }
+
+        .tab-list-search-wrapper {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            transition: all 0.3s;
+
+            .tab-list-search-wrapper-inner {
+                position: relative;
+                left: 0;
+                transition: left 0.3s;
+
+                &::before {
+                    content: '';
+                    background-color: var(--tab-text-normal);
+                    z-index: 1;
+                    position: absolute;
+                    height: 12px;
+                    width: 12px;
+                    left: 0;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    transition: background-color 0.3s;
+                    mask: url(./images/icon-search.svg) no-repeat center center;
+                    mask-size: 12px;
+                }
+            }
+
+            &:hover:not(.expanded) {
+                cursor: pointer;
+
+                .tab-list-search-wrapper-inner::before {
+                    background-color: var(--tab-text-active);
+                }
+            }
+
+            &.expanded {
+                .tab-list-search-wrapper-inner {
+                    height: 38px;
+                    left: -74px;
+
+                    &::before {
+                        left: 10px;
+                    }
+                }
+
+                input[type="text"] {
+                    height: 38px;
+                    width: 286px;
+                    padding: 0 10px 0 30px;
+                    border-radius: 2px;
+                    position: relative;
+                    color: var(--tab-text-active);
+                    transition: all 0.3s;
+                }
+
+                .tab-close-btn {
+                    opacity: 1;
+                    visibility: visible;
+                }
+            }
+
+            &.no-add-tab {
+                .tab-list-search-wrapper-inner {
+                    left: -10px;
+                }
+            }
+
+            // .icon-search {
+            //     background-color: #646464;
+            //     display: inline-block;
+            //     border: none;
+            //     height: 36px;
+            //     width: 12px;
+            //     mask: url(../../images/icon-search.svg) no-repeat center center;
+            //     mask-size: 12px;
+            //     transition: all 0.3s;
+
+            //     &:hover {
+            //         background-color: #FFF;
+            //     }
+            // }
+
+            input[type="text"] {
+                width: 0;
+                padding: 0;
+                border: none;
+                background-color: var(--tab-background-button-secondary);
+            }
+
+            .tab-close-btn {
+                opacity: 0;
+                visibility: hidden;
+                transition: background-color 0.3s;
+
+                position: absolute;
+                right: 7px;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+    }
+}

package/dist/TabStack.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _TabContext = require("./TabContext");
+var _TabList = _interopRequireDefault(require("./TabList"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var TabStack = function TabStack(_ref) {
+  var handleTabClick = _ref.handleTabClick,
+    handleTabClose = _ref.handleTabClose,
+    index = _ref.index,
+    isActive = _ref.isActive,
+    isTabClosing = _ref.isTabClosing,
+    showAddButton = _ref.showAddButton,
+    showChevron = _ref.showChevron,
+    showSubTabs = _ref.showSubTabs,
+    subTabsInList = _ref.subTabsInList,
+    tab = _ref.tab,
+    toggleSubTabs = _ref.toggleSubTabs,
+    addButtonCallBackRefs = _ref.addButtonCallBackRefs,
+    SITE_PREFIX = _ref.SITE_PREFIX,
+    isMobileView = _ref.isMobileView;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    showTabStack = _useState2[0],
+    setShowTabStack = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tabListSearch = _useState4[0],
+    setTabListSearch = _useState4[1];
+  var _useTabContext = (0, _TabContext.useTabContext)(),
+    hasPrivilege = _useTabContext.hasPrivilege;
+  var customAddButtons = (0, _react.useMemo)(function () {
+    if (!tab.customAddButtons || !Array.isArray(tab.customAddButtons) || tab.customAddButtons.length == 0 || !!isMobileView) return [];
+    return tab.customAddButtons.filter(function (item) {
+      return hasPrivilege(item.privilege);
+    });
+  }, [tab.customAddButtons, hasPrivilege]);
+  var hasAddBtnPrivilege = typeof tab.showAddButton === 'boolean' ? tab.showAddButton : _typeof(tab.showAddButton) === 'object' && Array.isArray(tab.showAddButton) ? hasPrivilege(tab.showAddButton) : false;
+  var hasCustomAddButtons = tab.customAddButtons && Array.isArray(tab.customAddButtons) && tab.customAddButtons.length > 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "stack-wrapper stack-".concat(tab.id, " ").concat(showSubTabs || isActive ? 'expanded' : '', " ").concat(isTabClosing ? 'stack-closing' : ''),
+    onMouseEnter: function onMouseEnter() {
+      return !showAddButton && subTabsInList.length > 1 && setShowTabStack(tab.id);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return !showAddButton && subTabsInList.length > 1 && !tabListSearch.trim() && setShowTabStack(null);
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "icon-stack",
+    onClick: function onClick() {
+      setShowTabStack('');
+      if (hasCustomAddButtons && subTabsInList.length <= 1) {
+        !showTabStack && setShowTabStack(tab.id);
+      } else if (showAddButton) {
+        var _addButtonCallBackRef, _addButtonCallBackRef2;
+        (_addButtonCallBackRef = addButtonCallBackRefs.current) === null || _addButtonCallBackRef === void 0 || (_addButtonCallBackRef2 = _addButtonCallBackRef[tab.id]) === null || _addButtonCallBackRef2 === void 0 || _addButtonCallBackRef2.call(_addButtonCallBackRef);
+      } else {
+        toggleSubTabs(tab, tab.subTabs);
+      }
+    }
+  }, showAddButton && !showChevron && /*#__PURE__*/React.createElement("span", {
+    className: "icon-plus"
+  }), showChevron && /*#__PURE__*/React.createElement("span", {
+    className: "icon-chevron  ".concat(showSubTabs ? 'open' : '')
+  })), /*#__PURE__*/React.createElement(_TabList["default"], {
+    id: tab.id,
+    isTabExpanded: showSubTabs,
+    showTabStack: showTabStack,
+    showAddButton: hasAddBtnPrivilege,
+    handleTabClick: handleTabClick,
+    tabs: subTabsInList,
+    onClose: handleTabClose,
+    parentIndex: index,
+    hasCustomAddButtons: hasCustomAddButtons,
+    customAddButtons: customAddButtons,
+    onAddButtonClick: function onAddButtonClick(data) {
+      var _addButtonCallBackRef3, _addButtonCallBackRef4;
+      return (_addButtonCallBackRef3 = addButtonCallBackRefs.current) === null || _addButtonCallBackRef3 === void 0 || (_addButtonCallBackRef4 = _addButtonCallBackRef3[tab.id]) === null || _addButtonCallBackRef4 === void 0 ? void 0 : _addButtonCallBackRef4.call(_addButtonCallBackRef3, data);
+    },
+    closeList: function closeList() {
+      return setShowTabStack(null);
+    },
+    tabListSearch: tabListSearch,
+    setTabListSearch: setTabListSearch
+  }));
+};
+var _default = exports["default"] = TabStack;