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

package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useVirtualTableContainer.js

@@ -0,0 +1,57 @@
+import { useCallback, useMemo } from 'react';
+import memoize from 'memoize-one';
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, selectedRow, selectedChip, onCellClick, onChipClick, containerHeight, rowHeight) => ({
+    columns,
+    isLoading,
+    rows,
+    rowProps,
+    scrollToIndex,
+    totalCount,
+    lastItemIndex,
+    isError,
+    areAllRowsLoaded,
+    limit: totalCount,
+    newLoadedRowsEndIndex: lastItemIndex,
+    isSheetView: true,
+    isPinned,
+    selectedCell,
+    selectedColumn,
+    selectedRow,
+    selectedChip,
+    onCellClick,
+    onChipClick,
+    containerHeight,
+    rowHeight,
+}));
+export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, selectedRow, selectedChip, handleCellClick, handleChipClick, }) => {
+    const getItemSize = useCallback((index, height) => {
+        const isLastRow = areAllRowsLoaded && index === rows.length;
+        if (isLastRow) {
+            // Calculate remaining height: total height - (number of data rows * row height)
+            const usedHeight = rows.length * rowHeight;
+            const remainingHeight = height - usedHeight;
+            const minimumLastRowHeight = rowHeight * 2; // Minimum height is 2x rowHeight
+            return Math.max(remainingHeight, minimumLastRowHeight); // Ensure minimum 2x row height
+        }
+        return rowHeight;
+    }, [areAllRowsLoaded, rows.length, rowHeight]);
+    const commonItemDataParams = useMemo(() => {
+        var _a;
+        return [
+            isDelayedFetchingNextPage,
+            rows,
+            rowProps,
+            scrollToIndex,
+            rows.length - 1,
+            (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0,
+            isError,
+            areAllRowsLoaded,
+        ];
+    }, [isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount, isError, areAllRowsLoaded]);
+    const commonItemDataSuffix = useMemo(() => [selectedCell, selectedColumn, selectedRow, selectedChip, handleCellClick, handleChipClick], [selectedCell, selectedColumn, selectedRow, selectedChip, handleCellClick, handleChipClick]);
+    const getItemDataForContainer = useCallback((columnsData, isPinnedColumn, height) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix, height, rowHeight), [commonItemDataParams, commonItemDataSuffix, rowHeight]);
+    return {
+        getItemSize,
+        getItemDataForContainer,
+    };
+};

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

@@ -0,0 +1,5 @@
+export { default as SheetViewVirtualTable } from './SheetViewVirtualTable';
+export { default as SheetViewTableHeader } from './components/SheetViewTableHeader';
+export * from './style';
+export * from './hooks';
+export * from './components';

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

