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

package/build/components/JSONViewer/JSONViewer.js

@@ -11,7 +11,7 @@ import { isSafariBrowser } from '../../utils/index.js';
 import AnimatedButton from './components/FooterButton';
 import JSONTitleBar from './components/JSONTitleBar';
 import { ButtonsWrapper, FooterWrapper, JSONContainer, JSONViewerWrapper, SectionWrapper, StyledCopyButton, StyledHeaderWrapper, StyledTitle, jsonTheme, requestJsonTheme, TITLE_BAR_HEIGHT, VIEWER_HEIGHT, FOOTER_HEIGHT, } from './style';
-import TableFooter from '../VirtualTable/components/TableFooter';
+import TableFooter from '../VirtualTables/components/TableFooter';
 const VIEWER_WIDTH = 400;
 const animationDuration = 0.5;
 export default function JSONViewer({ index, json, requestJson = {}, isWindowMinimized, windowOrder, onClose }) {

package/build/components/MultiSelectDropdownButton/MultiSelectDropdownButton.js

@@ -4,7 +4,7 @@ import { Popper } from '@mui/material';
 import { ButtonLabel } from './style';
 import CustomBackdrop from '../CustomBackdrop';
 import StatusButton from '../StatusButton';
-import ListColumnFilter from '../VirtualTable/components/ColumnFilter/List';
+import ListColumnFilter from '../VirtualTables/components/ColumnFilter/List';
 import { downArrowIcon } from '../../constants/index.js';
 function MultiSelectDropdownButton({ buttonLabel, onClear, onConfirm, dropdownItems, apiKey, data, styles, buttonDisabled, }) {
     const [anchorEl, setAnchorEl] = useState(null);

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

@@ -0,0 +1,87 @@
+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 { useTheme } from '@mui/material/styles';
+import { TABLE_THRESHOLD } from '../../../constants/index.js';
+import { useDelayToSetValue } from '../../../hooks/index.js';
+import TableFooter from '../components/TableFooter/TableFooter';
+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';
+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, isColumnPinned, } = usePinnedColumns(columns, isPinnable, onColumnPin);
+    const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
+    const { selectedCell, selectedColumn, handleCellClick, handleColumnClick } = useSelection();
+    const isDelayedFetchingNextPage = useDelayToSetValue({
+        value: isFetchingNextPage,
+        delay: 1000,
+    });
+    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) => {
+        var _a;
+        const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
+        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 }));
+    }, [
+        rows,
+        rowProps,
+        footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount,
+        rowHeight,
+        isError,
+        areTotalRowsNotFillingHeight,
+        areAllRowsLoaded,
+        isDelayedFetchingNextPage,
+        isLoading,
+        scrollToIndex,
+        selectedCell,
+        selectedColumn,
+        handleCellClick,
+        onScrollByKey,
+        onLoadMoreItems,
+        threshold,
+        clearBackdropVisibilityTimeout,
+        pinnedEndVirtualListRef,
+        pinnedStartVirtualListRef,
+        scrollableVirtualListRef,
+    ]);
+    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, 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/{VirtualTable/SheetView → 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/{VirtualTable/SheetView → 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/{VirtualTable/SheetView → 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/{VirtualTable/SheetView → VirtualTables/SheetViewVirtualTable}/components/SheetViewTableHeader/TableCell.js

@@ -3,15 +3,15 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import { pinIcon, unpinIcon } from '../../../../../constants/index.js';
 import ColumnFilter from '../../../components/ColumnFilter';
-import { StyledCell } from '../../../style';
+import { StyledCell } from '../../../components/style';
 import { PinIconContainer, HeaderText } from '../../style';
-import ColumnSort from '../../../../VirtualTable/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, }) {
+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, 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 {
@@ -26,15 +26,7 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
     return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => {
             onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
             setColumnFilterEl(event.currentTarget);
-        }, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '1px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', minHeight: isSelected ? '28px' : 'auto', position: 'relative', '&:before': {
-                content: '""',
-                border: isSelected ? '1px solid #1F88D0' : '1px solid transparent',
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                left: 0,
-                bottom: 0,
-            } }, headerStyle)) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
+        }, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle)) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
                     onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
                 } }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
                     onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, e);

package/build/components/{VirtualTable/SheetView → VirtualTables/SheetViewVirtualTable}/components/SheetViewTableHeader/type.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TableHeaderProps } from '../../../../VirtualTable/components/TableHeader/type';
+import { TableHeaderProps } from '../../../../VirtualTables/components/TableHeader/type';
 import { IColumnProps, IVirtualTable } from '../../../../../types/index.js';
 export interface SheetViewTableHeaderProps {
     columns: IColumnProps[];
@@ -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/{VirtualTable/SheetView → VirtualTables/SheetViewVirtualTable}/components/SheetViewTableNoData.js

@@ -4,7 +4,7 @@ import { backendErrorHandler } from '../../../../utils/index.js';
 import EmptyList from '../../components/EmptyList/EmptyList';
 import ErrorList from '../../components/ErrorList/ErrorList';
 import SheetViewTableLoading from './SheetViewTableLoading';
-import { StyledSolidBackground } from '../../style';
+import { StyledSolidBackground } from '../../components/style';
 function SheetViewTableNoData({ error, tableEmpty, isTimeoutError, tableError, tableLoading, orderedColumns, triggerDataRefetch, footerProps, }) {
     let content;
     if (tableLoading) {

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/{VirtualTable/SheetView → 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/{VirtualTable/SheetView → 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;
+};