@tap-payments/os-micro-frontend-shared 0.0.251 → 0.0.253

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

@@ -63,7 +63,7 @@ export const CountBadge = styled('span')(({ theme }) => ({
     fontSize: '9.782px',
     fontWeight: 600,
 }));
-export const IdButtonContainer = styled('div')(({ theme }) => ({
+export const IdButtonContainer = styled('div')(() => ({
     display: 'flex',
     width: '24px',
     height: '24px',

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

@@ -45,7 +45,7 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
                     const isPinned = pinnedColumns.includes(id);
                     const isDefaultPinned = !!column.isDefaultPinned;
                     const isSelected = selectedColumn === id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '1px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#e3f2fd' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ isPinned: isPinned, onClick: (event) => {
+                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
                                     event.stopPropagation();
                                     handlePinClick(id);
                                 }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));

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

@@ -2,9 +2,7 @@
 export declare const ActionIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ColumnIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const HeaderText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const PinIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    isPinned: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PinIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 interface StyledHeaderProps {
     showBackDrop: boolean;
 }

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

@@ -18,7 +18,7 @@ export const HeaderText = styled('span')(({ theme }) => ({
     fontSize: '12px',
     fontWeight: 600,
 }));
-export const PinIconContainer = styled('div')(({ theme, isPinned }) => ({
+export const PinIconContainer = styled('div')(() => ({
     width: '16px',
     height: 'auto',
     cursor: 'pointer',

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';
-import { getBorderStyle } from '../utils/getBorderStyle';
+import { getSelectionStyles } from '../utils/getSelectionStyles';
 function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
     const renderCell = (column) => {
         const { render, format, selector } = column;
@@ -19,13 +19,13 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
             const isCellSelected = selectedCell === cellKey;
             const isColumnSelected = selectedColumn === columnIdStr;
             const isSelected = isCellSelected || isColumnSelected;
-            const borderStyle = getBorderStyle({
+            const selectionStyles = getSelectionStyles({
                 isSelected,
                 isCellSelected,
                 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' }, borderStyle), 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, 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: isSelected }, { 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/style.d.ts

@@ -18,6 +18,7 @@ export declare const StyledCell: import("@emotion/styled").StyledComponent<impor
     isLast: boolean;
     isFirst: boolean;
     isSheetView?: boolean | undefined;
+    isSelected?: boolean | undefined;
 }, {}, {}>;
 interface StyledVirtualListProps {
     areTotalRowsNotFillingHeight: boolean;

package/build/components/VirtualTable/style.js

@@ -30,11 +30,16 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
 }));
 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 && {
+})(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign(Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
     borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
     paddingInline: '8px !important',
     paddingLeft: '8px !important',
     paddingRight: '8px !important',
+})), (isSelected && {
+    color: '#1F88D0 !important',
+    '& *': {
+        color: '#1F88D0 !important',
+    },
 }))));
 export const StyledVirtualList = styled(VirtualScrollList, {
     shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),

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

@@ -1,12 +1,13 @@
-interface GetBorderStyleParams {
+interface GetSelectionStylesParams {
     isSelected: boolean;
     isCellSelected: boolean;
     isColumnSelected: boolean;
     isLastRow: boolean;
 }
-export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetBorderStyleParams) => {
+export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetSelectionStylesParams) => {
     border?: undefined;
     backgroundColor?: undefined;
+    color?: undefined;
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -18,6 +19,7 @@ export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSele
 } | {
     border: string;
     backgroundColor: string;
+    color: string;
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -31,11 +33,12 @@ export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSele
     borderStyle: string;
     borderColor: string;
     borderBottom: string;
-    backgroundColor: string;
     height: string;
     minHeight: string;
     display: string;
     alignItems: string;
     border?: undefined;
+    backgroundColor?: undefined;
+    color?: undefined;
 };
 export {};

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

@@ -1,19 +1,19 @@
-export const getBorderStyle = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
+export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
     if (!isSelected)
         return {};
     if (isCellSelected && !isColumnSelected) {
         return {
-            border: '0.5px solid #1F88D0',
-            backgroundColor: '#F4F9FC',
+            border: '2px solid #1F88D0',
+            backgroundColor: 'white',
+            color: '#1F88D0',
         };
     }
     if (isColumnSelected) {
         return {
-            borderWidth: isLastRow ? '0px 0.5px 1px 0.5px' : '0px 0.5px 0px 0.5px',
+            borderWidth: isLastRow ? '0px 1.5px 1px 1.5px' : '0px 1.5px 0px 1.5px',
             borderStyle: 'solid',
             borderColor: '#1F88D0',
-            borderBottom: !isLastRow ? '1px solid #F2F2F2' : '0.5px solid #1F88D0',
-            backgroundColor: '#F4F9FC',
+            borderBottom: !isLastRow ? '1px solid #F2F2F2' : '1.5px solid #1F88D0',
             height: '100%',
             minHeight: '28px',
             display: 'flex',

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.251",
-  "testVersion": 2,
+  "version": "0.0.253",
+  "testVersion": 3,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",