@tap-payments/os-micro-frontend-shared 0.1.8 → 0.1.9-test.1-test.2

package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts

@@ -67,7 +67,7 @@ export declare const RefundChargeCellContainer: import("@emotion/styled").Styled
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -329,7 +329,7 @@ export declare const PercentageContainer: import("@emotion/styled").StyledCompon
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;

package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts

@@ -67,7 +67,7 @@ export declare const RefundCellContainer: import("@emotion/styled").StyledCompon
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;

package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts

@@ -69,7 +69,7 @@ export declare const SalesChannelsContainer: import("@emotion/styled").StyledCom
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;

package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts

@@ -68,7 +68,7 @@ export declare const ReferenceSourcesContainer: import("@emotion/styled").Styled
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;

package/build/components/TableCells/CustomCells/SourceCell/style.d.ts

@@ -69,7 +69,7 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;

package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts

@@ -81,7 +81,7 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -352,7 +352,7 @@ export declare const RefundsCountBadge: import("@emotion/styled").StyledComponen
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -614,7 +614,7 @@ export declare const MultiRefundContainer: import("@emotion/styled").StyledCompo
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -895,7 +895,7 @@ export declare const StatusIcon: import("@emotion/styled").StyledComponent<{
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -1159,7 +1159,7 @@ export declare const StatusWrapper: import("@emotion/styled").StyledComponent<{
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -1421,7 +1421,7 @@ export declare const StatusContainer: import("@emotion/styled").StyledComponent<
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;

package/build/components/TableCells/CustomCells/StatusCell/style.d.ts

@@ -70,7 +70,7 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -341,7 +341,7 @@ export declare const RefundsCountBadge: import("@emotion/styled").StyledComponen
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -603,7 +603,7 @@ export declare const MultiRefundContainer: import("@emotion/styled").StyledCompo
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -884,7 +884,7 @@ export declare const StatusIcon: import("@emotion/styled").StyledComponent<{
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -1148,7 +1148,7 @@ export declare const StatusWrapper: import("@emotion/styled").StyledComponent<{
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -1412,7 +1412,7 @@ export declare const StatusContainer: import("@emotion/styled").StyledComponent<
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;

package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts

@@ -67,7 +67,7 @@ export declare const UnCapturedContainer: import("@emotion/styled").StyledCompon
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -329,7 +329,7 @@ export declare const ErrorCodeWrapper: import("@emotion/styled").StyledComponent
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -591,7 +591,7 @@ export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -854,7 +854,7 @@ export declare const GatewayIconWrapper: import("@emotion/styled").StyledCompone
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -1116,7 +1116,7 @@ export declare const GatewaysContainer: import("@emotion/styled").StyledComponen
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;

package/build/components/TableCells/CustomCells/style.d.ts

@@ -72,7 +72,7 @@ export declare const BadgeWrapper: import("@emotion/styled").StyledComponent<{
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;

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

@@ -1,194 +1,54 @@
-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, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, memo, useState, useCallback } from 'react';
+import { memo, useState } 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 { isHeightNotFullyFilledByRows } 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 VirtualListSection from './components/VirtualListSection';
+import PinnedColumnSection from './components/PinnedColumnSection';
+import NoDataSection from './components/NoDataSection';
 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 { usePinnedWidths } from './hooks/usePinnedWidths';
+import { useSelection } from './hooks/useSelection';
+import { useSheetViewStates } from './hooks/useSheetViewStates';
+import { useSharedItemSize } from './hooks/useSharedItemSize';
 function SheetViewVirtualTable({ columns, rows, threshold = 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, }) {
+    var _a;
+    const [showBackDrop, setShowBackdrop] = useState(false);
     const theme = useTheme();
     const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = 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 isDelayedFetchingNextPage = useDelayToSetValue({
-        value: isFetchingNextPage,
-        delay: 1000,
+    const { getItemSize, updateReferenceHeight } = useSharedItemSize({
+        rowsLength: rows.length,
+        areAllRowsLoaded,
+        rowHeight,
+    });
+    const { selectedCell, selectedColumn, handleCellClick, handleColumnClick } = useSelection();
+    const isDelayedFetchingNextPage = useDelayToSetValue({ value: isFetchingNextPage, delay: 1000 });
+    const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView } = useSheetViewStates({
+        rowsLength: rows.length,
+        isLoading,
+        error,
     });
-    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 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());
-        });
-        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 })));
-                } })) })));
-    }, [
-        itemsCount,
-        areAllRowsLoaded,
-        loadMoreItems,
-        threshold,
-        rowHeight,
-        rows,
-        pinnedStartColumnsData,
-        pinnedEndColumnsData,
-        unpinnedColumnsData,
-        isDelayedFetchingNextPage,
-        rowProps,
-        scrollToIndex,
-        lastItemIndex,
-        footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount,
-        isError,
-        areTotalRowsNotFillingHeight,
-        selectedCell,
-        selectedColumn,
-        handleCellClick,
-        handleScroll,
-        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 { pinnedStartColumnsWidth, pinnedEndColumnsWidth } = usePinnedWidths(pinnedStartColumnsData, 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-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: 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) })) }))] })) }));
+        var _a;
+        const listRef = position === 'start' ? pinnedStartVirtualListRef : pinnedEndVirtualListRef;
+        return (_jsx(PinnedColumnSection, { "data-testid": `SheetViewVirtualTable_PinnedColumnSection_${position}`, position: position, columnsData: columnsData, columnsWidth: columnsWidth, pinnedColumnsList: pinnedColumnsList, showHeader: showHeader, headerProps: headerProps, columnsSorting: columnsSorting, onColumnSort: onColumnSort, showBackDrop: showBackDrop, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, listRef: listRef, itemsCount: itemsCount, rows: rows, rowProps: rowProps, rowsLength: rows.length, loadMoreItems: loadMoreItems, threshold: threshold, areAllRowsLoaded: areAllRowsLoaded, rowHeight: rowHeight, scrollToIndex: scrollToIndex, totalCount: (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError: isError, isDelayedFetchingNextPage: Boolean(isDelayedFetchingNextPage), selectedCell: selectedCell, selectedColumnValue: selectedColumn, handleCellClick: handleCellClick, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, setShowBackdrop: setShowBackdrop, handleScroll: handleScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, getItemSize: getItemSize, tableTitle: tableTitle, areAllRowsLoadedDataAttr: !!areAllRowsLoaded, isFetchingNextPageDataAttr: !!isFetchingNextPage, isLoadingDataAttr: !!isLoading, hasTimeoutErrorDataAttr: !!hasTimeoutError, tableMode: tableMode, showNoDataView: showNoDataView }));
+    };
+    const onPointerDown = (e) => {
+        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
-    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-table-mode": tableMode, height: "100%", dir: theme.direction, 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-table-mode": tableMode, height: "100%", dir: theme.direction, 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-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: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    return (_jsxs(_Fragment, { children: [_jsx(TableContainer, Object.assign({ "data-testid": "SheetViewVirtualTable_TableContainer" }, { children: showNoDataView ? (_jsx(NoDataSection, { "data-testid": "SheetViewVirtualTable_NoDataSection", showHeader: showHeader, headerProps: headerProps, columnsSorting: columnsSorting, onColumnSort: onColumnSort, showBackDrop: showBackDrop, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, orderedColumns: orderedColumns, showNoDataView: showNoDataView, tableLoading: tableLoading, tableTitle: tableTitle, areAllRowsLoaded: areAllRowsLoaded, isFetchingNextPage: isFetchingNextPage, isLoading: isLoading, isError: isError, hasTimeoutError: hasTimeoutError, tableEmpty: tableEmpty, tableError: tableError, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps, tableBodyStyles: tableBodyStyles, tableMode: tableMode, scrollToIndex: scrollToIndex })) : (_jsxs(SheetViewVirtualTableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_Wrapper" }, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, "data-testid": "SheetViewVirtualTable_MainTableWrapper" }, { 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, Object.assign({ "data-testid": "SheetViewVirtualTable_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: {
                                                 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: _jsx(VirtualListSection, { "data-testid": "SheetViewVirtualTable_VirtualListSection_scrollable", containerKey: "scrollable", isPinned: false, listRef: scrollableVirtualListRef, columnsData: unpinnedColumnsData, itemsCount: itemsCount, rows: rows, rowProps: rowProps, rowsLength: rows.length, loadMoreItems: loadMoreItems, threshold: threshold, areAllRowsLoaded: areAllRowsLoaded, rowHeight: rowHeight, scrollToIndex: scrollToIndex, totalCount: (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError: isError, isDelayedFetchingNextPage: Boolean(isDelayedFetchingNextPage), selectedCell: selectedCell, selectedColumn: selectedColumn, handleCellClick: handleCellClick, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, setShowBackdrop: setShowBackdrop, handleScroll: handleScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, getItemSize: getItemSize, updateReferenceHeight: updateReferenceHeight }) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] }))) })), _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/NoDataSection.d.ts

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

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

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

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

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import type { ListOnScrollProps, VariableSizeList } from 'react-window';
+import type { IColumnProps, IVirtualTable } from '../../../../types/index.js';
+interface PinnedColumnSectionProps {
+    position: 'start' | 'end';
+    columnsData: IColumnProps[];
+    columnsWidth: number;
+    pinnedColumnsList: string[];
+    showHeader?: boolean;
+    headerProps?: IVirtualTable['headerProps'];
+    columnsSorting?: IVirtualTable['columnsSorting'];
+    onColumnSort?: IVirtualTable['onColumnSort'];
+    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;
+    listRef: React.RefObject<VariableSizeList>;
+    itemsCount: number;
+    rows: unknown[];
+    rowProps: unknown;
+    rowsLength: number;
+    loadMoreItems?: () => Promise<unknown>;
+    threshold: number;
+    areAllRowsLoaded: boolean;
+    rowHeight: number;
+    scrollToIndex?: number;
+    totalCount: number;
+    isError: boolean;
+    isDelayedFetchingNextPage: boolean;
+    selectedCell: string | null;
+    selectedColumnValue: string | null;
+    handleCellClick: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+    areTotalRowsNotFillingHeight: boolean;
+    setShowBackdrop: (v: boolean) => void;
+    handleScroll: (scrollProps: ListOnScrollProps, source: 'start' | 'end' | 'scrollable') => void;
+    clearBackdropVisibilityTimeout: number;
+    getItemSize?: (index: number) => number;
+    updateReferenceHeight?: (height: number) => void;
+    tableTitle?: string;
+    areAllRowsLoadedDataAttr: boolean;
+    isFetchingNextPageDataAttr?: boolean;
+    isLoadingDataAttr?: boolean;
+    hasTimeoutErrorDataAttr: boolean;
+    tableMode?: string;
+    showNoDataView: boolean;
+}
+declare function PinnedColumnSection({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, headerProps, columnsSorting, onColumnSort, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, listRef, itemsCount, rows, rowProps, rowsLength, loadMoreItems, threshold, areAllRowsLoaded, rowHeight, scrollToIndex, totalCount, isError, isDelayedFetchingNextPage, selectedCell, selectedColumnValue, handleCellClick, areTotalRowsNotFillingHeight, setShowBackdrop, handleScroll, clearBackdropVisibilityTimeout, getItemSize, updateReferenceHeight, tableTitle, areAllRowsLoadedDataAttr, isFetchingNextPageDataAttr, isLoadingDataAttr, hasTimeoutErrorDataAttr, tableMode, showNoDataView, }: Readonly<PinnedColumnSectionProps>): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: import("react").MemoExoticComponent<typeof PinnedColumnSection>;
+export default _default;