@tap-payments/os-micro-frontend-shared 0.0.311 → 0.0.312

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/build/components/VirtualTable/SheetView/components/SheetViewTableHeader/TableCell.js +9 -1
  2. package/build/components/VirtualTable/SheetView/style.js +1 -0
  3. package/build/components/VirtualTable/components/ColumnSort/ColumnSort.js +1 -1
  4. package/build/components/VirtualTable/components/TableRow.js +1 -1
  5. package/build/components/VirtualTable/style.js +10 -7
  6. package/build/components/VirtualTable/utils/getSelectionStyles.d.ts +11 -0
  7. package/build/components/VirtualTable/utils/getSelectionStyles.js +8 -1
  8. package/package.json +1 -1
package/build/components/VirtualTable/SheetView/components/SheetViewTableHeader/TableCell.js CHANGED
@@ -26,7 +26,15 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
26
26
  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) => {
27
27
  onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
28
28
  setColumnFilterEl(event.currentTarget);
29
- }, 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) => {
29
+ }, 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': {
30
+ content: '""',
31
+ border: isSelected ? '1px solid #1F88D0' : '1px solid transparent',
32
+ position: 'absolute',
33
+ top: 0,
34
+ right: 0,
35
+ left: 0,
36
+ bottom: 0,
37
+ } }, 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) => {
30
38
  onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
31
39
  } }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
32
40
  onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, e);
package/build/components/VirtualTable/SheetView/style.js CHANGED
@@ -44,6 +44,7 @@ export const StyledHeader = styled(TableHead, {
44
44
  export const StyledMUITableRow = styled(MUITableRow)(({ theme }) => ({
45
45
  display: 'flex',
46
46
  justifyContent: 'flex-start',
47
+ alignItems: 'center',
47
48
  width: '100%',
48
49
  minWidth: 'fit-content',
49
50
  height: '28px',
package/build/components/VirtualTable/components/ColumnSort/ColumnSort.js CHANGED
@@ -27,7 +27,7 @@ function ColumnSort({ onColumnSort, columnsSorting, columnId, onClick }) {
27
27
  handleClose(event);
28
28
  }
29
29
  };
30
- 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) => {
30
+ 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) => {
31
31
  handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'asc', e);
32
32
  }, 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) => {
33
33
  handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'desc', e);
package/build/components/VirtualTable/components/TableRow.js CHANGED
@@ -25,7 +25,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
25
25
  isColumnSelected,
26
26
  isLastRow,
27
27
  });
28
- 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}`));
28
+ 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}`));
29
29
  }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
30
30
  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));
31
31
  }
package/build/components/VirtualTable/style.js CHANGED
@@ -30,17 +30,20 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
30
30
  }));
31
31
  export const StyledCell = styled(TableCell, {
32
32
  shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView', 'isSelected'].includes(prop),
33
- })(({ 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 && {
34
- borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
35
- paddingInline: '8px !important',
36
- paddingLeft: '8px !important',
37
- paddingRight: '8px !important',
38
- })), (isSelected && {
33
+ })(({ 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': {
34
+ content: '""',
35
+ borderRight: isLast ? 'none' : '1px solid transparent',
36
+ position: 'absolute',
37
+ top: 0,
38
+ right: 0,
39
+ left: 0,
40
+ bottom: 0,
41
+ } }, (isSelected && {
39
42
  color: '#1F88D0 !important',
40
43
  '& *': {
41
44
  color: '#1F88D0 !important',
42
45
  },
43
- }))));
46
+ }))))));
44
47
  export const StyledVirtualList = styled(VirtualScrollList, {
45
48
  shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),
46
49
  })(({ theme, areTotalRowsNotFillingHeight, isSheetView }) => (Object.assign({ backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default }, (isSheetView && {
package/build/components/VirtualTable/utils/getSelectionStyles.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
8
8
  border?: undefined;
9
9
  backgroundColor?: undefined;
10
10
  color?: undefined;
11
+ '&:before'?: undefined;
11
12
  borderWidth?: undefined;
12
13
  borderStyle?: undefined;
13
14
  borderColor?: undefined;
@@ -20,6 +21,11 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
20
21
  border: string;
21
22
  backgroundColor: string;
22
23
  color: string;
24
+ '&:before': {
25
+ border: string;
26
+ borderWidth?: undefined;
27
+ borderBottom?: undefined;
28
+ };
23
29
  borderWidth?: undefined;
24
30
  borderStyle?: undefined;
25
31
  borderColor?: undefined;
@@ -37,6 +43,11 @@ export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumn
37
43
  minHeight: string;
38
44
  display: string;
39
45
  alignItems: string;
46
+ '&:before': {
47
+ borderWidth: string;
48
+ borderBottom: string;
49
+ border?: undefined;
50
+ };
40
51
  border?: undefined;
41
52
  backgroundColor?: undefined;
42
53
  color?: undefined;
package/build/components/VirtualTable/utils/getSelectionStyles.js CHANGED
@@ -3,9 +3,12 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
3
3
  return {};
4
4
  if (isCellSelected && !isColumnSelected) {
5
5
  return {
6
- border: '2px solid #1F88D0',
6
+ border: '1px solid #1F88D0',
7
7
  backgroundColor: 'white',
8
8
  color: '#1F88D0',
9
+ '&:before': {
10
+ border: '1px solid #1F88D0',
11
+ },
9
12
  };
10
13
  }
11
14
  if (isColumnSelected) {
@@ -18,6 +21,10 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
18
21
  minHeight: '28px',
19
22
  display: 'flex',
20
23
  alignItems: 'center',
24
+ '&:before': {
25
+ borderWidth: isLastRow ? '0px 1.5px 1px 1.5px' : '0px 1.5px 0px 1.5px',
26
+ borderBottom: !isLastRow ? '1px solid transparent' : '1.5px solid #1F88D0',
27
+ },
21
28
  };
22
29
  }
23
30
  return {};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.0.311",
4
+ "version": "0.0.312",
5
5
  "testVersion": 0,
6
6
  "type": "module",
7
7
  "main": "build/index.js",