@tap-payments/os-micro-frontend-shared 0.0.234-test.2-test.3 → 0.0.235

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -1,12 +1,15 @@
 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 '../StatusButton/ChevronIcon';
 import StyledBadge, { BadgeVariants } from '../CountBadge';
+import CountryFlag from '../CountryFlag';
 import { formatNumber } from '../../utils/index.js';
-import { closeXIcon } from '../../constants/index.js';
+import { closeXIcon, SUPPORTED_CURRENCY_DETAILS } 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);
@@ -54,9 +57,13 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
             : [...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), disabled: !options.length }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: "11px", variant: "inherit" }, { children: label })), _jsx(StyledBadge, Object.assign({ pointer: true, variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(selectedValues.length > 0 ? selectedValues.length : options.length) }))] })), _jsxs(ChevronContainer, Object.assign({ onClick: isHovered && internalSelectedValues.length > 0 ? handleClearAll : undefined, sx: {
+                }, "data-testid": "MultiSelectStatusButton", onClick: handleDropdownClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), disabled: !options.length }, { 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',
                                 },
@@ -73,18 +80,21 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
                     '&: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);
-                                } }), option.render ? option.render() : _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);
-                    },
-                })) }))] }));
+                }, menuItems: options.map((option) => {
+                    var _a;
+                    return ({
+                        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: ((_a = SUPPORTED_CURRENCY_DETAILS[option.code]) === null || _a === void 0 ? void 0 : _a.country) || '', 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/type.d.ts

@@ -1,11 +1,9 @@
-/// <reference types="react" />
 import { TableHeaderStatus } from '../../types/index.js';
 export interface CurrencyOption {
     code: string;
     name: string;
     flagCode?: string;
     status: TableHeaderStatus;
-    render?: () => JSX.Element;
 }
 export interface MultiSelectStatusButtonProps {
     options: CurrencyOption[];

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

@@ -4,7 +4,7 @@ interface StatusBarProps<IStatus extends TableHeaderStatus | TableHeaderStatus[]
     status?: IStatus;
     availableStatuses?: AvailableStatus<IStatus>[];
     isFilteredIdsShown?: boolean;
-    onStatusChange?: (status: IStatus) => void;
+    onStatusChange?: (status?: IStatus) => void;
 }
 declare function StatusBar<IStatus extends TableHeaderStatus | TableHeaderStatus[] = undefined>({ isFilteredIdsShown, onStatusChange, availableStatuses, status, }: StatusBarProps<IStatus>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof StatusBar;

package/build/components/StatusBar/StatusBar.js

@@ -20,19 +20,19 @@ function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, stat
     const getButtonStatus = useCallback((buttonStatus) => {
         return buttonStatus === status && !isFilteredIdsShown ? 'active' : 'inActive';
     }, [status, isFilteredIdsShown]);
-    const handleChange = useCallback((selected) => {
+    const handleStatusChange = useCallback((selected) => {
         onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(selected);
     }, [onStatusChange]);
     return (_jsx(_Fragment, { children: availableStatuses === null || availableStatuses === void 0 ? void 0 : availableStatuses.map((_a, index) => {
             var _b, _c;
             var { render } = _a, s = __rest(_a, ["render"]);
             if (render) {
-                return _jsx(Fragment, { children: render(status, handleChange) }, `custom-status-slot-${index}`);
+                return (_jsx(Fragment, { children: render({ status: status, onChange: handleStatusChange }, Object.assign(Object.assign({}, s), { index })) }, `custom-status-slot-${index}`));
             }
             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)) {
-                            handleChange(s.status);
+                            handleStatusChange(s.status);
                         }
                     } })));
             }
@@ -40,11 +40,11 @@ function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, stat
             const variant = isCurrentStatusDropdown ? 'active' : 'inActive';
             const statusLabel = isCurrentStatusDropdown && !isMultiSelection ? status : s.status[0];
             return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, s, { label: t(statusLabel || ''), variant: variant, onButtonBodyClick: (buttonStatus) => {
-                        handleChange(buttonStatus);
+                        handleStatusChange(buttonStatus);
                     }, dropdownOptions: s.status.map((stat) => ({
                         label: t(stat || ''),
                         onClick: () => {
-                            handleChange(stat);
+                            handleStatusChange(stat);
                         },
                         status: stat,
                     })) })) }, (_c = s === null || s === void 0 ? void 0 : s.status) === null || _c === void 0 ? void 0 : _c[0]));

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

@@ -2,6 +2,11 @@
 import { StatusButtonProps } from '../StatusButton';
 import { TableHeaderStatus } from '../../types/index.js';
 export type AvailableStatus<T extends TableHeaderStatus | TableHeaderStatus[] = undefined> = StatusButtonProps & {
-    status: T;
-    render?: <IStatus extends T>(status: IStatus, onChange: (selected: AvailableStatus<T>['status']) => void) => React.ReactNode;
+    status?: T;
+    render?: <IStatus extends T>(controls: {
+        status: IStatus;
+        onChange: (selected?: AvailableStatus<T>['status']) => void;
+    }, options?: Omit<AvailableStatus<T>, 'render'> & {
+        index: number;
+    }) => React.ReactNode;
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.234-test.2-test.3",
-  "testVersion": 3,
+  "version": "0.0.235",
+  "testVersion": 19,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}