@typeolymp/ui-components 1.16.1 → 1.16.3

package/build/index.js

@@ -3515,7 +3515,11 @@ var Button = React$3.forwardRef(function (_a, ref) {
     var buttonRef = React$3.useRef(null);
     var _b = React$3.useState(false), isLoading = _b[0], setIsLoading = _b[1];
     var as = href || asAnchor ? "a" : "button";
-    var onClick = function () {
+    var onClick = function (e) {
+        if (props.onClickAsync || props.onClick) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
         if (props.onClickAsync) {
             setIsLoading(true);
             new Promise(function (resolve) {
@@ -11261,7 +11265,7 @@ var Checkboxes = function (props) {
 };
 
 var Container$i = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n  width: 100%;\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  padding: 10px 20px;\n"], ["\n  width: 100%;\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  padding: 10px 20px;\n"])), theme.colors.lightGray.light);
-var Item = styled__default["default"].div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p {\n    display: ", ";\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p {\n    display: ", ";\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
+var Item = styled__default["default"].div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p, > div:last-child {\n    display: ", ";\n    margin: 0;\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p, > div:last-child {\n    display: ", ";\n    margin: 0;\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? "" : "none");
 }, theme.colors.lightGray.dark);
@@ -11279,7 +11283,7 @@ var Collapse = function (props) {
     };
     return (jsxRuntime.jsx(Container$i, __assign$2({}, props, { children: props.items.map(function (item, index) {
             var isOpen = openItems.includes(index);
-            return (jsxRuntime.jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsxRuntime.jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsxRuntime.jsx(Paragraph, __assign$2({ weight: "regular" }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
+            return (jsxRuntime.jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsxRuntime.jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsxRuntime.jsx(Paragraph, __assign$2({ weight: "regular", as: typeof item.content !== "string" ? "div" : undefined }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
         }) })));
 };
 
@@ -12102,8 +12106,10 @@ var Form = React$3.forwardRef(function (props, ref) {
         if (props.onChangeFields)
             props.onChangeFields(newValues, __assign$2(__assign$2({}, values), (_c = {}, _c[fieldName] = value, _c)));
     };
-    var onBlurFormField = function (fieldName) {
+    var onBlurFormField = function (fieldName, onBlur) {
         var _a;
+        if (onBlur)
+            onBlur(fieldName);
         var field = props.fields.find(function (field) { return field.name === fieldName; });
         if (field.validateTrigger && field.validateTrigger.includes("onBlur")) {
             var feedbackForField = field.validator(values[fieldName]);
@@ -12129,38 +12135,38 @@ var Form = React$3.forwardRef(function (props, ref) {
             props.onError(feedback);
         }
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h4" }, { children: props.title })), jsxRuntime.jsx(Spacer, { vertical: 15 })] })), props.description && (jsxRuntime.jsx(DescriptionWrapper, { children: jsxRuntime.jsx(Paragraph, __assign$2({ color: "darkGray", weight: "regular" }, { children: htmlReactParser(props.description) })) })), jsxRuntime.jsx(FormWrapper, { children: props.fields.map(function (field, index) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h4" }, { children: props.title })), jsxRuntime.jsx(Spacer, { vertical: 15 })] })), props.description && (jsxRuntime.jsx(DescriptionWrapper, { children: typeof props.description === "string" ? (jsxRuntime.jsx(Paragraph, __assign$2({ color: "darkGray", weight: "regular" }, { children: htmlReactParser(props.description) }))) : (props.description) })), jsxRuntime.jsx(FormWrapper, { children: props.fields.map(function (field, index) {
                     switch (field.type) {
                         case "text":
                             return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
-                                jsxRuntime.jsx(InputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
+                                jsxRuntime.jsx(InputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
                         case "password":
                             return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
-                                jsxRuntime.jsx(PasswordInputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField, onKeyPress: field.submitOnEnter && onSubmit }))));
+                                jsxRuntime.jsx(PasswordInputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); }, onKeyPress: field.submitOnEnter && onSubmit }))));
                         case "date":
                             return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
-                                jsxRuntime.jsx(DateInputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
+                                jsxRuntime.jsx(DateInputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
                         case "textarea":
                             return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
-                                jsxRuntime.jsx(TextareaField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
+                                jsxRuntime.jsx(TextareaField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
                         case "radio":
                             return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
-                                jsxRuntime.jsx(RadioGroup, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
+                                jsxRuntime.jsx(RadioGroup, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
                         case "number":
                             return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
-                                jsxRuntime.jsx(NumberField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
+                                jsxRuntime.jsx(NumberField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
                         case "checkbox":
                             return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
-                                jsxRuntime.jsx(Checkboxes, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
+                                jsxRuntime.jsx(Checkboxes, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
                         case "select":
                             return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
-                                jsxRuntime.jsx(SelectField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
+                                jsxRuntime.jsx(SelectField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
                         case "toggle":
                             return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
-                                jsxRuntime.jsx(ToggleField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
+                                jsxRuntime.jsx(ToggleField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
                         case "range":
                             return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
-                                jsxRuntime.jsx(RangeField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
+                                jsxRuntime.jsx(RangeField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
                     }
                 }) }), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "button" })) }))] }));
 });