@tap-payments/os-micro-frontend-shared 0.1.34 → 0.1.36-9.fix.1

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

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

@@ -2,13 +2,17 @@
 export interface TableState {
     selectedCell: string | null;
     selectedColumn: string | null;
+    selectedRow: number | null;
     showBackDrop: boolean;
 }
 export declare const useTableState: () => {
     selectedCell: string | null;
     selectedColumn: string | null;
+    selectedRow: number | null;
     showBackDrop: boolean;
+    selectedChip: string | null;
     setShowBackdrop: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleChipClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
     handleCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
     handleColumnClick: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
     resetSelection: () => void;

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

@@ -2,28 +2,62 @@ 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,

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { IColumnProps } from '../../../../types/index.js';
+import type { IColumnProps, TableChipProps } from '../../../../types/index.js';
 import type { TableRowProps } from '@mui/material/TableRow';
-interface UseVirtualTableContainerProps<T = unknown> {
+interface UseVirtualTableContainerProps<T = unknown> extends TableChipProps {
     rowHeight: number;
     areAllRowsLoaded?: boolean;
     rows: T[];
@@ -16,9 +16,12 @@ interface UseVirtualTableContainerProps<T = unknown> {
     isError: boolean;
     selectedCell: string | null;
     selectedColumn: string | null;
+    selectedRow: number | null;
+    selectedChip: string | null;
     handleCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    handleChipClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
 }
-export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }: UseVirtualTableContainerProps<T>) => {
+export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, selectedRow, selectedChip, handleCellClick, handleChipClick, }: UseVirtualTableContainerProps<T>) => {
     getItemSize: (index: number, height: number) => number;
     getItemDataForContainer: (columnsData: IColumnProps[], isPinnedColumn: boolean, height: number) => {
         columns: any;
@@ -36,7 +39,10 @@ export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAll
         isPinned: any;
         selectedCell: any;
         selectedColumn: any;
+        selectedRow: any;
+        selectedChip: any;
         onCellClick: any;
+        onChipClick: any;
         containerHeight: any;
         rowHeight: any;
     };

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

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import memoize from 'memoize-one';
-const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, selectedRow, selectedChip, onCellClick, onChipClick, containerHeight, rowHeight) => ({
     columns,
     isLoading,
     rows,
@@ -16,18 +16,22 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     isPinned,
     selectedCell,
     selectedColumn,
+    selectedRow,
+    selectedChip,
     onCellClick,
+    onChipClick,
     containerHeight,
     rowHeight,
 }));
-export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }) => {
+export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, selectedRow, selectedChip, handleCellClick, handleChipClick, }) => {
     const getItemSize = useCallback((index, height) => {
         const isLastRow = areAllRowsLoaded && index === rows.length;
         if (isLastRow) {
+            // Calculate remaining height: total height - (number of data rows * row height)
             const usedHeight = rows.length * rowHeight;
             const remainingHeight = height - usedHeight;
-            const minimumLastRowHeight = rowHeight * 2;
-            return Math.max(remainingHeight, minimumLastRowHeight);
+            const minimumLastRowHeight = rowHeight * 2; // Minimum height is 2x rowHeight
+            return Math.max(remainingHeight, minimumLastRowHeight); // Ensure minimum 2x row height
         }
         return rowHeight;
     }, [areAllRowsLoaded, rows.length, rowHeight]);
@@ -44,7 +48,7 @@ export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, is
             areAllRowsLoaded,
         ];
     }, [isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount, isError, areAllRowsLoaded]);
-    const commonItemDataSuffix = useMemo(() => [selectedCell, selectedColumn, handleCellClick], [selectedCell, selectedColumn, handleCellClick]);
+    const commonItemDataSuffix = useMemo(() => [selectedCell, selectedColumn, selectedRow, selectedChip, handleCellClick, handleChipClick], [selectedCell, selectedColumn, selectedRow, selectedChip, handleCellClick, handleChipClick]);
     const getItemDataForContainer = useCallback((columnsData, isPinnedColumn, height) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix, height, rowHeight), [commonItemDataParams, commonItemDataSuffix, rowHeight]);
     return {
         getItemSize,