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

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

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

@@ -4,9 +4,10 @@ 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, }) {
+    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,
@@ -15,7 +16,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         isFetchingNextPage,
         areAllRowsLoaded,
     });
-    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, 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({
@@ -57,6 +58,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         clearBackdropVisibilityTimeout,
         handleScroll,
         setShowBackdrop,
+        overscanCount,
         pinnedStartVirtualListRef,
         pinnedEndVirtualListRef,
         scrollableVirtualListRef,

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/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,38 @@
+/// <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;
+        columnCount: number;
+        firstColumnId: string | number | symbol;
+        lastColumnId: string | number | symbol;
+    };
+};

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

@@ -0,0 +1,44 @@
+import { useMemo, useRef } from 'react';
+export const usePerformanceOptimizations = (columns) => {
+    const stableColumnsRef = useRef([]);
+    const stableColumns = useMemo(() => {
+        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 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);
+        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,
+        stableColumnsWithFilters,
+        columnMetrics,
+    };
+};

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

@@ -17,6 +17,7 @@ export const useTableState = () => {
         }
         setSelectedChip(chipKey);
         setSelectedCell(cellKey);
+        setSelectedColumn(null);
         setSelectedRow(null);
     }, [selectedChip, setSelectedChip, setSelectedCell, setSelectedRow]);
     const handleCellClick = useCallback((rowIndex, columnIndex, event, pinnedType) => {

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,15 +12,19 @@ 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,
 }));
+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;
@@ -34,21 +36,15 @@ export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, is
         }
         return rowHeight;
     }, [areAllRowsLoaded, rows.length, rowHeight]);
-    const commonItemDataParams = useMemo(() => {
+    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, rows, rowProps, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, rows.length - 1, isError, areAllRowsLoaded, false, 0, rowHeight);
+    }, [rows, rowProps, footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount, isError, areAllRowsLoaded, rowHeight]);
+    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/components/TableRow.js

