@tap-payments/os-micro-frontend-shared 0.0.312 → 0.1.1-test.54

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

@@ -0,0 +1,17 @@
+import { useCallback, useState } from 'react';
+export function useSelection() {
+    const [selectedCell, setSelectedCell] = useState(null);
+    const [selectedColumn, setSelectedColumn] = useState(null);
+    const handleCellClick = useCallback((rowIndex, columnId, event) => {
+        event.stopPropagation();
+        const cellKey = `${rowIndex}-${columnId}`;
+        setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
+        setSelectedColumn(null);
+    }, []);
+    const handleColumnClick = useCallback((columnId, event) => {
+        event.stopPropagation();
+        setSelectedColumn((prev) => (prev === columnId ? null : columnId));
+        setSelectedCell(null);
+    }, []);
+    return { selectedCell, selectedColumn, handleCellClick, handleColumnClick };
+}

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

@@ -0,0 +1,9 @@
+export declare function useTableDisplayState(rowsLength: number, isLoading?: boolean, error?: unknown): {
+    isError: boolean;
+    tableLoading: boolean;
+    tableError: boolean;
+    tableEmpty: boolean;
+    hasTimeoutError: boolean;
+    areTotalRowsNotFillingHeight: boolean;
+    showNoDataView: boolean;
+};

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

@@ -0,0 +1,20 @@
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../../utils/index.js';
+export function useTableDisplayState(rowsLength, isLoading, error) {
+    var _a;
+    const isError = hasError((_a = error) !== null && _a !== void 0 ? _a : null);
+    const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
+    const tableError = !isLoading && rowsLength === 0 && isError && !isNotFoundError(error);
+    const tableEmpty = !isLoading && rowsLength === 0;
+    const hasTimeoutError = isTimeoutError(error);
+    const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rowsLength) && !tableLoading;
+    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+    return {
+        isError,
+        tableLoading,
+        tableError,
+        tableEmpty,
+        hasTimeoutError,
+        areTotalRowsNotFillingHeight,
+        showNoDataView,
+    };
+}

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

@@ -44,7 +44,6 @@ 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/SheetViewVirtualTable/utils.d.ts

@@ -0,0 +1,2 @@
+import type { IColumnProps } from '../../../types/index.js';
+export declare function getColumnsTotalWidth(columns: IColumnProps[], initial?: number): number;

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

@@ -0,0 +1,6 @@
+export function getColumnsTotalWidth(columns, initial = 0.2) {
+    return columns.reduce((acc, col) => {
+        const width = typeof col.width === 'string' ? parseInt(col.width, 10) : col.width || 100;
+        return acc + width;
+    }, initial);
+}

