@trafilea/afrodita-components 4.0.2-beta.17 → 4.0.2-beta.18

package/build/index.d.ts

@@ -1593,11 +1593,20 @@ declare const CartProductItem: {
     CloseButton: ({ onClick }: CloseButtonProps) => JSX.Element;
 };
 
-interface QuantityPickerProps {
+declare type QuantityPickerPropsOnChange = (value: number) => void;
+declare type QuantityPickerPropsControlled = {
+    value: number;
+    onChange: QuantityPickerPropsOnChange;
+};
+declare type QuantityPickerPropsUncontrolled = {
+    value?: never;
+    onChange?: QuantityPickerPropsOnChange;
+};
+declare type QuantityPickerProps = {
     initialValue?: number;
     maxValue?: number;
-}
-declare const QuantityPicker: ({ initialValue, maxValue }: QuantityPickerProps) => JSX.Element;
+} & (QuantityPickerPropsControlled | QuantityPickerPropsUncontrolled);
+declare const QuantityPicker: ({ initialValue, maxValue, value, onChange, }: QuantityPickerProps) => JSX.Element;
 
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 

package/build/index.esm.js

@@ -7678,7 +7678,7 @@ var Button$4 = function (_a) {
     throw new Error("Invalid button variant ".concat(variant));
 };
 
-var Container$m = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n  }\n"], ["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n  }\n"])), function (_a) {
+var Container$m = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"], ["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n    width: 100%;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.inputCustom.input.borderRadius;
 });
@@ -13027,10 +13027,28 @@ var Item = newStyled.span(templateObject_2 || (templateObject_2 = __makeTemplate
 var Number$1 = newStyled(Item)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 1.25rem;\n  text-align: center;\n  font-weight: 600;\n"], ["\n  width: 1.25rem;\n  text-align: center;\n  font-weight: 600;\n"])));
 var IncreaseDecrease = newStyled(Item)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  user-select: none;\n  padding: 0 0.313rem;\n  font-weight: 400;\n"], ["\n  cursor: pointer;\n  user-select: none;\n  padding: 0 0.313rem;\n  font-weight: 400;\n"])));
 var QuantityPicker = function (_a) {
-    var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c;
+    var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, onChange = _a.onChange;
     var theme = useTheme();
-    var _d = React.useState(initialValue), value = _d[0], setValue = _d[1];
-    return (jsxs$1(Container, __assign({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": "QuantityPickerContainer" }, { children: [jsx$1(IncreaseDecrease, __assign({ onClick: function () { return setValue(function (val) { return (val > initialValue ? val - 1 : val); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: value }, void 0), jsx$1(IncreaseDecrease, __assign({ onClick: function () { return setValue(function (val) { return (val < maxValue ? val + 1 : val); }); } }, { children: "+" }), void 0)] }), void 0));
+    var _d = useState(value !== null && value !== void 0 ? value : initialValue), internal = _d[0], setInternal = _d[1];
+    useEffect(function () {
+        if (onChange) {
+            onChange(internal);
+        }
+    }, [onChange, internal]);
+    var clamp = useCallback(function (value) {
+        // Math.max guards against numbers less than `initialValue`
+        // Math.min guards against numbers greater than `maxValue`
+        return Math.max(Math.min(value, maxValue), initialValue);
+    }, [maxValue, initialValue]);
+    useEffect(function () {
+        setInternal(function (internal) {
+            if (value == null) {
+                return internal;
+            }
+            return clamp(value);
+        });
+    }, [value, clamp]);
+    return (jsxs$1(Container, __assign({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": "QuantityPickerContainer" }, { children: [jsx$1(IncreaseDecrease, __assign({ onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign({ onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;