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

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

@@ -0,0 +1,152 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { getColumnWidth as getStoredColumnWidth } from '../../../../../../utils/index.js';
+import { getColumnId, parseColumnWidth, clampWidth, cleanupEventListeners as cleanupEventListenersUtil, createMouseMoveHandler, getColumnWidthFromState, createResizeEndHandler, } from '../utils/resize';
+export const useColumnResize = ({ columns, onColumnResize, handleColumnClick, windowId, serviceCode, tableContainerRef }) => {
+    // Memoize initial column widths to prevent unnecessary recalculations
+    const initialColumnWidths = useMemo(() => {
+        return columns.reduce((acc, col) => {
+            const columnId = getColumnId(col);
+            const defaultWidth = parseColumnWidth(col.width);
+            // Try to get width from localStorage if windowId and serviceCode are provided
+            let finalWidth = defaultWidth;
+            if (windowId && serviceCode) {
+                try {
+                    const storedWidth = getStoredColumnWidth(windowId, serviceCode, columnId, defaultWidth);
+                    finalWidth = storedWidth !== null && storedWidth !== void 0 ? storedWidth : defaultWidth;
+                }
+                catch (error) {
+                    console.warn(`Failed to load stored width for column ${columnId}:`, error);
+                    finalWidth = defaultWidth;
+                }
+            }
+            acc[columnId] = clampWidth(finalWidth);
+            return acc;
+        }, {});
+    }, [windowId, serviceCode]);
+    const [{ columnWidths, isResizing, resizingColumn, resizeIndicatorX }, setResizeState] = useState(() => ({
+        columnWidths: initialColumnWidths,
+        isResizing: false,
+        resizingColumn: null,
+        startX: 0,
+        startWidth: 0,
+        resizeIndicatorX: 0,
+    }));
+    const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+    // Refs for managing resize state and event listeners
+    const isResizingRef = useRef(false);
+    const initialCursorYRef = useRef(0);
+    const clampedXRef = useRef(0);
+    const startXRef = useRef(0);
+    const startWidthRef = useRef(0);
+    const mouseMoveRef = useRef();
+    const mouseUpRef = useRef();
+    useEffect(() => {
+        setResizeState((prev) => {
+            const currentKeys = new Set(Object.keys(prev.columnWidths));
+            const newKeys = new Set(Object.keys(initialColumnWidths));
+            if (currentKeys.size !== newKeys.size) {
+                return Object.assign(Object.assign({}, prev), { columnWidths: initialColumnWidths });
+            }
+            const hasChanged = Array.from(newKeys).some((key) => !currentKeys.has(key) || prev.columnWidths[key] !== initialColumnWidths[key]);
+            if (!hasChanged) {
+                return prev;
+            }
+            return Object.assign(Object.assign({}, prev), { columnWidths: initialColumnWidths });
+        });
+    }, []);
+    const getColumnWidth = useCallback((columnId) => {
+        return getColumnWidthFromState(columnWidths, columnId);
+    }, [columnWidths]);
+    // Clean up event listeners
+    const cleanupEventListeners = useCallback(() => {
+        cleanupEventListenersUtil(mouseMoveRef, mouseUpRef);
+    }, []);
+    // Resize end handler with memoization
+    const createResizeEndHandlerMemo = useCallback((columnId, currentWidth, startX) => {
+        return createResizeEndHandler(windowId, serviceCode, onColumnResize, setResizeState, cleanupEventListeners, isResizingRef, clampedXRef)(columnId, currentWidth, startX);
+    }, [windowId, serviceCode, onColumnResize, cleanupEventListeners]);
+    const createMouseMoveHandlerCallback = useCallback((columnIndex, columnPinned) => {
+        return createMouseMoveHandler(setResizeState, setCursorPosition, initialCursorYRef, tableContainerRef, columnIndex, columnPinned, clampedXRef, startXRef, startWidthRef);
+    }, [tableContainerRef]);
+    const startResize = useCallback((e, columnId) => {
+        e.preventDefault();
+        e.stopPropagation();
+        try {
+            const currentWidth = getColumnWidth(columnId);
+            const startX = e.clientX;
+            // Find the column being resized to get its index and pinned status
+            const columnBeingResized = columns.find((col) => getColumnId(col) === columnId);
+            const columnIndex = columnBeingResized
+                ? columns.filter((col) => col.pinned === columnBeingResized.pinned).findIndex((col) => getColumnId(col) === columnId)
+                : undefined;
+            const columnPinned = columnBeingResized === null || columnBeingResized === void 0 ? void 0 : columnBeingResized.pinned;
+            // Calculate the icon's Y position (center of the header cell)
+            const target = e.currentTarget;
+            const headerCell = target.closest('[data-testid="SheetViewVirtualTable_TableHeader_StyledCell"]');
+            let iconY = e.clientY; // fallback to mouse Y
+            if (headerCell) {
+                const rect = headerCell.getBoundingClientRect();
+                iconY = rect.top + rect.height / 2; // Center of the header cell (same as icon position)
+            }
+            setResizeState((prev) => (Object.assign(Object.assign({}, prev), { isResizing: true, resizingColumn: columnId, startX, startWidth: currentWidth, resizeIndicatorX: startX, resizingColumnIndex: columnIndex, resizingColumnPinned: columnPinned })));
+            initialCursorYRef.current = iconY;
+            clampedXRef.current = startX;
+            startXRef.current = startX;
+            startWidthRef.current = currentWidth;
+            setCursorPosition({ x: startX, y: iconY });
+            isResizingRef.current = true;
+            // Create and store event handlers
+            const handleMouseMove = createMouseMoveHandlerCallback(columnIndex, columnPinned);
+            const handleMouseUp = createResizeEndHandlerMemo(columnId, currentWidth, startX);
+            mouseMoveRef.current = handleMouseMove;
+            mouseUpRef.current = handleMouseUp;
+            // Add global event listeners
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            // Hide cursor and disable text selection during resize
+            document.body.style.cursor = 'none';
+            document.body.style.userSelect = 'none';
+        }
+        catch (error) {
+            console.error('Error starting resize:', error);
+            cleanupEventListeners();
+        }
+    }, [getColumnWidth, createMouseMoveHandlerCallback, createResizeEndHandlerMemo, cleanupEventListeners, columns]);
+    const stopResize = useCallback(() => {
+        try {
+            setResizeState((prev) => (Object.assign(Object.assign({}, prev), { isResizing: false, resizingColumn: null, resizeIndicatorX: 0 })));
+            isResizingRef.current = false;
+            cleanupEventListeners();
+        }
+        catch (error) {
+            console.error('Error stopping resize:', error);
+            cleanupEventListeners();
+        }
+    }, [cleanupEventListeners]);
+    const isCurrentlyResizing = useCallback(() => {
+        return isResizingRef.current;
+    }, []);
+    // Wrapper for column click that prevents clicks during resize
+    const handleColumnClickWithResizeCheck = useCallback((columnIndex, event, pinnedType) => {
+        if (isCurrentlyResizing()) {
+            return; // Don't handle column click if we're currently resizing
+        }
+        handleColumnClick(columnIndex, event, pinnedType);
+    }, [handleColumnClick, isCurrentlyResizing]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return cleanupEventListeners;
+    }, [cleanupEventListeners]);
+    return {
+        columnWidths,
+        isResizing,
+        resizingColumn,
+        resizeIndicatorX,
+        cursorPosition,
+        getColumnWidth,
+        startResize,
+        stopResize,
+        isCurrentlyResizing,
+        handleColumnClick: handleColumnClickWithResizeCheck,
+    };
+};

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

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { getColumnId } from '../utils/resize';
+export const useColumnResizeWithPinned = ({ pinnedStartColumnsData, pinnedEndColumnsData, columnWidths }) => {
+    const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
+        const columnId = getColumnId(col);
+        const width = columnWidths[columnId] || parseInt(String(col.width)) || 150;
+        return acc + width;
+    }, 0.2), [pinnedStartColumnsData, columnWidths]);
+    const pinnedEndColumnsWidth = useMemo(() => pinnedEndColumnsData.reduce((acc, col) => {
+        const columnId = getColumnId(col);
+        const width = columnWidths[columnId] || parseInt(String(col.width)) || 150;
+        return acc + width;
+    }, 0.2), [pinnedEndColumnsData, columnWidths]);
+    // Create updated column data with dynamic widths
+    const pinnedStartColumnsDataWithWidths = useMemo(() => pinnedStartColumnsData.map((col) => {
+        const columnId = getColumnId(col);
+        return Object.assign(Object.assign({}, col), { width: columnWidths[columnId] || col.width });
+    }), [pinnedStartColumnsData, columnWidths]);
+    const pinnedEndColumnsDataWithWidths = useMemo(() => pinnedEndColumnsData.map((col) => {
+        const columnId = getColumnId(col);
+        return Object.assign(Object.assign({}, col), { width: columnWidths[columnId] || col.width });
+    }), [pinnedEndColumnsData, columnWidths]);
+    return {
+        pinnedStartColumnsWidth,
+        pinnedEndColumnsWidth,
+        pinnedStartColumnsDataWithWidths,
+        pinnedEndColumnsDataWithWidths,
+    };
+};

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

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './utils';
+export * from './hooks';
+export * from './types';

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

