@tap-payments/os-micro-frontend-shared 0.1.131 → 0.1.133-test.1

package/LICENSE

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

package/README.md

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

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

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import { SheetViewTableContainer } from '../components/style';
 import { SheetViewVirtualTableWrapper } from './style';
-import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } 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({
@@ -37,31 +38,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
-    const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
-        const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
-        const handleScrollCallback = (scrollProps) => {
-            const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
-            handleScroll(scrollProps, source);
-        };
-        return (_jsx(VirtualTable, { columnsData: columnsData, itemCount: itemsCount, lastItemIndex: lastItemIndex, areAllRowsLoaded: areAllRowsLoaded, loadMoreItems: loadMoreItems, threshold: threshold, getItemSize: getItemSize, getItemData: getItemDataForContainer, isPinned: isPinned, fixedWidth: fixedWidth, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, onScroll: handleScrollCallback, setBackdropVisibility: setShowBackdrop, listRef: listRef, overscanCount: overscanCount }));
-    }, [
-        itemsCount,
-        lastItemIndex,
-        areAllRowsLoaded,
-        loadMoreItems,
-        threshold,
-        getItemSize,
-        getItemDataForContainer,
-        scrollToIndex,
-        areTotalRowsNotFillingHeight,
-        clearBackdropVisibilityTimeout,
-        handleScroll,
-        setShowBackdrop,
-        pinnedStartVirtualListRef,
-        pinnedEndVirtualListRef,
-        scrollableVirtualListRef,
-    ]);
-    const baseCommonProps = {
+    const baseCommonProps = useMemo(() => ({
         showHeader,
         columnsSorting,
         onColumnSort,
@@ -81,9 +58,64 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         tableMode,
         showNoDataView,
         tableBodyStyles,
-    };
-    const commonPropsWithTableStates = Object.assign(Object.assign({}, baseCommonProps), { hasTimeoutError,
-        tableLoading });
-    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { children: showNoDataView ? (tableLoading ? (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(LoadingMainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) : (_jsx(NoDataView, Object.assign({ tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumns, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }, baseCommonProps)))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(MainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+    }), [
+        showHeader,
+        columnsSorting,
+        onColumnSort,
+        headerProps,
+        showBackDrop,
+        handleColumnPin,
+        isPinnable,
+        lastColumnId,
+        selectedColumn,
+        handleColumnClick,
+        tableTitle,
+        areAllRowsLoaded,
+        isFetchingNextPage,
+        scrollToIndex,
+        isLoading,
+        isError,
+        tableMode,
+        showNoDataView,
+        tableBodyStyles,
+    ]);
+    const commonPropsWithTableStates = useMemo(() => (Object.assign(Object.assign({}, baseCommonProps), { hasTimeoutError,
+        tableLoading })), [baseCommonProps, hasTimeoutError, tableLoading]);
+    const virtualTableBaseProps = useMemo(() => ({
+        itemCount: itemsCount,
+        lastItemIndex,
+        areAllRowsLoaded,
+        loadMoreItems,
+        threshold,
+        getItemSize,
+        getItemData: getItemDataForContainer,
+        scrollToIndex,
+        areTotalRowsNotFillingHeight,
+        clearBackdropVisibilityTimeout,
+        setBackdropVisibility: setShowBackdrop,
+        overscanCount,
+    }), [
+        itemsCount,
+        lastItemIndex,
+        areAllRowsLoaded,
+        loadMoreItems,
+        threshold,
+        getItemSize,
+        getItemDataForContainer,
+        scrollToIndex,
+        areTotalRowsNotFillingHeight,
+        clearBackdropVisibilityTimeout,
+        setShowBackdrop,
+        overscanCount,
+    ]);
+    const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
+        const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
+        const handleScrollCallback = (scrollProps) => {
+            const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
+            handleScroll(scrollProps, source);
+        };
+        return (_jsx(VirtualTable, Object.assign({}, virtualTableBaseProps, { columnsData: columnsData, isPinned: isPinned, fixedWidth: fixedWidth, onScroll: handleScrollCallback, listRef: listRef })));
+    }, [virtualTableBaseProps, handleScroll, pinnedStartVirtualListRef, pinnedEndVirtualListRef, scrollableVirtualListRef]);
+    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { children: showNoDataView ? (tableLoading ? (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates })), _jsx(LoadingMainTable, { hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, commonProps: commonPropsWithTableStates }), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates }))] })) : (_jsx(NoDataView, { tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumns, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps, commonProps: baseCommonProps }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates })), _jsx(MainTable, { hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates }), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates }))] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
 }
 export default memo(SheetViewVirtualTable);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { LoadingMainTableProps } from '../types';
