labsense-ui-kit 1.2.93 → 1.2.95

package/dist/index.js

@@ -9274,86 +9274,71 @@ var ProgressBar = function ProgressBar(_ref3) {
 };
 
 var _templateObject$n, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$8, _templateObject6$7, _templateObject7$5;
-var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  max-width: ", ";\n  height: 100vh;\n  background: ", ";\n  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
-  var $isExpanded = _ref.$isExpanded;
-  return $isExpanded ? 'max-content' : '68px';
-}, function (_ref2) {
-  var $isExpanded = _ref2.$isExpanded;
-  return $isExpanded ? '400px' : '68px';
-}, function (_ref3) {
-  var $background = _ref3.$background,
-    theme = _ref3.theme;
+var SidebarContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: 68px;\n  max-width: 68px;\n  height: 100vh;\n  background: ", ";\n  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n\n  /* Expand on hover */\n  &:hover {\n    width: max-content;\n    max-width: 400px;\n\n    /* You can also add a class for children */\n    span, .expandable {\n      opacity: 1;\n      visibility: visible;\n      transform: translateX(0);\n    }\n  }\n"])), function (_ref) {
+  var $background = _ref.$background,
+    theme = _ref.theme;
   return $background || theme.vms.accent.softBlue;
 });
-var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: none;\n  padding: ", ";\n  color: ", ";\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white on hover */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white when active */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref4) {
-  var $padding = _ref4.$padding;
+var SidebarLink = styled__default(reactRouterDom.NavLink)(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  text-decoration: none;\n  transition: none;\n  padding: ", ";\n  color: ", ";\n\n  /* Hover state */\n  &:hover {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white on hover */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n\n  /* Active link state */\n  &.active {\n    color: ", ";\n    background: ", ";\n    \n    /* Make icons white when active */\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref2) {
+  var $padding = _ref2.$padding;
   return $padding;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.vms.text.medium;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.vms.text.white;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.vms.text.medium;
+  return theme.vms["default"].primary;
 }, function (_ref6) {
   var theme = _ref6.theme;
   return theme.vms.text.white;
 }, function (_ref7) {
   var theme = _ref7.theme;
-  return theme.vms["default"].primary;
+  return theme.vms.text.white;
 }, function (_ref8) {
   var theme = _ref8.theme;
-  return theme.vms.text.white;
+  return theme.vms["default"].primary;
 }, function (_ref9) {
   var theme = _ref9.theme;
   return theme.vms.text.white;
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.vms["default"].primary;
-}, function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.vms.text.white;
 });
-var IconWrapper$2 = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: none;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref12) {
-  var $selected = _ref12.$selected,
-    theme = _ref12.theme;
+var IconWrapper$2 = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  transition: none;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref10) {
+  var $selected = _ref10.$selected,
+    theme = _ref10.theme;
   return $selected ? theme.vms["default"].primary : theme.vms["default"].tertiary;
 });
-var StyledContainer = styled__default(Container)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  \n  &:hover {\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n  \n  &.active {\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref13) {
-  var theme = _ref13.theme;
+var StyledContainer = styled__default(Container)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  \n  &:hover {\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n  \n  &.active {\n    svg {\n      color: ", " !important;\n      transition: none;\n    }\n  }\n"])), function (_ref11) {
+  var theme = _ref11.theme;
   return theme.vms.text.white;
-}, function (_ref14) {
-  var theme = _ref14.theme;
+}, function (_ref12) {
+  var theme = _ref12.theme;
   return theme.vms.text.white;
 });
 var Logo = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  transition: none;\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n"])));
-var TextContainer = styled__default.span(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: none;\n  transform: ", ";\n"])), function (_ref15) {
-  var $padding = _ref15.$padding;
+var TextContainer = styled__default.span(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateX(-10px);\n  transition: all 0.3s ease;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n\n  ", ":hover & {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0);\n  }\n"])), function (_ref13) {
+  var $padding = _ref13.$padding;
   return $padding;
-}, function (_ref16) {
-  var $fontSize = _ref16.$fontSize;
+}, function (_ref14) {
+  var $fontSize = _ref14.$fontSize;
   return $fontSize || '20px';
-}, function (_ref17) {
-  var $fontWeight = _ref17.$fontWeight;
+}, function (_ref15) {
+  var $fontWeight = _ref15.$fontWeight;
   return $fontWeight || '500';
-}, function (_ref18) {
-  var $isExpanded = _ref18.$isExpanded;
-  return $isExpanded ? 1 : 0;
-}, function (_ref19) {
-  var $isExpanded = _ref19.$isExpanded;
-  return $isExpanded ? 'visible' : 'hidden';
-}, function (_ref20) {
-  var $isExpanded = _ref20.$isExpanded;
-  return $isExpanded ? 'translateX(0)' : 'translateX(-10px)';
-});
-var NotificationBadge = styled__default.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -4px;\n  right: -4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref21) {
-  var $position = _ref21.$position;
+}, SidebarContainer);
+var NotificationBadge = styled__default.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -4px;\n  right: -4px;\n  background: red;\n  color: white;\n  font-size: 10px;\n  font-weight: bold;\n  border-radius: 50%;\n  padding: 2px 5px;\n  min-width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref16) {
+  var $position = _ref16.$position;
   return $position || 'absolute';
 });
