@tap-payments/os-micro-frontend-shared 0.0.216 → 0.0.217-test.4-test.5

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 (13) hide show
  1. package/build/components/MenuItem/MenuItem.js +1 -1
  2. package/build/components/MenuItem/style.js +5 -0
  3. package/build/components/VirtualTable/SheetView/SheetViewTableHeader.d.ts +3 -1
  4. package/build/components/VirtualTable/SheetView/SheetViewTableHeader.js +6 -2
  5. package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js +25 -6
  6. package/build/components/VirtualTable/components/TableRow.d.ts +5 -1
  7. package/build/components/VirtualTable/components/TableRow.js +15 -3
  8. package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js +1 -1
  9. package/build/components/VirtualTable/utils/getBorderStyle.d.ts +41 -0
  10. package/build/components/VirtualTable/utils/getBorderStyle.js +24 -0
  11. package/build/constants/table/cell/chargeTableCellWidth.d.ts +1 -1
  12. package/build/constants/table/cell/chargeTableCellWidth.js +1 -1
  13. package/package.json +4 -2
package/build/components/MenuItem/MenuItem.js CHANGED
@@ -14,6 +14,6 @@ import { memo } from 'react';
14
14
  import { CheckboxStyled, MenuItemStyled } from './style';
15
15
  function MenuItem(_a) {
16
16
  var { isSelected, isDisabled, isIndeterminate, onClick, children } = _a, props = __rest(_a, ["isSelected", "isDisabled", "isIndeterminate", "onClick", "children"]);
17
- return (_jsxs(MenuItemStyled, Object.assign({ className: isDisabled ? 'disabled menu-item' : 'menu-item', onClick: onClick, disabled: isDisabled }, props, { children: [isSelected !== undefined && _jsx(CheckboxStyled, { size: "small", checked: isSelected, disabled: isDisabled, indeterminate: isIndeterminate }), children] })));
17
+ return (_jsxs(MenuItemStyled, Object.assign({ className: isDisabled ? 'disabled menu-item' : 'menu-item', onClick: onClick, disabled: isDisabled }, props, { children: [isSelected !== undefined && _jsx(CheckboxStyled, { size: "small", checked: isSelected, indeterminate: isIndeterminate, disabled: isDisabled }), children] })));
18
18
  }
19
19
  export default memo(MenuItem);
package/build/components/MenuItem/style.js CHANGED
@@ -23,4 +23,9 @@ export const CheckboxStyled = styled(Checkbox)(() => ({
23
23
  width: '12px !important',
24
24
  height: '12px !important',
25
25
  },
26
+ '&.Mui-disabled': {
27
+ '[data-testid="IndeterminateCheckBoxIcon"]': {
28
+ fill: 'rgba(0, 0, 0, 0.26)',
29
+ },
30
+ },
26
31
  }));
package/build/components/VirtualTable/SheetView/SheetViewTableHeader.d.ts CHANGED
@@ -11,7 +11,9 @@ interface SheetViewTableHeaderProps {
11
11
  onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
12
12
  isPinnable?: boolean;
13
13
  lastColumnId?: string | null;
14
+ selectedColumn?: string | null;
15
+ onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
14
16
  }
15
- declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
17
+ declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
16
18
  declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
17
19
  export default _default;
package/build/components/VirtualTable/SheetView/SheetViewTableHeader.js CHANGED
@@ -6,7 +6,7 @@ import { columnIcon, pinIcon, sortAzIcon, sortZaIcon, unpinIcon } from '../../..
6
6
  import ColumnFilter from '../components/ColumnFilter';
7
7
  import { StyledCell } from '../style';
8
8
  import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableRow } from './style';
