@trafilea/afrodita-components 4.0.2-beta.8 → 4.0.2-beta.9

package/build/index.js

@@ -4447,7 +4447,7 @@ function Disclosure(props) {
 } // ---
 
 var DEFAULT_BUTTON_TAG$1 = 'button';
-var Button$6 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
+var Button$7 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
   var _useDisclosureContext = useDisclosureContext([Disclosure.name, Button.name].join('.')),
       state = _useDisclosureContext[0],
       dispatch = _useDisclosureContext[1];
@@ -4610,7 +4610,7 @@ var Panel = /*#__PURE__*/forwardRefWithAs(function Panel(props, ref) {
   }));
 }); // ---
 
-Disclosure.Button = Button$6;
+Disclosure.Button = Button$7;
 Disclosure.Panel = Panel;
 
 function disposables() {
@@ -5006,7 +5006,7 @@ function Listbox(props) {
 } // ---
 
 var DEFAULT_BUTTON_TAG = 'button';
-var Button$5 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
+var Button$6 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
   var _state$optionsRef$cur;
 
   var _useListboxContext = useListboxContext([Listbox.name, Button.name].join('.')),
@@ -5465,7 +5465,7 @@ function Option$2(props) {
 } // ---
 
 
-Listbox.Button = Button$5;
+Listbox.Button = Button$6;
 Listbox.Label = Label$4;
 Listbox.Options = Options;
 Listbox.Option = Option$2;
@@ -6782,11 +6782,11 @@ var ImageSmallPreview = function (_a) {
 var templateObject_1$O;
 
 var Container$w = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"])));
-var Button$4 = newStyled.button(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
+var Button$5 = newStyled.button(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
 var ImagePreviewList = function (_a) {
     var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
     return (jsx(Container$w, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
-            return (jsx(Button$4, __assign({ onClick: function () { return onClick(item); } }, { children: jsx(ImageSmallPreview, { css: { marginBottom: '1.25rem' }, imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
+            return (jsx(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsx(ImageSmallPreview, { css: { marginBottom: '1.25rem' }, imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
         }) }), void 0));
 };
 var templateObject_1$N, templateObject_2$v;
@@ -7533,7 +7533,7 @@ var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __ma
     var color = _a.color;
     return color;
 });
-var StyledInput = newStyled.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var StyledInput = newStyled.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  flex: 1 1 50%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  flex: 1 1 50%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
     var padding = _a.padding;
     return padding;
 }, function (_a) {
@@ -7576,34 +7576,49 @@ var StyledInput = newStyled.input(templateObject_2$m || (templateObject_2$m = __
     var disabledColor = _a.disabledColor;
     return disabledColor;
 });
-var InputWrapper = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  height: 100%;\n"])));
+var InputWrapper = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  height: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  height: ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return (size === 'small' ? '36px' : '44px');
+});
 var templateObject_1$y, templateObject_2$m, templateObject_3$f;
 
 var BaseInput = function (_a) {
-    var onChange = _a.onChange, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, rest = __rest(_a, ["onChange", "defaultValue", "label", "children", "required", "onValidation"]);
+    var _b;
+    var value = _a.value, onChange = _a.onChange, _c = _a.defaultValue, defaultValue = _c === void 0 ? '' : _c, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, rest = __rest(_a, ["value", "onChange", "defaultValue", "label", "children", "required", "onValidation", "size"]);
     var theme = useTheme();
-    var _c = React.useState(defaultValue), value = _c[0], setValue = _c[1];
-    var _d = React.useState(exports.InputValidationType.Empty), status = _d[0], setStatus = _d[1];
+    var _d = React.useState((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : ''), internalValue = _d[0], setInternalValue = _d[1];
+    var _e = React.useState(exports.InputValidationType.Empty), status = _e[0], setStatus = _e[1];
     var handleChange = function (_a) {
-        var value = _a.target.value;
-        setValue(value);
-        onChange && onChange(value);
+        var target = _a.target;
+        if (onChange) {
+            onChange(target.value);
+        }
+        if (value == null) {
+            setInternalValue(target.value);
+        }
     };
     var validate = function (_a) {
         var value = _a.target.value;
-        var newStatus = handleValidations(value);
-        setStatus(newStatus);
-        onValidation && onValidation(newStatus);
-    };
-    var handleValidations = function (value) {
+        var status = exports.InputValidationType.Valid;
         if (required && isEmpty(value)) {
-            return exports.InputValidationType.Error;
+            status = exports.InputValidationType.Error;
         }
         if (!required && isEmpty(value)) {
-            return exports.InputValidationType.Empty;
+            status = exports.InputValidationType.Empty;
         }
-        return exports.InputValidationType.Valid;
+        setStatus(status);
     };
+    React.useEffect(function () {
+        if (value == null) {
+            return;
+        }
+        setInternalValue(value);
+    }, [value]);
+    React.useEffect(function () {
+        if (onValidation != null) {
+            onValidation(status);
+        }
+    }, [onValidation, status]);
     var styling = {
         border: theme.component.input.border,
         borderRadius: theme.component.input.borderRadius,
@@ -7622,39 +7637,57 @@ var BaseInput = function (_a) {
             ? theme.colors.shades['700'].color
             : status === exports.InputValidationType.Error
                 ? theme.colors.semantic.urgent.color
-                : '' }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign({ className: "inputWrapper" }, { children: [jsxRuntime.jsx(StyledInput, __assign({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: value }, rest, styling), void 0), children] }), void 0), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
+                : '' }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign({ className: "inputWrapper", size: size }, { children: [jsxRuntime.jsx(StyledInput, __assign({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: internalValue }, rest, styling), void 0), children] }), void 0), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
+};
+
+var Button$4 = function (_a) {
+    var variant = _a.variant, props = __rest(_a, ["variant"]);
+    if (variant === 'primary') {
+        return jsxRuntime.jsx(ButtonPrimary, __assign({}, props), void 0);
+    }
+    if (variant === 'secondary') {
+        return jsxRuntime.jsx(ButtonSecondary, __assign({}, props), void 0);
+    }
+    if (variant === 'secondary-outline') {
+        return jsxRuntime.jsx(ButtonSecondary, __assign({}, props), void 0);
+    }
+    throw new Error("Invalid button variant ".concat(variant));
 };
 
-var Container$j = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  input {\n    border-radius: ", ";\n  }\n"], ["\n  input {\n    border-radius: ", ";\n  }\n"])), function (_a) {
+var Container$j = newStyled.div(templateObject_1$x || (templateObject_1$x = __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 theme = _a.theme;
     return theme.component.inputCustom.input.borderRadius;
 });
-var ButtonContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"], ["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"])), function (_a) {
+var ButtonContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  max-width: 50%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"], ["\n  max-width: 50%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.inputCustom.button.borderRadius;
 });
 var Custom = function (_a) {
-    var onClick = _a.onClick, text = _a.text, type = _a.type, rest = __rest(_a, ["onClick", "text", "type"]);
+    var onClick = _a.onClick, text = _a.text, variant = _a.variant, rest = __rest(_a, ["onClick", "text", "variant"]);
     var theme = useTheme();
-    var props = {
+    var props = React.useMemo(function () { return ({
+        variant: variant,
         onClick: onClick,
         text: text,
         disabled: rest.disabled,
-    };
-    return (jsxRuntime.jsx(Container$j, __assign({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign({ theme: theme }, { children: type === 'primary' ? jsxRuntime.jsx(ButtonPrimary, __assign({}, props), void 0) : jsxRuntime.jsx(ButtonSecondary, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
+    }); }, [variant, onClick, text, rest.disabled]);
+    return (jsxRuntime.jsx(Container$j, __assign({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$4, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
 };
 var templateObject_1$x, templateObject_2$l;
 
-var SuccessContainer = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  height: 3rem;\n  display: flex;\n"], ["\n  height: 3rem;\n  display: flex;\n"])));
-var SuccessMessage = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"], ["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"])));
+var SuccessContainer = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  height: ", ";\n  display: flex;\n"], ["\n  height: ", ";\n  display: flex;\n"])), function (_a) {
+    var size = _a.size;
+    return (size === 'small' ? '36px' : '');
+});
+var SuccessMessage = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"], ["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"])));
 var SuccessText = newStyled.span(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"])));
 var Success = function (_a) {
-    var children = _a.children, successText = _a.successText;
-    return (jsxRuntime.jsxs(SuccessContainer, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }, void 0));
+    var children = _a.children, successText = _a.successText, size = _a.size;
+    return (jsxRuntime.jsxs(SuccessContainer, __assign({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
 };
 var templateObject_1$w, templateObject_2$k, templateObject_3$e;
 
-var ButtonContainer = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"], ["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"])), function (_a) {
+var ButtonContainer = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  margin-left: 0.625rem;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"], ["\n  margin-left: 0.625rem;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"])), function (_a) {
     var status = _a.status, type = _a.type, theme = _a.theme;
     return status === exports.InputValidationType.Empty &&
         type === 'primary' &&
@@ -7663,15 +7696,18 @@ var ButtonContainer = newStyled.div(templateObject_1$v || (templateObject_1$v =
 var BasePlusButton = function (_a) {
     var onClick = _a.onClick, onClickEdit = _a.onClickEdit, text = _a.text, success = _a.success, editText = _a.editText, successText = _a.successText, rest = __rest(_a, ["onClick", "onClickEdit", "text", "success", "editText", "successText"]);
     var _b = React.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
+    var _c = React.useState(''), inputValue = _c[0], setInputValue = _c[1];
     var theme = useTheme();
-    var SuccessComponent = (jsxRuntime.jsx(Success, __assign({ successText: successText }, { children: jsxRuntime.jsx(ButtonContainer, __assign({ status: status, type: "secondary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondaryOutline, { text: editText, onClick: onClickEdit, disabled: rest.disabled }, void 0) }), void 0) }), void 0));
-    var Input = (jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
-    return success ? SuccessComponent : Input;
+    var onChangeInput = React.useCallback(function (value) { return setInputValue(value); }, []);
+    if (success) {
+        return (jsxRuntime.jsx(Success, __assign({ successText: successText, size: rest.size }, { children: jsxRuntime.jsx(ButtonContainer, __assign({ status: status, type: "secondary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondaryOutline, { text: editText, onClick: onClickEdit, disabled: rest.disabled }, void 0) }), void 0) }), void 0));
+    }
+    return (jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus, onChange: onChangeInput }, { children: jsxRuntime.jsx(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
 };
 var templateObject_1$v;
 
 var Container$i = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  input {\n    padding-right: 2.688rem;\n  }\n"], ["\n  input {\n    padding-right: 2.688rem;\n  }\n"])));
-var IconContainer$3 = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"])), function (props) { return props.color; });
+var IconContainer$3 = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  svg path {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  svg path {\n    fill: ", ";\n  }\n"])), function (props) { return props.color; });
 var BasePlusIcon = function (_a) {
     var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
     var theme = useTheme();
@@ -12906,6 +12942,7 @@ exports.ProductGallery = ProductGallery;
 exports.ProductGalleryMobile = ProductGalleryMobile;
 exports.ProgressBar = ProgressBar;
 exports.RadioGroupInput = RadioGroupInput;
+exports.RadioInput = RadioInput;
 exports.Rating = Rating;
 exports.Review = Review;
 exports.ScrollToTop = ScrollToTop;