@tap-payments/os-micro-frontend-shared 0.1.291-test.1-test.2-test.3-test.4-test.5-test.6-test.7-test.8 → 0.1.291-test.1-test.2-test.3-test.4-test.5-test.6-test.7-test.8-test.9

package/build/components/AnimatedSpinnerIcon/AnimatedSpinnerIcon.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { spinnerLoadingIcon } from '../../constants/index.js';
 import { StyledAnimatedSpinner } from './style';
 const AnimatedSpinnerIcon = ({ width, height, sx } = {}) => {
-    return _jsx(StyledAnimatedSpinner, { src: spinnerLoadingIcon, alt: "Loading", className: "spinner-loader", width: width, height: height, sx: sx });
+    return (_jsx(StyledAnimatedSpinner, { src: spinnerLoadingIcon, alt: "Loading", className: "spinner-loader", width: width, height: height, sx: sx, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }));
 };
 export default AnimatedSpinnerIcon;

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

@@ -2,21 +2,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import Tooltip from '../../../Tooltip';
-import { actionFailIcon, actionSuccessIcon, spinnerLoadingIcon, fileDownloadBlueIcon, fileDownloadGreyIcon } from '../../../../constants/index.js';
-import { DownloadFileIcon, StyledDownloadFileImageWrapper } from './style';
-const DownloadIconVariant = ({ isDownloadLoading, isDownloadError, isDownloadSuccess, isSettlementsAvailable, }) => {
-    if (isDownloadError) {
-        return _jsx(DownloadFileIcon, { src: isSettlementsAvailable ? actionFailIcon : fileDownloadGreyIcon, alt: "Download Report" }, "error-icon");
-    }
-    if (isDownloadSuccess) {
-        return _jsx(DownloadFileIcon, { src: isSettlementsAvailable ? actionSuccessIcon : fileDownloadGreyIcon, alt: "Download Report" }, "success-icon");
-    }
-    if (isDownloadLoading) {
-        return _jsx(DownloadFileIcon, { src: isSettlementsAvailable ? spinnerLoadingIcon : fileDownloadGreyIcon, className: "spinner-loader" }, "spinner-icon");
-    }
-    return _jsx(DownloadFileIcon, { src: isSettlementsAvailable ? fileDownloadBlueIcon : fileDownloadGreyIcon, alt: "Download Report" }, "download-icon");
-};
+import { AnimatedSpinnerIcon } from '../../../index.js';
+import { actionFailIcon, actionSuccessIcon, fileDownloadBlueIcon, fileDownloadGreyIcon } from '../../../../constants/index.js';
+import { StyledDownloadFileImage, StyledDownloadFileImageWrapper } from './style';
 export const PayoutReportCell = ({ onClick, isSettlementsAvailable, isDownloadError, isDownloadLoading, isDownloadSuccess }) => {
     const isDownloadInProgress = useMemo(() => isDownloadLoading || isDownloadSuccess || isDownloadError, [isDownloadLoading, isDownloadSuccess, isDownloadError]);
-    return (_jsx(Tooltip, Object.assign({ title: !isSettlementsAvailable ? 'Pending' : '' }, { children: _jsx(StyledDownloadFileImageWrapper, Object.assign({ onClick: () => isSettlementsAvailable && !isDownloadInProgress && onClick() }, { children: _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: _jsx(DownloadIconVariant, { isDownloadLoading: isDownloadLoading, isDownloadError: isDownloadError, isDownloadSuccess: isDownloadSuccess, isSettlementsAvailable: isSettlementsAvailable }) })) })) })));
+    const icon = useMemo(() => {
+        if (isDownloadSuccess) {
+            return actionSuccessIcon;
+        }
+        if (isDownloadError) {
+            return actionFailIcon;
+        }
+        return fileDownloadBlueIcon;
+    }, [isDownloadSuccess, isDownloadError]);
+    return (_jsx(Tooltip, Object.assign({ title: !isSettlementsAvailable ? 'Pending' : '' }, { children: _jsx(StyledDownloadFileImageWrapper, Object.assign({ onClick: () => isSettlementsAvailable && !isDownloadInProgress && onClick() }, { children: _jsx(AnimatePresence, Object.assign({ mode: "wait", initial: false }, { children: isDownloadLoading ? (_jsx(AnimatedSpinnerIcon, {}, "spinner")) : (_jsx(StyledDownloadFileImage, { src: isSettlementsAvailable ? icon : fileDownloadGreyIcon, alt: "Download Report", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }, "download-icon")) })) })) })));
 };

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

@@ -2,7 +2,7 @@
 export declare const StyledDownloadFileImageWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isTextShown?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const DownloadFileIcon: import("@emotion/styled").StyledComponent<{
+export declare const StyledDownloadFileImage: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;
     hidden?: boolean | undefined;

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

@@ -12,7 +12,7 @@ export const StyledDownloadFileImageWrapper = styled('span')(({ theme }) => ({
     minWidth: '36px',
     cursor: 'pointer',
 }));
-export const DownloadFileIcon = styled(motion.img)(() => ({
+export const StyledDownloadFileImage = styled(motion.img)(() => ({
     width: '16px',
     height: '16px',
 }));

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.291-test.1-test.2-test.3-test.4-test.5-test.6-test.7-test.8",
-  "testVersion": 8,
+  "version": "0.1.291-test.1-test.2-test.3-test.4-test.5-test.6-test.7-test.8-test.9",
+  "testVersion": 9,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",