@tap-payments/os-micro-frontend-shared 0.1.96-test.3 → 0.1.96-test.4

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

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

package/build/components/StatusChip/StatusChip.js

@@ -18,7 +18,7 @@ import { copyIcon, greenCheckIcon } from '../../constants/index.js';
 import { unknownGeographyColors } from './constants';
 import { ChipStyled, Wrapper, CopyWrapper } from './style';
 const StatusChip = (_a) => {
-    var { children, unknownText, copyText } = _a, props = __rest(_a, ["children", "unknownText", "copyText"]);
+    var { children, unknownText, copyText, expandDirection = 'right' } = _a, props = __rest(_a, ["children", "unknownText", "copyText", "expandDirection"]);
     const [showCopy, setShowCopy] = useState(false);
     const { t } = useTranslation();
     const isSelected = props.isSelected;
@@ -38,12 +38,15 @@ const StatusChip = (_a) => {
             };
         }
     };
-    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 && copyText ? 12 : 0,
-                    }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isSelected && copyText && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { delay: isSelected ? 0.2 : 0, duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
-                                        height: 12,
-                                        width: 12,
-                                        objectFit: 'contain',
-                                    } }) })) })] })) }))] })));
+    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: {
+                            paddingRight: isCopyActive ? 12 : 0,
+                        }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, Object.assign({ initial: false }, { 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,
+                                            width: 12,
+                                            objectFit: 'contain',
+                                        } }) })) }))] })) })) }))] })));
 };
 export default StatusChip;

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

@@ -11,6 +11,7 @@ export declare const ChipStyled: import("@emotion/styled").StyledComponent<impor
     maxWidth?: string | undefined;
     isSelected?: boolean | undefined;
     copyText?: string | undefined;
+    expandDirection?: "left" | "right" | 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/type.d.ts

@@ -10,4 +10,5 @@ export type ChipProps = PropsWithChildren<{
     maxWidth?: string;
     isSelected?: boolean;
     copyText?: string;
+    expandDirection?: 'left' | 'right';
 } & BoxProps>;

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

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

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

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

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

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

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