-var Sidebar = function Sidebar(_ref22) {
-  var logo = _ref22.logo,
-    content = _ref22.content,
-    background = _ref22.background,
-    ProfileContent = _ref22.ProfileContent,
-    _ref22$isExpanded = _ref22.isExpanded,
-    isExpanded = _ref22$isExpanded === void 0 ? false : _ref22$isExpanded,
-    setIsExpanded = _ref22.setIsExpanded;
+var Sidebar = function Sidebar(_ref17) {
+  var logo = _ref17.logo,
+    content = _ref17.content,
+    background = _ref17.background,
+    ProfileContent = _ref17.ProfileContent,
+    _ref17$isExpanded = _ref17.isExpanded,
+    isExpanded = _ref17$isExpanded === void 0 ? false : _ref17$isExpanded,
+    setIsExpanded = _ref17.setIsExpanded;
   var location = reactRouterDom.useLocation();
   var _useState = React.useState({}),
     openMenus = _useState[0],
@@ -9391,9 +9376,8 @@ var Sidebar = function Sidebar(_ref22) {
       return currentBase === getBasePath(child.activeUrl) || currentBase === getBasePath(child.url);
     }));
   };
-  var ChildLink = React__default.memo(function (_ref23) {
-    var child = _ref23.child,
-      isExpanded = _ref23.isExpanded;
+  var ChildLink = React__default.memo(function (_ref18) {
+    var child = _ref18.child;
     var themeColors = styled.useTheme();
     var location = reactRouterDom.useLocation();
     var active = getBasePath(location.pathname) === getBasePath(child.activeUrl) || getBasePath(location.pathname) === getBasePath(child.url);
@@ -9421,7 +9405,6 @@ var Sidebar = function Sidebar(_ref22) {
       "$justifyContent": 'space-between',
       "$gap": '5px'
     }, React__default.createElement(TextContainer, {
-      "$isExpanded": isExpanded,
       "$fontSize": '12px'
     }, child.label), _getTotalNotifications(child) > 0 && React__default.createElement(NotificationBadge, {
       "$position": 'unset'
@@ -9440,14 +9423,14 @@ var Sidebar = function Sidebar(_ref22) {
       });
     }));
   };
-  var SidebarItem = React__default.memo(function (_ref24) {
-    var item = _ref24.item,
-      isActive = _ref24.isActive,
-      isOpen = _ref24.isOpen,
-      hasChildren = _ref24.hasChildren,
-      isExpanded = _ref24.isExpanded,
-      onToggle = _ref24.onToggle,
-      renderChildLinks = _ref24.renderChildLinks;
+  var SidebarItem = React__default.memo(function (_ref19) {
+    var item = _ref19.item,
+      isActive = _ref19.isActive,
+      isOpen = _ref19.isOpen,
+      hasChildren = _ref19.hasChildren,
+      isExpanded = _ref19.isExpanded,
+      onToggle = _ref19.onToggle,
+      renderChildLinks = _ref19.renderChildLinks;
     var themeColors = styled.useTheme();
     var activeClass = isActive ? 'active' : '';
     var handleClick = React__default.useCallback(function () {
@@ -9482,7 +9465,6 @@ var Sidebar = function Sidebar(_ref22) {
       weight: item.iconWeight,
       color: isActive ? themeColors.vms.text.white : themeColors.vms.text.medium
     })), _getTotalNotifications(item) > 0 && React__default.createElement(NotificationBadge, null, _getTotalNotifications(item) > 99 ? '99+' : _getTotalNotifications(item))), React__default.createElement(TextContainer, {
-      "$isExpanded": isExpanded,
       "$fontSize": '14px'
     }, item.label)), hasChildren && React__default.createElement(Container, {
       "$padding": '9px',
@@ -9526,7 +9508,6 @@ var Sidebar = function Sidebar(_ref22) {
   }, [setIsExpanded]);
   return React__default.createElement(SidebarContainer, {
     "$background": background,
-    "$isExpanded": isExpanded,
     onMouseEnter: function onMouseEnter() {
       return handleSidebarExpansion(true);
     },
@@ -9536,14 +9517,12 @@ var Sidebar = function Sidebar(_ref22) {
   }, React__default.createElement(Container, {
     "$flexDirection": 'column',
     "$gap": '28px',
-    "$width": '100%'
+    "$width": '100%',
+    "$overflow": 'hidden'
   }, logo && (logo.icon ? React__default.createElement(Logo, null, React__default.createElement(Icon, {
     icon: logo.icon,
     color: logo.iconColor
-  }), React__default.createElement(TextContainer, {
-    "$isExpanded": isExpanded,
-    "$fontWeight": '700'
-  }, logo.name)) : logo.imageDetails && React__default.createElement(Logo, null, React__default.createElement("img", {
+  }), React__default.createElement(TextContainer, null, logo.name)) : logo.imageDetails && React__default.createElement(Logo, null, React__default.createElement("img", {
     src: logo.imageDetails.url,
     alt: logo.imageDetails.altText,
     width: logo.imageDetails.width,
@@ -9708,41 +9687,44 @@ var TableRow = function TableRow(_ref) {
 };
 
 var _templateObject$q, _templateObject2$l, _templateObject3$e, _templateObject4$b, _templateObject5$9;
-var TableContainer = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  scrollbar-width: thin;\n  flex: 1;\n"])), function (_ref) {
+var TableContainer = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  scrollbar-width: thin;\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  box-sizing: border-box;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.vms.brand.light;
 });
-var TableHeader = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n  width: 100%;\n"])), function (_ref2) {
-  var $hbcolor = _ref2.$hbcolor,
-    theme = _ref2.theme;
-  return $hbcolor || theme.vms["default"].tertiary;
-}, function (_ref3) {
-  var $tcolor = _ref3.$tcolor,
-    theme = _ref3.theme;
-  return $tcolor || theme.vms.text.white;
-});
-var TableData = styled__default.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: ", ";\n"])), function (_ref4) {
-  var $isLegends = _ref4.$isLegends;
+var TableData = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: ", ";\n  /* Customize scrollbar */\n  &::-webkit-scrollbar {\n    width: 16px;\n  }\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background-color: rgba(0, 0, 0, 0.2);\n    border-radius: 8px;\n    border: 4px solid transparent;\n    background-clip: content-box;\n  }\n"])), function (_ref2) {
+  var $isLegends = _ref2.$isLegends;
   return $isLegends ? 'calc(100% - 56px)' : 'calc(100% - 36px)';
 });
-var LegendDivider = styled__default.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background: ", ";\n  margin-right: ", ";\n"])), function (_ref5) {
-  var theme = _ref5.theme;
+var LegendDivider = styled__default.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background: ", ";\n  margin-right: ", ";\n"])), function (_ref3) {
+  var theme = _ref3.theme;
   return theme.vms.border.extraLight;
-}, function (_ref6) {
-  var $marginRight = _ref6.$marginRight;
+}, function (_ref4) {
+  var $marginRight = _ref4.$marginRight;
   return $marginRight != null ? $marginRight : '0px';
 });
-var Divider = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref7) {
-  var theme = _ref7.theme;
+var Divider = styled__default.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref5) {
+  var theme = _ref5.theme;
   return theme.vms.border.extraLight;
 });
