@tap-payments/os-micro-frontend-shared 0.0.276 → 0.0.278-test.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

package/build/components/CustomBackdrop/CustomBackdrop.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
-declare function CustomBackdrop(props: BoxProps): import("react/jsx-runtime").JSX.Element;
+declare function CustomBackdrop(props: BoxProps): import("react").ReactPortal;
 declare const _default: import("react").MemoExoticComponent<typeof CustomBackdrop>;
 export default _default;

package/build/components/CustomBackdrop/CustomBackdrop.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
+import ReactDOM from 'react-dom';
 import { CustomBackdropStyled } from './style';
 function CustomBackdrop(props) {
-    return _jsx(CustomBackdropStyled, Object.assign({}, props));
+    return ReactDOM.createPortal(_jsx(CustomBackdropStyled, Object.assign({}, props)), document.body);
 }
 export default memo(CustomBackdrop);

package/build/components/CustomBackdrop/style.js

@@ -5,5 +5,5 @@ export const CustomBackdropStyled = styled(Box)(() => ({
     bottom: 0,
     right: 0,
     left: 0,
-    zIndex: 2,
+    zIndex: 999,
 }));

package/build/components/TableCells/CustomCells/DestinationCell/DestinationCell.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Tooltip from '../../../Tooltip';
 import { destinationSolidIcon } from '../../../../constants/index.js';
 import { formatAmount } from '../../../../utils/index.js';
