@tap-payments/os-micro-frontend-shared 0.0.296-test.7 → 0.0.296-test.8

package/build/components/IconWithBadge/IconWithBadge.d.ts

@@ -1,2 +1,2 @@
 import { IconWithBadgeProps } from './type';
-export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt, mainIconSize, containerSize, overlayPosition, borderColor, label, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;
+export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt, mainIconSize, containerSize, overlayPosition, borderColor, label, sx, onError, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;

package/build/components/IconWithBadge/IconWithBadge.js

@@ -5,19 +5,16 @@ import { brandPlaceholderIcon } from '../../constants/index.js';
 import Tooltip from '../Tooltip';
 import { useState } from 'react';
 import Skeleton from '@mui/material/Skeleton';
-export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt = 'main icon', mainIconSize = 20, containerSize = 24, overlayPosition = { top: 10, left: 17 }, borderColor = '#F2F2F2', label = '', }) {
+export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt = 'main icon', mainIconSize = 20, containerSize = 24, overlayPosition = { top: 10, left: 17 }, borderColor = '#F2F2F2', label = '', sx, onError, }) {
     const [isLoading, setIsLoading] = useState(true);
     return (_jsx(Tooltip, Object.assign({ title: label }, { children: _jsx(Box, Object.assign({ display: "flex", alignItems: "center", gap: 1, sx: { position: 'relative' } }, { children: _jsxs(Container, Object.assign({ style: {
                     borderColor,
                     width: containerSize,
                     height: containerSize,
-                } }, { children: [_jsx(Box, Object.assign({ width: mainIconSize, height: mainIconSize }, { children: isLoading && _jsx(Skeleton, { variant: "circular", width: `${mainIconSize}px`, height: `${mainIconSize}px` }) })), _jsxs(_Fragment, { children: [overlayIcon && _jsx(BadgeBox, Object.assign({ sx: overlayPosition }, { children: overlayIcon })), _jsx(Box, { width: mainIconSize, height: mainIconSize, component: "img", src: mainIcon || brandPlaceholderIcon, alt: mainIconAlt, sx: {
-                                    borderRadius: '50%',
-                                    objectFit: 'scale-down',
-                                    opacity: isLoading ? 0 : 1,
-                                }, onError: (e) => {
+                } }, { children: [_jsx(Box, Object.assign({ width: mainIconSize, height: mainIconSize }, { children: isLoading && _jsx(Skeleton, { variant: "circular", width: `${mainIconSize}px`, height: `${mainIconSize}px` }) })), _jsxs(_Fragment, { children: [overlayIcon && _jsx(BadgeBox, Object.assign({ sx: overlayPosition }, { children: overlayIcon })), _jsx(Box, { width: mainIconSize, height: mainIconSize, component: "img", src: mainIcon || brandPlaceholderIcon, alt: mainIconAlt, sx: Object.assign({ borderRadius: '50%', objectFit: 'scale-down', opacity: isLoading ? 0 : 1 }, sx), onError: (e) => {
                                     setIsLoading(false);
                                     e.currentTarget.src = brandPlaceholderIcon;
+                                    onError === null || onError === void 0 ? void 0 : onError(e);
                                 }, onLoad: () => {
                                     setIsLoading(false);
                                 } })] })] })) })) })));

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SxProps } from '@mui/material';
 export interface IconWithBadgeProps {
     mainIcon: string;
     overlayIcon?: React.ReactNode;
@@ -13,4 +14,6 @@ export interface IconWithBadgeProps {
     };
     borderColor?: string;
     label?: string;
+    sx?: SxProps;
+    onError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 }

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

@@ -17,7 +17,8 @@ import Tooltip from '../../../Tooltip';
 import { ImageWrapper } from '../../../index.js';
 import { TableCell } from '../../../TableCells';
 import { segmentsIcons } from './constant';
-import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, StyledSourceImage, referenceSourceAnimation, } from './style';
+import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, referenceSourceAnimation } from './style';
+import IconWithBadge from '../../../IconWithBadge';
 function SegmentsCell(_a) {
     var { isTextShown } = _a, props = __rest(_a, ["isTextShown"]);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -33,10 +34,10 @@ function SegmentsCell(_a) {
                 setIsTooltipOpen(false);
             }, title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: referenceSourceAnimation(index, theme.shadows[4], isTextShown ? 83 : 0), sx: {
                     width: isTextShown ? '79px' : '36px',
-                } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment) }) })) : (_jsx(StyledSourceImage, { src: (segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) || segmentsIcons[segment], alt: segment, sx: Object.assign(Object.assign({}, (segment === 'order' && { width: '11.82px' })), ((segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) && { borderRadius: '40px' })), onError: (e) => {
+                } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment) }) })) : (_jsx(IconWithBadge, { mainIcon: (segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) || segmentsIcons[segment], mainIconSize: segment === 'order' ? 11.82 : 16, containerSize: segment === 'order' ? 11.82 : 16, sx: Object.assign({}, ((segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) && { borderRadius: '40px' })), onError: (e) => {
                         e.currentTarget.src = segmentsIcons[segment];
                         e.currentTarget.style.borderRadius = '0px';
-                    } })) })) }), `${segment}-${index}`));
+                    }, borderColor: "transparent" })) })) }), `${segment}-${index}`));
     }), [props, segments, isTextShown, theme]);
     const referenceSourcesCount = (ReferenceSources === null || ReferenceSources === void 0 ? void 0 : ReferenceSources.length) || 0;
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -6,10 +6,6 @@ export const StyledSourceCell = styled('span')(({ theme }) => ({
     justifyContent: 'flex-start',
     gap: theme.spacing(1),
 }));
-export const StyledSourceImage = styled('img')(() => ({
-    maxWidth: '16px',
-    maxHeight: '16px',
-}));
 export const ReferenceSourcesContainer = styled(motion.span)(({ theme, sourcesCount }) => ({
     display: 'flex',
     alignItems: 'center',

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