@tap-payments/os-micro-frontend-shared 0.1.365-test.12 → 0.1.365-test.14

package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 interface DonutProps {
-    isLoading: boolean;
+    isLoading?: boolean;
     size?: number;
     chartData: Array<{
         name: string;
@@ -9,5 +9,5 @@ interface DonutProps {
     }>;
     chartInfo?: ReactNode;
 }
-export default function MultiDatakeyDonut({ isLoading, chartData, size, }: DonutProps): import("react/jsx-runtime").JSX.Element;
+export declare const MultiDatakeyDonut: ({ isLoading, chartData, size, chartInfo }: DonutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.js

@@ -1,21 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
-import { DonutWrapper, CenterOverlay, CenterItem, ValueText, LegendWrapper, LegendDot, LegendText } from './style';
-import Skeleton from '../Skeleton';
-export default function MultiDatakeyDonut({ isLoading = true, chartData, 
-// activeDataKey = 'count',
-size = 170, }) {
-    // const chartData = [
-    //   {
-    //     name: 'Customer',
-    //     value: activeDataKey === 'amount' ? data.customerAmount : data.customerCount,
-    //     color: '#76BB40',
-    //   },
-    //   {
-    //     name: 'Merchant',
-    //     value: activeDataKey === 'amount' ? data.merchantAmount : data.merchantCount,
-    //     color: '#1F88D0',
-    //   },
-    // ]
-    return (_jsxs(DonutWrapper, Object.assign({ sx: { width: size, height: size } }, { children: [_jsx(ResponsiveContainer, { children: _jsxs(PieChart, { children: [_jsx(Pie, { data: [{ value: 100 }], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", fill: "#E5E7EB", stroke: "none", isAnimationActive: false }), _jsx(Pie, Object.assign({ data: chartData, dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", cornerRadius: 0, stroke: "none", startAngle: 90, endAngle: -270 }, { children: chartData.map((entry) => (_jsx(Cell, { fill: entry.color }, entry.name))) }))] }) }), _jsx(CenterOverlay, { children: chartData.map((entry) => (_jsxs(CenterItem, { children: [isLoading ? _jsx(Skeleton, { width: 49, height: 7, sx: { margin: '2px' } }) : _jsx(ValueText, { children: entry.value.toLocaleString() }), isLoading ? (_jsx(Skeleton, { width: 80, height: 7 })) : (_jsxs(LegendWrapper, { children: [_jsx(LegendDot, { color: entry.color }), _jsx(LegendText, { children: entry.name })] }))] }, entry.name))) })] })));
-}
+import { DonutWrapper, CenterOverlay } from './style';
+export const MultiDatakeyDonut = ({ isLoading = false, chartData, size = 170, chartInfo }) => {
+    return (_jsxs(DonutWrapper, Object.assign({ sx: { width: size, height: size } }, { children: [_jsx(ResponsiveContainer, { children: _jsxs(PieChart, { children: [_jsx(Pie, { data: [{ value: 100 }], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", fill: "#E5E7EB", stroke: "none", isAnimationActive: false }), _jsx(Pie, Object.assign({ data: chartData, dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", cornerRadius: 0, stroke: "none", startAngle: 90, endAngle: -270, 
+                            // Prevent default focus outline
+                            style: { outline: 'none' } }, { children: chartData.map((entry) => (_jsx(Cell, { fill: entry.color }, entry.name))) }))] }) }), _jsx(CenterOverlay, { children: chartInfo })] })));
+};

package/build/components/MultiDatakeyDonut/index.d.ts

@@ -1,2 +1 @@
-import PieChart from './MultiDatakeyDonut';
-export default PieChart;
+export * from './MultiDatakeyDonut';

package/build/components/MultiDatakeyDonut/index.js

@@ -1,2 +1 @@
-import PieChart from './MultiDatakeyDonut';
-export default PieChart;
+export * from './MultiDatakeyDonut';

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

@@ -5,24 +5,3 @@ export declare const DonutWrapper: import("@emotion/styled").StyledComponent<imp
 export declare const CenterOverlay: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & 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/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const CenterItem: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & 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/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const ValueText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
-    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const LegendWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & 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/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const LegendDot: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & 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/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    color: string;
-}, {}, {}>;
-export declare const LegendText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
-    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/MultiDatakeyDonut/style.js

@@ -1,6 +1,5 @@
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import Text from '../Text';
 export const DonutWrapper = styled(Box)(() => ({
     width: '100%',
     maxWidth: 500,
@@ -17,30 +16,3 @@ export const CenterOverlay = styled(Box)(({ theme }) => ({
     pointerEvents: 'none',
     gap: theme.spacing(1),
 }));
-export const CenterItem = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-}));
-export const ValueText = styled(Text)(({ theme }) => ({
-    fontSize: 12,
-    fontWeight: 700,
-    lineHeight: 1.2,
-    wordWrap: 'break-word',
-}));
-export const LegendWrapper = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: 4,
-}));
-export const LegendDot = styled(Box)(({ color }) => ({
-    width: 8,
-    height: 8,
-    borderRadius: '50%',
-    background: color,
-}));
-export const LegendText = styled(Text)(({ theme }) => ({
-    fontSize: 11,
-    fontWeight: 500,
-}));

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.365-test.12",
-  "testVersion": 12,
+  "version": "0.1.365-test.14",
+  "testVersion": 14,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",