@tap-payments/os-micro-frontend-shared 0.1.130-test.2 → 0.1.130-test.5-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/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,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 { stableColumns } = 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(stableColumns, 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/LoadingMainTable.js

@@ -7,7 +7,7 @@ import SheetViewTableHeader from './SheetViewTableHeader';
 import SheetViewTableLoading from './SheetViewTableLoading';
 function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, }) {
     const theme = useTheme();
-    return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
+    return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd, isLoading: isLoading }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
                             width: '100%',
                             minWidth: 'fit-content',
                         } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {

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

@@ -7,7 +7,7 @@ import SheetViewTableHeader from './SheetViewTableHeader';
 import SheetViewTableLoading from './SheetViewTableLoading';
 function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, tableLoading, createVirtualTableContainer, }) {
     const theme = useTheme();
-    return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd, isLoading: isLoading }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                             width: '100%',
                             minWidth: 'fit-content',
                         } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper", sx: {

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

@@ -8,6 +8,6 @@ import SheetViewTableHeader from './SheetViewTableHeader';
 function NoDataView({ tableLoading, tableError, tableEmpty, hasTimeoutError, orderedColumns, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, tableMode, tableBodyStyles, error, triggerDataRefetch, footerProps, }) {
     const theme = useTheme();
     const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
-    return (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: onColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick }) })), _jsx(TableNoData, { error: error || null, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch || (() => Promise.resolve()), footerProps: footerProps })] })) })));
+    return (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: onColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, isLoading: isLoading }) })), _jsx(TableNoData, { error: error || null, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch || (() => Promise.resolve()), footerProps: footerProps })] })) })));
 }
 export default memo(NoDataView);

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

@@ -11,7 +11,7 @@ function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList,
         return null;
     const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
     const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
-    return (_jsx(Wrapper, { children: _jsxs(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: position === 'start' ? 'pinnedStart' : 'pinnedEnd', hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    return (_jsx(Wrapper, { children: _jsxs(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: position === 'start' ? 'pinnedStart' : 'pinnedEnd', hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd, isLoading: isLoading })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                         width: '100%',
                         minWidth: 'fit-content',
                         overflowX: 'hidden',

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { SheetViewTableHeaderProps } from '../types';
 declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
-export default _default;
+declare const MemoizedSheetViewTableHeader: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
+export default MemoizedSheetViewTableHeader;

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

@@ -9,4 +9,7 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
                 return (_jsx(SheetViewTableHeaderCell, { column: column, colIndex: colIndex, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === columnKey, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick }, `${column.id}-${colIndex}`));
             }) })) })));
 }