@@ -18,37 +18,40 @@ import TableCell from '../../TableCell';
 import { TextLabel } from '../style';
 import { CurrencyIcon, StatusGroupChips } from '../../../index.js';
 function DestinationCell(_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
+    var _b, _c, _d, _e, _f;
     var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection", "tableMode"]);
     const destinations = (destination === null || destination === void 0 ? void 0 : destination.destination) || [];
     const formattedAmount = formatAmount(destinationsAmount || 0);
     const firstDestinationFormattedAmount = formatAmount(((_b = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _b === void 0 ? void 0 : _b.amount) || 0);
-    if (!destinationsCount || hidden) {
-        return null;
-    }
-    if (tableMode === 'sheet') {
-        const sheetViewChips = [
-            {
-                key: 'id',
-                content: (_c = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _c === void 0 ? void 0 : _c.id,
-            },
-            {
-                key: 'amount',
-                content: (_jsxs(_Fragment, { children: [_jsx(CurrencyIcon, { currency: (_d = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _d === void 0 ? void 0 : _d.currency }), (destinationsCount || 0) > 1
-                            ? `${firstDestinationFormattedAmount.integerAmount}.${firstDestinationFormattedAmount.decimalAmount} +${(destinationsCount || 0) - 1}`
-                            : `${formattedAmount.integerAmount}.${formattedAmount.decimalAmount}`] })),
-            },
-        ];
+    const isSheetView = tableMode === 'sheet';
+    if (isSheetView) {
+        const sheetViewChips = destinations === null || destinations === void 0 ? void 0 : destinations.reduce((acc, dest) => {
+            const formattedDestAmount = formatAmount((dest === null || dest === void 0 ? void 0 : dest.amount) || 0);
+            return [
+                ...acc,
+                {
+                    key: 'id',
+                    content: dest === null || dest === void 0 ? void 0 : dest.id,
+                },
+                {
+                    key: 'amount',
+                    content: (_jsxs(_Fragment, { children: [_jsx(CurrencyIcon, { currency: dest === null || dest === void 0 ? void 0 : dest.currency }), _jsxs("span", { children: [formattedDestAmount.integerAmount, ".", formattedDestAmount.decimalAmount] })] })),
+                },
+            ];
+        }, []);
         return (_jsx(TableCell, Object.assign({ sx: {
                 width: 'fit-content',
                 overflow: 'visible',
             } }, props, { children: _jsx(StatusGroupChips, { chips: sheetViewChips }) })));
     }
+    if (!destinationsCount || hidden) {
+        return null;
+    }
     const textView = (_jsx(TextLabel, Object.assign({ sx: {
             textAlign: 'left',
             justifyContent: 'flex-start',
             height: 'auto',
-        } }, { children: destinationsCount > 1 ? (_jsxs("div", { children: ["Destination ", (_e = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _e === void 0 ? void 0 : _e.id, " - ", _jsx(CurrencyIcon, { currency: (_f = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _f === void 0 ? void 0 : _f.currency }), ' ', firstDestinationFormattedAmount.integerAmount, ".", firstDestinationFormattedAmount.decimalAmount, " +", destinationsCount - 1] })) : (_jsxs("div", { children: ["Destination ", (_g = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _g === void 0 ? void 0 : _g.id, " - ", _jsx(CurrencyIcon, { currency: (_h = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _h === void 0 ? void 0 : _h.currency }), " ", formattedAmount.integerAmount, ".", formattedAmount.decimalAmount] })) })));
+        } }, { children: destinationsCount > 1 ? (_jsxs("div", { children: ["Destination ", (_c = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _c === void 0 ? void 0 : _c.id, " - ", _jsx(CurrencyIcon, { currency: (_d = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _d === void 0 ? void 0 : _d.currency }), ' ', firstDestinationFormattedAmount.integerAmount, ".", firstDestinationFormattedAmount.decimalAmount, " +", destinationsCount - 1] })) : (_jsxs("div", { children: ["Destination ", (_e = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _e === void 0 ? void 0 : _e.id, " - ", _jsx(CurrencyIcon, { currency: (_f = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _f === void 0 ? void 0 : _f.currency }), " ", formattedAmount.integerAmount, ".", formattedAmount.decimalAmount] })) })));
     return (_jsx(TableCell, Object.assign({ sx: {
             width: 'fit-content',
             overflow: 'visible',

package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js

@@ -12,6 +12,7 @@ import { useMemo, memo, useState, useCallback } from 'react';
 import { useTheme } from '@mui/material/styles';
 import memoize from 'memoize-one';
 import InfiniteLoader from 'react-window-infinite-loader';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import { TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, TABLE_ROW_HEIGHT } from '../../../constants/index.js';
 import { useDelayToSetValue } from '../../../hooks/index.js';
 import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
@@ -22,8 +23,7 @@ import { SheetViewTableNoData } from './components';
 import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
 import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from '../style';
 import { SheetViewVirtualTableWrapper, PinnedStartColumnWrapper, PinnedEndColumnWrapper, MainTableWrapper, UnpinnedTableHeaderWrapper } from './style';
-import SheetViewTableHeader from './SheetViewTableHeader';
-import AutoSizer from 'react-virtualized-auto-sizer';
+import SheetViewTableHeader from './components/SheetViewTableHeader';
 import { usePinnedColumns } from './hooks/usePinnedColumns';
 import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
 const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick) => ({
@@ -59,9 +59,6 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
     }, []);
     const handleColumnClick = useCallback((columnId, event) => {
         event.stopPropagation();
-        if (event.target !== event.currentTarget) {
-            return;
-        }
         setSelectedColumn((prev) => (prev === columnId ? null : columnId));
         setSelectedCell(null);
     }, []);
@@ -99,7 +96,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         };
         return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: () => rowHeight, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
                         overflowX: isPinned ? 'hidden' : 'auto',
-                        paddingBottom: '12px',
+                        paddingBottom: isPinned ? '25px' : '13px',
                         backgroundColor: isPinned ? 'transparent' : theme.palette.background.default,
                     } }, { children: ListItemWrapper }))) })) })));
     }, [

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { type TableHeadProps } from '@mui/material';
-import type { IColumnProps, IVirtualTable } from '../../../types/index.js';
+import { type TableHeadProps } from '@mui/material/TableHead';
+import type { IColumnProps, IVirtualTable } from '../../../../../types/index.js';
 interface SheetViewTableHeaderProps {
     columns: IColumnProps[];
     headerProps?: TableHeadProps;

package/build/components/VirtualTable/SheetView/components/SheetViewTableHeader/SheetViewTableHeader.js

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

package/build/components/VirtualTable/SheetView/components/SheetViewTableHeader/TableCell.d.ts

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

package/build/components/VirtualTable/SheetView/components/SheetViewTableHeader/TableCell.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useState } from 'react';
+import Box from '@mui/material/Box';
+import { pinIcon, unpinIcon } from '../../../../../constants/index.js';
+import ColumnFilter from '../../../components/ColumnFilter';
+import { StyledCell } from '../../../style';
+import { PinIconContainer, HeaderText } from '../../style';
+import ColumnSort from '../../../../VirtualTable/components/ColumnSort';
+function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }) {
+    const [columnFilterEl, setColumnFilterEl] = useState(null);
+    const checkIsPanned = useCallback((columnId) => pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId), [pinnedColumns]);
+    const isPinned = useMemo(() => checkIsPanned(id), [id, checkIsPanned]);
+    const handlePinClick = (columnId) => {
+        if (checkIsPanned(columnId)) {
+            onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'unpin');
+        }
+        else {
+            if (columnId === lastColumnId) {
+                onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'end');
+            }
+            else {
+                onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'start');
+            }
+        }
+    };
+    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => {
+            onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
+            setColumnFilterEl(event.currentTarget);
+        }, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle)) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
+                    onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
+                } }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
+                    onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, e);
+                } })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
+                    event.stopPropagation();
+                    handlePinClick(id);
+                }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] })));
+}
+export default memo(TableCell);

