@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.fix.1

package/build/components/VirtualTables/components/TableFooter/style.d.ts

@@ -15,12 +15,12 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const Title: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const ValueWrapper: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TableHeaderProps } from './type';
-declare function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView, totalCount }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableHeader>;
 export default _default;

package/build/components/VirtualTables/components/TableHeader/TableHeader.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { TableCell } from './components';
 import { StyledHeader, StyledMUITableRow } from './style';
-function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView }) {
+function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView, totalCount }) {
     return (_jsx(StyledHeader, Object.assign({ component: "nav", "data-testid": "VirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { children: _jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "VirtualTable_TableHeader_StyledMUITableRow", isSheetView: isSheetView }, { children: columns.map((column, colIndex) => {
-                return (_jsx(TableCell, { column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, isSheetView: isSheetView }, `${column.id}-${colIndex}`));
+                return (_jsx(TableCell, { column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, isSheetView: isSheetView, totalCount: totalCount }, `${column.id}-${colIndex}`));
             }) })) })));
 }
 export default memo(TableHeader);

package/build/components/VirtualTables/components/TableHeader/components/TableCell/TableCell.d.ts

@@ -4,6 +4,7 @@ interface TableCellProps extends Pick<TableHeaderProps, 'onColumnSort' | 'isShee
     column: IColumnProps;
     isFirst: boolean;
     isLast: boolean;
+    totalCount?: number;
 }
-export declare function TableCell({ column: { header, id, align, headerStyle, sortable, filter, width, order }, isFirst, isLast, isSheetView, onColumnSort, columnsSorting, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableCell({ column: { header, id, align, headerStyle, sortable, filter, width, order }, isFirst, isLast, isSheetView, onColumnSort, columnsSorting, totalCount, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/VirtualTables/components/TableHeader/components/TableCell/TableCell.js

@@ -4,11 +4,13 @@ import Box from '@mui/material/Box';
 import ColumnFilter from '../../../../../VirtualTables/components/ColumnFilter';
 import ColumnSort from '../../../../../VirtualTables/components/ColumnSort';
 import { StyledCell, TableHeaderInner } from '../../../../../VirtualTables/components/style';
-export function TableCell({ column: { header, id, align, headerStyle, sortable, filter, width, order }, isFirst, isLast, isSheetView, onColumnSort, columnsSorting, }) {
+import useColumnFilter from '../../../../../VirtualTables/hooks/useColumnFilter';
+export function TableCell({ column: { header, id, align, headerStyle, sortable, filter, width, order }, isFirst, isLast, isSheetView, onColumnSort, columnsSorting, totalCount, }) {
     const [columnFilterEl, setColumnFilterEl] = useState(null);
     const cellRef = useRef(null);
+    const { isFilterApplied, filterDisabled } = useColumnFilter({ filter, totalCount });
     const onOpenFilterDropdown = () => {
         setColumnFilterEl(cellRef.current);
     };
-    return (_jsx(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_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, isFirst: isFirst, isLast: isLast, ref: cellRef, sx: (theme) => (Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: width, textAlign: align, overflow: 'unset', fontWeight: 600 }, headerStyle)), isSheetView: isSheetView }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: onOpenFilterDropdown }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl })), sortable && _jsx(ColumnSort, { onColumnSort: onColumnSort, columnsSorting: columnsSorting, columnId: id })] })) })));
+    return (_jsx(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_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, isFirst: isFirst, isLast: isLast, ref: cellRef, sx: (theme) => (Object.assign(Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: width, textAlign: align, overflow: 'unset', fontWeight: 600 }, (filterDisabled && { cursor: 'not-allowed' })), headerStyle)), isSheetView: isSheetView }, { children: _jsxs(TableHeaderInner, Object.assign({ disabled: filterDisabled, onClick: onOpenFilterDropdown }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, isFilterApplied: isFilterApplied, disabled: filterDisabled }))), sortable && _jsx(ColumnSort, { onColumnSort: onColumnSort, columnsSorting: columnsSorting, columnId: id })] })) })));
 }

