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

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/AppContainer/components/AppServices/AppServices.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AppDetails, UserApp } from '../../../../types/index.js';
+import { ServiceItemProps } from './ServiceItem';
+interface AppServicesProps extends Pick<ServiceItemProps, 'onClickServiceItem'> {
+    appInfo: AppDetails;
+    userApp?: UserApp;
+    onChangeAppServiceCode?: (serviceCode: string) => void;
+}
+declare function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceItem }: AppServicesProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof AppServices>;
+export default _default;

package/build/components/AppContainer/components/AppServices/AppServices.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { memo, useEffect, useRef, useState, useMemo } from 'react';
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { StyledIconForDropDown, StyledMenuTitle, StyledOption, StyledSelect, StyledSelectComponent } from '../../../index.js';
+import { APP_CODES, blackHeadingDownArrow, blueHeadingDropdownArrow } from '../../../../constants/index.js';
+import { getNameText } from '../../../../utils/index.js';
+import ServiceItem from './ServiceItem';
+import { Wrapper } from './style';
+const selectedIcon = (props) => {
+    return (_jsx(StyledIconForDropDown, { src: props.className.includes('MuiSelect-iconOpen') ? blueHeadingDropdownArrow : blackHeadingDownArrow, alt: "dropdown" }));
+};
+function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceItem }) {
+    const [initServicesWidth, setInitServicesWidth] = useState(0);
+    const [isDropdown, setIsDropdown] = useState(false);
+    const [selectedOption, setSelectedOption] = useState('');
+    const servicesRef = useRef(null);
+    const [openDropdown, setOpenDropdown] = React.useState(false);
+    const navigate = useNavigate();
+    const pathname = useLocation();
+    const { i18n } = useTranslation();
+    const services = useMemo(() => {
+        var _a, _b;
+        if (appInfo.appCode === APP_CODES.account.code) {
+            return (_a = userApp === null || userApp === void 0 ? void 0 : userApp.app_services.filter((service) => service.code === APP_CODES.account.services.account.code)) !== null && _a !== void 0 ? _a : [];
+        }
+        return (_b = userApp === null || userApp === void 0 ? void 0 : userApp.app_services) !== null && _b !== void 0 ? _b : [];
+    }, [appInfo.appCode, userApp === null || userApp === void 0 ? void 0 : userApp.app_services]);
+    const handleChange = (event) => {
+        setSelectedOption(event.target.value);
+    };
+    const handleOpenDropdown = () => {
+        setOpenDropdown((prev) => !prev);
+    };
+    const activeTabTitle = useMemo(() => {
+        var _a, _b;
+        return getNameText((_b = (_a = services.filter((service) => service.code.toLowerCase() === decodeURIComponent(appInfo.serviceCode).toLowerCase())) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name, i18n.language);
+    }, [pathname, appInfo.serviceCode]);
+    useEffect(() => {
+        setSelectedOption(activeTabTitle);
+    }, [activeTabTitle]);
+    useEffect(() => {
+        var _a;
+        const iconSize = 51;
+        const iconGap = 8;
+        const iconMargin = 3;
+        setInitServicesWidth(((_a = servicesRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) + iconSize + iconGap + iconMargin);
+    }, []);
+    useEffect(() => {
+        setIsDropdown(Number(appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width) < initServicesWidth + 10);
+    }, [appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width]);
+    const renderValue = (selected) => _jsx(StyledSelectComponent, { children: selected });
+    const navigateToService = (serviceCode) => {
+        navigate(`${appInfo.appCode.toLowerCase()}/${serviceCode.toLowerCase()}`);
+        onChangeAppServiceCode === null || onChangeAppServiceCode === void 0 ? void 0 : onChangeAppServiceCode(serviceCode);
+        setOpenDropdown(false);
+    };
+    return (_jsxs(Wrapper, Object.assign({ maximized: appInfo.isMaximized }, { children: [services.length && !isDropdown && (_jsx(Box, Object.assign({ ref: servicesRef, display: "flex", gap: "8px", flexDirection: "row", sx: { userSelect: 'none' } }, { children: services.map((service, idx) => (_jsx(ServiceItem, { appInfo: appInfo, onClickServiceItem: onClickServiceItem, navigateToMenuItem: navigateToService, name: getNameText(service.name, i18n.language) || '', code: service.code }, `service-item-${service.code}-${idx}`))) }))), services.length && isDropdown && (_jsx(StyledSelect, Object.assign({ open: openDropdown, onClick: handleOpenDropdown, displayEmpty: true, inputProps: { 'aria-label': 'Without label' }, MenuProps: {
+                    anchorOrigin: {
+                        vertical: 40,
+                        horizontal: 83,
+                    },
+                    PaperProps: {
+                        style: {
+                            borderRadius: '0.25rem',
+                            width: '10.43rem',
+                            padding: 0,
+                        },
+                    },
+                    MenuListProps: {
+                        disablePadding: true,
+                    },
+                }, value: selectedOption, IconComponent: selectedIcon, onChange: handleChange, renderValue: renderValue, sx: {
+                    '& .MuiOutlinedInput-root.MuiList-root-MuiMenu-list': {
+                        paddingTop: '0px !important',
+                        paddingBottom: '0px !important',
+                    },
+                } }, { children: services.map((service) => {
+                    var _a;
+                    if (((_a = getNameText(service.name, i18n.language)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.toLowerCase())) {
+                        return null;
+                    }
+                    return (_jsx(StyledOption, Object.assign({ value: getNameText(service.name, i18n.language), onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            navigateToService(service.code);
+                        } }, { children: _jsx(StyledMenuTitle, { children: getNameText(service.name, i18n.language) }) })));
+                }) })))] })));
+}
+export default memo(AppServices);

package/build/components/AppContainer/components/AppServices/ServiceItem.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { AppDetails } from '../../../../types/index.js';
+export interface ServiceItemProps {
+    appInfo: AppDetails;
+    isDropdown?: boolean;
+    name: string;
+    code: string;
+    onDropdownClick?: () => void;
+    navigateToMenuItem: (serviceCode: string) => void;
+    onClickServiceItem?: (code: string) => void;
+}
+declare function ServiceItem({ isDropdown, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }: ServiceItemProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ServiceItem>;
+export default _default;

package/build/components/AppContainer/components/AppServices/ServiceItem.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DropdownMenu, Icon } from '../../../index.js';
+import { isInsightService } from '../../../../utils/index.js';
+import { homeIcon, newWindowIcon } from '../../../../constants/index.js';
+import { ServiceItemStyled } from './style';
+function ServiceItem({ isDropdown = false, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { t } = useTranslation();
+    const open = Boolean(anchorEl);
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const isHomeService = isInsightService(code);
+    return (_jsxs(_Fragment, { children: [_jsx(ServiceItemStyled, Object.assign({ isDropdown: isDropdown, className: appInfo.serviceCode.toLowerCase() === code.toLowerCase() ? 'active' : '', onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    navigateToMenuItem(code);
+                }, title: isHomeService ? undefined : name, onContextMenu: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleClose();
+                    setAnchorEl(event.currentTarget);
+                } }, { children: isHomeService ? _jsx(Icon, { src: homeIcon }) : name })), _jsx(DropdownMenu, { open: open, anchorEl: anchorEl, onClose: handleClose, menuItems: [
+                    {
+                        label: t('openNewWindow'),
+                        name: 'new',
+                        icon: _jsx("img", { src: newWindowIcon, alt: "new-window-icon" }),
+                        onClick: (e) => {
+                            e.stopPropagation();
+                            onClickServiceItem === null || onClickServiceItem === void 0 ? void 0 : onClickServiceItem(code);
+                            handleClose();
+                            if (onDropdownClick)
+                                onDropdownClick();
+                        },
+                    },
+                ] })] }));
+}
+export default memo(ServiceItem);

package/build/components/AppContainer/components/AppServices/index.d.ts

@@ -0,0 +1,2 @@
+import AppServices from './AppServices';
+export default AppServices;

package/build/components/AppContainer/components/AppServices/index.js

@@ -0,0 +1,2 @@
+import AppServices from './AppServices';
+export default AppServices;

package/build/components/AppContainer/components/AppServices/style.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    maximized?: boolean | undefined;
+}, {}, {}>;
+export declare const ServiceItemStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    title?: string | undefined;
+    isDropdown: boolean;
+}, {}, {}>;

