@tap-payments/os-micro-frontend-shared 0.1.103-test.6 → 0.1.103-test.7-test.8-test.9

package/build/components/AmountStatusChip/style.js

@@ -6,14 +6,6 @@ export const StyledAmountStatusChip = styled(StatusChipWithCopy)(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    transition: 'none !important',
-    animation: 'none !important',
-    transform: 'none !important',
-    '& *': {
-        transition: 'none !important',
-        animation: 'none !important',
-        transform: 'none !important',
-    },
 }));
 export const AmountLabel = styled('span')(() => ({
     display: 'flex',

package/build/components/AuthenticationTypeChip/AuthenticationTypeChip.d.ts

@@ -4,6 +4,6 @@ import { chipAuthenticationTypes } from './constants';
 export interface AuthenticationTypeChipProps extends StatusChipWithCopyProps {
     title: keyof typeof chipAuthenticationTypes;
 }
-declare function AuthenticationTypeChip({ title, ...rest }: AuthenticationTypeChipProps): import("react/jsx-runtime").JSX.Element;
+declare function AuthenticationTypeChip({ title, ref, ...rest }: AuthenticationTypeChipProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof AuthenticationTypeChip>;
 export default _default;

package/build/components/AuthenticationTypeChip/AuthenticationTypeChip.js

@@ -14,8 +14,8 @@ import { memo } from 'react';
 import StatusChipWithCopy from '../StatusChipWithCopy';
 import { chipAuthenticationTypes } from './constants';
 function AuthenticationTypeChip(_a) {
-    var { title } = _a, rest = __rest(_a, ["title"]);
+    var { title, ref } = _a, rest = __rest(_a, ["title", "ref"]);
     const { text, styles } = chipAuthenticationTypes[title];
-    return (_jsx(StatusChipWithCopy, Object.assign({}, rest, { sx: Object.assign(Object.assign({}, styles), rest.sx) }, { children: text })));
+    return (_jsx(StatusChipWithCopy, Object.assign({ chipStyles: styles, ref: ref }, rest, { children: text })));
 }
 export default memo(AuthenticationTypeChip);

package/build/components/StatusChip/StatusChip.d.ts

@@ -1,3 +1,3 @@
 import { ChipProps } from './type';
-declare const StatusChip: ({ children, unknownText, copyText, expandDirection, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatusChip: ({ children, unknownText, copyText, expandDirection, chipStyles, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusChip;

package/build/components/StatusChip/StatusChip.js

@@ -16,9 +16,9 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { copyText as copyTextHandler } from '../../utils/index.js';
 import { copyIcon, greenCheckIcon } from '../../constants/index.js';
 import { ChipStyled, Wrapper, CopyWrapper } from './style';
-import { emptyStatusChipColors } from 'src/constants/chips/statusChips';
+import { emptyStatusChipColors } from '../../constants/index.js';
 const StatusChip = (_a) => {
-    var { children, unknownText, copyText, expandDirection = 'right' } = _a, props = __rest(_a, ["children", "unknownText", "copyText", "expandDirection"]);
+    var { children, unknownText, copyText, expandDirection = 'right', chipStyles } = _a, props = __rest(_a, ["children", "unknownText", "copyText", "expandDirection", "chipStyles"]);
     const [showCopy, setShowCopy] = useState(false);
     const { t } = useTranslation();
     const isSelected = props.isSelected;
@@ -41,7 +41,7 @@ const StatusChip = (_a) => {
     const isCopyActive = isSelected && copyText;
     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(motion.div, Object.assign({ style: { position: 'absolute', top: 0, zIndex: isSelected ? 3 : 0 }, animate: {
                     left: isCopyActive && expandDirection === 'left' ? -12 : 0,
-                }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected }, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
+                }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected }, chipStyles, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
                             paddingRight: isCopyActive ? 12 : 0,
                         }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isCopyActive && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0, x: -5 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -2 }, transition: { delay: 0.2, duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
                                             height: 12,

package/build/components/StatusChip/style.d.ts

@@ -12,6 +12,8 @@ export declare const ChipStyled: import("@emotion/styled").StyledComponent<impor
     isSelected?: boolean | undefined;
     copyText?: string | undefined;
     expandDirection?: "left" | "right" | undefined;
+    chipStyles?: object | undefined;
+    disableAnimation?: boolean | undefined;
 } & 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;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & {

package/build/components/StatusChip/style.js

@@ -1,10 +1,19 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 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', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box' }, (isSelected && {
+    shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'padding', 'maxWidth', 'isSelected', 'disableAnimation'].includes(prop),
+})(({ theme, isSelected, textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, maxWidth, disableAnimation, }) => {
+    return Object.assign(Object.assign({ display: 'flex', justifyContent: 'center', 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', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box' }, (isSelected && {
         boxShadow: 'white 7px 0px 8px 2px',
+    })), (disableAnimation && {
+        transition: 'none !important',
+        animation: 'none !important',
+        transform: 'none !important',
+        '& *': {
+            transition: 'none !important',
+            animation: 'none !important',
+            transform: 'none !important',
+        },
     }));
 });
 export const Wrapper = styled(Box)(() => ({

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

@@ -11,4 +11,6 @@ export type ChipProps = PropsWithChildren<{
     isSelected?: boolean;
     copyText?: string;
     expandDirection?: 'left' | 'right';
+    chipStyles?: object;
+    disableAnimation?: boolean;
 } & BoxProps>;

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

@@ -5,7 +5,8 @@ export interface StatusChipWithCopyProps extends StatusChipProps {
     copyText?: string;
     chipIndex: number;
     selectionProps: SelectionProps;
+    chipStyles?: object;
 }
-declare function StatusChipWithCopy({ children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId }, ...reset }: StatusChipWithCopyProps): import("react/jsx-runtime").JSX.Element;
+declare function StatusChipWithCopy({ children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId }, ...rest }: 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,9 +14,9 @@ import { memo, useMemo } from 'react';
 import StatusChip from '../StatusChip';
 import { checkIsSelected } from './utils';
 function StatusChipWithCopy(_a) {
-    var { children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId } } = _a, reset = __rest(_a, ["children", "copyText", "chipIndex", "selectionProps"]);
+    var { children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId } } = _a, rest = __rest(_a, ["children", "copyText", "chipIndex", "selectionProps"]);
     const isSelected = useMemo(() => checkIsSelected({ rowIndex, colIndex, selectedId, chipIndex }), [rowIndex, colIndex, selectedId, chipIndex]);
-    return (_jsx(StatusChip, Object.assign({}, reset, { copyText: copyText, onClick: (e) => {
+    return (_jsx(StatusChip, Object.assign({}, rest, { copyText: copyText, onClick: (e) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(e, chipIndex);
         }, isSelected: isSelected }, { children: children })));
 }

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

@@ -53,9 +53,10 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                     isPinnedEnd: column.pinned === 'end',
                 })
                 : {};
+            const isIndexColumn = column.pinned === 'start' && effectiveFirst;
             return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: effectiveFirst, isLast: effectiveLast, onClick: (event) => {
                     onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned);
-                }, sx: Object.assign(Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), rowSelectionBorderStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: isSheetView ? (_jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1 } }, { children: renderCell(column, index, colIndex) }))) : (_jsx(_Fragment, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
+                }, sx: Object.assign(Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: isIndexColumn ? 'center' : column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), rowSelectionBorderStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: isSheetView ? (_jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1 } }, { children: renderCell(column, index, colIndex) }))) : (_jsx(_Fragment, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
         }) })), [columns, row, index, selectedCell, selectedColumn, selectedRow, onCellClick, isLastRow, selectedChip, isSheetView]);
     return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
 }

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

@@ -37,7 +37,7 @@ export declare const authenticationsTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "250px";
-        readonly sheet: "250px";
+        readonly sheet: "165px";
     };
     readonly amount: {
         readonly default: "195px";

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

@@ -37,7 +37,7 @@ export const authenticationsTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '250px',
-        sheet: '250px',
+        sheet: '165px',
     },
     amount: {
         default: '195px',

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

@@ -52,7 +52,7 @@ export declare const chargeTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "150px";
-        readonly sheet: "230px";
+        readonly sheet: "165px";
     };
     readonly payment_initiated: {
         readonly default: "150px";

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

@@ -52,7 +52,7 @@ export const chargeTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '150px',
-        sheet: '230px',
+        sheet: '165px',
     },
     payment_initiated: {
         default: '150px',

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.103-test.6",
-  "testVersion": 6,
+  "version": "0.1.103-test.7-test.8-test.9",
+  "testVersion": 9,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",