@tap-payments/os-micro-frontend-shared 0.1.271-test.6 → 0.1.271-test.8

package/build/components/CountryFlag/CountryFlag.d.ts

@@ -4,5 +4,6 @@ interface CountryFlagProps extends BoxProps {
     countryCode?: string;
     currencyCode?: string;
 }
-declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<CountryFlagProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>>;
+declare function CountryFlag({ countryCode, currencyCode, ...props }: CountryFlagProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CountryFlag>;
 export default _default;

package/build/components/CountryFlag/CountryFlag.js

@@ -10,14 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, forwardRef } from 'react';
+import { memo } from 'react';
 import Box from '@mui/material/Box';
 import { defaultCountryIcon, getCountriesIcon, getCurrenciesIcon } from '../../constants/index.js';
-const CountryFlag = forwardRef((_a, ref) => {
+function CountryFlag(_a) {
     var _b;
-    var { countryCode, currencyCode, width = 16 } = _a, props = __rest(_a, ["countryCode", "currencyCode", "width"]);
-    return (_jsx(Box, Object.assign({ ref: ref, component: "img", src: (countryCode && getCountriesIcon(countryCode)) || (currencyCode && getCurrenciesIcon(currencyCode)) || defaultCountryIcon, width: width, alt: (_b = countryCode !== null && countryCode !== void 0 ? countryCode : currencyCode) !== null && _b !== void 0 ? _b : 'flag', loading: "lazy", onError: (e) => {
+    var { countryCode, currencyCode } = _a, props = __rest(_a, ["countryCode", "currencyCode"]);
+    return (_jsx(Box, Object.assign({}, props, { component: "img", src: (countryCode && getCountriesIcon(countryCode)) || (currencyCode && getCurrenciesIcon(currencyCode)) || defaultCountryIcon, width: props.width || 16, alt: (_b = countryCode !== null && countryCode !== void 0 ? countryCode : currencyCode) !== null && _b !== void 0 ? _b : 'flag', loading: "lazy", onError: (e) => {
             e.currentTarget.src = defaultCountryIcon;
-        } }, props)));
-});
+        } })));
+}
 export default memo(CountryFlag);

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

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
 import { TableCell } from '../../../TableCells';
 import Tooltip from '../../../Tooltip';
 import { CountryFlag, CurrencySymbol } from '../../../index.js';
@@ -18,6 +19,6 @@ import { ConversionTypeLabel, CurrencyInfo } from './components';
 const tableMode = 'default';
 function AmountCell(_a) {
     var { conversionType, amount, currency, tooltipLabel, amountTooltipLabel } = _a, props = __rest(_a, ["conversionType", "amount", "currency", "tooltipLabel", "amountTooltipLabel"]);
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: _jsx(ConversionTypeLabel, { tableMode: tableMode, conversionType: conversionType }) })), currency && (_jsx(Tooltip, Object.assign({ title: _jsx(CurrencySymbol, { currency: currency }) }, { children: _jsx(CountryFlag, { currencyCode: currency }) }))), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: _jsx(CurrencyInfo, { tableMode: tableMode, amount: amount, currency: currency }) }))] }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AmountCellContainer, { children: [_jsx(Tooltip, Object.assign({ title: tooltipLabel || '' }, { children: _jsx(Box, { children: _jsx(ConversionTypeLabel, { tableMode: tableMode, conversionType: conversionType }) }) })), currency && (_jsx(Tooltip, Object.assign({ title: _jsx(CurrencySymbol, { currency: currency }) }, { children: _jsx(CountryFlag, { currencyCode: currency }) }))), _jsx(Tooltip, Object.assign({ title: amountTooltipLabel }, { children: _jsx(CurrencyInfo, { tableMode: tableMode, amount: amount, currency: currency }) }))] }) })));
 }
 export default AmountCell;

package/build/components/TableCells/CustomCells/AmountCell/components/AmountConversionTooltipLabel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     type: 'fx' | 'dcc' | undefined;
     selectAmount?: number;
@@ -8,5 +7,5 @@ type Props = {
     merchantAmount?: number;
     merchantCurrency?: string;
 };
