@tap-payments/os-micro-frontend-shared 0.1.211 → 0.1.213

package/build/components/TableCells/CustomCells/SalesChannelCell/SalesChannelCellSheet.js

@@ -47,8 +47,8 @@ function SalesChannelCellSheet({ channels, selectionProps = {} }) {
                         },
                     },
                 } }, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '4px', padding: '4px' } }, { children: filteredChannels.map((channel, index) => {
-                        var _a, _b;
-                        return (_jsxs(StatusChipWithCopy, Object.assign({ copyText: `${(_a = channel.name) === null || _a === void 0 ? void 0 : _a.en}: ${channel.address}`, chipIndex: index + 1, selectionProps: selectionProps }, { children: [(_b = channel.name) === null || _b === void 0 ? void 0 : _b.en, ": ", channel.address] }), channel.id));
+                        var _a;
+                        return (_jsxs(StatusChipWithCopy, Object.assign({ copyText: channel.address, chipIndex: index + 1, selectionProps: selectionProps }, { children: [(_a = channel.name) === null || _a === void 0 ? void 0 : _a.en, ": ", channel.address] }), channel.id));
                     }) })) }))] }));
 }
 export default SalesChannelCellSheet;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ISheetViewVirtualTable } from './types';
-declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, windowId, serviceCode, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
 export default _default;

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

@@ -1,14 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo, useRef } from 'react';
 import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import { SheetViewTableContainer } from '../components/style';
 import { SheetViewVirtualTableWrapper } from './style';
-import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } from './hooks';
+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, }) {
+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, }) {
     // 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,
@@ -21,8 +26,30 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
     const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
     // Scroll synchronization
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
-    // Column width calculations
-    const { pinnedStartColumnsWidth, pinnedEndColumnsWidth } = usePinnedColumnsWidths(pinnedStartColumnsData, pinnedEndColumnsData);
+    // Column resize functionality
+    const { columnWidths, isResizing, resizingColumn, resizeIndicatorX, cursorPosition, startResize, handleColumnClick: handleColumnClickWithResize, } = useColumnResize({
+        columns,
+        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,
@@ -66,6 +93,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         pinnedStartVirtualListRef,
         pinnedEndVirtualListRef,
         scrollableVirtualListRef,
+        overscanCount,
     ]);
     const baseCommonProps = {
         showHeader,
@@ -77,7 +105,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         isPinnable,
         lastColumnId,
         selectedColumn,
-        onColumnClick: handleColumnClick,
+        onColumnClick: handleColumnClickWithResize,
         tableTitle,
         areAllRowsLoaded,
         isFetchingNextPage,
@@ -87,13 +115,16 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         tableMode,
         showNoDataView,
         tableBodyStyles,
+        onStartResize: startResize,
+        isResizing,
+        resizingColumn,
     };
     const commonPropsWithTableStates = Object.assign(Object.assign({}, baseCommonProps), { hasTimeoutError,
         tableLoading });
-    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { children: showNoDataView ? (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, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(LoadingMainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) : (
+                _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: orderedColumns, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }, baseCommonProps)))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(MainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+                _jsx(NoDataView, Object.assign({ tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumnsWithWidths, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }, 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/MainTable.d.ts

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

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

@@ -5,9 +5,9 @@ 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, }) {
+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 }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    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: {

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

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

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

@@ -5,13 +5,13 @@ 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, }) {
+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 })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    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',

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

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

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

@@ -2,11 +2,11 @@ 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, }) {
+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 }, `${column.id}-${colIndex}`));
+                return (_jsx(SheetViewTableHeaderCell, { column: column, colIndex: colIndex, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === columnKey, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick, onStartResize: onStartResize, isResizing: isResizing, resizingColumn: resizingColumn }, `${column.id}-${colIndex}`));
             }) })) })));
 }
 export default memo(SheetViewTableHeader);

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

@@ -8,7 +8,10 @@ interface SheetViewTableHeaderCellProps extends Pick<SheetViewTableHeaderProps,
     isLast: boolean;
     isSelected: boolean;
     isDefaultPinned: boolean;
+    onStartResize?: (e: React.MouseEvent, columnId: string) => void;
+    isResizing?: boolean;
+    resizingColumn?: string | null;
 }
-declare function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }: SheetViewTableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+declare 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, resizingColumn, }: SheetViewTableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeaderCell>;
 export default _default;

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

@@ -6,7 +6,11 @@ import ColumnFilter from '../../components/ColumnFilter';
 import { StyledCell, TableHeaderInner } from '../../components/style';
 import { PinIconContainer, HeaderText } from '../style';
 import ColumnSort from '../../components/ColumnSort';
-function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }) {
+import { ColumnResize } from '../features/resize';
+import { getColumnId } from '../features/resize/utils/resize';
+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 checkIsPanned = useCallback((columnId) => pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId), [pinnedColumns]);
@@ -38,7 +42,7 @@ function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, so
         event.stopPropagation();
         onOpenFilterDropdown();
     };
-    return (_jsx(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, ref: cellRef, onClick: 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: 'unset', 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': {
+    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',
@@ -46,11 +50,11 @@ function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, so
                 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 })), 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" }) })))] })) })));
+            } }, 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 })), 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/features/resize/components/ColumnResize.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ColumnResizeProps } from '../types';
+declare function ColumnResize({ columnId, onStartResize, isResizing, isLast }: ColumnResizeProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ColumnResize>;
+export default _default;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ResizeOverlayProps } from '../types';
+declare function ResizeOverlay({ isVisible, indicatorX, indicatorHeight, indicatorTop, iconX, iconY }: ResizeOverlayProps): import("react").ReactPortal | null;
+declare const _default: import("react").MemoExoticComponent<typeof ResizeOverlay>;
+export default _default;

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

@@ -0,0 +1,2 @@
+export { default as ColumnResize } from './ColumnResize';
+export { default as ResizeOverlay } from './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.d.ts

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

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

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

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

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

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,148 @@
+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 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);
+    }, [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;
+            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("react").CSSProperties | 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("react").CSSProperties | 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 {};