@tap-payments/os-micro-frontend-shared 0.1.34 → 0.1.36-9.fix.1

package/build/components/VAT/VATDropdown/VATDropdown.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material/Box';
+import { Vat } from '../../../types/index.js';
+interface VATDropdownProps extends BoxProps {
+    vat: Vat;
+    setVat: (vat: Vat) => void;
+    setIsOpen: (value: boolean) => void;
+}
+declare function VATDropdown({ setVat, vat, setIsOpen: setIsDropdownOpen, ...props }: Readonly<VATDropdownProps>): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof VATDropdown>;
+export default _default;

package/build/components/VAT/VATDropdown/VATDropdown.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { rightArrow } from '../../../constants/index.js';
+import { Menu } from '../../index.js';
+import { Wrapper, Option } from './style';
+import VATRateDropdown from '../VATRateDropdown';
+function VATDropdown(_a) {
+    var { setVat, vat, setIsOpen: setIsDropdownOpen } = _a, props = __rest(_a, ["setVat", "vat", "setIsOpen"]);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const toggleDropdown = (e) => {
+        e.stopPropagation();
+        if (open) {
+            setAnchorEl(null);
+            return;
+        }
+        setAnchorEl(e.currentTarget);
+    };
+    return (_jsx(Wrapper, Object.assign({ sx: props.sx }, { children: _jsxs(Option, Object.assign({ sx: (theme) => (Object.assign({}, (open && { boxShadow: theme.shadows[3] }))), className: "option", onClick: toggleDropdown }, { children: [_jsx("span", { children: t('rate') }), _jsx("img", { src: rightArrow, alt: "a" }), _jsx(Menu, Object.assign({ anchorEl: anchorEl, open: open, placement: "right-start" }, { children: _jsx(VATRateDropdown, { onChange: setVat, vat: vat, setIsDropdownOpen: setIsDropdownOpen }) }))] })) })));
+}
+export default memo(VATDropdown);

package/build/components/VAT/VATDropdown/index.d.ts

@@ -0,0 +1 @@
+export { default } from './VATDropdown';

package/build/components/VAT/VATDropdown/index.js

@@ -0,0 +1 @@
+export { default } from './VATDropdown';

package/build/components/VAT/VATDropdown/style.d.ts

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

package/build/components/VAT/VATDropdown/style.js

@@ -0,0 +1,32 @@
+import { Box, styled } from '@mui/material';
+export const Wrapper = styled(Box)(({ theme }) => ({
+    width: 112,
+    boxShadow: theme.shadows[16],
+    borderRadius: 4,
+    backgroundColor: theme.palette.common.white,
+    '.option + .option': {
+        borderTop: `1px solid ${theme.palette.divider}`,
+    },
+    zIndex: 3,
+}));
+export const Option = styled(Box)(({ theme }) => ({
+    fontSize: '11px',
+    paddingInlineStart: theme.spacing(2),
+    paddingInlineEnd: theme.spacing(1),
+    paddingTop: theme.spacing(1.5),
+    paddingBottom: theme.spacing(1.5),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    cursor: 'pointer',
+    height: 40,
+    input: {
+        height: 24,
+        width: 47,
+        textAlign: 'right',
+    },
+    '&:hover': {
+        boxShadow: theme.shadows[3],
+    },
+}));

package/build/components/VAT/VATRateDropdown/VATRateDropdown.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Vat } from '../../../types/index.js';
+interface VATRateDropdownProps {
+    vat: Vat;
+    onChange: (value: Vat) => void;
+    setIsDropdownOpen: (value: boolean) => void;
+}
+declare function VATRateDropdown({ vat, onChange, setIsDropdownOpen }: Readonly<VATRateDropdownProps>): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof VATRateDropdown>;
+export default _default;

