@tap-payments/os-micro-frontend-shared 0.0.311-test.1-test.51 → 0.0.312-test.1

package/build/components/JSONViewer/JSONViewer.js

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

package/build/components/MultiSelectDropdownButton/MultiSelectDropdownButton.js

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

package/build/components/{VirtualTables/SheetViewVirtualTable → VirtualTable/SheetView}/SheetViewVirtualTable.js

@@ -20,7 +20,7 @@ import TableFooter from '../components/TableFooter/TableFooter';
 import TableNoData from '../components/TableNoData';
 import { SheetViewTableNoData } from './components';
 import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
-import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from '../components/style';
+import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from '../style';
 import { SheetViewVirtualTableWrapper, PinnedStartColumnWrapper, PinnedEndColumnWrapper, MainTableWrapper, UnpinnedTableHeaderWrapper } from './style';
 import SheetViewTableHeader from './components/SheetViewTableHeader';
 import { usePinnedColumns } from './hooks/usePinnedColumns';

package/build/components/{VirtualTables/SheetViewVirtualTable → VirtualTable/SheetView}/components/SheetViewTableHeader/TableCell.js

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

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

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

package/build/components/{VirtualTables/SheetViewVirtualTable → VirtualTable/SheetView}/components/SheetViewTableNoData.js

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

package/build/components/{VirtualTables/SheetViewVirtualTable → VirtualTable/SheetView}/style.js

