@tap-payments/os-micro-frontend-shared 0.0.97 → 0.0.99-amount-fix

package/build/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,3 +1,3 @@
 import { IProps } from './type';
-declare function Dropdown({ open, menuItems, anchorEl, onClose, selected, ...props }: IProps): import("react/jsx-runtime").JSX.Element;
+declare function Dropdown({ open, menuItems, anchorEl, onClose, selected, allowShadows, ...props }: IProps): import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/build/components/DropdownMenu/DropdownMenu.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider, Box, useTheme } from '@mui/material';
 import { StyledListItemText, StyledMenu, StyledListItemIcon, StyledMenuItem } from './styles';
 function Dropdown(_a) {
-    var { open, menuItems, anchorEl, onClose, selected } = _a, props = __rest(_a, ["open", "menuItems", "anchorEl", "onClose", "selected"]);
+    var { open, menuItems, anchorEl, onClose, selected, allowShadows = true } = _a, props = __rest(_a, ["open", "menuItems", "anchorEl", "onClose", "selected", "allowShadows"]);
     const theme = useTheme();
     return (_jsx(StyledMenu, Object.assign({ open: open, anchorEl: anchorEl, onClose: onClose, onContextMenu: (e) => {
             e.preventDefault();
@@ -27,7 +27,7 @@ function Dropdown(_a) {
                             item.onClick(e);
                     }, onContextMenu: item.onRightClick, selected: item.selected, sx: Object.assign({ '&:hover': {
                             backgroundColor: 'transparent',
-                            boxShadow: theme.shadows[10],
+                            boxShadow: allowShadows ? theme.shadows[10] : 'none',
                             '& .sandbox-Icon': {
                                 display: 'none',
                             },
@@ -36,7 +36,7 @@ function Dropdown(_a) {
                             },
                         } }, (idx === selected && {
                         backgroundColor: 'transparent',
-                        boxShadow: theme.shadows[10],
+                        boxShadow: allowShadows ? theme.shadows[10] : 'none',
                     })) }, { children: [item.icon && _jsx(StyledListItemIcon, { children: item.icon }), _jsx(StyledListItemText, { children: item.label }), _jsx(Box, Object.assign({ className: item.alwaysShowRightAction ? '' : 'menu-right-action' }, { children: item.rightAction && item.rightAction }))] }))) }, `${item.label}-${idx}`));
         }) })));
 }

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