package/build/components/AppContainer/components/AppServices/style.js

@@ -0,0 +1,33 @@
+import Box from '@mui/material/Box';
+import Text from '../../../Text';
+import { styled } from '@mui/material/styles';
+import { getBrowserName } from '../../../../utils/index.js';
+export const Wrapper = styled(Box, { shouldForwardProp: (props) => props !== 'maximized' })(({ theme, maximized }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    overflow: 'hidden',
+    height: maximized ? '4.75rem' : '4.1875rem',
+    paddingBottom: maximized ? '0rem' : '1.2rem',
+    paddingInline: theme.spacing(4),
+    paddingTop: maximized ? '1.35rem' : theme.spacing(0.5),
+}));
+const browserName = getBrowserName();
+export const ServiceItemStyled = styled(Text, {
+    shouldForwardProp: (props) => props !== 'title' && props !== 'isDropdown',
+})(({ title, isDropdown, theme }) => ({
+    position: 'relative',
+    fontWeight: theme.typography.fontWeightMedium,
+    padding: theme.spacing(1),
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    lineHeight: '15px',
+    borderRadius: theme.shape.borderRadius,
+    transition: theme.transitions.create(['backgroundColor', 'boxShadow'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.complex,
+    }),
+    whiteSpace: 'nowrap',
+    textTransform: 'capitalize',
+    '&:hover, &.active': Object.assign(Object.assign({}, (!isDropdown && { backgroundColor: theme.palette.common.white, boxShadow: theme.shadows[2] })), { cursor: 'pointer', position: 'relative', color: 'transparent', '&:after': Object.assign(Object.assign({}, (title && { content: `"${title}"` })), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightBold, overflow: 'hidden', position: 'absolute', top: 0, bottom: 0, right: 0, left: 0, display: 'flex', alignItems: 'center', justifyContent: isDropdown ? 'flex-start' : 'center', letterSpacing: browserName === 'safari' ? '-1px' : '', padding: 8, borderRadius: theme.shape.borderRadius }) }),
+}));

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

