@tap-payments/os-micro-frontend-shared 0.0.69-sheetview-table-v2 → 0.0.69

package/build/components/SearchButton/styles.d.ts

@@ -554,9 +554,9 @@ export declare const Icon: 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;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -269,9 +269,9 @@ 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;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: 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;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: 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;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTable/VirtualTable.js

@@ -13,7 +13,7 @@ import { useTheme } from '@mui/material/styles';
 import memoize from 'memoize-one';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import InfiniteLoader from 'react-window-infinite-loader';
-import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../constants/index.js';
+import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../constants/index.js';
 import { useDelayToSetValue } from '../../hooks/index.js';
 import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../utils/index.js';
 import TableFooter from './components/TableFooter/TableFooter';
@@ -22,7 +22,7 @@ import TableLastItem from './components/TableLastItem';
 import TableNoData from './components/TableNoData';
 import ListItemWrapper from './components/virtualScroll/ListItemWrapper';
 import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from './style';
-const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isSheetView) => ({
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded) => ({
     columns,
     isLoading,
     rows,
@@ -32,9 +32,8 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     lastItemIndex,
     isError,
     areAllRowsLoaded,
-    isSheetView,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, }) {
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
@@ -55,8 +54,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     const orderedColumns = useMemo(() => shownColumns.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); }), [shownColumns]);
     const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
     const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
-    const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, isSheetView);
-    const tableRowHeight = isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT;
+    const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight);
     const renderTableContainer = useMemo(() => {
         const setBackdropVisibility = (isVisible) => {
             setShowBackdrop(isVisible);
@@ -66,7 +64,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
                 return;
             yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
         });
-        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView }, { children: ListItemWrapper }))) }))) })));
+        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => TABLE_ROW_HEIGHT, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN }, { children: ListItemWrapper }))) }))) })));
     }, [
         orderedColumns,
         error,
@@ -83,12 +81,11 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
         areAllRowsLoaded,
         areTotalRowsNotFillingHeight,
         itemsCount,
-        tableRowHeight,
     ]);
     const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
-    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ isSheetView: isSheetView, "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, isSheetView: isSheetView })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                                         width: '100%',
                                         minWidth: 'fit-content',
-                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
 }
 export default memo(VirtualTable);

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

@@ -50,7 +50,7 @@ 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: () => {
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'inline-block', marginTop: 'auto' } }, { 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: { marginInlineStart: '8px', cursor: 'pointer' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
                         zIndex: 9999,

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

@@ -20,8 +20,7 @@ interface TableHeaderProps {
     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 function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting }: 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

@@ -31,16 +31,15 @@ export const StyledHeader = styled(TableHead, {
     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 StyledMUITableRow = styled(MUITableRow)({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    paddingInline: '32px',
+    paddingBlock: '16px',
+    width: '100%',
+    minWidth: 'fit-content',
+});
+function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const theme = useTheme();
@@ -58,11 +57,11 @@ function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columns
             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) => {
+    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" }, { 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' }, 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}`));
+                    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: 'baseline', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset' }, headerStyle) }, { 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',

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

@@ -10,8 +10,7 @@ interface ITableRowProps<R = any> {
         onRowClick?: (row: R) => void;
         showLoadedStyle?: boolean;
     };
-    isSheetView?: boolean;
 }
-declare function TableRow({ row, columns, index, rowProps, isSheetView }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ row, columns, index, rowProps }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
 export default _default;

package/build/components/VirtualTable/components/TableRow.js

@@ -3,7 +3,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from '../style';
-function TableRow({ row, columns, index, rowProps, isSheetView }) {
+function TableRow({ row, columns, index, rowProps }) {
     const renderCell = (column) => {
         const { render, format, selector } = column;
         if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
@@ -13,8 +13,8 @@ function TableRow({ row, columns, index, rowProps, isSheetView }) {
         return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
     };
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
-            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: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, sx: Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start' }, column.cellStyle), isSheetView: isSheetView }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
+            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: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, sx: Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start' }, column.cellStyle) }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
         }) })), [columns, row]);
