@tap-payments/os-micro-frontend-shared 0.0.232 → 0.0.233-test.21

package/build/components/MenuItem/style.js

@@ -17,7 +17,6 @@ export const MenuItemStyled = styled(Box, { shouldForwardProp: (props) => props
 }));
 export const CheckboxStyled = styled(Checkbox)(({ theme }) => ({
     padding: 0,
-    paddingRight: '4px',
     width: '14px !important',
     svg: {
         width: '12px !important',

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -1,45 +1,25 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState, useRef } from 'react';
+import { Typography, ClickAwayListener, Box } 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, SUPPORTED_CURRENCY_DETAILS } from '../../constants/index.js';
-import { ChevronContainer, Label, LabelWrapper, StyledDropdown, MenuItemContainer, CheckboxStyles, StyledStatusButton, ClearIcon, ChevronIconWrapper, } from './style';
+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' }) {
-    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);
+        setInternalSelectedValues(selectedValues);
     };
     const handleClearAll = (event) => {
         event.stopPropagation();
@@ -47,54 +27,33 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
         setInternalSelectedValues([]);
         onSelectionChange([]);
     };
-    const handleOptionToggle = (optionStatus, event) => {
-        if (event) {
-            event.stopPropagation();
-            event.preventDefault();
+    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 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') })));
+        setInternalSelectedValues([...internalSelectedValues, optionStatus]);
     };
-    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: [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',
+    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',
                     maxWidth: 300,
-                }, sx: {
-                    boxShadow: 'none !important',
-                    '&:hover': {
-                        boxShadow: 'none !important',
-                    },
-                }, 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);
-                        },
-                    });
-                }) }))] }));
+                } }, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ isSelected: isOptionSelected(option.status), onClick: (e) => {
+                        var _a;
+                        handleOptionToggle(e, (_a = option.status) !== null && _a !== void 0 ? _a : '');
+                    } }, { children: !!(option === null || option === void 0 ? void 0 : option.render) ? option === null || option === void 0 ? void 0 : option.render() : _jsx(Typography, Object.assign({ variant: "body2" }, { children: option.name })) })))) }))] }));
 }
 export default memo(MultiSelectStatusButton);

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

@@ -1,9 +1,11 @@
+/// <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/TableCells/CustomCells/ReferenceCell/ReferenceCell.d.ts

@@ -1,3 +1,3 @@
 import type { ReferenceCellProps } from './type';
-declare function ReferenceCell({ isTextShown, tableMode, ...props }: ReferenceCellProps): import("react/jsx-runtime").JSX.Element;
+declare function ReferenceCell({ isTextShown, ...props }: ReferenceCellProps): import("react/jsx-runtime").JSX.Element;
 export default ReferenceCell;

package/build/components/TableCells/CustomCells/ReferenceCell/ReferenceCell.js

@@ -16,12 +16,10 @@ import startCase from 'lodash/startCase';
 import Tooltip from '../../../Tooltip';
 import { ImageWrapper } from '../../../index.js';
 import { TableCell } from '../../../TableCells';
-import StatusChip from '../../../StatusChip';
-import { referenceIcons, REFERENCE_WIDTH_MAP } from './constant';
+import { referenceIcons } from './constant';
 import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, StyledSourceImage, referenceSourceAnimation, } from './style';
-import { Box } from '@mui/material';
 function ReferenceCell(_a) {
-    var { isTextShown, tableMode } = _a, props = __rest(_a, ["isTextShown", "tableMode"]);
+    var { isTextShown } = _a, props = __rest(_a, ["isTextShown"]);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
     const theme = useTheme();
     const references = useMemo(() => Object.keys(referenceIcons).filter((key) => !!props[key]), [props]);
@@ -36,21 +34,6 @@ function ReferenceCell(_a) {
                 } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(reference) }) })) : (_jsx(StyledSourceImage, { src: referenceIcons[reference], alt: reference, sx: Object.assign({}, (reference === 'order' && { width: '11.82px' })) })) })) }), `${reference}-${index}`));
     }), [props, references, isTextShown, theme]);
     const referenceSourcesCount = (ReferenceSources === null || ReferenceSources === void 0 ? void 0 : ReferenceSources.length) || 0;