@@ -0,0 +1,110 @@
+import { styled } from '@mui/material/styles';
+import TableHead from '@mui/material/TableHead';
+import MUITableRow from '@mui/material/TableRow';
+export const ActionIcon = styled('img')(() => ({
+    width: '13.3px',
+    height: '13.3px',
+}));
+export const ColumnIcon = styled('img')(() => ({
+    width: '8px',
+    height: '6.4px',
+    cursor: 'pointer',
+    marginTop: '2px',
+}));
+export const HeaderText = styled('span')(({ theme }) => ({
+    color: theme.palette.text.primary,
+    textOverflow: 'ellipsis',
+    width: '80%',
+    overflow: 'hidden',
+    fontSize: '12px',
+    fontWeight: 600,
+}));
+export const PinIconContainer = styled('div')(() => ({
+    width: '16px',
+    height: 'auto',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '2px',
+    padding: '2px',
+    transition: 'all 0.2s ease',
+}));
+export const StyledHeader = styled(TableHead, {
+    shouldForwardProp: (prop) => prop !== 'showBackDrop',
+})(({ showBackDrop, theme }) => ({
+    flex: '0 0 auto',
+    boxShadow: showBackDrop ? theme.shadows[23] : 'none',
+    backgroundColor: theme.palette.background.default,
+    zIndex: 1,
+    width: '100%',
+    minWidth: 'auto',
+    overflowX: 'scroll',
+}));
+export const StyledMUITableRow = styled(MUITableRow)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: '100%',
+    minWidth: 'fit-content',
+    height: '28px',
+    backgroundColor: theme.palette.primary.light,
+}));
+export const SheetViewVirtualTableWrapper = styled('div')({
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    borderRadius: '12px',
+});
+const PinnedColumnBase = styled('div')(({ theme }) => ({
+    width: 'auto',
+    zIndex: 10,
+    flex: '0 0 auto',
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    backgroundColor: theme.palette.primary.light,
+    borderTop: '1px solid #F2F2F2',
+    borderBottom: '1px solid #F2F2F2',
+    overflow: 'hidden', // Ensure border radius is applied properly
+}));
+export const PinnedStartColumnWrapper = styled(PinnedColumnBase)({
+    boxShadow: '4px 0px 24px 0px #00000014',
+    borderLeft: '1px solid #F2F2F2',
+    borderRight: 'none',
+    borderTopLeftRadius: '12px',
+    borderBottomLeftRadius: '12px',
+});
+export const PinnedEndColumnWrapper = styled(PinnedColumnBase)({
+    boxShadow: '-4px 0px 24px 0px #00000014',
+    borderRight: '1px solid #F2F2F2',
+    borderLeft: 'none',
+    borderTopRightRadius: '12px',
+    borderBottomRightRadius: '12px',
+});
+export const MainTableWrapper = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'hasPinnedStart' && prop !== 'hasPinnedEnd',
+})(({ hasPinnedStart, hasPinnedEnd }) => ({
+    flex: '1 1 auto',
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    borderTop: '1px solid #F2F2F2',
+    borderBottom: '1px solid #F2F2F2',
+    borderLeft: hasPinnedStart ? 'none' : '1px solid #F2F2F2',
+    borderRight: hasPinnedEnd ? 'none' : '1px solid #F2F2F2',
+    position: 'relative',
+    scrollbarWidth: 'auto',
+    overflow: 'hidden',
+    borderTopLeftRadius: hasPinnedStart ? '0' : '12px',
+    borderBottomLeftRadius: hasPinnedStart ? '0' : '12px',
+    borderTopRightRadius: hasPinnedEnd ? '0' : '12px',
+    borderBottomRightRadius: hasPinnedEnd ? '0' : '12px',
+}));
+export const UnpinnedTableHeaderWrapper = styled('div')({
+    flexShrink: 0,
+    height: 'auto',
+    overflow: 'scroll',
+});

package/build/components/VirtualTables/SheetViewVirtualTable/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/VirtualTables/VirtualTable/VirtualTable.js