@@ -57,12 +57,12 @@ export declare const authorizationTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "150px";
-        readonly sheet: "170px";
+        readonly sheet: "230px";
     };
     readonly amount: {
         readonly default: "170px";
         readonly text: "195px";
-        readonly sheet: "195px";
+        readonly sheet: "150px";
     };
     readonly destinations: {
         readonly default: "70px";

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

@@ -57,12 +57,12 @@ export const authorizationTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '150px',
-        sheet: '170px',
+        sheet: '230px',
     },
     amount: {
         default: '170px',
         text: '195px',
-        sheet: '195px',
+        sheet: '150px',
     },
     destinations: {
         default: '70px',

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: "165px";
+        readonly sheet: "230px";
     };
     readonly payment_initiated: {
         readonly default: "150px";
@@ -222,7 +222,7 @@ export declare const chargeTableCellWidth: {
     readonly consolidated_amount: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "180px";
+        readonly sheet: "150px";
     };
     readonly customer_amount: {
         readonly default: "150px";

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

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

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

@@ -62,12 +62,12 @@ export declare const destinationsTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "250px";
-        readonly sheet: "165px";
+        readonly sheet: "230px";
     };
     readonly amount: {
         readonly default: "195px";
         readonly text: "195px";
-        readonly sheet: "195px";
+        readonly sheet: "150px";
     };
     readonly status: {
         readonly default: "50px";

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

@@ -62,12 +62,12 @@ export const destinationsTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '250px',
-        sheet: '165px',
+        sheet: '230px',
     },
     amount: {
         default: '195px',
         text: '195px',
-        sheet: '195px',
+        sheet: '150px',
     },
     status: {
         default: '50px',

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

@@ -47,7 +47,7 @@ export declare const refundTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "200px";
-        readonly sheet: "165px";
+        readonly sheet: "230px";
     };
     readonly payment_initiated: {
         readonly default: "150px";
@@ -92,7 +92,7 @@ export declare const refundTableCellWidth: {
     readonly amount: {
         readonly default: "195px";
         readonly text: "195px";
-        readonly sheet: "180px";
+        readonly sheet: "150px";
     };
     readonly payouts: {
         readonly default: "195px";

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

@@ -47,7 +47,7 @@ export const refundTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '200px',
-        sheet: '165px',
+        sheet: '230px',
     },
     payment_initiated: {
         default: '150px',
@@ -92,7 +92,7 @@ export const refundTableCellWidth = {
     amount: {
         default: '195px',
         text: '195px',
-        sheet: '180px',
+        sheet: '150px',
     },
     payouts: {
         default: '195px',

package/build/utils/table.d.ts

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

package/build/utils/table.js

@@ -1,4 +1,4 @@
-import { walletDetailsTableCellWidth, authenticationsTableCellWidth, authorizationTableCellWidth, chargeTableCellWidth, destinationsTableCellWidth, intentsTableCellWidth, invoicesTableCellWidth, leadsTableCellWidth, ordersTableCellWidth, payoutsTableCellWidth, protectChargesTableCellWidth, protectAuthorizationsTableCellWidth, refundTableCellWidth, tokensTableCellWidth, walletStatementTableCellWidth, topupsTableCellWidth, walletTableCellWidth, TABLE_CONTENT_ROW_HEIGHT, TABLE_LOADING_ROW_HEIGHT, TABLE_ROW_HEIGHT, merchantsTableCellWidth, terminalsTableCellWidth, SHEET_VIEW_TABLE_ROW_HEIGHT, } from '../constants/index.js';
+import { walletDetailsTableCellWidth, authenticationsTableCellWidth, authorizationTableCellWidth, chargeTableCellWidth, destinationsTableCellWidth, intentsTableCellWidth, invoicesTableCellWidth, leadsTableCellWidth, ordersTableCellWidth, payoutsTableCellWidth, protectChargesTableCellWidth, protectAuthorizationsTableCellWidth, refundTableCellWidth, tokensTableCellWidth, walletStatementTableCellWidth, topupsTableCellWidth, walletTableCellWidth, TABLE_CONTENT_ROW_HEIGHT, TABLE_LOADING_ROW_HEIGHT, TABLE_ROW_HEIGHT, merchantsTableCellWidth, terminalsTableCellWidth, } from '../constants/index.js';
 export const getColumnWidthPercentage = (widthInPx, options) => {
     const { isFirst, isLast } = options || {};
     const paddingInPx = isFirst || isLast ? 0 : 0;
@@ -73,38 +73,6 @@ export const isHeightNotFullyFilledByRows = (totalRows) => {
     const allowedRows = maxRowsThatFit();
     return totalRows < allowedRows + 1;
 };
-export const calculateSheetViewHeight = (totalRows, rowHeight = TABLE_CONTENT_ROW_HEIGHT) => {
-    const headerHeight = 56;
-    const padding = 16;
-    const calculatedHeight = headerHeight + totalRows * rowHeight + padding;
-    const minHeight = 200;
-    const maxHeight = window.innerHeight * 0.8;
-    return Math.max(minHeight, Math.min(calculatedHeight, maxHeight));
-};
-export const calculateSheetViewMaxRows = (availableHeight, rowHeight = TABLE_CONTENT_ROW_HEIGHT) => {
-    const headerHeight = 56;
-    const padding = 16;
-    const availableContentHeight = availableHeight - headerHeight - padding;
-    return Math.floor(availableContentHeight / rowHeight);
-};
-export const isSheetViewScrollable = (totalRows, containerHeight, rowHeight = TABLE_CONTENT_ROW_HEIGHT) => {
-    const headerHeight = 56;
-    const padding = 16;
-    const contentHeight = headerHeight + totalRows * rowHeight + padding;
-    return contentHeight > containerHeight;
-};
-export const getSheetViewRowHeight = () => {
-    const baseRowHeight = SHEET_VIEW_TABLE_ROW_HEIGHT;
-    return baseRowHeight * 0.8;
-};
-export const calculateSheetViewOptimalHeight = (totalRows, tableType, maxHeightPercentage = 0.8) => {
-    const rowHeight = getSheetViewRowHeight();
-    const headerHeight = 56;
-    const padding = 16;
-    const calculatedHeight = headerHeight + totalRows * rowHeight + padding;
-    const maxHeight = window.innerHeight * maxHeightPercentage;
-    return Math.min(calculatedHeight, maxHeight);
-};
 export const isTableDefaultMode = (tableMode = 'default') => {
     return tableMode === 'default';
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.96-test.3",
-  "testVersion": 3,
+  "version": "0.1.96-test.4",
+  "testVersion": 4,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",