@tap-payments/os-micro-frontend-shared 0.1.134 → 0.1.135-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

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } 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, 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, stableFilters } = 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,
@@ -34,6 +42,33 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         handleCellClick,
         handleChipClick,
     });
+    // Memoized header props to prevent unnecessary re-renders when filters change
+    const memoizedHeaderProps = useMemo(() => ({
+        showHeader,
+        columnsSorting,
+        onColumnSort,
+        headerProps,
+        showBackDrop,
+        onColumnPin: handleColumnPin,
+        isPinnable,
+        lastColumnId,
+        selectedColumn,
+        onColumnClick: handleColumnClick,
+        // Force re-render only when filters actually change
+        filtersKey: Object.keys(stableFilters).length > 0 ? JSON.stringify(stableFilters) : null,
+    }), [
+        showHeader,
+        columnsSorting,
+        onColumnSort,
+        headerProps,
+        showBackDrop,
+        handleColumnPin,
+        isPinnable,
+        lastColumnId,
+        selectedColumn,
+        handleColumnClick,
+        stableFilters,
+    ]);
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
@@ -57,22 +92,12 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         clearBackdropVisibilityTimeout,
         handleScroll,
         setShowBackdrop,
+        overscanCount,
         pinnedStartVirtualListRef,
         pinnedEndVirtualListRef,
         scrollableVirtualListRef,
     ]);
-    const baseCommonProps = {
-        showHeader,
-        columnsSorting,
-        onColumnSort,
-        headerProps,
-        showBackDrop,
-        onColumnPin: handleColumnPin,
-        isPinnable,
-        lastColumnId,
-        selectedColumn,
-        onColumnClick: handleColumnClick,
-        tableTitle,
+    const baseCommonProps = Object.assign(Object.assign({}, memoizedHeaderProps), { tableTitle,
         areAllRowsLoaded,
         isFetchingNextPage,
         scrollToIndex,
@@ -80,10 +105,13 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         isError,
         tableMode,
         showNoDataView,
-        tableBodyStyles,
-    };
+        tableBodyStyles });
     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,19 @@
+import type { IColumnProps } from '../../../../types/index.js';
+interface StableFilterData {
+    type: string;
+    data?: unknown;
+    options?: unknown;
+    apiKey?: string;
+}
+export declare const usePerformanceOptimizations: (columns: readonly IColumnProps[]) => {
+    stableColumns: IColumnProps<any>[];
+    stableFilters: Record<string, StableFilterData>;
+    columnMetrics: {
+        visibleColumns: IColumnProps<any>[];
+        totalWidth: number;
+        columnCount: number;
+        firstColumnId: string | number | symbol;
+        lastColumnId: string | number | symbol;
+    };
+};
+export {};

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

@@ -0,0 +1,89 @@
+import { useMemo, useRef } from 'react';
+export const usePerformanceOptimizations = (columns) => {
+    // Create stable column references to prevent unnecessary re-renders
+    const stableColumnsRef = useRef([]);
+    // Create stable filter references to prevent unnecessary header re-renders
+    const stableFiltersRef = useRef({});
+    const stableColumns = useMemo(() => {
+        // Only update if columns have actually changed (deep comparison of essential properties)
+        const hasChanged = columns.length !== stableColumnsRef.current.length ||
+            columns.some((col, index) => {
+                const prevCol = stableColumnsRef.current[index];
+                return (!prevCol ||
+                    col.id !== prevCol.id ||
+                    col.width !== prevCol.width ||
+                    col.pinned !== prevCol.pinned ||
+                    col.hidden !== prevCol.hidden ||
+                    col.order !== prevCol.order);
+            });
+        if (hasChanged) {
+            stableColumnsRef.current = [...columns];
+        }
+        return stableColumnsRef.current;
+    }, [columns]);
+    const stableFilters = useMemo(() => {
+        // Extract filter-related data from columns for header rendering optimization
+        const currentFilters = {};
+        columns.forEach((col) => {
+            if (col.filter && col.id) {
+                const columnId = col.id;
+                const filterData = {
+                    type: col.filter.type,
+                    data: col.filter.data,
+                    options: col.filter.options,
+                };
+                // Only add apiKey if it exists (for 'list' type filters)
+                if (col.filter.type === 'list') {
+                    filterData.apiKey = col.filter.apiKey;
+                }
+                currentFilters[columnId] = filterData;
+            }
+        });
+        // Deep comparison of filter state
+        const hasFilterChanged = () => {
+            const currentKeys = Object.keys(currentFilters);
+            const prevKeys = Object.keys(stableFiltersRef.current);
+            if (currentKeys.length !== prevKeys.length)
+                return true;
+            return currentKeys.some((key) => {
+                const current = currentFilters[key];
+                const prev = stableFiltersRef.current[key];
+                if (!prev)
+                    return true;
+                // Compare filter properties that affect rendering
+                if (current.type !== prev.type || current.apiKey !== prev.apiKey)
+                    return true;
+                // Deep compare options array
+                if (JSON.stringify(current.options) !== JSON.stringify(prev.options))
+                    return true;
+                // Deep compare filter data
+                if (JSON.stringify(current.data) !== JSON.stringify(prev.data))
+                    return true;
+                return false;
+            });
+        };
+        if (hasFilterChanged()) {
+            stableFiltersRef.current = Object.assign({}, currentFilters);
+        }
+        return stableFiltersRef.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,
+        stableFilters,
+        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',