@trafilea/afrodita-components 5.0.0-beta.19 → 5.0.0-beta.21

package/build/index.js

@@ -10642,8 +10642,11 @@ var Container$8 = newStyled.div({
     display: 'flex',
 });
 var SearchBar = function (_a) {
-    var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults;
+    var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults, initialTerm = _a.initialTerm;
     var theme = useTheme();
+    if (initialTerm) {
+        initialState$1.term = initialTerm;
+    }
     var _b = React$2.useReducer(reducer, initialState$1), state = _b[0], dispatch = _b[1];
     var ref = React$2.useRef(null);
     var shouldDisplaySuggestion = function () {
@@ -15079,17 +15082,39 @@ var MobileClearContainer = newStyled.div(templateObject_8 || (templateObject_8 =
 var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8;
 
 var Filters = function (_a) {
-    var filters = _a.filters, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
+    var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
     var theme = useTheme();
-    var _c = React__default["default"].useState([]), checkedItems = _c[0], setCheckedItems = _c[1];
+    var _c = React$2.useState(values), filters = _c[0], setFilter = _c[1];
+    var _d = React$2.useState([]), checkedItems = _d[0], setCheckedItems = _d[1];
+    var _e = React$2.useState(), filterState = _e[0], setFilterSection = _e[1];
+    React$2.useEffect(function () {
+        if (filters.length && filterState) {
+            onChange(filters, filterState);
+        }
+    }, [filterState, filters, onChange]);
     var handleCheckboxClick = React$2.useCallback(function (_a) {
         var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex, checked = _a.checked;
-        onChange({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
+        setFilterSection({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
         setCheckedItems(function (prev) {
             return checked
-                ? __spreadArray(__spreadArray([], prev, true), [{ sectionIndex: sectionIndex, itemIndex: itemIndex, label: filters[sectionIndex].items[itemIndex] }], false) : prev.filter(function (item) { return item.sectionIndex !== sectionIndex || item.itemIndex !== itemIndex; });
+                ? __spreadArray(__spreadArray([], prev, true), [
+                    { sectionIndex: sectionIndex, itemIndex: itemIndex, label: filters[sectionIndex].items[itemIndex].label },
+                ], false) : prev.filter(function (item) { return item.sectionIndex !== sectionIndex || item.itemIndex !== itemIndex; });
+        });
+        setFilter(function (prev) {
+            return prev.map(function (filter, indexSection) {
+                if (sectionIndex !== indexSection)
+                    return filter;
+                return __assign$1(__assign$1({}, filter), { items: filter.items.map(function (value, indexItems) {
+                        return {
+                            label: value.label,
+                            checked: itemIndex === indexItems ? checked : value.checked,
+                        };
+                    }) });
+            });
         });
-    }, [filters, onChange]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     var handleCloseClick = function (_a) {
         var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex;
         var element = document.getElementById("filter[".concat(sectionIndex, ",").concat(itemIndex, "]"));
@@ -15100,16 +15125,30 @@ var Filters = function (_a) {
             var sectionIndex = item.sectionIndex, itemIndex = item.itemIndex;
             handleCloseClick({ sectionIndex: sectionIndex, itemIndex: itemIndex });
         });
+        setFilter(function (prev) {
+            return prev.map(function (filter) {
+                return __assign$1(__assign$1({}, filter), { items: filter.items.map(function (value) {
+                        return {
+                            label: value.label,
+                            checked: false,
+                        };
+                    }) });
+            });
+        });
         onResetValues();
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile ? (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsxRuntime.jsx(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsxRuntime.jsx(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxRuntime.jsxs(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsxRuntime.jsx(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsxRuntime.jsx(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsxRuntime.jsx(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsxRuntime.jsx(FilterCheckbox, { onChange: handleCheckboxClick, text: item, itemIndex: itemIndex, sectionIndex: sectionIndex }, itemIndex)); }) }), void 0) }), sectionIndex)); }), isMobile && (jsxRuntime.jsxs(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxRuntime.jsxs(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsxRuntime.jsx(MobileIconsContainer, { children: jsxRuntime.jsx(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsxRuntime.jsx(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsxRuntime.jsx(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile ? (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsxRuntime.jsx(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsxRuntime.jsx(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxRuntime.jsxs(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsxRuntime.jsx(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsxRuntime.jsx(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsxRuntime.jsx(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsxRuntime.jsx(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: sectionIndex }, itemIndex)); }) }), void 0) }), sectionIndex)); }), isMobile && (jsxRuntime.jsxs(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxRuntime.jsxs(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsxRuntime.jsx(MobileIconsContainer, { children: jsxRuntime.jsx(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsxRuntime.jsx(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsxRuntime.jsx(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;
+    var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked;
+    var _b = React__default["default"].useState(checked), defaultChecked = _b[0], setDefaultChecked = _b[1];
     var onChange = React$2.useCallback(function (checked) {
-        onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
-    }, [sectionIndex, itemIndex, onChangeProp]);
-    return (jsxRuntime.jsx(Checkbox, { onChange: onChange, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Small, variant: "secondary" }, itemIndex));
+        setDefaultChecked(checked);
+    }, []);
+    React__default["default"].useEffect(function () {
+        onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: defaultChecked });
+    }, [sectionIndex, itemIndex, onChangeProp, defaultChecked]);
+    return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: defaultChecked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.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"])));