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

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,31 +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,
-    }), [
-        showHeader,
-        columnsSorting,
-        onColumnSort,
-        headerProps,
-        showBackDrop,
-        handleColumnPin,
-        isPinnable,
-        lastColumnId,
-        selectedColumn,
-        handleColumnClick,
-        stableFilters, // This dependency ensures re-render when filters change
-    ]);
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
@@ -95,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,
@@ -103,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,19 +1,11 @@
 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;
+        firstColumnId: string | number | symbol | undefined;
+        lastColumnId: string | number | symbol | undefined;
     };
 };
-export {};

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

@@ -1,116 +1,112 @@
 import { useMemo, useRef } from 'react';
+import { isEqual, pick, has, sumBy, first, last, forEach } from 'lodash';
+// Deep comparison helper for filter data
+const areFilterDataEqual = (filter1, filter2) => {
+    if (filter1 === filter2)
+        return true;
+    if (!filter1 || !filter2 || filter1.type === 'custom' || filter2.type === 'custom')
+        return false;
+    console.log({ filter1, filter2 });
+    // Extract comparable properties (excluding functions) using lodash
+    const getComparableProps = (filter) => {
+        if (!filter)
+            return null;
+        // Pick only the data properties we want to compare, excluding functions
+        const baseProps = pick(filter, ['type', 'data', 'options', 'isOnlyOneFilter']);
+        // Conditionally add properties that might not exist
+        const conditionalProps = {};
+        if (has(filter, 'apiKey'))
+            conditionalProps.apiKey = filter.apiKey;
+        if (has(filter, 'countries'))
+            conditionalProps.countries = filter.countries;
+        if (has(filter, 'isCountriesLoading'))
+            conditionalProps.isCountriesLoading = filter.isCountriesLoading;
+        return Object.assign(Object.assign({}, baseProps), conditionalProps);
+    };
+    const props1 = getComparableProps(filter1);
+    const props2 = getComparableProps(filter2);
+    // Use lodash's deep equality check instead of manual comparison
+    return isEqual(props1, props2);
+};
 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 using lodash forEach
+            forEach(columns, (col) => {
+                filterChangeTrackingRef.current.set(col.id, col === null || col === void 0 ? void 0 : col.filter);
+            });
+            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];
-                return !prevCol || col.id !== prevCol.id || col.filter !== prevCol.filter;
+                if (!prevCol)
+                    return true;
+                // Extract structural properties and compare using lodash
+                const currentStructure = pick(col, ['id', 'width', 'pinned', 'hidden', 'order']);
+                const prevStructure = pick(prevCol, ['id', 'width', 'pinned', 'hidden', 'order']);
+                return !isEqual(currentStructure, prevStructure);
             });
-        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;
+        // Check for filter-only changes using lodash forEach
+        const columnsWithFilterChanges = new Set();
+        forEach(columns, (col) => {
+            const colId = col.id;
+            const prevFilter = filterChangeTrackingRef.current.get(colId);
+            const currentFilter = col === null || col === void 0 ? void 0 : col.filter;
+            console.log({ col });
+            if (!areFilterDataEqual(prevFilter, currentFilter)) {
+                columnsWithFilterChanges.add(colId);
+                filterChangeTrackingRef.current.set(colId, currentFilter);
             }
         });
-        // Safe comparison helper that avoids circular references
-        const safeCompare = (obj1, obj2) => {
-            // Handle primitive types
-            if (obj1 === obj2)
-                return true;
-            if (obj1 == null || obj2 == null)
-                return obj1 === obj2;
-            if (typeof obj1 !== 'object' || typeof obj2 !== 'object')
-                return obj1 === obj2;
-            // Handle arrays
-            if (Array.isArray(obj1) && Array.isArray(obj2)) {
-                if (obj1.length !== obj2.length)
-                    return false;
-                return obj1.every((item, index) => safeCompare(item, obj2[index]));
+        // 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];
             }
-            if (Array.isArray(obj1) || Array.isArray(obj2))
-                return false;
-            // Handle objects - only compare basic properties, avoid complex nested objects
-            const keys1 = Object.keys(obj1);
-            const keys2 = Object.keys(obj2);
-            if (keys1.length !== keys2.length)
-                return false;
-            return keys1.every((key) => {
-                const val1 = obj1[key];
-                const val2 = obj2[key];
-                // Skip complex objects that might have circular references
-                if (typeof val1 === 'object' && val1 != null && (val1.constructor === Object || Array.isArray(val1))) {
-                    return safeCompare(val1, val2);
-                }
-                // For other object types (like React contexts), just compare references
-                return val1 === val2;
-            });
-        };
-        // 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;
-                // Safe comparison for options and data
-                if (!safeCompare(current.options, prev.options))
-                    return true;
-                if (!safeCompare(current.data, prev.data))
-                    return true;
-                return false;
-            });
-        };
-        if (hasFilterChanged()) {
-            stableFiltersRef.current = Object.assign({}, currentFilters);
         }
-        return stableFiltersRef.current;
+        return stableColumnsRef.current;
     }, [columns]);
-    // Memoize frequently used column calculations
+    // Memoize frequently used column calculations using lodash utilities
     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 totalWidth = sumBy(visibleColumns, (col) => +((col === null || col === void 0 ? void 0 : col.width) || 100));
         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,
+            firstColumnId: (_a = first(visibleColumns)) === null || _a === void 0 ? void 0 : _a.id,
+            lastColumnId: (_b = last(visibleColumns)) === null || _b === void 0 ? void 0 : _b.id,
         };
     }, [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.5",
-  "testVersion": 5,
+  "version": "0.1.136-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",