package/build/components/VirtualTables/components/TableHeader/style.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 export declare const StyledHeader: import("@emotion/styled").StyledComponent<import("@mui/material/TableHead").TableHeadOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
     ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+}, "classes" | "className" | "style" | "children" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     showBackDrop: boolean;
 }, {}, {}>;
 export declare const StyledMUITableRow: import("@emotion/styled").StyledComponent<import("@mui/material/TableRow").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
-}, "style" | "selected" | "className" | "classes" | "children" | "sx" | "hover"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+}, "classes" | "className" | "style" | "children" | "selected" | "sx" | "hover"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isSheetView?: boolean | undefined;
     component: string;
 }, {}, {}>;

package/build/components/VirtualTables/components/TableHeader/type.d.ts

@@ -7,4 +7,5 @@ export interface TableHeaderProps {
     onColumnSort?: IVirtualTable['onColumnSort'];
     showBackDrop: boolean;
     isSheetView?: boolean;
+    totalCount?: number;
 }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type TableRowProps } from '@mui/material';
 import type { IColumnProps } from '../../../types/index.js';
 interface ITableRowProps<R = any> {
@@ -13,11 +13,12 @@ interface ITableRowProps<R = any> {
     isSheetView?: boolean;
     selectedCell?: string | null;
     selectedColumn?: string | null;
+    selectedRow?: number | null;
     selectedChip?: string | null;
     onCellClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
     onChipClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
     isLastRow?: boolean;
 }
-declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, selectedChip, onCellClick, isLastRow, onChipClick, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
+declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, selectedRow, selectedChip, onCellClick, isLastRow, onChipClick, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TableRow>;
 export default _default;

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

@@ -1,16 +1,18 @@
 import { createElement as _createElement } from "react";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { Box } from '@mui/material';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from './style';
-import { getSelectionStyles } from '../../../utils/index.js';
-function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, selectedChip = null, onCellClick, isLastRow = false, onChipClick, }) {
-    const renderCell = (column, rowIndex, colIndex) => {
+import { getSelectionStyles, getRowSelectionBorderStyles } from '../../../utils/index.js';
+function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, selectedRow = null, selectedChip = null, onCellClick, isLastRow = false, onChipClick, }) {
+    // Memoize chip click handler to prevent recreation on every render
+    const handleChipClick = React.useCallback((colIndex, pinned) => (event, chipIndex) => {
+        onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(index, colIndex, event, chipIndex, pinned);
+    }, [onChipClick, index]);
+    // Memoize cell renderer to prevent recreation
+    const renderCell = React.useCallback((column, rowIndex, colIndex) => {
         const { render, format, selector } = column;
-        const handleChipClick = (event, chipIndex) => {
-            onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(rowIndex, colIndex, event, chipIndex, column.pinned);
-        };
         if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
             return null;
         const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
@@ -20,34 +22,72 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
             column,
             index,
             value: row[column === null || column === void 0 ? void 0 : column.id],
-            selectionProps: { onClick: handleChipClick, rowIndex, colIndex, selectedId: selectedChip },
+            selectionProps: { onClick: handleChipClick(colIndex, column.pinned), rowIndex, colIndex, selectedId: selectedChip },
         })) : (_jsx(_Fragment, { children: formattedValue }));