9
- function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, }) {
9
+ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
10
10
  const [anchorEl, setAnchorEl] = useState(null);
11
11
  const open = Boolean(anchorEl);
12
12
  const theme = useTheme();
@@ -44,7 +44,11 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
44
44
  const isLast = id === columns[columns.length - 1].id;
45
45
  const isPinned = pinnedColumns.includes(id);
46
46
  const isDefaultPinned = !!column.isDefaultPinned;
47
- 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, 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' }, 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("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "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 && (_jsx(PinIconContainer, Object.assign({ isPinned: isPinned, onClick: () => handlePinClick(id), title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));
47
+ const isSelected = selectedColumn === id;
48
+ 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("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "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 && (_jsx(PinIconContainer, Object.assign({ isPinned: isPinned, onClick: (event) => {
49
+ event.stopPropagation();
50
+ handlePinClick(id);
51
+ }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));
48
52
  }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
49
53
  {
50
54
  label: 'Sort A-Z',
package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js CHANGED
@@ -25,7 +25,7 @@ import SheetViewTableHeader from './SheetViewTableHeader';
25
25
  import AutoSizer from 'react-virtualized-auto-sizer';
26
26
  import { usePinnedColumns } from './hooks/usePinnedColumns';
27
27
  import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
28
- const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned) => ({
28
+ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick) => ({
29
29
  columns,
30
30
  isLoading,
31
31
  rows,
@@ -39,12 +39,28 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
39
39
  newLoadedRowsEndIndex: lastItemIndex,
40
40
  isSheetView: true,
41
41
  isPinned,
42
+ selectedCell,
43
+ selectedColumn,
44
+ onCellClick,
42
45
  }));
43
46
  function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, }) {
44
47
  var _a, _b, _c;
45
48
  const theme = useTheme();
46
49
  const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
47
50
  const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
51
+ const [selectedCell, setSelectedCell] = useState(null);
52
+ const [selectedColumn, setSelectedColumn] = useState(null);
53
+ const handleCellClick = useCallback((rowIndex, columnId, event) => {
54
+ event.stopPropagation();
55
+ const cellKey = `${rowIndex}-${columnId}`;
56
+ setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
57
+ setSelectedColumn(null);
58
+ }, []);
59
+ const handleColumnClick = useCallback((columnId, event) => {
60
+ event.stopPropagation();
61
+ setSelectedColumn((prev) => (prev === columnId ? null : columnId));
62
+ setSelectedCell(null);
63
+ }, []);
48
64
  const onPointerDown = (e) => {
49
65
  dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
50
66
  };
@@ -61,9 +77,9 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
61
77
  const lastItemIndex = rows.length - 1;
62
78
  const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
63
79
  const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
64
- const pinnedStartItemData = createItemData(pinnedStartColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true);
65
- const pinnedEndItemData = createItemData(pinnedEndColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_b = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _b !== void 0 ? _b : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true);
66
- const unpinnedItemData = createItemData(unpinnedColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_c = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _c !== void 0 ? _c : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, false);
80
+ const pinnedStartItemData = createItemData(pinnedStartColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true, selectedCell, selectedColumn, handleCellClick);
81
+ const pinnedEndItemData = createItemData(pinnedEndColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_b = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _b !== void 0 ? _b : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true, selectedCell, selectedColumn, handleCellClick);
82
+ const unpinnedItemData = createItemData(unpinnedColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_c = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _c !== void 0 ? _c : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, false, selectedCell, selectedColumn, handleCellClick);
67
83
  const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
68
84
  const tableItemsCount = itemsCount;
69
85
  const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
@@ -94,6 +110,9 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
94
110
  handleScroll,
95
111
  scrollToIndex,
96
112
  areTotalRowsNotFillingHeight,
113
+ selectedCell,
114
+ selectedColumn,
115
+ handleCellClick,
97
116
  ]);
98
117
  const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
99
118
  const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
@@ -109,12 +128,12 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
109
128
  const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
110
129
  if (columnsData.length === 0)
111
130
  return null;
112
- return (_jsx(Wrapper, Object.assign({ width: columnsWidth }, { children: _jsxs(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
131
+ return (_jsx(Wrapper, Object.assign({ width: columnsWidth }, { children: _jsxs(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
113
132
  width: '100%',
114
133
  minWidth: 'fit-content',
115
134
  } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
116
135
  };
117
- return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
136
+ return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
118
137
  width: '100%',
119
138
  minWidth: 'fit-content',
120
139
  } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "SheetViewVirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
package/build/components/VirtualTable/components/TableRow.d.ts CHANGED
@@ -11,7 +11,11 @@ interface ITableRowProps<R = any> {
11
11
  showLoadedStyle?: boolean;
12
12
  };
13
13
  isSheetView?: boolean;
14
+ selectedCell?: string | null;
15
+ selectedColumn?: string | null;
16
+ onCellClick?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
17
+ isLastRow?: boolean;
14
18
  }
15
- declare function TableRow({ row, columns, index, rowProps, isSheetView }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
19
+ declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, onCellClick, isLastRow, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
16
20
  declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
17
21
  export default _default;
package/build/components/VirtualTable/components/TableRow.js CHANGED
@@ -3,7 +3,8 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
3
3
  import { memo, useMemo } from 'react';
4
4
  import { areEqual } from 'react-window';
5
5
  import { StyledCell, StyledTableRow } from '../style';
6
- function TableRow({ row, columns, index, rowProps, isSheetView }) {
6
+ import { getBorderStyle } from '../utils/getBorderStyle';
7
+ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
7
8
  const renderCell = (column) => {
8
9
  const { render, format, selector } = column;
9
10
  if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
@@ -13,8 +14,19 @@ function TableRow({ row, columns, index, rowProps, isSheetView }) {
13
14
  return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
14
15
  };
15
16
  const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
16
- return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, sx: Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start' }, column.cellStyle), isSheetView: isSheetView }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
17
- }) })), [columns, row]);
17
+ const columnIdStr = String(column.id);
18
+ const cellKey = `${index}-${columnIdStr}`;
19
+ const isCellSelected = selectedCell === cellKey;
20
+ const isColumnSelected = selectedColumn === columnIdStr;
21
+ const isSelected = isCellSelected || isColumnSelected;
22
+ const borderStyle = getBorderStyle({
23
+ isSelected,
24
+ isCellSelected,
25
+ isColumnSelected,
26
+ isLastRow,
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: 'pointer' }, borderStyle), column.cellStyle), isSheetView: isSheetView }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
29
+ }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
18
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));
19
31
  }