-declare 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, }: LoadingMainTableProps): import("react/jsx-runtime").JSX.Element;
+declare function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, pinnedStartColumns, pinnedEndColumns, commonProps, }: LoadingMainTableProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof LoadingMainTable>;
 export default _default;

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

@@ -5,8 +5,9 @@ import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style'
 import { MainTableWrapper, UnpinnedTableHeaderWrapper } from '../style';
 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, }) {
+function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, pinnedStartColumns, pinnedEndColumns, commonProps, }) {
     const theme = useTheme();
+    const { showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, } = commonProps;
     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: {
                             width: '100%',
                             minWidth: 'fit-content',

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { MainTableProps } from '../types';
-declare 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, }: MainTableProps): import("react/jsx-runtime").JSX.Element;
+declare function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, pinnedStartColumns, pinnedEndColumns, createVirtualTableContainer, commonProps, }: MainTableProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof MainTable>;
 export default _default;

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

@@ -5,8 +5,9 @@ import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style'
 import { MainTableWrapper, UnpinnedTableHeaderWrapper } from '../style';
 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, }) {
+function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, pinnedStartColumns, pinnedEndColumns, createVirtualTableContainer, commonProps, }) {
     const theme = useTheme();
+    const { showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, tableLoading, } = commonProps;
     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: {
                             width: '100%',
                             minWidth: 'fit-content',

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { NoDataViewProps } from '../types';
-declare 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, }: NoDataViewProps): import("react/jsx-runtime").JSX.Element;
+declare function NoDataView({ tableLoading, tableError, tableEmpty, hasTimeoutError, orderedColumns, error, triggerDataRefetch, footerProps, commonProps, }: NoDataViewProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof NoDataView>;
 export default _default;

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

@@ -5,8 +5,9 @@ import { StyledTableBox, TableWrapper } from '../../components/style';
 import { UnpinnedTableHeaderWrapper } from '../style';
 import TableNoData from '../../components/TableNoData';
 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, }) {
+function NoDataView({ tableLoading, tableError, tableEmpty, hasTimeoutError, orderedColumns, error, triggerDataRefetch, footerProps, commonProps, }) {
     const theme = useTheme();
+    const { showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, tableMode, tableBodyStyles, } = commonProps;
     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 })] })) })));
 }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { PinnedColumnProps } from '../types';
-declare function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, hasPinnedStart, hasPinnedEnd, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableLoading, createVirtualTableContainer, }: PinnedColumnProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, hasPinnedStart, hasPinnedEnd, createVirtualTableContainer, commonProps, }: PinnedColumnProps): import("react/jsx-runtime").JSX.Element | null;
 declare const _default: import("react").MemoExoticComponent<typeof PinnedColumn>;
 export default _default;

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

@@ -5,8 +5,9 @@ import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style'
 import { PinnedStartColumnWrapper, PinnedEndColumnWrapper } from '../style';
 import SheetViewTableHeader from './SheetViewTableHeader';
 import SheetViewTableLoading from './SheetViewTableLoading';
-function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, hasPinnedStart, hasPinnedEnd, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableLoading, createVirtualTableContainer, }) {
+function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, hasPinnedStart, hasPinnedEnd, createVirtualTableContainer, commonProps, }) {
     const theme = useTheme();
+    const { showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableLoading, } = commonProps;
     if (columnsData.length === 0)
         return null;
     const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;

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

@@ -8,26 +8,29 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import InfiniteLoader from 'react-window-infinite-loader';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { SHEET_VIEW_TABLE_LIST_OVER_SCAN } from '../../../../constants/index.js';
 import ListItemWrapper from '../../components/virtualScroll/ListItemWrapper';
 import { StyledVirtualList } from '../../components/style';
 function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded, loadMoreItems, threshold, getItemSize, getItemData, isPinned, fixedWidth, scrollToIndex, areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout, onScroll, setBackdropVisibility, listRef, overscanCount = SHEET_VIEW_TABLE_LIST_OVER_SCAN, }) {
-    const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+    const handleOnLoadMoreItems = useCallback(() => __awaiter(this, void 0, void 0, function* () {
         if (areAllRowsLoaded)
             return;
         yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
-    });
-    return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref }, { children: ({ height, width }) => {
-                const itemSize = (index) => getItemSize(index, height);
-                const itemData = getItemData(columnsData, isPinned, height);
-                return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: overscanCount, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
-                        overflowX: isPinned ? 'hidden' : 'auto',
-                        paddingBottom: isPinned ? '25px' : '13px',
-                        backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
-                    } }, { children: ListItemWrapper })));
-            } }))) })));
+    }), [areAllRowsLoaded, loadMoreItems]);
+    const isItemLoaded = useCallback((index) => index !== lastItemIndex, [lastItemIndex]);
+    const listStyle = useMemo(() => ({
+        overflowX: isPinned ? 'hidden' : 'auto',
+        paddingBottom: isPinned ? '25px' : '13px',
+        backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
+    }), [isPinned]);
+    return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: isItemLoaded, itemCount: itemCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref }, { children: ({ height, width }) => (_jsx(MemoizedVirtualList, { listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, getItemSize: getItemSize, getItemData: getItemData, columnsData: columnsData, isPinned: isPinned, onItemsRendered: onItemsRendered, overscanCount: overscanCount, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, listStyle: listStyle })) }))) })));
 }
