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

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

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useRef, useEffect } from 'react';
+import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
+import { getProcessedColumns } from '../../../utils/index.js';
+import TableFooter from '../components/TableFooter/TableFooter';
+import { SheetViewTableContainer } from '../components/style';
+import { SheetViewVirtualTableWrapper } from './style';
+import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, useTableDimensions } from './hooks';
+import { useColumnResize, useColumnResizeWithPinned, applyColumnWidths } from './features/resize';
+import { ResizeOverlay } from './features/resize/components';
+import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
+function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, defaultSkeleton = true, }) {
+    // Use skeleton columns (date + action pinned) when loading and defaultSkeleton
+    const processedColumns = useMemo(() => getProcessedColumns(columns, isLoading !== null && isLoading !== void 0 ? isLoading : false, defaultSkeleton), [columns, isLoading, defaultSkeleton]);
+    // Custom hooks for state management
+    const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
+    // Refs and state for resize indicator positioning
+    const tableContainerRef = useRef(null);
+    const tableWrapperRef = useRef(null);
+    // Table data processing
+    const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
+        rows,
+        isLoading,
+        error,
+        isFetchingNextPage,
+        areAllRowsLoaded,
+    });
+    // Column management
+    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(processedColumns, isPinnable, onColumnPin);
+    // Scroll synchronization
+    const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
+    // Reset virtual list cache when row count changes
+    useEffect(() => {
+        var _a, _b, _c;
+        // Reset all virtual lists to recalculate item sizes
+        (_a = pinnedStartVirtualListRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(0);
+        (_b = scrollableVirtualListRef.current) === null || _b === void 0 ? void 0 : _b.resetAfterIndex(0);
+        (_c = pinnedEndVirtualListRef.current) === null || _c === void 0 ? void 0 : _c.resetAfterIndex(0);
+    }, [rows.length, pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef]);
+    // Column resize functionality
+    const { columnWidths, isResizing, resizingColumn, resizeIndicatorX, cursorPosition, startResize, handleColumnClick: handleColumnClickWithResize, } = useColumnResize({
+        columns: processedColumns,
+        handleColumnClick,
+        windowId,
+        serviceCode,
+        tableContainerRef: tableWrapperRef,
+    });
+    // Table dimensions for resize indicator positioning
+    const tableDimensions = useTableDimensions({
+        tableContainerRef,
+        showHeader: showHeader !== null && showHeader !== void 0 ? showHeader : false,
+        isResizing,
+    });
+    // Column width calculations with dynamic resize support
+    const { pinnedStartColumnsWidth, pinnedEndColumnsWidth, pinnedStartColumnsDataWithWidths, pinnedEndColumnsDataWithWidths } = useColumnResizeWithPinned({
+        pinnedStartColumnsData,
+        pinnedEndColumnsData,
+        columnWidths,
+    });
+    // Apply dynamic widths to unpinned columns
+    const unpinnedColumnsDataWithWidths = useMemo(() => applyColumnWidths(unpinnedColumnsData, columnWidths), [unpinnedColumnsData, columnWidths]);
+    // Apply dynamic widths to ordered columns (for no-data view)
+    const orderedColumnsWithWidths = useMemo(() => applyColumnWidths(orderedColumns, columnWidths), [orderedColumns, columnWidths]);
+    // Virtual table container logic
+    const { getItemSize, getItemDataForContainer } = useVirtualTableContainer({
+        rowHeight,
+        areAllRowsLoaded,
+        rows,
+        isDelayedFetchingNextPage,
+        rowProps,
+        scrollToIndex,
+        footerProps,
+        isError,
+        selectedCell,
+        selectedColumn,
+        selectedRow,
+        selectedChip,
+        handleCellClick,
+        handleChipClick,
+    });
+    const onPointerDown = (e) => {
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
+    };
+    const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
+        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(VirtualTable, { columnsData: columnsData, itemCount: itemsCount, lastItemIndex: lastItemIndex, areAllRowsLoaded: areAllRowsLoaded, loadMoreItems: loadMoreItems, threshold: threshold, getItemSize: getItemSize, getItemData: getItemDataForContainer, isPinned: isPinned, fixedWidth: fixedWidth, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, onScroll: handleScrollCallback, setBackdropVisibility: setShowBackdrop, listRef: listRef, overscanCount: overscanCount }));
+    }, [
+        itemsCount,
+        lastItemIndex,
+        areAllRowsLoaded,
+        loadMoreItems,
+        threshold,
+        getItemSize,
+        getItemDataForContainer,
+        scrollToIndex,
+        areTotalRowsNotFillingHeight,
+        clearBackdropVisibilityTimeout,
+        handleScroll,
+        setShowBackdrop,
+        pinnedStartVirtualListRef,
+        pinnedEndVirtualListRef,
+        scrollableVirtualListRef,
+        overscanCount,
+    ]);
+    const baseCommonProps = {
+        showHeader,
+        columnsSorting,
+        onColumnSort,
+        headerProps,
+        showBackDrop,
+        onColumnPin: handleColumnPin,
+        isPinnable,
+        lastColumnId,
+        selectedColumn,
+        onColumnClick: handleColumnClickWithResize,
+        tableTitle,
+        areAllRowsLoaded,
+        isFetchingNextPage,
+        scrollToIndex,
+        isLoading,
+        isError,
+        tableMode,
+        showNoDataView,
+        tableBodyStyles,
+        onStartResize: startResize,
+        isResizing,
+        resizingColumn,
+    };
+    const commonPropsWithTableStates = Object.assign(Object.assign({}, baseCommonProps), { hasTimeoutError,
+        tableLoading });
+    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, Object.assign({ ref: tableContainerRef }, { children: showNoDataView ? (tableLoading ? (
+                // Show same table structure with pinned columns during loading, but with skeleton rows
+                _jsxs(SheetViewVirtualTableWrapper, Object.assign({ ref: tableWrapperRef }, { children: [pinnedStartColumnsDataWithWidths.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsDataWithWidths, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(LoadingMainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, unpinnedColumnsData: unpinnedColumnsDataWithWidths, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns }, commonPropsWithTableStates)), pinnedEndColumnsDataWithWidths.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsDataWithWidths, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] }))) : (
+                // Non-loading error states
+                _jsx(NoDataView, Object.assign({ tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumnsWithWidths, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps, customNoDataComponent: customNoDataComponent }, baseCommonProps)))) : (_jsxs(SheetViewVirtualTableWrapper, Object.assign({ ref: tableWrapperRef }, { children: [pinnedStartColumnsDataWithWidths.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsDataWithWidths, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(MainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, unpinnedColumnsData: unpinnedColumnsDataWithWidths, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)), pinnedEndColumnsDataWithWidths.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsDataWithWidths, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] }))) })), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps)), _jsx(ResizeOverlay, { isVisible: isResizing, indicatorX: resizeIndicatorX, indicatorHeight: tableDimensions.height, indicatorTop: tableDimensions.top, iconX: cursorPosition.x, iconY: cursorPosition.y })] }));
+}
+export default memo(SheetViewVirtualTable);

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

