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

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/TableCells/CustomCells/BankCell/BankCell.js

@@ -14,12 +14,12 @@ import Tooltip from '../../../Tooltip';
 import CountryFlag from '../../../CountryFlag';
 import { TableCell } from '../../../TableCells';
 import { bankIcon } from '../../../../constants/index.js';
-import { getCountryName } from '../../../../utils/index.js';
+import { getCountryNameByISO } from '../../../../utils/index.js';
 import { BankCellContainer, BankIcon, BankIdContainer, BankWrapper, IconWrapper } from './style';
 import { GeographyBox } from '../style';
 function BankCell(_a) {
     var { walletId, country, name } = _a, props = __rest(_a, ["walletId", "country", "name"]);
-    const icon = country && (_jsx(Tooltip, Object.assign({ title: getCountryName(country) }, { children: _jsx(CountryFlag, { code: country, sx: { padding: '1px' } }) })));
+    const icon = country && (_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { code: country, sx: { padding: '1px' } }) })));
     return (_jsx(TableCell, Object.assign({ style: {
             textAlign: 'center',
             overflow: 'visible',

package/build/components/TableCells/CustomCells/DateCell/DateCell.js

@@ -14,13 +14,13 @@ import { useMemo } from 'react';
 import { TableCell } from '../../../TableCells';
 import Tooltip from '../../../Tooltip';
 import CountryFlag from '../../../CountryFlag';
-import { formatCellDate, getCountryName } from '../../../../utils/index.js';
+import { formatCellDate, getCountryNameByISO } from '../../../../utils/index.js';
 import { DateCellContainer } from './style';
 import { GeographyBox } from '../style';
 import { Box } from '@mui/material';
 function DateCell(_a) {
     var { value, format: dateFormat, flagIcon, hasFlag, tableMode } = _a, props = __rest(_a, ["value", "format", "flagIcon", "hasFlag", "tableMode"]);
-    const icon = flagIcon && (_jsx(Tooltip, Object.assign({ title: getCountryName(flagIcon || '') }, { children: _jsx(CountryFlag, { code: flagIcon }) })));
+    const icon = flagIcon && (_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(flagIcon || '') }, { children: _jsx(CountryFlag, { code: flagIcon }) })));
     const renderedValue = useMemo(() => formatCellDate(value, dateFormat), [value]);
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(DateCellContainer, { children: [hasFlag && (_jsx(GeographyBox, Object.assign({ sx: {
                         visibility: 'visible',

package/build/components/TableCells/CustomCells/EntityCell/EntityCell.js

@@ -15,10 +15,10 @@ import { EntityName, EntityWrapper, VerificationIcon, VerificationContainer } fr
 import { verificationIcon } from './constants';
 import Tooltip from '../../../Tooltip';
 import { CountryFlag } from '../../../index.js';
-import { getCountryName } from '../../../../utils/index.js';
+import { getCountryNameByISO } from '../../../../utils/index.js';
 import { Box } from '@mui/material';
 export default function EntityCell(_a) {
     var { entity, country, verificationStatus, licenseNumber, hideStatus } = _a, props = __rest(_a, ["entity", "country", "verificationStatus", "licenseNumber", "hideStatus"]);
     const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
-    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: (props === null || props === void 0 ? void 0 : props.onClick) ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(Tooltip, Object.assign({ title: getCountryName(country) }, { children: _jsx(CountryFlag, { code: country }) })), _jsx(EntityName, { children: licenseNumber }), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] })) })) })) })));
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: (props === null || props === void 0 ? void 0 : props.onClick) ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: entity }, { children: _jsx(EntityWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { code: country }) })), _jsx(EntityName, { children: licenseNumber }), !hideStatus && (_jsx(VerificationContainer, { children: _jsx(VerificationIcon, { src: icon }) }))] })) })) })) })));
 }

package/build/components/TableCells/CustomCells/WalletCell/WalletCell.js

@@ -14,16 +14,16 @@ import Tooltip from '../../../Tooltip';
 import CountryFlag from '../../../CountryFlag';
 import { TableCell } from '../../../TableCells';
 import { walletIcon } from '../../../../constants/index.js';
