@tap-payments/os-micro-frontend-shared 0.0.92-multi-select-status-button-v1 → 0.0.92-multi-select-status-button-v3

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -7,7 +7,7 @@ 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, FlagContainer, MenuItemContainer, CheckboxStyles, StyledStatusButton, ClearIcon, } from './style';
+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);
@@ -34,6 +34,10 @@ function MultiSelectStatusButton({ options, selectedValues, onSelectionChange, l
         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);
     };
@@ -52,27 +56,21 @@ function MultiSelectStatusButton({ options, selectedValues, onSelectionChange, l
             ? internalSelectedValues.filter((status) => status !== optionStatus)
             : [...internalSelectedValues, optionStatus];
         setInternalSelectedValues(newSelection);
-        onSelectionChange(newSelection);
     };
     const getDisplayLabel = () => {
-        if (internalSelectedValues.length === 0) {
-            return (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: "11px", variant: "inherit" }, { children: label || t('Select currencies') })));
-        }
-        if (internalSelectedValues.length === 1) {
-            const selectedOption = options.find((opt) => opt.status === internalSelectedValues[0]);
-            return selectedOption ? (_jsxs(FlagContainer, { children: [_jsx(CountryFlag, { code: selectedOption.flagCode || selectedOption.code, sx: { border: '1px solid white', borderRadius: '3px' } }), _jsx(Typography, Object.assign({ variant: "inherit" }, { children: selectedOption.name }))] })) : (internalSelectedValues[0]);
-        }
-        const firstOption = options.find((opt) => opt.status === internalSelectedValues[0]);
-        return firstOption ? (_jsxs(FlagContainer, { children: [_jsx(CountryFlag, { code: firstOption.flagCode || firstOption.code, sx: { border: '1px solid white', borderRadius: '3px' } }), _jsx(Typography, Object.assign({ variant: "inherit" }, { children: firstOption.name }))] })) : (internalSelectedValues[0]);
+        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(internalSelectedValues.length > 0 ? internalSelectedValues.length : options.length) })));
+    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] })), _jsx(ChevronContainer, Object.assign({ onClick: isHovered && internalSelectedValues.length > 0 ? handleClearAll : undefined, sx: {
+                }, "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: isHovered && internalSelectedValues.length > 0 ? (_jsx(ClearIcon, { variant: variant, src: closeXIcon, alt: "clear all" })) : (_jsx(ChevronIcon, { disableHover: true, isActive: variant === 'active' })) }))] }) })), isOpen && anchorEl && (_jsx(StyledDropdown, { open: isOpen, onClose: handleClose, anchorEl: anchorEl, allowShadows: false, style: {
+                            } }, { 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',

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

@@ -34,3 +34,8 @@ export declare const CheckboxStyles: {
 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

@@ -1,7 +1,7 @@
 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: 'none', paddingInline: theme.spacing(2) }));
+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'
@@ -56,4 +56,16 @@ export const ClearIcon = styled('img')(({ variant }) => ({
     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/StatusBar/index.d.ts

@@ -1,3 +1,2 @@
 import StatusBar from './StatusBar';
 export default StatusBar;
-export { default as StatusBarExample } from './example';

package/build/components/StatusBar/index.js

@@ -1,3 +1,2 @@
 import StatusBar from './StatusBar';
 export default StatusBar;
-export { default as StatusBarExample } from './example';

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/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.92-multi-select-status-button-v1",
+  "version": "0.0.92-multi-select-status-button-v3",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

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

@@ -1,2 +0,0 @@
-declare function StatusBarExample(): import("react/jsx-runtime").JSX.Element;
-export default StatusBarExample;

package/build/components/StatusBar/example.js

@@ -1,72 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box } from '@mui/material';
-import StatusBar from './StatusBar';
-function StatusBarExample() {
-    const [selectedStatus, setSelectedStatus] = useState('all');
-    const [selectedCurrencies, setSelectedCurrencies] = useState([]);
-    const currencyOptions = [
-        {
-            code: 'SAR',
-            name: 'SAR',
-            flagCode: 'SA',
-            status: 'SAR',
-        },
-        {
-            code: 'USD',
-            name: 'USD',
-            flagCode: 'US',
-            status: 'USD',
-        },
-        {
-            code: 'EUR',
-            name: 'Euro',
-            flagCode: 'EU',
-            status: 'eur',
-        },
-        {
-            code: 'GBP',
-            name: 'GBP',
-            flagCode: 'GB',
-            status: 'gbp',
-        },
-        {
-            code: 'JPY',
-            name: 'JPY',
-            flagCode: 'JP',
-            status: 'jpy',
-        },
-    ];
-    const availableStatuses = [
-        {
-            status: 'all',
-            label: 'All',
-            badgeCount: 150,
-        },
-        {
-            status: 'completed',
-            label: 'Completed',
-            badgeCount: 85,
-        },
-        {
-            status: 'pending',
-            label: 'Pending',
-            badgeCount: 45,
-        },
-        {
-            status: ['initiated', 'captured', 'authorized'],
-            label: 'Processing',
-            badgeCount: 20,
-        },
-    ];
-    const handleStatusChange = (status) => {
-        console.log('Status changing from:', selectedStatus, 'to:', status);
-        setSelectedStatus(status);
-    };
-    const handleMultiSelectChange = (currencies) => {
-        setSelectedCurrencies(currencies);
-        console.log('Selected currencies:', currencies);
-    };
-    return (_jsxs(Box, Object.assign({ sx: { padding: 2 } }, { children: [_jsxs(Box, Object.assign({ sx: { marginBottom: 2 } }, { children: [_jsx("h3", { children: "Enhanced StatusBar with Multiselect Currency Dropdown" }), _jsx("p", { children: "This example demonstrates the enhanced StatusBar component with multiselect currency functionality. The currency dropdown shows checkboxes with currency flags and names." }), _jsxs("p", { children: [_jsx("strong", { children: "Features:" }), _jsxs("ul", { children: [_jsx("li", { children: "Button body click behavior same as existing StatusButton" }), _jsx("li", { children: "Dropdown opens only when clicking the chevron icon" }), _jsx("li", { children: "Count badge shows number of selected currencies" }), _jsx("li", { children: "Active state styling matches existing StatusButton" })] })] })] })), _jsx(Box, Object.assign({ sx: { display: 'flex', gap: 1, flexWrap: 'wrap' } }, { children: _jsx(StatusBar, { status: selectedStatus, availableStatuses: availableStatuses, isFilteredIdsShown: false, onStatusChange: handleStatusChange, onMultiSelectChange: handleMultiSelectChange, enableMultiSelectCurrency: true, currencyOptions: currencyOptions, selectedCurrencies: selectedCurrencies }) })), _jsxs(Box, Object.assign({ sx: { marginTop: 2 } }, { children: [_jsx("h4", { children: "Current State:" }), _jsxs("p", { children: [_jsx("strong", { children: "Selected Status:" }), " ", _jsx("code", { children: selectedStatus })] }), _jsxs("p", { children: [_jsx("strong", { children: "Selected Currencies:" }), " ", selectedCurrencies.length > 0 ? selectedCurrencies.join(', ') : 'None'] }), _jsxs("p", { children: [_jsx("strong", { children: "Note:" }), " Only one status button should be active at a time. The active button will have a blue background."] })] }))] })));
-}
-export default StatusBarExample;