@tap-payments/os-micro-frontend-shared 0.1.440 → 0.1.441

package/build/components/MerchantsDropdown/style.js

@@ -1,155 +0,0 @@
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import { Menu, MenuItem } from '../index.js';
-export const Counter = styled(Box)(({ theme }) => ({
-    borderRadius: '50%',
-    background: theme.palette.divider,
-    width: 13,
-    height: 14,
-    fontSize: '8px',
-    fontWeight: 700,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    lineHeight: '10px',
-}));
-export const CountingInfo = styled(Box)(() => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '4px',
-    '.arrow-icon': {
-        height: 12,
-    },
-}));
-export const Content = styled(Box)(() => ({
-    display: 'flex',
-    gap: '12px',
-    justifyContent: 'space-between',
-    flexGrow: 1,
-    width: '100%',
-    alignItems: 'center',
-}));
-export const MerchantInfo = styled(Box)(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-}));
-export const SelectedBrand = styled(Box, { shouldForwardProp: (prop) => prop !== 'isOpen' })(({ isOpen, theme }) => (Object.assign(Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '5px', cursor: 'pointer', padding: '8px', border: `1px solid ${theme.palette.divider}`, color: theme.palette.text.primary, background: theme.palette.common.white, borderRadius: '4px', height: 32, width: 'fit-content', minWidth: '89px', img: {
-        marginTop: '1px',
-    } }, (isOpen && {
-    borderColor: theme.palette.info.dark,
-})), { '&:hover': {
-        background: theme.palette.divider,
-    } })));
-export const Label = styled(Typography)(({ theme }) => ({
-    fontSize: '11px',
-    fontWeight: 500,
-    color: theme.palette.text.primary,
-}));
-export const CollapseIcon = styled('img', { shouldForwardProp: (props) => props !== 'expanded' })(({ theme, expanded }) => ({
-    transform: !expanded ? 'rotate(0deg)' : 'rotate(180deg)',
-    marginLeft: 'auto',
-    transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.shortest,
-    }),
-}));
-export const LoadingRow = styled(Box)(() => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingBlock: '4px',
-    borderTop: '1px solid #F2F2F2',
-}));
-export const StyledMenu = styled(Menu)({
-    '& .MuiPopper-dropdown': {
-        maxHeight: 700,
-        overflow: 'visible',
-    },
-});
-export var MenuItemStatusClasses;
-(function (MenuItemStatusClasses) {
-    MenuItemStatusClasses["SELECTED"] = "Mui-selected";
-    MenuItemStatusClasses["ONLY_ONE"] = "Mui-only-one";
-    MenuItemStatusClasses["FLIPPED"] = "Mui-flipped";
-    MenuItemStatusClasses["SUBMENU_OPEN"] = "Mui-Submenu-open";
-    MenuItemStatusClasses["SUBMENU_FLIPPED"] = "Mui-Submenu-flipped";
-})(MenuItemStatusClasses || (MenuItemStatusClasses = {}));
-export const StyledMenuItem = styled(MenuItem)({
-    '--menuitem-border-rad': '4px',
-    backgroundColor: '#fff',
-    minHeight: 36,
-    '&:first-of-type': {
-        borderTopLeftRadius: 'var(--menuitem-border-rad)',
-        borderTopRightRadius: 'var(--menuitem-border-rad)',
-    },
-    '&:last-of-type': {
-        borderBottomLeftRadius: 'var(--menuitem-border-rad)',
-        borderBottomRightRadius: 'var(--menuitem-border-rad)',
-    },
-    '&.Mui-Submenu-open': {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-        '&.Mui-Submenu-flipped': {
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-            borderTopRightRadius: 'var(--menuitem-border-rad)',
-            borderBottomRightRadius: 'var(--menuitem-border-rad)',
-        },
-    },
-    '&.Mui-selected': {
-        boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.13)',
-        zIndex: 1,
-    },
-});
-export const StyledChildMenuItem = styled(StyledMenuItem)({
-    '&:first-of-type': {
-        borderTopLeftRadius: 0,
-        borderTopRightRadius: 'var(--menuitem-border-rad)',
-        '&.Mui-flipped': {
-            borderTopLeftRadius: 'var(--menuitem-border-rad)',
-            borderTopRightRadius: 0,
-        },
-    },
-    '&:last-of-type': {
-        borderBottomLeftRadius: 'var(--menuitem-border-rad)',
-        borderBottomRightRadius: 'var(--menuitem-border-rad)',
-    },
-    '&.Mui-Submenu-open': {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-        '&.Mui-Submenu-flipped': {
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-            borderTopRightRadius: 'var(--menuitem-border-rad)',
-            borderBottomRightRadius: 'var(--menuitem-border-rad)',
-        },
-    },
-    '&.Mui-only-one': {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-        borderTopRightRadius: 'var(--menuitem-border-rad)',
-        borderBottomRightRadius: 'var(--menuitem-border-rad)',
-        '&.Mui-flipped': {
-            borderTopLeftRadius: 'var(--menuitem-border-rad)',
-            borderBottomLeftRadius: 'var(--menuitem-border-rad)',
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-        },
-        '&.Mui-Submenu-open': {
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-            '&.Mui-Submenu-flipped': {
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                borderTopRightRadius: 'var(--menuitem-border-rad)',
-                borderBottomRightRadius: 'var(--menuitem-border-rad)',
-            },
-        },
-    },
-});
-export const StyledMenuItemHeader = styled(StyledChildMenuItem)({
-    backgroundColor: '#FAFAFA',
-    color: '#8D8D94',
-    padding: '10px 16px',
-    borderBottom: '1px solid #F2F2F2',
-});

