@tap-payments/os-micro-frontend-shared 0.1.130-test.5 → 0.1.130-test.6

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

@@ -7,7 +7,7 @@ import { SheetViewVirtualTableWrapper } from './style';
 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, }) {
-    const { stableColumns } = usePerformanceOptimizations(columns);
+    const { stableColumnsWithFilters } = usePerformanceOptimizations(columns);
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
     const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
         rows,
@@ -16,7 +16,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         isFetchingNextPage,
         areAllRowsLoaded,
     });
-    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(stableColumns, isPinnable, onColumnPin);
+    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(stableColumnsWithFilters, isPinnable, onColumnPin);
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
     const { pinnedStartColumnsWidth, pinnedEndColumnsWidth } = usePinnedColumnsWidths(pinnedStartColumnsData, pinnedEndColumnsData);
     const { getItemSize, getItemDataForContainer } = useVirtualTableContainer({

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import { pinIcon, unpinIcon } from '../../../../constants/index.js';
+import { areTableHeaderCellPropsEqual } from '../../../../utils/index.js';
 import ColumnFilter from '../../components/ColumnFilter';
 import { StyledCell, TableHeaderInner } from '../../components/style';
 import { PinIconContainer, HeaderText } from '../style';
@@ -44,11 +45,9 @@ function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, so
                 right: 0,
                 left: 0,
                 bottom: 0,
-            } }, headerStyle)) }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: handleHeaderInnerClick }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl })), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
-                        onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, e, pinned);
-                    } })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
+            } }, headerStyle)) }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: handleHeaderInnerClick }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl })), sortable && _jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting }), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
                         event.stopPropagation();
                         handlePinClick(id);
                     }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] })) })));
 }
-export default memo(SheetViewTableHeaderCell);
+export default memo(SheetViewTableHeaderCell, areTableHeaderCellPropsEqual);

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

@@ -1,6 +1,33 @@
+/// <reference types="react" />
 import type { IColumnProps } from '../../../../types/index.js';
 export declare const usePerformanceOptimizations: (columns: readonly IColumnProps[]) => {
     stableColumns: IColumnProps<any>[];
+    stableColumnsWithFilters: {
+        filter: ({
+            onConfirm?: ((filterValues: import("../../../../types/index.js").ColumnFilterValues) => void) | undefined;
+            onClear: (apiKeys: string[]) => void;
+            onClearFilterFields?: (() => void) | undefined;
+            data?: import("../../../../types/index.js").ColumnFilterValues | undefined;
+            isOnlyOneFilter?: boolean | undefined;
+            wrapperSx?: import("@mui/system").SxProps | undefined;
+        } & (import("../../../../types/index.js").IColumnFilterList | import("../../../../types/index.js").IColumnFilterInputs | import("../../../../types/index.js").IColumnFilterCustom)) | undefined;
+        header?: string | (() => import("react").ReactNode) | undefined;
+        render?: ((props: import("../../../../types/index.js").IRenderAttr<any, IColumnProps<any>>) => import("react").ReactNode) | undefined;
+        id: string | number | symbol;
+        tableViewId?: string | undefined;
+        width?: import("csstype").Property.Width<string | number> | undefined;
+        format?: ((props: import("../../../../types/index.js").IFormatAttr<any>) => string) | undefined;
+        selector?: ((props: import("../../../../types/index.js").ISelectorAttr<any>) => string | number | Record<string, any>) | undefined;
+        align?: import("csstype").Property.TextAlign | undefined;
+        sortable?: boolean | undefined;
+        hidden?: boolean | undefined;
+        order?: number | undefined;
+        pinned?: "start" | "end" | undefined;
+        pinnable?: boolean | undefined;
+        cellStyle?: import("react").CSSProperties | undefined;
+        headerStyle?: import("react").CSSProperties | undefined;
+        isDefaultPinned?: boolean | undefined;
+    }[];
     columnMetrics: {
         visibleColumns: IColumnProps<any>[];
         totalWidth: number;

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

@@ -10,14 +10,19 @@ export const usePerformanceOptimizations = (columns) => {
                     col.width !== prevCol.width ||
                     col.pinned !== prevCol.pinned ||
                     col.hidden !== prevCol.hidden ||
-                    col.order !== prevCol.order ||
-                    col.filter !== prevCol.filter);
+                    col.order !== prevCol.order);
             });
         if (hasChanged) {
             stableColumnsRef.current = [...columns];
         }
         return stableColumnsRef.current;
     }, [columns]);
