@tap-payments/os-micro-frontend-shared 0.1.31-test.15 → 0.1.31-test.17

package/build/components/MaskedText/MaskedText.d.ts

@@ -1,3 +1,3 @@
 import { MaskedTextProps } from './type';
-declare const MaskedText: ({ text, startLength, endLength, chipIndex, copyText, chipSelection }: MaskedTextProps) => import("react/jsx-runtime").JSX.Element;
+declare const MaskedText: ({ text, startLength, endLength, chipIndex, copyText, cellContext }: MaskedTextProps) => import("react/jsx-runtime").JSX.Element;
 export default MaskedText;

package/build/components/MaskedText/MaskedText.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import StatusChipWithCopy from '../StatusChipWithCopy';
 import { passwordDotsIcon } from '../../constants/index.js';
-const MaskedText = ({ text, startLength = 8, endLength = 4, chipIndex, copyText, chipSelection }) => {
+const MaskedText = ({ text, startLength = 8, endLength = 4, chipIndex, copyText, cellContext }) => {
     const startText = text.slice(0, startLength);
     const endText = text.slice(text.length - endLength);
-    return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, copyText: copyText, chipSelection: chipSelection }, { children: [startText, _jsx("img", { src: passwordDotsIcon, alt: "passwordDots" }), endText] })));
+    return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, copyText: copyText, cellContext: cellContext }, { children: [startText, _jsx("img", { src: passwordDotsIcon, alt: "passwordDots" }), endText] })));
 };
 export default MaskedText;

package/build/components/StatusChip/StatusChip.js

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { AnimatePresence, motion } from 'framer-motion';
 import { copyText as copyTextHandler } from '../../utils/index.js';
@@ -22,7 +21,10 @@ const StatusChip = (_a) => {
     var { children, unknownText, copyText } = _a, props = __rest(_a, ["children", "unknownText", "copyText"]);
     const [showCopy, setShowCopy] = useState(false);
     const { t } = useTranslation();
-    const chipProps = !children ? Object.assign(Object.assign({}, props), unknownGeographyColors) : Object.assign({}, props);
+    const isSelected = props.isSelected;
+    if (!children) {
+        return (_jsx(ChipStyled, Object.assign({}, unknownGeographyColors, props, { isSelected: false }, { children: unknownText ? t(unknownText) : t('unknown') })));
+    }
     const handleCopy = (e) => {
         e.stopPropagation();
         if (copyText) {
@@ -36,21 +38,15 @@ const StatusChip = (_a) => {
             };
         }
     };
-    const content = children ? children : unknownText ? t(unknownText) : t('unknown');
-    return (_jsxs(Box, Object.assign({ sx: { position: 'relative', zIndex: props.isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, chipProps, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: content }) })), _jsx(motion.div, Object.assign({ layout: true, transition: {
-                    type: 'spring',
-                    stiffness: 180,
-                    damping: 25,
-                    mass: 0.4,
-                } }, { children: _jsxs(ChipStyled, Object.assign({}, chipProps, { sx: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        zIndex: props.isSelected ? 3 : 0,
-                    } }, { children: [_jsx(Wrapper, { children: content }), _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: props.isSelected && copyText && (_jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : blueCopyIcon, style: {
+    return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected, style: { position: 'absolute', top: 0, left: 0, zIndex: isSelected ? 3 : 0 } }, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
+                        paddingRight: isSelected ? 12 : 0,
+                    }, transition: { delay: !isSelected ? 0.2 : 0 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isSelected && copyText && (_jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : blueCopyIcon, style: {
                                     height: 12,
                                     width: 12,
                                     objectFit: 'contain',
-                                } })) }))] })) }))] })));
+                                    position: 'absolute',
+                                    right: 8,
+                                    top: 2,
+                                } })) })] })) }))] })));
 };
 export default StatusChip;

package/build/components/StatusChip/style.js