package/build/components/MerchantsDropdown/type.js

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

package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
-import { DonutWrapper, CenterOverlay, Empty } from './style';
-export const MultiDatakeyDonut = ({ chartData, size = 170, chartInfo }) => {
-    const pieSegments = useMemo(() => {
-        const total = chartData.reduce((sum, d) => sum + d.value, 0) || 1;
-        let cumulative = 0;
-        return chartData.map((d) => {
-            const start = (cumulative / total) * 360;
-            const end = ((cumulative + d.value) / total) * 360;
-            cumulative += d.value;
-            return Object.assign(Object.assign({}, d), { startAngle: start, endAngle: end });
-        });
-    }, [chartData]);
-    const isEmpty = chartData.every((d) => d.value === 0);
-    return (_jsxs(DonutWrapper, Object.assign({ sx: { width: size, height: size } }, { children: [_jsx(ResponsiveContainer, { children: _jsxs(PieChart, { children: [_jsx(Pie, { data: [{ value: 100 }], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", fill: "#E5E7EB", stroke: "none", isAnimationActive: false }), !isEmpty &&
-                            pieSegments.map((segment) => (_jsx(Pie, Object.assign({ data: [segment], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", startAngle: 90 - segment.startAngle, endAngle: 90 - segment.endAngle, cornerRadius: 0, stroke: "none", isAnimationActive: true, animationDuration: 800, style: { outline: 'none' } }, { children: _jsx(Cell, { fill: segment.color, tabIndex: -1 }, segment.name) }), segment.name)))] }) }), _jsx(CenterOverlay, { children: !chartInfo ? _jsx(Empty, { children: "----" }) : chartInfo })] })));
-};

package/build/components/MultiDatakeyDonut/style.js

@@ -1,23 +0,0 @@
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export const DonutWrapper = styled(Box)(() => ({
-    width: '100%',
-    maxWidth: 500,
-    aspectRatio: '1',
-    position: 'relative',
-}));
-export const CenterOverlay = styled(Box)(({ theme }) => ({
-    position: 'absolute',
-    inset: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    pointerEvents: 'none',
-    gap: theme.spacing(1),
-}));
-export const Empty = styled(Box)(({ theme }) => ({
-    fontSize: 17,
-    fontWeight: 700,
-    color: '#CFD0D2',
-}));

package/build/components/MultiSelectDropdownButton/MultiSelectDropdownButton.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useState } from 'react';
-import { Popper } from '@mui/material';
-import { ButtonLabel } from './style';
-import CustomBackdrop from '../CustomBackdrop';
-import StatusButton from './components/StatusButton';
-import ListColumnFilter from '../VirtualTables/components/ColumnFilter/List';
-import { downArrowIcon } from '../../constants/index.js';
-function MultiSelectDropdownButton({ buttonLabel, onClear, onConfirm, dropdownItems, apiKey, data, styles, buttonDisabled, }) {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const openDropdown = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const onCloseDropdown = () => {
-        setAnchorEl(null);
-    };
-    const isOpen = Boolean(anchorEl);
-    const dataValue = data === null || data === void 0 ? void 0 : data[apiKey];
-    const selectedCount = Array.isArray(dataValue) ? dataValue.length : 0;
-    const label = (_jsxs(ButtonLabel, Object.assign({ isDisabled: buttonDisabled }, { children: [buttonLabel, _jsx("img", { src: downArrowIcon, alt: "arrow-down" })] })));
-    return (_jsxs("div", { children: [_jsx(StatusButton, { onClick: openDropdown, label: label, disabled: buttonDisabled, badgeCount: selectedCount }), isOpen && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: isOpen, anchorEl: anchorEl, placement: "bottom-start", sx: {
-                    zIndex: 9999,
-                } }, { children: _jsx(ListColumnFilter, { onCloseDropdown: onCloseDropdown, filter: {
-                        apiKey,
-                        data,
-                        onClear,
-                        onConfirm,
-                        options: dropdownItems,
-                        type: 'list',
-                    }, styles: Object.assign(Object.assign({}, styles), { height: '300px', overflowY: 'scroll', maxWidth: '200px' }) }) }))] }));
-}
-export default memo(MultiSelectDropdownButton);

package/build/components/MultiSelectDropdownButton/components/StatusButton.js

@@ -1,34 +0,0 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useMemo, useRef } from 'react';
-import StyledBadge, { BadgeVariants } from '../../CountBadge';
-import { convertToNumber, formatNumber } from '../../../utils/index.js';
-import { Label, LabelWrapper, statusButtonVariants } from '../../StatusButton/style';
-const StatusButton = memo((props) => {
-    const { variant = 'inActive', badgeCount, label } = props, restProps = __rest(props, ["variant", "badgeCount", "label"]);
-    const buttonRef = useRef(null);
-    // Memoized computed values
-    const statusBadge = useMemo(() => {
-        if (!badgeCount || Number.isNaN(convertToNumber(badgeCount)))
-            return null;
-        return _jsx(StyledBadge, Object.assign({ variant: BadgeVariants.INACTIVE }, { children: formatNumber(Number(badgeCount)) }));
-    }, [badgeCount]);
-    const handleButtonClick = useCallback((e) => {
-        var _a;
-        e.stopPropagation();
-        (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, [props]);
-    const ButtonComponent = statusButtonVariants[variant];
-    return (_jsx(ButtonComponent, Object.assign({ "data-testid": "MultiSelectStatusButton" }, restProps, { ref: buttonRef, onClick: handleButtonClick }, { children: _jsx(LabelWrapper, { children: _jsxs(Label, Object.assign({ variant: variant }, { children: [label, statusBadge] })) }) })));
-});
-export default StatusButton;

package/build/components/MultiSelectDropdownButton/style.js

@@ -1,8 +0,0 @@
-import { Box, styled } from '@mui/material';
-export const ButtonLabel = styled(Box, {
-    shouldForwardProp: (props) => props !== 'isDisabled',
-})(({ isDisabled }) => (Object.assign({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '4px' }, (isDisabled && {
-    '& img': {
-        opacity: 0.3,
-    },
-}))));

package/build/components/MultiSelectDropdownButton/type.js

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

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -1,93 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useState, useRef, useEffect } from 'react';
-import { Typography, Checkbox } from '@mui/material';
-import { ChevronIcon } from '../StatusButton/ChevronIcon';
-import StyledBadge, { BadgeVariants } from '../CountBadge';
-import { formatNumber } from '../../utils/index.js';
-import { closeXIcon } from '../../constants/index.js';
-import { ChevronContainer, Label, LabelWrapper, StyledDropdown, MenuItemContainer, CheckboxStyles, StyledStatusButton, ClearIcon, ChevronIconWrapper, } from './style';
-function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChange, label, variant = 'inActive' }) {
-    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);
-    // Update internal state when props change (but only when dropdown is closed)
-    useEffect(() => {
-        if (!isOpen) {
-            setInternalSelectedValues(selectedValues);
-        }
-    }, [selectedValues, isOpen]);
-    const handleDropdownClick = (event) => {
-        var _a;
-        event.stopPropagation();
-        event.preventDefault();
-        if (isOpen) {
-            handleClose();
-            return;
-        }
-        setAnchorEl(buttonRef.current);
-        // Set initial dropdown width to prevent shrinking
-        const buttonWidth = ((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 200;
-        setDropdownWidth(Math.max(buttonWidth, 200));
-    };
-    const handleClose = () => {
-        // To prevent unnecessary updates, we check if the selection has actually changed.
-        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);
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(StyledStatusButton, Object.assign({ buttonVariant: variant, ref: buttonRef, sx: {
-                    paddingInlineEnd: '27px',
-                }, "data-testid": "MultiSelectStatusButton", onClick: handleDropdownClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), disabled: !options.length }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: "11px", variant: "inherit" }, { children: label })), _jsx(StyledBadge, Object.assign({ pointer: true, variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(selectedValues.length > 0 ? selectedValues.length : options.length) }))] })), _jsxs(ChevronContainer, Object.assign({ onClick: isHovered && internalSelectedValues.length > 0 ? handleClearAll : undefined, sx: {
-                                '&:hover': {
-                                    backgroundColor: 'transparent',
-                                },
-                            } }, { children: [_jsx(ClearIcon, { variant: variant, src: closeXIcon, alt: "clear all", sx: {
-                                        opacity: isHovered && internalSelectedValues.length > 0 ? 1 : 0,
-                                        pointerEvents: isHovered && internalSelectedValues.length > 0 ? 'auto' : 'none',
-                                    } }), _jsx(ChevronIconWrapper, Object.assign({ isVisible: !(isHovered && internalSelectedValues.length > 0) }, { children: _jsx(ChevronIcon, { disableHover: true, isActive: variant === 'active' }) }))] }))] }) })), isOpen && anchorEl && (_jsx(StyledDropdown, { open: isOpen, onClose: handleClose, anchorEl: anchorEl, allowShadows: false, style: {
-                    minWidth: dropdownWidth || 200,
-                    width: dropdownWidth || 'auto',
-                    marginTop: '6px',
-                    maxWidth: 300,
-                }, sx: {
-                    boxShadow: 'none !important',
-                    '&:hover': {
-                        boxShadow: 'none !important',
-                    },
-                }, menuItems: options.map((option) => ({
-                    label: (_jsxs(MenuItemContainer, { children: [_jsx(Checkbox, { checked: internalSelectedValues.includes(option.status), size: "small", sx: CheckboxStyles, onClick: (e) => {
-                                    var _a;
-                                    e.stopPropagation();
-                                    handleOptionToggle((_a = option.status) !== null && _a !== void 0 ? _a : '', e);
-                                } }), option.render ? option.render() : _jsx(Typography, Object.assign({ variant: "body2" }, { children: option.name }))] })),
-                    onClick: (e) => {
-                        var _a;
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleOptionToggle((_a = option.status) !== null && _a !== void 0 ? _a : '', e);
-                    },
-                })) }))] }));
-}
-export default memo(MultiSelectStatusButton);

