@tap-payments/os-micro-frontend-shared 0.1.22 → 0.1.23

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style';
+import { MainTableWrapper, UnpinnedTableHeaderWrapper } from '../style';
+import SheetViewTableHeader from './SheetViewTableHeader';
+import SheetViewTableLoading from './SheetViewTableLoading';
+function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, }) {
+    const theme = useTheme();
+    return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { children: _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-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
+                            width: '100%',
+                            minWidth: 'fit-content',
+                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
+                                height: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                            } }, { children: _jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false }) })) }))] })) })) })));
+}
+export default memo(LoadingMainTable);

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { MainTableProps } from '../types';
+declare function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, tableLoading, createVirtualTableContainer, }: MainTableProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof MainTable>;
+export default _default;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style';
+import { MainTableWrapper, UnpinnedTableHeaderWrapper } from '../style';
+import SheetViewTableHeader from './SheetViewTableHeader';
+import SheetViewTableLoading from './SheetViewTableLoading';
+function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, tableLoading, createVirtualTableContainer, }) {
+    const theme = useTheme();
+    return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { 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-table-mode": tableMode, height: "100%", dir: theme.direction, 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: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _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: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false })) : (createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false)) })) }))] })) })) })));
+}
+export default memo(MainTable);

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { NoDataViewProps } from '../types';
+declare function NoDataView({ tableLoading, tableError, tableEmpty, hasTimeoutError, orderedColumns, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, tableMode, tableBodyStyles, error, triggerDataRefetch, footerProps, }: NoDataViewProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof NoDataView>;
+export default _default;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { StyledTableBox, TableWrapper } from '../../components/style';
+import { UnpinnedTableHeaderWrapper } from '../style';
+import TableNoData from '../../components/TableNoData';
+import SheetViewTableHeader from './SheetViewTableHeader';
+function NoDataView({ tableLoading, tableError, tableEmpty, hasTimeoutError, orderedColumns, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, tableMode, tableBodyStyles, error, triggerDataRefetch, footerProps, }) {
+    const theme = useTheme();
+    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+    return (_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-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "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: onColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick }) })), _jsx(TableNoData, { error: error || null, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch || (() => Promise.resolve()), footerProps: footerProps })] })) })));
+}
+export default memo(NoDataView);

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { PinnedColumnProps } from '../types';
+declare function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, hasPinnedStart, hasPinnedEnd, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableLoading, createVirtualTableContainer, }: PinnedColumnProps): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: import("react").MemoExoticComponent<typeof PinnedColumn>;
+export default _default;

package/build/components/VirtualTables/SheetViewVirtualTable/components/PinnedColumn.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 { StyledTableBox, TableWrapper, StyledBox } from '../../components/style';
+import { PinnedStartColumnWrapper, PinnedEndColumnWrapper } from '../style';
+import SheetViewTableHeader from './SheetViewTableHeader';
+import SheetViewTableLoading from './SheetViewTableLoading';
+function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, hasPinnedStart, hasPinnedEnd, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableLoading, createVirtualTableContainer, }) {
+    const theme = useTheme();
+    if (columnsData.length === 0)
+        return null;
+    const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
+    const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
+    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-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, tablePosition: position === 'start' ? 'pinnedStart' : 'pinnedEnd', hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd })), _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: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": `SheetViewVirtualTable_PinnedTableLoading_${position}`, columns: columnsData, isLoading: true, isPinned: true })) : (createVirtualTableContainer(columnsData, containerKey, true, columnsWidth)) })) }))] })) }));
+}
+export default memo(PinnedColumn);

package/build/components/VirtualTables/SheetViewVirtualTable/components/{SheetViewTableHeader/SheetViewTableHeader.d.ts → SheetViewTableHeader.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SheetViewTableHeaderProps } from './type';
+import { SheetViewTableHeaderProps } from '../types';
 declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
 export default _default;

