@tap-payments/os-micro-frontend-shared 0.1.8 → 0.1.9-test.1-test.2

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { StyledBox, StyledTableBox, TableWrapper } from '../../components/style';
+import { PinnedStartColumnWrapper, PinnedEndColumnWrapper } from '../style';
+import SheetViewTableHeader from './SheetViewTableHeader';
+import VirtualListSection from './VirtualListSection';
+function PinnedColumnSection({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, headerProps, columnsSorting, onColumnSort, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, listRef, itemsCount, rows, rowProps, rowsLength, loadMoreItems, threshold, areAllRowsLoaded, rowHeight, scrollToIndex, totalCount, isError, isDelayedFetchingNextPage, selectedCell, selectedColumnValue, handleCellClick, areTotalRowsNotFillingHeight, setShowBackdrop, handleScroll, clearBackdropVisibilityTimeout, getItemSize, updateReferenceHeight, tableTitle, areAllRowsLoadedDataAttr, isFetchingNextPageDataAttr, isLoadingDataAttr, hasTimeoutErrorDataAttr, tableMode, showNoDataView, }) {
+    const theme = useTheme();
+    const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
+    const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
+    if (columnsData.length === 0)
+        return null;
+    return (_jsx(Wrapper, Object.assign({ "data-testid": `SheetViewVirtualTable_PinnedColumnWrapper_${position}` }, { children: _jsxs(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_PinnedStyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": areAllRowsLoadedDataAttr, "data-is-fetching-next-page": !!isFetchingNextPageDataAttr, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoadingDataAttr, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutErrorDataAttr, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: onColumnPin, isPinnable: !!isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick })), _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_${position}`, hidePadding: true, className: "list-wrapper" }, { children: _jsx(VirtualListSection, { "data-testid": `SheetViewVirtualTable_VirtualListSection_${position}`, containerKey: containerKey, isPinned: true, fixedWidth: columnsWidth, listRef: listRef, columnsData: columnsData, itemsCount: itemsCount, rows: rows, rowProps: rowProps, rowsLength: rowsLength, loadMoreItems: loadMoreItems, threshold: threshold, areAllRowsLoaded: areAllRowsLoaded, rowHeight: rowHeight, scrollToIndex: scrollToIndex, totalCount: totalCount, isError: isError, isDelayedFetchingNextPage: isDelayedFetchingNextPage, selectedCell: selectedCell, selectedColumn: selectedColumnValue, handleCellClick: handleCellClick, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, setShowBackdrop: setShowBackdrop, handleScroll: handleScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, getItemSize: getItemSize, updateReferenceHeight: updateReferenceHeight }) })) }))] })) })));
+}
+export default memo(PinnedColumnSection);

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

@@ -4,7 +4,7 @@ import { StyledHeader, StyledMUITableRow } from '../../style';
 import TableCell from './TableCell';
 function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
     return (_jsx(StyledHeader, Object.assign({ component: "nav", "data-testid": "SheetViewVirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { children: _jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "SheetViewVirtualTable_TableHeader_StyledMUITableRow" }, { children: columns.map((column, colIndex) => {
-                return (_jsx(TableCell, { column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === column.id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick }, `${column.id}-${colIndex}`));
+                return (_jsx(TableCell, { "data-testid": "SheetViewVirtualTable_TableHeader_TableCell", column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === column.id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick }, `${column.id}-${colIndex}`));
             }) })) })));
 }
 export default memo(SheetViewTableHeader);

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/TableCell.js

@@ -38,7 +38,7 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
                     onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
                 } }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
                     onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, e);
-                } })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
+                } })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_PinIconContainer", onClick: (event) => {
                     event.stopPropagation();
                     handlePinClick(id);
                 }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] })));

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

@@ -15,6 +15,6 @@ const Wrapper = styled('section')(({ isLoaded = false }) => ({
 function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount }) {
     let maxAllowedRows = rowsCount || calculateMaxAllowedRows(isLoaded, isLoading);
     maxAllowedRows = rowsCount || Math.max(maxAllowedRows, 25);
-    return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, "data-testid": "SheetViewTableLoading" }, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) })));
+    return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, "data-testid": "SheetViewVirtualTable_Loading_Wrapper" }, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) })));
 }
 export default memo(SheetViewTableLoading);

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