package/build/components/VAT/VATRateDropdown/VATRateDropdown.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../index.js';
+import { checkIcon, RATES } from '../../../constants/index.js';
+import { removeAllCharsFromNumber } from '../../../utils/index.js';
+import { Wrapper, Option } from './style';
+function VATRateDropdown({ vat, onChange, setIsDropdownOpen }) {
+    const { t } = useTranslation();
+    const { percentage, isInclusive, value } = vat;
+    const isNoVAT = percentage === RATES.ZERO;
+    const isFivePercent = percentage === RATES.FIVE;
+    const isTenPercent = percentage === RATES.TEN;
+    const isFifteenPercent = percentage === RATES.FIFTEEN;
+    const isCustomPercent = percentage !== RATES.FIVE && percentage !== RATES.TEN && percentage !== RATES.FIFTEEN && percentage !== RATES.ZERO;
+    const vatRates = [
+        { label: t('noVat'), value: RATES.ZERO, selected: isNoVAT },
+        { label: '5%', value: RATES.FIVE, selected: isFivePercent },
+        { label: '10%', value: RATES.TEN, selected: isTenPercent },
+        { label: '15%', value: RATES.FIFTEEN, selected: isFifteenPercent },
+    ];
+    const selectRate = (percentageValue) => {
+        onChange({ value, percentage: percentageValue, isInclusive });
+    };
+    const handleCustomRate = (e) => {
+        if (Number(e.target.value) > 100)
+            return;
+        selectRate(Number(removeAllCharsFromNumber(e.target.value)));
+    };
+    const renderSelectedIcon = (selected) => {
+        return selected ? _jsx("img", { src: checkIcon, alt: "check" }) : _jsx("span", {});
+    };
+    return (_jsxs(Wrapper, { children: [vatRates.map((rate, index) => (_jsxs(Option, Object.assign({ className: "option", onClick: () => {
+                    selectRate(rate.value);
+                    setIsDropdownOpen(false);
+                } }, { children: [renderSelectedIcon(rate.selected), _jsx("span", { children: rate.label })] }), `${rate.value}-${index}`))), _jsxs(Option, Object.assign({ className: "option" }, { children: [renderSelectedIcon(isCustomPercent), _jsx(Input, { placeholder: "%", value: isCustomPercent ? String(percentage) : '', onChange: handleCustomRate, sx: { justifyContent: 'flex-end' } })] }))] }));
+}
+export default memo(VATRateDropdown);

package/build/components/VAT/VATRateDropdown/index.d.ts

@@ -0,0 +1 @@
+export { default } from './VATRateDropdown';

package/build/components/VAT/VATRateDropdown/index.js

@@ -0,0 +1 @@
+export { default } from './VATRateDropdown';

package/build/components/VAT/VATRateDropdown/style.d.ts

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

package/build/components/VAT/VATRateDropdown/style.js

@@ -0,0 +1,30 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const Wrapper = styled(Box)(({ theme }) => ({
+    width: 112,
+    '.option + .option': {
+        borderTop: `1px solid ${theme.palette.divider}`,
+    },
+    zIndex: 3,
+}));
+export const Option = styled(Box)(({ theme }) => ({
+    fontSize: '11px',
+    paddingInlineStart: theme.spacing(2),
+    paddingInlineEnd: theme.spacing(1),
+    paddingTop: theme.spacing(1.5),
+    paddingBottom: theme.spacing(1.5),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    cursor: 'pointer',
+    height: 40,
+    input: {
+        height: 24,
+        width: 47,
+        textAlign: 'right',
+    },
+    '&:hover': {
+        boxShadow: theme.shadows[3],
+    },
+}));

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

@@ -0,0 +1,4 @@
+export * from './utils';
+export { default as TotalVAT } from './TotalVAT';
+export { default as VATDropdown } from './VATDropdown';
+export { default as VATRateDropdown } from './VATRateDropdown';

package/build/components/VAT/index.js

@@ -0,0 +1,4 @@
+export * from './utils';
+export { default as TotalVAT } from './TotalVAT';
+export { default as VATDropdown } from './VATDropdown';
+export { default as VATRateDropdown } from './VATRateDropdown';

package/build/components/VAT/utils.d.ts

