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

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

@@ -1,30 +0,0 @@
-import { useRef, useCallback } from 'react';
-export const useSynchronizedScroll = () => {
-    const pinnedStartVirtualListRef = useRef(null);
-    const scrollableVirtualListRef = useRef(null);
-    const pinnedEndVirtualListRef = useRef(null);
-    const isScrollingSyncRef = useRef(false);
-    const handleScroll = useCallback(({ scrollOffset }, source) => {
-        if (isScrollingSyncRef.current)
-            return;
-        isScrollingSyncRef.current = true;
-        if (source !== 'start' && pinnedStartVirtualListRef.current) {
-            pinnedStartVirtualListRef.current.scrollTo(scrollOffset);
-        }
-        if (source !== 'end' && pinnedEndVirtualListRef.current) {
-            pinnedEndVirtualListRef.current.scrollTo(scrollOffset);
-        }
-        if (source !== 'scrollable' && scrollableVirtualListRef.current) {
-            scrollableVirtualListRef.current.scrollTo(scrollOffset);
-        }
-        requestAnimationFrame(() => {
-            isScrollingSyncRef.current = false;
-        });
-    }, []);
-    return {
-        pinnedStartVirtualListRef,
-        scrollableVirtualListRef,
-        pinnedEndVirtualListRef,
-        handleScroll,
-    };
-};

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

@@ -1,41 +0,0 @@
-import { useMemo } from 'react';
-import { useDelayToSetValue } from '../../../../hooks/index.js';
-import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../../utils/index.js';
-// Type guard to check if error is AxiosError
-const isAxiosError = (error) => {
-    return error !== null && 'isAxiosError' in error && error.isAxiosError === true;
-};
-export const useTableData = ({ rows, isLoading, error, isFetchingNextPage, areAllRowsLoaded }) => {
-    const isDelayedFetchingNextPage = useDelayToSetValue({
-        value: isFetchingNextPage,
-        delay: 1000,
-    });
-    const tableStates = useMemo(() => {
-        const isError = hasError(error || null);
-        const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
-        const axiosError = error && isAxiosError(error) ? error : null;
-        const tableError = !isLoading && rows.length === 0 && isError && !isNotFoundError(axiosError);
-        const tableEmpty = !isLoading && rows.length === 0;
-        const hasTimeoutError = isTimeoutError(axiosError);
-        const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
-        return {
-            isError,
-            tableLoading,
-            tableError,
-            tableEmpty,
-            hasTimeoutError,
-            showNoDataView,
-        };
-    }, [rows.length, isLoading, error]);
-    const tableMetrics = useMemo(() => {
-        const lastItemIndex = rows.length - 1;
-        const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableStates.tableLoading;
-        const itemsCount = (isDelayedFetchingNextPage !== null && isDelayedFetchingNextPage !== void 0 ? isDelayedFetchingNextPage : false) || areAllRowsLoaded ? rows.length + 1 : rows.length;
-        return {
-            lastItemIndex,
-            areTotalRowsNotFillingHeight,
-            itemsCount,
-        };
-    }, [rows.length, tableStates.tableLoading, isDelayedFetchingNextPage, areAllRowsLoaded]);
-    return Object.assign(Object.assign(Object.assign({}, tableStates), tableMetrics), { isDelayedFetchingNextPage: isDelayedFetchingNextPage !== null && isDelayedFetchingNextPage !== void 0 ? isDelayedFetchingNextPage : false });
-};

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

@@ -1,26 +0,0 @@
-import { SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
-import { useEffect, useState } from 'react';
-export const useTableDimensions = ({ tableContainerRef, showHeader, isResizing }) => {
-    const [tableDimensions, setTableDimensions] = useState({ top: 0, height: 0 });
-    useEffect(() => {
-        const updateTableDimensions = () => {
-            if (tableContainerRef.current) {
-                const rect = tableContainerRef.current.getBoundingClientRect();
-                const headerHeight = showHeader ? SHEET_VIEW_TABLE_ROW_HEIGHT : 0; // Header height is 28px
-                setTableDimensions({
-                    top: rect.top + headerHeight,
-                    height: rect.height - headerHeight,
-                });
-            }
-        };
-        // Update dimensions on mount and when resizing starts
-        updateTableDimensions();
-        if (isResizing) {
-            // Update dimensions during resize to handle window resizing
-            const handleResize = () => updateTableDimensions();
-            window.addEventListener('resize', handleResize);
-            return () => window.removeEventListener('resize', handleResize);
-        }
-    }, [isResizing, showHeader, tableContainerRef]);
-    return tableDimensions;
-};

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

@@ -1,65 +0,0 @@
-import { useState, useCallback } from 'react';
-export const useTableState = () => {
-    const [selectedCell, setSelectedCell] = useState(null);
-    const [selectedColumn, setSelectedColumn] = useState(null);
-    const [selectedChip, setSelectedChip] = useState(null);
-    const [selectedRow, setSelectedRow] = useState(null);
-    const [showBackDrop, setShowBackdrop] = useState(false);
-    const handleChipClick = useCallback((rowIndex, columnIndex, event, chipIndex, pinnedType) => {
-        event.stopPropagation();
-        const chipKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}-${chipIndex}`;
-        const cellKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}`;
-        const isChipAlreadySelected = selectedChip === chipKey;
-        if (isChipAlreadySelected) {
-            setSelectedChip(null);
-            setSelectedCell(null);
-            return;
-        }
-        setSelectedChip(chipKey);
-        setSelectedCell(cellKey);
-        setSelectedRow(null);
-    }, [selectedChip, setSelectedChip, setSelectedCell, setSelectedRow]);
-    const handleCellClick = useCallback((rowIndex, columnIndex, event, pinnedType) => {
-        event.stopPropagation();
-        // If clicking on any cell in the pinned start section, select the entire row
-        if (pinnedType === 'start' && columnIndex === 0) {
-            setSelectedRow((prev) => (prev === rowIndex ? null : rowIndex));
-            setSelectedCell(null);
-            setSelectedColumn(null);
-            setSelectedChip(null);
-            return;
-        }
-        // Otherwise, handle normal cell selection
-        const cellKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}`;
-        setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
-        setSelectedColumn(null);
-        setSelectedChip(null);
-        setSelectedRow(null);
-    }, [selectedRow]);
-    const handleColumnClick = useCallback((columnIndex, event, pinnedType) => {
-        event.stopPropagation();
-        const columnKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${columnIndex}`;
-        setSelectedColumn((prev) => (prev === columnKey ? null : columnKey));
-        setSelectedCell(null);
-        setSelectedChip(null);
-        setSelectedRow(null);
-    }, []);
-    const resetSelection = useCallback(() => {
-        setSelectedCell(null);
-        setSelectedColumn(null);
-        setSelectedChip(null);
-        setSelectedRow(null);
-    }, []);
-    return {
-        selectedCell,
-        selectedColumn,
-        selectedRow,
-        showBackDrop,
-        selectedChip,
-        setShowBackdrop,
-        handleChipClick,
-        handleCellClick,
-        handleColumnClick,
-        resetSelection,
-    };
-};

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

@@ -1,57 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

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

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

@@ -1,113 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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);