@tap-payments/os-micro-frontend-shared 0.1.95 → 0.1.96-test.2

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/StatusIcons/AuthorizedIcon/AuthorizedIcon.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import { type AuthorizedStatusType } from '../../TableCells';
-import { TableMode } from '../../../types/index.js';
+import { SelectionProps, TableMode } from '../../../types/index.js';
 type AuthorizedIconProps = {
     iconStyles?: React.CSSProperties;
     authorizedStatus?: AuthorizedStatusType;
     isTextShown?: boolean;
     tableMode?: TableMode;
+    chipIndex?: number;
+    selectionProps?: SelectionProps;
 };
-export declare const AuthorizedIcon: ({ authorizedStatus, isTextShown, iconStyles, tableMode }: AuthorizedIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthorizedIcon: ({ authorizedStatus, isTextShown, iconStyles, tableMode, chipIndex, selectionProps }: AuthorizedIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/StatusIcons/AuthorizedIcon/AuthorizedIcon.js

@@ -6,10 +6,15 @@ import Tooltip from '../../Tooltip';
 import { authorizedStatusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
 import Icon from '../../Icon';
 import { TextLabel } from '../../TableCells/CustomCells/style';
-export const AuthorizedIcon = ({ authorizedStatus, isTextShown, iconStyles, tableMode }) => {
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+export const AuthorizedIcon = ({ authorizedStatus, isTextShown, iconStyles, tableMode, chipIndex = 0, selectionProps = {} }) => {
     const { t } = useTranslation();
     const theme = useTheme();
-    return (_jsx(Tooltip, Object.assign({ title: tableMode === 'sheet' ? '' : t(camelCase(authorizedStatus)) }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "StatusCell_AuthorizedStatusLabel", sx: Object.assign({ color: theme.palette.info.dark }, (tableMode === 'sheet' && {
-                height: '18px',
-            })) }, { children: t(camelCase(authorizedStatus)) }))) : (_jsx(Icon, { src: authorizedStatusIcons[authorizedStatus], alt: "authorized-icon", "data-testid": "StatusCell_AuthorizedStatusIcon", sx: iconStyles })) })));
+    const status = t(camelCase(authorizedStatus));
+    if (tableMode === 'sheet') {
+        return (_jsx(StatusChipWithCopy, Object.assign({ copyText: status, chipIndex: chipIndex, selectionProps: selectionProps }, { children: status })));
+    }
+    return (_jsx(Tooltip, Object.assign({ title: status }, { children: isTextShown ? (_jsx(TextLabel, Object.assign({ "data-testid": "StatusCell_AuthorizedStatusLabel", sx: {
+                color: theme.palette.info.dark,
+            } }, { children: status }))) : (_jsx(Icon, { src: authorizedStatusIcons[authorizedStatus], alt: "authorized-icon", "data-testid": "StatusCell_AuthorizedStatusIcon", sx: iconStyles })) })));
 };

package/build/components/StatusIcons/ChargeStatusIcon/ChargeStatusIcon.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { SelectionProps } from '../../../types/index.js';
 import { type ChargeStatus } from '../../TableCells';
-export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge, isSheetViewShown, selectionProps, }: Readonly<{
+export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge, isSheetViewShown, selectionProps, chipIndex, }: Readonly<{
     chargeStatus?: ChargeStatus;
     gatewayTooltip?: string;
     showAuthorizedStatus?: boolean;
@@ -20,4 +20,5 @@ export declare function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquire
     showBadge?: boolean;
     isSheetViewShown?: boolean;
     selectionProps?: SelectionProps;
+    chipIndex?: number;
 }>): import("react/jsx-runtime").JSX.Element;

package/build/components/StatusIcons/ChargeStatusIcon/ChargeStatusIcon.js