@@ -6,23 +6,25 @@ import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from './style';
 import { getSelectionStyles, getRowSelectionBorderStyles } from '../../../utils/index.js';
 function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, selectedRow = null, selectedChip = null, onCellClick, isLastRow = false, onChipClick, }) {
-    const renderCell = (column, rowIndex, colIndex) => {
-        const { render, format, selector } = column;
-        const handleChipClick = (event, chipIndex) => {
-            onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(rowIndex, colIndex, event, chipIndex, column.pinned);
+    const renderCell = useMemo(() => {
+        return (column, rowIndex, colIndex) => {
+            const { render, format, selector } = column;
+            const handleChipClick = (event, chipIndex) => {
+                onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(rowIndex, colIndex, event, chipIndex, column.pinned);
+            };
+            if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
+                return null;
+            const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
+            const formattedValue = format ? format({ value, row, index }) : value;
+            return render ? (render({
+                row,
+                column,
+                index,
+                value: row[column === null || column === void 0 ? void 0 : column.id],
+                selectionProps: { onClick: handleChipClick, rowIndex, colIndex, selectedId: selectedChip },
+            })) : (_jsx(_Fragment, { children: formattedValue }));
         };
-        if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
-            return null;
-        const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
-        const formattedValue = format ? format({ value, row, index }) : value;
-        return render ? (render({
-            row,
-            column,
-            index,
-            value: row[column === null || column === void 0 ? void 0 : column.id],
-            selectionProps: { onClick: handleChipClick, rowIndex, colIndex, selectedId: selectedChip },
-        })) : (_jsx(_Fragment, { children: formattedValue }));
-    };
+    }, [row, index, selectedChip, onChipClick]);
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
             var _a, _b;
             const cellKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${index}-${colIndex}`;
@@ -48,7 +50,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
             }
             const rowSelectionBorderStyles = isRowSelected
                 ? getRowSelectionBorderStyles({
-                    effectiveFirst,
+                    isFirstColumn,
                     isPinnedStart: column.pinned === 'start',
                     isPinnedEnd: column.pinned === 'end',
                 })
@@ -57,7 +59,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
             return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: effectiveFirst, isLast: effectiveLast, onClick: (event) => {
                     onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned);
                 }, sx: Object.assign(Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: isIndexColumn ? 'center' : column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), rowSelectionBorderStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: isSheetView ? (_jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1 } }, { children: renderCell(column, index, colIndex) }))) : (_jsx(_Fragment, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
-        }) })), [columns, row, index, selectedCell, selectedColumn, selectedRow, onCellClick, isLastRow, selectedChip, isSheetView]);
+        }) })), [columns, index, selectedCell, selectedColumn, selectedRow, onCellClick, isLastRow, isSheetView, renderCell]);
     return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
 }
 export default memo(TableRow, areEqual);

package/build/components/VirtualTables/components/virtualScroll/ListItemWrapper.js

@@ -66,9 +66,9 @@ function ListItemWrapper(_a) {
                 width: '100%',
             } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })));
     }, [isError]);
+    const isLastRow = React.useMemo(() => isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1), [isLoadingRow, areAllRowsLoaded, index, lastItemIndex]);
     const memoizedListItemComponent = React.useMemo(() => {
         const lastRowContent = _jsx(LastRowContent, { isSheetView: isSheetView, isLoadingRow: isLoadingRow, columns: columns, currentRowCount: rows.length });
-        const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
         if (isPinned && isLastRow) {
             if (isSheetView && isLoadingRow && columns && columns.length > 0) {
                 return renderSheetViewLoadingRow(lastRowContent);

package/build/constants/table.d.ts

@@ -3,6 +3,6 @@ export declare const TABLE_CONTENT_ROW_HEIGHT = 70;
 export declare const TABLE_ROW_HEIGHT = 57;
 export declare const TABLE_THRESHOLD = 200;
 export declare const TABLE_LIST_OVER_SCAN = 5;
-export declare const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 50;
+export declare const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 20;
 export declare const SHEET_VIEW_TABLE_THRESHOLD = 20;
 export declare const SHEET_VIEW_TABLE_ROW_HEIGHT = 28;

package/build/constants/table.js

@@ -3,6 +3,6 @@ export const TABLE_CONTENT_ROW_HEIGHT = 70;
 export const TABLE_ROW_HEIGHT = 57;
 export const TABLE_THRESHOLD = 200;
 export const TABLE_LIST_OVER_SCAN = 5;
-export const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 50;
+export const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 20;
 export const SHEET_VIEW_TABLE_THRESHOLD = 20;
 export const SHEET_VIEW_TABLE_ROW_HEIGHT = 28;

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/build/utils/style.d.ts

@@ -14,9 +14,9 @@ interface GetSelectionStylesParams {
 type SelectionStyles = Record<string, string | Record<string, string>>;
 export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isRowSelected, isLastRow, }: GetSelectionStylesParams) => SelectionStyles;
 interface GetRowSelectionBorderStylesParams {
-    effectiveFirst: boolean;
+    isFirstColumn: boolean;
     isPinnedStart: boolean;
     isPinnedEnd: boolean;
 }
-export declare const getRowSelectionBorderStyles: ({ effectiveFirst, isPinnedStart, isPinnedEnd }: GetRowSelectionBorderStylesParams) => SelectionStyles;
+export declare const getRowSelectionBorderStyles: ({ isFirstColumn, isPinnedStart, isPinnedEnd }: GetRowSelectionBorderStylesParams) => SelectionStyles;
 export {};

package/build/utils/style.js

@@ -59,9 +59,9 @@ const getBorderWidthForColumn = () => {
 const getBorderBottomForColumn = (isLastRow) => {
     return isLastRow ? `${BORDER_STYLES.thick} solid ${SELECTION_COLORS.primary}` : `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.border}`;
 };
-export const getRowSelectionBorderStyles = ({ effectiveFirst, isPinnedStart, isPinnedEnd }) => ({
+export const getRowSelectionBorderStyles = ({ isFirstColumn, isPinnedStart, isPinnedEnd }) => ({
     borderTop: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
     borderBottom: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
     borderRight: `${BORDER_STYLES.thin} solid ${isPinnedEnd ? SELECTION_COLORS.primary : 'none'}`,
-    borderLeft: `${BORDER_STYLES.thin} solid ${isPinnedStart && effectiveFirst ? SELECTION_COLORS.primary : 'transparent'}`,
+    borderLeft: `${BORDER_STYLES.thin} solid ${isPinnedStart && isFirstColumn ? SELECTION_COLORS.primary : 'transparent'}`,
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.129",
+  "version": "0.1.130-test.6",
   "testVersion": 6,
   "type": "module",
   "main": "build/index.js",
@@ -136,4 +136,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}