20
32
  export default memo(TableRow, areEqual);
package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js CHANGED
@@ -68,7 +68,7 @@ function ListItemWrapper(_a) {
68
68
  height: '100%',
69
69
  } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
70
70
  }
71
- return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView }, `row-${index}`);
71
+ return (_jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView, selectedCell: restData.selectedCell, selectedColumn: restData.selectedColumn, onCellClick: restData.onCellClick, isLastRow: index === rows.length - 1 }, `row-${index}`));
72
72
  }, [restData, index, row, columns, memoizedRowProps, isSheetView]);
73
73
  return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
74
74
  }
package/build/components/VirtualTable/utils/getBorderStyle.d.ts ADDED
@@ -0,0 +1,41 @@
1
+ interface GetBorderStyleParams {
2
+ isSelected: boolean;
3
+ isCellSelected: boolean;
4
+ isColumnSelected: boolean;
5
+ isLastRow: boolean;
6
+ }
7
+ export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetBorderStyleParams) => {
8
+ border?: undefined;
9
+ backgroundColor?: undefined;
10
+ borderWidth?: undefined;
11
+ borderStyle?: undefined;
12
+ borderColor?: undefined;
13
+ borderBottom?: undefined;
14
+ height?: undefined;
15
+ minHeight?: undefined;
16
+ display?: undefined;
17
+ alignItems?: undefined;
18
+ } | {
19
+ border: string;
20
+ backgroundColor: string;
21
+ borderWidth?: undefined;
22
+ borderStyle?: undefined;
23
+ borderColor?: undefined;
24
+ borderBottom?: undefined;
25
+ height?: undefined;
26
+ minHeight?: undefined;
27
+ display?: undefined;
28
+ alignItems?: undefined;
29
+ } | {
30
+ borderWidth: string;
31
+ borderStyle: string;
32
+ borderColor: string;
33
+ borderBottom: string;
34
+ backgroundColor: string;
35
+ height: string;
36
+ minHeight: string;
37
+ display: string;
38
+ alignItems: string;
39
+ border?: undefined;
40
+ };
41
+ export {};
package/build/components/VirtualTable/utils/getBorderStyle.js ADDED
@@ -0,0 +1,24 @@
1
+ export const getBorderStyle = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
2
+ if (!isSelected)
3
+ return {};
4
+ if (isCellSelected && !isColumnSelected) {
5
+ return {
6
+ border: '0.5px solid #1F88D0',
7
+ backgroundColor: '#F4F9FC',
8
+ };
9
+ }
10
+ if (isColumnSelected) {
11
+ return {
12
+ borderWidth: isLastRow ? '0px 0.5px 1px 0.5px' : '0px 0.5px 0px 0.5px',
13
+ borderStyle: 'solid',
14
+ borderColor: '#1F88D0',
15
+ borderBottom: !isLastRow ? '1px solid #F2F2F2' : '0.5px solid #1F88D0',
16
+ backgroundColor: '#F4F9FC',
17
+ height: '100%',
18
+ minHeight: '28px',
19
+ display: 'flex',
20
+ alignItems: 'center',
21
+ };
22
+ }
23
+ return {};
24
+ };
package/build/constants/table/cell/chargeTableCellWidth.d.ts CHANGED
@@ -97,7 +97,7 @@ export declare const chargeTableCellWidth: {
97
97
  readonly receipt: {
98
98
  readonly default: "85px";
99
99
  readonly text: "150px";
100
- readonly sheet: "131px";
100
+ readonly sheet: "135px";
101
101
  };
102
102
  readonly fees: {
103
103
  readonly default: "150px";
package/build/constants/table/cell/chargeTableCellWidth.js CHANGED
@@ -97,7 +97,7 @@ export const chargeTableCellWidth = {
97
97
  receipt: {
98
98
  default: '85px',
99
99
  text: '150px',
100
- sheet: '131px',
100
+ sheet: '135px',
101
101
  },
102
102
  fees: {
103
103
  default: '150px',
package/package.json CHANGED
@@ -1,7 +1,8 @@
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.216",
4
+ "version": "0.0.217-test.4-test.5",
5
+ "testVersion": 5,
5
6
  "type": "module",
6
7
  "main": "build/index.js",
7
8
  "module": "build/index.js",
@@ -60,6 +61,7 @@
60
61
  "scripts": {
61
62
  "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
62
63
  "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
64
+ "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
63
65
  "dev": "vite",
64
66
  "build": "tsc -b && vite build ",
65
67
  "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
@@ -129,4 +131,4 @@
129
131
  "publishConfig": {
130
132
  "registry": "https://registry.npmjs.org/"
131
133
  }
132
- }
134
+ }