@@ -8,7 +8,7 @@ import StatusChipWithCopy from '../../StatusChipWithCopy';
 import { capturedStatusesStyles, unCapturedStatusesStyles, statusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
 import { StatusIcon, StatusIconWrapper, TextLabel } from '../../TableCells/CustomCells/style';
 import { AcquirerContainerAnimationVariants, ErrorCodeLabel, ErrorCodeLabelAnimationVariants, ErrorCodeVariants, ErrorCodeWrapper, GateWayIcon, GatewayIconWrapper, GatewayIconWrapperAnimationTransition, GatewaysContainer, GatewaysContainerAnimationVariants, StatusTextLabel, UnCapturedBadge, UnCapturedContainer, errorCodeLabelAnimation, TextViewWrapper, } from './style';
-export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, isSheetViewShown = false, selectionProps = {}, }) {
+export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, isSheetViewShown = false, selectionProps = {}, chipIndex = 0, }) {
     const unCapturedStatusStyle = chargeStatus ? unCapturedStatusesStyles[chargeStatus] : null;
     const captureStatusStyle = chargeStatus ? capturedStatusesStyles[chargeStatus] : null;
     const theme = useTheme();
@@ -18,7 +18,7 @@ export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip
     const gatewayTooltipTitle = gatewayTooltip && (_jsxs(_Fragment, { children: [_jsx("div", { children: "Gateway" }), _jsx("div", { children: gatewayTooltip })] }));
     const chargeIcon = chargeStatus && statusIcons[chargeStatus] && (_jsx("div", Object.assign({ "data-testid": "ChargeStatusIcon_ChargeIcon", style: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '16px', height: '16px', borderRadius: unCapturedStatusStyle ? '50%' : '' }, iconWrapperStyles) }, { children: _jsx(StatusIcon, { src: statusIcons[chargeStatus], alt: "charge-icon", "data-testid": "ChargeStatusIcon_StatusIcon", style: Object.assign({ borderRadius: unCapturedStatusStyle ? '50%' : '', width: '16px', height: '16px' }, iconStyles) }) })));
     if (isSheetViewShown) {
-        return (_jsxs(TextViewWrapper, { children: [_jsxs(StatusChipWithCopy, Object.assign({ copyText: t(camelCase(chargeStatus)), chipIndex: 0, selectionProps: selectionProps }, { children: [t(camelCase(chargeStatus)), " ", errorCode] })), unCapturedStatusStyle && (_jsxs(_Fragment, { children: [gatewayCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Gateway", chipIndex: 1, selectionProps: selectionProps }, { children: ["Gateway ", gatewayCode] }))), acquirerCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Acquirer", chipIndex: 2, selectionProps: selectionProps }, { children: ["Acquirer ", acquirerCode] })))] }))] }));
+        return (_jsxs(TextViewWrapper, { children: [_jsxs(StatusChipWithCopy, Object.assign({ copyText: t(camelCase(chargeStatus)), chipIndex: chipIndex, selectionProps: selectionProps }, { children: [t(camelCase(chargeStatus)), " ", errorCode] })), unCapturedStatusStyle && (_jsxs(_Fragment, { children: [gatewayCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Gateway", chipIndex: 1, selectionProps: selectionProps }, { children: ["Gateway ", gatewayCode] }))), acquirerCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Acquirer", chipIndex: 2, selectionProps: selectionProps }, { children: ["Acquirer ", acquirerCode] })))] }))] }));
     }
     if (isTextShown) {
         return (_jsxs(TextViewWrapper, { children: [_jsx(Tooltip, Object.assign({ title: chargeTooltipTitle }, { children: _jsxs(StatusTextLabel, Object.assign({ "data-testid": "ChargeStatusIcon_isTextShown", "data-status": camelCase(chargeStatus), sx: {

package/build/components/StatusIcons/DestinationIcon/DestinationIcon.d.ts

@@ -1,5 +1,8 @@
-import { DestinationStatus } from '../../../types/index.js';
-export declare function DestinationIcon({ status, isTextShown, }: Readonly<{
+import { DestinationStatus, SelectionProps } from '../../../types/index.js';
+export declare function DestinationIcon({ status, isTextShown, isSheetViewShown, chipIndex, selectionProps, }: Readonly<{
     status: DestinationStatus;
     isTextShown?: boolean;
+    isSheetViewShown?: boolean;
+    chipIndex?: number;
+    selectionProps?: SelectionProps;
 }>): import("react/jsx-runtime").JSX.Element;

package/build/components/StatusIcons/DestinationIcon/DestinationIcon.js

@@ -5,10 +5,18 @@ import Tooltip from '../../Tooltip';
 import { camelCase } from 'lodash';
 import { useTheme } from '@mui/material';
 import { t } from 'i18next';
-export function DestinationIcon({ status, isTextShown, }) {
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+export function DestinationIcon({ status, isTextShown, isSheetViewShown, chipIndex = 0, selectionProps = {}, }) {
     const theme = useTheme();
-    return isTextShown && destinationStatusIcons[status] ? (_jsx(TextLabel, Object.assign({ "data-testid": "ChargeStatusIcon_isTextShown", "data-status": camelCase(status), sx: {
-            background: '#1F88D00D',
-            color: status === 'PROCESSED' ? theme.palette.info.dark : theme.palette.common.black,
-        } }, { children: t(camelCase(status)) }))) : (_jsx(StatusIconWrapper, Object.assign({ className: "destination-status" }, { children: status && destinationStatusIcons[status] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(status)) }, { children: _jsx(StatusIcon, { src: destinationStatusIcons[status], alt: "destination-icon" }) }))) })));
+    const statusText = t(camelCase(status));
+    if (isSheetViewShown && destinationStatusIcons[status]) {
+        return (_jsx(StatusChipWithCopy, Object.assign({ copyText: statusText, chipIndex: chipIndex, selectionProps: selectionProps }, { children: statusText })));
+    }
+    if (isTextShown && destinationStatusIcons[status]) {
+        return (_jsx(TextLabel, Object.assign({ "data-testid": "ChargeStatusIcon_isTextShown", "data-status": camelCase(status), sx: {
+                background: '#1F88D00D',
+                color: status === 'PROCESSED' ? theme.palette.info.dark : theme.palette.common.black,
+            } }, { children: statusText })));
+    }
+    return (_jsx(StatusIconWrapper, Object.assign({ className: "destination-status" }, { children: status && destinationStatusIcons[status] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(status)) }, { children: _jsx(StatusIcon, { src: destinationStatusIcons[status], alt: "destination-icon" }) }))) })));
 }

package/build/components/StatusIcons/PayoutIcon/PayoutIcon.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { PayoutStatusType } from '../../TableCells';
+import { SelectionProps } from '../../../types/index.js';
 type PayoutIconProps = {
     iconStyles?: React.CSSProperties;
     payoutStatus?: PayoutStatusType;
     payoutTooltip?: React.ReactNode;
     isTextShown?: boolean;
+    isSheetViewShown?: boolean;
+    chipIndex?: number;
+    selectionProps?: SelectionProps;
 };
-export declare const PayoutIcon: ({ payoutStatus, isTextShown, payoutTooltip, iconStyles }: PayoutIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayoutIcon: ({ payoutStatus, isTextShown, payoutTooltip, iconStyles, isSheetViewShown, chipIndex, selectionProps, }: PayoutIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/StatusIcons/PayoutIcon/PayoutIcon.js

@@ -5,8 +5,13 @@ import Tooltip from '../../Tooltip';
 import { StatusIcon } from '../../TableCells/CustomCells/style';
 import { StatusTextLabel } from '../../TableCells/CustomCells/InvoiceStatusCell/style';
 import { payoutStatusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
-export const PayoutIcon = ({ payoutStatus = 'PENDING', isTextShown, payoutTooltip, iconStyles }) => {
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+export const PayoutIcon = ({ payoutStatus = 'PENDING', isTextShown, payoutTooltip, iconStyles, isSheetViewShown, chipIndex = 0, selectionProps = {}, }) => {
     const { t } = useTranslation();
-    const title = payoutTooltip ? payoutTooltip : t(camelCase(payoutStatus));
-    return (_jsx(Tooltip, Object.assign({ title: title }, { children: isTextShown ? (_jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_PayoutStatusLabel" }, { children: t(camelCase(payoutStatus)) }))) : (_jsx(StatusIcon, { src: payoutStatusIcons[payoutStatus], alt: "settled-icon", "data-testid": "StatusCell_PayoutStatusIcon", style: iconStyles })) })));
+    const statusText = t(camelCase(payoutStatus));
+    const title = payoutTooltip ? payoutTooltip : statusText;
+    if (isSheetViewShown) {
+        return (_jsx(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, copyText: statusText, selectionProps: selectionProps }, { children: statusText })));
+    }
+    return (_jsx(Tooltip, Object.assign({ title: title }, { children: isTextShown ? (_jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_PayoutStatusLabel" }, { children: statusText }))) : (_jsx(StatusIcon, { src: payoutStatusIcons[payoutStatus], alt: "settled-icon", "data-testid": "StatusCell_PayoutStatusIcon", style: iconStyles })) })));
 };

package/build/components/StatusIcons/RefundIcon/RefundIcon.d.ts

@@ -1,11 +1,15 @@
 /// <reference types="react" />
 import { type RefundStatusType } from '../../TableCells';
+import { SelectionProps } from '../../../types/index.js';
 type RefundIconProps = {
     iconStyles?: React.CSSProperties;
     refundStatus?: RefundStatusType;
     refundTooltip?: React.ReactNode;
     refundCount?: number;
     isTextShown?: boolean;
+    isSheetViewShown?: boolean;
+    chipIndex?: number;
+    selectionProps?: SelectionProps;
 };
-declare const RefundIcon: ({ isTextShown, refundStatus, refundTooltip, refundCount, iconStyles }: RefundIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const RefundIcon: ({ isTextShown, refundStatus, refundTooltip, refundCount, iconStyles, isSheetViewShown, chipIndex, selectionProps, }: RefundIconProps) => import("react/jsx-runtime").JSX.Element;
 export default RefundIcon;

package/build/components/StatusIcons/RefundIcon/RefundIcon.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import camelCase from 'lodash/camelCase';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '../../Tooltip';
@@ -8,9 +8,15 @@ import { MultiRefundContainer, MultiRefundIcon, RefundsCountBadge } from '../../
 import { StatusIcon } from '../../TableCells/CustomCells/style';
 import { StatusTextLabel } from '../../TableCells/CustomCells/InvoiceStatusCell/style';
 import { refundStatusIcons, refundStyles } from '../../TableCells/CustomCells/StatusCell/constant';
-const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '', refundCount, iconStyles }) => {
+import StatusChipWithCopy from '../../StatusChipWithCopy';
+const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '', refundCount, iconStyles, isSheetViewShown, chipIndex = 0, selectionProps = {}, }) => {
     const { t } = useTranslation();
     const theme = useTheme();
+    const refundCountShown = (refundCount || 0) > 1;
+    const status = t(camelCase(refundStatus));
+    if (isSheetViewShown) {
+        return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, selectionProps: selectionProps, copyText: status }, { children: [status, " ", refundCountShown ? `${refundCount}x` : null] })));
+    }
     const refundCountBadge = (_jsxs(RefundsCountBadge, Object.assign({ "data-testid": "StatusCell_RefundsCountBadge", initial: { width: 0, opacity: 0, padding: '0px' }, transition: {
             animate: {
                 duration: 0.5,
@@ -31,8 +37,8 @@ const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '',
                 opacity: 1,
             },
         } }, { children: [refundCount, "x"] })));
-    const refundCountShown = (refundCount || 0) > 1;
-    return (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: _jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_RefundStatusLabel", sx: {
+    if (isTextShown) {
+        return (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: _jsx(StatusTextLabel, Object.assign({ "data-testid": "StatusCell_RefundStatusLabel", sx: {
                     color: refundStyles[refundStatus].color,
                     backgroundColor: refundStyles[refundStatus].backgroundColor,
                     width: '90px',
@@ -41,11 +47,13 @@ const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '',
                             boxShadow: theme.shadows[4],
                             gap: theme.spacing(0.5),
                         },
-                    } }, { children: [t(camelCase(refundStatus)), " ", refundCountShown ? refundCountBadge : null] })) })) }))) : (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: refundCountShown ? (_jsxs(MultiRefundContainer, Object.assign({ whileHover: ['animate', 'fadeIn'], animate: "start", variants: {
-                    animate: {
-                        boxShadow: theme.shadows[4],
-                        gap: theme.spacing(0.5),
-                    },
-                } }, { children: [_jsx(MultiRefundIcon, { src: refundSettledIcon, alt: "multi-refunded-icon", "data-testid": "StatusCell_MultiRefundIcon" }), refundCountBadge] }))) : (_jsx(StatusIcon, { src: refundStatusIcons[refundStatus], alt: "refunded-icon", "data-testid": "StatusCell_RefundStatusIcon", style: iconStyles })) }))) }));
+                    } }, { children: [status, " ", refundCountShown ? refundCountBadge : null] })) })) })));
+    }
+    return (_jsx(Tooltip, Object.assign({ title: _jsx("div", { children: _jsx("div", { children: refundTooltip }) }) }, { children: refundCountShown ? (_jsxs(MultiRefundContainer, Object.assign({ whileHover: ['animate', 'fadeIn'], animate: "start", variants: {
+                animate: {
+                    boxShadow: theme.shadows[4],
+                    gap: theme.spacing(0.5),
+                },
+            } }, { children: [_jsx(MultiRefundIcon, { src: refundSettledIcon, alt: "multi-refunded-icon", "data-testid": "StatusCell_MultiRefundIcon" }), refundCountBadge] }))) : (_jsx(StatusIcon, { src: refundStatusIcons[refundStatus], alt: "refunded-icon", "data-testid": "StatusCell_RefundStatusIcon", style: iconStyles })) })));
 };
 export default RefundIcon;

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

