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

package/build/index.js

@@ -7686,7 +7686,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;
 });
@@ -13035,10 +13035,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__default["default"].useState(initialValue), value = _d[0], setValue = _d[1];
-    return (jsxRuntime.jsxs(Container, __assign({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": "QuantityPickerContainer" }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign({ onClick: function () { return setValue(function (val) { return (val > initialValue ? val - 1 : val); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: value }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign({ onClick: function () { return setValue(function (val) { return (val < maxValue ? val + 1 : val); }); } }, { children: "+" }), void 0)] }), void 0));
+    var _d = React.useState(value !== null && value !== void 0 ? value : initialValue), internal = _d[0], setInternal = _d[1];
+    React.useEffect(function () {
+        if (onChange) {
+            onChange(internal);
+        }
+    }, [onChange, internal]);
+    var clamp = React.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]);
+    React.useEffect(function () {
+        setInternal(function (internal) {
+            if (value == null) {
+                return internal;
+            }
+            return clamp(value);
+        });
+    }, [value, clamp]);
+    return (jsxRuntime.jsxs(Container, __assign({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": "QuantityPickerContainer" }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign({ onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(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;