-    };
-    const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
-            var _a, _b;
-            const cellKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${index}-${colIndex}`;
-            const isCellSelected = selectedCell === cellKey;
-            const columnKey = `${(_b = column.pinned) !== null && _b !== void 0 ? _b : 'default'}-${colIndex}`;
-            const isColumnSelected = selectedColumn === columnKey;
-            const isSelected = isCellSelected || isColumnSelected;
-            const selectionStyles = getSelectionStyles({
-                isSelected,
-                isCellSelected,
-                isColumnSelected,
-                isLastRow,
-            });
-            const isFirstColumn = column.id === columns[0].id;
-            const isLastColumn = column.id === columns[columns.length - 1].id;
-            let effectiveFirst = isFirstColumn;
-            let effectiveLast = isLastColumn;
-            if (!column.pinned) {
-                effectiveFirst = isFirstColumn && column.pinned !== 'start';
-                effectiveLast = isLastColumn && column.pinned !== 'end';
-            }
-            return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: effectiveFirst, isLast: effectiveLast, onClick: (event) => {
-                    onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned);
-                }, sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: _jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1, width: '100%' } }, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
-        }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow, selectedChip, isSheetView]);
+    }, [row, index, selectedChip, handleChipClick]);
+    // Pre-compute if any selection is active
+    const hasActiveSelection = selectedCell !== null || selectedColumn !== null || selectedRow !== null;
+    // Memoize cell click handler
+    const handleCellClick = React.useCallback((colIndex, pinned) => (event) => {
+        onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, pinned);
+    }, [onCellClick, index]);
+    const content = useMemo(() => {
+        var _a, _b;
+        const firstColumnId = (_a = columns[0]) === null || _a === void 0 ? void 0 : _a.id;
+        const lastColumnId = (_b = columns[columns.length - 1]) === null || _b === void 0 ? void 0 : _b.id;
+        const isRowSelected = selectedRow === index;
+        return (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
+                var _a, _b;
+                // Early exit for invalid columns
+                if (!(column === null || column === void 0 ? void 0 : column.id))
+                    return null;
+                // Cache cell identifiers
+                const cellKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${index}-${colIndex}`;
+                const columnKey = `${(_b = column.pinned) !== null && _b !== void 0 ? _b : 'default'}-${colIndex}`;
+                // Calculate selection states only if there's an active selection
+                const isCellSelected = hasActiveSelection && selectedCell === cellKey;
+                const isColumnSelected = hasActiveSelection && selectedColumn === columnKey;
+                const isSelected = hasActiveSelection && (isCellSelected || isColumnSelected || isRowSelected);
+                // getSelectionStyles already handles the empty return if !isSelected
+                const selectionStyles = getSelectionStyles({
+                    isSelected,
+                    isCellSelected,
+                    isColumnSelected,
+                    isRowSelected,
+                    isLastRow,
+                });
+                // Determine if this cell should be treated as first/last for border radius
+                const isFirstColumn = column.id === firstColumnId;
+                const isLastColumn = column.id === lastColumnId;
+                // For scrollable table, adjust first/last based on pinned tables
+                const effectiveFirst = !column.pinned ? isFirstColumn && column.pinned !== 'start' : isFirstColumn;
+                const effectiveLast = !column.pinned ? isLastColumn && column.pinned !== 'end' : isLastColumn;
+                // Handle border styling for row selection only when needed
+                const rowSelectionBorderStyles = isRowSelected && hasActiveSelection
+                    ? getRowSelectionBorderStyles({
+                        effectiveFirst,
+                        isPinnedStart: column.pinned === 'start',
+                        isPinnedEnd: column.pinned === 'end',
+                    })
+                    : {};
+                const isIndexColumn = column.pinned === 'start' && effectiveFirst;
+                return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: effectiveFirst, isLast: effectiveLast, onClick: handleCellClick(colIndex, column.pinned), sx: Object.assign(Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: isIndexColumn ? 'center' : column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), rowSelectionBorderStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: isSheetView ? (_jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1, width: '100%' } }, { children: renderCell(column, index, colIndex) }))) : (_jsx(_Fragment, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
+            }) }));
+    }, [
+        columns,
+        row,
+        index,
+        selectedCell,
+        selectedColumn,
+        selectedRow,
+        hasActiveSelection,
+        onCellClick,
+        isLastRow,
+        selectedChip,
+        isSheetView,
+        renderCell,
+        handleCellClick,
+    ]);
     return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
 }
 export default memo(TableRow, areEqual);

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

@@ -19,9 +19,7 @@ export declare const StyledCell: import("@emotion/styled").StyledComponent<impor
     isSheetView?: boolean | undefined;
     isSelected?: boolean | undefined;
 }, {}, {}>;
