@tap-payments/os-micro-frontend-shared 0.1.17 → 0.1.19

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

@@ -51,15 +51,15 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
     const [selectedCell, setSelectedCell] = useState(null);
     const [selectedColumn, setSelectedColumn] = useState(null);
-    const handleCellClick = useCallback((rowIndex, columnId, event, tableViewId) => {
+    const handleCellClick = useCallback((rowIndex, columnIndex, event, pinnedType) => {
         event.stopPropagation();
-        const cellKey = tableViewId ? `${rowIndex}-${columnId}-${tableViewId}` : `${rowIndex}-${columnId}`;
+        const cellKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}`;
         setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
         setSelectedColumn(null);
     }, []);
-    const handleColumnClick = useCallback((columnId, event, tableViewId) => {
+    const handleColumnClick = useCallback((columnIndex, event, pinnedType) => {
         event.stopPropagation();
-        const columnKey = tableViewId ? `${columnId}-${tableViewId}` : columnId;
+        const columnKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${columnIndex}`;
         setSelectedColumn((prev) => (prev === columnKey ? null : columnKey));
         setSelectedCell(null);
     }, []);

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

@@ -4,8 +4,9 @@ import { StyledHeader, StyledMUITableRow } from '../../style';
 import TableCell from './TableCell';
 function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
     return (_jsx(StyledHeader, Object.assign({ component: "nav", "data-testid": "SheetViewVirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { children: _jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "SheetViewVirtualTable_TableHeader_StyledMUITableRow" }, { children: columns.map((column, colIndex) => {
-                const columnKey = column.tableViewId ? `${column.id}-${column.tableViewId}` : column.id;
-                return (_jsx(TableCell, { column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === columnKey, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick }, `${column.id}-${colIndex}`));
+                var _a;
+                const columnKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${colIndex}`;
+                return (_jsx(TableCell, { column: column, colIndex: colIndex, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === columnKey, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick }, `${column.id}-${colIndex}`));
             }) })) })));
 }
 export default memo(SheetViewTableHeader);

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/TableCell.d.ts

@@ -3,11 +3,12 @@ import type { IColumnProps } from '../../../../../types/index.js';
 import { SheetViewTableHeaderProps } from './type';
 interface TableCellProps extends Pick<SheetViewTableHeaderProps, 'onColumnSort' | 'columnsSorting' | 'onColumnPin' | 'isPinnable' | 'lastColumnId' | 'onColumnClick' | 'pinnedColumns'> {
     column: IColumnProps;
+    colIndex: number;
     isFirst: boolean;
     isLast: boolean;
     isSelected: boolean;
     isDefaultPinned: boolean;
 }
-declare function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, tableViewId }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, tableViewId, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableCell>;
 export default _default;

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/TableCell.js

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

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/type.d.ts

@@ -12,7 +12,7 @@ export interface SheetViewTableHeaderProps {
     isPinnable?: boolean;
     lastColumnId?: string | null;
     selectedColumn?: string | null;
-    onColumnClick?: (columnId: string, event: React.MouseEvent, tableViewId?: string) => void;
+    onColumnClick?: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
     tablePosition?: TablePosition;
     hasPinnedStart?: boolean;
     hasPinnedEnd?: boolean;

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

@@ -13,7 +13,7 @@ interface ITableRowProps<R = any> {
     isSheetView?: boolean;
     selectedCell?: string | null;
     selectedColumn?: string | null;
-    onCellClick?: (rowIndex: number, columnId: string, event: React.MouseEvent, tableViewId?: string) => void;
+    onCellClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
     isLastRow?: boolean;
 }
 declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, onCellClick, isLastRow, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;

package/build/components/VirtualTables/components/TableRow.js

@@ -14,10 +14,10 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
         return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
     };
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
-            const columnIdStr = String(column.id);
-            const cellKey = column.tableViewId ? `${index}-${columnIdStr}-${column.tableViewId}` : `${index}-${columnIdStr}`;
+            var _a, _b;
+            const cellKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${index}-${colIndex}`;
             const isCellSelected = selectedCell === cellKey;
-            const columnKey = column.tableViewId ? `${columnIdStr}-${column.tableViewId}` : columnIdStr;
+            const columnKey = `${(_b = column.pinned) !== null && _b !== void 0 ? _b : 'default'}-${colIndex}`;
             const isColumnSelected = selectedColumn === columnKey;
             const isSelected = isCellSelected || isColumnSelected;
             const selectionStyles = getSelectionStyles({
@@ -34,7 +34,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                 effectiveFirst = isFirstColumn && column.pinned !== 'start';
                 effectiveLast = isLastColumn && column.pinned !== 'end';
             }
-            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: effectiveFirst, isLast: effectiveLast, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event, column.tableViewId), 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: effectiveFirst, isLast: effectiveLast, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
         }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
     return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",