@@ -0,0 +1,55 @@
+import { styled } from '@mui/material/styles';
+import { columnResizeIndicatorIcon } from '../../../../../constants/index.js';
+export const StyledResizeIcon = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'isResizing' && prop !== 'isLast',
+})(({ isLast }) => ({
+    position: 'absolute',
+    top: 0,
+    right: isLast ? -10 : -11,
+    width: 20,
+    height: '100%',
+    backgroundColor: 'transparent',
+    zIndex: 100001,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const IndicatorLine = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'isVisible' && prop !== 'x' && prop !== 'height' && prop !== 'top',
+})(({ isVisible, x, height, top }) => ({
+    position: 'fixed',
+    left: x,
+    top: top,
+    width: 1,
+    height: `calc(${height}px - 14px)`,
+    backgroundColor: '#1F88D0',
+    zIndex: 9999,
+    pointerEvents: 'none',
+    opacity: isVisible ? 1 : 0,
+    transition: 'opacity 0.1s ease',
+    '&::before': {
+        content: '""',
+        position: 'absolute',
+        left: -1,
+        top: 0,
+        width: 1,
+        height: '100%',
+    },
+}));
+export const ResizeIcon = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'isVisible' && prop !== 'x' && prop !== 'y' && prop !== 'offsetX',
+})(({ isVisible, x, y, offsetX = 0 }) => ({
+    position: 'fixed',
+    left: x + offsetX - 8,
+    top: y,
+    width: 20,
+    height: 16,
+    backgroundImage: `url(${columnResizeIndicatorIcon})`,
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    zIndex: 100000,
+    pointerEvents: 'none',
+    display: isVisible ? 'block' : 'none',
+    transform: 'translate(-50%, -50%)',
+}));

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

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

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

