@tap-payments/os-micro-frontend-shared 0.0.100 → 0.0.102

package/build/components/CurrencyIcon/CurrencyIcon.js

@@ -1,8 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { SARIconImage } from '../../constants/index.js';
+import { DirhamIconImage, SARIconImage } from '../../constants/index.js';
 import { StyleCurrencyIcon } from './style';
 const currencyMap = {
     SAR: SARIconImage,
+    AED: DirhamIconImage,
 };
 function CurrencyIcon({ currency, fontSize }) {
     const currencyIcon = currencyMap[currency];

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/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/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/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/constants/assets.d.ts

@@ -2,6 +2,7 @@ export declare const lightUrl: string;
 export declare const appBaseUrl: string;
 export declare const functionBaseUrl: string;
 export declare const SARIconImage: string;
+export declare const DirhamIconImage: string;
 export declare const abandonedIcon: string;
 export declare const abandonedYellowIcon: string;
 export declare const chevronDownIcon: string;

package/build/constants/assets.js

@@ -3,6 +3,7 @@ export const lightUrl = `${cdnUrl}/icons/dashboard/light`;
 export const appBaseUrl = `${lightUrl}/other`;
 export const functionBaseUrl = `${lightUrl}/function`;
 export const SARIconImage = `${lightUrl}/currency/sar.svg`;
+export const DirhamIconImage = `${lightUrl}/currency/dirham.svg`;
 export const abandonedIcon = `${lightUrl}/abandoned.svg`;
 export const abandonedYellowIcon = `${lightUrl}/abandonedYellow.svg`;
 export const chevronDownIcon = `${lightUrl}/chevron-down.svg`;

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.100",
+  "version": "0.0.102",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",