@tap-payments/os-micro-frontend-shared 0.0.299 → 0.0.301-test.6

package/build/components/MaskedText/MaskedText.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import StatusChip from '../StatusChip';
-import { Box, useTheme } from '@mui/material';
 import { passwordDotsIcon } from '../../constants/index.js';
 const MaskedText = ({ text, startLength = 8, endLength = 4 }) => {
-    const theme = useTheme();
     const startText = text.slice(0, startLength);
     const endText = text.slice(text.length - endLength);
-    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: theme.spacing(0.5) } }, { children: [_jsx(StatusChip, Object.assign({ bgColor: "#EFF1F2", borderColor: "transparent", textColor: theme.palette.text.primary }, { children: startText })), _jsx("img", { src: passwordDotsIcon, alt: "passwordDots" }), _jsx(StatusChip, Object.assign({ bgColor: "#EFF1F2", borderColor: "transparent", textColor: theme.palette.text.primary }, { children: endText }))] })));
+    return (_jsxs(StatusChip, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [startText, _jsx("img", { src: passwordDotsIcon, alt: "passwordDots" }), endText] })));
 };
 export default MaskedText;

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

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

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

@@ -5,23 +5,17 @@ import { useTranslation } from 'react-i18next';
 import Tooltip from '../../Tooltip';
 import { unCapturedStatuses } from '../../../constants/index.js';
 import { AcquirerContainerAnimationVariants, ErrorCodeLabel, ErrorCodeLabelAnimationVariants, ErrorCodeVariants, ErrorCodeWrapper, GateWayIcon, GatewayIconWrapper, GatewayIconWrapperAnimationTransition, GatewaysContainer, GatewaysContainerAnimationVariants, StatusTextLabel, UnCapturedBadge, UnCapturedContainer, errorCodeLabelAnimation, TextViewWrapper, } from './style';