@@ -0,0 +1,113 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, memo, useState, useRef, useEffect } from 'react';
+import { useTheme } from '@mui/material/styles';
+import memoize from 'memoize-one';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../constants/index.js';
+import { useDelayToSetValue } from '../../../hooks/index.js';
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError, getProcessedColumns } from '../../../utils/index.js';
+import TableFooter from '../components/TableFooter/TableFooter';
+import TableHeader from '../components/TableHeader';
+import TableLastItem from '../components/TableLastItem';
+import TableNoData from '../components/TableNoData';
+import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
+import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from '../components/style';
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isSheetView) => ({
+    columns,
+    isLoading,
+    rows,
+    rowProps,
+    scrollToIndex,
+    totalCount,
+    lastItemIndex,
+    isError,
+    areAllRowsLoaded,
+    isSheetView,
+}));
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton = false, }) {
+    var _a, _b;
+    const theme = useTheme();
+    const onPointerDown = (e) => {
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
+    };
+    const isDelayedFetchingNextPage = useDelayToSetValue({
+        value: isFetchingNextPage,
+        delay: 1000,
+    });
+    const [showBackDrop, setShowBackdrop] = useState(false);
+    // Dynamic AutoSizer key that updates asynchronously when layout-affecting props change
+    const [autoSizerKey, setAutoSizerKey] = useState('INITIAL_KEY');
+    useEffect(() => {
+        const depsKey = `${footerProps === null || footerProps === void 0 ? void 0 : footerProps.maximized}-${isMinimized}`;
+        const frame = requestAnimationFrame(() => setAutoSizerKey(depsKey));
+        return () => cancelAnimationFrame(frame);
+    }, [footerProps === null || footerProps === void 0 ? void 0 : footerProps.maximized, isMinimized]);
+    const isError = hasError(error);
+    const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
+    const tableError = !isLoading && rows.length === 0 && isError && !isNotFoundError(error);
+    const tableEmpty = !isLoading && rows.length === 0;
+    const hasTimeoutError = isTimeoutError(error);
+    const lastItemIndex = rows.length - 1;
+    const processedColumns = useMemo(() => getProcessedColumns(columns, isLoading !== null && isLoading !== void 0 ? isLoading : false, defaultSkeleton), [columns, isLoading, defaultSkeleton]);
+    const shownColumns = useMemo(() => processedColumns.filter((column) => !column.hidden), [processedColumns]);
+    const orderedColumns = useMemo(() => shownColumns.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); }), [shownColumns]);
+    const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
+    const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
+    const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, isSheetView);
+    const tableRowHeight = isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT;
+    const listRef = useRef(null);
+    // Reset row heights when isSheetView or tableRowHeight changes
+    useEffect(() => {
+        if (listRef.current && typeof listRef.current.resetAfterIndex === 'function') {
+            listRef.current.resetAfterIndex(0, true);
+        }
+    }, [isSheetView, tableRowHeight]);
+    const renderTableContainer = useMemo(() => {
+        const setBackdropVisibility = (isVisible) => {
+            setShowBackdrop(isVisible);
+        };
+        const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+            // TODO: start index and stop index are not working as expected
+            // console.log('startIndex', startIndex, 'stopIndex', stopIndex,
+            // 'rows.length', rows.length)
+            if (areAllRowsLoaded)
+                return;
+            yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+        });
+        return (
+        // @ts-ignore
+        _jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView, listRef: listRef }, { children: ListItemWrapper }))) }), autoSizerKey)) })));
+    }, [
+        lastItemIndex,
+        loadMoreItems,
+        threshold,
+        areAllRowsLoaded,
+        areTotalRowsNotFillingHeight,
+        itemsCount,
+        tableRowHeight,
+        isSheetView,
+        itemData,
+        scrollToIndex,
+        autoSizerKey,
+    ]);
+    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_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-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, isSheetView: isSheetView, totalCount: (_b = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _b !== void 0 ? _b : 0 })), showNoDataView ? (customNoDataComponent ? (customNoDataComponent) : (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }))) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+                                        width: '100%',
+                                        minWidth: 'fit-content',
+                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem
+                    // rows height + header height
+                    , { 
+                        // rows height + header height
+                        height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), footerProps && (_jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))), footerComponent] }));
+}
+export default memo(VirtualTable);

package/build/components/VirtualTables/VirtualTableWithCard/VirtualTableWithCard.js