@@ -0,0 +1,21 @@
+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%',
+                                maxHeight: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                overflow: 'hidden',
+                            } }, { children: _jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false }) })) }))] })) })) })));
+}
+export default memo(LoadingMainTable);

package/build/components/VirtualTables/SheetViewVirtualTable/components/MainTable.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 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, onStartResize, isResizing, resizingColumn, }) {
+    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, onStartResize: onStartResize, isResizing: isResizing, resizingColumn: resizingColumn }) })), _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", sx: {
+                                height: '100%',
+                                maxHeight: '100%',
+                                overflow: 'hidden',
+                            } }, { 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.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, customNoDataComponent, }) {
+    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 }) })), customNoDataComponent ? (customNoDataComponent) : (_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.js

@@ -0,0 +1,24 @@
+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, onStartResize, isResizing, resizingColumn, }) {
+    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, onStartResize: onStartResize, isResizing: isResizing, resizingColumn: resizingColumn })), _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", sx: {
+                            height: '100%',
+                            maxHeight: '100%',
+                            overflow: 'hidden',
+                        } }, { 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.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { StyledHeader, StyledMUITableRow } from '../style';
+import SheetViewTableHeaderCell from './SheetViewTableHeaderCell';
+function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, onStartResize, isResizing = false, resizingColumn = null, }) {
+    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(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, onStartResize: onStartResize, isResizing: isResizing, resizingColumn: resizingColumn }, `${column.id}-${colIndex}`));
+            }) })) })));
+}
+export default memo(SheetViewTableHeader);

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