package/build/components/MultiSelectStatusButton/style.js

@@ -1,77 +0,0 @@
-import { Box, Button } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown } from '../StatusButton/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,
-        '&:disabled': {
-            color: theme.palette.common.white,
-        },
-    }
-    : {
-        backgroundColor: theme.palette.common.white,
-        borderColor: theme.palette.grey[100],
-        color: theme.palette.text.primary,
-        '&:hover': {
-            backgroundColor: 'white',
-        },
-        '&:disabled': {
-            color: theme.palette.text.primary,
-        },
-    }))));
-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.js

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

package/build/components/MultiSelectWithSearch/ChildMenuItem.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box } from '@mui/material';
-import { rightArrow } from '../../constants/index.js';
-import MenuItem from '../MenuItem';
-import Menu from '../Menu';
-export function ChildMenuItem({ childOption, selectedOptions, onChangeOptions, }) {
-    var _a;
-    const [childMenuEl, setChildMenuEl] = useState(null);
-    const addOption = (option) => {
-        onChangeOptions([...(selectedOptions || []), option]);
-    };
-    const removeOption = (option) => {
-        onChangeOptions((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.filter((o) => o.value !== option.value)) || []);
-    };
-    return (_jsxs(MenuItem, Object.assign({ onMouseEnter: (e) => {
-            var _a;
-            if (((_a = childOption.options) === null || _a === void 0 ? void 0 : _a.length) > 0)
-                setChildMenuEl(e.currentTarget);
-        }, onMouseLeave: () => {
-            if (childMenuEl)
-                setChildMenuEl(null);
-        } }, { children: [_jsxs(Box, Object.assign({ sx: {
-                    display: 'flex',
-                    gap: '12px',
-                    justifyContent: 'space-between',
-                    flexGrow: 1,
-                    alignItems: 'center',
-                    maxWidth: '220px',
-                    minWidth: '89px',
-                } }, { children: [childOption.label, _jsx("img", { src: rightArrow, className: "arrow-icon", alt: "arrow" })] })), _jsx(Menu, Object.assign({ sx: { maxHeight: '450px', overflow: 'auto' }, open: Boolean(childMenuEl), anchorEl: childMenuEl, placement: "right-start" }, { children: (_a = childOption.options) === null || _a === void 0 ? void 0 : _a.map((option) => {
-                    const selectedOption = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.find((o) => o.value === option.value);
-                    const isSelected = !!selectedOption;
-                    return (_jsx(MenuItem, Object.assign({ isSelected: isSelected, onClick: (e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            if (isSelected) {
-                                removeOption(option);
-                            }
-                            else {
-                                addOption(option);
-                            }
-                        } }, { children: _jsx(Box, Object.assign({ sx: { flex: 1, maxWidth: '220px', minWidth: '89px' } }, { children: option.label })) }), option.value));
-                }) }))] })));
-}

