labsense-ui-kit 1.2.94 → 1.2.96

package/dist/index.js

@@ -9687,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;
@@ -9731,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';
@@ -9770,7 +9777,47 @@ 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() {
+      return checkForScrollbar();
+    };
+    tableDataRef.current.addEventListener('scroll', handleScroll);
+    var observer = new MutationObserver(checkForScrollbar);
+    observer.observe(tableDataRef.current, {
+      childList: true,
+      subtree: true
+    });
+    checkForScrollbar();
+    return function () {
+      var _tableDataRef$current;
+      observer.disconnect();
+      (_tableDataRef$current = tableDataRef.current) === null || _tableDataRef$current === void 0 ? void 0 : _tableDataRef$current.removeEventListener('scroll', handleScroll);
+    };
+  }, [rowconfig, filter, loading]);
+  return React__default.createElement(TableContainer, null, React__default.createElement(TableHeaderWithScrollbarAdjustment, {
+    "$hasScrollbar": hasScrollbar,
     "$hbcolor": tableheaderconfig.headercolor,
     "$tcolor": tableheaderconfig.textcolor
   }, tableheaderconfig.isAllSelectable && React__default.createElement(Container, {
@@ -9833,12 +9880,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, {
@@ -9870,6 +9918,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;
     })