-var Table = function Table(_ref8) {
-  var tableObject = _ref8.tableObject,
-    _ref8$filter = _ref8.filter,
-    filter = _ref8$filter === void 0 ? false : _ref8$filter,
-    loading = _ref8.loading,
-    _ref8$noDataText = _ref8.noDataText,
-    noDataText = _ref8$noDataText === void 0 ? 'No Data Found!' : _ref8$noDataText;
+var TableHeaderWithScrollbarAdjustment = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n  padding-right: ", ";\n  width: 100%;\n  box-sizing: border-box;\n"])), function (_ref6) {
+  var $hbcolor = _ref6.$hbcolor,
+    theme = _ref6.theme;
+  return $hbcolor || theme.vms["default"].tertiary;
+}, function (_ref7) {
+  var $tcolor = _ref7.$tcolor,
+    theme = _ref7.theme;
+  return $tcolor || theme.vms.text.white;
+}, function (_ref8) {
+  var $hasScrollbar = _ref8.$hasScrollbar;
+  return $hasScrollbar ? '23px' : '12px';
+});
+var Table = function Table(_ref9) {
+  var tableObject = _ref9.tableObject,
+    _ref9$filter = _ref9.filter,
+    filter = _ref9$filter === void 0 ? false : _ref9$filter,
+    loading = _ref9.loading,
+    _ref9$noDataText = _ref9.noDataText,
+    noDataText = _ref9$noDataText === void 0 ? 'No Data Found!' : _ref9$noDataText;
   var themeColors = useTheme();
   var rowconfig = tableObject.rowconfig,
     tableheaderconfig = tableObject.tableheaderconfig;
@@ -9752,6 +9734,10 @@ var Table = function Table(_ref8) {
   var _useState2 = React.useState(false),
     isAllSelected = _useState2[0],
     setIsAllSelected = _useState2[1];
+  var _useState3 = React.useState(false),
+    hasScrollbar = _useState3[0],
+    setHasScrollbar = _useState3[1];
+  var tableDataRef = React__default.useRef(null);
   var getRole = function getRole(row) {
     var _row$rowData, _row$rowData$, _row$rowData$$CustomF, _row$rowData$$CustomF2, _row$rowData2, _row$rowData2$, _row$rowData2$$Custom, _row$rowData2$$Custom2;
     return ((_row$rowData = row.rowData) === null || _row$rowData === void 0 ? void 0 : (_row$rowData$ = _row$rowData[1]) === null || _row$rowData$ === void 0 ? void 0 : (_row$rowData$$CustomF = _row$rowData$.CustomFunction) === null || _row$rowData$$CustomF === void 0 ? void 0 : (_row$rowData$$CustomF2 = _row$rowData$$CustomF.props) === null || _row$rowData$$CustomF2 === void 0 ? void 0 : _row$rowData$$CustomF2.text) || ((_row$rowData2 = row.rowData) === null || _row$rowData2 === void 0 ? void 0 : (_row$rowData2$ = _row$rowData2[1]) === null || _row$rowData2$ === void 0 ? void 0 : (_row$rowData2$$Custom = _row$rowData2$.CustomFunction) === null || _row$rowData2$$Custom === void 0 ? void 0 : (_row$rowData2$$Custom2 = _row$rowData2$$Custom.props) === null || _row$rowData2$$Custom2 === void 0 ? void 0 : _row$rowData2$$Custom2.$text) || 'Unassigned';
@@ -9791,7 +9777,42 @@ var Table = function Table(_ref8) {
     });
     setIsAllSelected(allChecked);
   }, [rowconfig]);
