magneto365.ui 2.68.0 → 2.68.1-beta

package/dist/esm/index.js

@@ -654,6 +654,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 = useState(false), imageError = _b[0], setImageError = _b[1];
@@ -2666,7 +2668,7 @@ var Switch = function (_a) {
         title && React.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;
@@ -4159,7 +4161,7 @@ var FilterContainerMenu = function (_a) {
     return React.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"]);
@@ -4168,7 +4170,7 @@ var FilterMenuItem = function (_a) {
             return React.createElement(IconItem, { icon: SmallClose, size: 17 });
         if (!hasTotal || hiddenCount)
             return React.createElement(Fragment, null);
-        return React.createElement("output", null, formatNumber(total));
+        return React.createElement("div", { className: styles$1S['magneto-ui-filter-item__counter'] }, formatNumber(total));
     }, [total, isApplied, hasTotal, hiddenCount]);
     var disabled = useMemo(function () {
         return isSearched || isApplied || hiddenCount ? false : !total;
@@ -4187,7 +4189,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;
@@ -5526,7 +5528,7 @@ var RightsReservedText = function (_a) {
         React.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;
@@ -5557,7 +5559,7 @@ var Component$1x = function (_a) {
         return { backgroundColor: '#c4c4c4' };
     }, [color, score, spanHover]);
     return (React.createElement("div", { className: styles$1k['magneto-ui-score-level'] },
-        React.createElement("p", null, name),
+        React.createElement("p", { className: styles$1k['magneto-ui-score-level__p'] }, name),
         React.createElement("div", { className: styles$1k['magneto-ui-score-level__summary'] },
             React.createElement("div", null, levels.map(function (_, index) { return (React.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.createElement("p", null, labelScore)),
@@ -6318,38 +6320,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 = useState([]), options = _d[0], setOptions = _d[1];
-    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 = useState(values), options = _d[0], setOptions = _d[1];
+    var _e = useState(showFilters), showItems = _e[0], setShowItems = _e[1];
     var hasSearch = useMemo(function () { return renderType === ERenderType.multiSelect; }, [renderType]);
     var hasTotal = useMemo(function () { return !values.find(function (value) { return value.isApplied; }); }, [values]);
+    var appliedOption = useMemo(function () {
+        var option = options.find(function (_a) {
+            var isApplied = _a.isApplied;
+            return isApplied;
+        });
+        if (option != undefined)
+            setShowItems(true);
+        return option;
+    }, [options]);
+    var hasntOptions = useMemo(function () { return options.every(function (_a) {
+        var total = _a.total;
+        return total == 0 || total == undefined;
+    }); }, [options]);
+    var isInteractiveSection = useMemo(function () { return !hasntOptions && !appliedOption; }, [hasntOptions, appliedOption]);
     var handleSearch = 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 = useCallback(function () {
+        if (!showItems)
+            setCurrentOpenFilter(index);
+        else
+            setCurrentOpenFilter(99);
+        setShowItems(!showItems);
+    }, [showItems, index, setCurrentOpenFilter]);
+    var renderItem = 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.createElement(FilterMenuItem, __assign({ key: "".concat(key, "-").concat(opt.label) }, optProps));
+    }, [hasTotal, setIsApplied, props]);
+    var optionsRendered = useMemo(function () {
+        if (appliedOption)
+            return renderItem(appliedOption);
+        if (hasntOptions)
+            return React.createElement(Fragment, null);
+        return options.map(renderItem);
+    }, [options, appliedOption, renderItem, hasntOptions]);
+    useEffect(function () {
+        setOptions(values);
+    }, [values]);
+    useEffect(function () {
+        if (!appliedOption && !hasntOptions && showFilters != showItems)
+            setShowItems(showFilters);
+    }, [showFilters, appliedOption, hasntOptions, showItems]);
     if (!values.length)
         return React.createElement(Fragment, null);
-    return (React.createElement("article", { className: "".concat(styles$V['magneto-ui-filter-card'], " ").concat(hasSearch && styles$V.hasSearch) },
-        React.createElement("div", { className: styles$V['magneto-ui-filter-card_header'] },
+    return (React.createElement("article", { className: "".concat(styles$V["magneto-ui-filter-card"], " ").concat(hasSearch && showItems && isInteractiveSection ? styles$V.hasSearch : '') },
+        React.createElement("div", { className: "".concat(styles$V["magneto-ui-filter-card_header"], " ").concat(styles$V[showItems ? '--open' : '']), onClick: isInteractiveSection ? handleShowItems : undefined },
             React.createElement("p", null, label),
-            switchText && (React.createElement(Switch, { title: switchText, setIsActive: function (value) { return console.log('Change isActive', value); }, isActive: true }))),
-        hasSearch && (React.createElement(FilterSearchItem, { loading: props.loading, placeholder: searchPlaceholder, handleSearch: handleSearch })),
-        React.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.createElement(FilterMenuItem, __assign({ key: "".concat(key, "-").concat(opt.label) }, optProps));
-        }))));
+            switchText && (React.createElement(Switch, { title: switchText, setIsActive: function (value) { return console.log('Change isActive', value); }, isActive: true })),
+            isInteractiveSection && (React.createElement(IconItem, { icon: ArrowDown2, size: 16, className: styles$V["magneto-ui-filter-card_header--arrow"] }))),
+        showItems && isInteractiveSection && hasSearch && (React.createElement("div", { className: styles$V['magneto-ui-filter-card__search'] },
+            React.createElement(FilterSearchItem, { loading: props.loading, placeholder: searchPlaceholder, handleSearch: handleSearch }))),
+        showItems && React.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;
@@ -6373,7 +6409,9 @@ var FilterHeader = function (_a) {
     }, [filterSummary]);
     return (React.createElement("article", { className: styles$U['magneto-ui-filter-header'] },
         React.createElement("div", { className: styles$U['magneto-ui-filter-header_title'] },
-            React.createElement("p", null, title),
+            React.createElement("p", null,
+                React.createElement(IconItem, { icon: FilterIcon, size: 16 }),
+                title),
             displayBtnClear),
         switchText && (React.createElement(Switch
         //TODO: review isActive, setIsActive
@@ -9490,10 +9528,11 @@ var CardByRenderType = function (_a) {
     return React.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 = useState(99), currentOpenFilter = _c[0], setCurrentOpenFilter = _c[1];
     var cardProps = useMemo(function () {
         return {
             setIsApplied: setIsApplied,
@@ -9515,9 +9554,9 @@ var SideFilter = function (_a) {
     var displayFilters = useMemo(function () {
         var renderFilters = filters.length ? filters : defaultFilters;
         return renderFilters === null || renderFilters === void 0 ? void 0 : renderFilters.map(function (item, i) {
-            return React.createElement(CardByRenderType, __assign({ key: "".concat(i, "-").concat(item.field) }, item, cardProps));
+            return (React.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 = useMemo(function () {
         if (!totalAppliedFilters)
             return React.createElement(Fragment, null);