package/build/components/{VirtualTable → VirtualTables/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/{VirtualTable → VirtualTables/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 './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 '../components/style';
 const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isSheetView) => ({
     columns,
     isLoading,

package/build/components/{VirtualTable → VirtualTables/VirtualTableWithCard}/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/{VirtualTable → VirtualTables/VirtualTableWithCard}/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 './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 '../components/style';
 const createItemData = memoize((isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, renderCardComponent) => ({
     isLoading,
     rows,

package/build/components/{VirtualTable → VirtualTables}/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', marginTop: '2px' } }), 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' } }), 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/{VirtualTable → VirtualTables}/components/TableHeader/components/TableCell/TableCell.d.ts

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

package/build/components/{VirtualTable → VirtualTables}/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 '../../../../../VirtualTable/components/ColumnFilter';
-import ColumnSort from '../../../../../VirtualTable/components/ColumnSort';
-import { StyledCell } from '../../../../../VirtualTable/style';
+import ColumnFilter from '../../../../../VirtualTables/components/ColumnFilter';
+import ColumnSort from '../../../../../VirtualTables/components/ColumnSort';
+import { StyledCell } from '../../../../../VirtualTables/components/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/{VirtualTable → VirtualTables}/components/TableLoadingWithCard.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { VirtualTableWithCardProps } from '../VirtualTableWithCard';
+import { ReactNode } from 'react';
 interface ITableLoadingProps {
     isLoaded?: boolean;
     isLoading?: boolean;
     rowsCount?: number;
-    cardLoadingComponent: VirtualTableWithCardProps['cardLoadingComponent'];
+    cardLoadingComponent: ReactNode;
 }
 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/{VirtualTable → VirtualTables}/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/{VirtualTable → VirtualTables}/components/TableNoDataWithCard.d.ts

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

package/build/components/{VirtualTable → VirtualTables}/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/{VirtualTable → VirtualTables}/components/TableRow.js

@@ -2,8 +2,8 @@ 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 { getSelectionStyles } from '../utils/getSelectionStyles';
+import { StyledCell, StyledTableRow } from './style';
+import { getSelectionStyles } from './utils';
 function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
     const renderCell = (column) => {
         const { render, format, selector } = 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 }, { 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 && (column === null || column === void 0 ? void 0 : column.isDefaultPinned) }, { 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/{VirtualTable → VirtualTables}/components/TableRowLoadingWithCard.d.ts

@@ -1,9 +1,8 @@
-import { CSSProperties } from 'react';
-import { VirtualTableWithCardProps } from '../VirtualTableWithCard';
+import { CSSProperties, ReactNode } from 'react';
 interface ITableRowLoadingProps {
     index?: number;
     style?: CSSProperties;
-    cardLoadingComponent: VirtualTableWithCardProps['cardLoadingComponent'];
+    cardLoadingComponent: ReactNode;
 }
 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/{VirtualTable → VirtualTables}/components/TableRowWithCard.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import type { TableRowProps } from '@mui/material';
-import { VirtualTableWithCardProps } from '../VirtualTableWithCard';
 interface ITableRowProps<R = any> {
     row: R;
     index: number;
@@ -9,7 +8,7 @@ interface ITableRowProps<R = any> {
         onRowClick?: (row: R) => void;
         showLoadedStyle?: boolean;
     };
-    renderCardComponent: VirtualTableWithCardProps['renderCardComponent'];
+    renderCardComponent: (rows: any) => ReactElement | null;
 }
 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/{VirtualTable → VirtualTables}/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/{VirtualTable → VirtualTables/components}/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 './components/TableFooter/style';
-import VirtualScrollList from './components/virtualScroll/VirtualScrollList';
+import { TABLE_FOOTER_HEIGHT } from './TableFooter/style';
+import VirtualScrollList from './virtualScroll/VirtualScrollList';
 export const TableWrapper = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'showNoDataView' && prop !== 'isSheetView',
 })(({ showNoDataView, isSheetView }) => ({
@@ -30,20 +30,17 @@ 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({ 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 && Object.assign({ borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`, paddingInline: '8px !important', paddingLeft: '8px !important', paddingRight: '8px !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,
-    } }, (isSelected && {
+})(({ 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}`,
+    paddingInline: '8px !important',
+    paddingLeft: '8px !important',
+    paddingRight: '8px !important',
+})), (isSelected && {
     color: '#1F88D0 !important',
     '& *': {
         color: '#1F88D0 !important',
     },
-}))))));
+}))));
 export const StyledVirtualList = styled(VirtualScrollList, {
     shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),
 })(({ theme, areTotalRowsNotFillingHeight, isSheetView }) => (Object.assign({ backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default }, (isSheetView && {

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

@@ -8,7 +8,6 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
     border?: undefined;
     backgroundColor?: undefined;
     color?: undefined;
-    '&:before'?: undefined;
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -21,11 +20,6 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
     border: string;
     backgroundColor: string;
     color: string;
-    '&:before': {
-        border: string;
-        borderWidth?: undefined;
-        borderBottom?: undefined;
-    };
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -43,11 +37,6 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
     minHeight: string;
     display: string;
     alignItems: string;
-    '&:before': {
-        borderWidth: string;
-        borderBottom: string;
-        border?: undefined;
-    };
     border?: undefined;
     backgroundColor?: undefined;
     color?: undefined;

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

@@ -3,12 +3,9 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
         return {};
     if (isCellSelected && !isColumnSelected) {
         return {
-            border: '1px solid #1F88D0',
+            border: '2px solid #1F88D0',
             backgroundColor: 'white',
             color: '#1F88D0',
-            '&:before': {
-                border: '1px solid #1F88D0',
-            },
         };
     }
     if (isColumnSelected) {
@@ -21,10 +18,6 @@ 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/{VirtualTable → VirtualTables}/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 '../../SheetView/components/SheetViewTableRowLoading';
+import SheetViewTableRowLoading from '../../SheetViewVirtualTable/components/SheetViewTableRowLoading';
 export const LastRowContent = React.memo(({ isLoadingRow, isSheetView, columns, currentRowCount, }) => {
     const { t } = useTranslation();
     if (isLoadingRow) {

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+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/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 { 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 { 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 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 { 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 { 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 Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
 export { default as StatusButton, ChevronIcon } from './StatusButton';

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/VirtualTable';
+import { CustomColumnFilterProps } from '../components/VirtualTables';
 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.312",
-  "testVersion": 0,
+  "version": "0.1.1-test.54",
+  "testVersion": 54,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}