package/build/components/VirtualTable/SheetView/components/SheetViewTableHeader/index.d.ts

@@ -0,0 +1,2 @@
+import SheetViewTableHeader from './SheetViewTableHeader';
+export default SheetViewTableHeader;

package/build/components/VirtualTable/SheetView/components/SheetViewTableHeader/index.js

@@ -0,0 +1,2 @@
+import SheetViewTableHeader from './SheetViewTableHeader';
+export default SheetViewTableHeader;

package/build/components/VirtualTable/SheetView/components/SheetViewTableHeader/type.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { TableHeaderProps } from '../../../../VirtualTable/components/TableHeader/type';
+import { IColumnProps, IVirtualTable } from '../../../../../types/index.js';
+export interface SheetViewTableHeaderProps {
+    columns: IColumnProps[];
+    headerProps?: TableHeaderProps;
+    columnsSorting?: IVirtualTable['columnsSorting'];
+    onColumnSort?: IVirtualTable['onColumnSort'];
+    showBackDrop: boolean;
+    pinnedColumns?: string[];
+    onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
+    isPinnable?: boolean;
+    lastColumnId?: string | null;
+    selectedColumn?: string | null;
+    onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
+}

package/build/components/VirtualTable/SheetView/components/SheetViewTableHeader/type.js

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

package/build/components/VirtualTable/SheetView/index.d.ts

@@ -1,3 +1,3 @@
 export { default as SheetViewVirtualTable } from './SheetViewVirtualTable';
-export { default as SheetViewTableHeader } from './SheetViewTableHeader';
+export { default as SheetViewTableHeader } from './components/SheetViewTableHeader';
 export * from './style';

package/build/components/VirtualTable/SheetView/index.js

@@ -1,3 +1,3 @@
 export { default as SheetViewVirtualTable } from './SheetViewVirtualTable';
-export { default as SheetViewTableHeader } from './SheetViewTableHeader';
+export { default as SheetViewTableHeader } from './components/SheetViewTableHeader';
 export * from './style';

package/build/components/VirtualTable/SheetView/style.d.ts

@@ -1,26 +1,23 @@
 /// <reference types="react" />
-export declare const ActionIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const ColumnIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const HeaderText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const PinIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-interface StyledHeaderProps {
-    showBackDrop: boolean;
-}
-export declare const StyledHeader: import("@emotion/styled").StyledComponent<import("@mui/material").TableHeadOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+export declare const ActionIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const ColumnIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const HeaderText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const PinIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+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;
-}, "className" | "style" | "classes" | "children" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledHeaderProps, {}, {}>;
-interface StyledMUITableRowProps {
-    component: string;
-}
-export declare const StyledMUITableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+}, "className" | "style" | "classes" | "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;
-}, "className" | "style" | "classes" | "children" | "sx" | "hover" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledMUITableRowProps, {}, {}>;
-export declare const SheetViewVirtualTableWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PinnedStartColumnWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;
-export declare const PinnedEndColumnWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;
-export declare const MainTableWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, "className" | "style" | "classes" | "children" | "sx" | "hover" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    component: string;
+}, {}, {}>;
+export declare const SheetViewVirtualTableWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PinnedStartColumnWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;
+export declare const PinnedEndColumnWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;
+export declare const MainTableWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     hasPinnedStart: boolean;
     hasPinnedEnd: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const UnpinnedTableHeaderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};