@@ -21,7 +21,7 @@ function SheetViewTableNoData({ error, tableEmpty, isTimeoutError, tableError, t
     else if (tableEmpty) {
         const axiosErr = error;
         const { formatted } = backendErrorHandler({ error: axiosErr, fallbackMessage: 'tryAdjustingTheDateOrFilters' });
-        content = _jsx(EmptyList, { sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, heading: "nothingFound", message: formatted });
+        content = (_jsx(EmptyList, { "data-testid": "SheetViewVirtualTable_EmptyList", sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, heading: "nothingFound", message: formatted }));
     }
     else {
         content = (_jsx(ErrorList, { "data-testid": "SheetViewVirtualTable_ErrorList_tableError", heading: "somethingWentWrong", message: "connectionErrorMsg", triggerDataRefetch: triggerDataRefetch, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode }));

package/build/components/VirtualTables/SheetViewVirtualTable/components/VirtualListSection.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import type { VariableSizeList, ListOnScrollProps } from 'react-window';
+import type { IColumnProps } from '../../../../types/index.js';
+interface VirtualListSectionProps {
+    containerKey: 'pinnedStart' | 'pinnedEnd' | 'scrollable';
+    isPinned: boolean;
+    fixedWidth?: number;
+    listRef: React.RefObject<VariableSizeList>;
+    columnsData: IColumnProps[];
+    itemsCount: number;
+    rows: unknown[];
+    rowProps: unknown;
+    rowsLength: number;
+    loadMoreItems?: () => Promise<unknown>;
+    threshold: number;
+    areAllRowsLoaded: boolean;
+    rowHeight: number;
+    scrollToIndex?: number;
+    totalCount: number;
+    isError: boolean;
+    isDelayedFetchingNextPage: boolean;
+    selectedCell: string | null;
+    selectedColumn: string | null;
+    handleCellClick: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+    areTotalRowsNotFillingHeight: boolean;
+    setShowBackdrop: (v: boolean) => void;
+    handleScroll: (scrollProps: ListOnScrollProps, source: 'start' | 'end' | 'scrollable') => void;
+    clearBackdropVisibilityTimeout: number;
+    getItemSize?: (index: number) => number;
+    updateReferenceHeight?: (height: number) => void;
+}
+declare function VirtualListSection({ containerKey, isPinned, fixedWidth, listRef, columnsData, itemsCount, rows, rowProps, rowsLength, loadMoreItems, threshold, areAllRowsLoaded, rowHeight, scrollToIndex, totalCount, isError, isDelayedFetchingNextPage, selectedCell, selectedColumn, handleCellClick, areTotalRowsNotFillingHeight, setShowBackdrop, handleScroll, clearBackdropVisibilityTimeout, getItemSize: externalGetItemSize, updateReferenceHeight, }: Readonly<VirtualListSectionProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof VirtualListSection>;
+export default _default;

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

@@ -0,0 +1,76 @@
+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 } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from 'react';
+import memoize from 'memoize-one';
+import InfiniteLoader from 'react-window-infinite-loader';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { StyledVirtualList } from '../../components/style';
+import ListItemWrapper from '../../components/virtualScroll/ListItemWrapper';
+import { TABLE_LIST_OVER_SCAN } from '../../../../constants/index.js';
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
+    columns,
+    isLoading,
+    rows,
+    rowProps,
+    scrollToIndex,
+    totalCount,
+    isError,
+    areAllRowsLoaded,
+    limit: totalCount,
+    newLoadedRowsEndIndex: rows.length - 1,
+    isSheetView: true,
+    isPinned,
+    selectedCell,
+    selectedColumn,
+    onCellClick,
+    containerHeight,
+    rowHeight,
+}));
+function VirtualListSection({ containerKey, isPinned, fixedWidth, listRef, columnsData, itemsCount, rows, rowProps, rowsLength, loadMoreItems, threshold, areAllRowsLoaded, rowHeight, scrollToIndex, totalCount, isError, isDelayedFetchingNextPage, selectedCell, selectedColumn, handleCellClick, areTotalRowsNotFillingHeight, setShowBackdrop, handleScroll, clearBackdropVisibilityTimeout, getItemSize: externalGetItemSize, updateReferenceHeight, }) {
+    const onItemsRenderedSource = useMemo(() => (containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable'), [containerKey]);
+    const listStyle = useMemo(() => ({
+        overflowX: (isPinned ? 'hidden' : 'auto'),
+        paddingBottom: isPinned ? '25px' : '13px',
+        backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
+    }), [isPinned]);
+    const isItemLoaded = useCallback((index) => {
+        if (areAllRowsLoaded)
+            return true;
+        return index < rowsLength;
+    }, [areAllRowsLoaded, rowsLength]);
+    const onLoadMore = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (areAllRowsLoaded)
+            return;
+        yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+    }), [areAllRowsLoaded, loadMoreItems]);
+    const onScrollSync = useCallback((scrollProps) => {
+        handleScroll(scrollProps, onItemsRenderedSource);
+    }, [handleScroll, onItemsRenderedSource]);
+    return (_jsx(InfiniteLoader, Object.assign({ "data-testid": `SheetViewVirtualTable_VirtualListSection_InfiniteLoader_${containerKey}`, isItemLoaded: isItemLoaded, itemCount: itemsCount, loadMoreItems: onLoadMore, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualListSection_AutoSizer" }, { children: ({ height, width }) => {
+                if (!isPinned && updateReferenceHeight) {
+                    updateReferenceHeight(height);
+                }
+                const getItemSize = externalGetItemSize ||
+                    ((index) => {
+                        const isLastRow = areAllRowsLoaded && index === rowsLength;
+                        if (isLastRow) {
+                            const usedHeight = rowsLength * rowHeight;
+                            const remainingHeight = height - usedHeight;
+                            const minimumLastRowHeight = rowHeight * 2;
+                            return Math.max(remainingHeight, minimumLastRowHeight);
+                        }
+                        return rowHeight;
+                    });
+                const itemData = createItemData(columnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, handleCellClick, height, rowHeight);
+                return (_jsx(StyledVirtualList, Object.assign({ "data-testid": `SheetViewVirtualTable_VirtualListSection_StyledVirtualList_${containerKey}`, listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemsCount, itemSize: getItemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScrollSync, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: listStyle }, { children: ListItemWrapper })));
+            } }))) })));
+}
+export default memo(VirtualListSection);

