@tap-payments/os-micro-frontend-shared 0.1.18 → 0.1.20-test.1

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

@@ -51,15 +51,16 @@ 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) => {
+    const handleCellClick = useCallback((rowIndex, columnIndex, event, pinnedType) => {
         event.stopPropagation();
-        const cellKey = `${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) => {
+    const handleColumnClick = useCallback((columnIndex, event, pinnedType) => {
         event.stopPropagation();
-        setSelectedColumn((prev) => (prev === columnId ? null : columnId));
+        const columnKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${columnIndex}`;
+        setSelectedColumn((prev) => (prev === columnKey ? null : columnKey));
         setSelectedCell(null);
     }, []);
     const onPointerDown = (e) => {

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

@@ -1,22 +1,5 @@
 /// <reference types="react" />
-import { type TableHeadProps } from '@mui/material/TableHead';
-import type { IColumnProps, IVirtualTable, TablePosition } from '../../../../../types/index.js';
-interface SheetViewTableHeaderProps {
-    columns: IColumnProps[];
-    headerProps?: TableHeadProps;
-    columnsSorting?: IVirtualTable['columnsSorting'];
-    onColumnSort?: IVirtualTable['onColumnSort'];
-    showBackDrop: boolean;
-    pinnedColumns?: string[];
-    onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
-    isPinnable?: boolean;
-    lastColumnId?: string | null;
-    selectedColumn?: string | null;
-    onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
-    tablePosition?: TablePosition;
-    hasPinnedStart?: boolean;
-    hasPinnedEnd?: boolean;
-}
+import { SheetViewTableHeaderProps } from './type';
 declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
 export default _default;

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

@@ -4,7 +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) => {
-                return (_jsx(TableCell, { column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === column.id, 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 }, 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 }, 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);
+            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);
+                    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);
+                    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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { TableHeaderProps } from '../../../../VirtualTables/components/TableHeader/type';
-import { IColumnProps, IVirtualTable } from '../../../../../types/index.js';
+import { type TableHeadProps } from '@mui/material/TableHead';
+import { IColumnProps, IVirtualTable, TablePosition } from '../../../../../types/index.js';
 export interface SheetViewTableHeaderProps {
     columns: IColumnProps[];
-    headerProps?: TableHeaderProps;
+    headerProps?: TableHeadProps;
     columnsSorting?: IVirtualTable['columnsSorting'];
     onColumnSort?: IVirtualTable['onColumnSort'];
     showBackDrop: boolean;
@@ -12,5 +12,8 @@ export interface SheetViewTableHeaderProps {
     isPinnable?: boolean;
     lastColumnId?: string | null;
     selectedColumn?: string | null;
-    onColumnClick?: (columnId: string, event: React.MouseEvent) => 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) => 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,11 @@ 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 = `${index}-${columnIdStr}`;
+            var _a, _b;
+            const cellKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${index}-${colIndex}`;
             const isCellSelected = selectedCell === cellKey;
-            const isColumnSelected = selectedColumn === columnIdStr;
+            const columnKey = `${(_b = column.pinned) !== null && _b !== void 0 ? _b : 'default'}-${colIndex}`;
+            const isColumnSelected = selectedColumn === columnKey;
             const isSelected = isCellSelected || isColumnSelected;
             const selectionStyles = getSelectionStyles({
                 isSelected,
@@ -33,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), 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/build/utils/columns.d.ts

@@ -9,3 +9,8 @@ export declare function filterShownColumns<T>(columns: Array<IColumnProps<T & {
 export declare function isParameterSelected(columns: ColumnViewProps[], columnId: string, parameter: string): boolean;
 export declare function mapDataToViews(columnData?: ColumnsView[], language?: string): ColumnViewProps[];
 export declare function mapViewsToData(columns: ColumnViewProps[]): ColumnsView[];
+export declare const updateColumnSelection: ({ columnsViewData, columnName, selected, }: {
+    columnsViewData: ColumnsView[];
+    columnName: string;
+    selected: boolean;
+}) => ColumnsView[];

package/build/utils/columns.js

@@ -65,3 +65,13 @@ export function mapViewsToData(columns) {
         };
     });
 }
+export const updateColumnSelection = ({ columnsViewData, columnName, selected, }) => {
+    return columnsViewData.map((column) => {
+        var _a, _b;
+        const columnText = (_b = (_a = column.name[0]) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+        if (columnText === columnName.toLowerCase()) {
+            return Object.assign(Object.assign({}, column), { selected });
+        }
+        return column;
+    });
+};

package/build/utils/index.d.ts

@@ -40,4 +40,3 @@ export * from './toggleOptions';
 export * from './flag';
 export * from './encrypt';
 export * from './day';
-export * from './TableColumn';

package/build/utils/index.js

@@ -40,4 +40,3 @@ export * from './toggleOptions';
 export * from './flag';
 export * from './encrypt';
 export * from './day';
-export * from './TableColumn';

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.1.18",
-  "testVersion": 0,
+  "version": "0.1.20-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

package/build/utils/TableColumn.d.ts

@@ -1,6 +0,0 @@
-import { ColumnsView } from '../types/index.js';
-export declare const updateColumnSelection: ({ columnsViewData, columnName, selected, }: {
-    columnsViewData: ColumnsView[];
-    columnName: string;
-    selected: boolean;
-}) => ColumnsView[];

package/build/utils/TableColumn.js

@@ -1,10 +0,0 @@
-export const updateColumnSelection = ({ columnsViewData, columnName, selected, }) => {
-    return columnsViewData.map((column) => {
-        var _a, _b;
-        const columnText = (_b = (_a = column.name[0]) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-        if (columnText === columnName.toLowerCase()) {
-            return Object.assign(Object.assign({}, column), { selected });
-        }
-        return column;
-    });
-};