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

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/InputBase/PhoneInputBase/CountriesList/CountriesList.js

@@ -51,7 +51,7 @@ function CountriesList({ isLoading, countries, value: countryValue, onCountryCha
                     border: 'none',
                     height: 34,
                     paddingInlineStart: '8px',
-                } }, { children: isLoading ? (_jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } })) : (_jsxs(_Fragment, { children: [selectedCountry && (_jsxs(_Fragment, { children: [_jsx("img", { src: selectedCountry.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.idd_prefix}` })] })), required && _jsx(Required, Object.assign({ component: "span" }, { children: "*" })), _jsx(Box, { component: "img", src: downArrowIcon, alt: "d", className: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })) })), open && _jsx(CustomBackdrop, { onClick: closeDropdown, sx: { zIndex: 9999 } }), open && (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeDropdown }, { children: _jsxs(CountriesWrapper, Object.assign({ id: "CountriesList_CountriesWrapper", open: open, anchorEl: anchorEl, "data-testid": "CountriesList_CountriesWrapper", placement: "bottom-start" }, { children: [_jsx(InputStyled, { endAdornment: _jsx("img", { src: searchIcon, alt: "arrow" }), onChange: handleSearch, hideArrows: true, "data-testid": "CountriesList_InputStyled", value: searchValue }), _jsx(CountriesListStyled, Object.assign({ "data-testid": "CountriesList_CountriesListStyled" }, { children: filteredCountries.map((country) => {
+                } }, { children: isLoading ? (_jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } })) : (_jsxs(_Fragment, { children: [selectedCountry && (_jsxs(_Fragment, { children: [_jsx("img", { src: selectedCountry.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.idd_prefix}` })] })), required && _jsx(Required, Object.assign({ component: "span" }, { children: "*" })), _jsx(Box, { component: "img", src: downArrowIcon, alt: "d", className: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })) })), open && _jsx(CustomBackdrop, { onClick: closeDropdown }), open && (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeDropdown }, { children: _jsxs(CountriesWrapper, Object.assign({ id: "CountriesList_CountriesWrapper", open: open, anchorEl: anchorEl, "data-testid": "CountriesList_CountriesWrapper", placement: "bottom-start" }, { children: [_jsx(InputStyled, { endAdornment: _jsx("img", { src: searchIcon, alt: "arrow" }), onChange: handleSearch, hideArrows: true, "data-testid": "CountriesList_InputStyled", value: searchValue }), _jsx(CountriesListStyled, Object.assign({ "data-testid": "CountriesList_CountriesListStyled" }, { children: filteredCountries.map((country) => {
                                 const isSelected = (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.countryId) === country.countryId;
                                 return (_jsxs(CountryStyled, Object.assign({ onClick: () => {
                                         handleOnCountryChange(country);

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

@@ -1,14 +1,12 @@
 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';
 import { SheetViewVirtualTableWrapper } from './style';
-import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths, usePerformanceOptimizations, } from './hooks';
+import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } 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
@@ -20,7 +18,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         areAllRowsLoaded,
     });
     // Column management
-    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(stableColumns, isPinnable, onColumnPin);
+    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
     // Scroll synchronization
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
     // Column width calculations
@@ -42,31 +40,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);
     };
@@ -90,12 +63,22 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         clearBackdropVisibilityTimeout,
         handleScroll,
         setShowBackdrop,
-        overscanCount,
         pinnedStartVirtualListRef,
         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 +86,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/index.d.ts

@@ -4,4 +4,3 @@ 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,4 +4,3 @@ 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/useTableState.js

@@ -17,7 +17,6 @@ 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,6 +23,28 @@ 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) => any;
+    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;
+    };
 };
 export {};

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

@@ -1,9 +1,11 @@
 import { useCallback, useMemo } from 'react';
 import memoize from 'memoize-one';
-const createCoreItemData = memoize((columns, rows, rowProps, totalCount, lastItemIndex, isError, areAllRowsLoaded, isPinned, containerHeight, rowHeight) => ({
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, selectedRow, selectedChip, onCellClick, onChipClick, containerHeight, rowHeight) => ({
     columns,
+    isLoading,
     rows,
     rowProps,
+    scrollToIndex,
     totalCount,
     lastItemIndex,
     isError,
@@ -12,20 +14,15 @@ const createCoreItemData = memoize((columns, rows, rowProps, totalCount, lastIte
     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;
@@ -38,21 +35,21 @@ export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, is
         }
         return rowHeight;
     }, [areAllRowsLoaded, rows.length, rowHeight]);
-    // Memoize core data that changes less frequently
-    const coreItemData = useMemo(() => {
+    const commonItemDataParams = useMemo(() => {
         var _a;
-        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 [
+            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 {
         getItemSize,
         getItemDataForContainer,

package/build/components/VirtualTables/components/TableRow.js

@@ -6,25 +6,23 @@ 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 = 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 }));
+    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);
         };
-    }, [row, index, selectedChip, onChipClick]);
+        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 }));
+    };
     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}`;
@@ -55,7 +53,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
             // Handle border styling for row selection
             const rowSelectionBorderStyles = isRowSelected
                 ? getRowSelectionBorderStyles({
-                    isFirstColumn,
+                    effectiveFirst,
                     isPinnedStart: column.pinned === 'start',
                     isPinnedEnd: column.pinned === 'end',
                 })
@@ -64,7 +62,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, index, selectedCell, selectedColumn, selectedRow, onCellClick, isLastRow, isSheetView, renderCell]);
+        }) })), [columns, row, index, selectedCell, selectedColumn, selectedRow, onCellClick, isLastRow, selectedChip, isSheetView]);
     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

@@ -68,9 +68,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 = 20;
+export declare const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 50;
 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 = 20;
+export const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 50;
 export const SHEET_VIEW_TABLE_THRESHOLD = 20;
 export const SHEET_VIEW_TABLE_ROW_HEIGHT = 28;

package/build/utils/style.d.ts

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

package/build/utils/style.js

@@ -87,9 +87,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 = ({ isFirstColumn, isPinnedStart, isPinnedEnd }) => ({
+export const getRowSelectionBorderStyles = ({ effectiveFirst, 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 && isFirstColumn ? SELECTION_COLORS.primary : 'transparent'}`,
+    borderLeft: `${BORDER_STYLES.thin} solid ${isPinnedStart && effectiveFirst ? SELECTION_COLORS.primary : 'transparent'}`,
 });

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.4",
-  "testVersion": 4,
+  "version": "0.1.136",
+  "testVersion": 0,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -136,4 +136,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

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

@@ -1,19 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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;
-            }
-        });
-        // 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]));
-            }
-            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;
-    }, [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,
-    };
-};