-import { capturedStatusesStyles, unCapturedStatusesStyles, statusIcons, chargeSheetViewChipStyles, } from '../../TableCells/CustomCells/StatusCell/constant';
+import { capturedStatusesStyles, unCapturedStatusesStyles, statusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
 import { StatusIcon, StatusIconWrapper, TextLabel } from '../../TableCells/CustomCells/style';
-import StatusChip from '../../StatusChip';
-export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, tableMode, showBadge = true, }) {
+export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip, chargeTooltip, errorCode, isTextShown, gatewayCode, acquirerCode, unCapturedStyles, iconStyles, iconWrapperStyles, gatewayIconWrapperStyles, gatewayContainerStyles, gateWayIconStyles, showBadge = true, }) {
     const unCapturedStatusStyle = chargeStatus ? unCapturedStatusesStyles[chargeStatus] : null;
     const captureStatusStyle = chargeStatus ? capturedStatusesStyles[chargeStatus] : null;
-    const sheetViewStatusStyle = chargeStatus ? chargeSheetViewChipStyles[chargeStatus] : {};
     const theme = useTheme();
     const { t } = useTranslation();
     const chargeTooltipTitle = chargeTooltip && (_jsx(_Fragment, { children: _jsx("div", { children: chargeTooltip }) }));
     const acquirerTooltipTitle = acquirerTooltip && (_jsxs(_Fragment, { children: [_jsx("div", { children: "Acquirer" }), _jsx("div", { children: 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 (tableMode === 'sheet') {
-        const { background, color, border } = sheetViewStatusStyle;
-        return _jsx(StatusChip, Object.assign({ sx: { background, color, border } }, { children: t(camelCase(chargeStatus)) }));
-    }
     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: {
                             background: (unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background) || (captureStatusStyle === null || captureStatusStyle === void 0 ? void 0 : captureStatusStyle.background) || 'transparent',

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

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

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

@@ -4,15 +4,9 @@ import { useTranslation } from 'react-i18next';
 import Tooltip from '../../Tooltip';
 import { StatusIcon } from '../../TableCells/CustomCells/style';
 import { StatusTextLabel } from '../../TableCells/CustomCells/InvoiceStatusCell/style';
-import { payoutStatusIcons, payoutStatusStyles } from '../../TableCells/CustomCells/StatusCell/constant';
-import { StatusChip } from '../../index.js';
-export const PayoutIcon = ({ payoutStatus = 'PENDING', tableMode, isTextShown, payoutTooltip, iconStyles }) => {
+import { payoutStatusIcons } from '../../TableCells/CustomCells/StatusCell/constant';
+export const PayoutIcon = ({ payoutStatus = 'PENDING', isTextShown, payoutTooltip, iconStyles }) => {
     const { t } = useTranslation();
-    const payoutStatusStyle = payoutStatusStyles[payoutStatus];
-    if (tableMode === 'sheet') {
-        const chipText = payoutStatus === 'PENDING' ? t('scheduledPayout') : t(camelCase(payoutStatus));
-        return _jsx(StatusChip, Object.assign({ sx: Object.assign({}, payoutStatusStyle) }, { children: chipText }));
-    }
     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 })) })));
 };

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

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

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

@@ -8,8 +8,7 @@ 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';
-import StatusChip from '../../StatusChip';
-const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '', refundCount, iconStyles, tableMode }) => {
+const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '', refundCount, iconStyles }) => {
     const { t } = useTranslation();
     const theme = useTheme();
     const refundCountBadge = (_jsxs(RefundsCountBadge, Object.assign({ "data-testid": "StatusCell_RefundsCountBadge", initial: { width: 0, opacity: 0, padding: '0px' }, transition: {
@@ -33,10 +32,6 @@ const RefundIcon = ({ isTextShown, refundStatus = 'PENDING', refundTooltip = '',
             },
         } }, { children: [refundCount, "x"] })));
     const refundCountShown = (refundCount || 0) > 1;
-    if (tableMode === 'sheet') {
-        const { color, backgroundColor } = refundStyles[refundStatus];
-        return (_jsx(StatusChip, Object.assign({ textColor: color, bgColor: backgroundColor }, { children: t(camelCase(refundStatus)) })));
-    }
     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: {
                     color: refundStyles[refundStatus].color,
                     backgroundColor: refundStyles[refundStatus].backgroundColor,

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

@@ -34,7 +34,7 @@ function SegmentsCell(_a) {
                 setIsTooltipOpen(false);
             }, title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: referenceSourceAnimation(index, theme.shadows[4], isTextShown ? 83 : 0), sx: {
                     width: isTextShown ? '79px' : '36px',
-                } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment) }) })) : (_jsx(IconWithBadge, { mainIcon: (segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) || segmentsIcons[segment], mainIconSize: segment === 'order' ? 11.82 : 16, containerSize: segment === 'order' ? 11.82 : 16, sx: Object.assign({}, ((segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) && { borderRadius: '40px' })), onError: (e) => {
+                } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment) }) })) : (_jsx(IconWithBadge, { mainIcon: (segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) || segmentsIcons[segment], mainIconSize: segment === 'order' ? 11.82 : 16, containerSize: segment === 'order' ? 11.82 : 16, sx: Object.assign({}, ((segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) ? { borderRadius: '40px' } : { borderRadius: '0px' })), onError: (e) => {
                         e.currentTarget.src = segmentsIcons[segment];
                         e.currentTarget.style.borderRadius = '0px';
                     }, borderColor: "transparent" })) })) }), `${segment}-${index}`));

package/build/components/TableCells/CustomCells/StatusCell/constant.d.ts

@@ -38,23 +38,6 @@ export declare const payoutStatusIcons: {
     SETTLED: string;
     PENDING: string;
 };