package/build/components/VirtualTables/SheetViewVirtualTable/components/index.d.ts

@@ -1,3 +1,6 @@
 export { default as SheetViewTableLoading } from './SheetViewTableLoading';
 export { default as SheetViewTableRowLoading } from './SheetViewTableRowLoading';
 export { default as SheetViewTableNoData } from './SheetViewTableNoData';
+export { default as VirtualListSection } from './VirtualListSection';
+export { default as PinnedColumnSection } from './PinnedColumnSection';
+export { default as NoDataSection } from './NoDataSection';

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

@@ -1,3 +1,6 @@
 export { default as SheetViewTableLoading } from './SheetViewTableLoading';
 export { default as SheetViewTableRowLoading } from './SheetViewTableRowLoading';
 export { default as SheetViewTableNoData } from './SheetViewTableNoData';
+export { default as VirtualListSection } from './VirtualListSection';
+export { default as PinnedColumnSection } from './PinnedColumnSection';
+export { default as NoDataSection } from './NoDataSection';

package/build/components/VirtualTables/SheetViewVirtualTable/hooks/usePinnedWidths.d.ts

@@ -0,0 +1,5 @@
+import type { IColumnProps } from '../../../../types/index.js';
+export declare function usePinnedWidths(pinnedStart: IColumnProps[], pinnedEnd: IColumnProps[]): {
+    pinnedStartColumnsWidth: number;
+    pinnedEndColumnsWidth: number;
+};

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

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+export function usePinnedWidths(pinnedStart, pinnedEnd) {
+    const pinnedStartColumnsWidth = useMemo(() => pinnedStart.reduce((acc, col) => {
+        const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
+        return acc + width;
+    }, 0), [pinnedStart]);
+    const pinnedEndColumnsWidth = useMemo(() => pinnedEnd.reduce((acc, col) => {
+        const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
+        return acc + width;
+    }, 0), [pinnedEnd]);
+    return { pinnedStartColumnsWidth, pinnedEndColumnsWidth };
+}

package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useSelection.d.ts

@@ -0,0 +1,6 @@
+export declare function useSelection(): {
+    selectedCell: string | null;
+    selectedColumn: string | null;
+    handleCellClick: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+    handleColumnClick: (columnId: string, event: React.MouseEvent) => void;
+};

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

@@ -0,0 +1,17 @@
+import { useCallback, useState } from 'react';
+export function useSelection() {
+    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);
+    }, []);
+    return { selectedCell, selectedColumn, handleCellClick, handleColumnClick };
+}

package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useSharedItemSize.d.ts