+const MemoizedVirtualList = memo(function MemoizedVirtualList({ listRef, height, width, itemCount, getItemSize, getItemData, columnsData, isPinned, onItemsRendered, overscanCount, setBackdropVisibility, scrollToIndex, areTotalRowsNotFillingHeight, onScroll, clearBackdropVisibilityTimeout, listStyle, }) {
+    const itemSize = useCallback((index) => getItemSize(index, height), [getItemSize, height]);
+    const itemData = useMemo(() => getItemData(columnsData, isPinned, height), [getItemData, columnsData, isPinned, height]);
+    return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: overscanCount, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: listStyle }, { children: ListItemWrapper })));
+});
 export default memo(VirtualTable);

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/usePinnedColumns.js

@@ -1,21 +1,41 @@
 import { useState, useCallback, useMemo } from 'react';
-export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
-    const [pinnedStartColumns, setPinnedStartColumns] = useState(() => {
-        const userPinned = isPinnable ? columns.filter((c) => c.pinned === 'start').map((c) => c.id) : [];
-        const defaultPinned = columns.filter((c) => c.isDefaultPinned).map((c) => c.id);
-        return Array.from(new Set([...defaultPinned, ...userPinned]));
-    });
-    const [pinnedEndColumns, setPinnedEndColumns] = useState(() => {
-        if (!isPinnable)
-            return [];
-        const userPinned = columns.filter((c) => c.pinned === 'end').map((c) => c.id);
-        const visibleColumns = columns.filter((column) => !column.hidden);
-        const lastColumn = visibleColumns[visibleColumns.length - 1];
-        if (userPinned.length === 0 && lastColumn && !lastColumn.pinned && !lastColumn.isDefaultPinned) {
-            return [lastColumn.id];
+const getInitialPinnedStartColumns = (columns, isPinnable) => {
+    if (!isPinnable && columns.length === 0)
+        return [];
+    const defaultPinned = [];
+    const userPinned = [];
+    for (const column of columns) {
+        const columnId = column.id;
+        if (column.isDefaultPinned) {
+            defaultPinned.push(columnId);
+        }
+        else if (isPinnable && column.pinned === 'start') {
+            userPinned.push(columnId);
+        }
+    }
+    return Array.from(new Set([...defaultPinned, ...userPinned]));
+};
+const getInitialPinnedEndColumns = (columns, isPinnable) => {
+    if (!isPinnable)
+        return [];
+    const userPinned = [];
+    let lastVisibleColumn = null;
+    for (const column of columns) {
+        if (column.pinned === 'end') {
+            userPinned.push(column.id);
         }
-        return userPinned;
-    });
+        if (!column.hidden) {
+            lastVisibleColumn = column;
+        }
+    }
+    if (userPinned.length === 0 && lastVisibleColumn && !lastVisibleColumn.pinned && !lastVisibleColumn.isDefaultPinned) {
+        return [lastVisibleColumn.id];
+    }
+    return userPinned;
+};
+export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
+    const [pinnedStartColumns, setPinnedStartColumns] = useState(() => getInitialPinnedStartColumns(columns, isPinnable));
+    const [pinnedEndColumns, setPinnedEndColumns] = useState(() => getInitialPinnedEndColumns(columns, isPinnable));
     const handleColumnPin = useCallback((columnId, position = 'start') => {
         if (!isPinnable)
             return;
@@ -38,33 +58,51 @@ export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
         const isPinned = newPinnedStart.includes(columnId) || newPinnedEnd.includes(columnId);
         onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, isPinned);
     }, [pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable]);
