@maif/react-forms 1.0.21 → 1.0.25

package/lib/form.js

@@ -41,6 +41,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -165,6 +173,10 @@ var getDefaultValues = function getDefaultValues(flow, schema) {
   return flow.reduce(function (acc, key) {
     var entry = schema[key];
 
+    if (!entry) {
+      return acc;
+    }
+
     if (_typeof(key) === 'object') {
       return _objectSpread(_objectSpread({}, acc), getDefaultValues(key.flow, schema));
     }
@@ -238,7 +250,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
         }
 
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
-      } else if (!!v && _typeof(v) === 'object') {
+      } else if (!!v && _typeof(v) === 'object' && !(v instanceof Date)) {
         var _subSchema$key;
 
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanInputArray(v, ((_subSchema$key = subSchema[key]) === null || _subSchema$key === void 0 ? void 0 : _subSchema$key.schema) || {})));
@@ -269,7 +281,7 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
         }
 
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
-      } else if (!!v && _typeof(v) === 'object') {
+      } else if (!!v && _typeof(v) === 'object' && !(v instanceof Date)) {
         var _subSchema$key2;
 
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanOutputArray(v, ((_subSchema$key2 = subSchema[key]) === null || _subSchema$key2 === void 0 ? void 0 : _subSchema$key2.schema) || {})));
@@ -343,6 +355,12 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     }, onError)
   }, formFlow.map(function (entry, idx) {
     var step = schema[entry];
+
+    if (!step && typeof entry === 'string') {
+      console.error("no step found for the entry \"".concat(entry, "\" in the given schema. Your form might not work properly. Please fix it"));
+      return null;
+    }
+
     var error = _typeof(entry) === 'object' ? undefined : entry.split('.').reduce(function (object, key) {
       return object && object[key];
     }, errors);
@@ -469,6 +487,12 @@ var Step = function Step(_ref4) {
       var err = _typeof(en) === 'object' ? undefined : en.split('.').reduce(function (object, key) {
         return object && object[key];
       }, errors);
+
+      if (!stp && typeof en === 'string') {
+        console.error("no step found for the entry \"".concat(en, "\" in the given schema. Your form might not work properly. Please fix it"));
+        return null;
+      }
+
       var visibleStep = (0, _Option.option)(stp).map(function (s) {
         return s.visible;
       }).map(function (visible) {
@@ -493,7 +517,6 @@ var Step = function Step(_ref4) {
 
       return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
         key: "collapse-".concat(en, "-").concat(entryIdx),
-        className: classes.collapseInline,
         entry: en,
         error: err,
         label: (stp === null || stp === void 0 ? void 0 : stp.label) === null ? null : (stp === null || stp === void 0 ? void 0 : stp.label) || en,
@@ -513,11 +536,22 @@ var Step = function Step(_ref4) {
         watch: watch,
         inputWrapper: inputWrapper,
         httpClient: httpClient,
-        defaultValue: stp.defaultValue
+        defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue
       }));
     }));
   }
 