-  return React__default.createElement(TableContainer, null, React__default.createElement(TableHeader, {
+  React.useEffect(function () {
+    var checkForScrollbar = function checkForScrollbar() {
+      if (tableDataRef.current) {
+        var hasVerticalScrollbar = tableDataRef.current.scrollHeight > tableDataRef.current.clientHeight;
+        setHasScrollbar(hasVerticalScrollbar);
+      }
+    };
+    checkForScrollbar();
+    window.addEventListener('resize', checkForScrollbar);
+    var timeoutId = setTimeout(checkForScrollbar, 100);
+    return function () {
+      window.removeEventListener('resize', checkForScrollbar);
+      clearTimeout(timeoutId);
+    };
+  }, [rowconfig, filter, loading]);
+  React.useEffect(function () {
+    if (!tableDataRef.current) return;
+    var checkForScrollbar = function checkForScrollbar() {
+      if (tableDataRef.current) {
+        var hasVerticalScrollbar = tableDataRef.current.scrollHeight > tableDataRef.current.clientHeight;
+        setHasScrollbar(hasVerticalScrollbar);
+      }
+    };
+    var handleScroll = function handleScroll() {
+      checkForScrollbar();
+    };
+    tableDataRef.current.addEventListener('scroll', handleScroll);
+    var intervalId = setInterval(checkForScrollbar, 1000);
+    return function () {
+      var _tableDataRef$current;
+      clearInterval(intervalId);
+      (_tableDataRef$current = tableDataRef.current) === null || _tableDataRef$current === void 0 ? void 0 : _tableDataRef$current.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  return React__default.createElement(TableContainer, null, React__default.createElement(TableHeaderWithScrollbarAdjustment, {
+    "$hasScrollbar": hasScrollbar,
     "$hbcolor": tableheaderconfig.headercolor,
     "$tcolor": tableheaderconfig.textcolor
   }, tableheaderconfig.isAllSelectable && React__default.createElement(Container, {
@@ -9854,12 +9875,13 @@ var Table = function Table(_ref8) {
     "$padding": '24px 24px',
     "$justifyContent": 'center'
   }, React__default.createElement(Span, null, noDataText)) : filter ? React__default.createElement(TableData, {
+    ref: tableDataRef,
     "$isLegends": tableheaderconfig.headerdata.some(function (col) {
       return !!col.groupTitle;
     })
-  }, Object.entries(roleGroups).map(function (_ref9) {
-    var role = _ref9[0],
-      rows = _ref9[1];
+  }, Object.entries(roleGroups).map(function (_ref10) {
+    var role = _ref10[0],
+      rows = _ref10[1];
     return React__default.createElement(React__default.Fragment, {
       key: role
     }, React__default.createElement(Container, {
@@ -9891,6 +9913,7 @@ var Table = function Table(_ref8) {
       }), rows.length > 1 && index < rows.length - 1 && React__default.createElement(Divider, null));
     }));
   })) : React__default.createElement(TableData, {
+    ref: tableDataRef,
     "$isLegends": tableheaderconfig.headerdata.some(function (col) {
       return !!col.groupTitle;
     })