@tap-payments/os-micro-frontend-shared 0.0.130 → 0.0.132

package/build/components/TableCells/CustomCells/SheetViewIDButton/style.js

@@ -0,0 +1,22 @@
+import { styled } from '@mui/material/styles';
+export const Button = styled('div')(({ theme }) => ({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    cursor: 'pointer',
+    justifyContent: 'center',
+    paddingInline: '8px',
+    borderRadius: '24px',
+    border: `1px solid ${theme.palette.divider}`,
+}));
+export const RowId = styled('div')(({ theme }) => ({
+    fontSize: '11px',
+    height: '18px',
+    display: 'flex',
+    alignItems: 'center',
+    fontWeight: 400,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+}));

package/build/components/TableCells/CustomCells/SourceMergedCell/SourceMergedCell.d.ts

@@ -1,3 +1,3 @@
 import { SourceMergedCellProps } from './type';
-declare function SourceMergedCell({ icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed, ...props }: Readonly<SourceMergedCellProps>): import("react/jsx-runtime").JSX.Element;
+declare function SourceMergedCell({ icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed, tableMode, ...props }: Readonly<SourceMergedCellProps>): import("react/jsx-runtime").JSX.Element;
 export default SourceMergedCell;

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

@@ -16,13 +16,16 @@ import { StatusContainer, StatusWrapper, StatusIcon } from './style';
 import { getIconXTranslation } from './utils';
 import CollapsedViewIcon from './CollapsedViewIcon';
 function SourceMergedCell(_a) {
-    var { icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed = false } = _a, props = __rest(_a, ["icons", "isTextShown", "centerIconKey", "collapsedViewIcon", "isReversed"]);
+    var { icons, isTextShown, centerIconKey, collapsedViewIcon, isReversed = false, tableMode } = _a, props = __rest(_a, ["icons", "isTextShown", "centerIconKey", "collapsedViewIcon", "isReversed", "tableMode"]);
     const iconsList = useMemo(() => icons.filter((icon) => Boolean(icon.icon)), [icons]);
     const [isHovering, setIsHovering] = useState(false);
     const centerIconIndex = Math.max(centerIconKey ? iconsList.findIndex((icon) => icon.key === centerIconKey) : 0, 0);
     const iconRefs = useRef([]);
     const [iconMeasurements, setIconMeasurements] = useState(new Map());
+    const isSheetMode = tableMode === 'sheet';
     useEffect(() => {
+        if (isSheetMode)
+            return;
         setTimeout(() => {
             const tableMode = isTextShown ? 'text' : 'default';
             const newMeasurements = new Map();
@@ -35,9 +38,32 @@ function SourceMergedCell(_a) {
             });
             setIconMeasurements(new Map([...iconMeasurements, ...newMeasurements]));
         }, 50);
-    }, [iconsList, isTextShown, isHovering]);
+    }, [iconsList, isTextShown, isHovering, isSheetMode]);
     const hasPreviousIcon = (isReversed && iconsList.length > 1) || centerIconIndex > 0;
     const hasNextIcon = !isReversed && centerIconIndex < iconsList.length - 1;