@@ -0,0 +1,7 @@
+import { Vat } from '../../types/index.js';
+export declare const getVatValue: (amount: number, vat: Vat) => number;
+export declare const getItemVat: (vat: Vat, itemPrice: number, quantity: number) => {
+    value: number;
+    percentage: number;
+    isInclusive: boolean;
+};

package/build/components/VAT/utils.js

@@ -0,0 +1,8 @@
+export const getVatValue = (amount, vat) => {
+    let newVatValue = 0;
+    if (vat.percentage > 0) {
+        newVatValue = amount * (vat.percentage / 100);
+    }
+    return newVatValue;
+};
+export const getItemVat = (vat, itemPrice, quantity) => (Object.assign(Object.assign({}, vat), { value: getVatValue(Number(itemPrice), vat) * quantity }));

package/build/components/VerificationIcon/VerificationIcon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type VerificationIconProps = {
+    status: string;
+};
+export declare const VerificationIcon: ({ status }: VerificationIconProps) => import("react").JSX.Element;
+export {};

package/build/components/VerificationIcon/VerificationIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import startCase from 'lodash/startCase';
+import { Tooltip } from '../index.js';
+import { statusIcon } from './constant';
+export const VerificationIcon = ({ status }) => {
+    return (_jsx(Tooltip, Object.assign({ title: startCase(status) }, { children: _jsx("img", { loading: "lazy", src: statusIcon[((status === null || status === void 0 ? void 0 : status.toLowerCase()) || '')] || statusIcon.default, alt: status, width: 10.5, height: 10.5 }) })));
+};

package/build/components/VerificationIcon/VerificationIconWithBg.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type VerificationIconWithBgProps = {
+    status: string;
+};
+export declare const VerificationIconWithBg: ({ status }: VerificationIconWithBgProps) => import("react").JSX.Element;
+export {};

package/build/components/VerificationIcon/VerificationIconWithBg.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import startCase from 'lodash/startCase';
+import { Box, Tooltip } from '@mui/material';
+import { statusIcon, statusIconBG } from './constant';
+export const VerificationIconWithBg = ({ status }) => {
+    return (_jsx(Tooltip, Object.assign({ title: startCase(status) }, { children: _jsx(Box, Object.assign({ component: "li", sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '24px',
+                height: '24px',
+                borderRadius: '50%',
+                backgroundColor: statusIconBG[status],
+            } }, { children: _jsx("img", { loading: "lazy", src: statusIcon[((status === null || status === void 0 ? void 0 : status.toLowerCase()) || '')] || statusIcon.default, alt: status, width: 10.5, height: 10.5 }) })) })));
+};

package/build/components/VerificationIcon/constant.d.ts

@@ -0,0 +1,2 @@
+export declare const statusIcon: Record<string, string>;
+export declare const statusIconBG: Record<string, string>;

package/build/components/VerificationIcon/constant.js

@@ -0,0 +1,18 @@
+import { blueVerifyIcon, grayVerifyIcon, greenVerifyIcon, redVerifyIcon } from '../../constants/index.js';
+export const statusIcon = {
+    verified: greenVerifyIcon,
+    reviewed: blueVerifyIcon,
+    completed: blueVerifyIcon,
+    incomplete: grayVerifyIcon,
+    complete: blueVerifyIcon,
+    rejected: redVerifyIcon,
+    default: grayVerifyIcon,
+};
+export const statusIconBG = {
+    incomplete: '#D9D9D929',
+    completed: '#11D0FA29',
+    complete: '#11D0FA29',
+    reviewed: '#11D0FA29',
+    verified: '#2ACE0029',
+    rejected: '#FF3D0029',
+};

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

@@ -0,0 +1,3 @@
+export { VerificationIcon } from './VerificationIcon';
+export { VerificationIconWithBg } from './VerificationIconWithBg';
+export * from './constant';

package/build/components/VerificationIcon/index.js

@@ -0,0 +1,3 @@
+export { VerificationIcon } from './VerificationIcon';
+export { VerificationIconWithBg } from './VerificationIconWithBg';
+export * from './constant';

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