-export declare const payoutStatusStyles: {
-    PAID_OUT: {
-        color: string;
-        background: string;
-        border: string;
-    };
-    SETTLED: {
-        color: string;
-        background: string;
-        border: string;
-    };
-    PENDING: {
-        color: string;
-        background: string;
-        border: string;
-    };
-};
 export declare const authorizedStatusIcons: {
     AUTHORIZED: string;
 };
@@ -62,20 +45,3 @@ export declare const capturedStatusesStyles: Record<(typeof unCapturedStatuses)[
     color: string;
     background: string;
 }>;
-export declare const chargeSheetViewChipStyles: {
-    ABANDONED: {
-        color: string;
-        background: string;
-        border: string;
-    };
-    CANCELLED: {
-        color: string;
-        background: string;
-        border: string;
-    };
-    INITIATED: {
-        color: string;
-        background: string;
-        border: string;
-    };
-};

package/build/components/TableCells/CustomCells/StatusCell/constant.js

@@ -82,23 +82,6 @@ export const payoutStatusIcons = {
     SETTLED: settledIcon,
     PENDING: settlementInitiatedIcon,
 };
-export const payoutStatusStyles = {
-    PAID_OUT: {
-        color: '#2ACE00',
-        background: '#2ACE001A',
-        border: 'none',
-    },
-    SETTLED: {
-        color: '#2ACE00',
-        background: 'transparent',
-        border: '1px solid #2ACE0066',
-    },
-    PENDING: {
-        color: '#FF7A00',
-        background: '#FF7A000D',
-        border: 'none',
-    },
-};
 export const authorizedStatusIcons = {
     AUTHORIZED: authorizedIcon,
 };
@@ -108,16 +91,3 @@ export const capturedStatusesStyles = {
         background: '#1F88D00D',
     },
 };
-export const chargeSheetViewChipStyles = Object.assign(Object.assign(Object.assign({}, unCapturedStatusesStyles), capturedStatusesStyles), { ABANDONED: {
-        color: '#FFD600',
-        background: 'white',
-        border: '1px solid #FFD60080',
-    }, CANCELLED: {
-        color: '#EDC806',
-        background: '#FFD6001A',
-        border: 'none',
-    }, INITIATED: {
-        color: '#8D8D94',
-        background: 'white',
-        border: '1px solid #8D8D941A',
-    } });

package/build/components/VirtualTable/SheetView/components/SheetViewTableRowLoading.d.ts

@@ -6,7 +6,8 @@ interface ISheetViewTableRowLoadingProps {
     animationType?: AnimationType;
     style?: CSSProperties;
     rowIndex?: number;
+    useTableBackground?: boolean;
 }