+  var disabled = function disabled() {
+    if (typeof step.disabled === 'function') {
+      return step.disabled({
+        rawValues: getValues(),
+        value: getValues(entry)
+      });
+    } else {
+      return step.disabled;
+    }
+  };
+
   if (step.array) {
     return /*#__PURE__*/_react["default"].createElement(ArrayStep, {
       entry: entry,
@@ -529,12 +563,15 @@ var Step = function Step(_ref4) {
       setValue: _setValue,
       values: getValues(entry),
       defaultValue: step.defaultValue || defaultVal(step.type),
+      getValues: getValues,
+      disabled: disabled(),
       component: function component(props, idx) {
         var _error$idx;
 
         return /*#__PURE__*/_react["default"].createElement(Step, {
           entry: "".concat(entry, "[").concat(idx, "].value"),
           step: _objectSpread(_objectSpread({}, schema[realEntry || entry]), {}, {
+            onChange: undefined,
             array: false
           }),
           error: error && ((_error$idx = error[idx]) === null || _error$idx === void 0 ? void 0 : _error$idx.value),
@@ -555,6 +592,21 @@ var Step = function Step(_ref4) {
     });
   }
 
+  var registeredInput = register(entry);
+
+  var inputProps = _objectSpread(_objectSpread({}, registeredInput), {}, {
+    onChange: function onChange(e) {
+      registeredInput.onChange(e);
+      (0, _Option.option)(step.onChange).map(function (onChange) {
+        return onChange({
+          rawValues: getValues(),
+          value: e.target.value,
+          setValue: _setValue
+        });
+      });
+    }
+  });
+
   switch (step.type) {
     case _type.type.string:
       switch (step.format) {
@@ -576,12 +628,11 @@ var Step = function Step(_ref4) {
             type: "text",
             id: entry,
             className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-            readOnly: step.disabled ? 'readOnly' : null
+            readOnly: disabled() ? 'readOnly' : null
           }, step.props, {
-            name: entry,
             defaultValue: defaultValue,
             placeholder: step.placeholder
-          }, register(entry))));
+          }, inputProps)));
 
         case _format.format.code:
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
@@ -600,8 +651,17 @@ var Step = function Step(_ref4) {
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.CodeInput, _extends({
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? true : false,
-                onChange: field.onChange,
+                readOnly: disabled() ? true : false,
+                onChange: function onChange(e) {
+                  field.onChange(e);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: e,
+                      setValue: _setValue
+                    });
+                  });
+                },
                 value: field.value,
                 defaultValue: defaultValue
               }, step.props)));
@@ -625,8 +685,17 @@ var Step = function Step(_ref4) {
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.MarkdownInput, _extends({}, step.props, {
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? 'readOnly' : null,
-                onChange: field.onChange,
+                readOnly: disabled() ? 'readOnly' : null,
+                onChange: function onChange(e) {
+                  field.onChange(e);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: e,
+                      setValue: _setValue
+                    });
+                  });
+                },
                 value: field.value,
                 defaultValue: defaultValue
               }, step)));
@@ -649,15 +718,24 @@ var Step = function Step(_ref4) {
                   rawValues: getValues()
                 }, field),
                 error: error
-              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
+              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? 'readOnly' : null,
-                onChange: field.onChange,
+                disabled: disabled(),
                 value: field.value,
                 possibleValues: step.options,
                 defaultValue: defaultValue,
-                httpClient: httpClient
-              }, step)));
+                httpClient: httpClient,
+                onChange: function onChange(value) {
+                  field.onChange(value);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: value,
+                      setValue: _setValue
+                    });
+                  });
+                }
+              })));
             }
           });
 
@@ -678,14 +756,13 @@ var Step = function Step(_ref4) {
             },
             error: error
           }, /*#__PURE__*/_react["default"].createElement("input", _extends({
-            // {...step.props}
             type: step.format || 'text',
             id: entry,
             className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-            readOnly: step.disabled ? 'readOnly' : null // defaultValue={defaultValue}
-            ,
+            readOnly: disabled() ? 'readOnly' : null,
+            defaultValue: defaultValue,
             placeholder: step.placeholder
-          }, register(entry))));
+          }, inputProps)));
       }
 
     case _type.type.number:
@@ -706,15 +783,24 @@ var Step = function Step(_ref4) {
                   rawValues: getValues()
                 }, field),
                 error: error
-              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
+              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(classes.content, _defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? 'readOnly' : null,
-                onChange: field.onChange,
+                readOnly: disabled() ? 'readOnly' : null,
+                onChange: function onChange(e) {
+                  field.onChange(e);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: e,
+                      setValue: _setValue
+                    });
+                  });
+                },
                 value: field.value,
                 possibleValues: step.options,
                 defaultValue: defaultValue,
                 httpClient: httpClient
-              }, step)));
+              })));
             }
           });
 
@@ -736,11 +822,11 @@ var Step = function Step(_ref4) {
             type: step.format || 'number',
             id: entry,
             className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-            readOnly: step.disabled ? 'readOnly' : null,
+            readOnly: disabled() ? 'readOnly' : null,
             name: entry,
             placeholder: step.placeholder,
             defaultValue: defaultValue
-          }, register(entry))));
+          }, inputProps)));
       }
 
     case _type.type.bool:
