@tap-payments/os-micro-frontend-shared 0.1.441 → 0.1.442

package/build/components/VirtualTables/components/TableRow.js

@@ -0,0 +1,93 @@
+import { createElement as _createElement } from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React, { memo, useMemo } from 'react';
+import { Box } from '@mui/material';
+import { areEqual } from 'react-window';
+import { StyledCell, StyledTableRow } from './style';
+import { getSelectionStyles, getRowSelectionBorderStyles } from '../../../utils/index.js';
+function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, selectedRow = null, selectedChip = null, onCellClick, isLastRow = false, onChipClick, }) {
+    // Memoize chip click handler to prevent recreation on every render
+    const handleChipClick = React.useCallback((colIndex, pinned) => (event, chipIndex) => {
+        onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(index, colIndex, event, chipIndex, pinned);
+    }, [onChipClick, index]);
+    // Memoize cell renderer to prevent recreation
+    const renderCell = React.useCallback((column, rowIndex, colIndex) => {
+        const { render, format, selector } = column;
+        if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
+            return null;
+        const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
+        const formattedValue = format ? format({ value, row, index }) : value;
+        return render ? (render({
+            row,
+            column,
+            index,
+            value: row[column === null || column === void 0 ? void 0 : column.id],
+            selectionProps: { onClick: handleChipClick(colIndex, column.pinned), rowIndex, colIndex, selectedId: selectedChip },
+        })) : (_jsx(_Fragment, { children: formattedValue }));
+    }, [row, index, selectedChip, handleChipClick]);
+    // Pre-compute if any selection is active
+    const hasActiveSelection = selectedCell !== null || selectedColumn !== null || selectedRow !== null;
+    // Memoize cell click handler
+    const handleCellClick = React.useCallback((colIndex, pinned) => (event) => {
+        onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, pinned);
+    }, [onCellClick, index]);
+    const content = useMemo(() => {
+        var _a, _b;
+        const firstColumnId = (_a = columns[0]) === null || _a === void 0 ? void 0 : _a.id;
+        const lastColumnId = (_b = columns[columns.length - 1]) === null || _b === void 0 ? void 0 : _b.id;
+        const isRowSelected = selectedRow === index;
+        return (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
+                var _a, _b;
+                // Early exit for invalid columns
+                if (!(column === null || column === void 0 ? void 0 : column.id))
+                    return null;
+                // Cache cell identifiers
+                const cellKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${index}-${colIndex}`;
+                const columnKey = `${(_b = column.pinned) !== null && _b !== void 0 ? _b : 'default'}-${colIndex}`;
+                // Calculate selection states only if there's an active selection
+                const isCellSelected = hasActiveSelection && selectedCell === cellKey;
+                const isColumnSelected = hasActiveSelection && selectedColumn === columnKey;
+                const isSelected = hasActiveSelection && (isCellSelected || isColumnSelected || isRowSelected);
+                // getSelectionStyles already handles the empty return if !isSelected
+                const selectionStyles = getSelectionStyles({
+                    isSelected,
+                    isCellSelected,
+                    isColumnSelected,
+                    isRowSelected,
+                    isLastRow,
+                });
+                // Determine if this cell should be treated as first/last for border radius
+                const isFirstColumn = column.id === firstColumnId;
+                const isLastColumn = column.id === lastColumnId;
+                // For scrollable table, adjust first/last based on pinned tables
+                const effectiveFirst = !column.pinned ? isFirstColumn && column.pinned !== 'start' : isFirstColumn;
+                const effectiveLast = !column.pinned ? isLastColumn && column.pinned !== 'end' : isLastColumn;
+                // Handle border styling for row selection only when needed
+                const rowSelectionBorderStyles = isRowSelected && hasActiveSelection
+                    ? getRowSelectionBorderStyles({
+                        effectiveFirst,
+                        isPinnedStart: column.pinned === 'start',
+                        isPinnedEnd: column.pinned === 'end',
+                    })
+                    : {};
+                const isIndexColumn = column.pinned === 'start' && effectiveFirst;
+                return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: effectiveFirst, isLast: effectiveLast, onClick: handleCellClick(colIndex, column.pinned), sx: Object.assign(Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: isIndexColumn ? 'center' : column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), rowSelectionBorderStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: isSheetView ? (_jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1, width: '100%' } }, { children: renderCell(column, index, colIndex) }))) : (_jsx(_Fragment, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
+            }) }));
+    }, [
+        columns,
+        row,
+        index,
+        selectedCell,
+        selectedColumn,
+        selectedRow,
+        hasActiveSelection,
+        onCellClick,
+        isLastRow,
+        selectedChip,
+        isSheetView,
+        renderCell,
+        handleCellClick,
+    ]);
+    return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
+}
+export default memo(TableRow, areEqual);

package/build/components/VirtualTables/components/TableRowLoading.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import { styled } from '@mui/material/styles';
+import TableCell from '@mui/material/TableCell';
+import MUITableRow from '@mui/material/TableRow';
+import { areEqual } from 'react-window';
+const StyledSkeleton = styled(Skeleton)(({ theme }) => ({
+    backgroundColor: theme.palette.grey[100],
+    borderRadius: '64px',
+    minWidth: '20px',
+}));
+function TableRowLoading({ columns, style, index, animationType }) {
+    return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', borderBottom: '1px solid #e3e8ee', '&:hover': {
+                backgroundColor: 'transparent !important',
+            } }), component: "div", hover: true }, { children: columns.map((column, colIndex) => (_jsx(TableCell, Object.assign({ sx: {
+                width: column.width || `${100 / columns.length}%` || '20%',
+                paddingInline: '0.6875rem',
+            }, component: "div" }, { children: _jsx(StyledSkeleton, { variant: "rectangular", animation: animationType }) }), `${column.id}-${colIndex}`))) }), index));
+}
+export default memo(TableRowLoading, areEqual);

package/build/components/VirtualTables/components/TableRowLoadingWithCard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import TableCell from '@mui/material/TableCell';
+import MUITableRow from '@mui/material/TableRow';
+import { areEqual } from 'react-window';
+function TableRowLoadingWithCard({ style, index, cardLoadingComponent: CardLoadingComponent }) {
+    return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', padding: 0, '&:hover': {
+                backgroundColor: 'transparent !important',
+            } }), component: "div" }, { children: _jsx(TableCell, Object.assign({ sx: {
+                padding: 0,
+                flex: 1,
+            }, component: "div" }, { children: CardLoadingComponent })) }), index));
+}
+export default memo(TableRowLoadingWithCard, areEqual);

package/build/components/VirtualTables/components/TableRowWithCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { memo } from 'react';
+import { areEqual } from 'react-window';
+import { StyledTableRow } from './style';
+function TableRowWithCard({ row, index, rowProps, renderCardComponent: RenderCardComponent }) {
+    return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index }), RenderCardComponent && _jsx(RenderCardComponent, Object.assign({}, row))));
+}
+export default memo(TableRowWithCard, areEqual);

package/build/components/VirtualTables/components/index.js

@@ -0,0 +1,18 @@
+export { default as ColumnFilter, Inputs, List } from './ColumnFilter';
+export * from './EmptyList';
+export * from './ErrorList';
+export * from './TableFooter';
+export { default as TableFooter } from './TableFooter';
+export { default as TableError } from './TableError';
+export * from './virtualScroll';
+export * from './RowErrorState';
+export { default as TableHeader } from './TableHeader';
+export { default as TableLastItem } from './TableLastItem';
+export { default as TableLoading } from './TableLoading';
+export { default as TableLoadingWithCard } from './TableLoadingWithCard';
+export { default as TableNoData } from './TableNoData';
+export { default as TableNoDataWithCard } from './TableNoDataWithCard';
+export { default as TableRow } from './TableRow';
+export { default as TableRowLoading } from './TableRowLoading';
+export { default as TableRowLoadingWithCard } from './TableRowLoadingWithCard';
+export { default as TableRowWithCard } from './TableRowWithCard';

package/build/components/VirtualTables/components/style.js

@@ -0,0 +1,180 @@
+import { TableCell } from '@mui/material';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import MUITableRow from '@mui/material/TableRow';
+import { motion } from 'framer-motion';
+import { TABLE_FOOTER_HEIGHT } from './TableFooter/style';
+import VirtualScrollList from './virtualScroll/VirtualScrollList';
+export const TableWrapper = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'showNoDataView',
+})(({ showNoDataView }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+    minWidth: showNoDataView ? 'unset' : 'fit-content',
+    overflow: 'hidden',
+    overflowX: showNoDataView ? 'hidden' : 'scroll',
+    margin: '0px',
+}));
+export const StyledBox = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'hidePadding',
+})(({ theme, hidePadding }) => ({
+    flex: '1 1 auto',
+    backgroundColor: theme.palette.grey[300],
+    paddingBottom: hidePadding ? 0 : TABLE_FOOTER_HEIGHT,
+}));
+export const StyledSolidBackground = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+}));
+export const StyledCell = styled(TableCell, {
+    shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView', 'isSelected'].includes(prop),
+})(({ theme, isLast, isFirst, isSheetView }) => {
+    return Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center', cursor: 'pointer' }, (isSheetView && {
+        borderRight: isLast ? '1px solid transparent' : `1px solid ${theme.palette.divider}`,
+        paddingInline: '8px !important',
+        paddingLeft: '8px !important',
+        paddingRight: '8px !important',
+        position: 'relative',
+        borderTop: '1px solid transparent',
+        borderLeft: '1px solid transparent',
+        overflow: 'hidden !important',
+        '&:before': {
+            content: '""',
+            borderRight: isLast ? 'none' : '1px solid transparent',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            left: 0,
+            bottom: 0,
+            pointerEvents: 'none',
+        },
+    }));
+});
+export const TableHeaderInner = styled('button')(({ theme }) => ({
+    zIndex: 1,
+    display: 'flex',
+    gap: theme.spacing(0.5),
+    alignItems: 'center',
+    overflow: 'hidden',
+    maxWidth: '100%',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    padding: 0,
+    margin: 0,
+    color: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    boxSizing: 'border-box',
+    ':disabled': {
+        cursor: 'not-allowed',
+    },
+}));
+export const StyledVirtualList = styled(VirtualScrollList, {
+    shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),
+})(({ theme, areTotalRowsNotFillingHeight, isSheetView }) => (Object.assign({ backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default }, (isSheetView && {
+    backgroundColor: theme.palette.common.white,
+}))));
+export const StyledTableRow = styled(MUITableRow, {
+    shouldForwardProp: (props) => !['showShadowHighlight', 'showLoadedStyle', 'isSheetView', 'isSelected'].includes(props),
+})(({ theme, showShadowHighlight, showLoadedStyle, isSheetView }) => (Object.assign({ display: 'flex', borderBottom: `1px solid ${theme === null || theme === void 0 ? void 0 : theme.palette.divider}`, position: 'relative', height: '100%', width: '100%' }, (!isSheetView && Object.assign(Object.assign({ paddingInline: '32px', '&:hover': {
+        boxShadow: theme.shadows[12],
+        zIndex: 1,
+        '.payment-sources-container': {
+            backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.common.white,
+        },
+        '.geography-box': {
+            visibility: 'visible',
+        },
+        '.payout-status': {
+            visibility: 'visible !important',
+        },
+        '&:hover:after': {
+            opacity: 1,
+        },
+    }, '&::after': {
+        content: "''",
+        opacity: 0,
+        minHeight: '100%',
+        background: theme.palette.info.dark,
+        width: '3px',
+        position: 'absolute',
+        left: 0,
+    } }, (showLoadedStyle && {
+    backgroundColor: `${theme.palette.info.dark}08 !important`,
+})), (showShadowHighlight && {
+    boxShadow: theme.shadows[12],
+    zIndex: 1,
+    '&::after': {
+        content: "''",
+        opacity: 1,
+        minHeight: '100%',
+        background: theme.palette.info.dark,
+        width: '3px',
+        position: 'absolute',
+        left: 0,
+    },
+}))))));
+export const StyledTableBox = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'showNoDataView' && prop !== 'scrollable',
+})(({ theme, showNoDataView, scrollable }) => ({
+    position: 'relative',
+    backgroundColor: theme.palette.background.default,
+    height: '100%',
+    overflowX: showNoDataView ? 'hidden' : 'scroll',
+    display: 'flex',
+    flexDirection: 'column',
+    '&:hover': {
+        scrollbarWidth: scrollable ? 'auto' : 'none',
+    },
+    '&::-webkit-scrollbar': {
+        display: 'block',
+        height: '13px',
+    },
+    '&::-webkit-scrollbar-track': {
+        background: 'white',
+        border: '1px solid #F2F2F2',
+    },
+    '&::-webkit-scrollbar-thumb': {
+        backgroundColor: '#DADCDF',
+        borderRadius: '32px',
+        border: '3px solid transparent',
+        backgroundClip: 'content-box',
+        minHeight: '20px',
+    },
+}));
+export const ActionIcon = styled(motion.img)(() => ({
+    width: '24px',
+    height: '24px',
+    position: 'relative',
+    zIndex: 2,
+}));
+export const TableContainer = styled(Box)(() => ({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+}));
+export const SheetViewTableContainer = styled(Box)(() => ({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    paddingInline: '28px',
+    borderRadius: '8px',
+    marginBottom: '16px !important',
+    overflowY: 'hidden',
+}));
+export const StyledCardsBox = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'showNoDataView',
+})(({ showNoDataView }) => ({
+    position: 'relative',
+    height: '100%',
+    overflowX: showNoDataView ? 'hidden' : 'scroll',
+    paddingBottom: 0,
+    display: 'flex',
+    flexDirection: 'column',
+}));

package/build/components/VirtualTables/components/virtualScroll/ListItemWrapper.js

@@ -0,0 +1,112 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { blueCircleLoaderIcon, tableBackgroundLoader, TABLE_ROW_HEIGHT, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
+import { ActionIcon } from '../style';
+import { RowErrorState } from '../RowErrorState';
+import { StyledParagraph } from '../TableLastItem';
+import TableRow from '../TableRow';
+import SheetViewTableRowLoading from '../../SheetViewVirtualTable/components/SheetViewTableRowLoading';
+export const LastRowContent = React.memo(({ isLoadingRow, isSheetView, columns, currentRowCount, }) => {
+    const { t } = useTranslation();
+    if (isLoadingRow) {
+        if (isSheetView && (columns === null || columns === void 0 ? void 0 : columns.length)) {
+            return (_jsx(_Fragment, { children: Array.from({ length: 3 }, (_, i) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: "wave", rowIndex: (currentRowCount || 0) + i, useTableBackground: true }, `loading-row-${i}`))) }));
+        }
+        return (_jsxs(Box, Object.assign({ "data-testid": "ListItemWrapper_lastRowContent_isLoadingRow", sx: {
+                height: isSheetView ? '100%' : '24px',
+                width: '24px',
+                borderRadius: '50%',
+                background: 'transparent',
+                position: 'relative',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            } }, { children: [_jsx(ActionIcon, { sx: { position: 'absolute' }, src: tableBackgroundLoader }), _jsx(ActionIcon, { sx: { position: 'absolute', padding: '3px' }, src: blueCircleLoaderIcon, alt: "tableLoadingSpinnerIcon", className: "spinner-loader", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } })] })));
+    }
+    return _jsx(StyledParagraph, Object.assign({ "data-testid": "ListItemWrapper_lastRowContent" }, { children: t('allRecordsHaveBeenSuccessfullyLoaded') }));
+});
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createRowClickHandler = (row, onRowClick) => (e) => {
+    var _a;
+    (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
+};
+export const StyledItemWrapper = styled('div', {
+    shouldForwardProp: (props) => props !== 'showShadowHighlight' && props !== 'isSheetView',
+})(({ theme, isSheetView }) => ({
+    height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : '100%',
+    backgroundColor: theme.palette.background.default,
+}));
+function ListItemWrapper(_a) {
+    var _b;
+    var { index, style } = _a, _c = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned = false, isLoadMoreLoading = false } = _c, restData = __rest(_c, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView", "isPinned", "isLoadMoreLoading"]);
+    const lastItemIndex = rows.length - 1;
+    const row = rows[index];
+    const isLoadingRow = isLoading && index === lastItemIndex + 1;
+    const isLoadedRow = index <= newLoadedRowsEndIndex;
+    const rowClickHandler = React.useCallback(() => createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
+    // Memoize the row props object
+    const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler]);
+    const renderSheetViewLoadingRow = React.useCallback((lastRowContent) => {
+        return (_jsx(Box, Object.assign({ sx: {
+                minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT,
+                height: '100%',
+                width: '100%',
+            } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })));
+    }, [isError]);
+    const memoizedListItemComponent = React.useMemo(() => {
+        const lastRowContent = _jsx(LastRowContent, { isSheetView: isSheetView, isLoadingRow: isLoadingRow, columns: columns, currentRowCount: rows.length });
+        const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
+        if (isPinned && isLastRow) {
+            if (isSheetView && isLoadingRow && columns && columns.length > 0) {
+                return renderSheetViewLoadingRow(lastRowContent);
+            }
+            return (_jsx(Box, { sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT, height: '100%' } : { height: TABLE_ROW_HEIGHT })), { backgroundColor: '#F6F8FACC' }) }));
+        }
+        if (isLastRow) {
+            if (isSheetView && isLoadingRow && columns && columns.length > 0) {
+                return renderSheetViewLoadingRow(lastRowContent);
+            }
+            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: {
+                        backgroundColor: '#F6F8FACC',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        width: '100%',
+                        height: '100%',
+                    } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
+        }
+        return (_jsx(TableRow, Object.assign({ index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView, isLastRow: index === rows.length - 1, isFirstRow: index === 0, isLoading: isLoading, isLoadMoreLoading: isLoadMoreLoading }, restData), `row-${index}`));
+    }, [
+        restData,
+        index,
+        row,
+        columns,
+        memoizedRowProps,
+        isSheetView,
+        isLoadingRow,
+        isError,
+        areAllRowsLoaded,
+        lastItemIndex,
+        isPinned,
+        rows.length,
+        renderSheetViewLoadingRow,
+        isLoadMoreLoading,
+    ]);
+    return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper", isSheetView: isSheetView }, { children: memoizedListItemComponent })) })));
+}
+export default ListItemWrapper;

package/build/components/VirtualTables/components/virtualScroll/ListItemWrapperWithCard.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import TableRowWithCard from '../TableRowWithCard';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createRowClickHandler = (row, onRowClick) => (e) => {
+    var _a;
+    (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
+};
+export const StyledItemWrapper = styled('div', {
+    shouldForwardProp: (props) => props !== 'showShadowHighlight',
+})(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    height: '100%',
+}));
+function ListItemWrapperWithCard({ index, style, data: { renderedScrollTopRef, rows, rowProps, isLoading, scrollToIndex, newLoadedRowsEndIndex, areAllRowsLoaded, renderCardComponent }, }) {
+    const lastItemIndex = rows.length - 1;
+    const row = rows[index];
+    const isLoadingRow = isLoading && index === lastItemIndex + 1;
+    const isLoadedRow = index <= newLoadedRowsEndIndex;
+    const rowClickHandler = React.useCallback(createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
+    // Memoize the row props object
+    const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler, isLoadingRow, areAllRowsLoaded, lastItemIndex]);
+    const memoizedListItemComponent = React.useMemo(() => _jsx(TableRowWithCard, { index: index, row: row, renderCardComponent: renderCardComponent, rowProps: memoizedRowProps }, `row-${index}`), [index, row, memoizedRowProps]);
+    return (_jsx("div", Object.assign({ "data-testid": "ListCardWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - renderedScrollTopRef.current, willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListCardWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
+}
+export default ListItemWrapperWithCard;

package/build/components/VirtualTables/components/virtualScroll/VirtualScrollInner.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Box from '@mui/material/Box';
+const VirtualScrollInner = React.forwardRef((_a, ref) => {
+    var { children } = _a, restProps = __rest(_a, ["children"]);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ "data-testid": "VirtualScrollInner", className: "VirtualScrollInner", style: { position: 'sticky', top: 0 } }, { children: children })), _jsx("div", Object.assign({ ref: ref }, restProps))] }));
+});
+VirtualScrollInner.displayName = 'VirtualScrollInner';
+export default VirtualScrollInner;

package/build/components/VirtualTables/components/virtualScroll/VirtualScrollList.js

@@ -0,0 +1,79 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef, useCallback, useEffect } from 'react';
+import { VariableSizeList } from 'react-window';
+import VirtualScrollInner from './VirtualScrollInner';
+import VirtualScrollOuter from './VirtualScrollOuter';
+import useScrollBackShadow from '../../hooks/useScrollBackShadow';
+import { VirtualScrollOuterProvider } from '../../context';
+const VirtualScrollList = React.forwardRef((_a, ref) => {
+    var { itemData, children, setBackdropVisibility, scrollToIndex, listRef: externalListRef, onScroll, clearBackdropVisibilityTimeout } = _a, restProps = __rest(_a, ["itemData", "children", "setBackdropVisibility", "scrollToIndex", "listRef", "onScroll", "clearBackdropVisibilityTimeout"]);
+    const { handleBackDropVisibility, clearBackdropVisibility, clearTimer } = useScrollBackShadow({
+        setBackdropVisibility,
+        clearBackdropVisibilityTimeout,
+    });
+    // renderedScrollTopRef - when render is started (listRef.current.scrollTo is called)
+    //   this ref holds scrollTop position which has been passed to scrollTo function
+    // scrollTopRef - this is scrollTop from last onScroll event.
+    //   onScroll can be fired when render is still in progress. So scrollTop will be just saved
+    //   When scroll will end, saved scrollTop will be used to start new render.
+    //   Subsequent onScroll will overwrite this number, as we will not render intermediate scroll states
+    // scrollLocked - is true, when render has been started.
+    //   This is used to now start several renders simulaneously
+    // listRef - VariableSizeList ref to call scrollTo method
+    const renderedScrollTopRef = useRef(0);
+    const scrollTopRef = useRef(undefined);
+    const scrollLocked = useRef(false);
+    // Use external ref if provided, otherwise create local
+    const internalListRef = useRef(null);
+    // If ref is provided, use it; else use externalListRef; else use internalListRef
+    const listRef = ref || externalListRef || internalListRef;
+    const scrollTo = useCallback(() => {
+        var _a, _b;
+        clearTimer();
+        if (scrollTopRef.current !== undefined && listRef.current) {
+            scrollLocked.current = false;
+            renderedScrollTopRef.current = scrollTopRef.current;
+            scrollTopRef.current = undefined;
+            handleBackDropVisibility();
+            (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo) === null || _b === void 0 ? void 0 : _b.call(_a, renderedScrollTopRef.current);
+            return true;
+        }
+        clearBackdropVisibility();
+        return false;
+    }, [clearBackdropVisibility, clearTimer, handleBackDropVisibility, listRef]);
+    const handleScroll = React.useCallback((event) => {
+        scrollTopRef.current = event.currentTarget.scrollTop;
+        if (!scrollLocked.current) {
+            scrollLocked.current = true;
+            scrollTo();
+        }
+    }, [scrollTo]);
+    useEffect(() => {
+        var _a, _b;
+        if ((scrollToIndex || 0) >= 0 && !Number.isNaN(scrollToIndex) && scrollToIndex !== undefined && ((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo)) {
+            (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.scrollToItem(scrollToIndex, 'center');
+        }
+    }, [scrollToIndex, listRef]);
+    const itemDataInternal = React.useMemo(() => (Object.assign(Object.assign({}, itemData), { renderedScrollTopRef })), [itemData]);
+    const handleOnScroll = React.useCallback((props) => {
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(props);
+        scrollLocked.current = scrollTo();
+    }, [scrollTo, onScroll]);
+    return (_jsx(VirtualScrollOuterProvider, Object.assign({ value: handleScroll }, { children: _jsx(VariableSizeList, Object.assign({ ref: listRef, "data-testid": "VirtualScrollList", itemData: itemDataInternal, 
+            // @ts-ignore
+            outerElementType: VirtualScrollOuter, 
+            // @ts-ignore
+            innerElementType: VirtualScrollInner }, restProps, { onScroll: handleOnScroll }, { children: children })) })));
+});
+export default VirtualScrollList;

package/build/components/VirtualTables/components/virtualScroll/VirtualScrollOuter.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import { VirtualScrollOuterContext } from '../../context';
+const VirtualScrollOuter = React.forwardRef((_a, ref) => {
+    var { onScroll, children } = _a, restProps = __rest(_a, ["onScroll", "children"]);
+    const handleScroll = useContext(VirtualScrollOuterContext);
+    return (_jsx("div", Object.assign({ className: "VirtualScrollOuter", onScroll: handleScroll, ref: ref }, restProps, { children: children })));
+});
+VirtualScrollOuter.displayName = 'VirtualScrollOuter';
+export default VirtualScrollOuter;

package/build/components/VirtualTables/components/virtualScroll/index.js

@@ -0,0 +1,5 @@
+export * from './ListItemWrapper';
+export { default as ListItemWrapperWithCard } from './ListItemWrapperWithCard';
+export { default as VirtualScrollInner } from './VirtualScrollInner';
+export { default as VirtualScrollList } from './VirtualScrollList';
+export { default as VirtualScrollOuter } from './VirtualScrollOuter';

package/build/components/VirtualTables/context/Provider.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VirtualScrollOuterContext } from './context';
+export const VirtualScrollOuterProvider = ({ children, value }) => (_jsx(VirtualScrollOuterContext.Provider, Object.assign({ value: value }, { children: children })));

package/build/components/VirtualTables/context/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const VirtualScrollOuterContext = createContext(null);

package/build/components/VirtualTables/context/index.js

@@ -0,0 +1,2 @@
+export * from './context';
+export { VirtualScrollOuterProvider } from './Provider';

package/build/components/VirtualTables/hooks/index.js

@@ -0,0 +1 @@
+export { default as useColumnFilter } from './useColumnFilter';