@@ -17,4 +17,5 @@ export interface IProps {
     anchorEl?: Element | null | undefined;
     style?: CSSProperties;
     selected?: number;
+    allowShadows?: boolean;
 }

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { MultiSelectStatusButtonProps } from './type';
+declare function MultiSelectStatusButton({ options, selectedValues, onSelectionChange, label, variant }: MultiSelectStatusButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof MultiSelectStatusButton>;
+export default _default;

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Typography, Checkbox } from '@mui/material';
+import { ChevronIcon } from '../TableHeader_V2/components/StatusButtons/ChevronIcon';
+import StyledBadge, { BadgeVariants } from '../CountBadge';
+import CountryFlag from '../CountryFlag';
+import { formatNumber } from '../../utils/index.js';
+import { closeXIcon } from '../../constants/index.js';
+import { ChevronContainer, Label, LabelWrapper, StyledDropdown, MenuItemContainer, CheckboxStyles, StyledStatusButton, ClearIcon, ChevronIconWrapper, } from './style';
+function MultiSelectStatusButton({ options, selectedValues, onSelectionChange, label, variant = 'inActive' }) {
+    const { t } = useTranslation();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const buttonRef = useRef(null);
+    const [internalSelectedValues, setInternalSelectedValues] = useState(selectedValues);
+    const [dropdownWidth, setDropdownWidth] = useState(0);
+    const [isHovered, setIsHovered] = useState(false);
+    const isOpen = Boolean(anchorEl);
+    useEffect(() => {
+        if (!isOpen) {
+            setInternalSelectedValues(selectedValues);
+        }
+    }, [selectedValues, isOpen]);
+    const handleDropdownClick = (event) => {
+        var _a;
+        event.stopPropagation();
+        event.preventDefault();
+        if (isOpen) {
+            handleClose();
+            return;
+        }
+        setAnchorEl(buttonRef.current);
+        const buttonWidth = ((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 200;
+        setDropdownWidth(Math.max(buttonWidth, 200));
+    };
+    const handleClose = () => {
+        const hasChanged = JSON.stringify([...internalSelectedValues].sort()) !== JSON.stringify([...selectedValues].sort());
+        if (hasChanged) {
+            onSelectionChange(internalSelectedValues);
+        }
+        setAnchorEl(null);
+        setDropdownWidth(0);
+    };
+    const handleClearAll = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        setInternalSelectedValues([]);
+        onSelectionChange([]);
+    };
+    const handleOptionToggle = (optionStatus, event) => {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        const newSelection = internalSelectedValues.includes(optionStatus)
+            ? internalSelectedValues.filter((status) => status !== optionStatus)
+            : [...internalSelectedValues, optionStatus];
+        setInternalSelectedValues(newSelection);
+    };
+    const getDisplayLabel = () => {
+        return (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: "11px", variant: "inherit" }, { children: t('Currencies') })));
+    };
+    const countBadge = (_jsx(StyledBadge, Object.assign({ pointer: true, variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(selectedValues.length > 0 ? selectedValues.length : options.length) })));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledStatusButton, Object.assign({ buttonVariant: variant, ref: buttonRef, sx: {
+                    paddingInlineEnd: '27px',
+                }, "data-testid": "MultiSelectStatusButton", onClick: handleDropdownClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [getDisplayLabel(), countBadge] })), _jsxs(ChevronContainer, Object.assign({ onClick: isHovered && internalSelectedValues.length > 0 ? handleClearAll : undefined, sx: {
+                                '&:hover': {
+                                    backgroundColor: 'transparent',
+                                },
+                            } }, { children: [_jsx(ClearIcon, { variant: variant, src: closeXIcon, alt: "clear all", sx: {
+                                        opacity: isHovered && internalSelectedValues.length > 0 ? 1 : 0,
+                                        pointerEvents: isHovered && internalSelectedValues.length > 0 ? 'auto' : 'none',
+                                    } }), _jsx(ChevronIconWrapper, Object.assign({ isVisible: !(isHovered && internalSelectedValues.length > 0) }, { children: _jsx(ChevronIcon, { disableHover: true, isActive: variant === 'active' }) }))] }))] }) })), isOpen && anchorEl && (_jsx(StyledDropdown, { open: isOpen, onClose: handleClose, anchorEl: anchorEl, allowShadows: false, style: {
+                    minWidth: dropdownWidth || 200,
+                    width: dropdownWidth || 'auto',
+                    marginTop: '6px',
+                    maxWidth: 300,
+                }, sx: {
+                    boxShadow: 'none !important',
+                    '&:hover': {
+                        boxShadow: 'none !important',
+                    },
+                }, menuItems: options.map((option) => ({
+                    label: (_jsxs(MenuItemContainer, { children: [_jsx(Checkbox, { checked: internalSelectedValues.includes(option.status), size: "small", sx: CheckboxStyles, onClick: (e) => {
+                                    var _a;
+                                    e.stopPropagation();
+                                    handleOptionToggle((_a = option.status) !== null && _a !== void 0 ? _a : '', e);
+                                } }), _jsx(CountryFlag, { code: option.flagCode || option.code, sx: { border: '1px solid white', borderRadius: '3px' } }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: option.name }))] })),
+                    onClick: (e) => {
+                        var _a;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleOptionToggle((_a = option.status) !== null && _a !== void 0 ? _a : '', e);
+                    },
+                })) }))] }));
+}
+export default memo(MultiSelectStatusButton);

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

@@ -0,0 +1,3 @@
+import MultiSelectStatusButton from './MultiSelectStatusButton';
+export default MultiSelectStatusButton;
+export type { CurrencyOption, MultiSelectStatusButtonProps } from './type';

package/build/components/MultiSelectStatusButton/index.js

@@ -0,0 +1,2 @@
+import MultiSelectStatusButton from './MultiSelectStatusButton';
+export default MultiSelectStatusButton;

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

