@tap-payments/os-micro-frontend-shared 0.0.228-test.17 → 0.0.229-test.17

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

@@ -1,3 +1,3 @@
 import { IProps } from './type';
-declare function Dropdown({ open, menuItems, anchorEl, onClose, footer, selected, multiple, allowShadows, ...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

@@ -11,33 +11,33 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider, Box, useTheme } from '@mui/material';
-import { StyledListItemText, StyledMenu, StyledListItemIcon, StyledMenuItem, CheckboxStyled } from './styles';
+import { StyledListItemText, StyledMenu, StyledListItemIcon, StyledMenuItem } from './styles';
 function Dropdown(_a) {
-    var { open, menuItems, anchorEl, onClose, footer, selected, multiple, allowShadows = true } = _a, props = __rest(_a, ["open", "menuItems", "anchorEl", "onClose", "footer", "selected", "multiple", "allowShadows"]);
+    var { open, menuItems, anchorEl, onClose, selected, allowShadows = true } = _a, props = __rest(_a, ["open", "menuItems", "anchorEl", "onClose", "selected", "allowShadows"]);
     const theme = useTheme();
-    return (_jsxs(StyledMenu, Object.assign({ open: open, anchorEl: anchorEl, onClose: onClose, onContextMenu: (e) => {
+    return (_jsx(StyledMenu, Object.assign({ open: open, anchorEl: anchorEl, onClose: onClose, onContextMenu: (e) => {
             e.preventDefault();
             onClose();
-        } }, props, { className: "tap-dropdown", minWidth: (anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth) || 'auto' }, { children: [menuItems.map((item, idx) => {
-                if (item.name === 'divider') {
-                    return _jsx(Divider, { sx: { margin: '0 !important' } }, `${item.label}-${idx}`);
-                }
-                return (_jsx("div", { children: item.label && (_jsxs(StyledMenuItem, Object.assign({ alwaysShowRightAction: item.alwaysShowRightAction, onClick: (e) => {
-                            if (item.onClick)
-                                item.onClick(e);
-                        }, onContextMenu: item.onRightClick, selected: item.selected, sx: Object.assign(Object.assign({ '&:hover': {
-                                backgroundColor: 'transparent',
-                                boxShadow: allowShadows ? theme.shadows[10] : 'none',
-                                '& .sandbox-Icon': {
-                                    display: 'none',
-                                },
-                                '& .close-Icon': {
-                                    display: 'block !important',
-                                },
-                            } }, (idx === selected && {
+        } }, props, { className: "tap-dropdown", minWidth: (anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth) || 'auto' }, { children: menuItems.map((item, idx) => {
+            if (item.name === 'divider') {
+                return _jsx(Divider, { sx: { margin: '0 !important' } }, `${item.label}-${idx}`);
+            }
+            return (_jsx("div", { children: item.label && (_jsxs(StyledMenuItem, Object.assign({ alwaysShowRightAction: item.alwaysShowRightAction, onClick: (e) => {
+                        if (item.onClick)
+                            item.onClick(e);
+                    }, onContextMenu: item.onRightClick, selected: item.selected, sx: Object.assign({ '&:hover': {
                             backgroundColor: 'transparent',
                             boxShadow: allowShadows ? theme.shadows[10] : 'none',
-                        })), item.sx) }, { children: [item.icon && _jsx(StyledListItemIcon, { children: item.icon }), multiple && _jsx(CheckboxStyled, { size: "small", checked: item.selected }), _jsx(StyledListItemText, { children: item.label }), _jsx(Box, Object.assign({ className: item.alwaysShowRightAction ? '' : 'menu-right-action' }, { children: item.rightAction && item.rightAction }))] }))) }, `${item.label}-${idx}`));
-            }), footer] })));
+                            '& .sandbox-Icon': {
+                                display: 'none',
+                            },
+                            '& .close-Icon': {
+                                display: 'block !important',
+                            },
+                        } }, (idx === selected && {
+                        backgroundColor: 'transparent',
+                        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}`));
+        }) })));
 }
 export default Dropdown;

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

@@ -16,4 +16,3 @@ export declare const StyledOption: import("@emotion/styled").StyledComponent<imp
 export declare const StyledSelectComponent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 export declare const StyledMenuTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 export declare const StyledIconForDropDown: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const CheckboxStyled: import("@emotion/styled").StyledComponent<import("@mui/material").CheckboxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/DropdownMenu/styles.js

@@ -1,5 +1,4 @@
-import Checkbox from '../Checkbox';
-import { ListItemText, Menu, MenuItem, styled, ListItemIcon, Select, alpha } from '@mui/material';
+import { ListItemText, Menu, MenuItem, styled, ListItemIcon, Select } from '@mui/material';
 export const StyledMenuItem = styled(MenuItem, {
     shouldForwardProp: (prop) => prop !== 'alwaysShowRightAction',
 })(({ theme, alwaysShowRightAction }) => ({
@@ -142,17 +141,3 @@ export const StyledIconForDropDown = styled('img')(() => ({
     verticalAlign: 'middle',
     boxSizing: 'border-box',
 }));
-export const CheckboxStyled = styled(Checkbox)(({ theme }) => ({
-    padding: 0,
-    paddingRight: '4px',
-    width: '14px !important',
-    svg: {
-        width: '12px !important',
-        height: '12px !important',
-    },
-    '&.Mui-disabled': {
-        '[data-testid="IndeterminateCheckBoxIcon"]': {
-            fill: alpha(theme.palette.common.black, 0.26),
-        },
-    },
-}));

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

@@ -1,5 +1,4 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { type SxProps, type Theme } from '@mui/material/styles';
 export interface MenuItemI {
     label?: string | null | ReactNode;
     name?: string;
@@ -10,7 +9,6 @@ export interface MenuItemI {
     selected?: boolean;
     rightAction?: ReactNode;
     alwaysShowRightAction?: boolean;
-    sx?: SxProps<Theme>;
 }
 export interface IProps {
     open: boolean;
@@ -20,6 +18,4 @@ export interface IProps {
     style?: CSSProperties;
     selected?: number;
     allowShadows?: boolean;
-    multiple?: boolean;
-    footer?: React.ReactNode;
 }

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

@@ -1,12 +1,17 @@
 /// <reference types="react" />
+import { CurrencyOption } from '../MultiSelectStatusButton';
 import { TableHeaderStatus } from '../../types/index.js';
 import { AvailableStatus } from './type';
 interface StatusBarProps {
-    status?: TableHeaderStatus | TableHeaderStatus[];
+    status?: TableHeaderStatus;
     availableStatuses?: AvailableStatus[];
     isFilteredIdsShown?: boolean;
-    onStatusChange?: (status: StatusBarProps['status']) => void;
+    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,53 +1,68 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, memo, useCallback, useMemo } 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 MultiSelectStatusButton from '../MultiSelectStatusButton';
 import StatusButton from '../StatusButton';
-function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, }) {
+function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, onMultiSelectChange, currencyOptions, selectedCurrencies = [], enableMultiSelectCurrency = false, }) {
     const { t } = useTranslation();
-    const isMultiSelection = useMemo(() => Array.isArray(status), [status]);
+    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]);
-    const handleChange = 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}`);
-            }
-            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);
-                        }
-                    } })));
-            }
-            const isCurrentStatusDropdown = !isMultiSelection && ((_b = s.status) === null || _b === void 0 ? void 0 : _b.includes(status || ''));
-            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);
-                    }, dropdownOptions: s.status.map((stat) => ({
-                        label: t(stat || ''),
-                        onClick: () => {
-                            handleChange(stat);
-                        },
-                        status: stat,
-                    })) })) }, (_c = s === null || s === void 0 ? void 0 : s.status) === null || _c === void 0 ? void 0 : _c[0]));
-        }) }));
+    }, [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/StatusBar/index.d.ts

@@ -1,3 +1,2 @@
 import StatusBar from './StatusBar';
 export default StatusBar;
-export { type AvailableStatus } from './type';

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

@@ -1,7 +1,5 @@
-/// <reference types="react" />
 import { StatusButtonProps } from '../StatusButton';
 import { TableHeaderStatus } from '../../types/index.js';
 export type AvailableStatus<T = undefined> = StatusButtonProps & {
     status: T | TableHeaderStatus | (TableHeaderStatus | T)[];
-    render?: (status: AvailableStatus['status'], onChange: (selected: AvailableStatus['status']) => void) => React.ReactNode;
 };

package/build/components/StatusButton/StatusButton.js

@@ -19,7 +19,7 @@ import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown
 import { statusButtonIcons } from './constant';
 const StatusButton = memo((props) => {
     var _a;
-    const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, multiple, onButtonBodyClick, onConfirm, onCancel } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "multiple", "onButtonBodyClick", "onConfirm", "onCancel"]);
+    const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
     const [buttonClicks, setButtonClicks] = useState(0);
     const { t } = useTranslation();
     const buttonRef = useRef(null);
