@tap-payments/os-micro-frontend-shared 0.1.1-test.52 → 0.1.1-test.54

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

@@ -10,185 +10,78 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, memo, useState, useCallback } from 'react';
 import { useTheme } from '@mui/material/styles';
-import memoize from 'memoize-one';
-import InfiniteLoader from 'react-window-infinite-loader';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../../constants/index.js';
+import { TABLE_THRESHOLD } from '../../../constants/index.js';
 import { useDelayToSetValue } from '../../../hooks/index.js';
-import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
-import TableNoData from '../components/TableNoData';
-import { SheetViewTableNoData } from './components';
-import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
-import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from '../components/style';
-import { SheetViewVirtualTableWrapper, PinnedStartColumnWrapper, PinnedEndColumnWrapper, MainTableWrapper, UnpinnedTableHeaderWrapper } from './style';
+import { StyledBox, StyledTableBox, TableContainer, TableWrapper } from '../components/style';
+import { SheetViewVirtualTableWrapper, MainTableWrapper, UnpinnedTableHeaderWrapper } from './style';
 import SheetViewTableHeader from './components/SheetViewTableHeader';
 import { usePinnedColumns } from './hooks/usePinnedColumns';
 import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
-const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
-    columns,
-    isLoading,
-    rows,
-    rowProps,
-    scrollToIndex,
-    totalCount,
-    lastItemIndex,
-    isError,
-    areAllRowsLoaded,
-    limit: totalCount,
-    newLoadedRowsEndIndex: lastItemIndex,
-    isSheetView: true,
-    isPinned,
-    selectedCell,
-    selectedColumn,
-    onCellClick,
-    containerHeight,
-    rowHeight,
-}));
+import VirtualListContainer from './components/VirtualListContainer';
+import PinnedColumnSection from './components/PinnedColumnSection';
+import LoadingState from './components/LoadingState';
+import NoDataState from './components/NoDataState';
+import { useSelection } from './hooks/useSelection';
+import { useTableDisplayState } from './hooks/useTableDisplayState';
+import { getColumnsTotalWidth } from './utils';
 function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, }) {
+    const [showBackDrop, setShowBackdrop] = useState(false);
     const theme = useTheme();
-    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
+    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, isColumnPinned, } = usePinnedColumns(columns, isPinnable, onColumnPin);
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
-    const [selectedCell, setSelectedCell] = useState(null);
-    const [selectedColumn, setSelectedColumn] = useState(null);
-    const handleCellClick = useCallback((rowIndex, columnId, event) => {
-        event.stopPropagation();
-        const cellKey = `${rowIndex}-${columnId}`;
-        setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
-        setSelectedColumn(null);
-    }, []);
-    const handleColumnClick = useCallback((columnId, event) => {
-        event.stopPropagation();
-        setSelectedColumn((prev) => (prev === columnId ? null : columnId));
-        setSelectedCell(null);
-    }, []);
-    const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
-    };
+    const { selectedCell, selectedColumn, handleCellClick, handleColumnClick } = useSelection();
     const isDelayedFetchingNextPage = useDelayToSetValue({
         value: isFetchingNextPage,
         delay: 1000,
     });
-    const [showBackDrop, setShowBackdrop] = useState(false);
-    const isError = hasError(error);
-    const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
-    const tableError = !isLoading && rows.length === 0 && isError && !isNotFoundError(error);
-    const tableEmpty = !isLoading && rows.length === 0;
-    const hasTimeoutError = isTimeoutError(error);
-    const lastItemIndex = rows.length - 1;
-    const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
-    const itemsCount = isDelayedFetchingNextPage || areAllRowsLoaded ? rows.length + 1 : rows.length;
+    const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, areTotalRowsNotFillingHeight, showNoDataView } = useTableDisplayState(rows.length, isLoading, error);
+    const pinnedAllColumns = useMemo(() => [...pinnedStartColumns, ...pinnedEndColumns], [pinnedStartColumns, pinnedEndColumns]);
+    const onScrollByKey = useMemo(() => ({
+        pinnedStart: (sp) => handleScroll(sp, 'start'),
+        pinnedEnd: (sp) => handleScroll(sp, 'end'),
+        scrollable: (sp) => handleScroll(sp, 'scrollable'),
+    }), [handleScroll]);
+    const pinnedStartColumnsWidth = useMemo(() => getColumnsTotalWidth(pinnedStartColumnsData), [pinnedStartColumnsData]);
+    const pinnedEndColumnsWidth = useMemo(() => getColumnsTotalWidth(pinnedEndColumnsData), [pinnedEndColumnsData]);
+    const onPointerDown = (e) => {
+        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+    };
+    const onLoadMoreItems = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (areAllRowsLoaded)
+            return;
+        yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+    }), [areAllRowsLoaded, loadMoreItems]);
     const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