@@ -0,0 +1,2 @@
+import { statusIcon } from './constant';
+export type VerificationStatus = keyof typeof statusIcon;

package/build/components/VerificationIcon/type.js

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

package/build/components/ViewColumnRadioFilter/ViewColumnRadioFilter.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ViewColumnFilterProps } from './type';
+export default function ViewColumnRadioFilter({ menuLabel, options, selectedValue, onValueChange }: Readonly<ViewColumnFilterProps>): import("react").JSX.Element;

package/build/components/ViewColumnRadioFilter/ViewColumnRadioFilter.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { rightArrow } from '../../constants/index.js';
+import { RadioGroup } from '../index.js';
+import { SubMenu, FilterMenuItem } from './style';
+export default function ViewColumnRadioFilter({ menuLabel, options, selectedValue, onValueChange }) {
+    const [submenuAnchorEl, setSubmenuAnchorEl] = useState(null);
+    const [localSelectedValue, setLocalSelectedValue] = useState(selectedValue);
+    const menuItemRef = useRef(null);
+    useEffect(() => {
+        setLocalSelectedValue(selectedValue);
+    }, [selectedValue]);
+    const onOpen = (event) => {
+        setSubmenuAnchorEl(event.currentTarget);
+    };
+    const onClose = () => {
+        setSubmenuAnchorEl(null);
+    };
+    const onClick = (event) => {
+        event.stopPropagation();
+        setSubmenuAnchorEl(event.currentTarget);
+    };
+    const handleRadioChange = (value) => {
+        setLocalSelectedValue(value);
+        onValueChange(value);
+    };
+    return (_jsxs(FilterMenuItem, Object.assign({ ref: menuItemRef, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick, hideCheckbox: true }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: menuLabel })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(SubMenu, Object.assign({ open: Boolean(submenuAnchorEl), anchorEl: submenuAnchorEl, placement: "right-start" }, { children: _jsx(RadioGroup, { options: options, value: localSelectedValue || '', onOptionChange: handleRadioChange, defaultValue: options[0].value }) }))] })));
+}

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

@@ -0,0 +1 @@
+export { default as ViewColumnRadioFilter } from './ViewColumnRadioFilter';

package/build/components/ViewColumnRadioFilter/index.js

@@ -0,0 +1 @@
+export { default as ViewColumnRadioFilter } from './ViewColumnRadioFilter';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SubMenu: import("@emotion/styled").StyledComponent<Omit<import("../Menu/Menu").MenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const FilterMenuItem: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/ViewColumnRadioFilter/style.js

@@ -0,0 +1,20 @@
+import { styled } from '@mui/material/styles';
+import { MenuItem, Menu } from '../index.js';
+export const SubMenu = styled(Menu)(() => ({
+    marginTop: '-1px',
+    '&:hover': {
+        boxShadow: '0px 0px 16px 0px #00000021',
+    },
+}));
+export const FilterMenuItem = styled(MenuItem)(({ theme }) => ({
+    height: 40,
+    flex: 'unset',
+    paddingTop: 0,
+    paddingBottom: 0,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    paddingLeft: '16px',
+    maxHeight: '35px',
+    '.label': {
+        flexGrow: 1,
+    },
+}));

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

@@ -0,0 +1,9 @@
+export interface ViewColumnFilterProps {
+    menuLabel: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    selectedValue?: string;
+    onValueChange: (value: string) => void;
+}

package/build/components/ViewColumnRadioFilter/type.js

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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ISheetViewVirtualTable } from './types';
-declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, }: Readonly<ISheetViewVirtualTable>): import("react").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
 export default _default;

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

@@ -1,13 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback } from 'react';
-import { TABLE_THRESHOLD } from '../../../constants/index.js';
+import { memo, useCallback, useMemo, useRef, useEffect } from 'react';
+import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import { SheetViewTableContainer } from '../components/style';
 import { SheetViewVirtualTableWrapper } from './style';