-    if (tableMode === 'sheet') {
-        return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, Object.assign({ sx: { gap: '4px', display: 'flex', flexWrap: 'nowrap' } }, { children: references.map((referenceKey) => {
-                    const referenceValue = props[referenceKey];
-                    const widthConfig = REFERENCE_WIDTH_MAP[referenceKey];
-                    return (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: _jsx(StatusChip, Object.assign({ sx: {
-                                maxWidth: widthConfig.width,
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                                boxSizing: 'border-box',
-                                display: 'inline-block',
-                                padding: '0.75px 12px',
-                            } }, { children: `${startCase(referenceKey)}: ${referenceValue}` })) }), referenceKey));
-                }) })) })));
-    }
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
                     zIndex: 29,
                 } }, { children: ReferenceSources }))) : null }) })));

package/build/components/TableCells/CustomCells/ReferenceCell/constant.d.ts

@@ -4,23 +4,3 @@ export declare const referenceIcons: {
     payment: string;
     order: string;
 };
-export declare const REFERENCE_WIDTH_MAP: {
-    order: {
-        width: string;
-    };
-    payment: {
-        width: string;
-    };
-    acquirer: {
-        width: string;
-    };
-    generic: {
-        width: string;
-    };
-    merchant: {
-        width: string;
-    };
-    customer: {
-        width: string;
-    };
-};

package/build/components/TableCells/CustomCells/ReferenceCell/constant.js

@@ -5,11 +5,3 @@ export const referenceIcons = {
     payment: transactionIcon,
     order: orderIcon,
 };
-export const REFERENCE_WIDTH_MAP = {
-    order: { width: '185px' },
-    payment: { width: '205px' },
-    acquirer: { width: '155px' },
-    generic: { width: '166px' },
-    merchant: { width: '140px' },
-    customer: { width: '140px' },
-};

package/build/components/TableCells/CustomCells/ReferenceCell/type.d.ts

@@ -9,5 +9,4 @@ export interface ReferenceCellProps extends TableCellProps {
     generic?: string;
     payment?: string;
     isTextShown?: boolean;
-    tableMode?: 'default' | 'text' | 'sheet';
 }

package/build/constants/table/cell/chargeTableCellWidth.d.ts

@@ -179,4 +179,24 @@ export declare const chargeTableCellWidth: {
         readonly text: "140px";
         readonly sheet: "140px";
     };
+    readonly acquirer_ref: {
+        readonly default: "125px";
+        readonly text: "125px";
+        readonly sheet: "125px";
+    };
+    readonly order_ref: {
+        readonly default: "200px";
+        readonly text: "200px";
+        readonly sheet: "200px";
+    };
+    readonly payment_ref: {
+        readonly default: "150px";
+        readonly text: "150px";
+        readonly sheet: "150px";
+    };
+    readonly generic_ref: {
+        readonly default: "125px";
+        readonly text: "125px";
+        readonly sheet: "125px";
+    };
 };

package/build/constants/table/cell/chargeTableCellWidth.js

@@ -179,4 +179,24 @@ export const chargeTableCellWidth = {
         text: '140px',
         sheet: '140px',
     },
+    acquirer_ref: {
+        default: '125px',
+        text: '125px',
+        sheet: '125px',
+    },
+    order_ref: {
+        default: '200px',
+        text: '200px',
+        sheet: '200px',
+    },
+    payment_ref: {
+        default: '150px',
+        text: '150px',
+        sheet: '150px',
+    },
+    generic_ref: {
+        default: '125px',
+        text: '125px',
+        sheet: '125px',
+    },
 };

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.232",
-  "testVersion": 17,
+  "version": "0.0.233-test.21",
+  "testVersion": 21,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}