-    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
-    const { pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData } = useMemo(() => {
-        const start = shownColumns.filter((column) => pinnedStartColumns.includes(column.id));
-        const end = shownColumns.filter((column) => pinnedEndColumns.includes(column.id));
-        const unpinned = shownColumns.filter((column) => !pinnedStartColumns.includes(column.id) && !pinnedEndColumns.includes(column.id));
-        const sortedStart = start.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });
-        const sortedEnd = end.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });
-        const sortedUnpinned = unpinned.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });
+    const columnData = useMemo(() => {
+        const pinnedStartSet = new Set(pinnedStartColumns);
+        const pinnedEndSet = new Set(pinnedEndColumns);
+        const visibleColumns = [];
+        const startColumns = [];
+        const endColumns = [];
+        const unpinnedColumns = [];
+        for (const column of columns) {
+            if (column.hidden)
+                continue;
+            visibleColumns.push(column);
+            const columnId = column.id;
+            if (pinnedStartSet.has(columnId)) {
+                startColumns.push(column);
+            }
+            else if (pinnedEndSet.has(columnId)) {
+                endColumns.push(column);
+            }
+            else {
+                unpinnedColumns.push(column);
+            }
+        }
+        const sortByOrder = (a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); };
+        const sortedStart = startColumns.sort(sortByOrder);
+        const sortedEnd = endColumns.sort(sortByOrder);
+        const sortedUnpinned = unpinnedColumns.sort(sortByOrder);
+        const orderedColumns = [...sortedStart, ...sortedUnpinned, ...sortedEnd];
+        const lastColumnId = orderedColumns.length > 0 ? orderedColumns[orderedColumns.length - 1].id : null;
         return {
+            visibleColumns,
             pinnedStartColumnsData: sortedStart,
             pinnedEndColumnsData: sortedEnd,
             unpinnedColumnsData: sortedUnpinned,
+            orderedColumns,
+            lastColumnId,
         };
-    }, [shownColumns, pinnedStartColumns, pinnedEndColumns]);
-    const orderedColumns = useMemo(() => [...pinnedStartColumnsData, ...unpinnedColumnsData, ...pinnedEndColumnsData], [pinnedStartColumnsData, unpinnedColumnsData, pinnedEndColumnsData]);
-    const lastColumnId = useMemo(() => {
-        const lastCol = orderedColumns[orderedColumns.length - 1];
-        return lastCol ? lastCol.id : null;
-    }, [orderedColumns]);
+    }, [columns, pinnedStartColumns, pinnedEndColumns]);
     return {
         pinnedStartColumns,
         pinnedEndColumns,
         handleColumnPin,
-        pinnedStartColumnsData,
-        pinnedEndColumnsData,
-        unpinnedColumnsData,
-        orderedColumns,
-        lastColumnId,
+        pinnedStartColumnsData: columnData.pinnedStartColumnsData,
+        pinnedEndColumnsData: columnData.pinnedEndColumnsData,
+        unpinnedColumnsData: columnData.unpinnedColumnsData,
+        orderedColumns: columnData.orderedColumns,
+        lastColumnId: columnData.lastColumnId,
     };
 };

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,54 +1,58 @@
 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) => ({
-    columns,
-    isLoading,
+const createCoreItemData = memoize((columns, rows, rowProps, totalCount, lastItemIndex, isError, areAllRowsLoaded, isPinned, containerHeight, rowHeight) => ({
+    columns: columns || [],
     rows,
     rowProps,
-    scrollToIndex,
     totalCount,
     lastItemIndex,
     isError,
     areAllRowsLoaded,
-    limit: totalCount,
-    newLoadedRowsEndIndex: lastItemIndex,
-    isSheetView: true,
     isPinned,
+    containerHeight,
+    rowHeight,
+    selectedCell: null,
+    selectedColumn: null,
+    selectedRow: null,
+    selectedChip: null,
+    onCellClick: () => { },
+    onChipClick: () => { },
+    scrollToIndex: undefined,
+    isLoading: false,
+    limit: 0,
+    newLoadedRowsEndIndex: 0,
+    isSheetView: true,
+}));
+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 rowsLength = rows.length;
+    const minimumLastRowHeight = rowHeight * 2;
     const getItemSize = useCallback((index, height) => {
-        const isLastRow = areAllRowsLoaded && index === rows.length;
-        if (isLastRow) {
-            const usedHeight = rows.length * rowHeight;
+        if (areAllRowsLoaded && index === rowsLength) {
+            const usedHeight = rowsLength * rowHeight;
             const remainingHeight = height - usedHeight;
-            const minimumLastRowHeight = rowHeight * 2;
             return Math.max(remainingHeight, minimumLastRowHeight);
         }
         return rowHeight;
-    }, [areAllRowsLoaded, rows.length, rowHeight]);
-    const commonItemDataParams = useMemo(() => {
+    }, [areAllRowsLoaded, rowsLength, rowHeight, minimumLastRowHeight]);
+    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[];
@@ -51,7 +52,12 @@ export interface CommonTableProps {
     showNoDataView: boolean;
     tableBodyStyles?: CSSProperties;
 }
-export interface PinnedColumnProps extends CommonTableProps {
+export interface BaseCommonProps extends Omit<CommonTableProps, 'hasTimeoutError' | 'tableLoading'> {
+}
+export interface CommonPropsWithTableStates extends CommonTableProps {
+    tableLoading: boolean;
+}
+export interface PinnedColumnProps {
     position: 'start' | 'end';
     columnsData: IColumnProps[];
     columnsWidth: number;
@@ -59,18 +65,18 @@ export interface PinnedColumnProps extends CommonTableProps {
     hasPinnedStart: boolean;
     hasPinnedEnd: boolean;
     createVirtualTableContainer: (columnsData: IColumnProps[], containerKey: 'pinnedStart' | 'pinnedEnd' | 'scrollable', isPinned?: boolean, fixedWidth?: number) => JSX.Element;
-    tableLoading: boolean;
+    commonProps: CommonPropsWithTableStates;
 }
-export interface MainTableProps extends CommonTableProps {
+export interface MainTableProps {
     hasPinnedStart: boolean;
     hasPinnedEnd: boolean;
     unpinnedColumnsData: IColumnProps[];
     pinnedStartColumns: string[];
     pinnedEndColumns: string[];
     createVirtualTableContainer: (columnsData: IColumnProps[], containerKey: 'pinnedStart' | 'pinnedEnd' | 'scrollable', isPinned?: boolean, fixedWidth?: number) => JSX.Element;
-    tableLoading: boolean;
+    commonProps: CommonPropsWithTableStates;
 }
-export interface NoDataViewProps extends CommonTableProps {
+export interface NoDataViewProps {
     tableLoading: boolean;
     tableError: boolean;
     tableEmpty: boolean;
@@ -79,12 +85,13 @@ export interface NoDataViewProps extends CommonTableProps {
     error?: Error | null;
     triggerDataRefetch?: () => Promise<unknown>;
     footerProps?: TableFooterProps;
+    commonProps: BaseCommonProps;
 }
-export interface LoadingMainTableProps extends CommonTableProps {
+export interface LoadingMainTableProps {
     hasPinnedStart: boolean;
     hasPinnedEnd: boolean;
     unpinnedColumnsData: IColumnProps[];
     pinnedStartColumns: string[];
     pinnedEndColumns: string[];
-    tableLoading: boolean;
+    commonProps: CommonPropsWithTableStates;
 }

package/build/components/VirtualTables/components/ColumnFilter/ColumnFilter.js

@@ -25,7 +25,7 @@ function ColumnFilter(filter) {
         if (typeof value === 'string' || Array.isArray(value))
             return value.length > 0;
         return Boolean(value);
-    }) || listFilterData.length > 0, [filterData, listFilterData]);
+    }) || listFilterData.length > 0, [filterData, listFilterData, filter]);
     const open = Boolean(anchorEl);
     const filterApiKeys = useMemo(() => {
         var _a;

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

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

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

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

package/build/constants/table/cell/terminalsTableCellWidth.d.ts

@@ -20,9 +20,9 @@ export declare const terminalsTableCellWidth: {
         readonly sheet: "80px";
     };
     readonly platform: {
-        readonly default: "100px";
-        readonly text: "100px";
-        readonly sheet: "100px";
+        readonly default: "80px";
+        readonly text: "80px";
+        readonly sheet: "80px";
     };
     readonly branding: {
         readonly default: "80px";

package/build/constants/table/cell/terminalsTableCellWidth.js

@@ -20,9 +20,9 @@ export const terminalsTableCellWidth = {
         sheet: '80px',
     },
     platform: {
-        default: '100px',
-        text: '100px',
-        sheet: '100px',
+        default: '80px',
+        text: '80px',
+        sheet: '80px',
     },
     branding: {
         default: '80px',

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/types/entity.d.ts

@@ -1,9 +1,5 @@
 import { Merchant } from './merchant';
 import { TextAndLang } from './user';
-export interface Branch {
-    id: string;
-    name: TextAndLang[];
-}
 export interface Entity {
     id: string;
     legal_name: TextAndLang[];
@@ -11,7 +7,6 @@ export interface Entity {
     created: number;
     country?: string;
     merchants?: Merchant[];
-    branches?: Branch;
 }
 type DataStatus = 'editable' | 'noneditable';
 export interface EntityDetails {

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