@tap-payments/os-micro-frontend-shared 0.0.283 → 0.0.284

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -13,11 +13,10 @@ import { useTheme } from '@mui/material/styles';
13
13
  import memoize from 'memoize-one';
14
14
  import InfiniteLoader from 'react-window-infinite-loader';
15
15
  import AutoSizer from 'react-virtualized-auto-sizer';
16
- import { TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, TABLE_ROW_HEIGHT } from '../../../constants/index.js';
16
+ import { TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../../constants/index.js';
17
17
  import { useDelayToSetValue } from '../../../hooks/index.js';
18
18
  import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
19
19
  import TableFooter from '../components/TableFooter/TableFooter';
20
- import TableLastItem from '../components/TableLastItem';
21
20
  import TableNoData from '../components/TableNoData';
22
21
  import { SheetViewTableNoData } from './components';
23
22
  import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
@@ -26,7 +25,7 @@ import { SheetViewVirtualTableWrapper, PinnedStartColumnWrapper, PinnedEndColumn
26
25
  import SheetViewTableHeader from './components/SheetViewTableHeader';
27
26
  import { usePinnedColumns } from './hooks/usePinnedColumns';
28
27
  import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
29
- const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick) => ({
28
+ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
30
29
  columns,
31
30
  isLoading,
32
31
  rows,
@@ -43,9 +42,10 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
43
42
  selectedCell,
44
43
  selectedColumn,
45
44
  onCellClick,
45
+ containerHeight,
46
+ rowHeight,
46
47
  }));
47
48
  function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, }) {
48
- var _a, _b, _c;
49
49
  const theme = useTheme();
50
50
  const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
51
51
  const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
@@ -77,10 +77,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
77
77
  const hasTimeoutError = isTimeoutError(error);
78
78
  const lastItemIndex = rows.length - 1;
79
79
  const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
80
- const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
81
- const pinnedStartItemData = createItemData(pinnedStartColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true, selectedCell, selectedColumn, handleCellClick);
82
- const pinnedEndItemData = createItemData(pinnedEndColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_b = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _b !== void 0 ? _b : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true, selectedCell, selectedColumn, handleCellClick);
83
- const unpinnedItemData = createItemData(unpinnedColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_c = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _c !== void 0 ? _c : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, false, selectedCell, selectedColumn, handleCellClick);
80
+ const itemsCount = isDelayedFetchingNextPage || areAllRowsLoaded ? rows.length + 1 : rows.length;
84
81
  const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
85
82
  const tableItemsCount = itemsCount;
86
83
  const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
@@ -88,31 +85,68 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
88
85
  return;
89
86
  yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
90
87
  });
91
- const currentItemData = containerKey === 'pinnedStart' ? pinnedStartItemData : containerKey === 'pinnedEnd' ? pinnedEndItemData : unpinnedItemData;
92
88
  const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
93
89
  const handleScrollCallback = (scrollProps) => {
94
90
  const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
95
91
  handleScroll(scrollProps, source);
96
92
  };
