@tap-payments/os-micro-frontend-shared 0.1.135 → 0.1.136-test.2

package/build/components/TableCells/CustomCells/SegmentsCell/SegmentsCell.js

@@ -38,7 +38,9 @@ function SegmentsCell(_a) {
                     }, borderColor: "transparent" })) })) }), `${segment.name}-${index}`));
     }), [segments, isTextShown, theme]);
     const referenceSourcesCount = (ReferenceSources === null || ReferenceSources === void 0 ? void 0 : ReferenceSources.length) || 0;
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", 
+                // animate when state changes
+                animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
                     zIndex: 29,
                 } }, { children: ReferenceSources }))) : null }) })));
 }

package/build/components/TableCells/CustomCells/SourceMergedCell/SourceMergedCell.js

@@ -20,19 +20,24 @@ function SourceMergedCell(_a) {
     const iconsList = useMemo(() => icons.filter((icon) => Boolean(icon.icon)), [icons]);
     const [isHovering, setIsHovering] = useState(false);
     const centerIconIndex = Math.max(centerIconKey ? iconsList.findIndex((icon) => icon.key === centerIconKey) : 0, 0);
+    // Create refs for each icon to measure their actual widths
     const iconRefs = useRef([]);
     const [iconMeasurements, setIconMeasurements] = useState(new Map());
+    // For sheet mode, always show all icons inline
     const isSheetMode = tableMode === 'sheet';
+    // Measure icons after render and on table mode change
     useEffect(() => {
         if (isSheetMode)
-            return;
+            return; // Skip measurements for sheet mode as we don't need hover animations
         setTimeout(() => {
             const tableMode = isTextShown ? 'text' : 'default';
             const newMeasurements = new Map();
             iconRefs.current.forEach((ref, index) => {
                 if (ref) {
                     const width = ref.getBoundingClientRect().width;
+                    // Get existing measurements or create new
                     const existingMeasurement = iconMeasurements.get(index) || { default: 0, text: 0 };
+                    // Update only the current table mode's measurement
                     newMeasurements.set(index, Object.assign(Object.assign({}, existingMeasurement), { [tableMode]: width }));
                 }
             });
@@ -59,6 +64,7 @@ function SourceMergedCell(_a) {
                         if (!icon)
                             return;
                         const tableMode = isTextShown ? 'text' : 'default';
+                        // To keep x position of each icon while hovering consistent
                         const xHoverPosition = getIconXTranslation({
                             iconsList: iconsList.map((iconObj, i) => {
                                 const measurements = iconMeasurements.get(i);

package/build/components/TableCells/CustomCells/StatusCell/StatusCell.js

@@ -28,6 +28,7 @@ function StatusCell(_a) {
         } }, { children: _jsx(StatusContainer, Object.assign({ initial: "initial", whileHover: "hover", animate: "start" }, { children: statusesList.map((status, index) => {
                 if (!status)
                     return;
+                // To keep x position of each icon while hovering consistent
                 const xHoverPosition = (index - centerIconIndex) * xGapValue;
                 const isIconAfterCenterIcon = index > centerIconIndex;
                 const isIconBeforeCenterIcon = index < centerIconIndex;

package/build/components/TableView/CustomViews.js

@@ -6,6 +6,7 @@ import { Reorder } from 'framer-motion';
 import Box from '@mui/material/Box';
 import Menu from '@mui/material/Menu';
 import { useTheme } from '@mui/material/styles';
+// import MenuItem from '@components/NestedDropdown/MenuItem'
 import { downArrowIcon } from '../../constants/index.js';
 import { ButtonStyled, ListStyled, DropdownStyled } from './style';
 import { NestedMenuItem as MenuItem } from '../NestedDropdown';
@@ -52,6 +53,7 @@ function CustomViews({ open, onSelect, setTableViews: setColumns, tableViews, an
                                         setColumns === null || setColumns === void 0 ? void 0 : setColumns(newMenuItems || []);
                                     }, onSelect: (selectedChild, parentName) => {
                                         handleUnSelectColumn(selectedChild[0]);
+                                        // modifySelectedColumns(selectedChild)
                                         const newMenuItems = columns === null || columns === void 0 ? void 0 : columns.map((menuItem) => {
                                             var _a;
                                             if (menuItem.name === parentName) {

package/build/components/TableView/TableView.js

@@ -29,6 +29,7 @@ function TableView({ onViewChange, setIsViewVisible, setTableViews, tableViews,
     const onClose = () => {
         setAnchorViewEl(null);
         setIsViewVisible(false);
+        // to be removed
         setSelectedViewInfo({ label: 'Default', id: 'default' });
     };
     const handleSelectedViewInfo = (selected) => {

package/build/components/Timepicker/Timepicker.js

@@ -25,6 +25,7 @@ export function TimePicker({ onChange, defaultTime, enableRealTimeChange }) {
     };
     const onClose = () => {
         setAnchorEl(null);
+        // Return the 12-hour format with period to match the Time type
         onChange === null || onChange === void 0 ? void 0 : onChange({ hour: hours, minute: minutes, period: period });
     };
     const onClickPeriod = (selectedPeriod) => {

package/build/components/Timepicker/utils.js

@@ -1,10 +1,12 @@
+// Convert 24-hour format to 12-hour format properly
 export const convertTo12Hour = (hour24) => {
     if (hour24 === 0)
-        return 12;
+        return 12; // Midnight (0) becomes 12 AM
     if (hour24 <= 12)
-        return hour24;
-    return hour24 - 12;
+        return hour24; // 1-12 stays the same
+    return hour24 - 12; // 13-23 becomes 1-11
 };
+// Get the period (AM/PM) from 24-hour format
 export const getPeriodFrom24Hour = (hour24) => {
     return hour24 >= 12 ? 'PM' : 'AM';
 };
@@ -13,12 +15,14 @@ export const getDefaultHour = () => {
     const currentHour = new Date().getHours();
     return convertTo12Hour(currentHour);
 };
+// Convert 12-hour format back to 24-hour format correctly
 export const convertTo24Hour = (hour12, period) => {
     if (period === 'AM' && hour12 === 12) {
-        return 0;
+        return 0; // 12 AM = 0 hours
     }
     else if (period === 'PM' && hour12 !== 12) {
-        return hour12 + 12;
+        return hour12 + 12; // 1-11 PM = 13-23 hours
     }
+    // 12 PM stays as 12 hours, 1-11 AM stays the same
     return hour12;
 };

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

@@ -4,10 +4,14 @@ 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, usePinnedColumnsWidths, usePerformanceOptimizations, } from './hooks';
 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, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, }) {
+    // Performance optimizations
+    const { stableColumns } = usePerformanceOptimizations(columns);
+    // Custom hooks for state management
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
+    // Table data processing
     const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
         rows,
         isLoading,
@@ -15,9 +19,13 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         isFetchingNextPage,
         areAllRowsLoaded,
     });
-    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
+    // Column management
+    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(stableColumns, isPinnable, onColumnPin);
+    // Scroll synchronization
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
+    // Column width calculations
     const { pinnedStartColumnsWidth, pinnedEndColumnsWidth } = usePinnedColumnsWidths(pinnedStartColumnsData, pinnedEndColumnsData);
+    // Virtual table container logic
     const { getItemSize, getItemDataForContainer } = useVirtualTableContainer({
         rowHeight,
         areAllRowsLoaded,
@@ -57,6 +65,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         clearBackdropVisibilityTimeout,
         handleScroll,
         setShowBackdrop,
+        overscanCount,
         pinnedStartVirtualListRef,
         pinnedEndVirtualListRef,
         scrollableVirtualListRef,
@@ -84,6 +93,10 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
     };
     const commonPropsWithTableStates = Object.assign(Object.assign({}, baseCommonProps), { hasTimeoutError,
         tableLoading });
-    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { children: showNoDataView ? (tableLoading ? (_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)))] })) : (_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))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { 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)))] })) : (
+                // 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))] }));
 }
 export default memo(SheetViewVirtualTable);

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

@@ -28,11 +28,13 @@ function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, so
         setColumnFilterEl(cellRef.current);
     };
     const handleCellClick = (event) => {
+        // Only fire column click when clicking on the cell itself, not on child elements
         if (event.target === event.currentTarget) {
             onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
         }
     };
     const handleHeaderInnerClick = (event) => {
+        // Prevent event bubbling to parent cell
         event.stopPropagation();
         onOpenFilterDropdown();
     };

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

@@ -16,6 +16,7 @@ const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
 }));
 function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount = 13, isPinned = false, }) {
     const [maxAllowedRows, setMaxAllowedRows] = useState(() => {
+        // Use provided rowsCount or calculate initial value
         return rowsCount || Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 15);
     });
     useEffect(() => {
@@ -23,6 +24,7 @@ function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoa
             setMaxAllowedRows(rowsCount);
             return;
         }
+        // Calculate rows that fit in the available container height
         const calculateRowsForContainer = () => {
             var _a;
             const wrapperElement = document.querySelector('[data-testid="SheetViewTableLoading"]');
@@ -30,13 +32,14 @@ function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoa
                 return Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 25);
             }
             const containerHeight = ((_a = wrapperElement.parentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
-            const rowHeight = SHEET_VIEW_TABLE_ROW_HEIGHT;
-            const headerHeight = 40;
+            const rowHeight = SHEET_VIEW_TABLE_ROW_HEIGHT; // Standard row height for SheetView
+            const headerHeight = 40; // Approximate header height
             const availableHeight = containerHeight - headerHeight;
             if (availableHeight <= 0) {
                 return Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 25);
             }
             const calculatedRows = Math.floor(availableHeight / rowHeight);
+            // Ensure we have at least 3 rows for loading state, but cap at a reasonable maximum
             return Math.max(3, Math.min(calculatedRows + 2, 25));
         };
         const rows = calculateRowsForContainer();

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

@@ -20,10 +20,14 @@ function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded,
             return;
         yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
     });
-    return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref }, { children: ({ height, width }) => {
+    return (
+    // @ts-ignore
+    _jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref }, { children: ({ height, width }) => {
                 const itemSize = (index) => getItemSize(index, height);
                 const itemData = getItemData(columnsData, isPinned, height);
-                return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: overscanCount, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
+                return (
+                // @ts-ignore
+                _jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: overscanCount, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
                         overflowX: isPinned ? 'hidden' : 'auto',
                         paddingBottom: isPinned ? '25px' : '13px',
                         backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',

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 { usePerformanceOptimizations } from './usePerformanceOptimizations';

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 { usePerformanceOptimizations } from './usePerformanceOptimizations';

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

@@ -0,0 +1,11 @@
+import type { IColumnProps } from '../../../../types/index.js';
+export declare const usePerformanceOptimizations: (columns: readonly IColumnProps[]) => {
+    stableColumns: IColumnProps<any>[];
+    columnMetrics: {
+        visibleColumns: IColumnProps<any>[];
+        totalWidth: number;
+        columnCount: number;
+        firstColumnId: string | number | symbol;
+        lastColumnId: string | number | symbol;
+    };
+};

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

@@ -0,0 +1,107 @@
+import { useMemo, useRef } from 'react';
+// Deep comparison helper for filter data
+const areFilterDataEqual = (data1, data2) => {
+    if (data1 === data2)
+        return true;
+    if (!data1 || !data2)
+        return false;
+    const keys1 = Object.keys(data1);
+    const keys2 = Object.keys(data2);
+    if (keys1.length !== keys2.length)
+        return false;
+    return keys1.every((key) => {
+        const val1 = data1[key];
+        const val2 = data2[key];
+        if (Array.isArray(val1) && Array.isArray(val2)) {
+            return val1.length === val2.length && val1.every((v, i) => v === val2[i]);
+        }
+        if (typeof val1 === 'object' && typeof val2 === 'object' && val1 && val2) {
+            return JSON.stringify(val1) === JSON.stringify(val2);
+        }
+        return val1 === val2;
+    });
+};
+export const usePerformanceOptimizations = (columns) => {
+    // Create stable column references to prevent unnecessary re-renders
+    const stableColumnsRef = useRef([]);
+    const isFirstRenderRef = useRef(true);
+    const filterChangeTrackingRef = useRef(new Map());
+    const stableColumns = useMemo(() => {
+        // On first render, just initialize and return columns
+        if (isFirstRenderRef.current) {
+            isFirstRenderRef.current = false;
+            stableColumnsRef.current = [...columns];
+            // Initialize filter tracking
+            columns.forEach((col) => {
+                var _a;
+                filterChangeTrackingRef.current.set(col.id, (_a = col.filter) === null || _a === void 0 ? void 0 : _a.data);
+            });
+            return stableColumnsRef.current;
+        }
+        // After first render, only update if structural changes or filter changes occurred
+        const structurallyChanged = columns.length !== stableColumnsRef.current.length ||
+            columns.some((col, index) => {
+                const prevCol = stableColumnsRef.current[index];
+                console.log({ colFilter: col.filter, prevColFilter: prevCol === null || prevCol === void 0 ? void 0 : prevCol.filter });
+                return (!prevCol ||
+                    col.id !== prevCol.id ||
+                    col.width !== prevCol.width ||
+                    col.pinned !== prevCol.pinned ||
+                    col.hidden !== prevCol.hidden ||
+                    col.order !== prevCol.order);
+            });
+        // Check for filter-only changes
+        const columnsWithFilterChanges = new Set();
+        columns.forEach((col) => {
+            var _a;
+            const colId = col.id;
+            const prevFilterData = filterChangeTrackingRef.current.get(colId);
+            const currentFilterData = (_a = col.filter) === null || _a === void 0 ? void 0 : _a.data;
+            if (!areFilterDataEqual(prevFilterData, currentFilterData)) {
+                columnsWithFilterChanges.add(colId);
+                filterChangeTrackingRef.current.set(colId, currentFilterData);
+            }
+        });
+        // Only update if there are structural changes or filter changes
+        if (structurallyChanged || columnsWithFilterChanges.size > 0) {
+            // For filter-only changes, update only the affected columns
+            if (!structurallyChanged && columnsWithFilterChanges.size > 0) {
+                // Create a new array but preserve references for unchanged columns
+                const updatedColumns = stableColumnsRef.current.map((stableCol, index) => {
+                    const newCol = columns[index];
+                    const colId = newCol === null || newCol === void 0 ? void 0 : newCol.id;
+                    // Only replace if this column's filter changed
+                    if (columnsWithFilterChanges.has(colId)) {
+                        return newCol;
+                    }
+                    // Keep the stable reference for unchanged columns
+                    return stableCol;
+                });
+                stableColumnsRef.current = updatedColumns;
+            }
+            else {
+                // Full update for structural changes
+                stableColumnsRef.current = [...columns];
+            }
+        }
+        return stableColumnsRef.current;
+    }, [columns]);
+    // Memoize frequently used column calculations
+    const columnMetrics = useMemo(() => {
+        var _a, _b;
+        const visibleColumns = stableColumns.filter((col) => !col.hidden);
+        const totalWidth = visibleColumns.reduce((sum, col) => sum + +((col === null || col === void 0 ? void 0 : col.width) || 100), 0);
+        const columnCount = visibleColumns.length;
+        return {
+            visibleColumns,
+            totalWidth,
+            columnCount,
+            firstColumnId: (_a = visibleColumns[0]) === null || _a === void 0 ? void 0 : _a.id,
+            lastColumnId: (_b = visibleColumns[columnCount - 1]) === null || _b === void 0 ? void 0 : _b.id,
+        };
+    }, [stableColumns]);
+    return {
+        stableColumns,
+        columnMetrics,
+    };
+};

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

@@ -17,10 +17,12 @@ export const useTableState = () => {
         }
         setSelectedChip(chipKey);
         setSelectedCell(cellKey);
+        setSelectedColumn(null);
         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);
@@ -28,6 +30,7 @@ export const useTableState = () => {
             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);

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

@@ -23,28 +23,6 @@ interface UseVirtualTableContainerProps<T = unknown> extends TableChipProps {
 }
 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;
-        isLoading: any;
-        rows: any;
-        rowProps: any;
-        scrollToIndex: any;
-        totalCount: any;
-        lastItemIndex: any;
-        isError: any;
-        areAllRowsLoaded: any;
-        limit: any;
-        newLoadedRowsEndIndex: any;
-        isSheetView: boolean;
-        isPinned: any;
-        selectedCell: any;
-        selectedColumn: any;
-        selectedRow: any;
-        selectedChip: any;
-        onCellClick: any;
-        onChipClick: any;
-        containerHeight: any;
-        rowHeight: any;
-    };
+    getItemDataForContainer: (columnsData: IColumnProps[], isPinnedColumn: boolean, height: number) => any;
 };
 export {};

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

@@ -1,11 +1,9 @@
 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, selectedRow, selectedChip, onCellClick, onChipClick, containerHeight, rowHeight) => ({
+const createCoreItemData = memoize((columns, rows, rowProps, totalCount, lastItemIndex, isError, areAllRowsLoaded, isPinned, containerHeight, rowHeight) => ({
     columns,
-    isLoading,
     rows,
     rowProps,
-    scrollToIndex,
     totalCount,
     lastItemIndex,
     isError,
@@ -14,41 +12,47 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     newLoadedRowsEndIndex: lastItemIndex,
     isSheetView: true,
     isPinned,
+    containerHeight,
+    rowHeight,
+}));
+const createInteractionData = memoize((selectedCell, selectedColumn, selectedRow, selectedChip, onCellClick, onChipClick) => ({
     selectedCell,
     selectedColumn,
     selectedRow,
     selectedChip,
     onCellClick,
     onChipClick,
-    containerHeight,
-    rowHeight,
 }));
+// eslint-disable-next-line
+const createItemData = (coreData, interactionData, scrollToIndex, isLoading) => (Object.assign(Object.assign(Object.assign({}, coreData), interactionData), { scrollToIndex,
+    isLoading }));
 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]);
-    const commonItemDataParams = useMemo(() => {
+    // Memoize core data that changes less frequently
+    const coreItemData = useMemo(() => {
         var _a;
-        return [
-            isDelayedFetchingNextPage,
-            rows,
-            rowProps,
-            scrollToIndex,
-            rows.length - 1,
-            (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0,
-            isError,
-            areAllRowsLoaded,
-        ];
-    }, [isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount, isError, areAllRowsLoaded]);
-    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 createCoreItemData(null, // columns will be passed per container
+        rows, rowProps, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, rows.length - 1, // lastItemIndex
+        isError, areAllRowsLoaded, false, // isPinned will be passed per container
+        0, // height will be passed per container
+        rowHeight);
+    }, [rows, rowProps, footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount, isError, areAllRowsLoaded, rowHeight]);
+    // Memoize interaction data separately
+    const interactionData = useMemo(() => createInteractionData(selectedCell, selectedColumn, selectedRow, selectedChip, handleCellClick, handleChipClick), [selectedCell, selectedColumn, selectedRow, selectedChip, handleCellClick, handleChipClick]);
+    const getItemDataForContainer = useCallback((columnsData, isPinnedColumn, height) => {
+        const coreWithOverrides = Object.assign(Object.assign({}, coreItemData), { columns: columnsData, isPinned: isPinnedColumn, containerHeight: height });
+        return createItemData(coreWithOverrides, interactionData, scrollToIndex, isDelayedFetchingNextPage);
+    }, [coreItemData, interactionData, scrollToIndex, isDelayedFetchingNextPage]);
     return {
         getItemSize,
         getItemDataForContainer,

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

@@ -67,7 +67,7 @@ const PinnedColumnBase = styled('div')(({ theme }) => ({
     backgroundColor: theme.palette.primary.light,
     borderTop: '1px solid #F2F2F2',
     borderBottom: '1px solid #F2F2F2',
-    overflow: 'hidden',
+    overflow: 'hidden', // Ensure border radius is applied properly
 }));
 export const PinnedStartColumnWrapper = styled(PinnedColumnBase)({
     boxShadow: '4px 0px 24px 0px #00000014',

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

@@ -58,6 +58,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, isSheetView);
     const tableRowHeight = isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT;
     const listRef = useRef(null);
+    // Reset row heights when isSheetView or tableRowHeight changes
     useEffect(() => {
         if (listRef.current && typeof listRef.current.resetAfterIndex === 'function') {
             listRef.current.resetAfterIndex(0, true);
@@ -68,11 +69,16 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
             setShowBackdrop(isVisible);
         };
         const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+            // TODO: start index and stop index are not working as expected
+            // console.log('startIndex', startIndex, 'stopIndex', stopIndex,
+            // 'rows.length', rows.length)
             if (areAllRowsLoaded)
                 return;
             yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
         });
-        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView, listRef: listRef }, { children: ListItemWrapper }))) }), `${footerProps === null || footerProps === void 0 ? void 0 : footerProps.maximized}-${isMinimized}`)) })));
+        return (
+        // @ts-ignore
+        _jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView, listRef: listRef }, { children: ListItemWrapper }))) }), `${footerProps === null || footerProps === void 0 ? void 0 : footerProps.maximized}-${isMinimized}`)) })));
     }, [
         isMinimized,
         footerProps === null || footerProps === void 0 ? void 0 : footerProps.maximized,
@@ -91,6 +97,10 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, isSheetView: isSheetView })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                                         width: '100%',
                                         minWidth: 'fit-content',
-                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem
+                    // rows height + header height
+                    , { 
+                        // rows height + header height
+                        height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
 }
 export default memo(VirtualTable);