+    const stableColumnsWithFilters = useMemo(() => {
+        return stableColumns.map((stableCol, index) => {
+            const currentCol = columns[index];
+            return Object.assign(Object.assign({}, stableCol), { filter: currentCol === null || currentCol === void 0 ? void 0 : currentCol.filter });
+        });
+    }, [stableColumns, columns]);
     const columnMetrics = useMemo(() => {
         var _a, _b;
         const visibleColumns = stableColumns.filter((col) => !col.hidden);
@@ -33,6 +38,7 @@ export const usePerformanceOptimizations = (columns) => {
     }, [stableColumns]);
     return {
         stableColumns,
+        stableColumnsWithFilters,
         columnMetrics,
     };
 };

package/build/utils/index.d.ts

@@ -41,3 +41,4 @@ export * from './flag';
 export * from './encrypt';
 export * from './day';
 export * from './style';
+export * from './memoComparison';

package/build/utils/index.js

@@ -41,3 +41,4 @@ export * from './flag';
 export * from './encrypt';
 export * from './day';
 export * from './style';
+export * from './memoComparison';

package/build/utils/memoComparison.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { IColumnProps } from '../types/index.js';
+interface SheetViewTableHeaderCellProps {
+    column: IColumnProps;
+    colIndex: number;
+    isFirst: boolean;
+    isLast: boolean;
+    isSelected: boolean;
+    isDefaultPinned: boolean;
+    isPinnable?: boolean;
+    lastColumnId?: string | null;
+    columnsSorting?: Record<string, 'asc' | 'desc'>;
+    pinnedColumns?: string[];
+    onColumnSort?: (columnsSorting: Record<string, 'asc' | 'desc'>) => void;
+    onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
+    onColumnClick?: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+}
+export declare const areTableHeaderCellPropsEqual: (prevProps: SheetViewTableHeaderCellProps, nextProps: SheetViewTableHeaderCellProps) => boolean;
+export {};

package/build/utils/memoComparison.js

@@ -0,0 +1,24 @@
+export const areTableHeaderCellPropsEqual = (prevProps, nextProps) => {
+    const prevCol = prevProps.column;
+    const nextCol = nextProps.column;
+    const filterChanged = prevCol.filter !== nextCol.filter;
+    const essentialPropsChanged = prevCol.id !== nextCol.id ||
+        prevCol.header !== nextCol.header ||
+        prevCol.width !== nextCol.width ||
+        prevCol.align !== nextCol.align ||
+        prevCol.pinned !== nextCol.pinned ||
+        prevCol.sortable !== nextCol.sortable ||
+        prevCol.pinnable !== nextCol.pinnable ||
+        prevCol.order !== nextCol.order ||
+        JSON.stringify(prevCol.headerStyle) !== JSON.stringify(nextCol.headerStyle);
+    const otherPropsChanged = prevProps.colIndex !== nextProps.colIndex ||
+        prevProps.isFirst !== nextProps.isFirst ||
+        prevProps.isLast !== nextProps.isLast ||
+        prevProps.isSelected !== nextProps.isSelected ||
+        prevProps.isDefaultPinned !== nextProps.isDefaultPinned ||
+        prevProps.isPinnable !== nextProps.isPinnable ||
+        prevProps.lastColumnId !== nextProps.lastColumnId ||
+        JSON.stringify(prevProps.columnsSorting) !== JSON.stringify(nextProps.columnsSorting) ||
+        JSON.stringify(prevProps.pinnedColumns) !== JSON.stringify(nextProps.pinnedColumns);
+    return !filterChanged && !essentialPropsChanged && !otherPropsChanged;
+};

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.130-test.5",
-  "testVersion": 5,
+  "version": "0.1.130-test.6",
+  "testVersion": 6,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",