@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.fix.1

package/build/components/VirtualTables/SheetViewVirtualTable/features/resize/hooks/useColumnResize.d.ts

@@ -0,0 +1,16 @@
+import type { UseColumnResizeProps } from '../types';
+export declare const useColumnResize: ({ columns, onColumnResize, handleColumnClick, windowId, serviceCode, tableContainerRef }: UseColumnResizeProps) => {
+    columnWidths: Record<string, number>;
+    isResizing: boolean;
+    resizingColumn: string | null;
+    resizeIndicatorX: number;
+    cursorPosition: {
+        x: number;
+        y: number;
+    };
+    getColumnWidth: (columnId: string) => number;
+    startResize: (e: React.MouseEvent, columnId: string) => void;
+    stopResize: () => void;
+    isCurrentlyResizing: () => boolean;
+    handleColumnClick: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+};

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.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import type { IColumnProps } from '../../../../../../types/index.js';
+interface UseColumnResizeWithPinnedProps {
+    pinnedStartColumnsData: IColumnProps[];
+    pinnedEndColumnsData: IColumnProps[];
+    columnWidths: Record<string, number>;
+}
+export declare const useColumnResizeWithPinned: ({ pinnedStartColumnsData, pinnedEndColumnsData, columnWidths }: UseColumnResizeWithPinnedProps) => {
+    pinnedStartColumnsWidth: number;
+    pinnedEndColumnsWidth: number;
+    pinnedStartColumnsDataWithWidths: {
+        width: string | number | undefined;
+        header?: string | (() => import("react").ReactNode) | undefined;
+        render?: ((props: import("../../../../../../types/index.js").IRenderAttr<any, IColumnProps<any>>) => import("react").ReactNode) | undefined;
+        id: string | number | symbol;
+        tableViewId?: string | undefined;
+        format?: ((props: import("../../../../../../types/index.js").IFormatAttr<any>) => string) | undefined;
+        selector?: ((props: import("../../../../../../types/index.js").ISelectorAttr<any>) => string | number | Record<string, any>) | undefined;
+        align?: import("csstype").Property.TextAlign | undefined;
+        sortable?: boolean | undefined;
+        hidden?: boolean | undefined;
+        order?: number | undefined;
+        pinned?: "start" | "end" | undefined;
+        pinnable?: boolean | undefined;
+        cellStyle?: import("@mui/system").SxProps | undefined;
+        headerStyle?: import("react").CSSProperties | undefined;
+        filter?: ({
+            onConfirm?: ((filterValues: import("../../../../../../types/index.js").ColumnFilterValues) => void) | undefined;
+            onClear: (apiKeys: string[]) => void;
+            onClearFilterFields?: (() => void) | undefined;
+            data?: import("../../../../../../types/index.js").ColumnFilterValues | undefined;
+            isOnlyOneFilter?: boolean | undefined;
+            wrapperSx?: import("@mui/system").SxProps | undefined;
+        } & (import("../../../../../../types/index.js").IColumnFilterList | import("../../../../../../types/index.js").IColumnFilterInputs | import("../../../../../../types/index.js").IColumnFilterCustom)) | undefined;
+        isDefaultPinned?: boolean | undefined;
+    }[];
+    pinnedEndColumnsDataWithWidths: {
+        width: string | number | undefined;
+        header?: string | (() => import("react").ReactNode) | undefined;
+        render?: ((props: import("../../../../../../types/index.js").IRenderAttr<any, IColumnProps<any>>) => import("react").ReactNode) | undefined;
+        id: string | number | symbol;
+        tableViewId?: string | undefined;
+        format?: ((props: import("../../../../../../types/index.js").IFormatAttr<any>) => string) | undefined;
+        selector?: ((props: import("../../../../../../types/index.js").ISelectorAttr<any>) => string | number | Record<string, any>) | undefined;
+        align?: import("csstype").Property.TextAlign | undefined;
+        sortable?: boolean | undefined;
+        hidden?: boolean | undefined;
+        order?: number | undefined;
+        pinned?: "start" | "end" | undefined;
+        pinnable?: boolean | undefined;
+        cellStyle?: import("@mui/system").SxProps | undefined;
+        headerStyle?: import("react").CSSProperties | undefined;
+        filter?: ({
+            onConfirm?: ((filterValues: import("../../../../../../types/index.js").ColumnFilterValues) => void) | undefined;
+            onClear: (apiKeys: string[]) => void;
+            onClearFilterFields?: (() => void) | undefined;
+            data?: import("../../../../../../types/index.js").ColumnFilterValues | undefined;
+            isOnlyOneFilter?: boolean | undefined;
+            wrapperSx?: import("@mui/system").SxProps | undefined;
+        } & (import("../../../../../../types/index.js").IColumnFilterList | import("../../../../../../types/index.js").IColumnFilterInputs | import("../../../../../../types/index.js").IColumnFilterCustom)) | undefined;
+        isDefaultPinned?: boolean | undefined;
+    }[];
+};
+export {};

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.d.ts

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

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.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const StyledResizeIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    isResizing: boolean;
+    isLast: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IndicatorLine: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    isVisible: boolean;
+    x: number;
+    height: number;
+    top: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ResizeIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    isVisible: boolean;
+    x: number;
+    y: number;
+    offsetX?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import type { IColumnProps } from '../../../../../../types/index.js';
+export interface ColumnResizeState {
+    columnWidths: Record<string, number>;
+    isResizing: boolean;
+    resizingColumn: string | null;
+    startX: number;
+    startWidth: number;
+    resizeIndicatorX: number;
+    resizingColumnIndex?: number;
+    resizingColumnPinned?: 'start' | 'end';
+}
+export interface UseColumnResizeProps {
+    columns: IColumnProps[];
+    onColumnResize?: (columnId: string, newWidth: number) => void;
+    handleColumnClick: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    windowId?: string;
+    serviceCode?: string;
+    tableContainerRef?: React.RefObject<HTMLDivElement>;
+}
+export interface ColumnResizeProps {
+    columnId: string;
+    onStartResize: (e: React.MouseEvent, columnId: string) => void;
+    isResizing: boolean;
+    isLast?: boolean;
+}
+export interface ResizeIndicatorProps {
+    isVisible: boolean;
+    x: number;
+    height: number;
+    top?: number;
+}
+export interface FloatingResizeIconProps {
+    isVisible: boolean;
+    x: number;
+    y: number;
+}
+export interface ResizeOverlayProps {
+    isVisible: boolean;
+    indicatorX: number;
+    indicatorHeight: number;
+    indicatorTop: number;
+    iconX: number;
+    iconY: number;
+}

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

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