@@ -61,24 +61,14 @@ const StatusButton = memo((props) => {
     const handleMenuItemClick = useCallback((item) => (e) => {
         var _a;
         (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
-        if (multiple)
-            return;
         setSelectedStatus(item.status);
         handleDropdownClose();
-    }, [handleDropdownClose, multiple]);
-    const handleConfirm = useCallback(() => {
-        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
-        handleDropdownClose();
-    }, [onConfirm, handleDropdownClose]);
-    const handleCancel = useCallback(() => {
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-        handleDropdownClose();
-    }, [onCancel, handleDropdownClose]);
+    }, [handleDropdownClose]);
     const menuItems = useMemo(() => (dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((item) => (Object.assign(Object.assign({}, item), { onClick: handleMenuItemClick(item) })))) || [], [dropdownOptions, handleMenuItemClick]);
     const ButtonComponent = statusButtonVariants[variant];
     const displayLabel = selectedStatus ? t(selectedStatus) : label;
     return (_jsxs(_Fragment, { children: [_jsx(ButtonComponent, Object.assign({ "data-testid": "StatusButton" }, restProps, { ref: buttonRef, onClick: handleButtonClick, sx: Object.assign({}, (hasDropdown && {
                     paddingInlineEnd: '27px',
-                })) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, displayLabel, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] }) })), isDropdownOpen && hasDropdown && (_jsx(StyledDropdown, { multiple: multiple, open: isDropdownOpen, onClose: handleDropdownClose, anchorEl: anchorEl, menuItems: menuItems }))] }));
+                })) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, displayLabel, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] }) })), isDropdownOpen && hasDropdown && (_jsx(StyledDropdown, { open: isDropdownOpen, onClose: handleDropdownClose, anchorEl: anchorEl, menuItems: menuItems }))] }));
 });
 export default StatusButton;

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