@@ -4,7 +4,7 @@ import { SELECTION_COLORS } from '../../utils/index.js';
 export const ChipStyled = styled(Box, {
     shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'padding', 'maxWidth', 'isSelected'].includes(prop),
 })(({ theme, isSelected, textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, maxWidth, }) => {
-    return Object.assign({ display: 'flex', alignItems: 'center', gap: '4px', height: '18px', padding: padding || '0px 9.5px', borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: '67px', maxWidth: maxWidth || 'none', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box', transition: 'width 0.5s ease-in-out' }, (isSelected && { color: SELECTION_COLORS.primary, borderColor: SELECTION_COLORS.primary }));
+    return Object.assign({ display: 'flex', alignItems: 'center', gap: '4px', height: '18px', padding: 0, borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: '67px', maxWidth: maxWidth || 'none', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box' }, (isSelected && { color: SELECTION_COLORS.primary, borderColor: SELECTION_COLORS.primary }));
 });
 export const Wrapper = styled(Box)(() => ({
     display: 'flex',

package/build/components/StatusChipWithCopy/StatusChipWithCopy.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { StatusChipProps } from '../StatusChip';
-import { ChipSelection } from '../../types/index.js';
+import { CellContext } from '../../types/index.js';
 export interface StatusChipWithCopyProps extends StatusChipProps {
     copyText?: string;
     chipIndex: number;
-    chipSelection: ChipSelection;
+    cellContext: CellContext;
 }
-declare function StatusChipWithCopy({ children, copyText, chipIndex, chipSelection: { onChipClick, rowIndex, colIndex, selectedChip }, ...reset }: StatusChipWithCopyProps): import("react/jsx-runtime").JSX.Element;
+declare function StatusChipWithCopy({ children, copyText, chipIndex, cellContext: { onChipClick, rowIndex, colIndex, selectedChip }, ...reset }: StatusChipWithCopyProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof StatusChipWithCopy>;
 export default _default;

package/build/components/StatusChipWithCopy/StatusChipWithCopy.js

@@ -14,7 +14,7 @@ import { memo, useMemo } from 'react';
 import StatusChip from '../StatusChip';
 import { checkIsChipSelected } from './utils';
 function StatusChipWithCopy(_a) {
-    var { children, copyText, chipIndex, chipSelection: { onChipClick, rowIndex, colIndex, selectedChip } } = _a, reset = __rest(_a, ["children", "copyText", "chipIndex", "chipSelection"]);
+    var { children, copyText, chipIndex, cellContext: { onChipClick, rowIndex, colIndex, selectedChip } } = _a, reset = __rest(_a, ["children", "copyText", "chipIndex", "cellContext"]);
     const isSelected = useMemo(() => checkIsChipSelected({ rowIndex, colIndex, selectedChip, chipIndex }), [rowIndex, colIndex, selectedChip, chipIndex]);
     return (_jsx(StatusChip, Object.assign({}, reset, { copyText: copyText, onClick: (e) => {
             onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(e, chipIndex);

package/build/components/StatusChipWithCopy/utils.d.ts

@@ -1,4 +1,4 @@
-import { ChipSelection } from '../../types/index.js';
-export declare const checkIsChipSelected: ({ chipIndex, rowIndex, colIndex, selectedChip, }: Pick<ChipSelection, "rowIndex" | "selectedChip" | "colIndex"> & {
+import { CellContext } from '../../types/index.js';
+export declare const checkIsChipSelected: ({ chipIndex, rowIndex, colIndex, selectedChip, }: Pick<CellContext, "rowIndex" | "selectedChip" | "colIndex"> & {
     chipIndex: number;
 }) => boolean;

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, TableMode, ChipSelection } from '../../../types/index.js';
+import type { Charge, TableMode, CellContext } from '../../../types/index.js';
 import type { ActionType, FlagType } from './ActionCell';
 import { getGeographyBoxColor } from '../../../utils/index.js';
 export type GeographyBoxVariant = keyof ReturnType<typeof getGeographyBoxColor>;
@@ -62,7 +62,7 @@ export interface AmountCellProps extends TableCellProps {
     isTextShown?: boolean;
     tableMode?: TableMode;
 }
-export interface DestinationCellProps extends TableCellProps, ChipSelection {
+export interface DestinationCellProps extends TableCellProps, CellContext {
     destinationsCount?: number;
     flagIcon?: string;
     destinationsTooltip?: React.ReactNode;

package/build/components/VirtualTables/components/TableRow.js

@@ -15,7 +15,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
             return null;
         const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
         const formattedValue = format ? format({ value, row, index }) : value;
-        return render ? (render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id], chipSelection: { onChipClick: handleChipClick, rowIndex, colIndex, selectedChip } })) : (_jsx(_Fragment, { children: formattedValue }));
+        return render ? (render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id], cellContext: { onChipClick: handleChipClick, rowIndex, colIndex, selectedChip } })) : (_jsx(_Fragment, { children: formattedValue }));
     };
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
             var _a, _b;

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: "235px";
+        readonly sheet: "245px";
     };
     readonly product: {
         readonly default: "85px";
@@ -152,7 +152,7 @@ export declare const chargeTableCellWidth: {
     readonly receipt: {
         readonly default: "85px";
         readonly text: "150px";
-        readonly sheet: "155px";
+        readonly sheet: "165px";
     };
     readonly fees: {
         readonly default: "150px";
@@ -162,7 +162,7 @@ export declare const chargeTableCellWidth: {
     readonly metadata: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "265px";
+        readonly sheet: "275px";
     };
     readonly settlement: {
         readonly default: "200px";
@@ -202,12 +202,12 @@ export declare const chargeTableCellWidth: {
     readonly device: {
         readonly default: "70px";
         readonly text: "190px";
-        readonly sheet: "225px";
+        readonly sheet: "235px";
     };
     readonly card_no: {
         readonly default: "120px";
         readonly text: "120px";
-        readonly sheet: "190px";
+        readonly sheet: "200px";
     };
     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: '235px',
+        sheet: '245px',
     },
     product: {
         default: '85px',
@@ -152,7 +152,7 @@ export const chargeTableCellWidth = {
     receipt: {
         default: '85px',
         text: '150px',
-        sheet: '155px',
+        sheet: '165px',
     },
     fees: {
         default: '150px',
@@ -162,7 +162,7 @@ export const chargeTableCellWidth = {
     metadata: {
         default: '180px',
         text: '180px',
-        sheet: '265px',
+        sheet: '275px',
     },
     settlement: {
         default: '200px',
@@ -202,12 +202,12 @@ export const chargeTableCellWidth = {
     device: {
         default: '70px',
         text: '190px',
-        sheet: '225px',
+        sheet: '235px',
     },
     card_no: {
         default: '120px',
         text: '120px',
-        sheet: '190px',
+        sheet: '200px',
     },
     meta: {
         default: '52px',

package/build/types/table.d.ts

@@ -50,7 +50,7 @@ export interface TableFooterProps extends BoxProps {
 export interface TableChipProps {
     onChipClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
 }
-export interface ChipSelection {
+export interface CellContext {
     onChipClick?: (event: React.MouseEvent, chipIndex: number) => void;
     colIndex?: number;
     rowIndex?: number;
@@ -61,7 +61,7 @@ export interface IRenderAttr<R, C> {
     column: C;
     index: number;
     value: any;
-    chipSelection?: ChipSelection;
+    cellContext?: CellContext;
 }
 export interface IFormatAttr<R> {
     value: string | Record<string, any> | number;

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.31-test.15",
-  "testVersion": 15,
+  "version": "0.1.31-test.17",
+  "testVersion": 17,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",