-declare function SheetViewTableRowLoading({ columns, style, index, animationType, rowIndex }: ISheetViewTableRowLoadingProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewTableRowLoading({ columns, style, index, animationType, rowIndex, useTableBackground, }: ISheetViewTableRowLoadingProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableRowLoading>;
 export default _default;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import Skeleton from '@mui/material/Skeleton';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import TableCell from '@mui/material/TableCell';
 import MUITableRow from '@mui/material/TableRow';
 import { areEqual } from 'react-window';
@@ -11,14 +11,16 @@ const StyledSkeleton = styled(Skeleton)(() => ({
     width: '100%',
     minWidth: '20px',
 }));
-function SheetViewTableRowLoading({ columns, style, index, animationType, rowIndex = 0 }) {
-    return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', borderBottom: '1px solid #F2F2F2', minHeight: '28px', height: '28px', alignItems: 'center', '&:hover': {
+function SheetViewTableRowLoading({ columns, style, index, animationType, rowIndex = 0, useTableBackground = false, }) {
+    const theme = useTheme();
+    return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', borderBottom: '1px solid #F2F2F2', minHeight: '28px', height: '28px', alignItems: 'center', backgroundColor: useTableBackground ? theme.palette.background.default : 'transparent', '&:hover': {
                 backgroundColor: 'transparent !important',
             } }), component: "div", hover: true }, { children: columns.map((column, colIndex) => {
             var _a;
             const isLastColumn = colIndex === columns.length - 1;
             const isFirstColumn = colIndex === 0;
-            const shouldShowActualData = isFirstColumn && column.render;
+            const isPinnedStart = column.pinned === 'start';
+            const shouldShowActualData = isFirstColumn && isPinnedStart;
             return (_jsx(TableCell, Object.assign({ sx: {
                     width: column.width || `${100 / columns.length}%` || '20%',
                     paddingBlock: '0',

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import type { ListChildComponentProps } from 'react-window';
-export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow, isSheetView }: {
+import type { IColumnProps } from '../../../../types/index.js';
+export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow, isSheetView, columns, currentRowCount, }: {
     isLoadingRow: boolean;
     isSheetView?: boolean | undefined;
+    columns?: IColumnProps<any>[] | undefined;
+    currentRowCount?: number | undefined;
 }) => 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;
 }, 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;
+declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, 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

@@ -9,7 +9,7 @@ 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 React from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -19,9 +19,13 @@ import { ActionIcon } from '../../style';
 import { RowErrorState } from '../RowErrorState';
 import { StyledParagraph } from '../TableLastItem';
 import TableRow from '../TableRow';
-export const LastRowContent = React.memo(({ isLoadingRow, isSheetView }) => {
+import SheetViewTableRowLoading from '../../SheetView/components/SheetViewTableRowLoading';
+export const LastRowContent = React.memo(({ isLoadingRow, isSheetView, columns, currentRowCount, }) => {
     const { t } = useTranslation();
     if (isLoadingRow) {
+        if (isSheetView && (columns === null || columns === void 0 ? void 0 : columns.length)) {
+            return (_jsx(_Fragment, { children: Array.from({ length: 3 }, (_, i) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: "wave", rowIndex: (currentRowCount || 0) + i + 1, useTableBackground: true }, `loading-row-${i}`))) }));
+        }
         return (_jsxs(Box, Object.assign({ "data-testid": "ListItemWrapper_lastRowContent_isLoadingRow", sx: {
                 height: isSheetView ? '100%' : '24px',
                 width: '24px',
@@ -48,20 +52,33 @@ export const StyledItemWrapper = styled('div', {
 }));
 function ListItemWrapper(_a) {
     var _b;
-    var { index, style } = _a, _c = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned = false } = _c, restData = __rest(_c, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView", "isPinned"]);
+    var { index, style } = _a, _c = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned = false } = _c, restData = __rest(_c, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView", "isPinned"]);
     const lastItemIndex = rows.length - 1;
     const row = rows[index];
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
     const isLoadedRow = index <= newLoadedRowsEndIndex;
     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 memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler]);
+    const renderSheetViewLoadingRow = React.useCallback((lastRowContent) => {
+        return (_jsx(Box, Object.assign({ sx: {
+                minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT,
+                height: '100%',
+                width: '100%',
+            } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })));
+    }, [isError]);
     const memoizedListItemComponent = React.useMemo(() => {
-        const lastRowContent = _jsx(LastRowContent, { isSheetView: isSheetView, isLoadingRow: isLoadingRow });
+        const lastRowContent = _jsx(LastRowContent, { isSheetView: isSheetView, isLoadingRow: isLoadingRow, columns: columns, currentRowCount: rows.length });
         const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
         if (isPinned && isLastRow) {
+            if (isSheetView && isLoadingRow && columns && columns.length > 0) {
+                return renderSheetViewLoadingRow(lastRowContent);
+            }
             return (_jsx(Box, { sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT, height: '100%' } : { height: TABLE_ROW_HEIGHT })), { backgroundColor: '#F6F8FACC' }) }));
         }
         if (isLastRow) {
+            if (isSheetView && isLoadingRow && columns && columns.length > 0) {
+                return renderSheetViewLoadingRow(lastRowContent);
+            }
             return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT, height: '100%' } : { height: TABLE_ROW_HEIGHT })), { display: 'flex', justifyContent: 'center', alignItems: 'center' }) }, { children: _jsx(Box, Object.assign({ sx: {
                         backgroundColor: '#F6F8FACC',
                         display: 'flex',
@@ -72,7 +89,21 @@ function ListItemWrapper(_a) {
                     } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
         }
         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]);
+    }, [
+        restData,
+        index,
+        row,
+        columns,
+        memoizedRowProps,
+        isSheetView,
+        isLoadingRow,
+        isError,
+        areAllRowsLoaded,
+        lastItemIndex,
+        isPinned,
+        rows.length,
+        renderSheetViewLoadingRow,
+    ]);
     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 })) })));
 }
 export default ListItemWrapper;

