@tap-payments/os-micro-frontend-shared 0.0.194 → 0.0.195

package/build/components/StatusGroupChips/StatusGroupChips.d.ts

@@ -0,0 +1,3 @@
+import { StatusGroupChipsProps } from './type';
+declare const StatusGroupChips: ({ chips, containerSx, gap, direction, alignItems, defaultChipSx, ...containerProps }: StatusGroupChipsProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatusGroupChips;

package/build/components/StatusGroupChips/StatusGroupChips.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import StatusChip from '../StatusChip';
+const StatusGroupChips = (_a) => {
+    var { chips, containerSx, gap = '4px', direction = 'row', alignItems = 'center', defaultChipSx } = _a, containerProps = __rest(_a, ["chips", "containerSx", "gap", "direction", "alignItems", "defaultChipSx"]);
+    if (!chips || chips.length === 0) {
+        return null;
+    }
+    return (_jsx(Box, Object.assign({ sx: Object.assign({ display: 'flex', gap,
+            alignItems, flexDirection: direction }, containerSx) }, containerProps, { children: chips.map((_a) => {
+            var { key, content, sx } = _a, chipProps = __rest(_a, ["key", "content", "sx"]);
+            return (_jsx(StatusChip, Object.assign({ sx: Object.assign(Object.assign({ padding: '0.75px 12px', maxWidth: '120px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: '4px' }, defaultChipSx), sx) }, chipProps, { children: content }), key));
+        }) })));
+};
+export default StatusGroupChips;

package/build/components/StatusGroupChips/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StatusGroupChips } from './StatusGroupChips';
+export type { StatusGroupChipsProps, ChipConfig } from './type';

package/build/components/StatusGroupChips/index.js

@@ -0,0 +1 @@
+export { default as StatusGroupChips } from './StatusGroupChips';

package/build/components/StatusGroupChips/type.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+import type { BoxProps } from '@mui/material';
+export interface ChipConfig {
+    key: string;
+    content: React.ReactNode;
+    sx?: object;
+    textColor?: string;
+    bgColor?: string;
+    borderColor?: string;
+    disabled?: boolean;
+    padding?: string;
+    onClick?: (event: React.MouseEvent) => void;
+}
+export interface StatusGroupChipsProps extends Omit<BoxProps, 'children'> {
+    chips: ChipConfig[];
+    containerSx?: object;
+    gap?: string | number;
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    alignItems?: 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline';
+    defaultChipSx?: object;
+}

package/build/components/StatusGroupChips/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -9,28 +9,46 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Tooltip from '../../../Tooltip';
 import { destinationSolidIcon } from '../../../../constants/index.js';
 import { formatAmount } from '../../../../utils/index.js';
 import { DestinationCellContainer, DestinationCount, StyledDestinationCell, StyledDestinationIcon } from './styled';
 import TableCell from '../../TableCell';
 import { TextLabel } from '../style';
-import { CurrencyIcon } from '../../../index.js';
+import { CurrencyIcon, StatusGroupChips } from '../../../index.js';
 function DestinationCell(_a) {
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g, _h;
     var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection", "tableMode"]);
-    if (!destinationsCount || hidden) {
-        return null;
-    }
     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}`] })),
+            },
+        ];
+        return (_jsx(TableCell, Object.assign({ sx: {
+                width: 'fit-content',
+                overflow: 'visible',
+            } }, props, { children: _jsx(StatusGroupChips, { chips: sheetViewChips }) })));
+    }
     const textView = (_jsx(TextLabel, Object.assign({ sx: {
             textAlign: 'left',
             justifyContent: 'flex-start',
-            height: tableMode === 'sheet' ? '18px' : 'auto',
-        } }, { 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] })) })));
+            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] })) })));
     return (_jsx(TableCell, Object.assign({ sx: {
             width: 'fit-content',
             overflow: 'visible',

package/build/components/index.d.ts

@@ -90,6 +90,7 @@ export { default as Error } from './Error';
 export { default as StatusBar } from './StatusBar';
 export { default as MultiSelectStatusButton, type CurrencyOption, type MultiSelectStatusButtonProps } from './MultiSelectStatusButton';
 export * from './Chip';
+export * from './StatusGroupChips';
 export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';

package/build/components/index.js

@@ -90,6 +90,7 @@ export { default as Error } from './Error';
 export { default as StatusBar } from './StatusBar';
 export { default as MultiSelectStatusButton } from './MultiSelectStatusButton';
 export * from './Chip';
+export * from './StatusGroupChips';
 export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';

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.0.194",
+  "version": "0.0.195",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",