-import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } from './hooks';
+import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, useTableDimensions } from './hooks';
+import { useColumnResize, useColumnResizeWithPinned, applyColumnWidths } from './features/resize';
+import { ResizeOverlay } from './features/resize/components';
 import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
-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, }) {
-    const { selectedCell, selectedColumn, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick } = useTableState();
+function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, }) {
+    // Custom hooks for state management
+    const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
+    // Refs and state for resize indicator positioning
+    const tableContainerRef = useRef(null);
+    const tableWrapperRef = useRef(null);
+    // Table data processing
     const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
         rows,
         isLoading,
@@ -15,9 +22,43 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         isFetchingNextPage,
         areAllRowsLoaded,
     });
+    // Column management
     const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
+    // Scroll synchronization
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
-    const { pinnedStartColumnsWidth, pinnedEndColumnsWidth } = usePinnedColumnsWidths(pinnedStartColumnsData, pinnedEndColumnsData);
+    // Reset virtual list cache when row count changes
+    useEffect(() => {
+        var _a, _b, _c;
+        // Reset all virtual lists to recalculate item sizes
+        (_a = pinnedStartVirtualListRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(0);
+        (_b = scrollableVirtualListRef.current) === null || _b === void 0 ? void 0 : _b.resetAfterIndex(0);
+        (_c = pinnedEndVirtualListRef.current) === null || _c === void 0 ? void 0 : _c.resetAfterIndex(0);
+    }, [rows.length, pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef]);
+    // Column resize functionality
+    const { columnWidths, isResizing, resizingColumn, resizeIndicatorX, cursorPosition, startResize, handleColumnClick: handleColumnClickWithResize, } = useColumnResize({
+        columns,
+        handleColumnClick,
+        windowId,
+        serviceCode,
+        tableContainerRef: tableWrapperRef,
+    });
+    // Table dimensions for resize indicator positioning
+    const tableDimensions = useTableDimensions({
+        tableContainerRef,
+        showHeader: showHeader !== null && showHeader !== void 0 ? showHeader : false,
+        isResizing,
+    });
+    // Column width calculations with dynamic resize support
+    const { pinnedStartColumnsWidth, pinnedEndColumnsWidth, pinnedStartColumnsDataWithWidths, pinnedEndColumnsDataWithWidths } = useColumnResizeWithPinned({
+        pinnedStartColumnsData,
+        pinnedEndColumnsData,
+        columnWidths,
+    });
+    // Apply dynamic widths to unpinned columns
+    const unpinnedColumnsDataWithWidths = useMemo(() => applyColumnWidths(unpinnedColumnsData, columnWidths), [unpinnedColumnsData, columnWidths]);
+    // Apply dynamic widths to ordered columns (for no-data view)
+    const orderedColumnsWithWidths = useMemo(() => applyColumnWidths(orderedColumns, columnWidths), [orderedColumns, columnWidths]);
+    // Virtual table container logic
     const { getItemSize, getItemDataForContainer } = useVirtualTableContainer({
         rowHeight,
         areAllRowsLoaded,
@@ -29,10 +70,13 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         isError,
         selectedCell,
         selectedColumn,
+        selectedRow,
+        selectedChip,
         handleCellClick,
+        handleChipClick,
     });
     const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
     };
     const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
         const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
@@ -40,7 +84,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
             const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
             handleScroll(scrollProps, source);
         };