+export declare const UnpinnedTableHeaderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/components/VirtualTable/SheetView/style.js

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { TableHead } from '@mui/material';
+import TableHead from '@mui/material/TableHead';
 import MUITableRow from '@mui/material/TableRow';
 export const ActionIcon = styled('img')(() => ({
     width: '13.3px',
@@ -9,6 +9,7 @@ export const ColumnIcon = styled('img')(() => ({
     width: '8px',
     height: '6.4px',
     cursor: 'pointer',
+    marginTop: '2px',
 }));
 export const HeaderText = styled('span')(({ theme }) => ({
     color: theme.palette.text.primary,
@@ -32,12 +33,13 @@ export const PinIconContainer = styled('div')(() => ({
 export const StyledHeader = styled(TableHead, {
     shouldForwardProp: (prop) => prop !== 'showBackDrop',
 })(({ showBackDrop, theme }) => ({
-    width: '100%',
-    minWidth: 'fit-content',
     flex: '0 0 auto',
     boxShadow: showBackDrop ? theme.shadows[23] : 'none',
     backgroundColor: theme.palette.background.default,
     zIndex: 1,
+    width: '100%',
+    minWidth: 'auto',
+    overflowX: 'scroll',
 }));
 export const StyledMUITableRow = styled(MUITableRow)(({ theme }) => ({
     display: 'flex',

package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IColumnFilter } from '../../../../types/index.js';
-declare function ColumnFilter(filter: IColumnFilter): import("react/jsx-runtime").JSX.Element;
+import { ColumnFilterProps } from './type';
+declare function ColumnFilter(filter: ColumnFilterProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof ColumnFilter>;
 export default _default;

package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js

@@ -1,7 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
 import Box from '@mui/material/Box';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Popper from '@mui/material/Popper';
 import { closeIcon, columnIcon, whiteFilterIcon } from '../../../../constants/index.js';
 import Inputs from './Inputs';
@@ -9,12 +8,11 @@ import List from './List';
 import { FilterWrapper } from './style';
 import CustomBackdrop from '../../../CustomBackdrop';
 function ColumnFilter(filter) {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const openDropdown = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const onCloseDropdown = () => {
+    const { anchorEl, setAnchorEl, onClose } = filter;
+    const onCloseDropdown = (event) => {
+        event.stopPropagation();
         setAnchorEl(null);
+        onClose === null || onClose === void 0 ? void 0 : onClose(event);
     };
     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(() => {
@@ -50,10 +48,8 @@ function ColumnFilter(filter) {
         }
         return null;
     }, [open, filter, anchorEl, setAnchorEl]);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
-                                filter.onClear(filterApiKeys);
-                            } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
-                        zIndex: 9999,
-                    } }, { children: renderFilter }))] })) })));
+    return (_jsxs(_Fragment, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 } }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
+                            filter.onClear(filterApiKeys);
+                        } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px', userSelect: 'none' } })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: renderFilter }))] }));
 }
 export default memo(ColumnFilter);

package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.d.ts

@@ -1,6 +1,7 @@
+import { MouseEvent } from 'react';
 import type { IColumnFilter, IColumnFilterInputs } from '../../../../../types/index.js';
 interface InputsI {
-    onCloseDropdown: () => void;
+    onCloseDropdown: (e: MouseEvent<HTMLElement>) => void;
     filter: IColumnFilter & IColumnFilterInputs;
 }
 declare function Inputs({ onCloseDropdown, filter: { options, onConfirm, data, isOnlyOneFilter, onColumnFilterClearClick, wrapperSx } }: InputsI): import("react/jsx-runtime").JSX.Element;

package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.js

@@ -13,12 +13,12 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
         setValues((options || []).reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = data === null || data === void 0 ? void 0 : data[apiKey]) !== null && _a !== void 0 ? _a : '' })); }, {}));
     }, []);
     const { t } = useTranslation();
