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

package/build/index.d.ts

@@ -101,7 +101,10 @@ declare type Filter = {
     title: string;
     columns: number;
     isOpenByDefault?: boolean;
-    items: string[];
+    items: Array<{
+        label: string;
+        checked?: boolean;
+    }>;
 };
 declare type FilterChange = {
     sectionIndex: number;
@@ -1585,8 +1588,9 @@ interface SearchBarProps {
     onSearch: (term: string) => void;
     resultsPanelDataTestId?: string;
     allResults?: number;
+    initialTerm?: string;
 }
-declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, allResults, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, allResults, initialTerm, }: SearchBarProps) => JSX.Element;
 
 interface ProductGalleryMobileProps {
     images: ImageType[];
@@ -1706,8 +1710,8 @@ interface PackSelectorProps {
 declare const PackSelector: FC<PackSelectorProps>;
 
 interface FiltersProps {
-    filters: Filter[];
-    onChange: (update: FilterChange) => void;
+    values: Filter[];
+    onChange: (newValues: Filter[], filtersState?: FilterChange) => void;
     tagsColor?: string;
     filterByText: string;
     clearAllText: string;
@@ -1718,7 +1722,7 @@ interface FiltersProps {
     mobileApplyButtonClick: () => void;
     onResetValues: () => void;
 }
-declare const Filters: ({ filters, onChange, tagsColor, filterByText, clearAllText, isMobile, filtersSelectText, applyText, mobileApplyButtonClick, mobileBackArrowClick, onResetValues, }: FiltersProps) => JSX.Element;
+declare const Filters: ({ values, onChange, tagsColor, filterByText, clearAllText, isMobile, filtersSelectText, applyText, mobileApplyButtonClick, mobileBackArrowClick, onResetValues, }: FiltersProps) => JSX.Element;
 
 interface SearchNavigationProps {
     returnText?: string;

package/build/index.esm.js

@@ -10616,8 +10616,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 = useReducer(reducer, initialState$1), state = _b[0], dispatch = _b[1];
     var ref = useRef(null);
     var shouldDisplaySuggestion = function () {
@@ -15053,17 +15056,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.useState([]), checkedItems = _c[0], setCheckedItems = _c[1];
+    var _c = useState(values), filters = _c[0], setFilter = _c[1];
+    var _d = useState([]), checkedItems = _d[0], setCheckedItems = _d[1];
+    var _e = useState(), filterState = _e[0], setFilterSection = _e[1];
+    useEffect(function () {
+        if (filters.length && filterState) {
+            onChange(filters, filterState);
+        }
+    }, [filterState, filters, onChange]);
     var handleCheckboxClick = 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, "]"));
@@ -15074,16 +15099,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 (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, 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 }, 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));
 };
 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.useState(checked), defaultChecked = _b[0], setDefaultChecked = _b[1];
     var onChange = useCallback(function (checked) {
-        onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
-    }, [sectionIndex, itemIndex, onChangeProp]);
-    return (jsx$1(Checkbox, { onChange: onChange, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
+        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));
 };
 
 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"])));