@@ -0,0 +1,89 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, memo, useState } from 'react';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import memoize from 'memoize-one';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { useDelayToSetValue } from '../../../hooks/index.js';
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
+import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../../constants/index.js';
+import TableFooter from '../components/TableFooter';
+import TableNoDataWithCard from '../components/TableNoDataWithCard';
+import ListItemWrapperWithCard from '../components/virtualScroll/ListItemWrapperWithCard';
+import { StyledCardsBox, StyledVirtualList, TableContainer, TableWrapper } from '../components/style';
+const createItemData = memoize((isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, renderCardComponent) => ({
+    isLoading,
+    rows,
+    rowProps,
+    scrollToIndex,
+    totalCount,
+    lastItemIndex,
+    isError,
+    areAllRowsLoaded,
+    renderCardComponent,
+}));
+function VirtualTableWithCard({ rows, threshold = TABLE_THRESHOLD, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, onStartDrag, }) {
+    var _a;
+    const theme = useTheme();
+    const onPointerDown = (e) => {
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
+    };
+    const isDelayedFetchingNextPage = useDelayToSetValue({
+        value: isFetchingNextPage,
+        delay: 1000,
+    });
+    const [showBackDrop, setShowBackdrop] = useState(false);
+    const isError = hasError(error);
+    const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
+    const tableError = !isLoading && rows.length === 0 && isError && !isNotFoundError(error);
+    const tableEmpty = !isLoading && rows.length === 0;
+    const hasTimeoutError = isTimeoutError(error);
+    const lastItemIndex = rows.length - 1;
+    const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
+    const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
+    const itemData = createItemData(isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, renderCardComponent);
+    const renderTableContainer = useMemo(() => {
+        const setBackdropVisibility = (isVisible) => {
+            setShowBackdrop(isVisible);
+        };
+        const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+            // TODO: start index and stop index are not working as expected
+            // console.log('startIndex', startIndex, 'stopIndex', stopIndex,
+            // 'rows.length', rows.length)
+            if (areAllRowsLoaded)
+                return;
+            yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+        });
+        return (
+        // @ts-ignore
+        _jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(Box, Object.assign({ sx: { height: `${tableHeight - (tableHeaderHeight !== null && tableHeaderHeight !== void 0 ? tableHeaderHeight : 0)}px` }, id: "auto-sizer-wrapper" }, { children: _jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height: h, width: w }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: h || 0, width: w || 0, itemCount: itemsCount, itemSize: () => rowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN }, { children: ListItemWrapperWithCard }))) })) }))) })));
+    }, [
+        error,
+        isLoading,
+        lastItemIndex,
+        loadMoreItems,
+        rowHeight,
+        rows,
+        rowProps,
+        tableError,
+        tableLoading,
+        threshold,
+        isDelayedFetchingNextPage,
+        areAllRowsLoaded,
+        areTotalRowsNotFillingHeight,
+        itemsCount,
+    ]);
+    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+    return (_jsxs(_Fragment, { children: [_jsx(TableContainer, { children: _jsx(StyledCardsBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_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-table-mode": tableMode, dir: theme.direction, showNoDataView: showNoDataView, sx: { height: `${tableHeight}px !important` } }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [tableHeader, showNoDataView ? (_jsx(TableNoDataWithCard, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps, cardLoadingComponent: cardLoadingComponent, noDataComponent: noDataComponent })) : (renderTableContainer)] })) })) }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown, sx: { marginTop: '-37px' } }, footerProps))] }));
+}
+export default memo(VirtualTableWithCard);

package/build/components/VirtualTables/components/ColumnFilter/ColumnFilter.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import Popper from '@mui/material/Popper';
+import Box from '@mui/material/Box';
+import CustomBackdrop from '../../../CustomBackdrop';
+import { closeIcon, columnIcon, whiteFilterIcon } from '../../../../constants/index.js';
+import Inputs from './Inputs';
+import List from './List';
+import { FilterWrapper } from './style';
+function ColumnFilter(props) {
+    const { anchorEl, setAnchorEl, onClose, isFilterApplied, disabled } = props;
+    const onCloseDropdown = (event) => {
+        event.stopPropagation();
+        setAnchorEl(null);
+        onClose === null || onClose === void 0 ? void 0 : onClose(event);
+    };
+    const open = Boolean(anchorEl);
+    const filterApiKeys = useMemo(() => {
+        var _a;
+        if (props.type === 'list') {
+            return [props.apiKey];
+        }
+        return (_a = ((props === null || props === void 0 ? void 0 : props.options) || [])) === null || _a === void 0 ? void 0 : _a.map(({ apiKey }) => apiKey);
+    }, [props]);
+    const renderFilter = useMemo(() => {
+        if (props.type === 'list')
+            return _jsx(List, { onCloseDropdown: onCloseDropdown, filter: props });
+        if (props.type === 'inputs')
+            return _jsx(Inputs, { onCloseDropdown: onCloseDropdown, filter: props });
+        if (props.type === 'custom') {
+            const componentSharedProps = {
+                anchorEl,
+                setAnchorEl,
+                onCloseDropdown,
+            };
+            return props.render(componentSharedProps);
+        }
+        return null;
+    }, [open, props, onCloseDropdown]);
+    return (_jsxs(_Fragment, { children: [isFilterApplied ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 } }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: (e) => {
+                            e.stopPropagation();
+                            setAnchorEl(null);
+                            props.onClear(filterApiKeys);
+                        } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { marginTop: '2px', userSelect: 'none', opacity: disabled ? 0.5 : 1 } })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: renderFilter }))] }));
+}
+export default memo(ColumnFilter);