+    if (isSheetMode) {
+        return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {
+                position: 'relative',
+                overflow: 'visible',
+                zIndex: 101,
+            } }, { children: _jsx("div", Object.assign({ style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px',
+                    height: '18px',
+                } }, { children: iconsList === null || iconsList === void 0 ? void 0 : iconsList.map((icon, index) => (_jsx("div", Object.assign({ "data-testid": `StatusWrapper-${icon.key}`, style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        opacity: 1,
+                        border: '1px solid #F2F2F2',
+                        borderRadius: '24px',
+                        padding: '0px 8px',
+                    } }, { children: _jsx("div", Object.assign({ style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            opacity: 1,
+                        } }, { children: icon.icon })) }), `StatusWrapper-${icon.key}-${index}`))) })) })));
+    }
     return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {
             position: 'relative',
             overflow: 'visible',

package/build/components/TableCells/CustomCells/SourceMergedCell/type.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { TableCellProps } from '@mui/material/TableCell';
-import { SourceMergedCellIcons } from '../../../../types/index.js';
+import { SourceMergedCellIcons, TableMode } from '../../../../types/index.js';
 import type { SxProps } from '@mui/material';
 export interface SourceMergedCellProps extends TableCellProps {
     icons: {
@@ -15,4 +15,5 @@ export interface SourceMergedCellProps extends TableCellProps {
     };
     isReversed?: boolean;
     sx?: SxProps;
+    tableMode?: TableMode;
 }

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

@@ -1,5 +1,5 @@
 import type { StatusCellProps } from './type';
-declare function StatusCell({ statuses, isTextShown, centerIconKey, xGap, ...props }: Readonly<StatusCellProps & {
+declare function StatusCell({ statuses, isTextShown, centerIconKey, xGap, tableMode, ...props }: Readonly<StatusCellProps & {
     isChargesService?: boolean;
     isAuthorizationsService?: boolean;
 }>): import("react/jsx-runtime").JSX.Element;

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

@@ -11,12 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TableCell } from '../../../TableCells';
+import StatusChip from '../../../StatusChip';
 import { StatusIcon, StatusContainer, StatusWrapper } from './style';
 import { getStatusesFilteredObject } from './utils';
 function StatusCell(_a) {
-    var { statuses, isTextShown, centerIconKey, xGap } = _a, props = __rest(_a, ["statuses", "isTextShown", "centerIconKey", "xGap"]);
-    const statusesFilteredObject = getStatusesFilteredObject(statuses);
+    var { statuses, isTextShown, centerIconKey, xGap, tableMode } = _a, props = __rest(_a, ["statuses", "isTextShown", "centerIconKey", "xGap", "tableMode"]);
+    const statusesFilteredObject = statuses ? getStatusesFilteredObject(statuses) : {};
     const statusesList = Object.values(statusesFilteredObject).filter(Boolean);
+    if (tableMode === 'sheet') {
+        return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StatusContainer, { children: statusesList.map((status, index) => (_jsx(StatusChip, Object.assign({ borderColor: "transparent", padding: '0px' }, { children: status }), index))) }) })));
+    }
     const xGapValue = isTextShown ? xGap || 120 : 40;
     const centerIconIndex = centerIconKey ? Object.entries(statusesFilteredObject).findIndex(([key]) => key === centerIconKey) : 0;
     return (_jsx(TableCell, Object.assign({}, props, { "data-testid": "StatusCell", sx: {

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

@@ -58,6 +58,7 @@ export const StatusWrapper = styled(motion.div)(({ statusesCount }) => ({
 }));
 export const StatusContainer = styled(motion.div)(() => ({
     display: 'flex',
+    gap: '4px',
     justifyContent: 'flex-start',
     alignItems: 'center',
     position: 'relative',

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

@@ -9,4 +9,5 @@ export interface StatusCellProps extends TableCellProps {
     isTextShown?: boolean;
     centerIconKey?: string;
     xGap?: number;
+    tableMode?: 'default' | 'text' | 'sheet';
 }

package/build/components/TableCells/CustomCells/index.d.ts

@@ -42,6 +42,7 @@ export * from './ApplicationStatusCell';
 export * from './SegmentsCell';
 export * from './MarketPlaceCell';
 export * from './IndividualsCell';
+export * from './SheetViewIDButton';
 export * from './BrandsCell';
 export * from './type';
 export * from './style';

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

@@ -42,6 +42,7 @@ export * from './ApplicationStatusCell';
 export * from './SegmentsCell';
 export * from './MarketPlaceCell';
 export * from './IndividualsCell';
+export * from './SheetViewIDButton';
 export * from './BrandsCell';
 export * from './type';
 export * from './style';

package/build/components/TableCells/CustomCells/style.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { TableMode } from '../../../types/index.js';
 export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: "Local" | "Global" | "Regional" | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
@@ -271,7 +272,9 @@ export declare const StarBadgeWrapper: import("@emotion/styled").StyledComponent
     isShown?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const CountBadge: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const IdButtonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IdButtonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    tableMode?: TableMode | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const AvatarStyled: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "className" | "style" | "classes" | "children" | "sx" | "src" | "alt" | "variant" | "slots" | "slotProps" | "sizes" | "srcSet" | "imgProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -63,15 +63,12 @@ export const CountBadge = styled('span')(({ theme }) => ({
     fontSize: '9.782px',
     fontWeight: 600,
 }));
-export const IdButtonContainer = styled('div')({
-    display: 'flex',
-    width: '24px',
-    height: '24px',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '64px;',
-    border: '1px solid #F2F2F2;',
-});
+export const IdButtonContainer = styled('div', {
+    shouldForwardProp: (props) => props !== 'tableMode',
+})(({ tableMode }) => (Object.assign({ display: 'flex', width: '24px', height: tableMode === 'sheet' ? '18px' : '24px', alignItems: 'center', justifyContent: 'center', borderRadius: '64px;', border: '1px solid #F2F2F2;' }, (tableMode === 'sheet' && {
+    width: '100%',
+    padding: '5px 8px',
+}))));
 export const AvatarStyled = styled(Avatar)(({ theme }) => ({
     width: 24,
     height: 24,

package/build/components/TableCells/CustomCells/type.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { TableCellProps } from '@mui/material';
-import type { Charge } from '../../../types/index.js';
+import type { Charge, TableMode } from '../../../types/index.js';
 import type { ActionType, FlagType } from './ActionCell';
 import { getGeographyBoxColor } from '../../../utils/index.js';
 export type GeographyBoxVariant = keyof ReturnType<typeof getGeographyBoxColor>;
@@ -80,6 +80,7 @@ export interface DestinationCellProps extends TableCellProps {
         }>;
     };
     iconDirection?: 'left' | 'right';
+    tableMode?: TableMode;
 }
 export interface ActionCellProps extends TableCellProps {
     row?: unknown;

package/build/components/TableHeader_V2/components/StatusButtons/StatusButton.js

@@ -37,15 +37,12 @@ export const StatusButton = memo((props) => {
                     var _a, _b;
                     (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
                     onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(lastActiveStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');
+                    if (hasDropdown) {
+                        setAnchorEl(buttonRef.current);
+                    }
                 }, sx: Object.assign({}, (hasDropdown && {
                     paddingInlineEnd: '27px',
-                })) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, lastActiveStatus ? t(lastActiveStatus) : label, statusBadge] })), dropdownIcon && (_jsx(ChevronContainer, Object.assign({ onClick: (e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                if (hasDropdown) {
-                                    setAnchorEl(buttonRef.current);
-                                }
-                            } }, { children: dropdownIcon })))] }) })), open && (_jsx(StyledDropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: (_b = (dropdownOptions || [])) === null || _b === void 0 ? void 0 : _b.map((item) => (Object.assign(Object.assign({}, item), { onClick: (e) => {
+                })) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, lastActiveStatus ? t(lastActiveStatus) : label, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] }) })), open && (_jsx(StyledDropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: (_b = (dropdownOptions || [])) === null || _b === void 0 ? void 0 : _b.map((item) => (Object.assign(Object.assign({}, item), { onClick: (e) => {
                         var _a;
                         (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
                         setLastActiveStatus(item.status);

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

@@ -5,6 +5,6 @@ interface ISheetViewVirtualTable extends Omit<IVirtualTable, 'isSheetView'> {
     isPinnable?: boolean;
     clearBackdropVisibilityTimeout?: number;
 }
-declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
 export default _default;

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

@@ -40,7 +40,7 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     isSheetView: true,
     isPinned,
 }));
-function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, }) {
+function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, }) {
     var _a, _b, _c;
     const theme = useTheme();
     const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);

package/build/components/VirtualTable/style.js

@@ -32,9 +32,9 @@ export const StyledCell = styled(TableCell, {
     shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView'].includes(prop),
 })(({ theme, isLast, isFirst, isSheetView }) => (Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: theme.palette.grey[700], fontSize: theme.typography.caption.fontSize, height: '100%', fontWeight: theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
     borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
-    paddingInline: '0.375rem !important',
-    paddingLeft: '0.375rem !important',
-    paddingRight: '0.375rem !important',
+    paddingInline: '8px !important',
+    paddingLeft: '8px !important',
+    paddingRight: '8px !important',
 }))));
 export const StyledVirtualList = styled(VirtualScrollList, {
     shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),

package/build/components/index.d.ts

@@ -17,6 +17,7 @@ export { default as SheetViewVirtualTable } from './VirtualTable/SheetView/Sheet
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
 export { default as StatusButton, ChevronIcon, type ChevronIconProps, type StatusButtonIcon, type StatusButtonProps } from './StatusButton';
+export { default as StatusChip } from './StatusChip';
 export { default as SimpleDialog, type SimpleDialogProps } from './SimpleDialog';
 export { default as SearchButton } from './SearchButton';
 export { default as Loaders } from './Loaders';
@@ -44,6 +45,7 @@ export { default as ResizableHeightInput } from './ResizableHeightInput';
 export { default as MainContainer } from './MainContainer';
 export { default as Menu } from './Menu';
 export { default as MenuItem } from './MenuItem';
+export { default as MaskedText } from './MaskedText';
 export { default as MultiSelectDropdownButton, type ButtonWithDropdownProps } from './MultiSelectDropdownButton';
 export { default as MultiSelectWithSearch, type MultiSelectWithSearchProps, ChildMenuItem, ParentMenuItem } from './MultiSelectWithSearch';
 export { default as NestedDropdown, type DropdownProps, type Selected, type Placement, Dropdown, NestedMenuItem } from './NestedDropdown';

package/build/components/index.js

@@ -17,6 +17,7 @@ export { default as SheetViewVirtualTable } from './VirtualTable/SheetView/Sheet
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
 export { default as StatusButton, ChevronIcon } from './StatusButton';
+export { default as StatusChip } from './StatusChip';
 export { default as SimpleDialog } from './SimpleDialog';
 export { default as SearchButton } from './SearchButton';
 export { default as Loaders } from './Loaders';
@@ -44,6 +45,7 @@ export { default as ResizableHeightInput } from './ResizableHeightInput';
 export { default as MainContainer } from './MainContainer';
 export { default as Menu } from './Menu';
 export { default as MenuItem } from './MenuItem';
+export { default as MaskedText } from './MaskedText';
 export { default as MultiSelectDropdownButton } from './MultiSelectDropdownButton';
 export { default as MultiSelectWithSearch, ChildMenuItem, ParentMenuItem } from './MultiSelectWithSearch';
 export { default as NestedDropdown, Dropdown, NestedMenuItem } from './NestedDropdown';

package/build/constants/assets.d.ts

@@ -232,6 +232,7 @@ export declare const leadTitleIcon: string;
 export declare const orderAppIcon: string;
 export declare const orderWindowIcon: string;
 export declare const dottedLine: string;
+export declare const passwordDotsIcon: string;
 export declare const dollarSignIcon: string;
 export declare const reloadIcon: string;
 export declare const deletedStatusIcon: string;

package/build/constants/assets.js

@@ -233,6 +233,7 @@ export const leadTitleIcon = `${lightUrl}/window/leadTitleIcon.svg`;
 export const orderAppIcon = `${appBaseUrl}/OrderApp.svg`;
 export const orderWindowIcon = `${appBaseUrl}/OrderTitleIcon.svg`;
 export const dottedLine = `${lightUrl}/dottedLine.svg`;
+export const passwordDotsIcon = `${lightUrl}/passwordDots.svg`;
 export const dollarSignIcon = `${lightUrl}/dollarSign.svg`;
 export const reloadIcon = `${lightUrl}/reload.svg`;
 export const deletedStatusIcon = `${appBaseUrl}/deletedStatus1.svg`;

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: "225px";
+        readonly sheet: "215px";
     };
     readonly product: {
         readonly default: "85px";
@@ -27,7 +27,7 @@ export declare const chargeTableCellWidth: {
     readonly reference: {
         readonly default: "95px";
         readonly text: "180px";
-        readonly sheet: "180px";
+        readonly sheet: "550px";
     };
     readonly order: {
         readonly default: "80px";
@@ -37,12 +37,12 @@ export declare const chargeTableCellWidth: {
     readonly customer: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "180px";
+        readonly sheet: "115px";
     };
     readonly source: {
         readonly default: "114px";
         readonly text: "125px";
-        readonly sheet: "125px";
+        readonly sheet: "410px";
     };
     readonly authenticate: {
         readonly default: "55px";
@@ -57,7 +57,7 @@ export declare const chargeTableCellWidth: {
     readonly amount: {
         readonly default: "170px";
         readonly text: "195px";
-        readonly sheet: "195px";
+        readonly sheet: "141px";
     };
     readonly destinations: {
         readonly default: "70px";
@@ -72,12 +72,12 @@ export declare const chargeTableCellWidth: {
     readonly status: {
         readonly default: "70px";
         readonly text: "300px";
-        readonly sheet: "300px";
+        readonly sheet: "185px";
     };
     readonly merchant: {
         readonly default: "100px";
         readonly text: "150px";
-        readonly sheet: "150px";
+        readonly sheet: "115px";
     };
     readonly charge: {
         readonly default: "150px";
@@ -97,7 +97,7 @@ export declare const chargeTableCellWidth: {
     readonly receipt: {
         readonly default: "85px";
         readonly text: "150px";
-        readonly sheet: "150px";
+        readonly sheet: "131px";
     };
     readonly fees: {
         readonly default: "150px";
@@ -107,7 +107,7 @@ export declare const chargeTableCellWidth: {
     readonly metadata: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "180px";
+        readonly sheet: "235px";
     };
     readonly settlement: {
         readonly default: "200px";
@@ -122,7 +122,7 @@ export declare const chargeTableCellWidth: {
     readonly actions: {
         readonly default: "100px";
         readonly text: "100px";
-        readonly sheet: "100px";
+        readonly sheet: "315px";
     };
     readonly payment_id: {
         readonly default: "150px";
@@ -132,7 +132,7 @@ export declare const chargeTableCellWidth: {
     readonly card_number: {
         readonly default: "120px";
         readonly text: "120px";
-        readonly sheet: "120px";
+        readonly sheet: "190px";
     };
     readonly auth_code: {
         readonly default: "80px";
@@ -142,7 +142,7 @@ export declare const chargeTableCellWidth: {
     readonly rrn: {
         readonly default: "100px";
         readonly text: "100px";
-        readonly sheet: "100px";
+        readonly sheet: "83px";
     };
     readonly device: {
         readonly default: "70px";
@@ -152,7 +152,7 @@ export declare const chargeTableCellWidth: {
     readonly card_no: {
         readonly default: "120px";
         readonly text: "120px";
-        readonly sheet: "120px";
+        readonly sheet: "190px";
     };
     readonly meta: {
         readonly default: "52px";

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

@@ -12,7 +12,7 @@ export const chargeTableCellWidth = {
     id: {
         default: '225px',
         text: '225px',
-        sheet: '225px',
+        sheet: '215px',
     },
     product: {
         default: '85px',
@@ -27,7 +27,7 @@ export const chargeTableCellWidth = {
     reference: {
         default: '95px',
         text: '180px',
-        sheet: '180px',
+        sheet: '550px',
     },
     order: {
         default: '80px',
@@ -37,12 +37,12 @@ export const chargeTableCellWidth = {
     customer: {
         default: '180px',
         text: '180px',
-        sheet: '180px',
+        sheet: '115px',
     },
     source: {
         default: '114px',
         text: '125px',
-        sheet: '125px',
+        sheet: '410px',
     },
     authenticate: {
         default: '55px',
@@ -57,7 +57,7 @@ export const chargeTableCellWidth = {
     amount: {
         default: '170px',
         text: '195px',
-        sheet: '195px',
+        sheet: '141px',
     },
     destinations: {
         default: '70px',
@@ -72,12 +72,12 @@ export const chargeTableCellWidth = {
     status: {
         default: '70px',
         text: '300px',
-        sheet: '300px',
+        sheet: '185px',
     },
     merchant: {
         default: '100px',
         text: '150px',
-        sheet: '150px',
+        sheet: '115px',
     },
     charge: {
         default: '150px',
@@ -97,7 +97,7 @@ export const chargeTableCellWidth = {
     receipt: {
         default: '85px',
         text: '150px',
-        sheet: '150px',
+        sheet: '131px',
     },
     fees: {
         default: '150px',
@@ -107,7 +107,7 @@ export const chargeTableCellWidth = {
     metadata: {
         default: '180px',
         text: '180px',
-        sheet: '180px',
+        sheet: '235px',
     },
     settlement: {
         default: '200px',
@@ -122,7 +122,7 @@ export const chargeTableCellWidth = {
     actions: {
         default: '100px',
         text: '100px',
-        sheet: '100px',
+        sheet: '315px',
     },
     payment_id: {
         default: '150px',
@@ -132,7 +132,7 @@ export const chargeTableCellWidth = {
     card_number: {
         default: '120px',
         text: '120px',
-        sheet: '120px',
+        sheet: '190px',
     },
     auth_code: {
         default: '80px',
@@ -142,7 +142,7 @@ export const chargeTableCellWidth = {
     rrn: {
         default: '100px',
         text: '100px',
-        sheet: '100px',
+        sheet: '83px',
     },
     device: {
         default: '70px',
@@ -152,7 +152,7 @@ export const chargeTableCellWidth = {
     card_no: {
         default: '120px',
         text: '120px',
-        sheet: '120px',
+        sheet: '190px',
     },
     meta: {
         default: '52px',

package/build/types/table.d.ts

@@ -93,6 +93,7 @@ export interface IColumnFilterCustom {
     render: (v: any) => JSX.Element;
 }
 export type AnimationType = false | 'pulse' | 'wave' | undefined;
+export type TableMode = 'sheet' | 'text' | 'default';
 export interface IVirtualTable<R = any> {
     rows: R[];
     columns: Array<IColumnProps<R>>;
@@ -117,7 +118,7 @@ export interface IVirtualTable<R = any> {
     areAllRowsLoaded?: boolean;
     tableBodyStyles?: React.CSSProperties;
     isTextShown?: boolean;
-    tableMode?: 'default' | 'text' | 'sheet';
+    tableMode?: TableMode;
     tableTitle?: string;
     dimensions?: {
         height: string | number;

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