@@ -7,7 +7,10 @@ interface ISheetViewTableLoadingProps {
     isLoading?: boolean;
     rowsCount?: number;
     isPinned?: boolean;
+    tableType?: string;
+    containerHeight?: number;
+    isCompact?: boolean;
 }
-declare function SheetViewTableLoading({ columns, isLoaded, animationType, isLoading, rowsCount, isPinned, }: ISheetViewTableLoadingProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewTableLoading({ columns, isLoaded, animationType, isLoading, rowsCount, isPinned, tableType, containerHeight, isCompact, }: ISheetViewTableLoadingProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableLoading>;
 export default _default;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { styled } from '@mui/material/styles';
 import uniqueId from 'lodash/uniqueId';
-import { calculateMaxAllowedRows } from '../../../../utils/index.js';
+import { calculateSheetViewMaxRows, getSheetViewRowHeight } from '../../../../utils/index.js';
 import SheetViewTableRowLoading from './SheetViewTableRowLoading';
 const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
     overflow: 'hidden',
@@ -11,9 +11,11 @@ const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
     filter: isLoaded && !isPinned ? 'blur(8px)' : 'none',
     marginTop: isLoaded && !isPinned ? '1rem' : '0',
 }));
-function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount, isPinned = false, }) {
-    let maxAllowedRows = rowsCount || calculateMaxAllowedRows(isLoaded, isLoading);
-    maxAllowedRows = rowsCount || Math.max(maxAllowedRows, 25);
+function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount, isPinned = false, tableType = 'default', containerHeight, isCompact = false, }) {
+    const availableHeight = containerHeight || window.innerHeight * 0.8;
+    const rowHeight = getSheetViewRowHeight();
+    const maxAllowedRows = calculateSheetViewMaxRows(availableHeight, rowHeight);
+    console.log({ maxAllowedRows, availableHeight, rowHeight, tableType, isCompact, containerHeight });
     return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, isPinned: isPinned, "data-testid": "SheetViewTableLoading" }, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index, useTableBackground: !isPinned }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) })));
 }
 export default memo(SheetViewTableLoading);

