@cashub/ui 0.38.1 → 0.38.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.38.1",
+  "version": "0.38.3",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",

package/table/InfiniteGridTable.js

@@ -44,6 +44,7 @@ const InfiniteGridTable = _ref => {
   const [tableColumns, setTableColumns] = (0, _react.useState)(columns);
   const [tableWidth, setTableWidth] = (0, _react.useState)(0);
   const [restWidth, setRestWidth] = (0, _react.useState)(0);
+  const [theadHeight, setTheadHeight] = (0, _react.useState)(0);
   const texts = (0, _react.useMemo)(() => {
     const defaultTexts = {
       info: 'Showing _START_ to _END_ of _TOTAL_ entries',
@@ -52,17 +53,15 @@ const InfiniteGridTable = _ref => {
     return _objectSpread(_objectSpread({}, defaultTexts), translation);
   }, [translation]);
   const tableHeight = (0, _react.useMemo)(() => {
-    var _tableHeadRef$current;
-    const theadHeight = ((_tableHeadRef$current = tableHeadRef.current) === null || _tableHeadRef$current === void 0 ? void 0 : _tableHeadRef$current.offsetHeight) || 0;
     // when data is empty, table will generate a row to show a message
     const rowCounts = data.length || 1;
     return theadHeight + rowCounts * ROW_HEIGHT;
-  }, [data.length]);
+  }, [theadHeight, data.length]);
   const visibleRowCounts = (0, _react.useMemo)(() => {
     return Math.ceil(containerHeight / ROW_HEIGHT);
   }, [containerHeight]);
   const startIndex = (0, _react.useMemo)(() => {
-    const top = wrapperTop + scrollTop;
+    const top = Math.max(0, scrollTop - wrapperTop);
     return Math.max(0, Math.floor(top / ROW_HEIGHT) - OVER_SCAN_COUNT);
   }, [wrapperTop, scrollTop]);
   const endIndex = (0, _react.useMemo)(() => {
@@ -218,7 +217,7 @@ const InfiniteGridTable = _ref => {
         backgroundReverse: backgroundReverse
       }, 'rest'));
       const index = rowIndex + startIndex;
-      const top = index * ROW_HEIGHT + tableHeadRef.current.offsetHeight;
+      const top = index * ROW_HEIGHT + theadHeight;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
         "data-index": index,
         style: {
@@ -229,7 +228,7 @@ const InfiniteGridTable = _ref => {
         children: tds
       }, index);
     });
-  }, [backgroundReverse, tableColumns, visibleData, showFullValue, restWidth, startIndex]);
+  }, [backgroundReverse, tableColumns, visibleData, showFullValue, restWidth, startIndex, theadHeight]);
   const generateEmptyMessage = (0, _react.useCallback)(() => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TD, {
@@ -257,6 +256,12 @@ const InfiniteGridTable = _ref => {
       setTableWidth(tableRef.current.offsetWidth);
     }
   }, [columns]);
+  (0, _react.useLayoutEffect)(() => {
+    if (tableHeadRef.current) {
+      const theadHeight = tableHeadRef.current.offsetHeight;
+      setTheadHeight(theadHeight);
+    }
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TableWrapper, {
       style: {