@tap-payments/os-micro-frontend-shared 0.0.233-test.20 → 0.0.233-test.22

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { MultiSelectStatusButtonProps } from './type';
-declare function MultiSelectStatusButton({ options, selectedValues, onSelectionChange, label, variant, render, }: MultiSelectStatusButtonProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -1,25 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useState, useRef } from 'react';
-import { Typography, ClickAwayListener, Box } from '@mui/material';
+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 { formatNumber } from '../../utils/index.js';
 import { closeXIcon } from '../../constants/index.js';
-import { ChevronContainer, Label, LabelWrapper, StyledStatusButton, ClearIcon, ChevronIconWrapper, } from './style';
-import Menu from '../Menu';
-import MenuItem from '../MenuItem';
-function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChange, label, variant = 'inActive', render, }) {
+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);
-        setInternalSelectedValues(selectedValues);
+        setDropdownWidth(0);
     };
     const handleClearAll = (event) => {
         event.stopPropagation();
@@ -27,33 +46,47 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
         setInternalSelectedValues([]);
         onSelectionChange([]);
     };
-    const isOptionSelected = (optionStatus) => internalSelectedValues.includes(optionStatus);
-    const handleOptionToggle = (event, optionStatus) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (isOptionSelected(optionStatus)) {
-            setInternalSelectedValues(internalSelectedValues.filter((status) => status !== optionStatus));
-            return;
+    const handleOptionToggle = (optionStatus, event) => {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
         }
-        setInternalSelectedValues([...internalSelectedValues, optionStatus]);
+        const newSelection = internalSelectedValues.includes(optionStatus)
+            ? internalSelectedValues.filter((status) => status !== optionStatus)
+            : [...internalSelectedValues, optionStatus];
+        setInternalSelectedValues(newSelection);
     };
-    return (_jsxs(Box, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { 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: {
-                                    '&: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' }) }))] }))] }) })) })), _jsx(Menu, Object.assign({ anchorEl: anchorEl, open: isOpen, sx: {
-                    minWidth: 200,
-                    width: 'auto',
-                    marginTop: '8px',
+    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: {
+                                '&: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,
-                } }, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ isSelected: isOptionSelected(option.status), onClick: (e) => {
+                }, 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);
+                                } }), option.render ? option.render() : _jsx(Typography, Object.assign({ variant: "body2" }, { children: option.name }))] })),
+                    onClick: (e) => {
                         var _a;
-                        handleOptionToggle(e, (_a = option.status) !== null && _a !== void 0 ? _a : '');
-                    } }, { children: render ? render() : _jsx(Typography, Object.assign({ variant: "body2" }, { children: option.name })) })))) }))] }));
+                        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

@@ -5,6 +5,7 @@ export interface CurrencyOption {
     name: string;
     flagCode?: string;
     status: TableHeaderStatus;
+    render?: () => JSX.Element;
 }
 export interface MultiSelectStatusButtonProps {
     options: CurrencyOption[];
@@ -12,5 +13,4 @@ export interface MultiSelectStatusButtonProps {
     onSelectionChange: (selected: TableHeaderStatus[]) => void;
     label?: string;
     variant?: 'active' | 'inActive';
-    render?: () => JSX.Element;
 }

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.233-test.20",
-  "testVersion": 20,
+  "version": "0.0.233-test.22",
+  "testVersion": 22,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",