-export declare const TableHeaderInner: 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 TableHeaderInner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 interface StyledVirtualListProps {
     areTotalRowsNotFillingHeight: boolean;
     isSheetView?: boolean;
@@ -34,10 +32,11 @@ export declare const StyledVirtualList: import("@emotion/styled").StyledComponen
 } & import("react").RefAttributes<import("react-window").VariableSizeList<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledVirtualListProps, {}, {}>;
 export declare const StyledTableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
-}, "style" | "selected" | "className" | "classes" | "children" | "sx" | "hover"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, "classes" | "className" | "style" | "children" | "selected" | "sx" | "hover"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     showShadowHighlight?: boolean | undefined;
     showLoadedStyle?: boolean | undefined;
     isSheetView?: boolean | undefined;
+    isSelected?: boolean | undefined;
 }, {}, {}>;
 export declare const StyledTableBox: 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;
@@ -49,12 +48,11 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
+    loading?: "eager" | "lazy" | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -62,20 +60,21 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -95,7 +94,7 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -111,7 +110,7 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -121,7 +120,7 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -309,13 +308,13 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     useMap?: string | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     sizes?: string | undefined;
     src?: string | undefined;
     alt?: string | undefined;
     decoding?: "auto" | "async" | "sync" | undefined;
-    loading?: "eager" | "lazy" | undefined;
     fetchPriority?: "auto" | "high" | "low" | undefined;
     srcSet?: string | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLImageElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/VirtualTables/components/style.js

@@ -51,11 +51,27 @@ export const StyledCell = styled(TableCell, {
         },
     }));
 });