-        return (_jsx(VirtualTable, { columnsData: columnsData, itemCount: itemsCount, lastItemIndex: lastItemIndex, areAllRowsLoaded: areAllRowsLoaded, loadMoreItems: loadMoreItems, threshold: threshold, getItemSize: getItemSize, getItemData: getItemDataForContainer, isPinned: isPinned, fixedWidth: fixedWidth, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, onScroll: handleScrollCallback, setBackdropVisibility: setShowBackdrop, listRef: listRef }));
+        return (_jsx(VirtualTable, { columnsData: columnsData, itemCount: itemsCount, lastItemIndex: lastItemIndex, areAllRowsLoaded: areAllRowsLoaded, loadMoreItems: loadMoreItems, threshold: threshold, getItemSize: getItemSize, getItemData: getItemDataForContainer, isPinned: isPinned, fixedWidth: fixedWidth, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, onScroll: handleScrollCallback, setBackdropVisibility: setShowBackdrop, listRef: listRef, overscanCount: overscanCount }));
     }, [
         itemsCount,
         lastItemIndex,
@@ -57,6 +101,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         pinnedStartVirtualListRef,
         pinnedEndVirtualListRef,
         scrollableVirtualListRef,
+        overscanCount,
     ]);
     const baseCommonProps = {
         showHeader,
@@ -68,7 +113,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         isPinnable,
         lastColumnId,
         selectedColumn,
-        onColumnClick: handleColumnClick,
+        onColumnClick: handleColumnClickWithResize,
         tableTitle,
         areAllRowsLoaded,
         isFetchingNextPage,
@@ -78,9 +123,16 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         tableMode,
         showNoDataView,
         tableBodyStyles,
+        onStartResize: startResize,
+        isResizing,
+        resizingColumn,
     };
     const commonPropsWithTableStates = Object.assign(Object.assign({}, baseCommonProps), { hasTimeoutError,
         tableLoading });
-    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { children: showNoDataView ? (tableLoading ? (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(LoadingMainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) : (_jsx(NoDataView, Object.assign({ tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumns, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }, baseCommonProps)))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(MainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, Object.assign({ ref: tableContainerRef }, { children: showNoDataView ? (tableLoading ? (
+                // Show same table structure with pinned columns during loading, but with skeleton rows
+                _jsxs(SheetViewVirtualTableWrapper, Object.assign({ ref: tableWrapperRef }, { children: [pinnedStartColumnsDataWithWidths.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsDataWithWidths, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(LoadingMainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, unpinnedColumnsData: unpinnedColumnsDataWithWidths, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns }, commonPropsWithTableStates)), pinnedEndColumnsDataWithWidths.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsDataWithWidths, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] }))) : (
+                // Non-loading error states
+                _jsx(NoDataView, Object.assign({ tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumnsWithWidths, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps, customNoDataComponent: customNoDataComponent }, baseCommonProps)))) : (_jsxs(SheetViewVirtualTableWrapper, Object.assign({ ref: tableWrapperRef }, { children: [pinnedStartColumnsDataWithWidths.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsDataWithWidths, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(MainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, unpinnedColumnsData: unpinnedColumnsDataWithWidths, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)), pinnedEndColumnsDataWithWidths.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsDataWithWidths, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsDataWithWidths.length > 0, hasPinnedEnd: pinnedEndColumnsDataWithWidths.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] }))) })), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps)), _jsx(ResizeOverlay, { isVisible: isResizing, indicatorX: resizeIndicatorX, indicatorHeight: tableDimensions.height, indicatorTop: tableDimensions.top, iconX: cursorPosition.x, iconY: cursorPosition.y })] }));
 }
 export default memo(SheetViewVirtualTable);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { LoadingMainTableProps } from '../types';
-declare function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, }: LoadingMainTableProps): import("react/jsx-runtime").JSX.Element;
+declare function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, }: LoadingMainTableProps): import("react").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof LoadingMainTable>;
 export default _default;

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

@@ -12,8 +12,10 @@ function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, s
                             minWidth: 'fit-content',
                         } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
                                 height: '100%',
+                                maxHeight: '100%',
                                 display: 'flex',
                                 flexDirection: 'column',
+                                overflow: 'hidden',
                             } }, { children: _jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false }) })) }))] })) })) })));
 }
 export default memo(LoadingMainTable);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { MainTableProps } from '../types';
-declare function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, tableLoading, createVirtualTableContainer, }: MainTableProps): import("react/jsx-runtime").JSX.Element;
+declare function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, tableLoading, createVirtualTableContainer, onStartResize, isResizing, resizingColumn, }: MainTableProps): import("react").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof MainTable>;
 export default _default;

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

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