97
- return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: () => rowHeight, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
98
- overflowX: isPinned ? 'hidden' : 'auto',
99
- paddingBottom: isPinned ? '25px' : '13px',
100
- backgroundColor: isPinned ? 'transparent' : theme.palette.background.default,
101
- } }, { children: ListItemWrapper }))) })) })));
93
+ return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => {
94
+ var _a;
95
+ const getItemSize = (index) => {
96
+ console.log({ All: areAllRowsLoaded, rows, index });
97
+ const isLastRow = areAllRowsLoaded && index === rows.length;
98
+ if (isLastRow) {
99
+ const usedHeight = rows.length * rowHeight;
100
+ const remainingHeight = height - usedHeight;
101
+ return Math.max(remainingHeight, rowHeight);
102
+ }
103
+ return rowHeight;
104
+ };
105
+ const commonItemDataParams = [
106
+ isDelayedFetchingNextPage,
107
+ rows,
108
+ rowProps,
109
+ scrollToIndex,
110
+ lastItemIndex,
111
+ (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0,
112
+ isError,
113
+ areAllRowsLoaded,
114
+ ];
115
+ const commonItemDataSuffix = [selectedCell, selectedColumn, handleCellClick, height, rowHeight];
116
+ const getItemDataForContainer = (columnsData, isPinnedColumn) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix);
117
+ const currentItemData = containerKey === 'pinnedStart'
118
+ ? getItemDataForContainer(pinnedStartColumnsData, true)
119
+ : containerKey === 'pinnedEnd'
120
+ ? getItemDataForContainer(pinnedEndColumnsData, true)
121
+ : getItemDataForContainer(unpinnedColumnsData, false);
122
+ return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: getItemSize, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
123
+ overflowX: isPinned ? 'hidden' : 'auto',
124
+ paddingBottom: isPinned ? '25px' : '13px',
125
+ backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
126
+ } }, { children: ListItemWrapper })));
127
+ } })) })));
102
128
  }, [
103
129
  itemsCount,
104
130
  areAllRowsLoaded,
105
131
  loadMoreItems,
106
132
  threshold,
107
133
  rowHeight,
108
- pinnedStartItemData,
109
- pinnedEndItemData,
110
- unpinnedItemData,
111
- handleScroll,
134
+ rows,
135
+ pinnedStartColumnsData,
136
+ pinnedEndColumnsData,
137
+ unpinnedColumnsData,
138
+ isDelayedFetchingNextPage,
139
+ rowProps,
112
140
  scrollToIndex,
141
+ lastItemIndex,
142
+ footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount,
143
+ isError,
113
144
  areTotalRowsNotFillingHeight,
145
+ selectedCell,
146
+ selectedColumn,
147
+ handleCellClick,
148
+ handleScroll,
114
149
  clearBackdropVisibilityTimeout,
115
- lastItemIndex,
116
150
  pinnedEndVirtualListRef,
117
151
  pinnedStartVirtualListRef,
118
152
  scrollableVirtualListRef,
@@ -138,23 +172,23 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
138
172
  overflowX: 'hidden',
139
173
  } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) }));
140
174
  };
141
- return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (tableLoading ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true, sx: {
142
- marginLeft: '28px',
143
- maxHeight: 'calc(100vh - 300px)',
144
- overflow: 'auto',
145
- } }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: 'auto' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
146
- width: '100%',
147
- minWidth: 'fit-content',
175
+ return (_jsxs(_Fragment, { children: [_jsx(TableContainer, { children: showNoDataView ? (tableLoading ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true, sx: {
176
+ marginLeft: '28px',
177
+ maxHeight: 'calc(100vh - 300px)',
178
+ overflow: 'auto',
179
+ } }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: 'auto' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
180
+ width: '100%',
181
+ minWidth: 'fit-content',
182
+ height: 'auto',
183
+ display: 'flex',
184
+ flexDirection: 'column',
185
+ } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
148
186
  height: 'auto',
149
187
  display: 'flex',
150
188
  flexDirection: 'column',
151
- } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
152
- height: 'auto',
153
- display: 'flex',
154
- flexDirection: 'column',
155
- } }, { children: _jsx(SheetViewTableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))] })) }))) : (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) })))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
156
- width: '100%',
157
- minWidth: 'fit-content',
158
- } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "SheetViewVirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
189
+ } }, { children: _jsx(SheetViewTableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))] })) }))) : (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) })))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
190
+ width: '100%',
191
+ minWidth: 'fit-content',
192
+ } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
159
193
  }
160
194
  export default memo(SheetViewVirtualTable);
@@ -59,10 +59,10 @@ function ListItemWrapper(_a) {
59
59
  const lastRowContent = _jsx(LastRowContent, { isSheetView: isSheetView, isLoadingRow: isLoadingRow });
60
60
  const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
61
61
  if (isPinned && isLastRow) {
62
- return (_jsx(Box, { sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT } : { height: TABLE_ROW_HEIGHT })), { backgroundColor: '#F6F8FACC' }) }));
62
+ return (_jsx(Box, { sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT, height: '100%' } : { height: TABLE_ROW_HEIGHT })), { backgroundColor: '#F6F8FACC' }) }));
63
63
  }
64
64
  if (isLastRow) {
65
- return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT } : { height: TABLE_ROW_HEIGHT })), { display: 'flex', justifyContent: 'center', alignItems: 'center' }) }, { children: _jsx(Box, Object.assign({ sx: {
65
+ return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT, height: '100%' } : { height: TABLE_ROW_HEIGHT })), { display: 'flex', justifyContent: 'center', alignItems: 'center' }) }, { children: _jsx(Box, Object.assign({ sx: {
66
66
  backgroundColor: '#F6F8FACC',
67
67
  display: 'flex',
68
68
  justifyContent: 'center',
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.0.283",
5
- "testVersion": 1,
4
+ "version": "0.0.284",
5
+ "testVersion": 4,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
8
8
  "module": "build/index.js",