package/build/components/VirtualTables/components/ColumnFilter/Inputs/Inputs.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
+import lodashValues from 'lodash/values';
+import { useTranslation } from 'react-i18next';
+import { grayCloseIcon, searchIcon } from '../../../../../constants/index.js';
+import { Wrapper, Text, InputStyled, InputsWrapper, ClearButton, ClearWrapper } from './style';
+import { CancelButton, Footer, OkayButton } from '../style';
+function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOnlyOneFilter, onClearFilterFields, wrapperSx } }) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [values, setValues] = useState({});
+    useEffect(() => {
+        setValues((options || []).reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = data === null || data === void 0 ? void 0 : data[apiKey]) !== null && _a !== void 0 ? _a : '' })); }, {}));
+    }, []);
+    const { t } = useTranslation();
+    const onClickOkay = (e) => {
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(values);
+        onCloseDropdown(e);
+    };
+    const onClickCancel = (e) => {
+        onCloseDropdown(e);
+    };
+    const onClickClear = () => {
+        onClearFilterFields === null || onClearFilterFields === void 0 ? void 0 : onClearFilterFields();
+        setValues(options.reduce((acc, { apiKey }) => (Object.assign(Object.assign({}, acc), { [apiKey]: '' })), {}));
+    };
+    const isInputHasValue = (key) => values[key] !== undefined && values[key].length > 0;
+    const getInputValue = (key) => (values[key] !== undefined && values[key].length ? values[key] : '');
+    const onClickResetInput = (key) => {
+        if (isInputHasValue(key))
+            setValues(Object.assign(Object.assign({}, values), { [key]: '' }));
+    };
+    const showClearButton = useMemo(() => lodashValues(values).some((x) => Boolean(x)), [values]);
+    const getFilterByApiKey = useCallback((apiKey) => {
+        return options.find((option) => option.apiKey === apiKey);
+    }, [options]);
+    const isInputDisabled = useCallback((key, filterGroup) => {
+        const inputWithValue = (values === null || values === void 0 ? void 0 : values[key]) !== undefined && (values === null || values === void 0 ? void 0 : values[key]) !== '' && (values === null || values === void 0 ? void 0 : values[key]) !== null;
+        const isAnyInputWithValue = Object.entries(values).some(([inputKey, val]) => { var _a; return Boolean(val) && (((_a = getFilterByApiKey(inputKey)) === null || _a === void 0 ? void 0 : _a.filterGroup) !== filterGroup || !filterGroup); });
+        return isOnlyOneFilter && !inputWithValue && isAnyInputWithValue;
+    }, [options, values, isOnlyOneFilter]);
+    return (_jsxs(Wrapper, Object.assign({ component: "article", "data-testid": "ColumnFilterInputs" }, { children: [_jsx(Text, Object.assign({ component: "header", "data-testid": "ColumnFilterInputs_title" }, { children: t('filterBy') })), _jsx(InputsWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_inputs", component: "main", sx: wrapperSx }, { children: options.map(({ placeholder, apiKey, isDisabled, filterGroup, render }) => (_jsx(Fragment, { children: render ? (render()) : (_jsx(InputStyled, { className: "input", "data-testid": "ColumnFilterInputs_InputStyled", name: apiKey, placeholder: placeholder, onChange: (e) => {
+                            setValues(Object.assign(Object.assign({}, values), { [apiKey]: e.target.value }));
+                        }, disabled: isDisabled || isInputDisabled(apiKey, filterGroup), value: getInputValue(apiKey), inputProps: { autoComplete: 'off', 'data-testid': 'ColumnFilterInputs_input' }, endAdornment: _jsx(Box, { component: "img", "data-testid": "ColumnFilterInputs_icon", "data-icon": isInputHasValue(apiKey) ? 'close' : 'search', src: isInputHasValue(apiKey) ? grayCloseIcon : searchIcon, alt: "search", className: "icon", sx: { cursor: isInputHasValue(apiKey) ? 'pointer' : 'default' }, onClick: () => {
+                                onClickResetInput(apiKey);
+                            } }) })) }, apiKey))) })), _jsx(Collapse, Object.assign({ in: showClearButton, component: "section", "data-testid": "ColumnFilterInputs_Collapse", sx: {
+                    borderTop: '0',
+                } }, { children: _jsx(ClearWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_ClearWrapper" }, { children: _jsx(ClearButton, Object.assign({ type: "button", onClick: onClickClear, "data-testid": "ColumnFilterInputs_ClearButton" }, { children: t('clear') })) })) })), _jsxs(Footer, Object.assign({ component: "footer", "data-testid": "ColumnFilterInputs_footer" }, { children: [_jsx(CancelButton, Object.assign({ type: "button", onClick: onClickCancel, "data-testid": "ColumnFilterInputs_CancelButton" }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ type: "button", onClick: onClickOkay, "data-testid": "ColumnFilterInputs_OkayButton" }, { children: t('okay') }))] }))] })));
+}
+export default Inputs;

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

@@ -0,0 +1,2 @@
+import Inputs from './Inputs';
+export default Inputs;

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

@@ -0,0 +1,47 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import Input from '../../../../Input';
+export const Wrapper = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.common.white,
+    borderRadius: '4px',
+    filter: 'drop-shadow(0px 8px 30px rgba(0, 0, 0, 0.16))',
+    width: 188,
+    marginTop: 10,
+    boxShadow: theme.shadows[3],
+}));
+export const Text = styled(Box)(({ theme }) => ({
+    color: theme.palette.grey[700],
+    fontSize: '11px',
+    fontWeight: 500,
+    padding: '8px 16px',
+    textAlign: 'left',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+}));
+export const InputStyled = styled(Input)(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    '.icon': {
+        width: 14,
+    },
+}));
+export const InputsWrapper = styled(Box)(() => ({
+    padding: '8px 16px',
+    '> div + div': {
+        marginTop: '8px',
+    },
+}));
+export const ClearButton = styled(Button)(({ theme }) => ({
+    color: theme.palette.info.dark,
+    fontSize: '11px',
+    textTransform: 'capitalize',
+    padding: '4px 9px',
+    minWidth: 'auto',
+    '&:hover': {
+        background: 'transparent',
+    },
+}));
+export const ClearWrapper = styled(Box)(({ theme }) => ({
+    padding: '0 16px 8px',
+    textAlign: 'left',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+}));