@@ -760,8 +846,17 @@ var Step = function Step(_ref4) {
             error: error
           }, /*#__PURE__*/_react["default"].createElement(_index.BooleanInput, _extends({}, step.props, {
             className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-            readOnly: step.disabled ? 'readOnly' : null,
-            onChange: field.onChange,
+            readOnly: disabled() ? 'readOnly' : null,
+            onChange: function onChange(e) {
+              field.onChange(e);
+              (0, _Option.option)(step.onChange).map(function (onChange) {
+                return onChange({
+                  rawValues: getValues(),
+                  value: e,
+                  setValue: _setValue
+                });
+              });
+            },
             value: field.value
           })));
         }
@@ -786,18 +881,28 @@ var Step = function Step(_ref4) {
                   rawValues: getValues()
                 }, field),
                 error: error
-              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
+              }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? 'readOnly' : null,
-                onChange: field.onChange,
+                readOnly: disabled() ? 'readOnly' : null,
+                onChange: function onChange(e) {
+                  field.onChange(e);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: e,
+                      setValue: _setValue
+                    });
+                  });
+                },
                 value: field.value,
                 possibleValues: step.options,
                 httpClient: httpClient
-              }, step)));
+              })));
             }
           });
 
         case _format.format.form:
+          //todo: disabled ?
           var flow = (0, _Option.option)(step.flow).getOrElse((0, _Option.option)(step.schema).map(function (s) {
             return Object.keys(s);
           }).getOrNull());
@@ -844,13 +949,22 @@ var Step = function Step(_ref4) {
                   rawValues: getValues()
                 }, field),
                 error: error
-              }, /*#__PURE__*/_react["default"].createElement(_index.ObjectInput, _extends({}, step.props, {
+              }, /*#__PURE__*/_react["default"].createElement(_index.ObjectInput, _extends({}, step.props, step, {
                 className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-                readOnly: step.disabled ? 'readOnly' : null,
-                onChange: field.onChange,
+                readOnly: disabled() ? 'readOnly' : null,
+                onChange: function onChange(e) {
+                  field.onChange(e);
+                  (0, _Option.option)(step.onChange).map(function (onChange) {
+                    return onChange({
+                      rawValues: getValues(),
+                      value: e,
+                      setValue: _setValue
+                    });
+                  });
+                },
                 value: field.value,
                 possibleValues: step.options
-              }, step)));
+              })));
             }
           });
       }
@@ -874,11 +988,19 @@ var Step = function Step(_ref4) {
           }, /*#__PURE__*/_react["default"].createElement(_reactRainbowComponents.DatePicker, _extends({}, step.props, {
             id: "datePicker-1",
             className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
-            readOnly: step.disabled ? 'readOnly' : null,
+            readOnly: disabled() ? 'readOnly' : null,
             value: field.value,
-            onChange: field.onChange,
-            formatStyle: "large" // locale={state.locale.name}
-
+            onChange: function onChange(e) {
+              field.onChange(e);
+              (0, _Option.option)(step.onChange).map(function (onChange) {
+                return onChange({
+                  rawValues: getValues(),
+                  value: e,
+                  setValue: _setValue
+                });
+              });
+            },
+            formatStyle: "large"
           })));
         }
       });
@@ -928,7 +1050,7 @@ var Step = function Step(_ref4) {
               }), /*#__PURE__*/_react["default"].createElement("button", {
                 type: "button",
                 className: "".concat(classes.btn, " ").concat(classes.flex, " ").concat(classes.ai_center),
-                disabled: uploading,
+                disabled: uploading || disabled(),
                 onClick: trigger
               }, uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Loader, null), !uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Upload, null), /*#__PURE__*/_react["default"].createElement("span", {
                 className: "".concat(classes.ml_5)
@@ -945,7 +1067,16 @@ var Step = function Step(_ref4) {
               }, field),
               error: error
             }, /*#__PURE__*/_react["default"].createElement(FileInput, {
-              onChange: field.onChange,
+              onChange: function onChange(e) {
+                field.onChange(e);
+                (0, _Option.option)(step.onChange).map(function (onChange) {
+                  return onChange({
+                    rawValues: getValues(),
+                    value: e,
+                    setValue: _setValue
+                  });
+                });
+              },
               error: error
             }));
           }
@@ -971,10 +1102,10 @@ var Step = function Step(_ref4) {
         type: "file",
         id: entry,
         className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
-        readOnly: step.disabled ? 'readOnly' : null,
+        readOnly: disabled() ? 'readOnly' : null,
         name: entry,
         placeholder: step.placeholder
-      }, register(entry))));
+      }, inputProps)));
 
     default:
       return null;
