@trafilea/afrodita-components 5.0.0-beta.46 → 5.0.0-beta.47

package/build/index.d.ts

@@ -102,6 +102,7 @@ declare type Filter = {
     title: string;
     columns: number;
     isOpenByDefault?: boolean;
+    isMultiselect: boolean;
     items: Array<{
         label: string;
         checked?: boolean;

package/build/index.esm.js

@@ -3934,8 +3934,13 @@ var Checkbox = function (_a) {
         if (disabled || !mounted.current) {
             return;
         }
-        onChange(isChecked);
-    }, [isChecked, onChange, disabled]);
+        if (checked !== isChecked) {
+            onChange(isChecked);
+        }
+    }, [isChecked, onChange, disabled, checked]);
+    useEffect(function () {
+        setIsChecked(checked);
+    }, [checked]);
     useEffect(function () {
         mounted.current = true;
     }, []);
@@ -16704,9 +16709,12 @@ var Filters = function (_a) {
     var handleCheckboxClick = useCallback(function (_a) {
         var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex, checked = _a.checked;
         setFilterSection({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
+        var currentFilter = filters[sectionIndex];
         setCheckedItems(function (prev) {
+            if (!currentFilter.isMultiselect)
+                resetCheckedItems(__spreadArray([], prev, true));
             return checked
-                ? __spreadArray(__spreadArray([], prev, true), [
+                ? __spreadArray(__spreadArray([], (currentFilter.isMultiselect ? prev : []), true), [
                     { sectionIndex: sectionIndex, itemIndex: itemIndex, label: filters[sectionIndex].items[itemIndex].label },
                 ], false) : prev.filter(function (item) { return item.sectionIndex !== sectionIndex || item.itemIndex !== itemIndex; });
         });
@@ -16717,7 +16725,7 @@ var Filters = function (_a) {
                 return __assign$1(__assign$1({}, filter), { items: filter.items.map(function (value, indexItems) {
                         return {
                             label: value.label,
-                            checked: itemIndex === indexItems ? checked : value.checked,
+                            checked: itemIndex === indexItems ? checked : filter.isMultiselect ? value.checked : false,
                         };
                     }) });
             });
@@ -16729,11 +16737,15 @@ var Filters = function (_a) {
         var element = document.getElementById("filter[".concat(sectionIndex, ",").concat(itemIndex, "]"));
         simulateMouseClick(element);
     };
-    var handleClearAllClick = function () {
-        checkedItems.forEach(function (item) {
+    var resetCheckedItems = function (items) {
+        items.forEach(function (item) {
             var sectionIndex = item.sectionIndex, itemIndex = item.itemIndex;
             handleCloseClick({ sectionIndex: sectionIndex, itemIndex: itemIndex });
         });
+    };
+    var handleClearAllClick = function () {
+        resetCheckedItems(checkedItems);
+        setCheckedItems([]);
         setFilter(function (prev) {
             return prev.map(function (filter) {
                 return __assign$1(__assign$1({}, filter), { items: filter.items.map(function (value) {
@@ -16746,18 +16758,14 @@ var Filters = function (_a) {
         });
         onResetValues();
     };
-    return (jsxs$1(Fragment$1, { children: [!isMobile ? (jsxs$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxs$1(Header, { children: [jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx$1(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx$1(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsx$1(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: sectionIndex }, itemIndex)); }) }), void 0) }), sectionIndex)); }), isMobile && (jsxs$1(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxs$1(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsx$1(MobileIconsContainer, { children: jsx$1(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx$1(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx$1(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
+    return (jsxs$1(Fragment$1, { children: [!isMobile ? (jsxs$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxs$1(Header, { children: [jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx$1(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx$1(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsx$1(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: sectionIndex }, "".concat(item.checked, "-").concat(item.label))); }) }), void 0) }), sectionIndex)); }), isMobile && (jsxs$1(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxs$1(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsx$1(MobileIconsContainer, { children: jsx$1(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx$1(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx$1(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
 };
 var FilterCheckbox = function (_a) {
     var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked;
-    var _b = React__default.useState(checked), defaultChecked = _b[0], setDefaultChecked = _b[1];
     var onChange = useCallback(function (checked) {
-        setDefaultChecked(checked);
-    }, []);
-    React__default.useEffect(function () {
-        onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: defaultChecked });
-    }, [sectionIndex, itemIndex, onChangeProp, defaultChecked]);
-    return (jsx$1(Checkbox, { onChange: onChange, checked: defaultChecked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
+        onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
+    }, [sectionIndex, itemIndex, onChangeProp]);
+    return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
 };
 
 var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 1rem 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 1rem 1rem;\n"])));