@tap-payments/os-micro-frontend-shared 0.0.312 → 0.1.1-test.54

package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js

@@ -1,194 +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, useCallback } from 'react';
-import { useTheme } from '@mui/material/styles';
-import memoize from 'memoize-one';
-import InfiniteLoader from 'react-window-infinite-loader';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../../constants/index.js';
-import { useDelayToSetValue } from '../../../hooks/index.js';
-import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
-import TableFooter from '../components/TableFooter/TableFooter';
-import TableNoData from '../components/TableNoData';
-import { SheetViewTableNoData } from './components';
-import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
-import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from '../style';
-import { SheetViewVirtualTableWrapper, PinnedStartColumnWrapper, PinnedEndColumnWrapper, MainTableWrapper, UnpinnedTableHeaderWrapper } from './style';
-import SheetViewTableHeader from './components/SheetViewTableHeader';
-import { usePinnedColumns } from './hooks/usePinnedColumns';
-import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
-const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
-    columns,
-    isLoading,
-    rows,
-    rowProps,
-    scrollToIndex,
-    totalCount,
-    lastItemIndex,
-    isError,
-    areAllRowsLoaded,
-    limit: totalCount,
-    newLoadedRowsEndIndex: lastItemIndex,
-    isSheetView: true,
-    isPinned,
-    selectedCell,
-    selectedColumn,
-    onCellClick,
-    containerHeight,
-    rowHeight,
-}));
-function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, }) {
-    const theme = useTheme();
-    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
-    const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
-    const [selectedCell, setSelectedCell] = useState(null);
-    const [selectedColumn, setSelectedColumn] = useState(null);
-    const handleCellClick = useCallback((rowIndex, columnId, event) => {
-        event.stopPropagation();
-        const cellKey = `${rowIndex}-${columnId}`;
-        setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
-        setSelectedColumn(null);
-    }, []);
-    const handleColumnClick = useCallback((columnId, event) => {
-        event.stopPropagation();
-        setSelectedColumn((prev) => (prev === columnId ? null : columnId));
-        setSelectedCell(null);
-    }, []);
-    const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(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 ? rows.length + 1 : rows.length;
-    const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
-        const tableItemsCount = itemsCount;
-        const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
-            if (areAllRowsLoaded)
-                return;
-            yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
-        });
-        const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
-        const handleScrollCallback = (scrollProps) => {
-            const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
-            handleScroll(scrollProps, source);
-        };
-        return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => {
-                    var _a;
-                    const getItemSize = (index) => {
-                        const isLastRow = areAllRowsLoaded && index === rows.length;
-                        if (isLastRow) {
-                            const usedHeight = rows.length * rowHeight;
-                            const remainingHeight = height - usedHeight;
-                            const minimumLastRowHeight = rowHeight * 2;
-                            return Math.max(remainingHeight, minimumLastRowHeight);
-                        }
-                        return rowHeight;
-                    };
-                    const commonItemDataParams = [
-                        isDelayedFetchingNextPage,
-                        rows,
-                        rowProps,
-                        scrollToIndex,
-                        lastItemIndex,
-                        (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0,
-                        isError,
-                        areAllRowsLoaded,
-                    ];
-                    const commonItemDataSuffix = [selectedCell, selectedColumn, handleCellClick, height, rowHeight];
-                    const getItemDataForContainer = (columnsData, isPinnedColumn) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix);
-                    const currentItemData = containerKey === 'pinnedStart'
-                        ? getItemDataForContainer(pinnedStartColumnsData, true)
-                        : containerKey === 'pinnedEnd'
-                            ? getItemDataForContainer(pinnedEndColumnsData, true)
-                            : getItemDataForContainer(unpinnedColumnsData, false);
-                    return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: getItemSize, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
-                            overflowX: isPinned ? 'hidden' : 'auto',
-                            paddingBottom: isPinned ? '25px' : '13px',
-                            backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
-                        } }, { children: ListItemWrapper })));
-                } })) })));
-    }, [
-        itemsCount,
-        areAllRowsLoaded,
-        loadMoreItems,
-        threshold,
-        rowHeight,
-        rows,
-        pinnedStartColumnsData,
-        pinnedEndColumnsData,
-        unpinnedColumnsData,
-        isDelayedFetchingNextPage,
-        rowProps,
-        scrollToIndex,
-        lastItemIndex,
-        footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount,
-        isError,
-        areTotalRowsNotFillingHeight,
-        selectedCell,
-        selectedColumn,
-        handleCellClick,
-        handleScroll,
-        clearBackdropVisibilityTimeout,
-        pinnedEndVirtualListRef,
-        pinnedStartVirtualListRef,
-        scrollableVirtualListRef,
-        theme.palette.background.default,
-    ]);
-    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
-    const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
-        const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
-        return acc + width;
-    }, 0.2), [pinnedStartColumnsData]);
-    const pinnedEndColumnsWidth = useMemo(() => pinnedEndColumnsData.reduce((acc, col) => {
-        const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
-        return acc + width;
-    }, 0.2), [pinnedEndColumnsData]);
-    const renderPinnedColumn = (position, columnsData, columnsWidth, pinnedColumnsList) => {
-        const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
-        const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
-        if (columnsData.length === 0)
-            return null;
-        return (_jsx(Wrapper, { children: _jsxs(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
-                            width: '100%',
-                            minWidth: 'fit-content',
-                            overflowX: 'hidden',
-                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) }));
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(TableContainer, { children: showNoDataView ? (tableLoading ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true, sx: {
-                        marginLeft: '28px',
-                        maxHeight: 'calc(100vh - 300px)',
-                        overflow: 'auto',
-                    } }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: 'auto' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
-                                    width: '100%',
-                                    minWidth: 'fit-content',
-                                    height: 'auto',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
-                                        height: 'auto',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                    } }, { children: _jsx(SheetViewTableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))] })) }))) : (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })] })) })))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
-                                                width: '100%',
-                                                minWidth: 'fit-content',
-                                            } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
-}
-export default memo(SheetViewVirtualTable);