-export default memo(SheetViewTableHeader);
+const MemoizedSheetViewTableHeader = memo(SheetViewTableHeader, (prevProps, nextProps) => {
+    return prevProps.isLoading === nextProps.isLoading;
+});
+export default MemoizedSheetViewTableHeader;

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,11 @@
+import type { IColumnProps } from '../../../../types/index.js';
+export declare const usePerformanceOptimizations: (columns: readonly IColumnProps[]) => {
+    stableColumns: IColumnProps<any>[];
+    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,38 @@
+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 ||
+                    col.filter !== prevCol.filter);
+            });
+        if (hasChanged) {
+            stableColumnsRef.current = [...columns];
+        }
+        return stableColumnsRef.current;
+    }, [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,
+        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/SheetViewVirtualTable/types.d.ts

@@ -22,6 +22,7 @@ export interface SheetViewTableHeaderProps {
     tablePosition?: TablePosition;
     hasPinnedStart?: boolean;
     hasPinnedEnd?: boolean;
+    isLoading?: boolean;
 }
 export interface VirtualTableContainerProps {
     columnsData: IColumnProps[];

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/components/index.d.ts

@@ -109,5 +109,3 @@ export { default as AmountStatusChip, type AmountStatusChipProps } from './Amoun
 export { default as AuthenticationTypeChip, type AuthenticationTypeChipProps } from './AuthenticationTypeChip';
 export * from './LazyImage';
 export { default as SearchListInput } from './SearchListInput';
-export { default as ErrorToast } from './ErrorToast';
-export { default as ToggleView, type ToggleViewsValues, ToggleViews } from './ToggleView';

package/build/components/index.js

@@ -109,5 +109,3 @@ export { default as AmountStatusChip } from './AmountStatusChip';
 export { default as AuthenticationTypeChip } from './AuthenticationTypeChip';
 export * from './LazyImage';
 export { default as SearchListInput } from './SearchListInput';
-export { default as ErrorToast } from './ErrorToast';
-export { default as ToggleView, ToggleViews } from './ToggleView';

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

package/build/components/ErrorToast/ErrorToast.d.ts

@@ -1,3 +0,0 @@
-import { ErrorToastProps } from './type';
-declare function ErrorToast({ message, onRetry, position, iconSrc }: ErrorToastProps): import("react/jsx-runtime").JSX.Element;
-export default ErrorToast;

package/build/components/ErrorToast/ErrorToast.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { reloadIcon } from '../../constants/index.js';
-import { ToastContainer, ToastIcon, ToastText } from './style';
-function ErrorToast({ message = 'Something went wrong', onRetry, position = 'bottom-center', iconSrc }) {
-    return (_jsxs(ToastContainer, Object.assign({ toastPosition: position }, { children: [_jsx(ToastText, { children: message }), _jsx(ToastIcon, { onClick: onRetry, src: iconSrc || reloadIcon, alt: "toast-icon" })] })));
-}
-export default ErrorToast;

package/build/components/ErrorToast/index.d.ts

@@ -1,2 +0,0 @@
-import ErrorToast from './ErrorToast';
-export default ErrorToast;

package/build/components/ErrorToast/index.js

@@ -1,2 +0,0 @@
-import ErrorToast from './ErrorToast';
-export default ErrorToast;

package/build/components/ErrorToast/style.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { ToastContainerProps } from './type';
-export declare const ToastContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToastContainerProps, {}, {}>;
-export declare const ToastIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const ToastText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "style" | "className" | "classes" | "children" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/ErrorToast/style.js

@@ -1,37 +0,0 @@
-import { Box, styled, Typography } from '@mui/material';
-export const ToastContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'toastPosition'
-})(({ theme, toastPosition }) => (Object.assign(Object.assign(Object.assign(Object.assign({ width: 160, position: 'absolute', bottom: 12, zIndex: 1000, display: 'flex', justifyContent: 'space-between', alignItems: 'center', backgroundColor: theme.palette.background.paper, height: 31, gap: theme.spacing(1), borderRadius: theme.shape.borderRadius, borderWidth: 1, padding: theme.spacing(1), border: `1px solid ${theme.palette.divider}`, boxShadow: '0px 0px 16px 0px #00000014', animation: 'slideIn 0.5s ease-out' }, (toastPosition === 'bottom-center' && {
-    left: '50%',
-    transform: 'translateX(-50%)'
-})), (toastPosition === 'bottom-right' && {
-    right: 12,
-    transform: 'none'
-})), (toastPosition === 'bottom-left' && {
-    left: 12,
-    transform: 'none'
-})), { '@keyframes slideIn': {
-        '0%': {
-            opacity: 0,
-            transform: toastPosition === 'bottom-center'
-                ? 'translate(-50%, 100%)'
-                : toastPosition === 'bottom-right'
-                    ? 'translateX(100%)'
-                    : 'translateX(-100%)'
-        },
-        '100%': {
-            opacity: 1,
-            transform: toastPosition === 'bottom-center' ? 'translate(-50%, 0)' : 'translateX(0)'
-        }
-    } })));
-export const ToastIcon = styled('img')({
-    cursor: 'pointer'
-});
-export const ToastText = styled(Typography)(({ theme }) => ({
-    fontSize: 11,
-    fontWeight: 500,
-    color: theme.palette.text.primary,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-}));

package/build/components/ErrorToast/type.d.ts

@@ -1,10 +0,0 @@
-export type ToastPosition = 'bottom-center' | 'bottom-right' | 'bottom-left';
-export interface ErrorToastProps {
-    message?: string;
-    onRetry?: () => void;
-    position?: ToastPosition;
-    iconSrc?: string;
-}
-export interface ToastContainerProps {
-    toastPosition: ToastPosition;
-}

package/build/components/ErrorToast/type.js

@@ -1 +0,0 @@
-export {};

package/build/components/ToggleView/ToggleView.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { ToggleViews, ToggleViewsValues } from './types';
-declare const DEFAULT_TOGGLE_VIEWS: {
-    icon: import("react/jsx-runtime").JSX.Element;
-    value: ToggleViews;
-}[];
-export interface ToggleViewProps {
-    onToggleClick: (view: ToggleViewsValues) => void;
-    currentView: ToggleViewsValues;
-    getOverrideViews?: (defaultViews: typeof DEFAULT_TOGGLE_VIEWS) => {
-        icon: React.ReactNode;
-        value: ToggleViewsValues;
-    }[];
-}
-declare const ToggleView: (props: ToggleViewProps) => import("react/jsx-runtime").JSX.Element | null;
-export default ToggleView;