@@ -16,9 +16,6 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
     dropdownOptions?: Array<MenuItemI & {
         status: TableHeaderStatus;
     }>;
-    multiple?: boolean;
-    onConfirm?: () => void;
-    onCancel?: () => void;
 }
 export interface ChevronIconProps {
     isActive?: boolean;

package/build/components/Widget/List.js

@@ -18,6 +18,6 @@ import { useScrollWithShadow } from './useScrollWithShadow';
 function List(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);
     const { onScrollHandler, showShadow } = useScrollWithShadow();
-    return (_jsxs(ListStyled, Object.assign({ component: "ul", "data-testid": "Widget_List", onScroll: onScrollHandler }, props, { children: [children, showShadow && _jsx(Box, { component: "img", src: listShadowBg, sx: { width: '100%', position: 'fixed', bottom: 0 } })] })));
+    return (_jsxs(ListStyled, Object.assign({ component: "ul", "data-testid": "Widget_List", onScroll: onScrollHandler }, props, { children: [children, showShadow && _jsx(Box, { component: "img", src: listShadowBg, sx: { width: '100%', position: 'fixed', bottom: 0, pointerEvents: 'none' } })] })));
 }
 export default memo(List);

package/build/components/index.d.ts

@@ -87,7 +87,7 @@ export { default as OTPInput } from './OTPInput';
 export { default as FlagDetails } from './FlagDetails';
 export { default as TapLoader } from './Loaders';
 export { default as Error } from './Error';
-export { default as StatusBar, type AvailableStatus } from './StatusBar';
+export { default as StatusBar } from './StatusBar';
 export { default as MultiSelectStatusButton, type CurrencyOption, type MultiSelectStatusButtonProps } from './MultiSelectStatusButton';
 export * from './Chip';
 export * from './StatusGroupChips';

package/build/constants/currency.js

@@ -16,6 +16,6 @@ export const SUPPORTED_CURRENCY_DETAILS = {
 };
 export const SUPPORTED_CURRENCY_CODES = ['SAR', 'KWD', 'OMR', 'EGP', 'BHD', 'USD', 'AED', 'QAR', 'PKR', 'JOD', 'EUR', 'INR', 'GBP'];
 export const CATEGORIZED_CURRENCY_CODES = {
-    regional: ['SAR', 'KWD', 'OMR', 'EGP', 'BHD', 'AED', 'QAR', 'PKR', 'JOD', 'INR'],
-    global: ['USD', 'GBP', 'EUR'],
+    regional: ['SAR', 'KWD', 'OMR', 'EGP', 'BHD', 'AED', 'QAR', 'JOD'],
+    global: ['USD', 'GBP', 'EUR', 'PKR', 'INR'],
 };

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.228-test.17",
+  "version": "0.0.229-test.17",
   "testVersion": 17,
   "type": "module",
   "main": "build/index.js",