@@ -0,0 +1,62 @@
+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';
+import { ColumnResize } from '../features/resize';
+import { getColumnId } from '../features/resize/utils/resize';
+import useColumnFilter from '../../../VirtualTables/hooks/useColumnFilter';
+function SheetViewTableHeaderCell({ column: { header, id, tableViewId, align, headerStyle, sortable, filter, pinnable, width, order, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, onStartResize, isResizing = false, resizingColumn = null, }) {
+    // Use the same unique column ID logic as resize to ensure consistency
+    const columnId = getColumnId({ id, tableViewId });
+    const [columnFilterEl, setColumnFilterEl] = useState(null);
+    const cellRef = useRef(null);
+    const { isFilterApplied } = useColumnFilter({ filter });
+    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);
+    };
+    const handleCellClick = (event) => {
+        // Only fire column click when clicking on the cell itself, not on child elements
+        if (event.target === event.currentTarget) {
+            onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
+        }
+    };
+    const handleHeaderInnerClick = (event) => {
+        // Prevent event bubbling to parent cell
+        event.stopPropagation();
+        onOpenFilterDropdown();
+    };
+    return (_jsxs(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: handleCellClick, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'visible !important', cursor: 'pointer', boxSizing: 'border-box', border: '0.5px solid transparent', borderColor: isSelected ? '#1F88D0' : '#F2F2F2', borderBottom: isSelected ? '0.5px solid transparent' : '0.5px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', minHeight: '28px', position: 'relative', '&:before': {
+                content: '""',
+                borderBottom: 'none',
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                left: 0,
+                bottom: 0,
+            } }, headerStyle)) }, { children: [_jsxs(TableHeaderInner, Object.assign({ onClick: handleHeaderInnerClick }, { 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, isFilterApplied: isFilterApplied })), 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" }) })))] })), onStartResize && pinned !== 'end' && (_jsx(ColumnResize, { columnId: columnId, onStartResize: onStartResize, isResizing: isResizing, isLast: isLast }))] })));
+}
+export default memo(SheetViewTableHeaderCell);

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useEffect, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import uniqueId from 'lodash/uniqueId';
+import { calculateMaxAllowedRows } from '../../../../utils/index.js';
+import SheetViewTableRowLoading from './SheetViewTableRowLoading';
+import { SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
+const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
+    overflow: 'hidden',
+    paddingInline: isLoaded && !isPinned ? '32px' : '0px',
+    backgroundColor: isLoaded && !isPinned ? 'rgba(255, 255, 255, 0.60)' : 'none',
+    filter: isLoaded && !isPinned ? 'blur(8px)' : 'none',
+    marginTop: isLoaded && !isPinned ? '1rem' : '0',
+    height: '100%',
+    maxHeight: '100%',
+}));
+function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount = 13, isPinned = false, }) {
+    const [maxAllowedRows, setMaxAllowedRows] = useState(() => {
+        // Use provided rowsCount or calculate initial value
+        return rowsCount || Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 15);
+    });
+    useEffect(() => {
+        if (rowsCount) {
+            setMaxAllowedRows(rowsCount);
+            return;
+        }
+        // Calculate rows that fit in the available container height
+        const calculateRowsForContainer = () => {
+            var _a;
+            const wrapperElement = document.querySelector('[data-testid="SheetViewTableLoading"]');
+            if (!wrapperElement) {
+                return Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 25);
+            }
+            const containerHeight = ((_a = wrapperElement.parentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
+            const rowHeight = SHEET_VIEW_TABLE_ROW_HEIGHT; // Standard row height for SheetView
+            const headerHeight = 40; // Approximate header height
+            const availableHeight = containerHeight - headerHeight;
+            if (availableHeight <= 0) {
+                return Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 25);
+            }
+            const calculatedRows = Math.floor(availableHeight / rowHeight);
+            // Ensure we have at least 3 rows for loading state, but cap at a reasonable maximum
+            return Math.max(3, Math.min(calculatedRows + 2, 25));
+        };
+        const rows = calculateRowsForContainer();
+        setMaxAllowedRows(rows);
+        const handleResize = () => {
+            const calculatedRows = calculateRowsForContainer();
+            setMaxAllowedRows(calculatedRows);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [isLoaded, isLoading, rowsCount]);
+    return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, isPinned: isPinned, "data-testid": "SheetViewTableLoading" }, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index, useTableBackground: !isPinned }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) })));
+}
+export default memo(SheetViewTableLoading);

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { backendErrorHandler } from '../../../../utils/index.js';
+import EmptyList from '../../components/EmptyList/EmptyList';
+import ErrorList from '../../components/ErrorList/ErrorList';
+import SheetViewTableLoading from './SheetViewTableLoading';
+import { StyledSolidBackground } from '../../components/style';
+function SheetViewTableNoData({ error, tableEmpty, isTimeoutError, tableError, tableLoading, orderedColumns, triggerDataRefetch, footerProps, }) {
+    let content;
+    if (tableLoading) {
+        content = (_jsx(StyledSolidBackground, Object.assign({ "data-testid": "SheetViewVirtualTable_SolidBackground" }, { children: _jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: orderedColumns, isLoading: true, isPinned: false }) })));
+    }
+    else if (isTimeoutError) {
+        content = (_jsx(ErrorList, { "data-testid": "SheetViewVirtualTable_ErrorList_timeoutError", shouldMinimizeWidth: true, heading: "timeOut", message: "yourRequestOutPleaseTryAgain", triggerDataRefetch: triggerDataRefetch, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode }));
+    }
+    else if (tableError) {
+        const axiosErr = error;
+        const { formatted } = backendErrorHandler({ error: axiosErr, fallbackMessage: 'connectionErrorMsg' });
+        content = (_jsx(ErrorList, { "data-testid": "SheetViewVirtualTable_ErrorList_tableError", heading: "somethingWentWrong", message: formatted, triggerDataRefetch: triggerDataRefetch, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode }));
+    }
+    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 });
+    }
+    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 }));
+    }
+    return content;
+}
+SheetViewTableNoData.displayName = 'SheetViewTableNoData';
+export default memo(SheetViewTableNoData);

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import { styled, useTheme } from '@mui/material/styles';
+import TableCell from '@mui/material/TableCell';
+import MUITableRow from '@mui/material/TableRow';
+import { areEqual } from 'react-window';
+const StyledSkeleton = styled(Skeleton)(() => ({
+    backgroundColor: '#F4F4F4',
+    borderRadius: '64px',
+    width: '100%',
+    minWidth: '20px',
+}));
+function SheetViewTableRowLoading({ columns, style, index, animationType, rowIndex = 0, useTableBackground = false, }) {
+    const theme = useTheme();
+    return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', borderBottom: '1px solid #F2F2F2', minHeight: '28px', height: '28px', alignItems: 'center', backgroundColor: useTableBackground ? theme.palette.background.default : 'transparent', '&:hover': {
+                backgroundColor: 'transparent !important',
+            } }), component: "div", hover: true }, { children: columns.map((column, colIndex) => {
+            const isLastColumn = colIndex === columns.length - 1;
+            const isFirstColumn = colIndex === 0;
+            const isPinnedStart = column.pinned === 'start';
+            const shouldShowActualData = isFirstColumn && isPinnedStart;
+            return (_jsx(TableCell, Object.assign({ sx: {
+                    width: column.width || `${100 / columns.length}%` || '20%',
+                    paddingBlock: '0',
+                    paddingInline: '8px !important',
+                    paddingLeft: isFirstColumn ? '8px !important' : '8px !important',
+                    paddingRight: isLastColumn ? '8px !important' : '8px !important',
+                    borderRight: isLastColumn ? 'none' : '1px solid #F2F2F2',
+                    borderLeft: isFirstColumn ? '1px solid #F2F2F2' : 'none',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    boxSizing: 'border-box',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                }, component: "div" }, { children: shouldShowActualData && column.render ? (column.render({
+                    index: rowIndex,
+                    row: {},
+                    column,
+                    value: rowIndex + 1,
+                })) : (_jsx(StyledSkeleton, { variant: "rectangular", animation: animationType, height: 16 })) }), `${column.id}-${colIndex}`));
+        }) }), index));
+}
+export default memo(SheetViewTableRowLoading, areEqual);

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