@@ -0,0 +1 @@
+export * from './resize';

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

@@ -0,0 +1,127 @@
+import { setColumnWidth } from '../../../../../../utils/index.js';
+import { COLUMN_WIDTH_CONSTRAINTS } from '../constants';
+export const parseColumnWidth = (width) => {
+    if (typeof width === 'string') {
+        const parsed = parseInt(width, 10);
+        return isNaN(parsed) ? COLUMN_WIDTH_CONSTRAINTS.DEFAULT_WIDTH : parsed;
+    }
+    return width || COLUMN_WIDTH_CONSTRAINTS.DEFAULT_WIDTH;
+};
+export const clampWidth = (width) => {
+    return Math.max(COLUMN_WIDTH_CONSTRAINTS.MIN_WIDTH, Math.min(COLUMN_WIDTH_CONSTRAINTS.MAX_WIDTH, width));
+};
+export const getColumnId = (column) => {
+    // Create a unique identifier by combining id and tableViewId
+    // This prevents conflicts when the same tableViewId is used in different columns
+    const baseId = String(column.id);
+    if (column.tableViewId) {
+        // Combine both id and tableViewId with a separator to ensure uniqueness
+        return `${baseId}_${column.tableViewId}`;
+    }
+    return baseId;
+};
+export const applyColumnWidths = (columns, columnWidths) => {
+    return columns.map((col) => {
+        const columnId = getColumnId(col);
+        return Object.assign(Object.assign({}, col), { width: columnWidths[columnId] || col.width });
+    });
+};
+// Event handler utilities
+export const cleanupEventListeners = (mouseMoveRef, mouseUpRef) => {
+    if (mouseMoveRef.current) {
+        document.removeEventListener('mousemove', mouseMoveRef.current);
+        mouseMoveRef.current = undefined;
+    }
+    if (mouseUpRef.current) {
+        document.removeEventListener('mouseup', mouseUpRef.current);
+        mouseUpRef.current = undefined;
+    }
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+};
+// Mouse event handler
+export const createMouseUpHandler = (columnId, currentWidth, startX, windowId, serviceCode, onColumnResize, setResizeState, cleanupFn, clampedXRef) => {
+    return (mouseEvent) => {
+        try {
+            // Use the clamped X position from the ref instead of raw mouse position
+            const deltaX = clampedXRef.current - startX;
+            const newWidth = clampWidth(currentWidth + deltaX);
+            setResizeState((prev) => (Object.assign(Object.assign({}, prev), { columnWidths: Object.assign(Object.assign({}, prev.columnWidths), { [columnId]: newWidth }), isResizing: false, resizingColumn: null, resizeIndicatorX: 0 })));
+            // Save to localStorage if windowId and serviceCode are provided
+            if (windowId && serviceCode) {
+                const success = setColumnWidth(windowId, serviceCode, String(columnId), newWidth);
+                if (!success) {
+                    console.warn(`Failed to persist column width for ${columnId}`);
+                }
+            }
+            onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize(columnId, newWidth);
+            // Prevent event bubbling
+            mouseEvent.stopPropagation();
+            mouseEvent.preventDefault();
+            cleanupFn();
+        }
+        catch (error) {
+            console.error('Error in mouse up handler:', error);
+            cleanupFn();
+        }
+    };
+};
+export const createMouseMoveHandler = (setResizeState, setCursorPosition, initialCursorYRef, tableContainerRef, resizingColumnIndex, resizingColumnPinned, clampedXRef, startXRef, startWidthRef) => {
+    return (mouseEvent) => {
+        try {
+            let clampedX = mouseEvent.clientX;
+            // Clamp the x position to stay within the table boundaries
+            if (tableContainerRef === null || tableContainerRef === void 0 ? void 0 : tableContainerRef.current) {
+                const tableRect = tableContainerRef.current.getBoundingClientRect();
+                const minX = tableRect.left;
+                let maxX = tableRect.right;
+                // Adjust maxX for second pinned start column (index 1)
+                if (resizingColumnPinned === 'start' && resizingColumnIndex === 1) {
+                    maxX = maxX - 38;
+                }
+                clampedX = Math.max(minX, Math.min(maxX, mouseEvent.clientX));
+            }
+            // Store the clamped X position in the ref for use in mouse up handler
+            if (clampedXRef) {
+                clampedXRef.current = clampedX;
+            }
+            // Calculate the indicator position capped at minimum column width
+            let indicatorX = clampedX;
+            if (startXRef && startWidthRef) {
+                // Calculate the minimum position: start position minus how much we can shrink
+                // The left edge of the column is at (startX - startWidth)
+                // The minimum right edge position is at (leftEdge + MIN_WIDTH)
+                const minPositionX = startXRef.current - startWidthRef.current + COLUMN_WIDTH_CONSTRAINTS.MIN_WIDTH;
+                // Cap the indicator at the minimum position when dragging left past minimum
+                // This ensures smooth behavior: indicator only moves when cursor is to the right of minimum position
+                if (clampedX < minPositionX) {
+                    indicatorX = minPositionX;
+                }
+            }
+            setResizeState((prev) => (Object.assign(Object.assign({}, prev), { resizeIndicatorX: indicatorX })));
+            setCursorPosition({
+                x: indicatorX,
+                y: initialCursorYRef.current,
+            });
+        }
+        catch (error) {
+            console.error('Error in mouse move handler:', error);
+        }
+    };
+};
+// Column width utility
+export const getColumnWidthFromState = (columnWidths, columnId) => {
+    return columnWidths[columnId] || COLUMN_WIDTH_CONSTRAINTS.DEFAULT_WIDTH;
+};
+// Creates a mouse up handler that clears the resize flag after completion
+export const createResizeEndHandler = (windowId, serviceCode, onColumnResize, setResizeState, cleanupFn, isResizingRef, clampedXRef) => {
+    return (columnId, currentWidth, startX) => {
+        return (event) => {
+            createMouseUpHandler(columnId, currentWidth, startX, windowId, serviceCode, onColumnResize, setResizeState, cleanupFn, clampedXRef)(event);
+            // Clear resize flag to allow column selection after resize
+            setTimeout(() => {
+                isResizingRef.current = false;
+            }, 0);
+        };
+    };
+};

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

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

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