@@ -0,0 +1,41 @@
+import type React from 'react';
+import { type Theme } from '@mui/material';
+export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown, } from '../TableHeader_V2/components/StatusButtons/style';
+export declare const StyledStatusButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    buttonVariant: 'active' | 'inActive';
+}, {}, {}>;
+export declare const FlagContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const MenuItemContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const CheckboxStyles: {
+    padding: number;
+    color: string;
+    '&.Mui-checked': {
+        color: string;
+    };
+    '&.MuiCheckbox-root': {
+        color: string;
+    };
+    '& .MuiSvgIcon-root': {
+        color: string;
+    };
+    '&.Mui-checked .MuiSvgIcon-root': {
+        color: string;
+        '& path': {
+            fill: string;
+        };
+    };
+};
+export declare const ClearIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+    variant: 'active' | 'inActive';
+}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const ChevronIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    isVisible: boolean;
+}, {}, {}>;

package/build/components/MultiSelectStatusButton/style.js

@@ -0,0 +1,71 @@
+import { Box, Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown, } from '../TableHeader_V2/components/StatusButtons/style';
+const baseButtonStyle = (theme) => (Object.assign(Object.assign({}, theme.typography.subtitle1), { borderRadius: '50px', borderWidth: '1px', borderStyle: 'solid', minWidth: '135.11px', height: '32px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px', textTransform: 'none', transition: 'background-color 0.5s ease, color 0.3s ease', paddingInline: theme.spacing(2) }));
+export const StyledStatusButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== 'buttonVariant',
+})(({ theme, buttonVariant }) => (Object.assign(Object.assign({}, baseButtonStyle(theme)), (buttonVariant === 'active'
+    ? {
+        background: theme.palette.background.gradient.shadedBlue,
+        color: theme.palette.common.white,
+    }
+    : {
+        backgroundColor: theme.palette.common.white,
+        borderColor: theme.palette.grey[100],
+        color: theme.palette.text.primary,
+        '&:hover': {
+            backgroundColor: 'white',
+        },
+    }))));
+export const FlagContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+}));
+export const MenuItemContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.3),
+    width: '100%',
+}));
+export const CheckboxStyles = {
+    padding: 0.3,
+    color: '#8C9196',
+    '&.Mui-checked': {
+        color: '#1F88D0',
+    },
+    '&.MuiCheckbox-root': {
+        color: '#8C9196',
+    },
+    '& .MuiSvgIcon-root': {
+        color: 'inherit',
+    },
+    '&.Mui-checked .MuiSvgIcon-root': {
+        color: '#1F88D0',
+        '& path': {
+            fill: '#1F88D0',
+        },
+    },
+};
+export const ClearIcon = styled('img')(({ variant }) => ({
+    width: '10px',
+    height: '10px',
+    filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
+    cursor: 'pointer',
+    position: 'absolute',
+    top: '50%',
+    left: '47%',
+    transform: 'translate(-50%, -50%)',
+    transition: 'opacity 0.2s ease-in-out',
+}));
+export const ChevronIconWrapper = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'isVisible',
+})(({ isVisible }) => ({
+    opacity: isVisible ? 1 : 0,
+    transition: 'opacity 0.2s ease-in-out',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+}));

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

@@ -0,0 +1,14 @@
+import { TableHeaderStatus } from '../../types/index.js';
+export interface CurrencyOption {
+    code: string;
+    name: string;
+    flagCode?: string;
+    status: TableHeaderStatus;
+}
+export interface MultiSelectStatusButtonProps {
+    options: CurrencyOption[];
+    selectedValues: TableHeaderStatus[];
+    onSelectionChange: (selected: TableHeaderStatus[]) => void;
+    label?: string;
+    variant?: 'active' | 'inActive';
+}

package/build/components/MultiSelectStatusButton/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -554,9 +554,9 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/StatusBar/StatusBar.d.ts

@@ -1,12 +1,17 @@
 /// <reference types="react" />
 import { AvailableStatus } from '../TableHeader_V2';