@@ -0,0 +1,10 @@
+interface UseSharedItemSizeProps {
+    rowsLength: number;
+    areAllRowsLoaded: boolean;
+    rowHeight: number;
+}
+export declare const useSharedItemSize: ({ rowsLength, areAllRowsLoaded, rowHeight }: UseSharedItemSizeProps) => {
+    getItemSize: (index: number) => number;
+    updateReferenceHeight: (height: number) => void;
+};
+export {};

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

@@ -0,0 +1,21 @@
+import { useCallback, useRef } from 'react';
+export const useSharedItemSize = ({ rowsLength, areAllRowsLoaded, rowHeight }) => {
+    const referenceHeightRef = useRef(0);
+    const updateReferenceHeight = useCallback((height) => {
+        referenceHeightRef.current = height;
+    }, []);
+    const getItemSize = useCallback((index) => {
+        const isLastRow = areAllRowsLoaded && index === rowsLength;
+        if (isLastRow) {
+            const usedHeight = rowsLength * rowHeight;
+            const remainingHeight = referenceHeightRef.current - usedHeight;
+            const minimumLastRowHeight = rowHeight * 2;
+            return Math.max(remainingHeight, minimumLastRowHeight);
+        }
+        return rowHeight;
+    }, [areAllRowsLoaded, rowsLength, rowHeight]);
+    return {
+        getItemSize,
+        updateReferenceHeight,
+    };
+};

package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useSheetViewStates.d.ts

@@ -0,0 +1,14 @@
+interface UseSheetViewStatesParams {
+    rowsLength: number;
+    isLoading?: boolean;
+    error?: Error | null;
+}
+export declare function useSheetViewStates({ rowsLength, isLoading, error }: UseSheetViewStatesParams): {
+    isError: boolean;
+    tableLoading: boolean;
+    tableError: boolean;
+    tableEmpty: boolean;
+    hasTimeoutError: boolean;
+    showNoDataView: boolean;
+};
+export {};

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

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { hasError, isNotFoundError, isTimeoutError } from '../../../../utils/index.js';
+export function useSheetViewStates({ rowsLength, isLoading, error }) {
+    const normalizedError = error !== null && error !== void 0 ? error : null;
+    const isError = hasError(normalizedError);
+    const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
+    const tableEmpty = !isLoading && rowsLength === 0;
+    const tableError = useMemo(() => {
+        if (isLoading)
+            return false;
+        if (rowsLength !== 0)
+            return false;
+        if (!isError)
+            return false;
+        return !isNotFoundError(normalizedError);
+    }, [isLoading, rowsLength, isError, normalizedError]);
+    const hasTimeoutError = isTimeoutError(normalizedError);
+    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+    return { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView };
+}