package/build/components/VirtualTables/SheetViewVirtualTable/components/{SheetViewTableHeader/SheetViewTableHeader.js → SheetViewTableHeader.js}

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
-import { StyledHeader, StyledMUITableRow } from '../../style';
-import TableCell from './TableCell';
+import { StyledHeader, StyledMUITableRow } from '../style';
+import SheetViewTableHeaderCell from './SheetViewTableHeaderCell';
 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) => {
                 var _a;
                 const columnKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${colIndex}`;
-                return (_jsx(TableCell, { column: column, colIndex: colIndex, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === columnKey, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick }, `${column.id}-${colIndex}`));
+                return (_jsx(SheetViewTableHeaderCell, { column: column, colIndex: colIndex, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === columnKey, 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/SheetViewTableHeaderCell.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { IColumnProps } from '../../../../types/index.js';
+import { SheetViewTableHeaderProps } from '../types';
+interface SheetViewTableHeaderCellProps extends Pick<SheetViewTableHeaderProps, 'onColumnSort' | 'columnsSorting' | 'onColumnPin' | 'isPinnable' | 'lastColumnId' | 'onColumnClick' | 'pinnedColumns'> {
+    column: IColumnProps;
+    colIndex: number;
+    isFirst: boolean;
+    isLast: boolean;
+    isSelected: boolean;
+    isDefaultPinned: boolean;
+}
+declare function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, tableViewId, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }: SheetViewTableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeaderCell>;
+export default _default;

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import { pinIcon, unpinIcon } from '../../../../constants/index.js';
+import ColumnFilter from '../../components/ColumnFilter';
+import { StyledCell, TableHeaderInner } from '../../components/style';
+import { PinIconContainer, HeaderText } from '../style';
+import ColumnSort from '../../components/ColumnSort';
+function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, tableViewId, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }) {
+    const [columnFilterEl, setColumnFilterEl] = useState(null);
+    const cellRef = useRef(null);
+    const checkIsPanned = useCallback((columnId) => pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId), [pinnedColumns]);
+    const isPinned = useMemo(() => checkIsPanned(id), [id, checkIsPanned]);
+    const handlePinClick = (columnId) => {
+        if (checkIsPanned(columnId)) {
+            onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'unpin');
+        }
+        else {
+            if (columnId === lastColumnId) {
+                onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'end');
+            }
+            else {
+                onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'start');
+            }
+        }
+    };
+    const onOpenFilterDropdown = () => {
+        setColumnFilterEl(cellRef.current);
+    };
+    return (_jsx(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, ref: cellRef, onClick: (event) => {
+            onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
+        }, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '1px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', minHeight: isSelected ? '28px' : 'auto', position: 'relative', '&:before': {
+                content: '""',
+                border: isSelected ? '1px solid #1F88D0' : '1px solid transparent',
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                left: 0,
+                bottom: 0,
+            } }, headerStyle)) }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: onOpenFilterDropdown }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
+                        onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
+                    } }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
+                        onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, e, pinned);
+                    } })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
+                        event.stopPropagation();
+                        handlePinClick(id);
+                    }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] })) })));
+}
+export default memo(SheetViewTableHeaderCell);

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { ListOnScrollProps, VariableSizeList } from 'react-window';
+import type { IColumnProps } from '../../../../types/index.js';
+type VirtualTableItemData = {
+    columns: IColumnProps[];
+    isLoading: boolean;
+    rows: unknown[];
+    rowProps: unknown;
+    scrollToIndex?: number;
+    totalCount: number;
+    lastItemIndex: number;
+    isError: boolean;
+    areAllRowsLoaded: boolean;
+    limit: number;
+    newLoadedRowsEndIndex: number;
+    isSheetView: boolean;
+    isPinned: boolean;
+    selectedCell: string | null;
+    selectedColumn: string | null;
+    onCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    containerHeight: number;
+    rowHeight: number;
+};
+interface VirtualTableProps {
+    columnsData: IColumnProps[];
+    itemCount: number;
+    lastItemIndex: number;
+    areAllRowsLoaded?: boolean;
+    loadMoreItems?: () => Promise<unknown>;
+    threshold: number;
+    getItemSize: (index: number, height: number) => number;
+    getItemData: (columnsData: IColumnProps[], isPinned: boolean, height: number) => VirtualTableItemData;
+    isPinned: boolean;
+    fixedWidth?: number;
+    scrollToIndex?: number;
+    areTotalRowsNotFillingHeight: boolean;
+    clearBackdropVisibilityTimeout: number;
+    onScroll?: (scrollProps: ListOnScrollProps) => void;
+    setBackdropVisibility: (visible: boolean) => void;
+    listRef: React.RefObject<VariableSizeList>;
+}
+declare function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded, loadMoreItems, threshold, getItemSize, getItemData, isPinned, fixedWidth, scrollToIndex, areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout, onScroll, setBackdropVisibility, listRef, }: VirtualTableProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
+export default _default;

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

@@ -0,0 +1,33 @@
+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 } from 'react';
+import InfiniteLoader from 'react-window-infinite-loader';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { TABLE_LIST_OVER_SCAN } from '../../../../constants/index.js';
+import ListItemWrapper from '../../components/virtualScroll/ListItemWrapper';
+import { StyledVirtualList } from '../../components/style';
+function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded, loadMoreItems, threshold, getItemSize, getItemData, isPinned, fixedWidth, scrollToIndex, areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout, onScroll, setBackdropVisibility, listRef, }) {
+    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({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref }, { children: ({ height, width }) => {
+                const itemSize = (index) => getItemSize(index, height);
+                const itemData = getItemData(columnsData, isPinned, height);
+                return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
+                        overflowX: isPinned ? 'hidden' : 'auto',
+                        paddingBottom: isPinned ? '25px' : '13px',
+                        backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
+                    } }, { children: ListItemWrapper })));
+            } }))) })));
+}
+export default memo(VirtualTable);

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

@@ -1,3 +1,9 @@
 export { default as SheetViewTableLoading } from './SheetViewTableLoading';
 export { default as SheetViewTableRowLoading } from './SheetViewTableRowLoading';
 export { default as SheetViewTableNoData } from './SheetViewTableNoData';
+export { default as SheetViewTableHeader } from './SheetViewTableHeader';
+export { default as VirtualTable } from './VirtualTable';
+export { default as PinnedColumn } from './PinnedColumn';
+export { default as MainTable } from './MainTable';
+export { default as LoadingMainTable } from './LoadingMainTable';
+export { default as NoDataView } from './NoDataView';

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

@@ -1,3 +1,9 @@
 export { default as SheetViewTableLoading } from './SheetViewTableLoading';
 export { default as SheetViewTableRowLoading } from './SheetViewTableRowLoading';
 export { default as SheetViewTableNoData } from './SheetViewTableNoData';
+export { default as SheetViewTableHeader } from './SheetViewTableHeader';
+export { default as VirtualTable } from './VirtualTable';
+export { default as PinnedColumn } from './PinnedColumn';
+export { default as MainTable } from './MainTable';
+export { default as LoadingMainTable } from './LoadingMainTable';
+export { default as NoDataView } from './NoDataView';

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

@@ -0,0 +1,6 @@
+export { usePinnedColumns } from './usePinnedColumns';
+export { useSynchronizedScroll } from './useSynchronizedScroll';
+export { useTableState } from './useTableState';
+export { useTableData } from './useTableData';
+export { useVirtualTableContainer } from './useVirtualTableContainer';
+export { usePinnedColumnsWidths } from './usePinnedColumnsWidths';

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

@@ -0,0 +1,6 @@
+export { usePinnedColumns } from './usePinnedColumns';
+export { useSynchronizedScroll } from './useSynchronizedScroll';
+export { useTableState } from './useTableState';
+export { useTableData } from './useTableData';
+export { useVirtualTableContainer } from './useVirtualTableContainer';
+export { usePinnedColumnsWidths } from './usePinnedColumnsWidths';

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

@@ -0,0 +1,5 @@
+import type { IColumnProps } from '../../../../types/index.js';
+export declare const usePinnedColumnsWidths: (pinnedStartColumnsData: IColumnProps[], pinnedEndColumnsData: IColumnProps[]) => {
+    pinnedStartColumnsWidth: number;
+    pinnedEndColumnsWidth: number;
+};

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

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+export const usePinnedColumnsWidths = (pinnedStartColumnsData, pinnedEndColumnsData) => {
+    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]);
+    return {
+        pinnedStartColumnsWidth,
+        pinnedEndColumnsWidth,
+    };
+};

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

@@ -0,0 +1,20 @@
+interface UseTableDataProps<T = unknown> {
+    rows: T[];
+    isLoading?: boolean;
+    error?: Error | null;
+    isFetchingNextPage?: boolean;
+    areAllRowsLoaded?: boolean;
+}
+export declare const useTableData: <T = unknown>({ rows, isLoading, error, isFetchingNextPage, areAllRowsLoaded }: UseTableDataProps<T>) => {
+    isDelayedFetchingNextPage: boolean;
+    lastItemIndex: number;
+    areTotalRowsNotFillingHeight: boolean;
+    itemsCount: number;
+    isError: boolean;
+    tableLoading: boolean;
+    tableError: boolean;
+    tableEmpty: boolean;
+    hasTimeoutError: boolean;
+    showNoDataView: boolean;
+};
+export {};

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

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { useDelayToSetValue } from '../../../../hooks/index.js';
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../../utils/index.js';
+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/useTableState.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export interface TableState {
+    selectedCell: string | null;
+    selectedColumn: string | null;
+    showBackDrop: boolean;
+}
+export declare const useTableState: () => {
+    selectedCell: string | null;
+    selectedColumn: string | null;
+    showBackDrop: boolean;
+    setShowBackdrop: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    handleColumnClick: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    resetSelection: () => void;
+};

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

@@ -0,0 +1,31 @@
+import { useState, useCallback } from 'react';
+export const useTableState = () => {
+    const [selectedCell, setSelectedCell] = useState(null);
+    const [selectedColumn, setSelectedColumn] = useState(null);
+    const [showBackDrop, setShowBackdrop] = useState(false);
+    const handleCellClick = useCallback((rowIndex, columnIndex, event, pinnedType) => {
+        event.stopPropagation();
+        const cellKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}`;
+        setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
+        setSelectedColumn(null);
+    }, []);
+    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);
+    }, []);
+    const resetSelection = useCallback(() => {
+        setSelectedCell(null);
+        setSelectedColumn(null);
+    }, []);
+    return {
+        selectedCell,
+        selectedColumn,
+        showBackDrop,
+        setShowBackdrop,
+        handleCellClick,
+        handleColumnClick,
+        resetSelection,
+    };
+};

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import type { IColumnProps } from '../../../../types/index.js';
+import type { TableRowProps } from '@mui/material/TableRow';
+interface UseVirtualTableContainerProps<T = unknown> {
+    rowHeight: number;
+    areAllRowsLoaded?: boolean;
+    rows: T[];
+    isDelayedFetchingNextPage: boolean;
+    rowProps?: TableRowProps & {
+        onRowClick?: (row: T, index: number) => void;
+    };
+    scrollToIndex?: number;
+    footerProps?: {
+        totalCount?: number;
+    };
+    isError: boolean;
+    selectedCell: string | null;
+    selectedColumn: string | null;
+    handleCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+}
+export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }: UseVirtualTableContainerProps<T>) => {
+    getItemSize: (index: number, height: number) => number;
+    getItemDataForContainer: (columnsData: IColumnProps[], isPinnedColumn: boolean, height: number) => {
+        columns: any;
+        isLoading: any;
+        rows: any;
+        rowProps: any;
+        scrollToIndex: any;
+        totalCount: any;
+        lastItemIndex: any;
+        isError: any;
+        areAllRowsLoaded: any;
+        limit: any;
+        newLoadedRowsEndIndex: any;
+        isSheetView: boolean;
+        isPinned: any;
+        selectedCell: any;
+        selectedColumn: any;
+        onCellClick: any;
+        containerHeight: any;
+        rowHeight: any;
+    };
+};
+export {};

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

@@ -0,0 +1,53 @@
+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, onCellClick, containerHeight, rowHeight) => ({
+    columns,
+    isLoading,
+    rows,
+    rowProps,
+    scrollToIndex,
+    totalCount,
+    lastItemIndex,
+    isError,
+    areAllRowsLoaded,
+    limit: totalCount,
+    newLoadedRowsEndIndex: lastItemIndex,
+    isSheetView: true,
+    isPinned,
+    selectedCell,
+    selectedColumn,
+    onCellClick,
+    containerHeight,
+    rowHeight,
+}));
+export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }) => {
+    const getItemSize = useCallback((index, height) => {
+        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;
+    }, [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, handleCellClick], [selectedCell, selectedColumn, handleCellClick]);
+    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.d.ts

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

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

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