@@ -991,7 +1122,9 @@ var ArrayStep = function ArrayStep(_ref15) {
       component = _ref15.component,
       values = _ref15.values,
       defaultValue = _ref15.defaultValue,
-      setValue = _ref15.setValue;
+      setValue = _ref15.setValue,
+      getValues = _ref15.getValues,
+      disabled = _ref15.disabled;
   var classes = (0, _styleContext.useCustomStyle)();
 
   var _useFieldArray = (0, _reactHookForm.useFieldArray)({
@@ -1019,6 +1152,7 @@ var ArrayStep = function ArrayStep(_ref15) {
       className: "input-group-append"
     }, /*#__PURE__*/_react["default"].createElement("button", {
       className: "btn btn-danger btn-sm",
+      disabled: disabled,
       onClick: function onClick() {
         remove(idx);
         trigger(entry);
@@ -1029,10 +1163,18 @@ var ArrayStep = function ArrayStep(_ref15) {
     className: (0, _classnames["default"])("btn btn-info mt-2", _defineProperty({}, classes.input__invalid, error)),
     onClick: function onClick() {
       append({
-        value: step.addableDefaultValue
+        value: step.addableDefaultValue || defaultVal(step.type)
       });
       trigger(entry);
+      (0, _Option.option)(step.onChange).map(function (onChange) {
+        return onChange({
+          rawValues: getValues(),
+          value: getValues(entry),
+          setValue: setValue
+        });
+      });
     },
+    disabled: disabled,
     value: "Add"
   }), error && /*#__PURE__*/_react["default"].createElement("div", {
     className: "invalid-feedback"
@@ -1096,14 +1238,38 @@ var NestedForm = function NestedForm(_ref16) {
       });
     }
   }, [prevSchema, schemaAndFlow.schema]);
+  var computedSandF = schemaAndFlow.flow.reduce(function (acc, entry) {
+    var step = schemaAndFlow.schema[entry];
+    var visibleStep = (0, _Option.option)(step).map(function (s) {
+      return s.visible;
+    }).map(function (visible) {
+      switch (_typeof(visible)) {
+        case 'object':
+          var _value2 = watch(visible.ref);
+
+          return (0, _Option.option)(visible.test).map(function (test) {
+            return test(_value2);
+          }).getOrElse(_value2);
+
+        case 'boolean':
+          return visible;
+
+        default:
+          return true;
+      }
+    }).getOrElse(true);
+    return [].concat(_toConsumableArray(acc), [{
+      step: step,
+      visibleStep: visibleStep,
+      entry: entry
+    }]);
+  }, []);
+  var bordered = computedSandF.filter(function (x) {
+    return x.visibleStep;
+  }).length > 1 && step.label === null;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      borderLeft: '2px solid lightGray',
-      paddingLeft: '1rem',
-      marginBottom: '.5rem',
-      position: 'relative'
-    }
-  }, collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
+    className: (0, _classnames["default"])(_defineProperty({}, classes.nestedform__border, bordered))
+  }, !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
     size: 30,
     className: classes.cursor_pointer,
     style: {
@@ -1115,7 +1281,7 @@ var NestedForm = function NestedForm(_ref16) {
     onClick: function onClick() {
       return setCollapsed(!collapsed);
     }
-  }), !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowUp, {
+  }), !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowUp, {
     size: 30,
     className: classes.cursor_pointer,
     style: {
@@ -1123,20 +1289,28 @@ var NestedForm = function NestedForm(_ref16) {
       top: '5px',
       left: '-16px'
     },
-    "stroke-width": "3",
+    "strok-width": "3",
     onClick: function onClick() {
       return setCollapsed(!collapsed);
     }
-  }), schemaAndFlow.flow.map(function (entry, idx) {
-    var step = schemaAndFlow.schema[entry];
+  }), computedSandF.map(function (_ref17, idx) {
+    var step = _ref17.step,
+        visibleStep = _ref17.visibleStep,
+        entry = _ref17.entry;
+
+    if (!step && typeof entry === 'string') {
+      console.error("no step found for the entry \"".concat(entry, "\" in the given schema. Your form might not work properly. Please fix it"));
+      return null;
+    }
+
     var realError = error && error[entry];
-    var oneVisibleSetup = Object.values(schema).some(function (v) {
+    var oneVisibleSetup = Object.values(schemaAndFlow.schema).some(function (v) {
       return !!v.visibleOnCollapse;
     });
     var isCollapsed = collapsed && (oneVisibleSetup ? !step.visibleOnCollapse : idx > 0);
     return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
       key: "".concat(entry, ".").concat(idx),
-      className: (0, _classnames["default"])(_defineProperty({}, classes.display__none, isCollapsed)),
+      className: (0, _classnames["default"])(_defineProperty({}, classes.display__none, isCollapsed || !visibleStep)),
       entry: "".concat(parent, ".").concat(entry),
       error: realError,
       label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry,

package/lib/inputs/Collapse.js

@@ -66,7 +66,7 @@ var Collapse = function Collapse(props) {
   }), !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.EyeOff, {
     size: 16
   }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classes.ml_10, (_classNames4 = {}, _defineProperty(_classNames4, classes.display__none, !!collapsed), _defineProperty(_classNames4, classes.flex, !!props.inline), _classNames4))
+    className: (0, _classnames["default"])("".concat(classes.ml_10), (_classNames4 = {}, _defineProperty(_classNames4, classes.display__none, !!collapsed), _defineProperty(_classNames4, classes.flex, !!props.inline), _defineProperty(_classNames4, classes.collapse__inline, !!props.inline), _classNames4))
   }, props.children), props.lineEnd && /*#__PURE__*/_react["default"].createElement("hr", null));
 };
 