package/build/components/ToggleView/ToggleView.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cardViewButtonIcon, listViewButtonIcon } from '../../constants/index.js';
-import { ActiveOverlay, ViewButton } from './style';
-import { ToggleViews } from './types';
-import { useMemo } from 'react';
-import ToggleWrapper from './ToggleWrapper';
-const DEFAULT_TOGGLE_VIEWS = [
-    {
-        icon: _jsx("img", { src: cardViewButtonIcon, alt: "card" }),
-        value: ToggleViews.CARDS,
-    },
-    {
-        icon: _jsx("img", { src: listViewButtonIcon, alt: ToggleViews.LIST }),
-        value: ToggleViews.LIST,
-    },
-];
-const ToggleView = (props) => {
-    const { currentView, onToggleClick, getOverrideViews } = props;
-    const views = useMemo(() => {
-        if (getOverrideViews)
-            return getOverrideViews(DEFAULT_TOGGLE_VIEWS);
-        return DEFAULT_TOGGLE_VIEWS;
-    }, [getOverrideViews]);
-    const viewIndex = useMemo(() => views.findIndex((view) => view.value === currentView), [views, currentView]);
-    if (!onToggleClick)
-        return null;
-    return (_jsxs(ToggleWrapper, { children: [views.map((view) => (_jsx(ViewButton, Object.assign({ onClick: () => onToggleClick(view.value), sx: {
-                    height: '11.6px',
-                    width: '11.6px',
-                }, isActive: currentView === view.value }, { children: view.icon }), view.value))), _jsx(ActiveOverlay, { activeIndex: viewIndex })] }));
-};
-export default ToggleView;

package/build/components/ToggleView/ToggleWrapper.d.ts

@@ -1,4 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { type BoxProps } from '@mui/material/Box';
-declare const ToggleWrapper: (props: PropsWithChildren<BoxProps>) => import("react/jsx-runtime").JSX.Element;
-export default ToggleWrapper;

package/build/components/ToggleView/ToggleWrapper.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { ToggleWrapperStyled } from './style';
-const ToggleWrapper = (props) => {
-    const viewTogglers = React.Children.count(props.children) - 1;
-    return _jsx(ToggleWrapperStyled, Object.assign({}, props, { sx: { width: viewTogglers * 30 + 2 } }));
-};
-export default ToggleWrapper;

package/build/components/ToggleView/index.d.ts

@@ -1,3 +0,0 @@
-import ToggleView from './ToggleView';
-export { type ToggleViewsValues, ToggleViews } from './types';
-export default ToggleView;

package/build/components/ToggleView/index.js

@@ -1,3 +0,0 @@
-import ToggleView from './ToggleView';
-export { ToggleViews } from './types';
-export default ToggleView;

package/build/components/ToggleView/style.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-export declare const ToggleWrapperStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const ViewButton: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    isActive: boolean;
-}, {}, {}>;
-export declare const ActiveOverlay: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    activeIndex: number;
-}, {}, {}>;

package/build/components/ToggleView/style.js

@@ -1,31 +0,0 @@
-import { Box, styled } from '@mui/material';
-export const ToggleWrapperStyled = styled(Box)(({ theme }) => ({
-    height: '32px',
-    borderRadius: '4px',
-    backgroundColor: theme.palette.action.hover,
-    padding: '2px',
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
-    cursor: 'pointer'
-}));
-export const ViewButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ isActive }) => ({
-    flex: 1,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-    zIndex: 2,
-    opacity: isActive ? 1 : 0.5
-}));
-export const ActiveOverlay = styled(Box, { shouldForwardProp: (props) => props !== 'activeIndex' })(({ theme, activeIndex }) => ({
-    position: 'absolute',
-    top: 2,
-    left: activeIndex * 30 + 2,
-    transition: 'all 0.25s ease-in-out',
-    width: '28px',
-    height: '28px',
-    backgroundColor: theme.palette.common.white,
-    borderRadius: '2px',
-    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)'
-}));

package/build/components/ToggleView/types.d.ts

@@ -1,6 +0,0 @@
-export declare enum ToggleViews {
-    LIST = "LIST",
-    CARDS = "CARDS",
-    MAP = "MAP"
-}
-export type ToggleViewsValues = `${ToggleViews}` | (string & {});

package/build/components/ToggleView/types.js

@@ -1,6 +0,0 @@
-export var ToggleViews;
-(function (ToggleViews) {
-    ToggleViews["LIST"] = "LIST";
-    ToggleViews["CARDS"] = "CARDS";
-    ToggleViews["MAP"] = "MAP";
-})(ToggleViews || (ToggleViews = {}));