magneto365.ui 2.67.0 → 2.68.1-beta

package/dist/cjs/index.js

@@ -221,10 +221,31 @@ var ResponsiveContextProvider = function (_a) {
     return React__default["default"].createElement(ResponsiveContext.Provider, { value: { dim: dim } }, children);
 };
 
+var isClient = typeof window !== 'undefined';
+var isServer = !isClient;
+
+var ContainerContext = React.createContext({
+    container: isClient ? window.document.body : null
+});
+var ContainerContextProvider = function (_a) {
+    var children = _a.children, _b = _a.container, container = _b === void 0 ? null : _b;
+    var ctx = React.useMemo(function () {
+        var element = container;
+        if (!element && isClient) {
+            element = document.body;
+        }
+        return {
+            container: element
+        };
+    }, [container]);
+    return React__default["default"].createElement(ContainerContext.Provider, { value: ctx }, children);
+};
+
 var ContextAppProvider = function (_a) {
-    var children = _a.children, device = _a.device;
+    var children = _a.children, device = _a.device, container = _a.container;
     return (React__default["default"].createElement(EventDispatcherContextProvider, null,
-        React__default["default"].createElement(ResponsiveContextProvider, { device: device }, children)));
+        React__default["default"].createElement(ContainerContextProvider, { container: container },
+            React__default["default"].createElement(ResponsiveContextProvider, { device: device }, children))));
 };
 
 var screenList = Object.entries(screenSize).sort(function (a, b) { return a[1] - b[1]; });
@@ -642,6 +663,8 @@ var Youtube = "https://static.magneto365.com/lib/assets/f78dbede1bdf3dd0.svg";
 
 var YoutubeSolid = "https://static.magneto365.com/lib/assets/cdcc07646d43bd9d.svg";
 
+var FilterIcon = "https://static.magneto365.com/lib/assets/a9f25ebc43dd2922.svg";
+
 var Component$36 = function (_a) {
     var userImage = _a.userImage, fallbackImage = _a.fallbackImage, onClick = _a.onClick;
     var _b = React.useState(false), imageError = _b[0], setImageError = _b[1];
@@ -2654,7 +2677,7 @@ var Switch = function (_a) {
         title && React__default["default"].createElement("p", null, title)));
 };
 
-var style$Z = {"magneto-ui-tag":"mg_tag_magneto-ui-tag_y9bxc"};
+var style$Z = {"magneto-ui-tag":"mg_tag_magneto-ui-tag_13d15"};
 
 var Tags = function (_a) {
     var text = _a.text, onClick = _a.onClick, icon = _a.icon, _b = _a.bgColor, bgColor = _b === void 0 ? '#F4F4FA' : _b, _c = _a.textColor, textColor = _c === void 0 ? 'black' : _c;
@@ -3032,20 +3055,21 @@ var AlertJobModalButton = function (_a) {
 var DrawerPortal = function (_a) {
     var children = _a.children;
     var portalNode = React.useRef(null);
+    var container = React.useContext(ContainerContext).container;
     var _b = React.useState(false), mounted = _b[0], setMounted = _b[1];
     React.useEffect(function () {
-        if (!document)
+        if (isServer || !container)
             return;
         portalNode.current = document.createElement('div');
         portalNode.current.classList.add('magneto-ui-drawer');
-        document.body.appendChild(portalNode.current);
+        container.appendChild(portalNode.current);
         setMounted(true);
         return function () {
             if (portalNode.current) {
-                document.body.removeChild(portalNode.current);
+                container.removeChild(portalNode.current);
             }
         };
-    }, []);
+    }, [container]);
     return mounted && portalNode.current ? ReactDOM__default["default"].createPortal(children, portalNode.current) : null;
 };
 
