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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import { SheetViewTableContainer } from '../components/style';
@@ -8,7 +8,7 @@ import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, u
 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);
+    const { stableColumns } = usePerformanceOptimizations(columns);
     // Custom hooks for state management
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
     // Table data processing
@@ -42,33 +42,6 @@ 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);
     };
@@ -97,7 +70,18 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         pinnedEndVirtualListRef,
         scrollableVirtualListRef,
     ]);
-    const baseCommonProps = Object.assign(Object.assign({}, memoizedHeaderProps), { tableTitle,
+    const baseCommonProps = {
+        showHeader,
+        columnsSorting,
+        onColumnSort,
+        headerProps,
+        showBackDrop,
+        onColumnPin: handleColumnPin,
+        isPinnable,
+        lastColumnId,
+        selectedColumn,
+        onColumnClick: handleColumnClick,
+        tableTitle,
         areAllRowsLoaded,
         isFetchingNextPage,
         scrollToIndex,
@@ -105,7 +89,8 @@ 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 ? (

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

@@ -1,13 +1,6 @@
 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;
@@ -16,4 +9,3 @@ export declare const usePerformanceOptimizations: (columns: readonly IColumnProp
         lastColumnId: string | number | symbol;
     };
 };
-export {};

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

@@ -1,14 +1,48 @@
 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([]);
-    // Create stable filter references to prevent unnecessary header re-renders
-    const stableFiltersRef = useRef({});
+    const isFirstRenderRef = useRef(true);
+    const filterChangeTrackingRef = useRef(new Map());
     const stableColumns = useMemo(() => {
-        // Only update if columns have actually changed (deep comparison of essential properties)
-        const hasChanged = columns.length !== stableColumnsRef.current.length ||
+        // 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 ||
@@ -16,56 +50,41 @@ export const usePerformanceOptimizations = (columns) => {
                     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 = {};
+        // Check for filter-only changes
+        const columnsWithFilterChanges = new Set();
         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;
+            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);
             }
         });
-        // 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);
+        // 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 stableFiltersRef.current;
+        return stableColumnsRef.current;
     }, [columns]);
     // Memoize frequently used column calculations
     const columnMetrics = useMemo(() => {
@@ -83,7 +102,6 @@ export const usePerformanceOptimizations = (columns) => {
     }, [stableColumns]);
     return {
         stableColumns,
-        stableFilters,
         columnMetrics,
     };
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.135-test.2",
-  "testVersion": 2,
+  "version": "0.1.135-test.2-test.3-test.4",
+  "testVersion": 4,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",