package/build/components/VirtualTables/SheetViewVirtualTable/features/resize/utils/index.d.ts

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

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.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { IColumnProps } from '../../../../../../types/index.js';
+import { ColumnResizeState } from '../types';
+export declare const parseColumnWidth: (width: React.CSSProperties['width']) => number;
+export declare const clampWidth: (width: number) => number;
+export declare const getColumnId: (column: {
+    id: string | number | symbol;
+    tableViewId?: string;
+}) => string;
+export declare const applyColumnWidths: (columns: IColumnProps[], columnWidths: Record<string, number>) => IColumnProps[];
+export declare const cleanupEventListeners: (mouseMoveRef: import("react").MutableRefObject<((e: MouseEvent) => void) | undefined>, mouseUpRef: import("react").MutableRefObject<((e: MouseEvent) => void) | undefined>) => void;
+export declare const createMouseUpHandler: (columnId: string, currentWidth: number, startX: number, windowId: string | undefined, serviceCode: string | undefined, onColumnResize: ((columnId: string, width: number) => void) | undefined, setResizeState: React.Dispatch<React.SetStateAction<ColumnResizeState>>, cleanupFn: () => void, clampedXRef: React.MutableRefObject<number>) => (mouseEvent: MouseEvent) => void;
+export declare const createMouseMoveHandler: (setResizeState: React.Dispatch<React.SetStateAction<ColumnResizeState>>, setCursorPosition: React.Dispatch<React.SetStateAction<{
+    x: number;
+    y: number;
+}>>, initialCursorYRef: React.MutableRefObject<number>, tableContainerRef?: React.RefObject<HTMLDivElement>, resizingColumnIndex?: number, resizingColumnPinned?: 'start' | 'end', clampedXRef?: React.MutableRefObject<number>, startXRef?: React.MutableRefObject<number>, startWidthRef?: React.MutableRefObject<number>) => (mouseEvent: MouseEvent) => void;
+export declare const getColumnWidthFromState: (columnWidths: Record<string, number>, columnId: string) => number;
+export declare const createResizeEndHandler: (windowId: string | undefined, serviceCode: string | undefined, onColumnResize: ((columnId: string, width: number) => void) | undefined, setResizeState: React.Dispatch<React.SetStateAction<ColumnResizeState>>, cleanupFn: () => void, isResizingRef: React.MutableRefObject<boolean>, clampedXRef: React.MutableRefObject<number>) => (columnId: string, currentWidth: number, startX: number) => (event: MouseEvent) => void;

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.d.ts

@@ -4,3 +4,4 @@ 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/index.js

@@ -4,3 +4,4 @@ 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

@@ -9,6 +9,7 @@ export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
         if (!isPinnable)
             return [];
         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) {
@@ -43,6 +44,7 @@ export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
         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); });

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

@@ -1,6 +1,7 @@
 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;
 };

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

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+interface TableDimensions {
+    top: number;
+    height: number;
+}
+interface UseTableDimensionsProps {
+    tableContainerRef: RefObject<HTMLDivElement>;
+    showHeader: boolean;
+    isResizing: boolean;
+}
+export declare const useTableDimensions: ({ tableContainerRef, showHeader, isResizing }: UseTableDimensionsProps) => TableDimensions;
+export {};

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;
+};