@tap-payments/os-micro-frontend-shared 0.0.280 → 0.0.282

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Tooltip from '../../../Tooltip';
 import { destinationSolidIcon } from '../../../../constants/index.js';
 import { formatAmount } from '../../../../utils/index.js';
@@ -18,37 +18,40 @@ import TableCell from '../../TableCell';
 import { TextLabel } from '../style';
 import { CurrencyIcon, StatusGroupChips } from '../../../index.js';
 function DestinationCell(_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
+    var _b, _c, _d, _e, _f;
     var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection", "tableMode"]);
     const destinations = (destination === null || destination === void 0 ? void 0 : destination.destination) || [];
     const formattedAmount = formatAmount(destinationsAmount || 0);
     const firstDestinationFormattedAmount = formatAmount(((_b = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _b === void 0 ? void 0 : _b.amount) || 0);
-    if (!destinationsCount || hidden) {
-        return null;
-    }
-    if (tableMode === 'sheet') {
-        const sheetViewChips = [
-            {
-                key: 'id',
-                content: (_c = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _c === void 0 ? void 0 : _c.id,
-            },
-            {
-                key: 'amount',
-                content: (_jsxs(_Fragment, { children: [_jsx(CurrencyIcon, { currency: (_d = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _d === void 0 ? void 0 : _d.currency }), (destinationsCount || 0) > 1
-                            ? `${firstDestinationFormattedAmount.integerAmount}.${firstDestinationFormattedAmount.decimalAmount} +${(destinationsCount || 0) - 1}`
-                            : `${formattedAmount.integerAmount}.${formattedAmount.decimalAmount}`] })),
-            },
-        ];
+    const isSheetView = tableMode === 'sheet';
+    if (isSheetView) {
+        const sheetViewChips = destinations === null || destinations === void 0 ? void 0 : destinations.reduce((acc, dest) => {
+            const formattedDestAmount = formatAmount((dest === null || dest === void 0 ? void 0 : dest.amount) || 0);
+            return [
+                ...acc,
+                {
+                    key: 'id',
+                    content: dest === null || dest === void 0 ? void 0 : dest.id,
+                },
+                {
+                    key: 'amount',
+                    content: (_jsxs(_Fragment, { children: [_jsx(CurrencyIcon, { currency: dest === null || dest === void 0 ? void 0 : dest.currency }), _jsxs("span", { children: [formattedDestAmount.integerAmount, ".", formattedDestAmount.decimalAmount] })] })),
+                },
+            ];
+        }, []);
         return (_jsx(TableCell, Object.assign({ sx: {
                 width: 'fit-content',
                 overflow: 'visible',
             } }, props, { children: _jsx(StatusGroupChips, { chips: sheetViewChips }) })));
     }
+    if (!destinationsCount || hidden) {
+        return null;
+    }
     const textView = (_jsx(TextLabel, Object.assign({ sx: {
             textAlign: 'left',
             justifyContent: 'flex-start',
             height: 'auto',
-        } }, { children: destinationsCount > 1 ? (_jsxs("div", { children: ["Destination ", (_e = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _e === void 0 ? void 0 : _e.id, " - ", _jsx(CurrencyIcon, { currency: (_f = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _f === void 0 ? void 0 : _f.currency }), ' ', firstDestinationFormattedAmount.integerAmount, ".", firstDestinationFormattedAmount.decimalAmount, " +", destinationsCount - 1] })) : (_jsxs("div", { children: ["Destination ", (_g = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _g === void 0 ? void 0 : _g.id, " - ", _jsx(CurrencyIcon, { currency: (_h = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _h === void 0 ? void 0 : _h.currency }), " ", formattedAmount.integerAmount, ".", formattedAmount.decimalAmount] })) })));
+        } }, { children: destinationsCount > 1 ? (_jsxs("div", { children: ["Destination ", (_c = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _c === void 0 ? void 0 : _c.id, " - ", _jsx(CurrencyIcon, { currency: (_d = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _d === void 0 ? void 0 : _d.currency }), ' ', firstDestinationFormattedAmount.integerAmount, ".", firstDestinationFormattedAmount.decimalAmount, " +", destinationsCount - 1] })) : (_jsxs("div", { children: ["Destination ", (_e = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _e === void 0 ? void 0 : _e.id, " - ", _jsx(CurrencyIcon, { currency: (_f = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _f === void 0 ? void 0 : _f.currency }), " ", formattedAmount.integerAmount, ".", formattedAmount.decimalAmount] })) })));
     return (_jsx(TableCell, Object.assign({ sx: {
             width: 'fit-content',
             overflow: 'visible',

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

@@ -96,8 +96,8 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         };
         return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: () => rowHeight, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
                         overflowX: isPinned ? 'hidden' : 'auto',
-                        paddingBottom: '12px',
-                        backgroundColor: isPinned ? 'transparent' : theme.palette.background.default,
+                        paddingBottom: isPinned ? '25px' : '13px',
+                        backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
                     } }, { children: ListItemWrapper }))) })) })));
     }, [
         itemsCount,

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

@@ -14,8 +14,8 @@ export const EngravingLine = styled('div')(({ theme }) => ({
     left: 0,
     right: 0,
     height: '1.5px',
-    backgroundColor: theme.palette.grey[50],
-    boxShadow: `inset 0 1px 0 0 ${theme.palette.grey[50]}`,
+    backgroundColor: theme.palette.grey[300],
+    boxShadow: `inset 0 1px 0 0 ${theme.palette.grey[300]}`,
 }));
 export const Label = styled(Box)(({ theme }) => ({
     borderRadius: '37.5px',

package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { ListChildComponentProps } from 'react-window';
-export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow }: {
+export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow, isSheetView }: {
     isLoadingRow: boolean;
+    isSheetView: boolean;
 }) => import("react/jsx-runtime").JSX.Element>;
 export declare const StyledItemWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     showShadowHighlight?: boolean | undefined;
+    isSheetView?: boolean | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
 export default ListItemWrapper;

package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js

@@ -19,15 +19,18 @@ import { ActionIcon } from '../../style';
 import { RowErrorState } from '../RowErrorState';
 import { StyledParagraph } from '../TableLastItem';
 import TableRow from '../TableRow';
-export const LastRowContent = React.memo(({ isLoadingRow }) => {
+export const LastRowContent = React.memo(({ isLoadingRow, isSheetView }) => {
     const { t } = useTranslation();
     if (isLoadingRow) {
         return (_jsxs(Box, Object.assign({ "data-testid": "ListItemWrapper_lastRowContent_isLoadingRow", sx: {
-                height: '24px',
+                height: isSheetView ? '100%' : '24px',
                 width: '24px',
                 borderRadius: '50%',
                 background: 'transparent',
                 position: 'relative',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
             } }, { children: [_jsx(ActionIcon, { sx: { position: 'absolute' }, src: tableBackgroundLoader }), _jsx(ActionIcon, { sx: { position: 'absolute', padding: '3px' }, src: blueCircleLoaderIcon, alt: "tableLoadingSpinnerIcon", className: "spinner-loader", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } })] })));
     }
     return _jsx(StyledParagraph, Object.assign({ "data-testid": "ListItemWrapper_lastRowContent" }, { children: t('allRecordsHaveBeenSuccessfullyLoaded') }));
@@ -38,10 +41,10 @@ const createRowClickHandler = (row, onRowClick) => (e) => {
     onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
 };
 export const StyledItemWrapper = styled('div', {
-    shouldForwardProp: (props) => props !== 'showShadowHighlight',
-})(({ theme }) => ({
-    backgroundColor: theme.palette.background.default,
+    shouldForwardProp: (props) => props !== 'showShadowHighlight' && props !== 'isSheetView',
+})(({ theme, isSheetView }) => ({
     height: '100%',
+    backgroundColor: isSheetView ? '#F6F8FACC' : theme.palette.background.default,
 }));
 function ListItemWrapper(_a) {
     var _b;
@@ -53,7 +56,7 @@ function ListItemWrapper(_a) {
     const rowClickHandler = React.useCallback(createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
     const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler, isLoadingRow, areAllRowsLoaded, lastItemIndex]);
     const memoizedListItemComponent = React.useMemo(() => {
-        const lastRowContent = _jsx(LastRowContent, { isLoadingRow: isLoadingRow });
+        const lastRowContent = _jsx(LastRowContent, { isSheetView: isSheetView, isLoadingRow: isLoadingRow });
         const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
         if (isPinned && isLastRow) {
             return (_jsx(Box, { sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT } : { height: TABLE_ROW_HEIGHT })), { backgroundColor: '#F6F8FACC' }) }));
@@ -70,6 +73,6 @@ function ListItemWrapper(_a) {
         }
         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}`));
     }, [restData, index, row, columns, memoizedRowProps, isSheetView]);
-    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 })) })));
+    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({ isSheetView: isSheetView, "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
 }
 export default ListItemWrapper;

package/build/constants/table/cell/chargeTableCellWidth.d.ts

@@ -62,7 +62,7 @@ export declare const chargeTableCellWidth: {
     readonly destinations: {
         readonly default: "70px";
         readonly text: "240px";
-        readonly sheet: "200px";
+        readonly sheet: "380px";
     };
     readonly topup: {
         readonly default: "20px";

package/build/constants/table/cell/chargeTableCellWidth.js

@@ -62,7 +62,7 @@ export const chargeTableCellWidth = {
     destinations: {
         default: '70px',
         text: '240px',
-        sheet: '200px',
+        sheet: '380px',
     },
     topup: {
         default: '20px',

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.280",
-  "testVersion": 0,
+  "version": "0.0.282",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",