-    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));
+    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 }), content));
 }
 export default memo(TableRow, areEqual);

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

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

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

@@ -14,7 +14,7 @@ import React from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
-import { blueCircleLoaderIcon, tableBackgroundLoader, TABLE_ROW_HEIGHT, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
+import { blueCircleLoaderIcon, tableBackgroundLoader, TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
 import { ActionIcon } from '../../style';
 import { RowErrorState } from '../RowErrorState';
 import { StyledParagraph } from '../TableLastItem';
@@ -44,7 +44,7 @@ export const StyledItemWrapper = styled('div', {
     height: '100%',
 }));
 function ListItemWrapper(_a) {
-    var { index, style } = _a, _b = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView } = _b, restData = __rest(_b, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView"]);
+    var { index, style } = _a, _b = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded } = _b, restData = __rest(_b, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded"]);
     const lastItemIndex = rows.length - 1;
     const row = rows[index];
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
@@ -56,7 +56,7 @@ function ListItemWrapper(_a) {
         const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
         if (isLastRow) {
             return (_jsx(Box, Object.assign({ sx: {
-                    height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT,
+                    height: TABLE_ROW_HEIGHT,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
@@ -69,8 +69,8 @@ function ListItemWrapper(_a) {
                         height: '100%',
                     } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
         }
-        return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView }, `row-${index}`);
-    }, [restData, index, row, columns, memoizedRowProps, isSheetView]);
+        return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps }, `row-${index}`);
+    }, [restData, index, row, columns, memoizedRowProps]);
     return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - renderedScrollTopRef.current, willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
 }
 export default ListItemWrapper;

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
-    isSheetView?: boolean;
 }
 export declare const TableWrapper: 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;
@@ -17,11 +16,9 @@ export declare const StyledSolidBackground: import("@emotion/styled").StyledComp
 export declare const StyledCell: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     isLast: boolean;
     isFirst: boolean;
-    isSheetView?: boolean | undefined;
 }, {}, {}>;
 interface StyledVirtualListProps {
     areTotalRowsNotFillingHeight: boolean;
-    isSheetView?: boolean;
 }
 export declare const StyledVirtualList: import("@emotion/styled").StyledComponent<import("react-window").VariableSizeListProps<any> & {
     setBackdropVisibility: (isVisible: boolean) => void;
@@ -32,7 +29,6 @@ export declare const StyledTableRow: import("@emotion/styled").StyledComponent<i
 }, "className" | "style" | "classes" | "children" | "sx" | "hover" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     showShadowHighlight?: boolean | undefined;
     showLoadedStyle?: boolean | undefined;
-    isSheetView?: 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;
@@ -303,9 +299,9 @@ 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;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/VirtualTable/style.js

@@ -6,8 +6,8 @@ import { motion } from 'framer-motion';
 import { TABLE_FOOTER_HEIGHT } from './components/TableFooter/style';
 import VirtualScrollList from './components/virtualScroll/VirtualScrollList';
 export const TableWrapper = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'showNoDataView' && prop !== 'isSheetView',