package/build/components/VirtualTable/index.d.ts

@@ -1,6 +0,0 @@
-import VirtualTable from './VirtualTable';
-export { default as VirtualTableWithCard } from './VirtualTableWithCard';
-export * from './components';
-export * from './SheetView';
-export { StyledCell } from './style';
-export default VirtualTable;

package/build/components/VirtualTable/index.js

@@ -1,6 +0,0 @@
-import VirtualTable from './VirtualTable';
-export { default as VirtualTableWithCard } from './VirtualTableWithCard';
-export * from './components';
-export * from './SheetView';
-export { StyledCell } from './style';
-export default VirtualTable;

package/build/playground/VTDemo.d.ts

@@ -1 +0,0 @@
-export declare const VTDemo: () => import("react/jsx-runtime").JSX.Element;

package/build/playground/VTDemo.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Button, VirtualTable } from '../components/index.js';
-import { Box } from '@mui/material';
-export const VTDemo = () => {
-    const [isSheetView, setIsSheetView] = useState(false);
-    const toggleView = () => {
-        setIsSheetView((prev) => !prev);
-    };
-    return (_jsx(Box, Object.assign({ sx: {
-            width: '100%',
-            height: '100vh',
-            overflow: 'auto',
-            flexDirection: 'row',
-            display: 'flex',
-            justifyContent: 'center',
-            p: 3,
-            backgroundColor: 'gray',
-        } }, { children: _jsxs(Box, Object.assign({ "data-testid": "ChargesList", sx: {
-                position: 'relative',
-                display: 'flex',
-                flexDirection: 'column',
-                width: '80%',
-                height: '100%',
-            } }, { children: [_jsx(Button, Object.assign({ onClick: toggleView }, { children: "Toggle" })), _jsx(VirtualTable, { showHeader: true, showFooter: true, footerProps: {
-                        totalCount: 4,
-                        sandboxMode: false,
-                        maximized: false,
-                    }, loadMoreItems: () => Promise.resolve(), isLoading: false, isFetchingNextPage: false, rows: [
-                        { index: '1', date: 'date', order: 'order' },
-                        { index: '2', date: 'date', order: 'order' },
-                        { index: '3', date: 'date', order: 'order' },
-                    ], areAllRowsLoaded: true, columnsSorting: { id: 'asc' }, onColumnSort: () => { }, columns: [
-                        { id: 'index', header: '', width: '28px' },
-                        {
-                            id: 'date',
-                            header: 'Date',
-                            width: '170px',
-                        },
-                        {
-                            id: 'order',
-                            header: 'Order',
-                            width: '170px',
-                            filter: {
-                                onConfirm: undefined,
-                                onClear: () => { },
-                                type: 'inputs',
-                                options: [
-                                    {
-                                        placeholder: 'Order',
-                                        apiKey: 'orderID',
-                                    },
-                                ],
-                                data: {},
-                            },
-                        },
-                    ], error: null, triggerDataRefetch: () => Promise.resolve(), showBackgroundColor: false, tableTitle: "Acceptance-Charges", tableMode: 'sheet', dragControls: undefined, isSheetView: isSheetView })] })) })));
-};

package/build/playground/index.d.ts

@@ -1 +0,0 @@
-export { VTDemo } from './VTDemo';

package/build/playground/index.js

@@ -1 +0,0 @@
-export { VTDemo } from './VTDemo';