package/build/components/VirtualTables/components/ColumnFilter/List/List.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import NestedDropdown from '../../../../NestedDropdown';
+import { CancelButton, Footer, OkayButton } from '../style';
+function List({ onCloseDropdown, filter, styles }) {
+    const [values, setValues] = useState([]);
+    const [itemsList, setItemsList] = useState([]);
+    const { t } = useTranslation();
+    const isItemSelected = (apiKey) => {
+        var _a, _b;
+        const selectedValues = (_b = (_a = filter === null || filter === void 0 ? void 0 : filter.data) === null || _a === void 0 ? void 0 : _a[filter.apiKey]) !== null && _b !== void 0 ? _b : [];
+        if (Array.isArray(selectedValues) && selectedValues.length) {
+            const selectedValueSet = new Set(selectedValues);
+            return selectedValueSet.has(apiKey);
+        }
+    };
+    useEffect(() => {
+        const renderItems = (menuItem) => {
+            return menuItem.map(({ placeholder, value, isSelected, icon, options }) => {
+                var _a;
+                return (Object.assign(Object.assign(Object.assign(Object.assign({}, (placeholder && { label: placeholder })), { name: value, selected: (_a = (isSelected || isItemSelected(value) || (options === null || options === void 0 ? void 0 : options.every(({ value: childKey }) => isItemSelected(childKey))))) !== null && _a !== void 0 ? _a : false }), (icon && { icon })), ((options === null || options === void 0 ? void 0 : options.length) && { menuItems: renderItems(options) })));
+            });
+        };
+        if (filter.options)
+            setItemsList(renderItems(filter.options));
+    }, [filter === null || filter === void 0 ? void 0 : filter.data]);
+    const onClickCancel = (e) => {
+        onCloseDropdown(e);
+    };
+    const onClickOkay = (e) => {
+        var _a;
+        const selectedValues = values.reduce((acc, { options, apiKey: parentKey, isSelected: isParentSelected }) => {
+            if (options) {
+                const selectedOptions = options.filter(({ isSelected }) => isSelected);
+                if (selectedOptions.length) {
+                    acc.push(...selectedOptions.map(({ apiKey: childKey }) => childKey));
+                }
+            }
+            else if (isParentSelected) {
+                acc.push(parentKey);
+            }
+            return acc;
+        }, []);
+        const selectedValueSet = new Set(selectedValues);
+        if (Object.keys(values).length)
+            (_a = filter === null || filter === void 0 ? void 0 : filter.onConfirm) === null || _a === void 0 ? void 0 : _a.call(filter, { [filter.apiKey]: [...selectedValueSet] });
+        onCloseDropdown(e);
+    };
+    const onUpdateMenuItems = (latestMenuItems) => {
+        const resetItems = (items) => items.map(({ name, selected, menuItems, label }) => (Object.assign(Object.assign(Object.assign({}, (label && { placeholder: label })), { apiKey: name, isSelected: selected }), ((menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) && { options: resetItems(menuItems) }))));
+        setValues(resetItems(latestMenuItems));
+    };
+    return (_jsx(NestedDropdown, { "data-testid": "ColumnFilter_List", title: t('filterBy') || 'Filter by', menuItems: itemsList, style: styles, sx: (theme) => (Object.assign({ marginTop: '10px', textAlign: 'left', boxShadow: theme.shadows[3], '.nested-menu-item': { height: 41, zIndex: 9999 } }, styles)), updatedList: onUpdateMenuItems, footer: _jsxs(Footer, Object.assign({ sx: {
+                position: 'sticky',
+                bottom: 0,
+                backgroundColor: 'white',
+                zIndex: 99999,
+            } }, { children: [_jsx(CancelButton, Object.assign({ onClick: onClickCancel }, { children: t('cancel') }), "nested-dropdown-cancel"), _jsx(OkayButton, Object.assign({ onClick: onClickOkay }, { children: t('okay') }), "nested-dropdown-ok")] })) }));
+}
+export default memo(List);

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

@@ -0,0 +1,2 @@
+import List from './List';
+export default List;

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

@@ -0,0 +1,5 @@
+import ColumnFilter from './ColumnFilter';
+export { default as Inputs } from './Inputs';
+export { default as List } from './List';
+export * from './type';
+export default ColumnFilter;