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

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

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

@@ -1,3 +1,3 @@
 import { IProps } from './type';
-declare function Dropdown({ open, menuItems, anchorEl, onClose, selected, allowShadows, ...props }: IProps): import("react/jsx-runtime").JSX.Element;
+declare function Dropdown({ open, menuItems, anchorEl, onClose, footer, selected, multiple, 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 } from './styles';
+import { StyledListItemText, StyledMenu, StyledListItemIcon, StyledMenuItem, CheckboxStyled } from './styles';
 function Dropdown(_a) {
-    var { open, menuItems, anchorEl, onClose, selected, allowShadows = true } = _a, props = __rest(_a, ["open", "menuItems", "anchorEl", "onClose", "selected", "allowShadows"]);
+    var { open, menuItems, anchorEl, onClose, footer, selected, multiple, allowShadows = true } = _a, props = __rest(_a, ["open", "menuItems", "anchorEl", "onClose", "footer", "selected", "multiple", "allowShadows"]);
     const theme = useTheme();
-    return (_jsx(StyledMenu, Object.assign({ open: open, anchorEl: anchorEl, onClose: onClose, onContextMenu: (e) => {
+    return (_jsxs(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({ '&:hover': {
+        } }, 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 && {
                             backgroundColor: 'transparent',
                             boxShadow: allowShadows ? theme.shadows[10] : 'none',
-                            '& .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}`));
-        }) })));
+                        })), item.sx) }, { children: [multiple && _jsx(CheckboxStyled, { size: "small", checked: item.selected }), 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}`));
+            }), footer] })));
 }
 export default Dropdown;

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

@@ -16,3 +16,4 @@ 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,4 +1,5 @@
-import { ListItemText, Menu, MenuItem, styled, ListItemIcon, Select } from '@mui/material';
+import Checkbox from '../Checkbox';
+import { ListItemText, Menu, MenuItem, styled, ListItemIcon, Select, alpha } from '@mui/material';
 export const StyledMenuItem = styled(MenuItem, {
     shouldForwardProp: (prop) => prop !== 'alwaysShowRightAction',
 })(({ theme, alwaysShowRightAction }) => ({
@@ -141,3 +142,17 @@ 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,4 +1,6 @@
 import React, { CSSProperties, ReactNode } from 'react';
+import { type SxProps, type Theme } from '@mui/material/styles';
+import { StyledMenu } from './styles';
 export interface MenuItemI {
     label?: string | null | ReactNode;
     name?: string;
@@ -9,8 +11,9 @@ export interface MenuItemI {
     selected?: boolean;
     rightAction?: ReactNode;
     alwaysShowRightAction?: boolean;
+    sx?: SxProps<Theme>;
 }
-export interface IProps {
+export interface IProps extends React.ComponentProps<typeof StyledMenu> {
     open: boolean;
     onClose: () => void;
     menuItems: MenuItemI[];
@@ -18,4 +21,6 @@ export interface IProps {
     style?: CSSProperties;
     selected?: number;
     allowShadows?: boolean;
+    multiple?: boolean;
+    footer?: React.ReactNode;
 }

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -1,15 +1,12 @@
 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, SUPPORTED_CURRENCY_DETAILS } from '../../constants/index.js';
+import { closeXIcon } 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);
@@ -57,13 +54,9 @@ 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: [getDisplayLabel(), countBadge] })), _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: [_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',
                                 },
@@ -80,21 +73,18 @@ function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChan
                     '&: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);
-                        },
-                    });
-                }) }))] }));
+                }, 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);
+                    },
+                })) }))] }));
 }
 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/StatusBar/StatusBar.d.ts

@@ -1,17 +1,11 @@
-/// <reference types="react" />
-import { CurrencyOption } from '../MultiSelectStatusButton';
 import { TableHeaderStatus } from '../../types/index.js';
 import { AvailableStatus } from './type';
-interface StatusBarProps {
-    status?: TableHeaderStatus;
-    availableStatuses?: AvailableStatus[];
+interface StatusBarProps<IStatus extends TableHeaderStatus | TableHeaderStatus[] = undefined> {
+    status?: IStatus;
+    availableStatuses?: AvailableStatus<IStatus>[];
     isFilteredIdsShown?: boolean;
-    onStatusChange?: (status: TableHeaderStatus) => void;
-    onMultiSelectChange?: (status: TableHeaderStatus[]) => void;
-    currencyOptions?: CurrencyOption[];
-    selectedCurrencies?: TableHeaderStatus[];
-    enableMultiSelectCurrency?: boolean;
+    onStatusChange?: (status: IStatus) => void;
 }
-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>;
+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;
 export default _default;

package/build/components/StatusBar/StatusBar.js

@@ -1,68 +1,53 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useState, useEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import MultiSelectStatusButton from '../MultiSelectStatusButton';
 import StatusButton from '../StatusButton';
-function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, onMultiSelectChange, currencyOptions, selectedCurrencies = [], enableMultiSelectCurrency = false, }) {
+function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, }) {
     const { t } = useTranslation();
-    const [multiSelectValues, setMultiSelectValues] = useState(selectedCurrencies);
-    useEffect(() => {
-        if (status && multiSelectValues.length > 0) {
-            setMultiSelectValues([]);
-        }
-    }, [status, multiSelectValues.length]);
-    useEffect(() => {
-        if (!status) {
-            setMultiSelectValues(selectedCurrencies);
-        }
-    }, [selectedCurrencies, status]);
+    const isMultiSelection = useMemo(() => Array.isArray(status), [status]);
     const getButtonStatus = useCallback((buttonStatus) => {
-        if (multiSelectValues.length > 0) {
-            return 'inActive';
-        }
         return buttonStatus === status && !isFilteredIdsShown ? 'active' : 'inActive';
-    }, [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]));
-            })] }));
+    }, [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]));
+        }) }));
 }
 export default memo(StatusBar);

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

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

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

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

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/index.d.ts

@@ -76,7 +76,7 @@ export { default as CountryFlag } from './CountryFlag';
 export { default as CurrencyIcon } from './CurrencyIcon';
 export { default as CustomBackdrop } from './CustomBackdrop';
 export { default as DeviceIcon } from './DeviceIcon';
-export { default as CountBadge, type BadgeVariants, CountAnimatedBadge, type StyledBadgeProps, paymentSourceAnimation } from './CountBadge';
+export { default as CountBadge, BadgeVariants, CountAnimatedBadge, type StyledBadgeProps, paymentSourceAnimation } from './CountBadge';
 export { default as CircularProgressWithLabel } from './CircularProgressWithLabel';
 export { default as Collapse, type CollapseProps } from './Collapse';
 export { default as ConfirmDialog, type ConfirmDialogFunction, type ConfirmDialogProps, useConfirmDialog, ConfirmDialogContext, ConfirmDialogProvider, } from './ConfirmDialog';
@@ -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 } from './StatusBar';
+export { default as StatusBar, type AvailableStatus } from './StatusBar';
 export { default as MultiSelectStatusButton, type CurrencyOption, type MultiSelectStatusButtonProps } from './MultiSelectStatusButton';
 export * from './Chip';
 export * from './StatusGroupChips';

package/build/components/index.js

@@ -76,7 +76,7 @@ export { default as CountryFlag } from './CountryFlag';
 export { default as CurrencyIcon } from './CurrencyIcon';
 export { default as CustomBackdrop } from './CustomBackdrop';
 export { default as DeviceIcon } from './DeviceIcon';
-export { default as CountBadge, CountAnimatedBadge, paymentSourceAnimation } from './CountBadge';
+export { default as CountBadge, BadgeVariants, CountAnimatedBadge, paymentSourceAnimation } from './CountBadge';
 export { default as CircularProgressWithLabel } from './CircularProgressWithLabel';
 export { default as Collapse } from './Collapse';
 export { default as ConfirmDialog, useConfirmDialog, ConfirmDialogContext, ConfirmDialogProvider, } from './ConfirmDialog';

package/build/constants/assets.d.ts

@@ -505,3 +505,9 @@ export declare const payoutServiceIcon: string;
 export declare const refundsServiceIcon: string;
 export declare const usersServiceIcon: string;
 export declare const walletServiceIcon: string;
+export declare const archievedOutlined: string;
+export declare const closeOutlinedCircle: string;
+export declare const dashedOutlinedCircle: string;
+export declare const deactivatedCircle: string;
+export declare const exclamationOutlinedCircle: string;
+export declare const outlinedCircle: string;

package/build/constants/assets.js

@@ -509,3 +509,9 @@ export const payoutServiceIcon = `${lightUrl}/services/payoutService.svg`;
 export const refundsServiceIcon = `${lightUrl}/services/refundsService.svg`;
 export const usersServiceIcon = `${lightUrl}/services/usersService.svg`;
 export const walletServiceIcon = `${lightUrl}/services/walletService.svg`;
+export const archievedOutlined = `${lightUrl}/archievedOutlined.svg`;
+export const closeOutlinedCircle = `${lightUrl}/closeOutlinedCircle.svg`;
+export const dashedOutlinedCircle = `${lightUrl}/dashedOutlinedCircle.svg`;
+export const deactivatedCircle = `${lightUrl}/deactivatedCircle.svg`;
+export const exclamationOutlinedCircle = `${lightUrl}/exclamationOutlinedCircle.svg`;
+export const outlinedCircle = `${lightUrl}/outlinedCircle.svg`;

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