+import { CurrencyOption } from '../MultiSelectStatusButton';
 import { TableHeaderStatus } from '../../types/index.js';
 interface StatusBarProps {
     status?: TableHeaderStatus;
     availableStatuses?: AvailableStatus[];
     isFilteredIdsShown?: boolean;
     onStatusChange?: (status: TableHeaderStatus) => void;
+    onMultiSelectChange?: (status: TableHeaderStatus[]) => void;
+    currencyOptions?: CurrencyOption[];
+    selectedCurrencies?: TableHeaderStatus[];
+    enableMultiSelectCurrency?: boolean;
 }
-declare function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+declare function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, onMultiSelectChange, currencyOptions, selectedCurrencies, enableMultiSelectCurrency, }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof StatusBar>;
 export default _default;

package/build/components/StatusBar/StatusBar.js

@@ -1,32 +1,68 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { memo, useCallback } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StatusButton } from '../TableHeader_V2';
-function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status }) {
+import MultiSelectStatusButton from '../MultiSelectStatusButton';
+function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, onMultiSelectChange, currencyOptions, selectedCurrencies = [], enableMultiSelectCurrency = false, }) {
     const { t } = useTranslation();
-    const getButtonStatus = useCallback((buttonStatus) => (buttonStatus === status && !isFilteredIdsShown ? 'active' : 'inActive'), [status, isFilteredIdsShown]);
-    return (_jsx(_Fragment, { children: availableStatuses === null || availableStatuses === void 0 ? void 0 : availableStatuses.map((s) => {
-            var _a, _b;
-            if (!Array.isArray(s.status)) {
-                return (_createElement(StatusButton, Object.assign({}, s, { key: `status-button-array-${s.status}`, variant: getButtonStatus(s.status), onClick: () => {
-                        if (!Array.isArray(s.status)) {
-                            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(s.status);
-                        }
-                    } })));
-            }
-            const isCurrentStatusDropdown = (_a = s.status) === null || _a === void 0 ? void 0 : _a.includes(status || '');
-            const variant = isCurrentStatusDropdown ? 'active' : 'inActive';
-            const statusLabel = isCurrentStatusDropdown ? status : s.status[0];
-            return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, s, { label: t(statusLabel || ''), variant: variant, onButtonBodyClick: (buttonStatus) => {
-                        onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(buttonStatus);
-                    }, dropdownOptions: s.status.map((stat) => ({
-                        label: t(stat || ''),
-                        onClick: () => {
-                            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(stat);
-                        },
-                        status: stat,
-                    })) })) }, (_b = s === null || s === void 0 ? void 0 : s.status) === null || _b === void 0 ? void 0 : _b[0]));
-        }) }));
+    const [multiSelectValues, setMultiSelectValues] = useState(selectedCurrencies);
+    useEffect(() => {
+        if (status && multiSelectValues.length > 0) {
+            setMultiSelectValues([]);
+        }
+    }, [status, multiSelectValues.length]);
+    useEffect(() => {
+        if (!status) {
+            setMultiSelectValues(selectedCurrencies);
+        }
+    }, [selectedCurrencies, status]);
+    const getButtonStatus = useCallback((buttonStatus) => {
+        if (multiSelectValues.length > 0) {
+            return 'inActive';
+        }
+        return buttonStatus === status && !isFilteredIdsShown ? 'active' : 'inActive';
+    }, [status, isFilteredIdsShown, multiSelectValues.length]);
+    const handleMultiSelectChange = useCallback((selected) => {
+        setMultiSelectValues(selected);
+        onMultiSelectChange === null || onMultiSelectChange === void 0 ? void 0 : onMultiSelectChange(selected);
+        if (selected.length > 0) {
+            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange('');
+        }
+    }, [onMultiSelectChange, onStatusChange]);
+    const handleStatusChange = useCallback((newStatus) => {
+        if (multiSelectValues.length > 0) {
+            setMultiSelectValues([]);
+            onMultiSelectChange === null || onMultiSelectChange === void 0 ? void 0 : onMultiSelectChange([]);
+        }
+        onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(newStatus);
+    }, [multiSelectValues.length, onMultiSelectChange, onStatusChange]);
+    useEffect(() => {
+        if (enableMultiSelectCurrency && multiSelectValues.length === 0 && selectedCurrencies.length === 0 && !status) {
+            handleStatusChange('all');
+        }
+    }, [enableMultiSelectCurrency, multiSelectValues.length, selectedCurrencies.length, status, handleStatusChange]);
+    return (_jsxs(_Fragment, { children: [enableMultiSelectCurrency && currencyOptions && (_jsx(MultiSelectStatusButton, { options: currencyOptions, selectedValues: multiSelectValues, onSelectionChange: handleMultiSelectChange, label: t('Currencies') || 'Currencies', variant: multiSelectValues.length > 0 && !status ? 'active' : 'inActive' })), availableStatuses === null || availableStatuses === void 0 ? void 0 : availableStatuses.map((s) => {
+                var _a, _b;
+                if (!Array.isArray(s.status)) {
+                    return (_createElement(StatusButton, Object.assign({}, s, { key: `status-button-array-${s.status}`, variant: getButtonStatus(s.status), onClick: () => {
+                            if (!Array.isArray(s.status)) {
+                                handleStatusChange(s.status);
+                            }
+                        } })));
+                }
+                const isCurrentStatusDropdown = (_a = s.status) === null || _a === void 0 ? void 0 : _a.includes(status || '');
+                const variant = multiSelectValues.length > 0 ? 'inActive' : isCurrentStatusDropdown ? 'active' : 'inActive';
+                const statusLabel = isCurrentStatusDropdown ? status : s.status[0];
+                return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, s, { label: t(statusLabel || ''), variant: variant, onButtonBodyClick: (buttonStatus) => {
+                            handleStatusChange(buttonStatus);
+                        }, dropdownOptions: s.status.map((stat) => ({
+                            label: t(stat || ''),
+                            onClick: () => {
+                                handleStatusChange(stat);
+                            },
+                            status: stat,
+                        })) })) }, (_b = s === null || s === void 0 ? void 0 : s.status) === null || _b === void 0 ? void 0 : _b[0]));
+            })] }));
 }
 export default memo(StatusBar);

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