package/build/components/VirtualTables/SheetViewVirtualTable/style.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-export declare const ActionIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const ColumnIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const HeaderText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const PinIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledHeader: import("@emotion/styled").StyledComponent<import("@mui/material/TableHead").TableHeadOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {

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

@@ -1,16 +1,6 @@
 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',

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

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

@@ -1,94 +1,34 @@
-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 { memo } 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 } from '../../../utils/index.js';
+import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD } from '../../../constants/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, dragControls, isSheetView = false, }) {
-    var _a;
+import { StyledBox, StyledTableBox, TableContainer, TableWrapper } from '../components/style';
+import VirtualTableList from './VirtualTableList';
+import { useVirtualTable } from './useVirtualTable';
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, }) {
     const theme = useTheme();
     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 shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
-    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);
-    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* () {
-            if (areAllRowsLoaded)
-                return;
-            yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
-        });
-        return (_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 }))) }))) })));
-    }, [
-        lastItemIndex,
-        loadMoreItems,
-        threshold,
-        areAllRowsLoaded,
-        areTotalRowsNotFillingHeight,
-        itemsCount,
-        tableRowHeight,
-        isSheetView,
-        itemData,
+    const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, orderedColumns, areTotalRowsNotFillingHeight, itemsCount, itemData, listRef, showBackDrop, setBackdropVisibility, loadMoreItemsSafe, } = useVirtualTable({
+        columns,
+        rows,
+        rowProps,
+        footerProps,
+        isLoading,
+        error,
+        isFetchingNextPage,
         scrollToIndex,
-    ]);
-    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({ isSheetView: isSheetView, "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 })), showNoDataView ? (_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: {
+        areAllRowsLoaded,
+        loadMoreItems,
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, Object.assign({ "data-testid": "VirtualTable_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({ isSheetView: false, "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: false })), showNoDataView ? (_jsx(TableNoData, { "data-testid": "VirtualTable_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, { height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: _jsx(VirtualTableList, { rowsLength: rows.length, itemsCount: itemsCount, threshold: threshold, tableRowHeight: TABLE_ROW_HEIGHT, areAllRowsLoaded: areTotalRowsNotFillingHeight ? false : areAllRowsLoaded, isFetchingNextPage: isFetchingNextPage, loadMoreItems: loadMoreItemsSafe, itemData: itemData, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, setBackdropVisibility: setBackdropVisibility, listRef: listRef }) })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] })), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
 }
 export default memo(VirtualTable);

package/build/components/VirtualTables/VirtualTable/VirtualTableList.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { VariableSizeList } from 'react-window';
+interface VirtualTableListProps {
+    rowsLength: number;
+    itemsCount: number;
+    threshold: number;
+    tableRowHeight: number;
+    areAllRowsLoaded: boolean;
+    isFetchingNextPage?: boolean;
+    loadMoreItems?: () => Promise<void> | void;
+    itemData: any;
+    areTotalRowsNotFillingHeight: boolean;
+    scrollToIndex?: number;
+    setBackdropVisibility: (isVisible: boolean) => void;
+    listRef: React.RefObject<VariableSizeList>;
+}
+declare function VirtualTableList({ rowsLength, itemsCount, threshold, tableRowHeight, areAllRowsLoaded, isFetchingNextPage, loadMoreItems, itemData, areTotalRowsNotFillingHeight, scrollToIndex, setBackdropVisibility, listRef, }: Readonly<VirtualTableListProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof VirtualTableList>;
+export default _default;

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

@@ -0,0 +1,27 @@
+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 } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { TABLE_LIST_OVER_SCAN } from '../../../constants/index.js';
+import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
+import { StyledVirtualList } from '../components/style';
+function VirtualTableList({ rowsLength, itemsCount, threshold, tableRowHeight, areAllRowsLoaded, isFetchingNextPage, loadMoreItems, itemData, areTotalRowsNotFillingHeight, scrollToIndex, setBackdropVisibility, listRef, }) {
+    const isItemLoaded = useCallback((index) => index < rowsLength, [rowsLength]);
+    const handleOnLoadMoreItems = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (areAllRowsLoaded || isFetchingNextPage)
+            return;
+        yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+    }), [areAllRowsLoaded, isFetchingNextPage, loadMoreItems]);
+    const itemSizeForIndex = useCallback(() => tableRowHeight, [tableRowHeight]);
+    return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: isItemLoaded, 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: itemSizeForIndex, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: false, listRef: listRef }, { children: ListItemWrapper }))) }))) })));
+}
+export default memo(VirtualTableList);

package/build/components/VirtualTables/VirtualTable/useVirtualTable.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { VariableSizeList } from 'react-window';
+import type { IVirtualTable } from '../../../types/index.js';
+export type UseVirtualTableArgs = Pick<IVirtualTable, 'columns' | 'rows' | 'rowProps' | 'footerProps' | 'isLoading' | 'error' | 'isFetchingNextPage' | 'scrollToIndex' | 'areAllRowsLoaded' | 'loadMoreItems'>;
+export declare function useVirtualTable({ columns, rows, rowProps, footerProps, isLoading, error, isFetchingNextPage, scrollToIndex, areAllRowsLoaded, loadMoreItems, }: Readonly<UseVirtualTableArgs>): {
+    isDelayedFetchingNextPage: boolean;
+    isError: boolean;
+    tableLoading: boolean;
+    tableError: boolean;
+    tableEmpty: boolean;
+    hasTimeoutError: boolean;
+    showNoDataView: boolean;
+    orderedColumns: import("../../../types/index.js").IColumnProps<any>[];
+    areTotalRowsNotFillingHeight: boolean;
+    itemsCount: number;
+    itemData: {
+        columns: any;
+        isLoading: boolean;
+        rows: any[];
+        rowProps: any;
+        scrollToIndex: number | undefined;
+        totalCount: number;
+        lastItemIndex: number;
+        isError: boolean;
+        areAllRowsLoaded: boolean;
+    };
+    listRef: import("react").RefObject<VariableSizeList<any>>;
+    showBackDrop: boolean;
+    setBackdropVisibility: (isVisible: boolean) => void;
+    loadMoreItemsSafe: () => Promise<void>;
+};