@@ -0,0 +1,73 @@
+import { useState, useCallback, useMemo } from 'react';
+export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
+    const [pinnedStartColumns, setPinnedStartColumns] = useState(() => {
+        const userPinned = isPinnable ? columns.filter((c) => c.pinned === 'start').map((c) => c.id) : [];
+        const defaultPinned = columns.filter((c) => c.isDefaultPinned && c.pinned !== 'end').map((c) => c.id);
+        return Array.from(new Set([...defaultPinned, ...userPinned]));
+    });
+    const [pinnedEndColumns, setPinnedEndColumns] = useState(() => {
+        const defaultPinned = columns.filter((c) => c.isDefaultPinned && c.pinned === 'end').map((c) => c.id);
+        if (!isPinnable)
+            return defaultPinned;
+        const userPinned = columns.filter((c) => c.pinned === 'end').map((c) => c.id);
+        // Automatically pin the last column to the end if no end-pinned columns exist
+        const visibleColumns = columns.filter((column) => !column.hidden);
+        const lastColumn = visibleColumns[visibleColumns.length - 1];
+        if (userPinned.length === 0 && lastColumn && !lastColumn.pinned && !lastColumn.isDefaultPinned) {
+            return [lastColumn.id];
+        }
+        return userPinned;
+    });
+    const handleColumnPin = useCallback((columnId, position = 'start') => {
+        if (!isPinnable)
+            return;
+        let newPinnedStart = [...pinnedStartColumns];
+        let newPinnedEnd = [...pinnedEndColumns];
+        if (position === 'unpin') {
+            newPinnedStart = newPinnedStart.filter((id) => id !== columnId);
+            newPinnedEnd = newPinnedEnd.filter((id) => id !== columnId);
+        }
+        else if (position === 'start') {
+            newPinnedStart = [...newPinnedStart.filter((id) => id !== columnId), columnId];
+            newPinnedEnd = newPinnedEnd.filter((id) => id !== columnId);
+        }
+        else if (position === 'end') {
+            newPinnedEnd = [...newPinnedEnd.filter((id) => id !== columnId), columnId];
+            newPinnedStart = newPinnedStart.filter((id) => id !== columnId);
+        }
+        setPinnedStartColumns(newPinnedStart);
+        setPinnedEndColumns(newPinnedEnd);
+        const isPinned = newPinnedStart.includes(columnId) || newPinnedEnd.includes(columnId);
+        onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, isPinned);
+    }, [pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable]);
+    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    const { pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData } = useMemo(() => {
+        const start = shownColumns.filter((column) => pinnedStartColumns.includes(column.id));
+        const end = shownColumns.filter((column) => pinnedEndColumns.includes(column.id));
+        const unpinned = shownColumns.filter((column) => !pinnedStartColumns.includes(column.id) && !pinnedEndColumns.includes(column.id));
+        // Sort arrays by order and preserve original column properties including width
+        const sortedStart = start.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); });
+        const sortedEnd = end.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); });
+        const sortedUnpinned = unpinned.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); });
+        return {
+            pinnedStartColumnsData: sortedStart,
+            pinnedEndColumnsData: sortedEnd,
+            unpinnedColumnsData: sortedUnpinned,
+        };
+    }, [shownColumns, pinnedStartColumns, pinnedEndColumns]);
+    const orderedColumns = useMemo(() => [...pinnedStartColumnsData, ...unpinnedColumnsData, ...pinnedEndColumnsData], [pinnedStartColumnsData, unpinnedColumnsData, pinnedEndColumnsData]);
+    const lastColumnId = useMemo(() => {
+        const lastCol = orderedColumns[orderedColumns.length - 1];
+        return lastCol ? lastCol.id : null;
+    }, [orderedColumns]);
+    return {
+        pinnedStartColumns,
+        pinnedEndColumns,
+        handleColumnPin,
+        pinnedStartColumnsData,
+        pinnedEndColumnsData,
+        unpinnedColumnsData,
+        orderedColumns,
+        lastColumnId,
+    };
+};

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/useSynchronizedScroll.js

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

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

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

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

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

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

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