-        const tableItemsCount = itemsCount;
-        const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
-            if (areAllRowsLoaded)
-                return;
-            yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
-        });
+        var _a;
         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(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => {
-                    var _a;
-                    const getItemSize = (index) => {
-                        const isLastRow = areAllRowsLoaded && index === rows.length;
-                        if (isLastRow) {
-                            const usedHeight = rows.length * rowHeight;
-                            const remainingHeight = height - usedHeight;
-                            const minimumLastRowHeight = rowHeight * 2;
-                            return Math.max(remainingHeight, minimumLastRowHeight);
-                        }
-                        return rowHeight;
-                    };
-                    const commonItemDataParams = [
-                        isDelayedFetchingNextPage,
-                        rows,
-                        rowProps,
-                        scrollToIndex,
-                        lastItemIndex,
-                        (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0,
-                        isError,
-                        areAllRowsLoaded,
-                    ];
-                    const commonItemDataSuffix = [selectedCell, selectedColumn, handleCellClick, height, rowHeight];
-                    const getItemDataForContainer = (columnsData, isPinnedColumn) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix);
-                    const currentItemData = containerKey === 'pinnedStart'
-                        ? getItemDataForContainer(pinnedStartColumnsData, true)
-                        : containerKey === 'pinnedEnd'
-                            ? getItemDataForContainer(pinnedEndColumnsData, true)
-                            : getItemDataForContainer(unpinnedColumnsData, false);
-                    return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: getItemSize, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
-                            overflowX: isPinned ? 'hidden' : 'auto',
-                            paddingBottom: isPinned ? '25px' : '13px',
-                            backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
-                        } }, { children: ListItemWrapper })));
-                } })) })));
+        return (_jsx(VirtualListContainer, { columns: columnsToRender, isPinned: isPinned, fixedWidth: fixedWidth, listRef: listRef, rows: rows, rowProps: rowProps, totalCount: (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, rowHeight: rowHeight, isError: isError, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, areAllRowsLoaded: areAllRowsLoaded, isFetchingNextPage: isDelayedFetchingNextPage, isLoading: isLoading, scrollToIndex: scrollToIndex, selectedCell: selectedCell, selectedColumn: selectedColumn, onCellClick: handleCellClick, onScroll: onScrollByKey[containerKey], loadMoreItems: onLoadMoreItems, threshold: threshold, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, useLoader: true, setBackdropVisibility: setShowBackdrop }));
     }, [
-        itemsCount,
-        areAllRowsLoaded,
-        loadMoreItems,
-        threshold,
-        rowHeight,
         rows,
-        pinnedStartColumnsData,
-        pinnedEndColumnsData,
-        unpinnedColumnsData,
-        isDelayedFetchingNextPage,
         rowProps,
-        scrollToIndex,
-        lastItemIndex,
         footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount,
+        rowHeight,
         isError,
         areTotalRowsNotFillingHeight,
+        areAllRowsLoaded,
+        isDelayedFetchingNextPage,
+        isLoading,
+        scrollToIndex,
         selectedCell,
         selectedColumn,
         handleCellClick,
-        handleScroll,
+        onScrollByKey,
+        onLoadMoreItems,
+        threshold,
         clearBackdropVisibilityTimeout,
         pinnedEndVirtualListRef,
         pinnedStartVirtualListRef,
         scrollableVirtualListRef,
-        theme.palette.background.default,
     ]);