@@ -269,9 +269,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableHeader_V2/components/StatusButtons/ChevronIcon.d.ts

@@ -1,2 +1,2 @@
 import { ChevronIconProps } from './type';
-export declare function ChevronIcon({ isActive }: ChevronIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronIcon({ isActive, disableHover }: ChevronIconProps): import("react/jsx-runtime").JSX.Element;

package/build/components/TableHeader_V2/components/StatusButtons/ChevronIcon.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useTheme } from '@mui/material';
-export function ChevronIcon({ isActive }) {
+export function ChevronIcon({ isActive, disableHover }) {
     const [isHovered, setIsHovered] = useState(false);
     const theme = useTheme();
     const handleMouseEnter = () => {
-        setIsHovered(true);
+        if (!disableHover) {
+            setIsHovered(true);
+        }
     };
     const handleMouseLeave = () => {
         setIsHovered(false);

package/build/components/TableHeader_V2/components/StatusButtons/style.js

@@ -58,6 +58,7 @@ export const ChevronContainer = styled('span')(() => ({
     right: '0',
     bottom: '0',
     overflow: 'hidden',
+    transition: 'opacity 1s ease',
 }));
 export const Label = styled(Box)(({ variant }) => ({
     display: 'flex',

package/build/components/TableHeader_V2/components/StatusButtons/type.d.ts

@@ -15,8 +15,11 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
     dropdownOptions?: Array<MenuItemI & {
         status: TableHeaderStatus;
     }>;
+    render?: (status: TableHeaderStatus) => ReactNode;
+    onMultiSelectChange?: (status: TableHeaderStatus[]) => void;
 }
 export interface ChevronIconProps {
     isActive?: boolean;
+    disableHover?: boolean;
 }
 export type StatusButtonIcon = keyof typeof statusButtonIcons;

package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import lodashValues from 'lodash/values';
@@ -23,38 +23,25 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
     const onClickClear = () => {
         setValues(options.reduce((acc, { apiKey }) => (Object.assign(Object.assign({}, acc), { [apiKey]: '' })), {}));
     };
+    const isInputHasValue = (key) => values[key] !== undefined && values[key].length > 0;
     const getInputValue = (key) => (values[key] !== undefined && values[key].length ? values[key] : '');
-    const showClearButton = useMemo(() => lodashValues(values).some((x) => Boolean(x)), [values]);
-    const getFilterByApiKey = useCallback((key) => {
-        return options === null || options === void 0 ? void 0 : options.find((option) => option.apiKey === key);
-    }, [options]);
-    const isAnyInputWithValue = (group) => Object.entries(values).some(([inputKey, val]) => { var _a; return Boolean(val) && (((_a = getFilterByApiKey(inputKey)) === null || _a === void 0 ? void 0 : _a.filterGroup) !== group || !group); });
-    return (_jsxs(Wrapper, Object.assign({ component: "article", "data-testid": "ColumnFilterInputs" }, { children: [_jsx(Text, Object.assign({ component: "header", "data-testid": "ColumnFilterInputs_title" }, { children: t('filterBy') })), _jsx(InputsWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_inputs", component: "main" }, { children: options.map(({ placeholder, apiKey, isDisabled, filterGroup, render }) => {
-                    const inputValue = getInputValue(apiKey);
-                    return (_jsx(ColumnFilterInput, { apiKey: apiKey, isOnlyOneFilter: isOnlyOneFilter, setValues: setValues, options: options, value: inputValue, render: render, placeholder: placeholder, isDisabled: isDisabled, filterGroup: filterGroup, isAnyInputWithValue: isAnyInputWithValue(filterGroup) }, apiKey));
-                }) })), _jsx(Collapse, Object.assign({ in: showClearButton, component: "section", "data-testid": "ColumnFilterInputs_Collapse" }, { children: _jsx(ClearWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_ClearWrapper" }, { children: _jsx(ClearButton, Object.assign({ type: "button", onClick: onClickClear, "data-testid": "ColumnFilterInputs_ClearButton" }, { children: t('clear') })) })) })), _jsxs(Footer, Object.assign({ component: "footer", "data-testid": "ColumnFilterInputs_footer" }, { children: [_jsx(CancelButton, Object.assign({ type: "button", onClick: onClickCancel, "data-testid": "ColumnFilterInputs_CancelButton" }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ type: "button", onClick: onClickOkay, "data-testid": "ColumnFilterInputs_OkayButton" }, { children: t('okay') }))] }))] })));
-}
-function ColumnFilterInput({ apiKey, isOnlyOneFilter, setValues, value, render, placeholder, isDisabled, isAnyInputWithValue, }) {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const isInputHasValue = useMemo(() => value !== undefined && value.length > 0, [value]);
     const onClickResetInput = (key) => {
-        if (isInputHasValue)
-            setValues((prev) => (Object.assign(Object.assign({}, prev), { [key]: '' })));
+        if (isInputHasValue(key))
+            setValues(Object.assign(Object.assign({}, values), { [key]: '' }));
     };
-    const isInputDisabled = useMemo(() => {
-        const inputWithValue = value !== undefined && value !== '' && value !== null;
+    const showClearButton = useMemo(() => lodashValues(values).some((x) => Boolean(x)), [values]);
+    const getFilterByApiKey = useCallback((apiKey) => {
+        return options.find((option) => option.apiKey === apiKey);
+    }, [options]);
+    const isInputDisabled = useCallback((key, filterGroup) => {
+        const inputWithValue = (values === null || values === void 0 ? void 0 : values[key]) !== undefined && (values === null || values === void 0 ? void 0 : values[key]) !== '' && (values === null || values === void 0 ? void 0 : values[key]) !== null;
+        const isAnyInputWithValue = Object.entries(values).some(([inputKey, val]) => { var _a; return Boolean(val) && (((_a = getFilterByApiKey(inputKey)) === null || _a === void 0 ? void 0 : _a.filterGroup) !== filterGroup || !filterGroup); });
         return isOnlyOneFilter && !inputWithValue && isAnyInputWithValue;
-    }, [value, isOnlyOneFilter, isAnyInputWithValue]);
-    if (render) {
-        return (_jsx(_Fragment, { children: render({
-                anchorEl,
-                setAnchorEl,
-            }) }));
-    }
-    return (_jsx(InputStyled, { className: "input", "data-testid": "ColumnFilterInputs_InputStyled", name: apiKey, placeholder: placeholder, onChange: (e) => {
-            setValues((prev) => (Object.assign(Object.assign({}, prev), { [apiKey]: e.target.value })));
-        }, disabled: isDisabled || isInputDisabled, value: value, inputProps: { autoComplete: 'off', 'data-testid': 'ColumnFilterInputs_input' }, endAdornment: _jsx(Box, { component: "img", "data-testid": "ColumnFilterInputs_icon", "data-icon": isInputHasValue ? 'close' : 'search', src: isInputHasValue ? grayCloseIcon : searchIcon, alt: "search", className: "icon", sx: { cursor: isInputHasValue ? 'pointer' : 'default' }, onClick: () => {
-                onClickResetInput(apiKey);
-            } }) }));
+    }, [options, values, isOnlyOneFilter]);
+    return (_jsxs(Wrapper, Object.assign({ component: "article", "data-testid": "ColumnFilterInputs" }, { children: [_jsx(Text, Object.assign({ component: "header", "data-testid": "ColumnFilterInputs_title" }, { children: t('filterBy') })), _jsx(InputsWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_inputs", component: "main" }, { children: options.map(({ placeholder, apiKey, isDisabled, filterGroup, render }) => (_jsx(Fragment, { children: render ? (render()) : (_jsx(InputStyled, { className: "input", "data-testid": "ColumnFilterInputs_InputStyled", name: apiKey, placeholder: placeholder, onChange: (e) => {
+                            setValues(Object.assign(Object.assign({}, values), { [apiKey]: e.target.value }));
+                        }, disabled: isDisabled || isInputDisabled(apiKey, filterGroup), value: getInputValue(apiKey), inputProps: { autoComplete: 'off', 'data-testid': 'ColumnFilterInputs_input' }, endAdornment: _jsx(Box, { component: "img", "data-testid": "ColumnFilterInputs_icon", "data-icon": isInputHasValue(apiKey) ? 'close' : 'search', src: isInputHasValue(apiKey) ? grayCloseIcon : searchIcon, alt: "search", className: "icon", sx: { cursor: isInputHasValue(apiKey) ? 'pointer' : 'default' }, onClick: () => {
+                                onClickResetInput(apiKey);
+                            } }) })) }, apiKey))) })), _jsx(Collapse, Object.assign({ in: showClearButton, component: "section", "data-testid": "ColumnFilterInputs_Collapse" }, { children: _jsx(ClearWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_ClearWrapper" }, { children: _jsx(ClearButton, Object.assign({ type: "button", onClick: onClickClear, "data-testid": "ColumnFilterInputs_ClearButton" }, { children: t('clear') })) })) })), _jsxs(Footer, Object.assign({ component: "footer", "data-testid": "ColumnFilterInputs_footer" }, { children: [_jsx(CancelButton, Object.assign({ type: "button", onClick: onClickCancel, "data-testid": "ColumnFilterInputs_CancelButton" }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ type: "button", onClick: onClickOkay, "data-testid": "ColumnFilterInputs_OkayButton" }, { children: t('okay') }))] }))] })));
 }
 export default Inputs;

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

@@ -306,9 +306,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/index.d.ts

@@ -86,6 +86,7 @@ export { default as FlagDetails } from './FlagDetails';
 export { default as TapLoader } from './Loaders';
 export { default as Error } from './Error';
 export { default as StatusBar } from './StatusBar';
+export { default as MultiSelectStatusButton, type CurrencyOption, type MultiSelectStatusButtonProps } from './MultiSelectStatusButton';
 export * from './Chip';
 export * from './TableHeader_V2';
 export { default as RangeCalender } from './RangeCalender';

package/build/components/index.js

@@ -86,6 +86,7 @@ export { default as FlagDetails } from './FlagDetails';
 export { default as TapLoader } from './Loaders';
 export { default as Error } from './Error';
 export { default as StatusBar } from './StatusBar';
+export { default as MultiSelectStatusButton } from './MultiSelectStatusButton';
 export * from './Chip';
 export * from './TableHeader_V2';
 export { default as RangeCalender } from './RangeCalender';

package/build/types/table.d.ts

@@ -70,7 +70,7 @@ export interface IColumnFilterOption {
     options?: IColumnFilterOption[];
     isDisabled?: boolean;
     filterGroup?: string;
-    render?: (v: any) => React.ReactNode;
+    render?: () => React.ReactNode;
 }
 export type IColumnListFilterOption = Omit<IColumnFilterOption, 'apiKey' | 'options'> & {
     value: string;

package/build/utils/currency.d.ts

@@ -10,22 +10,14 @@ export declare const isIntegerAmount: (charge: number) => boolean;
 export declare const isDecimalWithOneDigit: (charge: number) => boolean;
 export declare const hasOnlyOneDigitAfterDecimal: (charge: number) => boolean;
 export declare const formatCurrencyWithInput: (charge: number, selectedCurrency: CurrencyCodes) => string;
-export declare function formatAmount(amount: number, decimalPlaces?: number): {
+export declare function formatAmount(amount: number, decimal?: number): {
     integerAmount: string;
     decimalAmount: string;
     fullAmount: string;
-    raw: {
-        integer: number;
-        decimal: number;
-    };
 };
 export declare function formatAmountWithCurrency(amount?: number, currency?: string): {
     integerAmount: string;
     decimalAmount: string;
     fullAmount: string;
-    raw: {
-        integer: number;
-        decimal: number;
-    };
 };
 export declare const getSupportedCurrencies: (currencies: Currency[]) => Currency[];

package/build/utils/currency.js

@@ -55,33 +55,24 @@ export const formatCurrencyWithInput = (charge, selectedCurrency) => {
     }
     return chargeString;
 };
-function buildFormattedAmount(integer, decimal) {
-    return Number(decimal) > 0 ? `${integer}.${decimal}` : integer;
-}
-function getRawAmount(integer, decimalStr, isNegative) {
-    const sign = isNegative ? -1 : 1;
-    const decimal = Number(`0.${decimalStr}`) * sign;
-    return {
-        integer: integer * sign,
-        decimal,
-    };
-}
-export function formatAmount(amount, decimalPlaces = 2) {
-    var _a;
-    const isNegative = amount < 0;
-    amount = Math.abs(amount);
-    const integerAmount = Math.floor(amount);
-    let decimalStr = (amount - integerAmount).toString().split('.')[1] || '0';
-    decimalStr = decimalStr.padEnd(decimalPlaces, '0').slice(0, decimalPlaces);
-    const formattedIntegerAmount = Intl.NumberFormat('en-US').format(integerAmount);
-    const decimalStrWithoutRounding = (_a = amount.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.slice(0, decimalPlaces);
-    const fullAmount = buildFormattedAmount(formattedIntegerAmount, decimalStrWithoutRounding);
-    const raw = getRawAmount(integerAmount, decimalStr, isNegative);
+export function formatAmount(amount, decimal = 2) {
+    const num = parseFloat(amount.toString());
+    if (isNaN(num)) {
+        const [integerAmount, decimalAmount] = (0).toFixed(decimal).split('.');
+        const fullAmount = `${integerAmount}.${decimalAmount}`;
+        return {
+            integerAmount,
+            decimalAmount,
+            fullAmount,
+        };
+    }
+    const fixedNumber = num.toFixed(decimal);
+    const [integerPart, decimalPart] = fixedNumber.split('.');
+    const formattedInteger = parseInt(integerPart).toLocaleString();
     return {
-        integerAmount: formattedIntegerAmount,
-        decimalAmount: decimalStr,
-        fullAmount,
-        raw,
+        integerAmount: formattedInteger,
+        decimalAmount: decimalPart,
+        fullAmount: `${formattedInteger}.${decimalPart}`,
     };
 }
 export function formatAmountWithCurrency(amount = 0, currency = '') {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.97",
+  "version": "0.0.99-amount-fix",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",