@@ -0,0 +1,37 @@
+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 { SHEET_VIEW_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, overscanCount = SHEET_VIEW_TABLE_LIST_OVER_SCAN, }) {
+    const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+        if (areAllRowsLoaded)
+            return;
+        yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+    });
+    return (
+    // @ts-ignore
+    _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 (
+                // @ts-ignore
+                _jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: overscanCount, 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.js

@@ -0,0 +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/features/resize/components/ColumnResize.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { StyledResizeIcon, ResizeIcon } from '../styles';
+function ColumnResize({ columnId, onStartResize, isResizing, isLast = false }) {
+    const [isHovering, setIsHovering] = useState(false);
+    const [hoverPosition, setHoverPosition] = useState({ x: 0, y: 0 });
+    const resizeHandleRef = useRef(null);
+    const updateHoverPosition = useCallback(() => {
+        var _a;
+        const rect = (_a = resizeHandleRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            setHoverPosition({
+                x: rect.right,
+                y: rect.top + rect.height / 2,
+            });
+        }
+    }, []);
+    const handleMouseEnter = useCallback(() => {
+        if (!isResizing) {
+            setIsHovering(true);
+            updateHoverPosition();
+        }
+    }, [isResizing, updateHoverPosition]);
+    const handleMouseMove = useCallback(() => {
+        if (!isResizing && isHovering) {
+            updateHoverPosition();
+        }
+    }, [isResizing, isHovering, updateHoverPosition]);
+    const handleMouseLeave = useCallback(() => {
+        setIsHovering(false);
+    }, []);
+    const handleMouseDown = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setIsHovering(false);
+        onStartResize(e, columnId);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(StyledResizeIcon, { ref: resizeHandleRef, isResizing: isResizing, isLast: isLast, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, "data-testid": `column-resize-handle-${columnId}` }), createPortal(_jsx(ResizeIcon, { isVisible: isHovering && !isResizing, x: hoverPosition.x, y: hoverPosition.y, offsetX: -2 }), document.body)] }));
+}
+export default memo(ColumnResize);