package/build/components/MultiSelectWithSearch/MultiSelectWithSearch.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useMemo, useRef } from 'react';
-import { CircularProgress, Typography } from '@mui/material';
-import { searchIcon, closeXIcon, blueCheckIcon, downArrowIcon } from '../../constants/index.js';
-import Icon from '../Icon';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { SelectedBadgesWrapper, SelectedBadge, TriggerWrapper, Container, InputStyled, ArrowIcon } from './style';
-import { filterOptions } from './utils';
-import Menu from '../Menu';
-import { ParentMenuItem } from './ParentMenuItem';
-function MultiSelectWithSearch({ nestedOptions, onChangeOptions, selectedOptions, placeholder, isLoading, searchBy = ['label'], disabled, }) {
-    var _a, _b;
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [searchValue, setSearchValue] = useState('');
-    const triggerRef = useRef(null);
-    const open = Boolean(anchorEl);
-    const openDropdown = (e) => {
-        setAnchorEl(open ? null : e.currentTarget);
-    };
-    const closeDropdown = () => {
-        setAnchorEl(null);
-    };
-    const onResetSearch = () => {
-        if (searchValue)
-            setSearchValue('');
-    };
-    const filteredOptions = useMemo(() => {
-        if (!searchValue)
-            return nestedOptions;
-        return filterOptions(nestedOptions, searchValue, searchBy);
-    }, [nestedOptions, searchValue, searchBy]);
-    const endAdornment = isLoading ? (_jsx(CircularProgress, { size: 16 })) : (_jsx(Icon, { src: searchValue ? closeXIcon : searchIcon, alt: searchValue ? 'close' : 'search', onClick: onResetSearch, sx: { width: 12, height: 12 } }));
-    const selectedOptionsLength = Number((_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) !== null && _a !== void 0 ? _a : 0);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => {
-            if (open)
-                closeDropdown();
-        } }, { children: _jsxs(TriggerWrapper, Object.assign({ id: "TriggerWrapper", onClick: (e) => !disabled && openDropdown(e), ref: triggerRef }, { children: [_jsx(Typography, Object.assign({ color: "grey", sx: { cursor: 'pointer', fontSize: '10px', padding: '4px' }, component: "label" }, { children: placeholder })), selectedOptionsLength === 0 && (_jsx(Typography, Object.assign({ sx: { fontWeight: 500, fontSize: '11px', padding: '0px 4px 4px' }, component: "p" }, { children: "Please Select" }))), _jsx(ArrowIcon, { component: "img", src: downArrowIcon, alt: "down arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) }), !!selectedOptionsLength && (_jsx(SelectedBadgesWrapper, Object.assign({ id: "SelectedBadgesWrapper" }, { children: selectedOptionsLength > 0 && selectedOptionsLength <= 2
-                        ? selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((option) => (_jsxs(SelectedBadge, Object.assign({ maxWidth: 90 }, { children: [_jsx(Icon, { src: blueCheckIcon, alt: "blue-check", sx: { width: 10, height: 7.5 } }), _jsx("span", { children: option.label })] }), option.value)))
-                        : selectedOptionsLength > 2 &&
-                            ((_b = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.slice(0, 2)) === null || _b === void 0 ? void 0 : _b.map((option, index) => {
-                                return (_jsxs(React.Fragment, { children: [_jsxs(SelectedBadge, Object.assign({ maxWidth: 90 }, { children: [_jsx(Icon, { src: blueCheckIcon, alt: "blue-check", sx: { width: 10, height: 7.5 } }), _jsx("span", { children: option.label })] })), index === 1 && (_jsx(SelectedBadge, Object.assign({ maxWidth: 90 }, { children: _jsxs("span", { children: ["+", selectedOptionsLength - 2] }) })))] }, option.value));
-                            })) }))), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { margin: '8px 0', maxHeight: 330, overflow: 'auto', maxWidth: '340px' } }, { children: _jsxs(Container, { children: [_jsx(InputStyled, { placeholder: placeholder || 'Select', endAdornment: endAdornment, onClick: (e) => {
-                                    e.stopPropagation();
-                                }, value: searchValue, onChange: (e) => {
-                                    setSearchValue(e.target.value);
-                                }, disableUnderline: true, sx: Object.assign(Object.assign({ cursor: 'default', width: '100%', backgroundColor: 'white', border: '1px solid #F2F2F2' }, (nestedOptions.length && { marginBottom: '4px' })), (searchValue && { cursor: 'pointer' })) }), _jsx(SelectedBadgesWrapper, { children: selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((option) => (_jsxs(SelectedBadge, Object.assign({ sx: { maxWidth: '150px' }, onClick: (e) => {
-                                        e.stopPropagation();
-                                        e.preventDefault();
-                                        onChangeOptions((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.filter((o) => o.value !== option.value)) || []);
-                                    } }, { children: [_jsx(Icon, { src: blueCheckIcon, alt: "blue-check", sx: { width: 10, height: 7.5 } }), _jsx("span", Object.assign({ style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: option.label })), _jsx(Icon, { src: closeXIcon, alt: "close", sx: { width: 9, height: 9 } })] }), option.value))) }), filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map((parentOption) => (_jsx(ParentMenuItem, { parentOption: parentOption, selectedOptions: selectedOptions, onChangeOptions: onChangeOptions }, parentOption.label)))] }) }))] })) })));
-}
-export default MultiSelectWithSearch;