-import { getCountryName } from '../../../../utils/index.js';
+import { getCountryNameByISO } from '../../../../utils/index.js';
 import { WalletCellContainer, WalletIcon, WalletIdContainer, WalletWrapper } from './style';
 import { GeographyBox, StatusIconWrapper } from '../style';
 function WalletCell(_a) {
     var { walletId, country, showCountry = true } = _a, props = __rest(_a, ["walletId", "country", "showCountry"]);
-    const icon = country && (_jsx(Tooltip, Object.assign({ title: getCountryName(country) }, { children: _jsx(CountryFlag, { code: country, sx: { padding: '1px' } }) })));
+    const icon = country && (_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { code: country, sx: { padding: '1px' } }) })));
     return (_jsx(TableCell, Object.assign({ style: {
             textAlign: 'center',
             overflow: 'visible',
-        } }, props, { children: _jsxs(WalletCellContainer, { children: [showCountry && (_jsx(StatusIconWrapper, { children: _jsx(Tooltip, Object.assign({ title: country ? getCountryName(country) : '' }, { children: _jsx(GeographyBox, Object.assign({ sx: {
+        } }, props, { children: _jsxs(WalletCellContainer, { children: [showCountry && (_jsx(StatusIconWrapper, { children: _jsx(Tooltip, Object.assign({ title: country ? getCountryNameByISO(country) : '' }, { children: _jsx(GeographyBox, Object.assign({ sx: {
                                 visibility: 'visible',
                             }, variant: undefined }, { children: icon })) })) })), _jsxs(WalletWrapper, { children: [_jsx(WalletIcon, { src: walletIcon, alt: "wallet-icon" }), walletId && _jsxs(WalletIdContainer, { children: ["\u00B7\u00B7\u00B7\u00B7 ", walletId === null || walletId === void 0 ? void 0 : walletId.substring(((walletId === null || walletId === void 0 ? void 0 : walletId.length) || 0) - 4)] })] })] }) })));
 }

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

@@ -4,10 +4,9 @@ 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, }) {
-    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 +15,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         isFetchingNextPage,
         areAllRowsLoaded,
     });
-    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(stableColumnsWithFilters, isPinnable, onColumnPin);
+    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
     const { pinnedStartColumnsWidth, pinnedEndColumnsWidth } = usePinnedColumnsWidths(pinnedStartColumnsData, pinnedEndColumnsData);
     const { getItemSize, getItemDataForContainer } = useVirtualTableContainer({
@@ -58,7 +57,6 @@ 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,7 +2,6 @@ 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';
@@ -45,9 +44,11 @@ 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 }), 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, onClick: (e) => {
+                        onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, e, pinned);
+                    } })), 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, areTableHeaderCellPropsEqual);
+export default memo(SheetViewTableHeaderCell);

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,19 +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,
 }));
-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;
@@ -36,15 +34,21 @@ export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, is
         }
         return rowHeight;
     }, [areAllRowsLoaded, rows.length, rowHeight]);
-    const coreItemData = useMemo(() => {
+    const commonItemDataParams = useMemo(() => {
         var _a;
-        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 [
+            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}`;
@@ -50,7 +48,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
             }
             const rowSelectionBorderStyles = isRowSelected
                 ? getRowSelectionBorderStyles({
-                    isFirstColumn,
+                    effectiveFirst,
                     isPinnedStart: column.pinned === 'start',
                     isPinnedEnd: column.pinned === 'end',
                 })
@@ -59,7 +57,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

@@ -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 = 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/country.d.ts

@@ -1 +1 @@
-export declare function getCountryName(countryCode: string): string | undefined;
+export declare function getCountryNameByISO(countryCode: string): string | undefined;

package/build/utils/country.js

@@ -1,5 +1,5 @@
 import { toast } from 'react-hot-toast';
-export function getCountryName(countryCode) {
+export function getCountryNameByISO(countryCode) {
     var _a, _b, _c;
     try {
         const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });

package/build/utils/index.d.ts

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

package/build/utils/index.js

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

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 {
-    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

@@ -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 = ({ 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.130-test.6",
-  "testVersion": 6,
+  "version": "0.1.130",
+  "testVersion": 1,
   "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,38 +0,0 @@
-/// <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

@@ -1,44 +0,0 @@
-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/utils/memoComparison.d.ts

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

@@ -1,24 +0,0 @@
-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;
-};