package/build/components/VirtualTables/SheetViewVirtualTable/features/resize/components/ResizeOverlay.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { createPortal } from 'react-dom';
+import { IndicatorLine, ResizeIcon } from '../styles';
+function ResizeOverlay({ isVisible, indicatorX, indicatorHeight, indicatorTop, iconX, iconY }) {
+    if (!isVisible)
+        return null;
+    return createPortal(_jsxs(_Fragment, { children: [_jsx(IndicatorLine, { isVisible: isVisible, x: indicatorX, height: indicatorHeight, top: indicatorTop, "data-testid": "column-resize-indicator" }), _jsx(ResizeIcon, { isVisible: isVisible, x: iconX, y: iconY, offsetX: 8, "data-testid": "floating-resize-icon" })] }), document.body);
+}
+export default memo(ResizeOverlay);

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

@@ -0,0 +1,2 @@
+export { default as ColumnResize } from './ColumnResize';
+export { default as ResizeOverlay } from './ResizeOverlay';

package/build/components/VirtualTables/SheetViewVirtualTable/features/resize/constants.js

@@ -0,0 +1,5 @@
+export const COLUMN_WIDTH_CONSTRAINTS = {
+    MIN_WIDTH: 25,
+    MAX_WIDTH: 1500,
+    DEFAULT_WIDTH: 100,
+};

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

@@ -0,0 +1,2 @@
+export { useColumnResize } from './useColumnResize';
+export { useColumnResizeWithPinned } from './useColumnResizeWithPinned';