-export declare const AmountConversionTooltipLabel: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AmountConversionTooltipLabel: ({ type, selectAmount, selectCurrency, requestAmount, requestCurrency, merchantAmount, merchantCurrency, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/TableCells/CustomCells/AmountCell/components/AmountConversionTooltipLabel.js

@@ -2,12 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { conversionTypesLabels, formatAmountWithCurrency } from '../../../../../utils/index.js';
 import { CurrencySymbol } from '../../../../index.js';
 import { ConversionTooltip, ConversionTooltipRow } from '../style';
-import { forwardRef } from 'react';
-export const AmountConversionTooltipLabel = forwardRef(({ type, selectAmount, selectCurrency, requestAmount, requestCurrency, merchantAmount, merchantCurrency }, ref) => {
+export const AmountConversionTooltipLabel = ({ type, selectAmount, selectCurrency, requestAmount, requestCurrency, merchantAmount, merchantCurrency, }) => {
     const customerSelectValue = formatAmountWithCurrency(selectAmount, selectCurrency);
     const chargeValue = formatAmountWithCurrency(requestAmount, requestCurrency);
     const settlementValue = formatAmountWithCurrency(merchantAmount, merchantCurrency);
-    return (_jsxs(ConversionTooltip, Object.assign({ ref: ref, sx: { textAlign: 'right', justifyContent: 'flex-end' } }, { children: [_jsx("span", Object.assign({ style: {
+    return (_jsxs(ConversionTooltip, Object.assign({ sx: {
+            textAlign: 'right',
+            justifyContent: 'flex-end',
+        } }, { children: [_jsx("span", Object.assign({ style: {
                     fontWeight: 'bold',
                 } }, { children: type ? conversionTypesLabels[type] : '' })), _jsxs(ConversionTooltip, { children: [type !== 'fx' && (_jsxs(ConversionTooltipRow, { children: [_jsx("span", { children: "Customer Selected" }), ' ', _jsxs("span", { children: [_jsx(CurrencySymbol, { currency: selectCurrency }), " ", customerSelectValue.integerAmount, ".", customerSelectValue.decimalAmount] })] })), _jsxs(ConversionTooltipRow, { children: [_jsx("span", { children: "Charge" }), ' ', _jsxs("span", { children: [_jsx(CurrencySymbol, { currency: requestCurrency }), " ", chargeValue.integerAmount, ".", chargeValue.decimalAmount] })] }), _jsxs(ConversionTooltipRow, { children: [_jsx("span", { children: "Settlement" }), ' ', _jsxs("span", { children: [_jsx(CurrencySymbol, { currency: merchantCurrency }), " ", settlementValue.integerAmount, ".", settlementValue.decimalAmount] })] })] })] })));
-});
+};

package/build/components/TableCells/CustomCells/AmountCell/components/ConversionTypeLabel.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { TableMode } from '../../../../../types/index.js';
 import { AmountCellProps } from '../type';
 interface ConversionTypeLabelProps extends Pick<AmountCellProps, 'conversionType'> {
     tableMode: TableMode;
 }
-export declare const ConversionTypeLabel: import("react").ForwardRefExoticComponent<ConversionTypeLabelProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const ConversionTypeLabel: ({ tableMode, conversionType }: ConversionTypeLabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/TableCells/CustomCells/AmountCell/components/ConversionTypeLabel.js

@@ -1,8 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { ConversionBadge } from '../style';
-import { forwardRef } from 'react';
-export const ConversionTypeLabel = forwardRef(({ tableMode, conversionType }, ref) => {
+export const ConversionTypeLabel = ({ tableMode, conversionType }) => {
     if (!conversionType)
         return _jsx(_Fragment, {});
-    return (_jsx(ConversionBadge, Object.assign({ tableMode: tableMode, className: "conversion-type", ref: ref }, { children: conversionType })));
-});
+    return (_jsx(ConversionBadge, Object.assign({ tableMode: tableMode, className: "conversion-type" }, { children: conversionType })));
+};

package/build/components/TableCells/CustomCells/AmountCell/components/CurrencyInfo.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { TableMode } from '../../../../../types/index.js';
 import { AmountCellProps } from '../type';
 interface CurrencyInfoProps extends Pick<AmountCellProps, 'amount' | 'currency'> {
     tableMode: TableMode;
 }
-export declare const CurrencyInfo: import("react").ForwardRefExoticComponent<CurrencyInfoProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const CurrencyInfo: ({ tableMode, amount, currency }: CurrencyInfoProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/TableCells/CustomCells/AmountCell/components/CurrencyInfo.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { CurrencySymbol } from '../../../../index.js';
-import { formatAmountWithCurrency } from '../../../../../utils/index.js';
 import { CurrencySpan, DecimalSpan } from '../style';
-export const CurrencyInfo = forwardRef(({ tableMode, amount, currency }, ref) => {
+import { formatAmountWithCurrency } from '../../../../../utils/index.js';
+export const CurrencyInfo = ({ tableMode, amount, currency }) => {
     const { integerAmount, decimalAmount } = formatAmountWithCurrency(amount, currency);
-    return (_jsx(CurrencySpan, Object.assign({ tableMode: tableMode, ref: ref }, { children: amount !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { children: _jsx(CurrencySymbol, { currency: currency, fontSize: 10 }) }), ' ', integerAmount, decimalAmount && (_jsxs(_Fragment, { children: [".", _jsx(DecimalSpan, { children: decimalAmount })] }))] })) : (_jsx("span", { children: "-" })) })));
-});
+    return (_jsx(CurrencySpan, Object.assign({ tableMode: tableMode }, { children: amount !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { children: _jsx(CurrencySymbol, { currency: currency, fontSize: 10 }) }), ' ', integerAmount, decimalAmount && (_jsxs(_Fragment, { children: [".", _jsx(DecimalSpan, { children: decimalAmount })] }))] })) : (_jsx("span", { children: "-" })) })));
+};

package/build/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,10 @@
+import React, { ReactElement } from 'react';
 import type { TooltipProps } from '@mui/material/Tooltip';
-declare function Tooltip({ className, placement, children, ...rest }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+interface Props extends Omit<TooltipProps, 'children'> {
+    title: React.ReactNode;
+    placement?: TooltipProps['placement'];
+    children?: ReactElement;
+    className?: string;
+}
+declare function Tooltip({ className, title, placement, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/build/components/Tooltip/Tooltip.js

@@ -10,9 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
 import { StyledTooltip } from './styles';
 function Tooltip(_a) {
-    var { className, placement = 'top', children } = _a, rest = __rest(_a, ["className", "placement", "children"]);
-    return (_jsx(StyledTooltip, Object.assign({ classes: { popper: className }, placement: placement, arrow: true }, rest, { children: children })));
+    var { className, title, placement = 'top', children } = _a, rest = __rest(_a, ["className", "title", "placement", "children"]);
+    return (_jsx(StyledTooltip, Object.assign({ classes: { popper: className }, title: title, placement: placement, arrow: true }, rest, { children: _jsx(Box, Object.assign({ display: "flex", component: "span" }, { children: children })) })));
 }
 export default Tooltip;

package/build/components/Tooltip/styles.d.ts

@@ -1 +1,2 @@
-export declare const StyledTooltip: import("@emotion/styled").StyledComponent<import("@mui/material/Tooltip").TooltipProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+import { TooltipProps } from '@mui/material/Tooltip';
+export declare const StyledTooltip: import("@emotion/styled").StyledComponent<TooltipProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/Tooltip/styles.js

@@ -1,6 +1,21 @@
+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 { styled } from '@mui/material/styles';
 import TooltipComponent, { tooltipClasses } from '@mui/material/Tooltip';
-export const StyledTooltip = styled(TooltipComponent)(({ theme }) => ({
+export const StyledTooltip = styled((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(TooltipComponent, Object.assign({}, props, { classes: { popper: className } }));
+})(({ theme }) => ({
     zIndex: 999999,
     [`& .${tooltipClasses.arrow}`]: {
         '&:before': {

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