@trafilea/afrodita-components 5.0.0-beta.44 → 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;
@@ -1634,6 +1635,8 @@ declare const RadioInput: ({ name, value, id, label, checked, disabled, onChange
 declare type PortalProps = {
     id: string;
     className?: string;
+    overflow?: boolean;
+    style?: CSSProperties;
 };
 declare const Portal: FC<PortalProps>;
 

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;
     }, []);
@@ -4007,8 +4012,12 @@ function SimpleDropdown(_a) {
         if (value == null) {
             return;
         }
+        if (options.indexOf(value) < 0) {
+            setSelectedValue(undefined);
+            return;
+        }
         setSelectedValue(value);
-    }, [value]);
+    }, [value, options]);
     var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
     return (jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
 }
@@ -12608,7 +12617,7 @@ var ProductGalleryMobile = function (_a) {
 var templateObject_1$a;
 
 var Portal = function (_a) {
-    var id = _a.id, className = _a.className, children = _a.children;
+    var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
     var _b = useState(false), mounted = _b[0], setMounted = _b[1];
     var container = useRef(null);
     useEffect(function () {
@@ -12622,10 +12631,19 @@ var Portal = function (_a) {
             throw new Error("Unable to find/create container (".concat(id, ")"));
         }
         element.dataset.testId = id;
-        element.style.overflow = 'hidden';
         setMounted(true);
         container.current = element;
     }, [id]);
+    useEffect(function () {
+        if (!mounted) {
+            return;
+        }
+        container.current.style.overflow = overflow ? 'visible' : 'hidden';
+        for (var key in style) {
+            // @ts-ignore
+            container.current.style[key] = style[key];
+        }
+    }, [style, overflow, mounted]);
     useEffect(function () {
         if (mounted) {
             container.current.className = className !== null && className !== void 0 ? className : '';
@@ -16691,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; });
         });
@@ -16704,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,
                         };
                     }) });
             });
@@ -16716,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) {
@@ -16733,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"])));