-})(({ showNoDataView, isSheetView }) => ({
+    shouldForwardProp: (prop) => prop !== 'showNoDataView',
+})(({ showNoDataView }) => ({
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
@@ -15,8 +15,6 @@ export const TableWrapper = styled(Box, {
     minWidth: showNoDataView ? 'unset' : 'fit-content',
     overflow: 'hidden',
     overflowX: showNoDataView ? 'hidden' : 'scroll',
-    margin: isSheetView ? '0 32px' : '0',
-    border: isSheetView ? '1px solid #F2F2F2' : 'none',
 }));
 export const StyledBox = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'hidePadding',
@@ -29,18 +27,30 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.default,
 }));
 export const StyledCell = styled(TableCell, {
-    shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView'].includes(prop),
-})(({ theme, isLast, isFirst, isSheetView }) => (Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: theme.palette.grey[700], fontSize: theme.typography.caption.fontSize, height: '100%', fontWeight: theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
-    borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
-}))));
+    shouldForwardProp: (prop) => prop !== 'isLast' && prop !== 'isFirst',
+})(({ theme, isLast, isFirst }) => ({
+    paddingBlock: '0',
+    paddingInline: '0.3875rem !important',
+    paddingLeft: isFirst ? '0 !important' : '0.3875rem !important',
+    paddingRight: isLast ? '0 !important' : '0.3875rem !important',
+    color: theme.palette.grey[700],
+    fontSize: theme.typography.caption.fontSize,
+    height: '100%',
+    fontWeight: theme.typography.fontWeightRegular,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: 'flex',
+    alignItems: 'center',
+}));
 export const StyledVirtualList = styled(VirtualScrollList, {
-    shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),
-})(({ theme, areTotalRowsNotFillingHeight, isSheetView }) => (Object.assign({ backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default }, (isSheetView && {
-    backgroundColor: theme.palette.common.white,
-}))));
+    shouldForwardProp: (prop) => prop !== 'areTotalRowsNotFillingHeight',
+})(({ theme, areTotalRowsNotFillingHeight }) => ({
+    backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default,
+}));
 export const StyledTableRow = styled(MUITableRow, {
-    shouldForwardProp: (props) => !['showShadowHighlight', 'showLoadedStyle', 'isSheetView'].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': {
+    shouldForwardProp: (props) => props !== 'showShadowHighlight' && props !== 'showLoadedStyle',
+})(({ theme, showShadowHighlight, showLoadedStyle }) => (Object.assign(Object.assign({ display: 'flex', borderBottom: `1px solid ${theme === null || theme === void 0 ? void 0 : theme.palette.divider}`, paddingInline: '32px', position: 'relative', height: '100%', width: '100%', '&:hover': {
         boxShadow: theme.shadows[12],
         zIndex: 1,
         '.payment-sources-container': {
@@ -77,7 +87,7 @@ export const StyledTableRow = styled(MUITableRow, {
         position: 'absolute',
         left: 0,
     },
-}))))));
+}))));
 export const StyledTableBox = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'showBackgroundColor' && prop !== 'showNoDataView',
 })(({ theme, showBackgroundColor, showNoDataView }) => ({
@@ -88,6 +98,8 @@ export const StyledTableBox = styled(Box, {
     paddingBottom: showBackgroundColor ? '52px' : '0',
     display: 'flex',
     flexDirection: 'column',
+    borderBottomLeftRadius: theme.spacing(1.5),
+    borderBottomRightRadius: theme.spacing(1.5),
 }));
 export const ActionIcon = styled(motion.img)(() => ({
     width: '24px',

package/build/constants/table.d.ts

@@ -3,4 +3,3 @@ export declare const TABLE_CONTENT_ROW_HEIGHT = 70;
 export declare const TABLE_ROW_HEIGHT = 57;
 export declare const TABLE_THRESHOLD = 200;
 export declare const TABLE_LIST_OVER_SCAN = 5;
-export declare const SHEET_VIEW_TABLE_ROW_HEIGHT = 24;

package/build/constants/table.js

@@ -3,4 +3,3 @@ export const TABLE_CONTENT_ROW_HEIGHT = 70;
 export const TABLE_ROW_HEIGHT = 57;
 export const TABLE_THRESHOLD = 200;
 export const TABLE_LIST_OVER_SCAN = 5;
-export const SHEET_VIEW_TABLE_ROW_HEIGHT = 24;

package/build/types/table.d.ts

@@ -121,7 +121,6 @@ export interface IVirtualTable<R = any> {
         width: string | number;
     };
     dragControls?: DragControls;
-    isSheetView?: boolean;
 }
 export type ColumnFilterValues = Record<string, string | string[] | {
     phone: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.69-sheetview-table-v2",
+  "version": "0.0.69",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",