@@ -44,6 +44,7 @@ export const StyledHeader = styled(TableHead, {
 export const StyledMUITableRow = styled(MUITableRow)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'flex-start',
+    alignItems: 'center',
     width: '100%',
     minWidth: 'fit-content',
     height: '28px',

package/build/components/{VirtualTables/VirtualTable → VirtualTable}/VirtualTable.d.ts

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

package/build/components/{VirtualTables/VirtualTable → VirtualTable}/VirtualTable.js

@@ -13,15 +13,15 @@ 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 { useDelayToSetValue } from '../../../hooks/index.js';
-import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
-import TableFooter from '../components/TableFooter/TableFooter';
-import TableHeader from '../components/TableHeader';
-import TableLastItem from '../components/TableLastItem';
-import TableNoData from '../components/TableNoData';
-import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
-import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from '../components/style';
+import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, SHEET_VIEW_TABLE_ROW_HEIGHT } 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';
+import TableHeader from './components/TableHeader';
+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) => ({
     columns,
     isLoading,

package/build/components/{VirtualTables/VirtualTableWithCard → VirtualTable}/VirtualTableWithCard.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, ReactElement } from 'react';
-import type { IVirtualTable } from '../../../types/index.js';
+import type { IVirtualTable } from '../../types/index.js';
 export interface VirtualTableWithCardProps extends Omit<IVirtualTable, 'showHeader' | 'dimensions' | '	showBackgroundColor' | 'columns'> {
     tableHeader?: ReactNode;
     renderCardComponent: (rows: any) => ReactElement | null;

package/build/components/{VirtualTables/VirtualTableWithCard → VirtualTable}/VirtualTableWithCard.js

@@ -14,13 +14,13 @@ 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 { useDelayToSetValue } from '../../../hooks/index.js';
-import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
-import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../../constants/index.js';
-import TableFooter from '../components/TableFooter';
-import TableNoDataWithCard from '../components/TableNoDataWithCard';
-import ListItemWrapperWithCard from '../components/virtualScroll/ListItemWrapperWithCard';
-import { StyledCardsBox, StyledVirtualList, TableContainer, TableWrapper } from '../components/style';
+import { useDelayToSetValue } from '../../hooks/index.js';
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../utils/index.js';
+import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../constants/index.js';
+import TableFooter from './components/TableFooter';
+import TableNoDataWithCard from './components/TableNoDataWithCard';
+import ListItemWrapperWithCard from './components/virtualScroll/ListItemWrapperWithCard';
+import { StyledCardsBox, StyledVirtualList, TableContainer, TableWrapper } from './style';
 const createItemData = memoize((isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, renderCardComponent) => ({
     isLoading,
     rows,

package/build/components/{VirtualTables → VirtualTable}/components/ColumnSort/ColumnSort.js

@@ -27,7 +27,7 @@ function ColumnSort({ onColumnSort, columnsSorting, columnId, onClick }) {
             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) => {
+    return (_jsxs(_Fragment, { children: [_jsx(ColumnIcon, { onClick: handleClick, src: columnIcon, alt: "column-icon", "data-id": columnId, sx: { userSelect: 'none', marginTop: '2px' } }), 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);

package/build/components/{VirtualTables → VirtualTable}/components/TableHeader/components/TableCell/TableCell.d.ts

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

package/build/components/{VirtualTables → VirtualTable}/components/TableHeader/components/TableCell/TableCell.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import Box from '@mui/material/Box';
-import ColumnFilter from '../../../../../VirtualTables/components/ColumnFilter';
-import ColumnSort from '../../../../../VirtualTables/components/ColumnSort';
-import { StyledCell } from '../../../../../VirtualTables/components/style';
+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) => {

package/build/components/{VirtualTables → VirtualTable}/components/TableLoadingWithCard.d.ts

@@ -1,9 +1,10 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
+import { VirtualTableWithCardProps } from '../VirtualTableWithCard';
 interface ITableLoadingProps {
     isLoaded?: boolean;
     isLoading?: boolean;
     rowsCount?: number;
-    cardLoadingComponent: ReactNode;
+    cardLoadingComponent: VirtualTableWithCardProps['cardLoadingComponent'];
 }
 declare function TableLoadingWithCard({ isLoaded, isLoading, rowsCount, cardLoadingComponent }: ITableLoadingProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableLoadingWithCard>;

package/build/components/{VirtualTables → VirtualTable}/components/TableNoData.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import TableLoading from './TableLoading';
-import { StyledSolidBackground } from './style';
+import { StyledSolidBackground } from '../style';
 import TableError from './TableError';
 function TableNoData({ error, tableEmpty, isTimeoutError, tableError, tableLoading, orderedColumns, triggerDataRefetch, footerProps, }) {
     if (tableLoading) {

package/build/components/{VirtualTables → VirtualTable}/components/TableNoDataWithCard.d.ts

@@ -1,5 +1,6 @@
-import { ReactElement, ReactNode } from 'react';
+/// <reference types="react" />
 import type { IVirtualTable } from '../../../types/index.js';
+import { VirtualTableWithCardProps } from '../VirtualTableWithCard';
 interface TableNoDataWithCardProps {
     tableEmpty: boolean;
     tableLoading: boolean;
@@ -8,8 +9,8 @@ interface TableNoDataWithCardProps {
     tableError: boolean;
     triggerDataRefetch: () => Promise<unknown>;
     footerProps: IVirtualTable['footerProps'];
-    cardLoadingComponent: ReactNode;
-    noDataComponent: ReactElement;
+    cardLoadingComponent: VirtualTableWithCardProps['cardLoadingComponent'];
+    noDataComponent: VirtualTableWithCardProps['noDataComponent'];
 }
 declare function TableNoDataWithCard({ error, tableEmpty, isTimeoutError, tableError, tableLoading, triggerDataRefetch, footerProps, cardLoadingComponent, noDataComponent: NoDataComponent, }: TableNoDataWithCardProps): JSX.Element;
 declare namespace TableNoDataWithCard {

package/build/components/{VirtualTables → VirtualTable}/components/TableNoDataWithCard.js

@@ -3,7 +3,7 @@ import { memo } from 'react';
 import { backendErrorHandler } from '../../../utils/index.js';
 import ErrorList from './ErrorList/ErrorList';
 import TableLoadingWithCard from './TableLoadingWithCard';
-import { StyledSolidBackground } from './style';
+import { StyledSolidBackground } from '../style';
 function TableNoDataWithCard({ error, tableEmpty, isTimeoutError, tableError, tableLoading, triggerDataRefetch, footerProps, cardLoadingComponent, noDataComponent: NoDataComponent, }) {
     let content;
     if (tableLoading) {

package/build/components/{VirtualTables → VirtualTable}/components/TableRow.js

@@ -2,7 +2,7 @@ import { createElement as _createElement } from "react";
 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';
+import { StyledCell, StyledTableRow } from '../style';
 import { getSelectionStyles } from '../utils/getSelectionStyles';
 function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
     const renderCell = (column) => {
@@ -25,7 +25,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                 isColumnSelected,
                 isLastRow,
             });
-            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, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected && (column === null || column === void 0 ? void 0 : column.isDefaultPinned) }, { 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, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
         }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
     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));
 }

package/build/components/{VirtualTables → VirtualTable}/components/TableRowLoadingWithCard.d.ts

@@ -1,8 +1,9 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties } from 'react';
+import { VirtualTableWithCardProps } from '../VirtualTableWithCard';
 interface ITableRowLoadingProps {
     index?: number;
     style?: CSSProperties;
-    cardLoadingComponent: ReactNode;
+    cardLoadingComponent: VirtualTableWithCardProps['cardLoadingComponent'];
 }
 declare function TableRowLoadingWithCard({ style, index, cardLoadingComponent: CardLoadingComponent }: ITableRowLoadingProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableRowLoadingWithCard>;

package/build/components/{VirtualTables → VirtualTable}/components/TableRowWithCard.d.ts

@@ -1,5 +1,6 @@
-import { ReactElement } from 'react';
+/// <reference types="react" />
 import type { TableRowProps } from '@mui/material';
+import { VirtualTableWithCardProps } from '../VirtualTableWithCard';
 interface ITableRowProps<R = any> {
     row: R;
     index: number;
@@ -8,7 +9,7 @@ interface ITableRowProps<R = any> {
         onRowClick?: (row: R) => void;
         showLoadedStyle?: boolean;
     };
-    renderCardComponent: (rows: any) => ReactElement | null;
+    renderCardComponent: VirtualTableWithCardProps['renderCardComponent'];
 }
 declare function TableRowWithCard({ row, index, rowProps, renderCardComponent: RenderCardComponent }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableRowWithCard>;

package/build/components/{VirtualTables → VirtualTable}/components/TableRowWithCard.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { memo } from 'react';
 import { areEqual } from 'react-window';
-import { StyledTableRow } from './style';
+import { StyledTableRow } from '../style';
 function TableRowWithCard({ row, index, rowProps, renderCardComponent: RenderCardComponent }) {
     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 }), RenderCardComponent && _jsx(RenderCardComponent, Object.assign({}, row))));
 }

package/build/components/{VirtualTables → VirtualTable}/components/virtualScroll/ListItemWrapper.js

@@ -15,11 +15,11 @@ 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 { ActionIcon } from '../style';
+import { ActionIcon } from '../../style';
 import { RowErrorState } from '../RowErrorState';
 import { StyledParagraph } from '../TableLastItem';
 import TableRow from '../TableRow';
-import SheetViewTableRowLoading from '../../SheetViewVirtualTable/components/SheetViewTableRowLoading';
+import SheetViewTableRowLoading from '../../SheetView/components/SheetViewTableRowLoading';
 export const LastRowContent = React.memo(({ isLoadingRow, isSheetView, columns, currentRowCount, }) => {
     const { t } = useTranslation();
     if (isLoadingRow) {

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

@@ -0,0 +1,6 @@
+import VirtualTable from './VirtualTable';
+export { default as VirtualTableWithCard } from './VirtualTableWithCard';
+export * from './components';
+export * from './SheetView';
+export { StyledCell } from './style';
+export default VirtualTable;

package/build/components/VirtualTable/index.js

@@ -0,0 +1,6 @@
+import VirtualTable from './VirtualTable';
+export { default as VirtualTableWithCard } from './VirtualTableWithCard';
+export * from './components';
+export * from './SheetView';
+export { StyledCell } from './style';
+export default VirtualTable;

package/build/components/{VirtualTables/components → VirtualTable}/style.js

@@ -3,8 +3,8 @@ import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import MUITableRow from '@mui/material/TableRow';
 import { motion } from 'framer-motion';
-import { TABLE_FOOTER_HEIGHT } from './TableFooter/style';
-import VirtualScrollList from './virtualScroll/VirtualScrollList';
+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 }) => ({
@@ -30,15 +30,22 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
 }));
 export const StyledCell = styled(TableCell, {
     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', cursor: 'pointer' }, (isSheetView && {
-    borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
+})(({ theme, isLast, isFirst, isSheetView, isSelected }) => (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', cursor: 'pointer' }, (isSheetView && {
+    borderRight: isLast ? '1px solid transparent' : `1px solid ${theme.palette.divider}`,
     paddingInline: '8px !important',
     paddingLeft: '8px !important',
     paddingRight: '8px !important',
-})), (isSelected && {
-    color: '#1F88D0 !important',
-    '& *': {
-        color: '#1F88D0 !important',
+    position: 'relative',
+    borderTop: '1px solid transparent',
+    borderLeft: '1px solid transparent',
+    '&:before': {
+        content: '""',
+        borderRight: isLast ? 'none' : '1px solid transparent',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        left: 0,
+        bottom: 0,
     },
 }))));
 export const StyledVirtualList = styled(VirtualScrollList, {

package/build/components/{VirtualTables → VirtualTable}/utils/getSelectionStyles.d.ts

@@ -6,8 +6,10 @@ interface GetSelectionStylesParams {
 }
 export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetSelectionStylesParams) => {
     border?: undefined;
+    '&.MuiTableCell-root'?: undefined;
     backgroundColor?: undefined;
     color?: undefined;
+    '&:before'?: undefined;
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -18,8 +20,16 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
     alignItems?: undefined;
 } | {
     border: string;
+    '&.MuiTableCell-root': {
+        border: string;
+    };
     backgroundColor: string;
     color: string;
+    '&:before': {
+        border: string;
+        borderWidth?: undefined;
+        borderBottom?: undefined;
+    };
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -37,7 +47,13 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
     minHeight: string;
     display: string;
     alignItems: string;
+    '&:before': {
+        borderWidth: string;
+        borderBottom: string;
+        border?: undefined;
+    };
     border?: undefined;
+    '&.MuiTableCell-root'?: undefined;
     backgroundColor?: undefined;
     color?: undefined;
 };

package/build/components/{VirtualTables → VirtualTable}/utils/getSelectionStyles.js

@@ -3,9 +3,13 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
         return {};
     if (isCellSelected && !isColumnSelected) {
         return {
-            border: '2px solid #1F88D0',
+            border: '1px solid #1F88D0',
+            '&.MuiTableCell-root': { border: '1px solid #1F88D0' },
             backgroundColor: 'white',
             color: '#1F88D0',
+            '&:before': {
+                border: '1px solid #1F88D0',
+            },
         };
     }
     if (isColumnSelected) {
@@ -18,6 +22,10 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
             minHeight: '28px',
             display: 'flex',
             alignItems: 'center',
+            '&:before': {
+                borderWidth: isLastRow ? '0px 1.5px 1px 1.5px' : '0px 1.5px 0px 1.5px',
+                borderBottom: !isLastRow ? '1px solid transparent' : '1.5px solid #1F88D0',
+            },
         };
     }
     return {};

package/build/components/index.d.ts

@@ -12,8 +12,8 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
-export { VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, TableError, } from './VirtualTables';
-export { default as SheetViewVirtualTable } from './VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable';
+export { default as VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, TableError, } from './VirtualTable';
+export { default as SheetViewVirtualTable } from './VirtualTable/SheetView/SheetViewVirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
 export { default as StatusButton, ChevronIcon, type ChevronIconProps, type StatusButtonIcon, type StatusButtonProps } from './StatusButton';

package/build/components/index.js

@@ -12,8 +12,8 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
-export { VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, TableError, } from './VirtualTables';
-export { default as SheetViewVirtualTable } from './VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable';
+export { default as VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, TableError, } from './VirtualTable';
+export { default as SheetViewVirtualTable } from './VirtualTable/SheetView/SheetViewVirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
 export { default as StatusButton, ChevronIcon } from './StatusButton';

package/build/playground/VTDemo.d.ts

@@ -0,0 +1 @@
+export declare const VTDemo: () => import("react/jsx-runtime").JSX.Element;

package/build/playground/VTDemo.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, VirtualTable } from '../components/index.js';
+import { Box } from '@mui/material';
+export const VTDemo = () => {
+    const [isSheetView, setIsSheetView] = useState(false);
+    const toggleView = () => {
+        setIsSheetView((prev) => !prev);
+    };
+    return (_jsx(Box, Object.assign({ sx: {
+            width: '100%',
+            height: '100vh',
+            overflow: 'auto',
+            flexDirection: 'row',
+            display: 'flex',
+            justifyContent: 'center',
+            p: 3,
+            backgroundColor: 'gray',
+        } }, { children: _jsxs(Box, Object.assign({ "data-testid": "ChargesList", sx: {
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                width: '80%',
+                height: '100%',
+            } }, { children: [_jsx(Button, Object.assign({ onClick: toggleView }, { children: "Toggle" })), _jsx(VirtualTable, { showHeader: true, showFooter: true, footerProps: {
+                        totalCount: 4,
+                        sandboxMode: false,
+                        maximized: false,
+                    }, loadMoreItems: () => Promise.resolve(), isLoading: false, isFetchingNextPage: false, rows: [
+                        { index: '1', date: 'date', order: 'order' },
+                        { index: '2', date: 'date', order: 'order' },
+                        { index: '3', date: 'date', order: 'order' },
+                    ], areAllRowsLoaded: true, columnsSorting: { id: 'asc' }, onColumnSort: () => { }, columns: [
+                        { id: 'index', header: '', width: '28px' },
+                        {
+                            id: 'date',
+                            header: 'Date',
+                            width: '170px',
+                        },
+                        {
+                            id: 'order',
+                            header: 'Order',
+                            width: '170px',
+                            filter: {
+                                onConfirm: undefined,
+                                onClear: () => { },
+                                type: 'inputs',
+                                options: [
+                                    {
+                                        placeholder: 'Order',
+                                        apiKey: 'orderID',
+                                    },
+                                ],
+                                data: {},
+                            },
+                        },
+                    ], error: null, triggerDataRefetch: () => Promise.resolve(), showBackgroundColor: false, tableTitle: "Acceptance-Charges", tableMode: 'sheet', dragControls: undefined, isSheetView: isSheetView })] })) })));
+};

package/build/playground/index.d.ts

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

package/build/playground/index.js

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

package/build/types/table.d.ts

@@ -4,7 +4,7 @@ import { BoxProps } from '@mui/material/Box';
 import { TableHeadProps } from '@mui/material/TableHead';
 import { TableRowProps } from '@mui/material/TableRow';
 import { DragControls } from 'framer-motion';
-import { CustomColumnFilterProps } from '../components/VirtualTables';
+import { CustomColumnFilterProps } from '../components/VirtualTable';
 import { Country } from './appConfig';
 import { SortingOrder } from './sort';
 export interface TableFilters<T> {

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.311-test.1-test.51",
-  "testVersion": 51,
+  "version": "0.0.312-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

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

@@ -1,6 +0,0 @@
-import VirtualTable from './VirtualTable/VirtualTable';
-import VirtualTableWithCard from './VirtualTableWithCard/VirtualTableWithCard';
-export * from './components';
-export * from './SheetViewVirtualTable';
-export { StyledCell } from './components/style';
-export { VirtualTable, VirtualTableWithCard };

package/build/components/VirtualTables/index.js

@@ -1,6 +0,0 @@
-import VirtualTable from './VirtualTable/VirtualTable';
-import VirtualTableWithCard from './VirtualTableWithCard/VirtualTableWithCard';
-export * from './components';
-export * from './SheetViewVirtualTable';
-export { StyledCell } from './components/style';
-export { VirtualTable, VirtualTableWithCard };