@@ -3094,21 +3118,22 @@ var styles$2i = {"magneto-ui-modal":"mg_modal_magneto-ui-modal_1ffsw","magneto-u
 
 var ModalPortal = function (_a) {
     var children = _a.children;
+    var container = React.useContext(ContainerContext).container;
     var portalNode = React.useRef(null);
     var _b = React.useState(false), mounted = _b[0], setMounted = _b[1];
     React.useEffect(function () {
-        if (!document)
+        if (isServer || !container)
             return;
         portalNode.current = document.createElement('div');
         portalNode.current.classList.add('modal-ui-drawer');
-        document.body.appendChild(portalNode.current);
+        container.appendChild(portalNode.current);
         setMounted(true);
         return function () {
             if (portalNode.current) {
-                document.body.removeChild(portalNode.current);
+                container.removeChild(portalNode.current);
             }
         };
-    }, []);
+    }, [container]);
     return mounted && portalNode.current ? ReactDOM__default["default"].createPortal(children, portalNode.current) : null;
 };
 
@@ -3290,6 +3315,7 @@ var BrandsMenuMobile = function (_a) {
 
 var withClickOut = function (WrappedComponent) {
     var Component = function (props) {
+        var container = React.useContext(ContainerContext).container;
         var _a = React.useState(false), clickOut = _a[0], setClickOut = _a[1];
         var ref = React.useRef(null);
         var handleClick = React.useCallback(function (e) {
@@ -3300,11 +3326,11 @@ var withClickOut = function (WrappedComponent) {
             }
         }, [clickOut]);
         React.useEffect(function () {
-            document.addEventListener('click', handleClick);
+            container === null || container === void 0 ? void 0 : container.addEventListener('click', handleClick);
             return function () {
-                document.removeEventListener('click', handleClick);
+                container === null || container === void 0 ? void 0 : container.removeEventListener('click', handleClick);
             };
-        }, [handleClick]);
+        }, [handleClick, container]);
         return (React__default["default"].createElement("div", { ref: ref },
             React__default["default"].createElement(WrappedComponent, __assign({ clickOut: clickOut, setClickOut: setClickOut }, props))));
     };
@@ -4144,7 +4170,7 @@ var FilterContainerMenu = function (_a) {
     return React__default["default"].createElement("div", { className: style$P["".concat(classMUI, "-filter-container")] }, children);
 };
 
-var styles$1S = {"magneto-ui-filter-item":"mg_filter_menu_item_magneto-ui-filter-item_m5cdm","selected":"mg_filter_menu_item_selected_m5cdm","disabled":"mg_filter_menu_item_disabled_m5cdm","isSearched":"mg_filter_menu_item_isSearched_m5cdm","skeleton":"mg_filter_menu_item_skeleton_m5cdm","shimmer":"mg_filter_menu_item_shimmer_m5cdm"};
+var styles$1S = {"magneto-ui-filter-item":"mg_filter_menu_item_magneto-ui-filter-item_1wlwy","magneto-ui-filter-item__counter":"mg_filter_menu_item_magneto-ui-filter-item_counter_1wlwy","selected":"mg_filter_menu_item_selected_1wlwy","disabled":"mg_filter_menu_item_disabled_1wlwy","isSearched":"mg_filter_menu_item_isSearched_1wlwy","skeleton":"mg_filter_menu_item_skeleton_1wlwy","shimmer":"mg_filter_menu_item_shimmer_1wlwy"};
 
 var FilterMenuItem = function (_a) {
     var id = _a.id, label = _a.label, total = _a.total, field = _a.field, multiple = _a.multiple, loading = _a.loading, type = _a.type, isApplied = _a.isApplied, hasTotal = _a.hasTotal, _b = _a.isSearched, isSearched = _b === void 0 ? false : _b, customClass = _a.customClass, customId = _a.customId, _c = _a.hiddenCount, hiddenCount = _c === void 0 ? false : _c, setIsApplied = _a.setIsApplied, props = __rest(_a, ["id", "label", "total", "field", "multiple", "loading", "type", "isApplied", "hasTotal", "isSearched", "customClass", "customId", "hiddenCount", "setIsApplied"]);
@@ -4153,7 +4179,7 @@ var FilterMenuItem = function (_a) {
             return React__default["default"].createElement(IconItem, { icon: SmallClose, size: 17 });
         if (!hasTotal || hiddenCount)
             return React__default["default"].createElement(React.Fragment, null);
-        return React__default["default"].createElement("output", null, formatNumber(total));
+        return React__default["default"].createElement("div", { className: styles$1S['magneto-ui-filter-item__counter'] }, formatNumber(total));
     }, [total, isApplied, hasTotal, hiddenCount]);
     var disabled = React.useMemo(function () {
         return isSearched || isApplied || hiddenCount ? false : !total;
@@ -4172,7 +4198,7 @@ var FilterMenuItem = function (_a) {
         displayOutput));
 };
 