-export const TableHeaderInner = styled(Box)(({ theme }) => ({
+export const TableHeaderInner = styled('button')(({ theme }) => ({
     zIndex: 1,
     display: 'flex',
     gap: theme.spacing(0.5),
     alignItems: 'center',
+    overflow: 'hidden',
+    maxWidth: '100%',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    padding: 0,
+    margin: 0,
+    color: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    boxSizing: 'border-box',
+    ':disabled': {
+        cursor: 'not-allowed',
+    },
 }));
 export const StyledVirtualList = styled(VirtualScrollList, {
     shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),
@@ -63,7 +79,7 @@ export const StyledVirtualList = styled(VirtualScrollList, {
     backgroundColor: theme.palette.common.white,
 }))));
 export const StyledTableRow = styled(MUITableRow, {
-    shouldForwardProp: (props) => !['showShadowHighlight', 'showLoadedStyle', 'isSheetView'].includes(props),
+    shouldForwardProp: (props) => !['showShadowHighlight', 'showLoadedStyle', 'isSheetView', 'isSelected'].includes(props),
 })(({ theme, showShadowHighlight, showLoadedStyle, isSheetView }) => (Object.assign({ display: 'flex', borderBottom: `1px solid ${theme === null || theme === void 0 ? void 0 : theme.palette.divider}`, position: 'relative', height: '100%', width: '100%' }, (!isSheetView && Object.assign(Object.assign({ paddingInline: '32px', '&:hover': {
         boxShadow: theme.shadows[12],
         zIndex: 1,
@@ -146,7 +162,7 @@ export const SheetViewTableContainer = styled(Box)(() => ({
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    height: 'calc(100vh - 300px)',
+    height: '100%',
     paddingInline: '28px',
     borderRadius: '8px',
     marginBottom: '16px !important',

package/build/components/VirtualTables/components/virtualScroll/ListItemWrapper.d.ts

@@ -9,6 +9,7 @@ export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow,
 }) => import("react/jsx-runtime").JSX.Element>;
 export declare const StyledItemWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     showShadowHighlight?: boolean | undefined;
+    isSheetView?: boolean | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned, isLoadMoreLoading, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
 export default ListItemWrapper;

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

@@ -39,6 +39,7 @@ export const LastRowContent = React.memo(({ isLoadingRow, isSheetView, columns,
     }
     return _jsx(StyledParagraph, Object.assign({ "data-testid": "ListItemWrapper_lastRowContent" }, { children: t('allRecordsHaveBeenSuccessfullyLoaded') }));
 });
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createRowClickHandler = (row, onRowClick) => (e) => {
     var _a;
     (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
@@ -46,8 +47,8 @@ const createRowClickHandler = (row, onRowClick) => (e) => {
 };
 export const StyledItemWrapper = styled('div', {
     shouldForwardProp: (props) => props !== 'showShadowHighlight' && props !== 'isSheetView',
-})(({ theme }) => ({
-    height: '100%',
+})(({ theme, isSheetView }) => ({
+    height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : '100%',
     backgroundColor: theme.palette.background.default,
 }));
 function ListItemWrapper(_a) {
@@ -58,6 +59,7 @@ function ListItemWrapper(_a) {
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
     const isLoadedRow = index <= newLoadedRowsEndIndex;
     const rowClickHandler = React.useCallback(() => createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
+    // Memoize the row props object
     const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler]);
     const renderSheetViewLoadingRow = React.useCallback((lastRowContent) => {
         return (_jsx(Box, Object.assign({ sx: {
@@ -105,6 +107,6 @@ function ListItemWrapper(_a) {
         renderSheetViewLoadingRow,
         isLoadMoreLoading,
     ]);
-    return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
+    return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper", isSheetView: isSheetView }, { children: memoizedListItemComponent })) })));
 }
 export default ListItemWrapper;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import TableRowWithCard from '../TableRowWithCard';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createRowClickHandler = (row, onRowClick) => (e) => {
     var _a;
     (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
@@ -19,6 +20,7 @@ function ListItemWrapperWithCard({ index, style, data: { renderedScrollTopRef, r
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
     const isLoadedRow = index <= newLoadedRowsEndIndex;
     const rowClickHandler = React.useCallback(createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
+    // Memoize the row props object
     const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler, isLoadingRow, areAllRowsLoaded, lastItemIndex]);
     const memoizedListItemComponent = React.useMemo(() => _jsx(TableRowWithCard, { index: index, row: row, renderCardComponent: renderCardComponent, rowProps: memoizedRowProps }, `row-${index}`), [index, row, memoizedRowProps]);
     return (_jsx("div", Object.assign({ "data-testid": "ListCardWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - renderedScrollTopRef.current, willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListCardWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));

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

@@ -22,10 +22,21 @@ const VirtualScrollList = React.forwardRef((_a, ref) => {
         setBackdropVisibility,
         clearBackdropVisibilityTimeout,
     });
+    // renderedScrollTopRef - when render is started (listRef.current.scrollTo is called)
+    //   this ref holds scrollTop position which has been passed to scrollTo function
+    // scrollTopRef - this is scrollTop from last onScroll event.
+    //   onScroll can be fired when render is still in progress. So scrollTop will be just saved
+    //   When scroll will end, saved scrollTop will be used to start new render.
+    //   Subsequent onScroll will overwrite this number, as we will not render intermediate scroll states
+    // scrollLocked - is true, when render has been started.
+    //   This is used to now start several renders simulaneously
+    // listRef - VariableSizeList ref to call scrollTo method
     const renderedScrollTopRef = useRef(0);
     const scrollTopRef = useRef(undefined);
     const scrollLocked = useRef(false);
+    // Use external ref if provided, otherwise create local
     const internalListRef = useRef(null);
+    // If ref is provided, use it; else use externalListRef; else use internalListRef
     const listRef = ref || externalListRef || internalListRef;
     const scrollTo = useCallback(() => {
         var _a, _b;
@@ -59,6 +70,10 @@ const VirtualScrollList = React.forwardRef((_a, ref) => {
         onScroll === null || onScroll === void 0 ? void 0 : onScroll(props);
         scrollLocked.current = scrollTo();
     }, [scrollTo, onScroll]);
-    return (_jsx(VirtualScrollOuterProvider, Object.assign({ value: handleScroll }, { children: _jsx(VariableSizeList, Object.assign({ ref: listRef, "data-testid": "VirtualScrollList", itemData: itemDataInternal, outerElementType: VirtualScrollOuter, innerElementType: VirtualScrollInner }, restProps, { onScroll: handleOnScroll }, { children: children })) })));
+    return (_jsx(VirtualScrollOuterProvider, Object.assign({ value: handleScroll }, { children: _jsx(VariableSizeList, Object.assign({ ref: listRef, "data-testid": "VirtualScrollList", itemData: itemDataInternal, 
+            // @ts-ignore
+            outerElementType: VirtualScrollOuter, 
+            // @ts-ignore
+            innerElementType: VirtualScrollInner }, restProps, { onScroll: handleOnScroll }, { children: children })) })));
 });
 export default VirtualScrollList;

package/build/components/VirtualTables/hooks/useColumnFilter.d.ts

@@ -0,0 +1,10 @@
+import { IColumnFilter } from '../../../types/index.js';
+type UseColumnFilterParams = {
+    filter?: IColumnFilter;
+    totalCount?: number;
+};
+declare const useColumnFilter: (params: UseColumnFilterParams) => {
+    isFilterApplied: boolean;
+    filterDisabled: boolean;
+};
+export default useColumnFilter;

package/build/components/VirtualTables/hooks/useColumnFilter.js

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+const useColumnFilter = (params) => {
+    const { filter, totalCount } = params;
+    const filterData = useMemo(() => { var _a; return ((_a = filter === null || filter === void 0 ? void 0 : filter.options) === null || _a === void 0 ? void 0 : _a.reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = filter === null || filter === void 0 ? void 0 : filter.data) === null || _a === void 0 ? void 0 : _a[apiKey] })); }, {})) || {}; }, [filter]);
+    const listFilterData = useMemo(() => {
+        var _a;
+        const listFilter = filter;
+        const rawData = (_a = listFilter === null || listFilter === void 0 ? void 0 : listFilter.data) === null || _a === void 0 ? void 0 : _a[listFilter.apiKey];
+        return Array.isArray(rawData) ? rawData : [];
+    }, [filter]);
+    const isFilterApplied = useMemo(() => Object.values(filterData || {}).some((value) => {
+        if (typeof value === 'string' || Array.isArray(value))
+            return value.length > 0;
+        return value != null;
+    }) || listFilterData.length > 0, [filterData, listFilterData]);
+    const filterDisabled = !isFilterApplied && totalCount === 0;
+    return {
+        isFilterApplied,
+        filterDisabled,
+    };
+};
+export default useColumnFilter;

package/build/components/Widget/List.d.ts

@@ -2,7 +2,8 @@ import { type ReactNode } from 'react';
 import { BoxProps } from '@mui/material/Box';
 interface ListI extends BoxProps {
     children: ReactNode;
+    allowShadow?: boolean;
 }
-declare function List({ children, ...props }: ListI): import("react/jsx-runtime").JSX.Element;
+declare function List({ allowShadow, children, ...props }: ListI): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof List>;
 export default _default;

package/build/components/Widget/List.js

@@ -16,8 +16,8 @@ import { listShadowBg } from '../../constants/index.js';
 import { ListStyled } from './style';
 import { useScrollWithShadow } from './useScrollWithShadow';
 function List(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
+    var { allowShadow = true, children } = _a, props = __rest(_a, ["allowShadow", "children"]);
     const { onScrollHandler, showShadow } = useScrollWithShadow();
-    return (_jsxs(ListStyled, Object.assign({ component: "ul", "data-testid": "Widget_List", onScroll: onScrollHandler }, props, { children: [children, showShadow && _jsx(Box, { component: "img", src: listShadowBg, sx: { width: '100%', position: 'fixed', bottom: 0, pointerEvents: 'none' } })] })));
+    return (_jsxs(ListStyled, Object.assign({ component: "ul", "data-testid": "Widget_List", onScroll: onScrollHandler }, props, { children: [children, showShadow && allowShadow && (_jsx(Box, { component: "img", src: listShadowBg, sx: { width: '100%', position: 'fixed', bottom: 0, pointerEvents: 'none' } }))] })));
 }
 export default memo(List);