-    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
-    const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
-        const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
-        return acc + width;
-    }, 0.2), [pinnedStartColumnsData]);
-    const pinnedEndColumnsWidth = useMemo(() => pinnedEndColumnsData.reduce((acc, col) => {
-        const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
-        return acc + width;
-    }, 0.2), [pinnedEndColumnsData]);
-    const renderPinnedColumn = (position, columnsData, columnsWidth, pinnedColumnsList) => {
-        const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
-        const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
-        if (columnsData.length === 0)
-            return null;
-        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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
-                            width: '100%',
-                            minWidth: 'fit-content',
-                            overflowX: 'hidden',
-                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) }));
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(TableContainer, { children: showNoDataView ? (tableLoading ? (_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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true, sx: {
-                        marginLeft: '28px',
-                        maxHeight: 'calc(100vh - 300px)',
-                        overflow: 'auto',
-                    } }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: 'auto' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
-                                    width: '100%',
-                                    minWidth: 'fit-content',
-                                    height: 'auto',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
-                                        height: 'auto',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                    } }, { children: _jsx(SheetViewTableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))] })) }))) : (_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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ isSheetView: true, "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: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })] })) })))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { 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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, 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: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    const renderPinnedColumn = (position, columnsData, columnsWidth, pinnedColumnsList) => (_jsx(PinnedColumnSection, { position: position, columnsData: columnsData, columnsWidth: columnsWidth, pinnedColumnsList: pinnedColumnsList, showHeader: showHeader, columnsSorting: columnsSorting, onColumnSort: onColumnSort, headerProps: headerProps, showBackDrop: showBackDrop, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, tableTitle: tableTitle, areAllRowsLoaded: areAllRowsLoaded, isFetchingNextPage: isFetchingNextPage, scrollToIndex: scrollToIndex, isLoading: isLoading, isError: isError, hasTimeoutError: hasTimeoutError, showBackgroundColor: showBackgroundColor, tableMode: tableMode, showNoDataView: showNoDataView, renderContainer: createVirtualTableContainer }));
+    return (_jsxs(_Fragment, { children: [_jsx(TableContainer, { children: showNoDataView ? (tableLoading ? (_jsx(LoadingState, { showHeader: showHeader, orderedColumns: orderedColumns, headerProps: headerProps, columnsSorting: columnsSorting, onColumnSort: onColumnSort, showBackDrop: showBackDrop, onColumnPin: handleColumnPin, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, tableBodyStyles: tableBodyStyles, error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps, tableTitle: tableTitle, areAllRowsLoaded: areAllRowsLoaded, isFetchingNextPage: isFetchingNextPage, scrollToIndex: scrollToIndex, isLoading: isLoading, isError: isError, showBackgroundColor: showBackgroundColor, tableMode: tableMode, showNoDataView: showNoDataView })) : (_jsx(NoDataState, { showHeader: showHeader, orderedColumns: orderedColumns, headerProps: headerProps, columnsSorting: columnsSorting, onColumnSort: onColumnSort, showBackDrop: showBackDrop, onColumnPin: handleColumnPin, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, tableBodyStyles: tableBodyStyles, error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps, tableTitle: tableTitle, areAllRowsLoaded: areAllRowsLoaded, isFetchingNextPage: isFetchingNextPage, scrollToIndex: scrollToIndex, isLoading: isLoading, isError: isError, showBackgroundColor: showBackgroundColor, tableMode: tableMode, showNoDataView: showNoDataView }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { 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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, 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: pinnedAllColumns, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, isColumnPinned: isColumnPinned }) })), _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" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+                                            } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, pinnedAllColumns)] })) }), _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/LoadingState.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import type { IColumnProps, IVirtualTable } from '../../../../types/index.js';
+export interface LoadingStateProps {
+    showHeader?: boolean;
+    orderedColumns: IColumnProps[];
+    headerProps?: any;
+    columnsSorting?: IVirtualTable['columnsSorting'];
+    onColumnSort?: IVirtualTable['onColumnSort'];
+    showBackDrop: boolean;
+    onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
+    lastColumnId?: string | null;
+    selectedColumn?: string | null;
+    onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
+    tableBodyStyles?: any;
+    error?: unknown;
+    tableEmpty: boolean;
+    isTimeoutError: boolean;
+    tableError: boolean;
+    tableLoading: boolean;
+    triggerDataRefetch?: () => Promise<unknown>;
+    footerProps?: IVirtualTable['footerProps'];
+    tableTitle?: string;
+    areAllRowsLoaded: boolean;
+    isFetchingNextPage?: boolean;
+    scrollToIndex?: number;
+    isLoading?: boolean;
+    isError: boolean;
+    showBackgroundColor?: boolean;
+    tableMode?: string;
+    showNoDataView: boolean;
+}
+declare function LoadingState({ showHeader, orderedColumns, headerProps, columnsSorting, onColumnSort, showBackDrop, onColumnPin, lastColumnId, selectedColumn, onColumnClick, tableBodyStyles, error, tableEmpty, isTimeoutError, tableError, tableLoading, triggerDataRefetch, footerProps, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, showBackgroundColor, tableMode, showNoDataView, }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof LoadingState>;
+export default _default;

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

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { StyledBox, StyledTableBox, TableWrapper } from '../../components/style';
+import { UnpinnedTableHeaderWrapper } from '../style';
+import SheetViewTableHeader from './SheetViewTableHeader';
+import { SheetViewTableNoData } from '.';
+const EMPTY_PINNED_COLUMNS = [];
+function LoadingState({ showHeader, orderedColumns, headerProps, columnsSorting, onColumnSort, showBackDrop, onColumnPin, lastColumnId, selectedColumn, onColumnClick, tableBodyStyles, error, tableEmpty, isTimeoutError, tableError, tableLoading, triggerDataRefetch, footerProps, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, showBackgroundColor, tableMode, showNoDataView, }) {
+    var _a;
+    const theme = useTheme();
+    return (_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": !!isTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: !!showBackgroundColor, showNoDataView: showNoDataView, scrollable: true, sx: {
+            marginLeft: '28px',
+            maxHeight: 'calc(100vh - 300px)',
+            overflow: 'auto',
+        } }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: 'auto' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: EMPTY_PINNED_COLUMNS, onColumnPin: onColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
+                        width: '100%',
+                        minWidth: 'fit-content',
+                        height: 'auto',
+                        display: 'flex',
+                        flexDirection: 'column',
+                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
+                            height: 'auto',
+                            display: 'flex',
+                            flexDirection: 'column',
+                        } }, { children: _jsx(SheetViewTableNoData, { error: (_a = error) !== null && _a !== void 0 ? _a : null, tableEmpty: tableEmpty, isTimeoutError: isTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch ? () => __awaiter(this, void 0, void 0, function* () { return triggerDataRefetch(); }) : () => __awaiter(this, void 0, void 0, function* () { }), footerProps: footerProps }) })) }))] })) })));
+}
+export default memo(LoadingState);

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

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import type { IColumnProps, IVirtualTable } from '../../../../types/index.js';
+export interface NoDataStateProps {
+    showHeader?: boolean;
+    orderedColumns: IColumnProps[];
+    headerProps?: any;
+    columnsSorting?: IVirtualTable['columnsSorting'];
+    onColumnSort?: IVirtualTable['onColumnSort'];
+    showBackDrop: boolean;
+    onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
+    lastColumnId?: string | null;
+    selectedColumn?: string | null;
+    onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
+    tableBodyStyles?: any;
+    error?: unknown;
+    tableEmpty: boolean;
+    isTimeoutError: boolean;
+    tableError: boolean;
+    tableLoading: boolean;
+    triggerDataRefetch?: () => Promise<unknown>;
+    footerProps?: IVirtualTable['footerProps'];
+    tableTitle?: string;
+    areAllRowsLoaded: boolean;
+    isFetchingNextPage?: boolean;
+    scrollToIndex?: number;
+    isLoading?: boolean;
+    isError: boolean;
+    showBackgroundColor?: boolean;
+    tableMode?: string;
+    showNoDataView: boolean;
+}
+declare function NoDataState({ showHeader, orderedColumns, headerProps, columnsSorting, onColumnSort, showBackDrop, onColumnPin, lastColumnId, selectedColumn, onColumnClick, tableBodyStyles, error, tableEmpty, isTimeoutError, tableError, tableLoading, triggerDataRefetch, footerProps, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, showBackgroundColor, tableMode, showNoDataView, }: NoDataStateProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof NoDataState>;
+export default _default;

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

@@ -0,0 +1,21 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { StyledTableBox, TableWrapper } from '../../components/style';
+import { UnpinnedTableHeaderWrapper } from '../style';
+import SheetViewTableHeader from './SheetViewTableHeader';
+import TableNoData from '../../components/TableNoData';
+function NoDataState({ showHeader, orderedColumns, headerProps, columnsSorting, onColumnSort, showBackDrop, onColumnPin, lastColumnId, selectedColumn, onColumnClick, tableBodyStyles, error, tableEmpty, isTimeoutError, tableError, tableLoading, triggerDataRefetch, footerProps, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, showBackgroundColor, tableMode, showNoDataView, }) {
+    const theme = useTheme();
+    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": !!isTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: !!showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ isSheetView: true, "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, tableEmpty: tableEmpty, isTimeoutError: isTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch !== null && triggerDataRefetch !== void 0 ? triggerDataRefetch : (() => __awaiter(this, void 0, void 0, function* () { })), footerProps: footerProps })] })) })));
+}
+export default memo(NoDataState);

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import type { IColumnProps, IVirtualTable } from '../../../../types/index.js';
+interface PinnedColumnSectionProps {
+    position: 'start' | 'end';
+    columnsData: IColumnProps[];
+    columnsWidth: number;
+    pinnedColumnsList: string[];
+    showHeader?: boolean;
+    columnsSorting?: IVirtualTable['columnsSorting'];
+    onColumnSort?: IVirtualTable['onColumnSort'];
+    headerProps?: any;
+    showBackDrop: boolean;
+    onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
+    isPinnable?: boolean;
+    lastColumnId?: string | null;
+    selectedColumn?: string | null;
+    onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
+    tableTitle?: string;
+    areAllRowsLoaded: boolean;
+    isFetchingNextPage?: boolean;
+    scrollToIndex?: number;
+    isLoading?: boolean;
+    isError: boolean;
+    hasTimeoutError: boolean;
+    showBackgroundColor?: boolean;
+    tableMode?: string;
+    showNoDataView: boolean;
+    renderContainer: (columnsToRender: IColumnProps[], containerKey: 'pinnedStart' | 'pinnedEnd' | 'scrollable', isPinned?: boolean, fixedWidth?: number) => JSX.Element;
+}
+declare function PinnedColumnSection({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, showBackgroundColor, tableMode, showNoDataView, renderContainer, }: PinnedColumnSectionProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof PinnedColumnSection>;
+export default _default;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { StyledBox, StyledTableBox, TableWrapper } from '../../components/style';
+import { PinnedStartColumnWrapper, PinnedEndColumnWrapper, UnpinnedTableHeaderWrapper } from '../style';
+import SheetViewTableHeader from './SheetViewTableHeader';
+const EMPTY_PINNED_COLUMNS = [];
+function PinnedColumnSection({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, showBackgroundColor, tableMode, showNoDataView, renderContainer, }) {
+    const theme = useTheme();
+    const fixedWidth = columnsWidth;
+    const isStart = position === 'start';
+    const containerKey = isStart ? 'pinnedStart' : 'pinnedEnd';
+    const Wrapper = isStart ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
+    return (_jsx(Wrapper, Object.assign({ "data-testid": `SheetViewVirtualTable_PinnedTableWrapper_${position}`, style: { width: fixedWidth } }, { children: _jsx(StyledTableBox, Object.assign({ as: "nav", id: `sheet-pinned-${position}-box-container`, "aria-labelledby": `sheet-pinned-${position}-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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: !!showBackgroundColor, showNoDataView: showNoDataView, scrollable: false }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: { height: '100%' } }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: isStart ? pinnedColumnsList : EMPTY_PINNED_COLUMNS, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick }) })), _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderContainer(columnsData, containerKey, true, fixedWidth) }))] })) })) })));
+}
+export default memo(PinnedColumnSection);

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

@@ -13,7 +13,8 @@ interface SheetViewTableHeaderProps {
     lastColumnId?: string | null;
     selectedColumn?: string | null;
     onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
+    isColumnPinned?: (id: string) => boolean;
 }
-declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, isColumnPinned, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
 export default _default;

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

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { StyledHeader, StyledMUITableRow } from '../../style';
 import TableCell from './TableCell';
-function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
+function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, isColumnPinned, }) {
     return (_jsx(StyledHeader, Object.assign({ component: "nav", "data-testid": "SheetViewVirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { children: _jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "SheetViewVirtualTable_TableHeader_StyledMUITableRow" }, { children: columns.map((column, colIndex) => {
-                return (_jsx(TableCell, { column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === column.id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick }, `${column.id}-${colIndex}`));
+                return (_jsx(TableCell, { column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === column.id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick, isColumnPinned: isColumnPinned }, `${column.id}-${colIndex}`));
             }) })) })));
 }
 export default memo(SheetViewTableHeader);

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

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import type { IColumnProps } from '../../../../../types/index.js';
 import { SheetViewTableHeaderProps } from './type';
-interface TableCellProps extends Pick<SheetViewTableHeaderProps, 'onColumnSort' | 'columnsSorting' | 'onColumnPin' | 'isPinnable' | 'lastColumnId' | 'onColumnClick' | 'pinnedColumns'> {
+interface TableCellProps extends Pick<SheetViewTableHeaderProps, 'onColumnSort' | 'columnsSorting' | 'onColumnPin' | 'isPinnable' | 'lastColumnId' | 'onColumnClick' | 'pinnedColumns' | 'isColumnPinned'> {
     column: IColumnProps;
     isFirst: boolean;
     isLast: boolean;
     isSelected: boolean;
     isDefaultPinned: boolean;
 }
-declare function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, isColumnPinned, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableCell>;
 export default _default;

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

@@ -6,12 +6,12 @@ import ColumnFilter from '../../../components/ColumnFilter';
 import { StyledCell } from '../../../components/style';
 import { PinIconContainer, HeaderText } from '../../style';
 import ColumnSort from '../../../../VirtualTables/components/ColumnSort';
-function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }) {
+function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, isColumnPinned, }) {
     const [columnFilterEl, setColumnFilterEl] = useState(null);
-    const checkIsPanned = useCallback((columnId) => pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId), [pinnedColumns]);
-    const isPinned = useMemo(() => checkIsPanned(id), [id, checkIsPanned]);
+    const checkIsPinnedFast = useCallback((columnId) => (isColumnPinned ? isColumnPinned(columnId) : pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId)), [isColumnPinned, pinnedColumns]);
+    const isPinned = useMemo(() => checkIsPinnedFast(id), [id, checkIsPinnedFast]);
     const handlePinClick = (columnId) => {
-        if (checkIsPanned(columnId)) {
+        if (checkIsPinnedFast(columnId)) {
             onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'unpin');
         }
         else {

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

@@ -13,4 +13,5 @@ export interface SheetViewTableHeaderProps {
     lastColumnId?: string | null;
     selectedColumn?: string | null;
     onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
+    isColumnPinned?: (id: string) => boolean;
 }

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { ListOnScrollProps, VariableSizeList } from 'react-window';
+import type { IColumnProps, IVirtualTable } from '../../../../types/index.js';
+export interface VirtualListContainerProps {
+    columns: IColumnProps[];
+    isPinned: boolean;
+    fixedWidth?: number;
+    listRef: React.RefObject<VariableSizeList>;
+    rows: IVirtualTable['rows'];
+    rowProps: IVirtualTable['rowProps'];
+    totalCount: number;
+    rowHeight: number;
+    isError: boolean;
+    areAllRowsLoaded: boolean;
+    isFetchingNextPage: boolean | undefined;
+    isLoading: boolean | undefined;
+    scrollToIndex: IVirtualTable['scrollToIndex'];
+    selectedCell: string | null;
+    selectedColumn: string | null;
+    onCellClick: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+    onScroll: (scrollProps: ListOnScrollProps) => void;
+    loadMoreItems?: () => Promise<void> | void;
+    threshold: number;
+    clearBackdropVisibilityTimeout: number;
+    areTotalRowsNotFillingHeight: boolean;
+    useLoader: boolean;
+    setBackdropVisibility?: (visible: boolean) => void;
+}
+declare function VirtualListContainerInner({ columns, isPinned, fixedWidth, listRef, rows, rowProps, totalCount, rowHeight, isError, areAllRowsLoaded, isFetchingNextPage, isLoading, scrollToIndex, selectedCell, selectedColumn, onCellClick, onScroll, loadMoreItems, threshold, clearBackdropVisibilityTimeout, areTotalRowsNotFillingHeight, useLoader, setBackdropVisibility, }: VirtualListContainerProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof VirtualListContainerInner>;
+export default _default;

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

@@ -0,0 +1,71 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import InfiniteLoader from 'react-window-infinite-loader';
+import memoize from 'memoize-one';
+import { TABLE_LIST_OVER_SCAN } from '../../../../constants/index.js';
+import { StyledVirtualList } from '../../components/style';
+import ListItemWrapper from '../../components/virtualScroll/ListItemWrapper';
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
+    columns,
+    isLoading,
+    rows,
+    rowProps,
+    scrollToIndex,
+    totalCount,
+    lastItemIndex,
+    isError,
+    areAllRowsLoaded,
+    limit: totalCount,
+    newLoadedRowsEndIndex: lastItemIndex,
+    isSheetView: true,
+    isPinned,
+    selectedCell,
+    selectedColumn,
+    onCellClick,
+    containerHeight,
+    rowHeight,
+}));
+function VirtualListContainerInner({ columns, isPinned, fixedWidth, listRef, rows, rowProps, totalCount, rowHeight, isError, areAllRowsLoaded, isFetchingNextPage, isLoading, scrollToIndex, selectedCell, selectedColumn, onCellClick, onScroll, loadMoreItems, threshold, clearBackdropVisibilityTimeout, areTotalRowsNotFillingHeight, useLoader, setBackdropVisibility, }) {
+    const hasExtraRow = areAllRowsLoaded || !!isFetchingNextPage;
+    const itemCount = hasExtraRow ? rows.length + 1 : rows.length;
+    const handleOnLoadMoreItems = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (areAllRowsLoaded)
+            return;
+        yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+    }), [areAllRowsLoaded, loadMoreItems]);
+    const listStyle = useMemo(() => ({
+        overflowX: isPinned ? 'hidden' : 'auto',
+        paddingBottom: isPinned ? 25 : 13,
+        backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
+    }), [isPinned]);
+    const renderList = (onItemsRendered) => (_jsx(AutoSizer, { children: ({ height, width }) => {
+            const getItemSize = (index) => {
+                const isFillerRow = areAllRowsLoaded && index === rows.length;
+                if (isFillerRow) {
+                    const usedHeight = rows.length * rowHeight;
+                    const remainingHeight = height - usedHeight;
+                    const minimumLastRowHeight = rowHeight * 2;
+                    return Math.max(remainingHeight, minimumLastRowHeight);
+                }
+                return rowHeight;
+            };
+            const lastItemIndex = rows.length - 1;
+            const itemData = createItemData(columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, height, rowHeight);
+            return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, itemSize: getItemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setBackdropVisibility !== null && setBackdropVisibility !== void 0 ? setBackdropVisibility : (() => { }), scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: listStyle }, { children: ListItemWrapper })));
+        } }));
+    if (!useLoader) {
+        return renderList();
+    }
+    return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index < rows.length, itemCount: itemCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => renderList(onItemsRendered) })));
+}
+export default memo(VirtualListContainerInner);

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

@@ -8,4 +8,8 @@ export declare const usePinnedColumns: (columns: readonly IColumnProps[], isPinn
     unpinnedColumnsData: IColumnProps<any>[];
     orderedColumns: IColumnProps<any>[];
     lastColumnId: string | null;
+    pinnedStartSet: Set<string>;
+    pinnedEndSet: Set<string>;
+    pinnedAllSet: Set<string>;
+    isColumnPinned: (id: string) => boolean;
 };

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

@@ -16,6 +16,7 @@ export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
         }
         return userPinned;
     });
+    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
     const handleColumnPin = useCallback((columnId, position = 'start') => {
         if (!isPinnable)
             return;
@@ -38,20 +39,25 @@ 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 pinnedStartSet = useMemo(() => new Set(pinnedStartColumns), [pinnedStartColumns]);
+    const pinnedEndSet = useMemo(() => new Set(pinnedEndColumns), [pinnedEndColumns]);
+    const pinnedAllSet = useMemo(() => new Set([...pinnedStartColumns, ...pinnedEndColumns]), [pinnedStartColumns, pinnedEndColumns]);
+    const isColumnPinned = useCallback((id) => pinnedStartSet.has(id) || pinnedEndSet.has(id), [pinnedStartSet, pinnedEndSet]);
+    const ORDER_FALLBACK = 1000000;
     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 start = shownColumns.filter((column) => pinnedStartSet.has(column.id));
+        const end = shownColumns.filter((column) => pinnedEndSet.has(column.id));
+        const unpinned = shownColumns.filter((column) => !pinnedStartSet.has(column.id) && !pinnedEndSet.has(column.id));
+        const byOrder = (a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : ORDER_FALLBACK) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : ORDER_FALLBACK); };
+        const sortedStart = start.sort(byOrder);
+        const sortedEnd = end.sort(byOrder);
+        const sortedUnpinned = unpinned.sort(byOrder);
         return {
             pinnedStartColumnsData: sortedStart,
             pinnedEndColumnsData: sortedEnd,
             unpinnedColumnsData: sortedUnpinned,
         };
-    }, [shownColumns, pinnedStartColumns, pinnedEndColumns]);
+    }, [shownColumns, pinnedStartSet, pinnedEndSet]);
     const orderedColumns = useMemo(() => [...pinnedStartColumnsData, ...unpinnedColumnsData, ...pinnedEndColumnsData], [pinnedStartColumnsData, unpinnedColumnsData, pinnedEndColumnsData]);
     const lastColumnId = useMemo(() => {
         const lastCol = orderedColumns[orderedColumns.length - 1];
@@ -66,5 +72,9 @@ export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
         unpinnedColumnsData,
         orderedColumns,
         lastColumnId,
+        pinnedStartSet,
+        pinnedEndSet,
+        pinnedAllSet,
+        isColumnPinned,
     };
 };

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

@@ -0,0 +1,6 @@
+export declare function useSelection(): {
+    selectedCell: string | null;
+    selectedColumn: string | null;
+    handleCellClick: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+    handleColumnClick: (columnId: string, event: React.MouseEvent) => void;
+};

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

@@ -0,0 +1,17 @@
+import { useCallback, useState } from 'react';
+export function useSelection() {
+    const [selectedCell, setSelectedCell] = useState(null);
+    const [selectedColumn, setSelectedColumn] = useState(null);
+    const handleCellClick = useCallback((rowIndex, columnId, event) => {
+        event.stopPropagation();
+        const cellKey = `${rowIndex}-${columnId}`;
+        setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
+        setSelectedColumn(null);
+    }, []);
+    const handleColumnClick = useCallback((columnId, event) => {
+        event.stopPropagation();
+        setSelectedColumn((prev) => (prev === columnId ? null : columnId));
+        setSelectedCell(null);
+    }, []);
+    return { selectedCell, selectedColumn, handleCellClick, handleColumnClick };
+}

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

@@ -0,0 +1,9 @@
+export declare function useTableDisplayState(rowsLength: number, isLoading?: boolean, error?: unknown): {
+    isError: boolean;
+    tableLoading: boolean;
+    tableError: boolean;
+    tableEmpty: boolean;
+    hasTimeoutError: boolean;
+    areTotalRowsNotFillingHeight: boolean;
+    showNoDataView: boolean;
+};

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

@@ -0,0 +1,20 @@
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../../utils/index.js';
+export function useTableDisplayState(rowsLength, isLoading, error) {
+    var _a;
+    const isError = hasError((_a = error) !== null && _a !== void 0 ? _a : null);
+    const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
+    const tableError = !isLoading && rowsLength === 0 && isError && !isNotFoundError(error);
+    const tableEmpty = !isLoading && rowsLength === 0;
+    const hasTimeoutError = isTimeoutError(error);
+    const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rowsLength) && !tableLoading;
+    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+    return {
+        isError,
+        tableLoading,
+        tableError,
+        tableEmpty,
+        hasTimeoutError,
+        areTotalRowsNotFillingHeight,
+        showNoDataView,
+    };
+}

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

@@ -0,0 +1,2 @@
+import type { IColumnProps } from '../../../types/index.js';
+export declare function getColumnsTotalWidth(columns: IColumnProps[], initial?: number): number;

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

@@ -0,0 +1,6 @@
+export function getColumnsTotalWidth(columns, initial = 0.2) {
+    return columns.reduce((acc, col) => {
+        const width = typeof col.width === 'string' ? parseInt(col.width, 10) : col.width || 100;
+        return acc + width;
+    }, initial);
+}

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

@@ -3,7 +3,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from './style';
-import { getSelectionStyles } from '../utils/getSelectionStyles';
+import { getSelectionStyles } from './utils';
 function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
     const renderCell = (column) => {
         const { render, format, selector } = column;

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

@@ -52,48 +52,8 @@ export declare const chargeTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "150px";
-        readonly sheet: "165px";
-    };
-    readonly payment_initiated: {
-        readonly default: "150px";
-        readonly text: "150px";
         readonly sheet: "150px";
     };
-    readonly payment_issuer: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "350px";
-    };
-    readonly payment_method: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "145px";
-    };
-    readonly payment_type: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "120px";
-    };
-    readonly payment_schema: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "145px";
-    };
-    readonly auth_status: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "165px";
-    };
-    readonly auth_type: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "155px";
-    };
-    readonly eci: {
-        readonly default: "150px";
-        readonly text: "150px";
-        readonly sheet: "90px";
-    };
     readonly amount: {
         readonly default: "170px";
         readonly text: "195px";
@@ -187,7 +147,7 @@ export declare const chargeTableCellWidth: {
     readonly card_number: {
         readonly default: "120px";
         readonly text: "120px";
-        readonly sheet: "145px";
+        readonly sheet: "190px";
     };
     readonly auth_code: {
         readonly default: "80px";
@@ -202,7 +162,7 @@ export declare const chargeTableCellWidth: {
     readonly device: {
         readonly default: "70px";
         readonly text: "190px";
-        readonly sheet: "225px";
+        readonly sheet: "190px";
     };
     readonly card_no: {
         readonly default: "120px";

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

@@ -52,48 +52,8 @@ export const chargeTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '150px',
-        sheet: '165px',
-    },
-    payment_initiated: {
-        default: '150px',
-        text: '150px',
         sheet: '150px',
     },
-    payment_issuer: {
-        default: '150px',
-        text: '150px',
-        sheet: '350px',
-    },
-    payment_method: {
-        default: '150px',
-        text: '150px',
-        sheet: '145px',
-    },
-    payment_type: {
-        default: '150px',
-        text: '150px',
-        sheet: '120px',
-    },
-    payment_schema: {
-        default: '150px',
-        text: '150px',
-        sheet: '145px',
-    },
-    auth_status: {
-        default: '150px',
-        text: '150px',
-        sheet: '165px',
-    },
-    auth_type: {
-        default: '150px',
-        text: '150px',
-        sheet: '155px',
-    },
-    eci: {
-        default: '150px',
-        text: '150px',
-        sheet: '90px',
-    },
     amount: {
         default: '170px',
         text: '195px',
@@ -187,7 +147,7 @@ export const chargeTableCellWidth = {
     card_number: {
         default: '120px',
         text: '120px',
-        sheet: '145px',
+        sheet: '190px',
     },
     auth_code: {
         default: '80px',
@@ -202,7 +162,7 @@ export const chargeTableCellWidth = {
     device: {
         default: '70px',
         text: '190px',
-        sheet: '225px',
+        sheet: '190px',
     },
     card_no: {
         default: '120px',

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.1-test.52",
-  "testVersion": 52,
+  "version": "0.1.1-test.54",
+  "testVersion": 54,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",