-    const onClickOkay = () => {
+    const onClickOkay = (e) => {
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(values);
-        onCloseDropdown();
+        onCloseDropdown(e);
     };
-    const onClickCancel = () => {
-        onCloseDropdown();
+    const onClickCancel = (e) => {
+        onCloseDropdown(e);
     };
     const onClickClear = () => {
         onColumnFilterClearClick === null || onColumnFilterClearClick === void 0 ? void 0 : onColumnFilterClearClick();

package/build/components/VirtualTable/components/ColumnFilter/List/List.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import type { IColumnFilter, IColumnFilterList } from '../../../../../types/index.js';
 interface ListI {
-    onCloseDropdown: () => void;
+    onCloseDropdown: (e: MouseEvent<HTMLElement>) => void;
     filter: IColumnFilter & IColumnFilterList;
     styles?: React.CSSProperties;
 }

package/build/components/VirtualTable/components/ColumnFilter/List/List.js

@@ -25,10 +25,10 @@ function List({ onCloseDropdown, filter, styles }) {
         if (filter.options)
             setItemsList(renderItems(filter.options));
     }, [filter === null || filter === void 0 ? void 0 : filter.data]);
-    const onClickCancel = () => {
-        onCloseDropdown();
+    const onClickCancel = (e) => {
+        onCloseDropdown(e);
     };
-    const onClickOkay = () => {
+    const onClickOkay = (e) => {
         var _a;
         const selectedValues = values.reduce((acc, { options, apiKey: parentKey, isSelected: isParentSelected }) => {
             if (options) {
@@ -45,7 +45,7 @@ function List({ onCloseDropdown, filter, styles }) {
         const selectedValueSet = new Set(selectedValues);
         if (Object.keys(values).length)
             (_a = filter === null || filter === void 0 ? void 0 : filter.onConfirm) === null || _a === void 0 ? void 0 : _a.call(filter, { [filter.apiKey]: [...selectedValueSet] });
-        onCloseDropdown();
+        onCloseDropdown(e);
     };
     const onUpdateMenuItems = (latestMenuItems) => {
         const resetItems = (items) => items.map(({ name, selected, menuItems, label }) => (Object.assign(Object.assign(Object.assign({}, (label && { placeholder: label })), { apiKey: name, isSelected: selected }), ((menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) && { options: resetItems(menuItems) }))));

package/build/components/VirtualTable/components/ColumnFilter/type.d.ts

@@ -0,0 +1,7 @@
+import { MouseEvent } from 'react';
+import { IColumnFilter } from '../../../../types/index.js';
+export type ColumnFilterProps = IColumnFilter & {
+    anchorEl: HTMLElement | null;
+    setAnchorEl: (el: HTMLElement | null) => void;
+    onClose?: (e: MouseEvent<HTMLElement>) => void;
+};

package/build/components/VirtualTable/components/ColumnFilter/type.js

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

package/build/components/VirtualTable/components/ColumnSort/ColumnSort.d.ts

@@ -0,0 +1,10 @@
+import { type MouseEvent } from 'react';
+import type { IColumnProps } from '../../../../types/index.js';
+import { TableHeaderProps } from '../TableHeader/type';
+interface ColumnSortProps extends Pick<TableHeaderProps, 'onColumnSort' | 'columnsSorting'> {
+    columnId: IColumnProps['id'];
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+}
+declare function ColumnSort({ onColumnSort, columnsSorting, columnId, onClick }: ColumnSortProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ColumnSort>;
+export default _default;

package/build/components/VirtualTable/components/ColumnSort/ColumnSort.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import CustomBackdrop from '../../../CustomBackdrop';
+import Menu from '../../../Menu';
+import MenuItem from '../../../MenuItem';
+import Text from '../../../Text';
+import { columnIcon, sortAzIcon, sortZaIcon } from '../../../../constants/index.js';
+import { ActionIcon, ColumnIcon } from './style';
+function ColumnSort({ onColumnSort, columnsSorting, columnId, onClick }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    const handleClose = (event) => {
+        event.stopPropagation();
+        setAnchorEl(null);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    const handleSortingOption = (id, order, event) => {
+        if (id) {
+            onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort({
+                [id]: order,
+            });
+            handleClose(event);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ColumnIcon, { onClick: handleClick, src: columnIcon, alt: "column-icon", "data-id": columnId, sx: { userSelect: 'none' } }), open && _jsx(CustomBackdrop, { onClick: handleClose }), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open }, { children: [_jsxs(MenuItem, Object.assign({ onClick: (e) => {
+                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'asc', e);
+                        }, sx: (theme) => (Object.assign({}, ((columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'asc' && { boxShadow: theme.shadows[10] }))) }, { children: [_jsx(ActionIcon, { src: sortAzIcon, alt: "sort-icon" }), _jsx(Text, Object.assign({ sx: { fontSize: '0.6875rem' } }, { children: "Sort Z-A" }))] })), _jsxs(MenuItem, Object.assign({ onClick: (e) => {
+                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'desc', e);
+                        }, sx: (theme) => (Object.assign({}, ((columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'desc' && { boxShadow: theme.shadows[10] }))) }, { children: [_jsx(ActionIcon, { src: sortZaIcon, alt: "sort-icon" }), _jsx(Text, Object.assign({ sx: { fontSize: '0.6875rem' } }, { children: "Sort Z-A" }))] }))] }))] }));
+}
+export default memo(ColumnSort);

package/build/components/VirtualTable/components/ColumnSort/index.d.ts

@@ -0,0 +1,2 @@
+import ColumnSort from './ColumnSort';
+export default ColumnSort;

package/build/components/VirtualTable/components/ColumnSort/index.js

@@ -0,0 +1,2 @@
+import ColumnSort from './ColumnSort';
+export default ColumnSort;

package/build/components/VirtualTable/components/ColumnSort/style.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ActionIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const ColumnIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/build/components/VirtualTable/components/ColumnSort/style.js

@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles';
+export const ActionIcon = styled('img')(() => ({
+    width: '13.3px',
+    height: '13.3px',
+}));
+export const ColumnIcon = styled('img')(() => ({
+    width: '8px',
+    height: '6.4px',
+    cursor: 'pointer',
+}));

package/build/components/VirtualTable/components/TableFooter/style.js

@@ -14,8 +14,8 @@ export const EngravingLine = styled('div')(({ theme }) => ({
     left: 0,
     right: 0,
     height: '1.5px',
-    backgroundColor: theme.palette.grey[50],
-    boxShadow: `inset 0 1px 0 0 ${theme.palette.grey[50]}`,
+    backgroundColor: theme.palette.grey[300],
+    boxShadow: `inset 0 1px 0 0 ${theme.palette.grey[300]}`,
 }));
 export const Label = styled(Box)(({ theme }) => ({
     borderRadius: '37.5px',

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

@@ -0,0 +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 const _default: import("react").MemoExoticComponent<typeof TableHeader>;
+export default _default;

package/build/components/VirtualTable/components/TableHeader/TableHeader.js

@@ -0,0 +1,10 @@
+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 }) {
+    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}`));
+            }) })) })));
+}
+export default memo(TableHeader);

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

@@ -0,0 +1,9 @@
+import type { IColumnProps } from '../../../../../../types/index.js';
+import { TableHeaderProps } from '../../../../../VirtualTable/components/TableHeader';
+interface TableCellProps extends Pick<TableHeaderProps, 'onColumnSort' | 'isSheetView' | 'columnsSorting'> {
+    column: IColumnProps;
+    isFirst: boolean;
+    isLast: boolean;
+}
+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 {};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import ColumnFilter from '../../../../../VirtualTable/components/ColumnFilter';
+import ColumnSort from '../../../../../VirtualTable/components/ColumnSort';
+import { StyledCell } from '../../../../../VirtualTable/style';
+export function TableCell({ column: { header, id, align, headerStyle, sortable, filter, width, order }, isFirst, isLast, isSheetView, onColumnSort, columnsSorting, }) {
+    const [columnFilterEl, setColumnFilterEl] = useState(null);
+    return (_jsxs(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, onClick: (event) => {
+            setColumnFilterEl(event.currentTarget);
+        }, 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: [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 })] })));
+}

package/build/components/VirtualTable/components/TableHeader/components/TableCell/index.d.ts

@@ -0,0 +1,2 @@
+import { TableCell } from './TableCell';
+export default TableCell;

package/build/components/VirtualTable/components/TableHeader/components/TableCell/index.js

@@ -0,0 +1,2 @@
+import { TableCell } from './TableCell';
+export default TableCell;

package/build/components/VirtualTable/components/TableHeader/components/index.d.ts

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

package/build/components/VirtualTable/components/TableHeader/components/index.js

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

package/build/components/VirtualTable/components/TableHeader/constant.d.ts

@@ -0,0 +1,5 @@
+export declare const actionsIcons: {
+    flag: string;
+    dispute: string;
+    refund: string;
+};

package/build/components/VirtualTable/components/TableHeader/constant.js

@@ -0,0 +1,6 @@
+import { disputeIcon, flagIcon, refundInitiatedIcon } from '../../../../constants/index.js';
+export const actionsIcons = {
+    flag: flagIcon,
+    dispute: disputeIcon,
+    refund: refundInitiatedIcon,
+};

package/build/components/VirtualTable/components/TableHeader/index.d.ts

@@ -0,0 +1,3 @@
+import TableHeader from './TableHeader';
+export * from './type';
+export default TableHeader;

package/build/components/VirtualTable/components/TableHeader/index.js

@@ -0,0 +1,3 @@
+import TableHeader from './TableHeader';
+export * from './type';
+export default TableHeader;

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

@@ -0,0 +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;
+}, "className" | "style" | "classes" | "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;
+}, "className" | "style" | "classes" | "children" | "sx" | "hover" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    isSheetView?: boolean | undefined;
+    component: string;
+}, {}, {}>;

package/build/components/VirtualTable/components/TableHeader/style.js

@@ -0,0 +1,23 @@
+import { styled } from '@mui/material/styles';
+import TableHead from '@mui/material/TableHead';
+import MUITableRow from '@mui/material/TableRow';
+export const StyledHeader = styled(TableHead, {
+    shouldForwardProp: (prop) => prop !== 'showBackDrop',
+})(({ showBackDrop, theme }) => ({
+    flex: '0 0 auto',
+    boxShadow: showBackDrop ? theme.shadows[23] : 'none',
+    backgroundColor: theme.palette.background.default,
+    zIndex: 1,
+    width: '100%',
+    minWidth: 'auto',
+    overflowX: 'scroll',
+}));
+export const StyledMUITableRow = styled(MUITableRow, {
+    shouldForwardProp: (prop) => prop !== 'isSheetView',
+})(({ theme, isSheetView }) => (Object.assign({ display: 'flex', justifyContent: 'flex-start', width: '100%', minWidth: 'fit-content', paddingInline: '32px', paddingBlock: '16px' }, (isSheetView && {
+    height: '28px',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.primary.light,
+    paddingInline: 0,
+    paddingBlock: 0,
+}))));

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

@@ -0,0 +1,10 @@
+import { type TableHeadProps } from '@mui/material/TableHead';
+import type { IColumnProps, IVirtualTable } from '../../../../types/index.js';
+export interface TableHeaderProps {
+    columns: IColumnProps[];
+    headerProps?: TableHeadProps;
+    columnsSorting?: IVirtualTable['columnsSorting'];
+    onColumnSort?: IVirtualTable['onColumnSort'];
+    showBackDrop: boolean;
+    isSheetView?: boolean;
+}

package/build/components/VirtualTable/components/TableHeader/type.js

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

package/build/components/VirtualTable/style.js

@@ -29,7 +29,7 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.default,
 }));
 export const StyledCell = styled(TableCell, {
-    shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView'].includes(prop),
+    shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView', 'isSelected'].includes(prop),
 })(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign(Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
     borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
     paddingInline: '8px !important',

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

@@ -62,7 +62,7 @@ export declare const chargeTableCellWidth: {
     readonly destinations: {
         readonly default: "70px";
         readonly text: "240px";
-        readonly sheet: "200px";
+        readonly sheet: "380px";
     };
     readonly topup: {
         readonly default: "20px";

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

@@ -62,7 +62,7 @@ export const chargeTableCellWidth = {
     destinations: {
         default: '70px',
         text: '240px',
-        sheet: '200px',
+        sheet: '380px',
     },
     topup: {
         default: '20px',

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.276",
-  "testVersion": 0,
+  "version": "0.0.278-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

package/build/components/VirtualTable/SheetView/SheetViewTableHeader.js

@@ -1,73 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useState } from 'react';
-import { Box, useTheme } from '@mui/material';
-import Dropdown from '../../DropdownMenu';
-import { columnIcon, pinIcon, sortAzIcon, sortZaIcon, unpinIcon } from '../../../constants/index.js';
-import ColumnFilter from '../components/ColumnFilter';
-import { StyledCell } from '../style';
-import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableRow, HeaderText } from './style';
-function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
-    const theme = useTheme();
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-    const handleSortingOption = (columnId, order) => {
-        if (columnId) {
-            onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort({
-                [columnId]: order,
-            });
-            handleClose();
-        }
-    };
-    const handlePinClick = (columnId) => {
-        const isCurrentlyPinned = pinnedColumns.includes(columnId);
-        if (isCurrentlyPinned) {
-            onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'unpin');
-        }
-        else {
-            if (columnId === lastColumnId) {
-                onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'end');
-            }
-            else {
-                onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'start');
-            }
-        }
-    };
-    return (_jsxs(StyledHeader, Object.assign({ component: "nav", "data-testid": "SheetViewVirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { sx: Object.assign({ width: '100%', minWidth: 'auto', overflowX: 'scroll' }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.sx) }, { children: [_jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "SheetViewVirtualTable_TableHeader_StyledMUITableRow" }, { children: columns.map((column, colIndex) => {
-                    const { header, id, align, headerStyle, sortable, filter, pinnable } = column;
-                    const isFirst = id === columns[0].id;
-                    const isLast = id === columns[columns.length - 1].id;
-                    const isPinned = pinnedColumns.includes(id);
-                    const isDefaultPinned = !!column.isDefaultPinned;
-                    const isSelected = selectedColumn === id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "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, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
-                                    event.stopPropagation();
-                                    handlePinClick(id);
-                                }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));
-                }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
-                    {
-                        label: 'Sort A-Z',
-                        name: 'asc',
-                        icon: _jsx(ActionIcon, { src: sortAzIcon, alt: "sort-icon" }),
-                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'asc',
-                        onClick: () => {
-                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'asc');
-                        },
-                    },
-                    {
-                        label: 'Sort Z-A',
-                        name: 'desc',
-                        icon: _jsx(ActionIcon, { src: sortZaIcon, alt: "sort-icon" }),
-                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'desc',
-                        onClick: () => {
-                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'desc');
-                        },
-                    },
-                ] })] })));
-}
-export default memo(SheetViewTableHeader);

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

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import { type TableHeadProps } from '@mui/material';
-import type { IColumnProps, IVirtualTable } from '../../../types/index.js';
-export declare const actionsIcons: {
-    flag: string;
-    dispute: string;
-    refund: string;
-};
-export declare const ActionIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const ColumnIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-interface StyledHeaderProps {
-    showBackDrop: boolean;
-}
-export declare const StyledHeader: import("@emotion/styled").StyledComponent<import("@mui/material").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;
-}, "className" | "style" | "classes" | "children" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledHeaderProps, {}, {}>;
-interface TableHeaderProps {
-    columns: IColumnProps[];
-    headerProps?: TableHeadProps;
-    columnsSorting?: IVirtualTable['columnsSorting'];
-    onColumnSort?: IVirtualTable['onColumnSort'];
-    showBackDrop: boolean;
-    isSheetView?: boolean;
-}
-declare function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof TableHeader>;
-export default _default;

package/build/components/VirtualTable/components/TableHeader.js

@@ -1,87 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useState } from 'react';
-import { Box, styled, useTheme } from '@mui/material';
-import TableHead from '@mui/material/TableHead';
-import MUITableRow from '@mui/material/TableRow';
-import Dropdown from '../../DropdownMenu';
-import { columnIcon, disputeIcon, flagIcon, refundInitiatedIcon, sortAzIcon, sortZaIcon } from '../../../constants/index.js';
-import ColumnFilter from './ColumnFilter';
-import { StyledCell } from '../style';
-export const actionsIcons = {
-    flag: flagIcon,
-    dispute: disputeIcon,
-    refund: refundInitiatedIcon,
-};
-export const ActionIcon = styled('img')(() => ({
-    width: '13.3px',
-    height: '13.3px',
-}));
-export const ColumnIcon = styled('img')(() => ({
-    width: '8px',
-    height: '6.4px',
-    cursor: 'pointer',
-}));
-export const StyledHeader = styled(TableHead, {
-    shouldForwardProp: (prop) => prop !== 'showBackDrop',
-})(({ showBackDrop, theme }) => ({
-    width: '100%',
-    minWidth: 'fit-content',
-    flex: '0 0 auto',
-    boxShadow: showBackDrop ? theme.shadows[23] : 'none',
-    backgroundColor: theme.palette.background.default,
-    zIndex: 1,
-}));
-const StyledMUITableRow = styled(MUITableRow, {
-    shouldForwardProp: (prop) => prop !== 'isSheetView',
-})(({ theme, isSheetView }) => (Object.assign({ display: 'flex', justifyContent: 'flex-start', width: '100%', minWidth: 'fit-content', paddingInline: '32px', paddingBlock: '16px' }, (isSheetView && {
-    height: '28px',
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    backgroundColor: theme.palette.primary.light,
-    paddingInline: 0,
-    paddingBlock: 0,
-}))));
-function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView }) {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
-    const theme = useTheme();
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-    const handleSortingOption = (columnId, order) => {
-        if (columnId) {
-            onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort({
-                [columnId]: order,
-            });
-            handleClose();
-        }
-    };
-    return (_jsxs(StyledHeader, Object.assign({ component: "nav", "data-testid": "VirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { sx: Object.assign({ width: '100%', minWidth: 'auto', overflowX: 'scroll' }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.sx) }, { children: [_jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "VirtualTable_TableHeader_StyledMUITableRow", isSheetView: isSheetView }, { children: columns.map((column, colIndex) => {
-                    const { header, id, align, headerStyle, sortable, filter } = column;
-                    const isFirst = id === columns[0].id;
-                    const isLast = id === columns[columns.length - 1].id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "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: isFirst, isLast: isLast, sx: 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: column.width, textAlign: align, overflow: 'unset', fontWeight: 600 }, headerStyle), isSheetView: isSheetView }, { 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)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id })] }), `${id}-${colIndex}`));
-                }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
-                    {
-                        label: 'Sort A-Z',
-                        name: 'asc',
-                        icon: _jsx(ActionIcon, { src: sortAzIcon, alt: "sort-icon" }),
-                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'asc',
-                        onClick: () => {
-                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'asc');
-                        },
-                    },
-                    {
-                        label: 'Sort Z-A',
-                        name: 'desc',
-                        icon: _jsx(ActionIcon, { src: sortZaIcon, alt: "sort-icon" }),
-                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'desc',
-                        onClick: () => {
-                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'desc');
-                        },
-                    },
-                ] })] })));
-}
-export default memo(TableHeader);