-var styles$1R = {"magneto-ui-filter-search":"mg_filter_search_item_magneto-ui-filter-search_1ibtk","disabled":"mg_filter_search_item_disabled_1ibtk","skeleton":"mg_filter_search_item_skeleton_1ibtk","shimmer":"mg_filter_search_item_shimmer_1ibtk"};
+var styles$1R = {"magneto-ui-filter-search":"mg_filter_search_item_magneto-ui-filter-search_14sdz","disabled":"mg_filter_search_item_disabled_14sdz","skeleton":"mg_filter_search_item_skeleton_14sdz","shimmer":"mg_filter_search_item_shimmer_14sdz"};
 
 var FilterSearchItem = function (_a) {
     var placeholder = _a.placeholder, _b = _a.disabled, disabled = _b === void 0 ? false : _b, loading = _a.loading, handleSearch = _a.handleSearch;
@@ -5214,6 +5240,7 @@ var Component$1B = function (_a) {
     var _g = React.useState(false), isAnimating = _g[0], setIsAnimating = _g[1];
     var removeTimeoutRef = React.useRef(null);
     var hideTimeoutRef = React.useRef(null);
+    var container = React.useContext(ContainerContext).container;
     var containerVar = React.useMemo(function () { return ({
         '--transition-duration': "".concat(transitionDuration / 1000, "s")
     }); }, []);
@@ -5258,13 +5285,13 @@ var Component$1B = function (_a) {
         setLocalVisible(visible);
         setIsAnimating(visible);
     }, [isAnimating, visible]);
-    return localVisible
+    return localVisible && container
         ? ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { style: containerVar, className: CNM.get({ styles: styles$1r, cls: [className] }) },
             React__default["default"].createElement("div", { className: containerStyles },
                 React__default["default"].createElement(IconItem, __assign({ alt: type, className: CNM.get({ styles: styles$1r, cls: ['message__icon'] }), icon: iconByType[type], showDefaultFallback: false, size: 20 }, iconProps)),
                 React__default["default"].createElement("div", null,
                     text && React__default["default"].createElement("span", { className: textStyles(!!description) }, text),
-                    description && React__default["default"].createElement("span", { className: textStyles() }, description)))), document.body)
+                    description && React__default["default"].createElement("span", { className: textStyles() }, description)))), container)
         : null;
 };
 /**
@@ -5510,7 +5537,7 @@ var RightsReservedText = function (_a) {
         React__default["default"].createElement("p", null, magnetoRightsText)));
 };
 
-var styles$1k = {"magneto-ui-score-level":"mg_score_level_magneto-ui-score-level_thedx","magneto-ui-score-level__summary":"mg_score_level_magneto-ui-score-level_summary_thedx","magneto-ui-score-level__delete-action":"mg_score_level_magneto-ui-score-level_delete-action_thedx"};
+var styles$1k = {"magneto-ui-score-level":"mg_score_level_magneto-ui-score-level_yz7nl","magneto-ui-score-level__p":"mg_score_level_magneto-ui-score-level_p_yz7nl","magneto-ui-score-level__summary":"mg_score_level_magneto-ui-score-level_summary_yz7nl","magneto-ui-score-level__delete-action":"mg_score_level_magneto-ui-score-level_delete-action_yz7nl"};
 
 var Component$1x = function (_a) {
     var name = _a.name, onChange = _a.onChange, removeSkill = _a.removeSkill, scoreValue = _a.scoreValue, levels = _a.levels, color = _a.color, id = _a.id;
@@ -5541,7 +5568,7 @@ var Component$1x = function (_a) {
         return { backgroundColor: '#c4c4c4' };
     }, [color, score, spanHover]);
     return (React__default["default"].createElement("div", { className: styles$1k['magneto-ui-score-level'] },
-        React__default["default"].createElement("p", null, name),
+        React__default["default"].createElement("p", { className: styles$1k['magneto-ui-score-level__p'] }, name),
         React__default["default"].createElement("div", { className: styles$1k['magneto-ui-score-level__summary'] },
             React__default["default"].createElement("div", null, levels.map(function (_, index) { return (React__default["default"].createElement("span", { onMouseOver: function () { return setSpanHover(index + 1); }, onMouseLeave: function () { return setSpanHover(0); }, style: setDinamycColor(index + 1), key: generateID(), onClick: function () { return handleScoreChange(index + 1); } })); })),
             React__default["default"].createElement("p", null, labelScore)),
@@ -6302,38 +6329,72 @@ var Component$13 = function (_a) {
 };
 var DrawerMenu = Component$13;
 
-var styles$V = {"magneto-ui-filter-card":"mg_filter_card_magneto-ui-filter-card_1ex6b","magneto-ui-filter-card_header":"mg_filter_card_magneto-ui-filter-card_header_1ex6b","magneto-ui-filter-card_options":"mg_filter_card_magneto-ui-filter-card_options_1ex6b","hasSearch":"mg_filter_card_hasSearch_1ex6b"};
+var styles$V = {"magneto-ui-filter-card":"mg_filter_card_magneto-ui-filter-card_yypjj","magneto-ui-filter-card__search":"mg_filter_card_magneto-ui-filter-card_search_yypjj","magneto-ui-filter-card_header":"mg_filter_card_magneto-ui-filter-card_header_yypjj","magneto-ui-filter-card_header--arrow":"mg_filter_card_magneto-ui-filter-card_header--arrow_yypjj","--open":"mg_filter_card_--open_yypjj","magneto-ui-filter-card_options":"mg_filter_card_magneto-ui-filter-card_options_yypjj","hasSearch":"mg_filter_card_hasSearch_yypjj"};
 
 var FilterCard = function (_a) {
-    var label = _a.label, values = _a.values, renderType = _a.renderType, _b = _a.searchPlaceholder, searchPlaceholder = _b === void 0 ? '' : _b, _c = _a.switchText, switchText = _c === void 0 ? '' : _c, setIsApplied = _a.setIsApplied, props = __rest(_a, ["label", "values", "renderType", "searchPlaceholder", "switchText", "setIsApplied"]);
-    var _d = React.useState([]), options = _d[0], setOptions = _d[1];
-    React.useEffect(function () {
-        var appliedOptions = values.filter(function (opt) { return opt.isApplied; });
-        var unAppliedOptions = values.filter(function (opt) { return !opt.isApplied; });
-        setOptions(__spreadArray(__spreadArray([], appliedOptions, true), unAppliedOptions, true));
-    }, [values]);
+    var label = _a.label, values = _a.values, renderType = _a.renderType, _b = _a.searchPlaceholder, searchPlaceholder = _b === void 0 ? '' : _b, _c = _a.switchText, switchText = _c === void 0 ? '' : _c, setIsApplied = _a.setIsApplied, index = _a.index, setCurrentOpenFilter = _a.setCurrentOpenFilter, showFilters = _a.showFilters, props = __rest(_a, ["label", "values", "renderType", "searchPlaceholder", "switchText", "setIsApplied", "index", "setCurrentOpenFilter", "showFilters"]);
+    var _d = React.useState(values), options = _d[0], setOptions = _d[1];
+    var _e = React.useState(showFilters), showItems = _e[0], setShowItems = _e[1];
     var hasSearch = React.useMemo(function () { return renderType === ERenderType.multiSelect; }, [renderType]);
     var hasTotal = React.useMemo(function () { return !values.find(function (value) { return value.isApplied; }); }, [values]);
+    var appliedOption = React.useMemo(function () {
+        var option = options.find(function (_a) {
+            var isApplied = _a.isApplied;
+            return isApplied;
+        });
+        if (option != undefined)
+            setShowItems(true);
+        return option;
+    }, [options]);
+    var hasntOptions = React.useMemo(function () { return options.every(function (_a) {
+        var total = _a.total;
+        return total == 0 || total == undefined;
+    }); }, [options]);
+    var isInteractiveSection = React.useMemo(function () { return !hasntOptions && !appliedOption; }, [hasntOptions, appliedOption]);
     var handleSearch = React.useCallback(function (event) {
         event.preventDefault();
-        var appliedOptions = values.filter(function (opt) { return opt.isApplied; });
         var searchedOptions = values.filter(function (opt) { return opt.label.toLowerCase().includes(event.target.value.toLowerCase()); });
-        setOptions(__spreadArray(__spreadArray([], appliedOptions, true), searchedOptions, true));
+        setOptions(searchedOptions);
     }, [values, setOptions]);
+    var handleShowItems = React.useCallback(function () {
+        if (!showItems)
+            setCurrentOpenFilter(index);
+        else
+            setCurrentOpenFilter(99);
+        setShowItems(!showItems);
+    }, [showItems, index, setCurrentOpenFilter]);
+    var renderItem = React.useCallback(function (opt, key) {
+        if (key === void 0) { key = 0; }
+        var optProps = __assign(__assign(__assign({}, props), opt), { hasTotal: hasTotal, setIsApplied: setIsApplied, type: props.type });
+        return React__default["default"].createElement(FilterMenuItem, __assign({ key: "".concat(key, "-").concat(opt.label) }, optProps));
+    }, [hasTotal, setIsApplied, props]);
+    var optionsRendered = React.useMemo(function () {
+        if (appliedOption)
+            return renderItem(appliedOption);
+        if (hasntOptions)
+            return React__default["default"].createElement(React.Fragment, null);
+        return options.map(renderItem);
+    }, [options, appliedOption, renderItem, hasntOptions]);
+    React.useEffect(function () {
+        setOptions(values);
+    }, [values]);
+    React.useEffect(function () {
+        if (!appliedOption && !hasntOptions && showFilters != showItems)
+            setShowItems(showFilters);
+    }, [showFilters, appliedOption, hasntOptions, showItems]);
     if (!values.length)
         return React__default["default"].createElement(React.Fragment, null);
-    return (React__default["default"].createElement("article", { className: "".concat(styles$V['magneto-ui-filter-card'], " ").concat(hasSearch && styles$V.hasSearch) },
-        React__default["default"].createElement("div", { className: styles$V['magneto-ui-filter-card_header'] },
+    return (React__default["default"].createElement("article", { className: "".concat(styles$V["magneto-ui-filter-card"], " ").concat(hasSearch && showItems && isInteractiveSection ? styles$V.hasSearch : '') },
+        React__default["default"].createElement("div", { className: "".concat(styles$V["magneto-ui-filter-card_header"], " ").concat(styles$V[showItems ? '--open' : '']), onClick: isInteractiveSection ? handleShowItems : undefined },
             React__default["default"].createElement("p", null, label),
-            switchText && (React__default["default"].createElement(Switch, { title: switchText, setIsActive: function (value) { return console.log('Change isActive', value); }, isActive: true }))),
-        hasSearch && (React__default["default"].createElement(FilterSearchItem, { loading: props.loading, placeholder: searchPlaceholder, handleSearch: handleSearch })),
-        React__default["default"].createElement("div", { className: styles$V['magneto-ui-filter-card_options'] }, options.map(function (opt, key) {
-            var optProps = __assign(__assign(__assign({}, props), opt), { hasTotal: hasTotal, setIsApplied: setIsApplied, type: props.type });
-            return React__default["default"].createElement(FilterMenuItem, __assign({ key: "".concat(key, "-").concat(opt.label) }, optProps));
-        }))));
+            switchText && (React__default["default"].createElement(Switch, { title: switchText, setIsActive: function (value) { return console.log('Change isActive', value); }, isActive: true })),
+            isInteractiveSection && (React__default["default"].createElement(IconItem, { icon: ArrowDown2, size: 16, className: styles$V["magneto-ui-filter-card_header--arrow"] }))),
+        showItems && isInteractiveSection && hasSearch && (React__default["default"].createElement("div", { className: styles$V['magneto-ui-filter-card__search'] },
+            React__default["default"].createElement(FilterSearchItem, { loading: props.loading, placeholder: searchPlaceholder, handleSearch: handleSearch }))),
+        showItems && React__default["default"].createElement("div", { className: styles$V['magneto-ui-filter-card_options'] }, optionsRendered)));
 };
 
-var styles$U = {"magneto-ui-filter-header":"mg_filter_header_magneto-ui-filter-header_c34vr","magneto-ui-filter-header_title":"mg_filter_header_magneto-ui-filter-header_title_c34vr","magneto-ui-filter-header_clean":"mg_filter_header_magneto-ui-filter-header_clean_c34vr","magneto-ui-filter-header_btn":"mg_filter_header_magneto-ui-filter-header_btn_c34vr","magneto-ui-filter-header_switch":"mg_filter_header_magneto-ui-filter-header_switch_c34vr","magneto-ui-filter-header_summary":"mg_filter_header_magneto-ui-filter-header_summary_c34vr","disabled":"mg_filter_header_disabled_c34vr"};
+var styles$U = {"magneto-ui-filter-header":"mg_filter_header_magneto-ui-filter-header_dd3me","magneto-ui-filter-header_title":"mg_filter_header_magneto-ui-filter-header_title_dd3me","magneto-ui-filter-header_clean":"mg_filter_header_magneto-ui-filter-header_clean_dd3me","magneto-ui-filter-header_btn":"mg_filter_header_magneto-ui-filter-header_btn_dd3me","magneto-ui-filter-header_switch":"mg_filter_header_magneto-ui-filter-header_switch_dd3me","magneto-ui-filter-header_summary":"mg_filter_header_magneto-ui-filter-header_summary_dd3me","disabled":"mg_filter_header_disabled_dd3me"};
 
 var FilterHeader = function (_a) {
     var title = _a.title, buttonText = _a.buttonText, filterSummary = _a.filterSummary, totalApplied = _a.totalApplied, clearFilters = _a.clearFilters, switchText = _a.switchText;
@@ -6357,7 +6418,9 @@ var FilterHeader = function (_a) {
     }, [filterSummary]);
     return (React__default["default"].createElement("article", { className: styles$U['magneto-ui-filter-header'] },
         React__default["default"].createElement("div", { className: styles$U['magneto-ui-filter-header_title'] },
-            React__default["default"].createElement("p", null, title),
+            React__default["default"].createElement("p", null,
+                React__default["default"].createElement(IconItem, { icon: FilterIcon, size: 16 }),
+                title),
             displayBtnClear),
         switchText && (React__default["default"].createElement(Switch
         //TODO: review isActive, setIsActive
@@ -7508,6 +7571,7 @@ var useContainerDesktop$1 = function (_a) {
 var ContainerDesktop$3 = function (_a) {
     var inputSearchProps = _a.inputSearchProps, selectedValues = _a.selectedValues, listOptions = _a.listOptions, removeValueToArray = _a.removeValueToArray, addValueToArray = _a.addValueToArray, numberOfSelectable = _a.numberOfSelectable, dropDownTitle = _a.dropDownTitle;
     var _b = useContainerDesktop$1({ numberOfSelectable: numberOfSelectable, selectedValues: selectedValues }), containerOptions = _b.containerOptions, menuPosition = _b.menuPosition, toggleDropdown = _b.toggleDropdown, limitOfSelectable = _b.limitOfSelectable, inputRef = _b.inputRef, isOpen = _b.isOpen, dropdownRef = _b.dropdownRef;
+    var container = React.useContext(ContainerContext).container;
     var hideComponent = React.useMemo(function () {
         return isOpen ? style$f['hide'] : '';
     }, [isOpen]);
@@ -7516,6 +7580,7 @@ var ContainerDesktop$3 = function (_a) {
             React__default["default"].createElement(DropDownButton$1, { title: dropDownTitle, onClick: toggleDropdown }))),
         React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options-tags-container")], " ").concat(hideComponent) }, selectedValues.map(function (itemSelected) { return (React__default["default"].createElement(Tags, { key: itemSelected.id, text: itemSelected.name, icon: Close, bgColor: "#FFF", onClick: function () { return removeValueToArray(itemSelected); } })); })),
         React__default["default"].createElement("div", { ref: containerOptions, className: "".concat(style$f["".concat(classMUI, "-container-options")]) }, isOpen &&
+            container &&
             ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { style: {
                     position: 'absolute',
                     top: "".concat(menuPosition.top - 60, "px "),
@@ -7525,7 +7590,7 @@ var ContainerDesktop$3 = function (_a) {
                 }, ref: dropdownRef, className: "".concat(style$f["".concat(classMUI, "-container-options__menu")]) },
                 inputSearchProps && React__default["default"].createElement(InputSearch, __assign({}, inputSearchProps)),
                 React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--tags")]) }, selectedValues.map(function (itemSelected) { return (React__default["default"].createElement(Tags, { key: itemSelected.id, text: itemSelected.name, icon: Close, bgColor: "#F4F4FA", onClick: function () { return removeValueToArray(itemSelected); } })); })),
-                React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem$1, { disable: !limitOfSelectable || selectedValues.includes(value), key: value.id, onClick: function () { return addValueToArray(value); }, text: value.name })); }))), document.body))));
+                React__default["default"].createElement("div", { className: "".concat(style$f["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem$1, { disable: !limitOfSelectable || selectedValues.includes(value), key: value.id, onClick: function () { return addValueToArray(value); }, text: value.name })); }))), container))));
 };
 
 var style$e = {"magneto-ui-container-options":"mg_container_mobile_magneto-ui-container-options_1caxk","magneto-ui-container-options-tags-container":"mg_container_mobile_magneto-ui-container-options-tags-container_1caxk","magneto-ui-container-options__menu":"mg_container_mobile_magneto-ui-container-options_menu_1caxk","magneto-ui-container-options__menu--tags":"mg_container_mobile_magneto-ui-container-options_menu--tags_1caxk","magneto-ui-container-options__menu--list":"mg_container_mobile_magneto-ui-container-options_menu--list_1caxk"};
@@ -8097,10 +8162,12 @@ var useContainerDesktop = function (_a) {
 var ContainerDesktop$1 = function (_a) {
     var listOptions = _a.listOptions, addValue = _a.addValue, dropDownTitle = _a.dropDownTitle, selectedValue = _a.selectedValue;
     var _b = useContainerDesktop({ addValue: addValue }), containerOptions = _b.containerOptions, menuPosition = _b.menuPosition, toggleDropdown = _b.toggleDropdown, isOpen = _b.isOpen, dropdownRef = _b.dropdownRef, inputRef = _b.inputRef, selectValue = _b.selectValue;
+    var container = React.useContext(ContainerContext).container;
     return (React__default["default"].createElement("div", { style: { zIndex: 999999 } },
         React__default["default"].createElement("div", { ref: inputRef },
             React__default["default"].createElement(DropDownButton, { title: dropDownTitle, onClick: toggleDropdown })),
         React__default["default"].createElement("div", { ref: containerOptions, className: "".concat(style$b["".concat(classMUI, "-container-options")]) }, isOpen &&
+            container &&
             ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { style: {
                     position: 'absolute',
                     top: "".concat(menuPosition.top - 8, "px "),
@@ -8108,7 +8175,7 @@ var ContainerDesktop$1 = function (_a) {
                     width: "".concat(menuPosition.width, "px"),
                     zIndex: 999999
                 }, ref: dropdownRef, className: "".concat(style$b["".concat(classMUI, "-container-options__menu")]) },
-                React__default["default"].createElement("div", { className: "".concat(style$b["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem, { selected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, disable: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, key: value.id, onClick: function () { return selectValue(value.id); }, text: value.label })); }))), document.body))));
+                React__default["default"].createElement("div", { className: "".concat(style$b["".concat(classMUI, "-container-options__menu--list")]) }, listOptions.map(function (value) { return (React__default["default"].createElement(SelectItem, { selected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, disable: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.id) === value.id, key: value.id, onClick: function () { return selectValue(value.id); }, text: value.label })); }))), container))));
 };
 
 var style$a = {"magneto-ui-container-options":"mg_container_mobile_magneto-ui-container-options_16tb3","magneto-ui-container-options__menu":"mg_container_mobile_magneto-ui-container-options_menu_16tb3","magneto-ui-container-options__menu--list":"mg_container_mobile_magneto-ui-container-options_menu--list_16tb3"};
@@ -9470,10 +9537,11 @@ var CardByRenderType = function (_a) {
     return React__default["default"].createElement(CardByRenderType, __assign({ renderType: renderType }, props));
 };
 
-var styles$1 = {"magneto-iu-side-filter":"mg_side_filter_magneto-iu-side-filter_11nkr","open":"mg_side_filter_open_11nkr","magneto-ui-side-filter_btn__close":"mg_side_filter_magneto-ui-side-filter_btn_close_11nkr","magneto-ui-side-filter_btn__main":"mg_side_filter_magneto-ui-side-filter_btn_main_11nkr","btn_main-open":"mg_side_filter_btn_main-open_11nkr","magneto-iu-side-filter_content":"mg_side_filter_magneto-iu-side-filter_content_11nkr","magneto-iu-side-filter_background":"mg_side_filter_magneto-iu-side-filter_background_11nkr","fadeIn":"mg_side_filter_fadeIn_11nkr"};
+var styles$1 = {"magneto-iu-side-filter":"mg_side_filter_magneto-iu-side-filter_1jmbj","open":"mg_side_filter_open_1jmbj","magneto-ui-side-filter_btn__close":"mg_side_filter_magneto-ui-side-filter_btn_close_1jmbj","magneto-ui-side-filter_btn__main":"mg_side_filter_magneto-ui-side-filter_btn_main_1jmbj","btn_main-open":"mg_side_filter_btn_main-open_1jmbj","magneto-iu-side-filter_content":"mg_side_filter_magneto-iu-side-filter_content_1jmbj","magneto-iu-side-filter_background":"mg_side_filter_magneto-iu-side-filter_background_1jmbj","fadeIn":"mg_side_filter_fadeIn_1jmbj"};
 
 var SideFilter = function (_a) {
     var title = _a.title, _b = _a.filters, filters = _b === void 0 ? [] : _b, totalAppliedFilters = _a.totalAppliedFilters, filterSummary = _a.filterSummary, buttonText = _a.buttonText, loading = _a.loading, isFiltersOpen = _a.isFiltersOpen, textBtnMain = _a.textBtnMain, titleBtnClose = _a.titleBtnClose, setIsFiltersOpen = _a.setIsFiltersOpen, setIsApplied = _a.setIsApplied, clearFilters = _a.clearFilters, unApplyWithChild = _a.unApplyWithChild, getOptionsOnLoad = _a.getOptionsOnLoad, getOptionsOnSearch = _a.getOptionsOnSearch;
+    var _c = React.useState(99), currentOpenFilter = _c[0], setCurrentOpenFilter = _c[1];
     var cardProps = React.useMemo(function () {
         return {
             setIsApplied: setIsApplied,
@@ -9495,9 +9563,9 @@ var SideFilter = function (_a) {
     var displayFilters = React.useMemo(function () {
         var renderFilters = filters.length ? filters : defaultFilters;
         return renderFilters === null || renderFilters === void 0 ? void 0 : renderFilters.map(function (item, i) {
-            return React__default["default"].createElement(CardByRenderType, __assign({ key: "".concat(i, "-").concat(item.field) }, item, cardProps));
+            return (React__default["default"].createElement(CardByRenderType, __assign({ key: "".concat(i, "-").concat(item.field) }, item, { index: i, showFilters: currentOpenFilter === i, setCurrentOpenFilter: setCurrentOpenFilter }, cardProps)));
         });
-    }, [filters, cardProps]);
+    }, [filters, cardProps, currentOpenFilter]);
     var displayBtnMain = React.useMemo(function () {
         if (!totalAppliedFilters)
             return React__default["default"].createElement(React.Fragment, null);