package/build/components/MultiSelectWithSearch/ParentMenuItem.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box } from '@mui/material';
-import { rightArrow } from '../../constants/index.js';
-import MenuItem from '../MenuItem';
-import Menu from '../Menu';
-import { ChildMenuItem } from './ChildMenuItem';
-export function ParentMenuItem({ parentOption, selectedOptions, onChangeOptions, }) {
-    var _a;
-    const [parentMenuEl, setParentMenuEl] = useState(null);
-    return (_jsxs(MenuItem, Object.assign({ onMouseEnter: (e) => {
-            var _a;
-            if (((_a = parentOption.options) === null || _a === void 0 ? void 0 : _a.length) > 0)
-                setParentMenuEl(e.currentTarget);
-        }, onMouseLeave: () => {
-            if (parentMenuEl)
-                setParentMenuEl(null);
-        } }, { children: [_jsxs(Box, Object.assign({ sx: {
-                    display: 'flex',
-                    gap: '12px',
-                    justifyContent: 'space-between',
-                    flexGrow: 1,
-                    alignItems: 'center',
-                    maxWidth: '340px',
-                    minWidth: '89px',
-                } }, { children: [parentOption.label, _jsx("img", { src: rightArrow, className: "arrow-icon", alt: "arrow" })] })), _jsx(Menu, Object.assign({ sx: { maxHeight: '450px', overflow: 'auto' }, open: Boolean(parentMenuEl), anchorEl: parentMenuEl, placement: "right-start" }, { children: (_a = parentOption.options) === null || _a === void 0 ? void 0 : _a.map((childOption) => (_jsx(ChildMenuItem, { childOption: childOption, selectedOptions: selectedOptions, onChangeOptions: onChangeOptions }, childOption.label))) }))] })));
-}