package/lib/inputs/SelectInput.js

@@ -189,6 +189,7 @@ var SelectInput = function SelectInput(props) {
       return /*#__PURE__*/_react["default"].createElement("button", {
         key: idx,
         type: "button",
+        disabled: props.disabled,
         className: (0, _classnames["default"])(props.className, classes.btn, classes.btn_grey, classes.ml_5, {
           active: active
         }),
@@ -213,7 +214,8 @@ var SelectInput = function SelectInput(props) {
         return handleCreate(option, props.onCreateOption);
       },
       classNamePrefix: "react-form-select",
-      className: props.className
+      className: props.className,
+      readOnly: props.disabled ? 'readOnly' : null
     }));
   } else {
     return /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], _extends({}, props, {
@@ -225,7 +227,8 @@ var SelectInput = function SelectInput(props) {
       options: values,
       onChange: onChange,
       classNamePrefix: "react-form-select",
-      className: props.className
+      className: props.className,
+      readOnly: props.disabled ? 'readOnly' : null
     }));
   }
 };

package/lib/style.d.ts

@@ -211,9 +211,16 @@ export namespace style {
         const display_3: string;
         export { display_3 as display };
     }
-    const collapseInline: {
-        "&+ .form-group": {
+    const collapse__inline: {
+        "& .form-group+.form-group": {
             marginLeft: string;
         };
     };
+    namespace nestedform__border {
+        export const borderLeft: string;
+        export const paddingLeft: string;
+        const marginBottom_1: string;
+        export { marginBottom_1 as marginBottom };
+        export const position: string;
+    }
 }

package/lib/style.js

@@ -159,9 +159,14 @@ var style = (_style = {
   color: "#dc3545"
 }), _defineProperty(_style, "display__none", {
   display: "none"
-}), _defineProperty(_style, "collapseInline", {
-  "&+ .form-group": {
+}), _defineProperty(_style, "collapse__inline", {
+  "& .form-group+.form-group": {
     marginLeft: '20px'
   }
+}), _defineProperty(_style, "nestedform__border", {
+  borderLeft: '2px solid lightGray',
+  paddingLeft: '1rem',
+  marginBottom: '.5rem',
+  position: 'relative'
 }), _style);
 exports.style = style;

package/lib/styleContext.d.ts

@@ -1 +1 @@
-export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mr_5" | "mr_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "full_width" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback" | "display__none" | "collapseInline">;
+export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mr_5" | "mr_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "full_width" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback" | "display__none" | "collapse__inline" | "nestedform__border">;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.21",
+  "version": "1.0.25",
   "main": "lib/index.js",
   "author": "MAIF team",
   "keywords": [