@typeolymp/ui-components 1.16.1 → 1.16.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/build/components/atoms/Subheading/index.d.ts +1 -0
  2. package/build/components/molecules/Collapse/index.d.ts +1 -1
  3. package/build/components/organisms/Form/index.d.ts +1 -1
  4. package/build/index.es.js +21 -15
  5. package/build/index.es.js.map +1 -1
  6. package/build/index.js +21 -15
  7. package/build/index.js.map +1 -1
  8. package/package.json +19 -11
package/build/components/atoms/Subheading/index.d.ts CHANGED
@@ -3,6 +3,7 @@ declare type PropsType = {
3
3
  size?: "small" | "medium" | "large";
4
4
  align?: "left" | "center" | "right";
5
5
  color?: "black" | "white" | "gray";
6
+ as?: "div";
6
7
  children: ReactNode;
7
8
  };
8
9
  declare const Subheading: FC<PropsType>;
package/build/components/molecules/Collapse/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import { FC } from "react";
2
2
  export declare type PropsType = {
3
3
  items: Array<{
4
4
  title: string;
5
- content: string;
5
+ content: string | JSX.Element;
6
6
  }>;
7
7
  };
8
8
  declare const Collapse: FC<PropsType>;
package/build/components/organisms/Form/index.d.ts CHANGED
@@ -54,7 +54,7 @@ declare type RangeFieldType = {
54
54
  export declare type FormFieldType = InputFieldType | PasswordInputFieldType | DateInputFieldType | TextareaFieldType | RadioGroupFieldType | NumberFieldType | CheckboxesFieldType | SelectFieldType | ToggleFieldType | RangeFieldType;
55
55
  export declare type PropsType = {
56
56
  title?: string;
57
- description?: string;
57
+ description?: string | JSX.Element;
58
58
  fields: FormFieldType[];
59
59
  button?: ButtonPropsType;
60
60
  onChangeFields?(newValues: {
package/build/index.es.js CHANGED
@@ -3488,7 +3488,11 @@ var Button = forwardRef(function (_a, ref) {
3488
3488
  var buttonRef = useRef(null);
3489
3489
  var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
3490
3490
  var as = href || asAnchor ? "a" : "button";
3491
- var onClick = function () {
3491
+ var onClick = function (e) {
3492
+ if (props.onClickAsync || props.onClick) {
3493
+ e.stopPropagation();
3494
+ e.preventDefault();
3495
+ }
3492
3496
  if (props.onClickAsync) {
3493
3497
  setIsLoading(true);
3494
3498
  new Promise(function (resolve) {
@@ -11234,7 +11238,7 @@ var Checkboxes = function (props) {
11234
11238
  };
11235
11239
 
11236
11240
  var Container$i = styled.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);
11237
- var Item = styled.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) {
11241
+ var Item = styled.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) {
11238
11242
  var isOpen = _a.isOpen;
11239
11243
  return (isOpen ? "" : "none");
11240
11244
  }, theme.colors.lightGray.dark);
@@ -11252,7 +11256,7 @@ var Collapse = function (props) {
11252
11256
  };
11253
11257
  return (jsx$1(Container$i, __assign$2({}, props, { children: props.items.map(function (item, index) {
11254
11258
  var isOpen = openItems.includes(index);
11255
- return (jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsx$1(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
11259
+ return (jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsx$1(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsx$1(Paragraph, __assign$2({ weight: "regular", as: typeof item.content !== "string" ? "div" : undefined }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
11256
11260
  }) })));
11257
11261
  };
11258
11262
 
@@ -12075,8 +12079,10 @@ var Form = forwardRef(function (props, ref) {
12075
12079
  if (props.onChangeFields)
12076
12080
  props.onChangeFields(newValues, __assign$2(__assign$2({}, values), (_c = {}, _c[fieldName] = value, _c)));
12077
12081
  };
12078
- var onBlurFormField = function (fieldName) {
12082
+ var onBlurFormField = function (fieldName, onBlur) {
12079
12083
  var _a;
12084
+ if (onBlur)
12085
+ onBlur(fieldName);
12080
12086
  var field = props.fields.find(function (field) { return field.name === fieldName; });
12081
12087
  if (field.validateTrigger && field.validateTrigger.includes("onBlur")) {
12082
12088
  var feedbackForField = field.validator(values[fieldName]);
@@ -12102,38 +12108,38 @@ var Form = forwardRef(function (props, ref) {
12102
12108
  props.onError(feedback);
12103
12109
  }
12104
12110
  };
12105
- return (jsxs(Fragment$1, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), jsx$1(Spacer, { vertical: 15 })] })), props.description && (jsx$1(DescriptionWrapper, { children: jsx$1(Paragraph, __assign$2({ color: "darkGray", weight: "regular" }, { children: htmlReactParser(props.description) })) })), jsx$1(FormWrapper, { children: props.fields.map(function (field, index) {
12111
+ return (jsxs(Fragment$1, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), jsx$1(Spacer, { vertical: 15 })] })), props.description && (jsx$1(DescriptionWrapper, { children: typeof props.description === "string" ? (jsx$1(Paragraph, __assign$2({ color: "darkGray", weight: "regular" }, { children: htmlReactParser(props.description) }))) : (props.description) })), jsx$1(FormWrapper, { children: props.fields.map(function (field, index) {
12106
12112
  switch (field.type) {
12107
12113
  case "text":
12108
12114
  return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
12109
- jsx$1(InputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
12115
+ jsx$1(InputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
12110
12116
  case "password":
12111
12117
  return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
12112
- jsx$1(PasswordInputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField, onKeyPress: field.submitOnEnter && onSubmit }))));
12118
+ jsx$1(PasswordInputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); }, onKeyPress: field.submitOnEnter && onSubmit }))));
12113
12119
  case "date":
12114
12120
  return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
12115
- jsx$1(DateInputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
12121
+ jsx$1(DateInputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
12116
12122
  case "textarea":
12117
12123
  return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
12118
- jsx$1(TextareaField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
12124
+ jsx$1(TextareaField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
12119
12125
  case "radio":
12120
12126
  return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
12121
- jsx$1(RadioGroup, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
12127
+ jsx$1(RadioGroup, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
12122
12128
  case "number":
12123
12129
  return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
12124
- jsx$1(NumberField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
12130
+ jsx$1(NumberField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
12125
12131
  case "checkbox":
12126
12132
  return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
12127
- jsx$1(Checkboxes, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
12133
+ jsx$1(Checkboxes, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
12128
12134
  case "select":
12129
12135
  return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
12130
- jsx$1(SelectField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
12136
+ jsx$1(SelectField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
12131
12137
  case "toggle":
12132
12138
  return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
12133
- jsx$1(ToggleField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
12139
+ jsx$1(ToggleField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
12134
12140
  case "range":
12135
12141
  return (createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
12136
- jsx$1(RangeField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
12142
+ jsx$1(RangeField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: function () { return onBlurFormField(field.name, field.onBlur); } }))));
12137
12143
  }
12138
12144
  }) }), props.button && (jsx$1(ButtonWrapper, { children: jsx$1(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "button" })) }))] }));
12139
12145
  });