package/build/components/index.d.ts

@@ -94,6 +94,5 @@ export * from './StatusGroupChips';
 export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';
-export * from './SourceChips';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';

package/build/components/index.js

@@ -94,6 +94,5 @@ export * from './StatusGroupChips';
 export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';
-export * from './SourceChips';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';

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

@@ -12,7 +12,7 @@ export declare const chargeTableCellWidth: {
     readonly id: {
         readonly default: "225px";
         readonly text: "225px";
-        readonly sheet: "215px";
+        readonly sheet: "235px";
     };
     readonly product: {
         readonly default: "85px";
@@ -37,7 +37,7 @@ export declare const chargeTableCellWidth: {
     readonly customer: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "115px";
+        readonly sheet: "145px";
     };
     readonly source: {
         readonly default: "114px";
@@ -62,7 +62,7 @@ export declare const chargeTableCellWidth: {
     readonly destinations: {
         readonly default: "70px";
         readonly text: "240px";
-        readonly sheet: "380px";
+        readonly sheet: "340px";
     };
     readonly topup: {
         readonly default: "20px";
@@ -97,17 +97,17 @@ export declare const chargeTableCellWidth: {
     readonly receipt: {
         readonly default: "85px";
         readonly text: "150px";
-        readonly sheet: "135px";
+        readonly sheet: "155px";
     };
     readonly fees: {
         readonly default: "150px";
         readonly text: "150px";
-        readonly sheet: "150px";
+        readonly sheet: "170px";
     };
     readonly metadata: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "245px";
+        readonly sheet: "265px";
     };
     readonly settlement: {
         readonly default: "200px";
@@ -137,12 +137,12 @@ export declare const chargeTableCellWidth: {
     readonly auth_code: {
         readonly default: "80px";
         readonly text: "80px";
-        readonly sheet: "80px";
+        readonly sheet: "100px";
     };
     readonly rrn: {
         readonly default: "100px";
         readonly text: "100px";
-        readonly sheet: "83px";
+        readonly sheet: "105px";
     };
     readonly device: {
         readonly default: "70px";
@@ -182,21 +182,21 @@ export declare const chargeTableCellWidth: {
     readonly acquirer_ref: {
         readonly default: "125px";
         readonly text: "125px";
-        readonly sheet: "125px";
+        readonly sheet: "145px";
     };
     readonly order_ref: {
         readonly default: "200px";
         readonly text: "200px";
-        readonly sheet: "200px";
+        readonly sheet: "220px";
     };
     readonly payment_ref: {
         readonly default: "150px";
         readonly text: "150px";
-        readonly sheet: "150px";
+        readonly sheet: "170px";
     };
     readonly generic_ref: {
         readonly default: "125px";
         readonly text: "125px";
-        readonly sheet: "125px";
+        readonly sheet: "145px";
     };
 };

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

@@ -12,7 +12,7 @@ export const chargeTableCellWidth = {
     id: {
         default: '225px',
         text: '225px',
-        sheet: '215px',
+        sheet: '235px',
     },
     product: {
         default: '85px',
@@ -37,7 +37,7 @@ export const chargeTableCellWidth = {
     customer: {
         default: '180px',
         text: '180px',
-        sheet: '115px',
+        sheet: '145px',
     },
     source: {
         default: '114px',
@@ -62,7 +62,7 @@ export const chargeTableCellWidth = {
     destinations: {
         default: '70px',
         text: '240px',
-        sheet: '380px',
+        sheet: '340px',
     },
     topup: {
         default: '20px',
@@ -97,17 +97,17 @@ export const chargeTableCellWidth = {
     receipt: {
         default: '85px',
         text: '150px',
-        sheet: '135px',
+        sheet: '155px',
     },
     fees: {
         default: '150px',
         text: '150px',
-        sheet: '150px',
+        sheet: '170px',
     },
     metadata: {
         default: '180px',
         text: '180px',
-        sheet: '245px',
+        sheet: '265px',
     },
     settlement: {
         default: '200px',
@@ -137,12 +137,12 @@ export const chargeTableCellWidth = {
     auth_code: {
         default: '80px',
         text: '80px',
-        sheet: '80px',
+        sheet: '100px',
     },
     rrn: {
         default: '100px',
         text: '100px',
-        sheet: '83px',
+        sheet: '105px',
     },
     device: {
         default: '70px',
@@ -182,21 +182,21 @@ export const chargeTableCellWidth = {
     acquirer_ref: {
         default: '125px',
         text: '125px',
-        sheet: '125px',
+        sheet: '145px',
     },
     order_ref: {
         default: '200px',
         text: '200px',
-        sheet: '200px',
+        sheet: '220px',
     },
     payment_ref: {
         default: '150px',
         text: '150px',
-        sheet: '150px',
+        sheet: '170px',
     },
     generic_ref: {
         default: '125px',
         text: '125px',
-        sheet: '125px',
+        sheet: '145px',
     },
 };

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

package/build/components/SourceChips/AuthenticationChip/AuthenticationChip.d.ts

@@ -1,7 +0,0 @@
-import { StatusChipProps } from '../../StatusChip';
-export type AuthenticationChipType = 'issuer' | 'scheme' | 'device' | 'app' | 'wallet' | '3DS' | 'Device Biometric' | 'Non-3DS';
-interface AuthenticationChipProps extends Omit<StatusChipProps, 'children'> {
-    authenticationType?: AuthenticationChipType;
-}
-declare const AuthenticationChip: ({ authenticationType, unknownText, ...props }: AuthenticationChipProps) => import("react/jsx-runtime").JSX.Element;
-export default AuthenticationChip;

package/build/components/SourceChips/AuthenticationChip/AuthenticationChip.js

@@ -1,31 +0,0 @@
-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 StatusChip from '../../StatusChip';
-import { authenticationColors } from './constants';
-const authenticationTypeMap = {
-    issuer: 'Issuer',
-    scheme: 'Scheme',
-    device: 'Device',
-    app: 'App',
-    wallet: 'Wallet',
-    'Device Biometric': 'Biometric',
-    '3DS': '3DS',
-    'Non-3DS': 'Non-3DS',
-};
-const AuthenticationChip = (_a) => {
-    var { authenticationType, unknownText = 'noAuth' } = _a, props = __rest(_a, ["authenticationType", "unknownText"]);
-    const statusText = authenticationType && authenticationTypeMap[authenticationType];
-    const chipColors = authenticationType && authenticationColors[authenticationType];
-    return (_jsx(StatusChip, Object.assign({}, chipColors, { unknownText: unknownText }, props, { children: statusText })));
-};
-export default AuthenticationChip;

package/build/components/SourceChips/AuthenticationChip/constants.d.ts

@@ -1,30 +0,0 @@
-export interface AuthenticationColors {
-    bgColor: string;
-    borderColor?: string;
-    textColor?: string;
-}
-export declare const authenticationColors: {
-    issuer: {
-        bgColor: string;
-        textColor: string;
-    };
-    scheme: {
-        bgColor: string;
-        textColor: string;
-    };
-    app: {
-        bgColor: string;
-        textColor: string;
-    };
-    wallet: {
-        bgColor: string;
-        textColor: string;
-    };
-    device: {};
-    'Device Biometric': {
-        bgColor: string;
-        textColor: string;
-    };
-    '3DS': {};
-    'Non-3DS': {};
-};

package/build/components/SourceChips/AuthenticationChip/constants.js

@@ -1,25 +0,0 @@
-export const authenticationColors = {
-    issuer: {
-        bgColor: '#1F88D033',
-        textColor: '#1F88D0',
-    },
-    scheme: {
-        bgColor: '#5E30EB33',
-        textColor: '#5E30EB',
-    },
-    app: {
-        bgColor: '#AF2D6F33',
-        textColor: '#AF2D6F',
-    },
-    wallet: {
-        bgColor: '#18AA3333',
-        textColor: '#18AA33',
-    },
-    device: {},
-    'Device Biometric': {
-        bgColor: '#F0820033',
-        textColor: '#F08200',
-    },
-    '3DS': {},
-    'Non-3DS': {},
-};

package/build/components/SourceChips/AuthenticationChip/index.d.ts

@@ -1,3 +0,0 @@
-import AuthenticationChip from './AuthenticationChip';
-export type { AuthenticationChipType } from './AuthenticationChip';
-export default AuthenticationChip;

package/build/components/SourceChips/AuthenticationChip/index.js

@@ -1,2 +0,0 @@
-import AuthenticationChip from './AuthenticationChip';
-export default AuthenticationChip;

package/build/components/SourceChips/GeographyChip/GeographyChip.d.ts

@@ -1,7 +0,0 @@
-import { StatusChipProps } from '../../StatusChip';
-import { GeographyVariant } from '../../../types/index.js';
-interface GeographyChipProps extends Omit<StatusChipProps, 'children'> {
-    geographyVariant?: GeographyVariant;
-}
-declare const GeographyChip: ({ geographyVariant, ...props }: GeographyChipProps) => import("react/jsx-runtime").JSX.Element;
-export default GeographyChip;

package/build/components/SourceChips/GeographyChip/GeographyChip.js

@@ -1,22 +0,0 @@
-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 StatusChip from '../../StatusChip';
-import { geographyMap } from '../../../utils/index.js';
-import { geographyColors } from './constants';
-const GeographyChip = (_a) => {
-    var { geographyVariant } = _a, props = __rest(_a, ["geographyVariant"]);
-    const statusText = geographyVariant && geographyMap[geographyVariant];
-    const chipColors = geographyVariant && geographyColors[geographyVariant];
-    return (_jsx(StatusChip, Object.assign({}, chipColors, props, { children: statusText })));
-};
-export default GeographyChip;

package/build/components/SourceChips/GeographyChip/constants.d.ts

@@ -1,16 +0,0 @@
-export interface GeographyColors {
-    bgColor: string;
-    borderColor: string;
-    textColor: string;
-}
-export declare const geographyColors: {
-    L: {
-        bgColor: string;
-    };
-    R: {
-        bgColor: string;
-    };
-    G: {
-        bgColor: string;
-    };
-};

package/build/components/SourceChips/GeographyChip/constants.js

@@ -1,11 +0,0 @@
-export const geographyColors = {
-    L: {
-        bgColor: '#BFEBB480',
-    },
-    R: {
-        bgColor: '#B4D9EB80',
-    },
-    G: {
-        bgColor: '#FEE7B280',
-    },
-};

package/build/components/SourceChips/GeographyChip/index.d.ts

@@ -1,2 +0,0 @@
-import GeographyChip from './GeographyChip';
-export default GeographyChip;

package/build/components/SourceChips/GeographyChip/index.js

@@ -1,2 +0,0 @@
-import GeographyChip from './GeographyChip';
-export default GeographyChip;

package/build/components/SourceChips/PaymentAgreementChip/PaymentAgreementChip.d.ts

@@ -1,7 +0,0 @@
-import { StatusChipProps } from '../../StatusChip';
-export type PaymentAgreementType = 'ORDER' | 'SAVED_CARD' | 'SUBSCRIPTION' | 'INSTALLMENT' | undefined;
-interface PaymentAgreementChipProps extends Omit<StatusChipProps, 'children'> {
-    agreementType?: PaymentAgreementType;
-}
-declare const PaymentAgreementChip: ({ agreementType, unknownText, ...props }: PaymentAgreementChipProps) => import("react/jsx-runtime").JSX.Element;
-export default PaymentAgreementChip;

package/build/components/SourceChips/PaymentAgreementChip/PaymentAgreementChip.js

@@ -1,21 +0,0 @@
-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 StatusChip from '../../StatusChip';
-import { agreementTypeMap, paymentAgreementColors } from './constants';
-const PaymentAgreementChip = (_a) => {
-    var { agreementType, unknownText = 'noAgreement' } = _a, props = __rest(_a, ["agreementType", "unknownText"]);
-    const statusText = agreementType && agreementTypeMap[agreementType];
-    const chipColors = agreementType && paymentAgreementColors[agreementType];
-    return (_jsx(StatusChip, Object.assign({}, chipColors, { unknownText: unknownText }, props, { children: statusText })));
-};
-export default PaymentAgreementChip;

package/build/components/SourceChips/PaymentAgreementChip/constants.d.ts

@@ -1,21 +0,0 @@
-export interface PaymentAgreementColors {
-    bgColor: string;
-    borderColor?: string;
-    textColor?: string;
-}
-export declare const paymentAgreementColors: {
-    ORDER: {
-        bgColor: string;
-        textColor: string;
-    };
-    SAVED_CARD: {
-        bgColor: string;
-        textColor: string;
-    };
-};
-export declare const agreementTypeMap: {
-    ORDER: string;
-    SAVED_CARD: string;
-    SUBSCRIPTION: string;
-    INSTALLMENT: string;
-};

package/build/components/SourceChips/PaymentAgreementChip/constants.js

@@ -1,16 +0,0 @@
-export const paymentAgreementColors = {
-    ORDER: {
-        bgColor: '#5E30EB33',
-        textColor: '#5E30EB',
-    },
-    SAVED_CARD: {
-        bgColor: '#76BB4033',
-        textColor: '#76BB40',
-    },
-};
-export const agreementTypeMap = {
-    ORDER: 'Order',
-    SAVED_CARD: 'Saved card',
-    SUBSCRIPTION: 'Subscription',
-    INSTALLMENT: 'Installment',
-};

package/build/components/SourceChips/PaymentAgreementChip/index.d.ts

@@ -1,3 +0,0 @@
-import PaymentAgreementChip from './PaymentAgreementChip';
-export type { PaymentAgreementType } from './PaymentAgreementChip';
-export default PaymentAgreementChip;

package/build/components/SourceChips/PaymentAgreementChip/index.js

@@ -1,2 +0,0 @@
-import PaymentAgreementChip from './PaymentAgreementChip';
-export default PaymentAgreementChip;

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

@@ -1,3 +0,0 @@
-export { default as PaymentAgreementChip, type PaymentAgreementType } from './PaymentAgreementChip';
-export { default as AuthenticationChip, type AuthenticationChipType } from './AuthenticationChip';
-export { default as GeographyChip } from './GeographyChip';

package/build/components/SourceChips/index.js

@@ -1,3 +0,0 @@
-export { default as PaymentAgreementChip } from './PaymentAgreementChip';
-export { default as AuthenticationChip } from './AuthenticationChip';
-export { default as GeographyChip } from './GeographyChip';