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

package/build/components/FilterDropdown/FilterDropdown.d.ts

@@ -5,6 +5,8 @@ interface FilterDropdownProps {
     onCancel: () => void;
     isOkayButDisabled?: boolean;
     isDisabled?: boolean;
+    icon?: string;
+    title?: string;
 }
-export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
+export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/FilterDropdown/FilterDropdown.js

@@ -6,7 +6,7 @@ import { ClickAwayListener } from '@mui/material';
 import { darkFilterIcon } from '../../constants/index.js';
 import { Menu, CustomBackdrop } from '../index.js';
 import { CancelButton, FilterButton, Footer, OkayButton, TitleStyled } from './style';
-export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }) {
+export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const { t } = useTranslation();
@@ -50,5 +50,5 @@ export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled,
         onConfirm();
         onClose();
     };
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, { children: [_jsx(FilterButton, Object.assign({ isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.5 })) }, { children: _jsx(Box, { component: "img", src: darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: { marginTop: '8px', marginBottom: '8px', width: 193 }, placement: "bottom-end" }, { children: [_jsx(TitleStyled, Object.assign({ component: "span" }, { children: t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] }) })));
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, { children: [_jsx(FilterButton, Object.assign({ isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.5 })) }, { children: _jsx(Box, { component: "img", src: icon !== null && icon !== void 0 ? icon : darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: { marginTop: '8px', marginBottom: '8px', width: 193 }, placement: "bottom-end" }, { children: [_jsx(TitleStyled, Object.assign({ component: "span" }, { children: title !== null && title !== void 0 ? title : t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] }) })));
 }

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

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

package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.js

@@ -1,8 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
-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 })] })));
+import { DonutWrapper, CenterOverlay, Empty } from './style';
+export const MultiDatakeyDonut = ({ chartData, size = 170, chartInfo }) => {
+    const pieSegments = useMemo(() => {
+        const total = chartData.reduce((sum, d) => sum + d.value, 0) || 1;
+        let cumulative = 0;
+        return chartData.map((d) => {
+            const start = (cumulative / total) * 360;
+            const end = ((cumulative + d.value) / total) * 360;
+            cumulative += d.value;
+            return Object.assign(Object.assign({}, d), { startAngle: start, endAngle: end });
+        });
+    }, [chartData]);
+    const isEmpty = chartData.every((d) => d.value === 0);
+    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 }), !isEmpty &&
+                            pieSegments.map((segment) => (_jsx(Pie, Object.assign({ data: [segment], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", startAngle: 90 - segment.startAngle, endAngle: 90 - segment.endAngle, cornerRadius: 0, stroke: "none", isAnimationActive: true, animationDuration: 800, style: { outline: 'none' } }, { children: _jsx(Cell, { fill: segment.color, tabIndex: -1 }, segment.name) }), segment.name)))] }) }), _jsx(CenterOverlay, { children: !chartInfo ? _jsx(Empty, { children: "----" }) : chartInfo })] })));
 };

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

@@ -5,3 +5,6 @@ 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 Empty: 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>, {}, {}>;

package/build/components/MultiDatakeyDonut/style.js

@@ -16,3 +16,8 @@ export const CenterOverlay = styled(Box)(({ theme }) => ({
     pointerEvents: 'none',
     gap: theme.spacing(1),
 }));
+export const Empty = styled(Box)(({ theme }) => ({
+    fontSize: 17,
+    fontWeight: 700,
+    color: '#CFD0D2',
+}));

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