@@ -0,0 +1 @@
+export { default as AppServices } from './components/AppServices';

package/build/components/AppContainer/index.js

@@ -0,0 +1 @@
+export { default as AppServices } from './components/AppServices';

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, selected, ...props }: IProps): import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/build/components/DropdownMenu/DropdownMenu.js

@@ -13,7 +13,7 @@ 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';
 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, selected } = _a, props = __rest(_a, ["open", "menuItems", "anchorEl", "onClose", "selected"]);
     const theme = useTheme();
     return (_jsx(StyledMenu, Object.assign({ open: open, anchorEl: anchorEl, onClose: onClose, onContextMenu: (e) => {
             e.preventDefault();
@@ -27,7 +27,7 @@ function Dropdown(_a) {
                             item.onClick(e);
                     }, onContextMenu: item.onRightClick, selected: item.selected, sx: Object.assign({ '&:hover': {
                             backgroundColor: 'transparent',
-                            boxShadow: allowShadows ? theme.shadows[10] : 'none',
+                            boxShadow: theme.shadows[10],
                             '& .sandbox-Icon': {
                                 display: 'none',
                             },
@@ -36,7 +36,7 @@ function Dropdown(_a) {
                             },
                         } }, (idx === selected && {
                         backgroundColor: 'transparent',
-                        boxShadow: allowShadows ? theme.shadows[10] : 'none',
+                        boxShadow: theme.shadows[10],
                     })) }, { 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}`));
         }) })));
 }

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

@@ -17,5 +17,4 @@ export interface IProps {
     anchorEl?: Element | null | undefined;
     style?: CSSProperties;
     selected?: number;
-    allowShadows?: boolean;
 }

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

@@ -1,17 +1,12 @@
 /// <reference types="react" />
 import { AvailableStatus } from '../TableHeader_V2';
-import { CurrencyOption } from '../MultiSelectStatusButton';
 import { TableHeaderStatus } from '../../types/index.js';
 interface StatusBarProps {
     status?: TableHeaderStatus;
     availableStatuses?: AvailableStatus[];
     isFilteredIdsShown?: boolean;
     onStatusChange?: (status: TableHeaderStatus) => void;
-    onMultiSelectChange?: (status: TableHeaderStatus[]) => void;
-    currencyOptions?: CurrencyOption[];
-    selectedCurrencies?: TableHeaderStatus[];
-    enableMultiSelectCurrency?: boolean;
 }
-declare function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, onMultiSelectChange, currencyOptions, selectedCurrencies, enableMultiSelectCurrency, }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+declare function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status }: 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,68 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 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 { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StatusButton } from '../TableHeader_V2';
-import MultiSelectStatusButton from '../MultiSelectStatusButton';
-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 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]));
-            })] }));
+    const getButtonStatus = useCallback((buttonStatus) => (buttonStatus === status && !isFilteredIdsShown ? 'active' : 'inActive'), [status, isFilteredIdsShown]);
+    return (_jsx(_Fragment, { children: 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)) {
+                            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(s.status);
+                        }
+                    } })));
+            }
+            const isCurrentStatusDropdown = (_a = s.status) === null || _a === void 0 ? void 0 : _a.includes(status || '');
+            const variant = 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) => {
+                        onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(buttonStatus);
+                    }, dropdownOptions: s.status.map((stat) => ({
+                        label: t(stat || ''),
+                        onClick: () => {
+                            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(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/TableHeader_V2/components/StatusButtons/ChevronIcon.d.ts

@@ -1,2 +1,2 @@
 import { ChevronIconProps } from './type';
-export declare function ChevronIcon({ isActive, disableHover }: ChevronIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronIcon({ isActive }: ChevronIconProps): import("react/jsx-runtime").JSX.Element;

package/build/components/TableHeader_V2/components/StatusButtons/ChevronIcon.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useTheme } from '@mui/material';
-export function ChevronIcon({ isActive, disableHover }) {
+export function ChevronIcon({ isActive }) {
     const [isHovered, setIsHovered] = useState(false);
     const theme = useTheme();
     const handleMouseEnter = () => {
-        if (!disableHover) {
-            setIsHovered(true);
-        }
+        setIsHovered(true);
     };
     const handleMouseLeave = () => {
         setIsHovered(false);

package/build/components/TableHeader_V2/components/StatusButtons/style.js

@@ -58,7 +58,6 @@ export const ChevronContainer = styled('span')(() => ({
     right: '0',
     bottom: '0',
     overflow: 'hidden',
-    transition: 'opacity 1s ease',
 }));
 export const Label = styled(Box)(({ variant }) => ({
     display: 'flex',

package/build/components/TableHeader_V2/components/StatusButtons/type.d.ts

@@ -15,11 +15,8 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
     dropdownOptions?: Array<MenuItemI & {
         status: TableHeaderStatus;
     }>;
-    render?: (status: TableHeaderStatus) => ReactNode;
-    onMultiSelectChange?: (status: TableHeaderStatus[]) => void;
 }
 export interface ChevronIconProps {
     isActive?: boolean;
-    disableHover?: boolean;
 }
 export type StatusButtonIcon = keyof typeof statusButtonIcons;

package/build/components/index.d.ts

@@ -86,7 +86,7 @@ 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 MultiSelectStatusButton, type CurrencyOption, type MultiSelectStatusButtonProps } from './MultiSelectStatusButton';
 export * from './Chip';
 export * from './TableHeader_V2';
 export { default as RangeCalender } from './RangeCalender';
+export * from './AppContainer';

package/build/components/index.js

@@ -86,7 +86,7 @@ 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 MultiSelectStatusButton } from './MultiSelectStatusButton';
 export * from './Chip';
 export * from './TableHeader_V2';
 export { default as RangeCalender } from './RangeCalender';
+export * from './AppContainer';

package/package.json

@@ -1,132 +1,132 @@
-{
-  "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-v3",
-  "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.js"
-    },
-    "./constants": {
-      "types": "./build/constants/index.d.ts",
-      "import": "./build/constants/index.js",
-      "require": "./build/constants/index.js"
-    },
-    "./components": {
-      "types": "./build/components/index.d.ts",
-      "import": "./build/components/index.js",
-      "require": "./build/components/index.js"
-    },
-    "./components/*": {
-      "types": "./build/components/*/index.d.ts",
-      "import": "./build/components/*/index.js",
-      "require": "./build/components/*/index.js"
-    },
-    "./hooks": {
-      "types": "./build/hooks/index.d.ts",
-      "import": "./build/hooks/index.js",
-      "require": "./build/hooks/index.js"
-    },
-    "./utils": {
-      "types": "./build/utils/index.d.ts",
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.js"
-    },
-    "./theme": {
-      "types": "./build/theme/index.d.ts",
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.js"
-    },
-    "./types": {
-      "types": "./build/types/index.d.ts",
-      "import": "./build/types/index.js",
-      "require": "./build/types/index.js"
-    }
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Ahmed Sharkawy",
-    "email": "a.elsharkawy@tap.company"
-  },
-  "files": [
-    "build",
-    "readme.md"
-  ],
-  "scripts": {
-    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
-    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
-    "dev": "vite",
-    "build": "tsc -b && vite build ",
-    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
-    "lint": "eslint . --color",
-    "lint:fix": "eslint src --fix --color",
-    "preview": "vite preview",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.12.3",
-    "@uiw/react-json-view": "^2.0.0-alpha.16",
-    "axios": "^1.4.0",
-    "dayjs": "^1.11.8",
-    "framer-motion": "10.11.0",
-    "i18next": "^22.4.15",
-    "memoize-one": "^6.0.0",
-    "re-resizable": "^6.9.9",
-    "react": "^18.2.0",
-    "react-currency-input-field": "^3.6.11",
-    "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.45.4",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.2.2",
-    "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^6.14.2",
-    "react-virtualized-auto-sizer": "^1.0.20",
-    "react-window": "^1.8.9",
-    "react-window-infinite-loader": "^1.0.9",
-    "react18-input-otp": "^1.1.4",
-    "recharts": "^2.15.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/lodash": "^4.17.15",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-virtualized-auto-sizer": "^1.0.8",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
-    "tsc-alias": "^1.8.16",
-    "typescript": "5.0.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "6.0.5",
-    "vite-tsconfig-paths": "^4.2.0"
-  },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,js,jsx}": [
-      "yarn run prettier:fix",
-      "yarn run lint"
-    ]
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{
+  "name": "@tap-payments/os-micro-frontend-shared",
+  "description": "Shared components and utilities for Tap Payments micro frontends",
+  "version": "0.0.94",
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js",
+      "require": "./build/index.js"
+    },
+    "./constants": {
+      "types": "./build/constants/index.d.ts",
+      "import": "./build/constants/index.js",
+      "require": "./build/constants/index.js"
+    },
+    "./components": {
+      "types": "./build/components/index.d.ts",
+      "import": "./build/components/index.js",
+      "require": "./build/components/index.js"
+    },
+    "./components/*": {
+      "types": "./build/components/*/index.d.ts",
+      "import": "./build/components/*/index.js",
+      "require": "./build/components/*/index.js"
+    },
+    "./hooks": {
+      "types": "./build/hooks/index.d.ts",
+      "import": "./build/hooks/index.js",
+      "require": "./build/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./build/utils/index.d.ts",
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js"
+    },
+    "./theme": {
+      "types": "./build/theme/index.d.ts",
+      "import": "./build/theme/index.js",
+      "require": "./build/theme/index.js"
+    },
+    "./types": {
+      "types": "./build/types/index.d.ts",
+      "import": "./build/types/index.js",
+      "require": "./build/types/index.js"
+    }
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Ahmed Sharkawy",
+    "email": "a.elsharkawy@tap.company"
+  },
+  "files": [
+    "build",
+    "readme.md"
+  ],
+  "scripts": {
+    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
+    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
+    "dev": "vite",
+    "build": "tsc -b && vite build ",
+    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
+    "lint": "eslint . --color",
+    "lint:fix": "eslint src --fix --color",
+    "preview": "vite preview",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.1",
+    "@mui/material": "^5.12.3",
+    "@uiw/react-json-view": "^2.0.0-alpha.16",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.8",
+    "framer-motion": "10.11.0",
+    "i18next": "^22.4.15",
+    "memoize-one": "^6.0.0",
+    "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
+    "react-currency-input-field": "^3.6.11",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.45.4",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.2.2",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^6.14.2",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "react18-input-otp": "^1.1.4",
+    "recharts": "^2.15.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-virtualized-auto-sizer": "^1.0.8",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "tsc-alias": "^1.8.16",
+    "typescript": "5.0.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "6.0.5",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,json,js,jsx}": [
+      "yarn run prettier:fix",
+      "yarn run lint"
+    ]
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { MultiSelectStatusButtonProps } from './type';
-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,97 +0,0 @@
-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 '../TableHeader_V2/components/StatusButtons/ChevronIcon';
-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, 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);
-        setDropdownWidth(0);
-    };
-    const handleClearAll = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        setInternalSelectedValues([]);
-        onSelectionChange([]);
-    };
-    const handleOptionToggle = (optionStatus, event) => {
-        if (event) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-        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') })));
-    };
-    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] })), _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,
-                }, 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);
-                                } }), _jsx(CountryFlag, { code: option.flagCode || option.code, 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);
-                    },
-                })) }))] }));
-}
-export default memo(MultiSelectStatusButton);

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

@@ -1,3 +0,0 @@
-import MultiSelectStatusButton from './MultiSelectStatusButton';
-export default MultiSelectStatusButton;
-export type { CurrencyOption, MultiSelectStatusButtonProps } from './type';

package/build/components/MultiSelectStatusButton/index.js

@@ -1,2 +0,0 @@
-import MultiSelectStatusButton from './MultiSelectStatusButton';
-export default MultiSelectStatusButton;

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

@@ -1,41 +0,0 @@
-import type React from 'react';
-import { type Theme } from '@mui/material';
-export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown, } from '../TableHeader_V2/components/StatusButtons/style';
-export declare const StyledStatusButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
-    buttonVariant: 'active' | 'inActive';
-}, {}, {}>;
-export declare const FlagContainer: 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>, {}, {}>;
-export declare const MenuItemContainer: 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>, {}, {}>;
-export declare const CheckboxStyles: {
-    padding: number;
-    color: string;
-    '&.Mui-checked': {
-        color: string;
-    };
-    '&.MuiCheckbox-root': {
-        color: string;
-    };
-    '& .MuiSvgIcon-root': {
-        color: string;
-    };
-    '&.Mui-checked .MuiSvgIcon-root': {
-        color: string;
-        '& path': {
-            fill: string;
-        };
-    };
-};
-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,71 +0,0 @@
-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: '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'
-    ? {
-        background: theme.palette.background.gradient.shadedBlue,
-        color: theme.palette.common.white,
-    }
-    : {
-        backgroundColor: theme.palette.common.white,
-        borderColor: theme.palette.grey[100],
-        color: theme.palette.text.primary,
-        '&:hover': {
-            backgroundColor: 'white',
-        },
-    }))));
-export const FlagContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(0.5),
-}));
-export const MenuItemContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(0.3),
-    width: '100%',
-}));
-export const CheckboxStyles = {
-    padding: 0.3,
-    color: '#8C9196',
-    '&.Mui-checked': {
-        color: '#1F88D0',
-    },
-    '&.MuiCheckbox-root': {
-        color: '#8C9196',
-    },
-    '& .MuiSvgIcon-root': {
-        color: 'inherit',
-    },
-    '&.Mui-checked .MuiSvgIcon-root': {
-        color: '#1F88D0',
-        '& path': {
-            fill: '#1F88D0',
-        },
-    },
-};
-export const ClearIcon = styled('img')(({ variant }) => ({
-    width: '10px',
-    height: '10px',
-    filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
-    cursor: 'pointer',
-    position: 'absolute',
-    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/MultiSelectStatusButton/type.d.ts

@@ -1,14 +0,0 @@
-import { TableHeaderStatus } from '../../types/index.js';
-export interface CurrencyOption {
-    code: string;
-    name: string;
-    flagCode?: string;
-    status: TableHeaderStatus;
-}
-export interface MultiSelectStatusButtonProps {
-    options: CurrencyOption[];
-    selectedValues: TableHeaderStatus[];
-    onSelectionChange: (selected: TableHeaderStatus[]) => void;
-    label?: string;
-    variant?: 'active' | 'inActive';
-}

package/build/components/MultiSelectStatusButton/type.js

@@ -1 +0,0 @@
-export {};