package/build/components/VirtualTables/components/style.js

@@ -146,7 +146,7 @@ export const SheetViewTableContainer = styled(Box)(() => ({
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    height: 'calc(100vh - 300px)',
+    height: '100%',
     paddingInline: '28px',
     borderRadius: '8px',
     marginBottom: '16px !important',

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

@@ -27,7 +27,7 @@ export declare const authorizationTableCellWidth: {
     readonly date: {
         readonly default: "170px";
         readonly text: "170px";
-        readonly sheet: "170px";
+        readonly sheet: "130px";
     };
     readonly order: {
         readonly default: "80px";

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

@@ -27,7 +27,7 @@ export const authorizationTableCellWidth = {
     date: {
         default: '170px',
         text: '170px',
-        sheet: '170px',
+        sheet: '130px',
     },
     order: {
         default: '80px',

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

@@ -22,7 +22,7 @@ export declare const chargeTableCellWidth: {
     readonly date: {
         readonly default: "170px";
         readonly text: "170px";
-        readonly sheet: "129px";
+        readonly sheet: "130px";
     };
     readonly reference: {
         readonly default: "95px";

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

@@ -22,7 +22,7 @@ export const chargeTableCellWidth = {
     date: {
         default: '170px',
         text: '170px',
-        sheet: '129px',
+        sheet: '130px',
     },
     reference: {
         default: '95px',

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

@@ -12,12 +12,12 @@ export declare const destinationsTableCellWidth: {
     readonly created: {
         readonly default: "170px";
         readonly text: "170px";
-        readonly sheet: "170px";
+        readonly sheet: "130px";
     };
     readonly receipt: {
         readonly default: "85px";
         readonly text: "150px";
-        readonly sheet: "150px";
+        readonly sheet: "165px";
     };
     readonly reference: {
         readonly default: "95px";
@@ -47,7 +47,7 @@ export declare const destinationsTableCellWidth: {
     readonly device: {
         readonly default: "150px";
         readonly text: "250px";
-        readonly sheet: "250px";
+        readonly sheet: "235px";
     };
     readonly source: {
         readonly default: "114px";
@@ -62,7 +62,7 @@ export declare const destinationsTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "250px";
-        readonly sheet: "250px";
+        readonly sheet: "165px";
     };
     readonly amount: {
         readonly default: "195px";
@@ -81,13 +81,13 @@ export declare const destinationsTableCellWidth: {
     };
     readonly merchant: {
         readonly default: "100px";
-        readonly text: "180px";
-        readonly sheet: "180px";
+        readonly text: "150px";
+        readonly sheet: "215px";
     };
     readonly actions: {
         readonly default: "100px";
         readonly text: "100px";
-        readonly sheet: "100px";
+        readonly sheet: "85px";
     };
     readonly destination: {
         readonly default: "100px";
@@ -109,4 +109,64 @@ export declare const destinationsTableCellWidth: {
         readonly text: "116px";
         readonly sheet: "116px";
     };
+    readonly payment_initiated: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "150px";
+    };
+    readonly payment_issuers: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "350px";
+    };
+    readonly card_number: {
+        readonly default: "120px";
+        readonly text: "120px";
+        readonly sheet: "155px";
+    };
+    readonly card_no: {
+        readonly default: "120px";
+        readonly text: "120px";
+        readonly sheet: "200px";
+    };
+    readonly payment_type: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "120px";
+    };
+    readonly payment_method: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "145px";
+    };
+    readonly payment_scheme: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "145px";
+    };
+    readonly auth_status: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "165px";
+    };
+    readonly auth_type: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "155px";
+    };
+    readonly eci: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "100px";
+    };
+    readonly payout_status: {
+        readonly default: "120px";
+        readonly text: "120px";
+        readonly sheet: "120px";
+    };
+    readonly reference_transfer: {
+        readonly default: "350px";
+        readonly text: "350px";
+        readonly sheet: "350px";
+    };
 };

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

@@ -12,12 +12,12 @@ export const destinationsTableCellWidth = {
     created: {
         default: '170px',
         text: '170px',
-        sheet: '170px',
+        sheet: '130px',
     },
     receipt: {
         default: '85px',
         text: '150px',
-        sheet: '150px',
+        sheet: '165px',
     },
     reference: {
         default: '95px',
@@ -47,7 +47,7 @@ export const destinationsTableCellWidth = {
     device: {
         default: '150px',
         text: '250px',
-        sheet: '250px',
+        sheet: '235px',
     },
     source: {
         default: '114px',
@@ -62,7 +62,7 @@ export const destinationsTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '250px',
-        sheet: '250px',
+        sheet: '165px',
     },
     amount: {
         default: '195px',
@@ -81,13 +81,13 @@ export const destinationsTableCellWidth = {
     },
     merchant: {
         default: '100px',
-        text: '180px',
-        sheet: '180px',
+        text: '150px',
+        sheet: '215px',
     },
     actions: {
         default: '100px',
         text: '100px',
-        sheet: '100px',
+        sheet: '85px',
     },
     destination: {
         default: '100px',
@@ -109,4 +109,64 @@ export const destinationsTableCellWidth = {
         text: '116px',
         sheet: '116px',
     },
+    payment_initiated: {
+        default: '150px',
+        text: '150px',
+        sheet: '150px',
+    },
+    payment_issuers: {
+        default: '150px',
+        text: '150px',
+        sheet: '350px',
+    },
+    card_number: {
+        default: '120px',
+        text: '120px',
+        sheet: '155px',
+    },
+    card_no: {
+        default: '120px',
+        text: '120px',
+        sheet: '200px',
+    },
+    payment_type: {
+        default: '150px',
+        text: '150px',
+        sheet: '120px',
+    },
+    payment_method: {
+        default: '150px',
+        text: '150px',
+        sheet: '145px',
+    },
+    payment_scheme: {
+        default: '150px',
+        text: '150px',
+        sheet: '145px',
+    },
+    auth_status: {
+        default: '150px',
+        text: '150px',
+        sheet: '165px',
+    },
+    auth_type: {
+        default: '150px',
+        text: '150px',
+        sheet: '155px',
+    },
+    eci: {
+        default: '150px',
+        text: '150px',
+        sheet: '100px',
+    },
+    payout_status: {
+        default: '120px',
+        text: '120px',
+        sheet: '120px',
+    },
+    reference_transfer: {
+        default: '350px',
+        text: '350px',
+        sheet: '350px',
+    },
 };

package/build/utils/style.js

@@ -31,10 +31,6 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
 const getRowSelectionStyles = () => ({
     backgroundColor: SELECTION_COLORS.background,
     color: SELECTION_COLORS.primary,
-    border: 'none',
-    '&:before': {
-        border: 'none',
-    },
 });
 const getSingleCellSelectionStyles = () => ({
     border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,

package/build/utils/table.d.ts

@@ -6,4 +6,9 @@ export declare const getColumnWidthPercentage: (widthInPx: number, options?: {
 export declare const getCellWidth: ({ table, cellID, tableMode }: TableCellWidthProps) => string;
 export declare const calculateMaxAllowedRows: (isLoaded: boolean, isLoading: boolean) => number;
 export declare const isHeightNotFullyFilledByRows: (totalRows: number) => boolean;
+export declare const calculateSheetViewHeight: (totalRows: number, rowHeight?: number) => number;
+export declare const calculateSheetViewMaxRows: (availableHeight: number, rowHeight?: number) => number;
+export declare const isSheetViewScrollable: (totalRows: number, containerHeight: number, rowHeight?: number) => boolean;
+export declare const getSheetViewRowHeight: () => number;
+export declare const calculateSheetViewOptimalHeight: (totalRows: number, tableType: string, maxHeightPercentage?: number) => number;
 export declare const isTableDefaultMode: (tableMode?: TableMode) => boolean;

package/build/utils/table.js

@@ -73,6 +73,38 @@ export const isHeightNotFullyFilledByRows = (totalRows) => {
     const allowedRows = maxRowsThatFit();
     return totalRows < allowedRows + 1;
 };
+export const calculateSheetViewHeight = (totalRows, rowHeight = TABLE_CONTENT_ROW_HEIGHT) => {
+    const headerHeight = 56;
+    const padding = 16;
+    const calculatedHeight = headerHeight + totalRows * rowHeight + padding;
+    const minHeight = 200;
+    const maxHeight = window.innerHeight * 0.8;
+    return Math.max(minHeight, Math.min(calculatedHeight, maxHeight));
+};
+export const calculateSheetViewMaxRows = (availableHeight, rowHeight = TABLE_CONTENT_ROW_HEIGHT) => {
+    const headerHeight = 56;
+    const padding = 16;
+    const availableContentHeight = availableHeight - headerHeight - padding;
+    return Math.floor(availableContentHeight / rowHeight);
+};
+export const isSheetViewScrollable = (totalRows, containerHeight, rowHeight = TABLE_CONTENT_ROW_HEIGHT) => {
+    const headerHeight = 56;
+    const padding = 16;
+    const contentHeight = headerHeight + totalRows * rowHeight + padding;
+    return contentHeight > containerHeight;
+};
+export const getSheetViewRowHeight = () => {
+    const baseRowHeight = TABLE_CONTENT_ROW_HEIGHT;
+    return baseRowHeight * 0.8;
+};
+export const calculateSheetViewOptimalHeight = (totalRows, tableType, maxHeightPercentage = 0.8) => {
+    const rowHeight = getSheetViewRowHeight();
+    const headerHeight = 56;
+    const padding = 16;
+    const calculatedHeight = headerHeight + totalRows * rowHeight + padding;
+    const maxHeight = window.innerHeight * maxHeightPercentage;
+    return Math.min(calculatedHeight, maxHeight);
+};
 export const isTableDefaultMode = (tableMode = 'default') => {
     return tableMode === 'default';
 };

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.95",
-  "testVersion": 3,
+  "version": "0.1.96-test.2",
+  "testVersion": 2,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",