@maif/react-forms 1.0.36 → 1.0.39

package/lib/index.js

@@ -14,6 +14,7 @@ var uuid = require('uuid');
 var reactJss = require('react-jss');
 var CreatableSelect = require('react-select/creatable');
 var Select = require('react-select');
+var deepEqual = require('fast-deep-equal');
 var showdown = require('showdown');
 require('@fortawesome/fontawesome-free/css/all.css');
 require('highlight.js/styles/monokai.css');
@@ -45,6 +46,7 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var ReactToolTip__default = /*#__PURE__*/_interopDefaultLegacy(ReactToolTip);
 var CreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(CreatableSelect);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var deepEqual__default = /*#__PURE__*/_interopDefaultLegacy(deepEqual);
 var showdown__default = /*#__PURE__*/_interopDefaultLegacy(showdown);
 var hljs__default = /*#__PURE__*/_interopDefaultLegacy(hljs);
 
@@ -62,7 +64,8 @@ var format = {
   select: 'select',
   code: 'code',
   markdown: 'markdown',
-  text: 'text',
+  text: 'textarea',
+  textarea: 'textarea',
   email: 'email',
   password: 'password',
   hidden: 'hidden',
@@ -213,12 +216,6 @@ var _maxSize = function maxSize(ref) {
   };
 }; //mixed
 
-var _nullable = function nullable() {
-  return function (r) {
-    return r.nullable().optional();
-  };
-};
-
 var _test = function test(name) {
   var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Test failed';
   var test = arguments.length > 2 ? arguments[2] : undefined;
@@ -253,12 +250,23 @@ var _oneOf = function oneOf(arrayOfValues) {
   };
 };
 
-var _ref20 = function ref(_ref) {
+var _blacklist = function blacklist(arrayOfValues) {
+  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This value can't include the following values ".concat(arrayOfValues.join(', '));
+  return function (r) {
+    return r.test('blacklist', message, function (value) {
+      return !arrayOfValues.some(function (f) {
+        return (value || '').includes(f);
+      });
+    });
+  };
+};
+
+var _ref21 = function ref(_ref) {
   return yup__namespace.ref(_ref);
 };
 
 var maybeRef = function maybeRef(x) {
-  return x !== null && x !== void 0 && x.ref ? _ref20(x.ref) : x;
+  return x !== null && x !== void 0 && x.ref ? _ref21(x.ref) : x;
 }; //### JSON method ###
 
 
@@ -371,11 +379,14 @@ var jsonConstraints = {
         message = _ref19$message === void 0 ? "This value must be one of ".concat(arrayOfValues.join(', ')) : _ref19$message;
     return _oneOf(arrayOfValues, message);
   },
-  ref: function ref(val) {
-    return _ref20(val.ref);
+  blacklist: function blacklist(_ref20) {
+    var arrayOfValues = _ref20.arrayOfValues,
+        _ref20$message = _ref20.message,
+        message = _ref20$message === void 0 ? "This value can't include the following values ".concat(arrayOfValues.join(', ')) : _ref20$message;
+    return _blacklist(arrayOfValues, message);
   },
-  nullable: function nullable() {
-    return _nullable();
+  ref: function ref(val) {
+    return _ref21(val.ref);
   }
 };
 
@@ -397,11 +408,11 @@ var constraints = /*#__PURE__*/Object.freeze({
   supportedFormat: _supportedFormat,
   unsupportedFormat: _unsupportedFormat,
   maxSize: _maxSize,
-  nullable: _nullable,
   test: _test,
   when: _when,
   oneOf: _oneOf,
-  ref: _ref20,
+  blacklist: _blacklist,
+  ref: _ref21,
   jsonConstraints: jsonConstraints
 });
 
@@ -665,6 +676,9 @@ var style = (_style = {
   d_none: {
     display: "none"
   },
+  flexWrap: {
+    flexWrap: 'wrap'
+  },
   flex: {
     display: "flex"
   },
@@ -683,6 +697,9 @@ var style = (_style = {
   jc_flex_end: {
     justifyContent: "flex-end"
   },
+  jc_flex_start: {
+    justifyContent: "flex-start"
+  },
   ac_center: {
     alignContent: "center"
   },
@@ -759,6 +776,15 @@ var style = (_style = {
   border: "1px solid green",
   justifyContent: "flex-end"
 }), _defineProperty$1(_style, "content_switch_button_off", {
+  width: "35px",
+  height: "22px",
+  borderRadius: "20px",
+  display: "flex",
+  marginTop: "10px",
+  backgroundColor: "#dc3545",
+  border: "1px solid #dc3545",
+  justifyContent: "flex-start"
+}), _defineProperty$1(_style, "content_switch_button_null", {
   width: "35px",
   height: "22px",
   borderRadius: "20px",
@@ -774,6 +800,14 @@ var style = (_style = {
   width: "20px",
   height: "20px"
 }, _defineProperty$1(_switch_button_on, "backgroundColor", "#fff"), _defineProperty$1(_switch_button_on, "borderRadius", "20px"), _switch_button_on)), _defineProperty$1(_style, "switch_button_off", {
+  backgroundColor: "#fff",
+  borderRadius: "20px",
+  cursor: "pointer",
+  width: "20px",
+  height: "20px",
+  border: "1px solid #dfdfdf",
+  boxShadow: "1px 0px 5px 0px rgba(0, 0, 0, 0.3)"
+}), _defineProperty$1(_style, "switch_button_null", {
   backgroundColor: "#fff",
   borderRadius: "20px",
   cursor: "pointer",
@@ -792,7 +826,7 @@ var useCustomStyle = function useCustomStyle() {
   return classes;
 };
 
-var BooleanInput = function BooleanInput(_ref) {
+var BooleanInput = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _classNames;
 
   var onChange = _ref.onChange,
@@ -815,15 +849,22 @@ var BooleanInput = function BooleanInput(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](classes.switch_button_on)
-  })), !value && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), !value && value !== null && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](classes.content_switch_button_off),
     onClick: function onClick() {
       return handleClick(true);
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](classes.switch_button_off)
+  })), value === null && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"](classes.content_switch_button_null),
+    onClick: function onClick() {
+      return handleClick(true);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"](classes.switch_button_null)
   })));
-};
+});
 
 var Collapse = function Collapse(props) {
   var _classNames4;
@@ -914,35 +955,22 @@ var None = {
   }
 };
 
-var deepEqual = function deepEqual(a, b) {
-  if (a === b) return true;
-  if (_typeof$1(a) !== 'object' || _typeof$1(b) !== 'object' || a === null || b === null) return false;
-  var keysA = Object.keys(a),
-      keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-
-  for (var _i = 0, _keysA = keysA; _i < _keysA.length; _i++) {
-    var key = _keysA[_i];
-    if (!keysB.includes(key)) return false;
-
-    if (typeof a[key] === 'function' || typeof b[key] === 'function') {
-      if (a[key].toString() !== b[key].toString()) return false;
-    } else {
-      if (!deepEqual(a[key], b[key])) return false;
-    }
-  }
-
-  return true;
-};
 var isPromise = function isPromise(value) {
   return Boolean(value && typeof value.then === 'function');
 };
+var arrayFlatten = function arrayFlatten(array) {
+  if (array.some(Array.isArray)) {
+    return arrayFlatten(array.flat());
+  }
+
+  return array;
+};
 
 var valueToSelectOption = function valueToSelectOption(value) {
   var possibleValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var isMulti = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
-  if (value === null) {
+  if (value === null || !value) {
     return null;
   }
 
@@ -958,7 +986,7 @@ var valueToSelectOption = function valueToSelectOption(value) {
   }
 
   var maybeValue = option(possibleValues.find(function (v) {
-    return deepEqual(v.value, value);
+    return deepEqual__default["default"](v.value, value);
   }));
   return maybeValue.getOrElse({
     label: maybeValue.map(function (v) {
@@ -970,7 +998,7 @@ var valueToSelectOption = function valueToSelectOption(value) {
   });
 };
 
-var SelectInput = function SelectInput(props) {
+var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, _) {
   var classes = useCustomStyle();
   var possibleValues = (props.possibleValues || []).map(function (v) {
     return props.transformer ? typeof props.transformer === 'function' ? props.transformer(v) : {
@@ -1071,13 +1099,13 @@ var SelectInput = function SelectInput(props) {
     return onChange(v);
   };
 
-  if (props.format === format.buttonsSelect) {
+  if (props.buttons) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         display: 'flex'
       }
     }, values.map(function (v, idx) {
-      var active = props.isMulti ? value.includes(v) : v.value === value.value;
+      var active = !!value && (props.isMulti ? value.includes(v) : v.value === value.value);
       return /*#__PURE__*/React__default["default"].createElement("button", {
         key: idx,
         type: "button",
@@ -1114,6 +1142,7 @@ var SelectInput = function SelectInput(props) {
       name: "".concat(props.label, "-search"),
       isLoading: loading,
       value: value,
+      isClearable: true,
       defaultValue: value,
       isDisabled: props.disabled,
       placeholder: props.placeholder,
@@ -1124,7 +1153,7 @@ var SelectInput = function SelectInput(props) {
       readOnly: props.disabled ? 'readOnly' : null
     }));
   }
-};
+});
 
 var ObjectInput = function ObjectInput(props) {
   var _useState = React.useState(),
@@ -1155,7 +1184,7 @@ var ObjectInput = function ObjectInput(props) {
         if (item.key) return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, item.key, item.value));
         return acc;
       }, {});
-      if (!deepEqual(newState, previousState)) setInternalState(Object.fromEntries(Object.entries(props.value || {}).map(function (_ref5, idx) {
+      if (!deepEqual__default["default"](newState, previousState)) setInternalState(Object.fromEntries(Object.entries(props.value || {}).map(function (_ref5, idx) {
         var _ref6 = _slicedToArray(_ref5, 2),
             key = _ref6[0],
             value = _ref6[1];
@@ -28460,7 +28489,7 @@ function Editor(parent, mode, onChange, value) {
         }
       } catch (_) {}
     }), EditorView.editable.of(!readOnly)]),
-    doc: _typeof(value) === 'object' ? value.value : value
+    doc: !value ? '' : _typeof(value) === 'object' ? value.value : value
   });
   return new EditorView({
     state: state,
@@ -28511,7 +28540,7 @@ function CodeInput(_ref) {
       changes: {
         from: 0,
         to: editor.state.doc.length,
-        insert: _typeof$1(value) === 'object' ? JSON.stringify(value, null, 2) : value
+        insert: value === null ? '' : _typeof$1(value) === 'object' ? JSON.stringify(value, null, 2) : value
       }
     });
   }, [value]);
@@ -28520,68 +28549,6 @@ function CodeInput(_ref) {
   });
 }
 
-window.hljs = window.hljs || hljs__default["default"];
-
-var DaikokuExtension = function DaikokuExtension() {
-  // @ref: []()
-  var refextension = {
-    type: 'lang',
-    regex: /@ref:\[(.*)\]\((.*)\)/g,
-    replace: function replace(expression, title, docId) {
-      var path = window.location.pathname;
-      var rawParts = path.split('/');
-      rawParts.shift();
-      var parts = rawParts.splice(0, 5);
-      var teamId = parts[1];
-      var apiId = parts[3];
-      var versionId = parts[4];
-      return "<a href=\"/".concat(teamId, "/").concat(apiId, "/").concat(versionId, "/documentation/").concat(docId, "\">").concat(title, "</a>");
-    }
-  }; // @@@
-
-  var tripleArobase = {
-    type: 'lang',
-    regex: /@@@/g,
-    replace: function replace() {
-      console.log('@@@');
-      return '</div>';
-    }
-  }; // @@@warning
-
-  var warningExtension = {
-    type: 'lang',
-    regex: /@@@ warning/g,
-    replace: function replace() {
-      return '<div class="note note-warning">';
-    }
-  }; // @@@warning { title = }
-
-  var warningTitleExtension = {
-    type: 'lang',
-    regex: /@@@ warning \{ title='(.*)' \}/g,
-    replace: function replace(expr, title) {
-      return "<div class=\"note note-warning\"><div class=\"note-title\">".concat(title, "</div>");
-    }
-  }; // @@@note
-
-  var noteExtension = {
-    type: 'lang',
-    regex: /@@@ note/g,
-    replace: function replace() {
-      return '<div class="note">';
-    }
-  }; // @@@note { title = }
-
-  var noteTitleExtension = {
-    type: 'lang',
-    regex: /@@@ note \{ title='(.*)' \}/g,
-    replace: function replace(expr, title) {
-      return "<div class=\"note\"><div class=\"note-title\">".concat(title, "</div>");
-    }
-  };
-  return [refextension, warningTitleExtension, noteTitleExtension, warningExtension, noteExtension, tripleArobase];
-};
-
 var converter = new showdown__default["default"].Converter({
   omitExtraWLInCodeBlocks: true,
   ghCompatibleHeaderId: true,
@@ -28592,20 +28559,15 @@ var converter = new showdown__default["default"].Converter({
   requireSpaceBeforeHeadingText: true,
   ghMentions: true,
   emoji: true,
-  ghMentionsLink: '/{u}',
-  extensions: [DaikokuExtension]
+  ghMentionsLink: '/{u}'
 });
 var MarkdownInput = function MarkdownInput(props) {
-  var _useState = React.useState(false),
+  var _useState = React.useState(props.preview),
       _useState2 = _slicedToArray(_useState, 2),
       preview = _useState2[0],
       setPreview = _useState2[1];
 
-  var _useState3 = React.useState(undefined),
-      _useState4 = _slicedToArray(_useState3, 2),
-      editor = _useState4[0];
-      _useState4[1];
-
+  var ref = React.useRef();
   React.useEffect(function () {
     if (preview) {
       showPreview();
@@ -28614,162 +28576,127 @@ var MarkdownInput = function MarkdownInput(props) {
   var commands = [{
     name: 'Add header',
     icon: 'heading',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "# ".concat(selected);
+    inject: function inject(range) {
+      return !range ? '#' : [{
+        from: range.from,
+        insert: "# "
+      }];
     }
   }, {
     name: 'Add bold text',
     icon: 'bold',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "**".concat(selected, "**");
+    inject: function inject(range) {
+      return !range ? '**  **' : [{
+        from: range.from,
+        insert: "**"
+      }, {
+        from: range.to,
+        insert: '**'
+      }];
     }
   }, {
     name: 'Add italic text',
     icon: 'italic',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "*".concat(selected, "*");
+    inject: function inject(range) {
+      return !range ? '* *' : [{
+        from: range.from,
+        insert: '*'
+      }, {
+        from: range.to,
+        insert: '*'
+      }];
     }
   }, {
     name: 'Add strikethrough text',
     icon: 'strikethrough',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "~~".concat(selected, "~~");
+    inject: function inject(range) {
+      return !range ? '~~ ~~' : [{
+        from: range.from,
+        insert: '~~'
+      }, {
+        from: range.to,
+        insert: '~~'
+      }];
     }
   }, {
     name: 'Add link',
     icon: 'link',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "[".concat(selected, "](url)");
+    inject: function inject(range) {
+      return !range ? '[ ](url)' : [{
+        from: range.from,
+        insert: '['
+      }, {
+        from: range.to,
+        insert: '](url)'
+      }];
     }
   }, {
     name: 'Add code',
     icon: 'code',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return '```\n' + selected + '\n```\n';
-    },
-    move: function move(pos, setPos) {
-      return setPos({
-        column: 0,
-        row: pos.row - 2
-      });
+    inject: function inject(range) {
+      return !range ? '```\n\n```\n' : [{
+        from: range.from,
+        insert: '```\n'
+      }, {
+        from: range.to,
+        insert: '\n```\n'
+      }];
     }
   }, {
     name: 'Add quotes',
     icon: 'quote-right',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "> ".concat(selected);
+    inject: function inject(range) {
+      return !range ? '> ' : [{
+        from: range.from,
+        insert: '> '
+      }];
     }
   }, {
     name: 'Add image',
     icon: 'image',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "![".concat(selected, "](image-url)");
+    inject: function inject(range) {
+      return !range ? '![ ](image-url)' : [{
+        from: range.from,
+        insert: '!['
+      }, {
+        from: range.to,
+        insert: '](image-url)'
+      }];
     }
   }, {
     name: 'Add unordered list',
     icon: 'list-ul',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "* ".concat(selected);
+    inject: function inject(range) {
+      return !range ? '* ' : [{
+        from: range.from,
+        insert: '* '
+      }];
     }
   }, {
     name: 'Add ordered list',
     icon: 'list-ol',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "1. ".concat(selected);
+    inject: function inject(range) {
+      return !range ? '1. ' : [{
+        from: range.from,
+        insert: '1. '
+      }];
     }
   }, {
     name: 'Add check list',
     icon: 'tasks',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "* [ ] ".concat(selected);
-    }
-  }, {
-    name: 'Page ref',
-    icon: 'book',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "@ref:[".concat(selected, "](team/api/doc)");
-    }
-  }, {
-    name: 'Warning',
-    icon: 'exclamation-triangle',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "@@@ warning\n".concat(selected, "\n@@@\n");
-    },
-    move: function move(pos, setPos) {
-      return setPos({
-        column: 0,
-        row: pos.row - 2
-      });
-    }
-  }, {
-    name: 'Warning with title',
-    icon: 'exclamation-circle',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "@@@ warning { title='A nice title' }\n".concat(selected, "\n@@@\n");
-    },
-    move: function move(pos, setPos) {
-      return setPos({
-        column: 0,
-        row: pos.row - 2
-      });
-    }
-  }, {
-    name: 'Note',
-    icon: 'sticky-note',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "@@@ note\n".concat(selected, "\n@@@\n");
-    },
-    move: function move(pos, setPos) {
-      return setPos({
-        column: 0,
-        row: pos.row - 2
-      });
-    }
-  }, {
-    name: 'Note with title',
-    icon: 'clipboard',
-    inject: function inject() {
-      var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ' ';
-      return "@@@ note { title='A nice title' }\n".concat(selected, "\n@@@\n");
-    },
-    move: function move(pos, setPos) {
-      return setPos({
-        column: 0,
-        row: pos.row - 2
-      });
-    }
-  }, {
-    name: 'Lorem Ipsum',
-    icon: 'feather-alt',
-    inject: function inject() {
-      return 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida convallis leo et aliquet. Aenean venenatis, elit et dignissim scelerisque, urna dui mollis nunc, id eleifend velit sem et ante. Quisque pharetra sed tellus id finibus. In quis porta libero. Nunc egestas eros elementum lacinia blandit. Donec nisi lacus, tristique vel blandit in, sodales eget lacus. Phasellus ultrices magna vel odio vestibulum, a rhoncus nunc ornare. Sed laoreet finibus arcu vitae aliquam. Aliquam quis ex dui.';
-    }
-  }, {
-    name: 'Long Lorem Ipsum',
-    icon: 'feather',
-    inject: function inject() {
-      return "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida convallis leo et aliquet. Aenean venenatis, elit et dignissim scelerisque, urna dui mollis nunc, id eleifend velit sem et ante. Quisque pharetra sed tellus id finibus. In quis porta libero. Nunc egestas eros elementum lacinia blandit. Donec nisi lacus, tristique vel blandit in, sodales eget lacus. Phasellus ultrices magna vel odio vestibulum, a rhoncus nunc ornare. Sed laoreet finibus arcu vitae aliquam. Aliquam quis ex dui.\n\nCras ut ultrices quam. Nulla eu purus sed turpis consequat sodales. Aenean vitae efficitur velit, vel accumsan felis. Curabitur aliquam odio dictum urna convallis faucibus. Vivamus eu dignissim lorem. Donec sed hendrerit massa. Suspendisse volutpat, nisi at fringilla consequat, eros lacus aliquam metus, eu convallis nulla mauris quis lacus. Aliquam ultricies, mi eget feugiat vestibulum, enim nunc eleifend nisi, nec tincidunt turpis elit id diam. Nunc placerat accumsan tincidunt. Nulla ut interdum dui. Praesent venenatis cursus aliquet. Nunc pretium rutrum felis nec pharetra.\n\nVivamus sapien ligula, hendrerit a libero vitae, convallis maximus massa. Praesent ante leo, fermentum vitae libero finibus, blandit porttitor risus. Nulla ac hendrerit turpis. Sed varius velit at libero feugiat luctus. Nunc rhoncus sem dolor, nec euismod justo rhoncus vitae. Vivamus finibus nulla a purus vestibulum sagittis. Maecenas maximus orci at est lobortis, nec facilisis erat rhoncus. Sed tempus leo et est dictum lobortis. Vestibulum rhoncus, nisl ut porta sollicitudin, arcu urna egestas arcu, eget efficitur neque ipsum ut felis. Ut commodo purus quis turpis tempus tincidunt. Donec id hendrerit eros. Vestibulum vitae justo consectetur, egestas nisi ac, eleifend odio.\n\nDonec id mi cursus, volutpat dolor sed, bibendum sapien. Etiam vitae mauris sit amet urna semper tempus vel non metus. Integer sed ligula diam. Aenean molestie ultrices libero eget suscipit. Phasellus maximus euismod eros ut scelerisque. Ut quis tempus metus. Sed mollis volutpat velit eget pellentesque. Integer hendrerit ultricies massa eu tincidunt. Quisque at cursus augue. Sed diam odio, molestie sed dictum eget, efficitur nec nulla. Nullam vulputate posuere nunc nec laoreet. Integer varius sed erat vitae cursus. Vivamus auctor augue enim, a fringilla mauris molestie eget.\n\nProin vehicula ligula vel enim euismod, sed congue mi egestas. Nullam varius ut felis eu fringilla. Quisque sodales tortor nec justo tristique, sit amet consequat mi tincidunt. Suspendisse porttitor laoreet velit, non gravida nibh cursus at. Pellentesque faucibus, tellus in dapibus viverra, dolor mi dignissim tortor, id convallis ipsum lorem id nisl. Sed id nisi felis. Aliquam in ullamcorper ipsum, vel consequat magna. Donec nec mollis lacus, a euismod elit.";
+    inject: function inject(range) {
+      return !range ? '* [ ] ' : [{
+        from: range.from,
+        insert: '* [ ] '
+      }];
     }
   }];
 
   var showPreview = function showPreview() {
-    Array.from(document.querySelectorAll('pre code')).forEach(function (block, idx) {
-      window.hljs.highlightElement(block);
+    var parent = _toConsumableArray$1(document.getElementsByClassName('preview'));
+
+    if (parent.length > 0) _toConsumableArray$1(parent[0].querySelectorAll('pre code')).forEach(function (block) {
+      return hljs__default["default"].highlightElement(block);
     });
   };
 
@@ -28787,21 +28714,22 @@ var MarkdownInput = function MarkdownInput(props) {
         title: command.name,
         key: "toolbar-btn-".concat(idx),
         onClick: function onClick() {
-          var selection = editor.getSelection();
-
-          if (selection) {
-            editor.session.replace(selection.getRange(), command.inject(editor.getSelectedText()));
-          } else {
-            editor.session.insert(editor.getCursorPosition(), command.inject());
-          }
-
-          if (command.move) {
-            command.move(editor.getCursorPosition(), function (p) {
-              return editor.moveCursorToPosition(p);
-            });
+          var editor = ref.current;
+          var selections = editor.state.selection.ranges;
+          if (selections.length === 1 && selections[0].from === selections[0].to) editor.dispatch({
+            changes: {
+              from: 0,
+              to: editor.state.doc.length,
+              insert: editor.state.doc.toString() + command.inject()
+            }
+          });else {
+            editor.dispatch(editor.state.changeByRange(function (range) {
+              return {
+                changes: command.inject(range),
+                range: range
+              };
+            }));
           }
-
-          editor.focus();
         }
       }, /*#__PURE__*/React__default["default"].createElement("i", {
         className: "fas fa-".concat(command.icon)
@@ -28812,7 +28740,7 @@ var MarkdownInput = function MarkdownInput(props) {
   var classes = useCustomStyle();
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](props.className)
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !props.readOnly && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       marginBottom: 10
     }
@@ -28837,9 +28765,13 @@ var MarkdownInput = function MarkdownInput(props) {
       return setPreview(true);
     }
   }, "Preview"))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](classes.flex)
-  }, injectButtons())), !preview && /*#__PURE__*/React__default["default"].createElement(CodeInput, props), preview && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "api-description",
+    className: classNames__default["default"](classes.flex, classes.flexWrap)
+  }, injectButtons())), !preview && /*#__PURE__*/React__default["default"].createElement(CodeInput, _extends({}, props, {
+    setRef: function setRef(e) {
+      return ref.current = e;
+    }
+  })), preview && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "preview",
     dangerouslySetInnerHTML: {
       __html: converter.makeHtml(props.value)
     }
@@ -28887,16 +28819,18 @@ function SingleLineCode(_ref) {
 }
 
 var _resolvers;
-var resolvers = (_resolvers = {}, _defineProperty$1(_resolvers, type.string, function () {
-  return yup__namespace.string();
+var resolvers = (_resolvers = {}, _defineProperty$1(_resolvers, type.string, function (typeErrorMessage) {
+  return yup__namespace.string().nullable().optional().typeError(typeErrorMessage || 'Value must be a string');
 }), _defineProperty$1(_resolvers, type.number, function (typeErrorMessage) {
-  return yup__namespace.number().typeError(typeErrorMessage || 'Value must be a number');
+  return yup__namespace.number().nullable().optional().transform(function (v) {
+    return isNaN(v) ? null : v;
+  }).typeError(typeErrorMessage || 'Value must be a number');
 }), _defineProperty$1(_resolvers, type.bool, function () {
-  return yup__namespace.bool();
+  return yup__namespace.bool().nullable().optional();
 }), _defineProperty$1(_resolvers, type.object, function () {
-  return yup__namespace.object();
+  return yup__namespace.object().nullable().optional();
 }), _defineProperty$1(_resolvers, type.date, function (typeErrorMessage) {
-  return yup__namespace.date().typeError(typeErrorMessage || 'Value must be a date');
+  return yup__namespace.date().nullable().optional().typeError(typeErrorMessage || 'Value must be a date');
 }), _defineProperty$1(_resolvers, type.file, function () {
   return yup__namespace.mixed();
 }), _resolvers);
@@ -28923,6 +28857,10 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
     }, arrayResolver);
   } else if (props.type === type.object && props.schema) {
+    if (!Object.keys(props.schema).length) {
+      return yup__namespace.object();
+    }
+
     var _subResolver = getShapeAndDependencies(props.flow || Object.keys(props.schema), props.schema, dependencies, rawData);
 
     return constraints.reduce(function (resolver, constraint) {
@@ -28973,11 +28911,23 @@ var jsonOrFunctionConstraint = function jsonOrFunctionConstraint(constraint, res
 var getShapeAndDependencies = function getShapeAndDependencies(flow, schema) {
   var dependencies = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var rawData = arguments.length > 3 ? arguments[3] : undefined;
+
+  if (!Object.keys(schema).length) {
+    return {
+      shape: yup__namespace.object().shape({}),
+      dependencies: dependencies
+    };
+  }
+
   var shape = (flow || Object.keys(schema)).reduce(function (resolvers, key) {
     if (_typeof$1(key) === 'object') {
       return _objectSpread2$1(_objectSpread2$1({}, resolvers), getShapeAndDependencies(key.flow, schema, dependencies, rawData).shape);
     }
 
+    if (!schema[key]) {
+      return resolvers;
+    }
+
     var resolver = buildSubResolver(schema[key], key, dependencies, rawData);
     return _objectSpread2$1(_objectSpread2$1({}, resolvers), {}, _defineProperty$1({}, key, resolver));
   }, {});
@@ -28987,13 +28937,102 @@ var getShapeAndDependencies = function getShapeAndDependencies(flow, schema) {
   };
 };
 
+var CustomizableInput$1 = /*#__PURE__*/React__default["default"].memo(function (props) {
+  // console.log("CUSTOMIZABLE_INPUT" + props.field.name)
+  if (props.render) {
+    return props.render(_objectSpread2$1(_objectSpread2$1({}, props.field), {}, {
+      error: props.error
+    }));
+  }
+
+  return props.children;
+}, function (prev, next) {
+  return prev.field.value === next.field.value;
+});
+var ControlledInput = function ControlledInput(_ref) {
+  var defaultValue = _ref.defaultValue,
+      step = _ref.step,
+      entry = _ref.entry,
+      children = _ref.children,
+      component = _ref.component;
+
+  var _useController = reactHookForm.useController({
+    defaultValue: defaultValue || null,
+    name: entry
+  }),
+      field = _useController.field;
+
+  var _useFormContext = reactHookForm.useFormContext(),
+      getValues = _useFormContext.getValues,
+      _setValue = _useFormContext.setValue,
+      errors = _useFormContext.formState.errors;
+
+  var functionalProperty = function functionalProperty(entry, prop) {
+    if (typeof prop === 'function') {
+      return prop({
+        rawValues: getValues(),
+        value: getValues(entry)
+      });
+    } else {
+      return prop;
+    }
+  };
+
+  var props = _objectSpread2$1(_objectSpread2$1(_objectSpread2$1({}, field), step.props), {}, {
+    id: entry,
+    readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
+    placeholder: step.placeholder,
+    onChange: function onChange(e) {
+      var value = function () {
+        if (!e) {
+          if (step.type === type.bool || step.type === type.number && field.value === 0) {
+            return e;
+          } else {
+            return null;
+          }
+        } else if (e.target) {
+          return e.target.value || null;
+        } else {
+          return e;
+        }
+      }();
+
+      console.log(entry, value, getValues());
+      field.onChange(value);
+      option(step.onChange).map(function (onChange) {
+        return onChange({
+          rawValues: getValues(),
+          value: value,
+          setValue: _setValue
+        });
+      });
+    },
+    value: field.value
+  });
+
+  var error = entry.split('.').reduce(function (acc, curr) {
+    return acc && acc[curr];
+  }, errors);
+  return /*#__PURE__*/React__default["default"].createElement(CustomizableInput$1, {
+    render: step.render,
+    field: _objectSpread2$1({
+      parent: parent,
+      setValue: function setValue(key, value) {
+        return _setValue(key, value);
+      },
+      rawValues: getValues()
+    }, field),
+    error: error
+  }, component ? component(field, props) : /*#__PURE__*/React__default["default"].cloneElement(children, _objectSpread2$1({}, props)));
+};
+
 var usePrevious = function usePrevious(value) {
   // The ref object is a generic container whose current property is mutable ...
   // ... and can hold any value, similar to an instance property on a class
   var ref = React.useRef(); // Store current value in ref
 
   React.useEffect(function () {
-    ref.current = value && JSON.parse(JSON.stringify(value));
+    ref.current = value;
   }, [value]); // Only re-run if value changes
   // Return previous value (happens before update in useEffect above)
 
@@ -29078,33 +29117,16 @@ var CustomizableInput = function CustomizableInput(props) {
   return props.children;
 };
 
-var defaultVal = function defaultVal(t, array, defaultValue) {
+var defaultVal = function defaultVal(value, array, defaultValue) {
   if (!!defaultValue) return defaultValue;
   if (!!array) return [];
-
-  switch (t) {
-    case type.bool:
-      return false;
-
-    case type.number:
-      return 0;
-
-    case type.object:
-      return undefined;
-    //todo: passur de moi
-
-    case type.string:
-      return "";
-
-    default:
-      return undefined;
-  }
+  return value;
 };
 
-var getDefaultValues = function getDefaultValues(flow, schema) {
-  return flow.reduce(function (acc, key) {
+var getDefaultValues = function getDefaultValues(flow, schema, value) {
+  return (flow || []).reduce(function (acc, key) {
     if (_typeof$1(key) === 'object') {
-      return _objectSpread2$1(_objectSpread2$1({}, acc), getDefaultValues(key.flow, schema));
+      return _objectSpread2$1(_objectSpread2$1({}, acc), getDefaultValues(key.flow, schema, value));
     }
 
     var entry = schema[key];
@@ -29113,19 +29135,29 @@ var getDefaultValues = function getDefaultValues(flow, schema) {
       return acc;
     }
 
-    return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, defaultVal(entry.type, entry.array || entry.isMulti, entry.defaultValue)));
+    return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, defaultVal(value ? value[key] : null, entry.array || entry.isMulti, entry.defaultValue)));
   }, {});
 };
 
-var cleanInputArray = function cleanInputArray(obj, defaultValues, subSchema) {
-  return Object.entries(subSchema).reduce(function (acc, _ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        step = _ref3[1];
+var cleanInputArray = function cleanInputArray(obj, defaultValues, flow, subSchema) {
+  var realFlow = option(flow).map(function (f) {
+    return f.map(function (v) {
+      return v.flow || v;
+    });
+  }).map(arrayFlatten).getOrElse(Object.keys(subSchema));
+  return Object.entries(subSchema).filter(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 1),
+        key = _ref3[0];
+
+    return realFlow.includes(key);
+  }).reduce(function (acc, _ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        key = _ref5[0],
+        step = _ref5[1];
 
     var v;
     if (obj) v = obj[key];
-    if (!v && defaultValues) v = defaultValues[key];
+    if ((step.type === type.bool && v === null || step.type !== type.bool && !v) && defaultValues) v = defaultValues[key];
 
     if (step.array && !step.render) {
       return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, (v || []).map(function (value) {
@@ -29133,12 +29165,12 @@ var cleanInputArray = function cleanInputArray(obj, defaultValues, subSchema) {
           value: value
         };
       })));
-    } else if (!!v && _typeof$1(v) === 'object' && !(v instanceof Date) && !Array.isArray(v)) {
-      var _subSchema$key;
+    } else if (_typeof$1(v) === 'object' && !(v instanceof Date) && !Array.isArray(v)) {
+      var _subSchema$key, _subSchema$key2;
 
-      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, cleanInputArray(v, defaultValues, ((_subSchema$key = subSchema[key]) === null || _subSchema$key === void 0 ? void 0 : _subSchema$key.schema) || {})));
+      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, cleanInputArray(v, defaultValues, (_subSchema$key = subSchema[key]) === null || _subSchema$key === void 0 ? void 0 : _subSchema$key.flow, ((_subSchema$key2 = subSchema[key]) === null || _subSchema$key2 === void 0 ? void 0 : _subSchema$key2.schema) || {})));
     } else {
-      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v));
+      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v === undefined ? Array.isArray(v) ? [] : step.type === type.object ? {} : null : v));
     }
   }, obj);
 };
@@ -29158,17 +29190,17 @@ var cleanOutputArray = function cleanOutputArray(obj, subSchema) {
       }).getOrElse(false);
 
       if (isArray) {
-        return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v.map(function (_ref4) {
-          var value = _ref4.value;
+        return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v.map(function (_ref6) {
+          var value = _ref6.value;
           return value;
         })));
       }
 
       return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v));
     } else if (!!v && _typeof$1(v) === 'object' && !(v instanceof Date && !Array.isArray(v))) {
-      var _subSchema$key2;
+      var _subSchema$key3;
 
-      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, cleanOutputArray(v, ((_subSchema$key2 = subSchema[key]) === null || _subSchema$key2 === void 0 ? void 0 : _subSchema$key2.schema) || {})));
+      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, cleanOutputArray(v, ((_subSchema$key3 = subSchema[key]) === null || _subSchema$key3 === void 0 ? void 0 : _subSchema$key3.schema) || {})));
     } else {
       return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v));
     }
@@ -29186,20 +29218,54 @@ var validate = function validate(flow, schema, value) {
     abortEarly: false
   });
 };
-var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref5, ref) {
-  var schema = _ref5.schema,
-      flow = _ref5.flow,
-      value = _ref5.value,
-      inputWrapper = _ref5.inputWrapper,
-      onSubmit = _ref5.onSubmit,
-      _ref5$onError = _ref5.onError,
-      onError = _ref5$onError === void 0 ? function () {} : _ref5$onError,
-      footer = _ref5.footer,
-      _ref5$style = _ref5.style,
-      style = _ref5$style === void 0 ? {} : _ref5$style,
-      className = _ref5.className,
-      _ref5$options = _ref5.options,
-      options = _ref5$options === void 0 ? {} : _ref5$options;
+
+var Watcher = function Watcher(_ref7) {
+  var options = _ref7.options,
+      control = _ref7.control,
+      schema = _ref7.schema,
+      onSubmit = _ref7.onSubmit,
+      handleSubmit = _ref7.handleSubmit;
+      _ref7.getValues;
+      _ref7.watch;
+  var data = reactHookForm.useWatch({
+    control: control
+  });
+  var prev = usePrevious(data);
+  React.useEffect(function () {
+    if (!!options.autosubmit) {
+      if (!deepEqual__default["default"](data, prev)) handleSubmit(function () {
+        onSubmit(cleanOutputArray(data, schema));
+      })();
+    }
+  }, [data]);
+
+  if (options.watch) {
+    if (typeof options.watch === 'function') {
+      options.watch(cleanOutputArray(data, schema));
+    } else {
+      console.group('react-form watch');
+      console.log(cleanOutputArray(data, schema));
+      console.groupEnd();
+    }
+  }
+
+  return null;
+};
+
+var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref8, ref) {
+  var schema = _ref8.schema,
+      flow = _ref8.flow,
+      value = _ref8.value,
+      inputWrapper = _ref8.inputWrapper,
+      onSubmit = _ref8.onSubmit,
+      _ref8$onError = _ref8.onError,
+      onError = _ref8$onError === void 0 ? function () {} : _ref8$onError,
+      footer = _ref8.footer,
+      _ref8$style = _ref8.style,
+      style = _ref8$style === void 0 ? {} : _ref8$style,
+      className = _ref8.className,
+      _ref8$options = _ref8.options,
+      options = _ref8$options === void 0 ? {} : _ref8$options;
   var classes = useCustomStyle(style);
   var formFlow = flow || Object.keys(schema);
 
@@ -29218,7 +29284,7 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref5, re
     });
   };
 
-  var defaultValues = getDefaultValues(formFlow, schema); //FIXME: get real schema through the switch
+  var defaultValues = getDefaultValues(formFlow, schema, value); //FIXME: get real schema through the switch
 
   var _resolver = function resolver(rawData) {
     var _getShapeAndDependenc2 = getShapeAndDependencies(formFlow, schema, [], rawData),
@@ -29233,50 +29299,49 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref5, re
     resolver: function resolver(data, context, options) {
       return yup$1.yupResolver(_resolver(data))(data, context, options);
     },
-    defaultValues: cleanInputArray(value, defaultValues, schema),
     shouldFocusError: false,
     mode: 'onChange'
   });
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      initialReseted = _useState2[0],
+      setReset = _useState2[1];
+
+  React.useEffect(function () {
+    _reset(cleanInputArray(value, defaultValues, flow, schema));
+
+    setReset(true);
+  }, [_reset]);
+  React.useEffect(function () {
+    initialReseted && trigger();
+  }, [trigger, initialReseted]);
   var _handleSubmit = methods.handleSubmit,
       _methods$formState = methods.formState,
       errors = _methods$formState.errors,
       dirtyFields = _methods$formState.dirtyFields,
       _reset = methods.reset,
-      watch = methods.watch,
       trigger = methods.trigger,
-      getValues = methods.getValues;
+      getValues = methods.getValues,
+      watch = methods.watch;
+  var prev = usePrevious(value);
+  var prevSchema = usePrevious(schema);
   React.useEffect(function () {
-    trigger();
-  }, [trigger]);
-  React.useEffect(function () {
-    if (value) {
-      _reset(cleanInputArray(value, defaultValues, schema));
-    }
-  }, [value, _reset]);
-  React.useEffect(function () {
-    _reset(cleanInputArray(value, defaultValues, schema));
-  }, [schema]);
-  var data = watch();
-  var prevData = usePrevious(data);
-  React.useEffect(function () {
-    //todo: with debounce
-    if (!!options.autosubmit && JSON.stringify(data) !== JSON.stringify(prevData)) {
-      _handleSubmit(function (data) {
-        var clean = cleanOutputArray(data, schema);
-        onSubmit(clean);
-      }, onError)();
+    if (!deepEqual__default["default"](value, prev) || !deepEqual__default["default"](schema, prevSchema)) {
+      _reset(_objectSpread2$1({}, cleanInputArray(value, defaultValues, flow, schema)));
     }
-  }, [data]);
+  }, [value, schema]);
 
-  if (options.watch) {
-    if (typeof options.watch === 'function') {
-      options.watch(watch());
+  var functionalProperty = function functionalProperty(entry, prop) {
+    if (typeof prop === 'function') {
+      return prop({
+        rawValues: getValues(),
+        value: getValues(entry)
+      });
     } else {
-      console.group('react-form watch');
-      console.log(watch());
-      console.groupEnd();
+      return prop;
     }
-  }
+  };
 
   React.useImperativeHandle(ref, function () {
     return {
@@ -29286,26 +29351,18 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref5, re
           onSubmit(clean);
         }, onError)();
       },
-      rawData: function rawData() {
-        return cleanOutputArray(data, schema);
-      },
       trigger: trigger,
       methods: methods
     };
   });
-
-  var functionalProperty = function functionalProperty(entry, prop) {
-    if (typeof prop === 'function') {
-      return prop({
-        rawValues: getValues(),
-        value: getValues(entry)
-      });
-    } else {
-      return prop;
-    }
-  };
-
-  return /*#__PURE__*/React__default["default"].createElement(reactHookForm.FormProvider, methods, /*#__PURE__*/React__default["default"].createElement("form", {
+  return /*#__PURE__*/React__default["default"].createElement(reactHookForm.FormProvider, methods, /*#__PURE__*/React__default["default"].createElement(Watcher, {
+    options: options,
+    control: methods.control,
+    schema: schema,
+    onSubmit: onSubmit,
+    handleSubmit: _handleSubmit,
+    watch: methods.watch
+  }), /*#__PURE__*/React__default["default"].createElement("form", {
     className: className || "".concat(classes.pr_15, " ").concat(classes.w_100),
     onSubmit: _handleSubmit(function (data) {
       var clean = cleanOutputArray(data, schema);
@@ -29406,17 +29463,18 @@ var Footer = function Footer(props) {
   }, ((_props$actions8 = props.actions) === null || _props$actions8 === void 0 ? void 0 : (_props$actions8$submi = _props$actions8.submit) === null || _props$actions8$submi === void 0 ? void 0 : _props$actions8$submi.label) || 'Save'));
 };
 
-var Step = function Step(_ref6) {
-  var entry = _ref6.entry,
-      realEntry = _ref6.realEntry,
-      step = _ref6.step,
-      schema = _ref6.schema,
-      inputWrapper = _ref6.inputWrapper,
-      httpClient = _ref6.httpClient,
-      defaultValue = _ref6.defaultValue,
-      index = _ref6.index,
-      functionalProperty = _ref6.functionalProperty,
-      parent = _ref6.parent;
+var Step = function Step(_ref9) {
+  var entry = _ref9.entry,
+      realEntry = _ref9.realEntry,
+      step = _ref9.step,
+      schema = _ref9.schema,
+      inputWrapper = _ref9.inputWrapper,
+      httpClient = _ref9.httpClient,
+      defaultValue = _ref9.defaultValue,
+      index = _ref9.index,
+      functionalProperty = _ref9.functionalProperty,
+      parent = _ref9.parent,
+      onAfterChange = _ref9.onAfterChange;
   var classes = useCustomStyle();
 
   var _useFormContext2 = reactHookForm.useFormContext(),
@@ -29429,8 +29487,8 @@ var Step = function Step(_ref6) {
       _useFormContext2.trigger;
       var getValues = _useFormContext2.getValues,
       _setValue = _useFormContext2.setValue,
-      watch = _useFormContext2.watch,
-      register = _useFormContext2.register;
+      watch = _useFormContext2.watch;
+      _useFormContext2.register;
 
   if (entry && _typeof$1(entry) === 'object') {
     var errored = entry.flow.some(function (step) {
@@ -29499,6 +29557,29 @@ var Step = function Step(_ref6) {
     return acc && acc[curr];
   }, touchedFields);
   var errorDisplayed = !!error && (isSubmitted || isDirty || isTouched);
+  var onAfterChangeFunc = onAfterChange || step.onAfterChange || step.on_after_change;
+
+  if (onAfterChangeFunc) {
+    var data = watch();
+    var d = entry.replace('[', '.').replace(']', '').split('.').reduce(function (acc, curr) {
+      return acc && acc[curr];
+    }, data) || {};
+    var currentData = usePrevious(cleanOutputArray(d, schema));
+    var newData = cleanOutputArray(d, schema);
+    if (!deepEqual__default["default"](newData, currentData) || newData !== undefined && currentData === undefined) onAfterChangeFunc({
+      entry: entry,
+      previousValue: currentData,
+      value: getValues(entry),
+      getValue: function getValue(e) {
+        return getValues(e);
+      },
+      rawValues: newData,
+      setValue: _setValue,
+      onChange: function onChange(v) {
+        return _setValue(entry, v);
+      }
+    });
+  }
 
   if (step.array) {
     return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
@@ -29517,13 +29598,13 @@ var Step = function Step(_ref6) {
     }, /*#__PURE__*/React__default["default"].createElement(ArrayStep, {
       entry: entry,
       step: step,
-      defaultValue: step.defaultValue || defaultVal(step.type),
       disabled: functionalProperty(entry, step.disabled),
       component: function component(props, idx) {
         var _props$defaultValue;
 
         return /*#__PURE__*/React__default["default"].createElement(Step, {
-          entry: "".concat(entry, "[").concat(idx, "].value"),
+          entry: "".concat(entry, ".").concat(idx, ".value"),
+          onAfterChange: step.onAfterChange || step.on_after_change,
           step: _objectSpread2$1(_objectSpread2$1({}, schema[realEntry || entry]), {}, {
             render: step.itemRender,
             onChange: undefined,
@@ -29541,325 +29622,126 @@ var Step = function Step(_ref6) {
     }));
   }
 
-  var registeredInput = register(entry);
-
-  var inputProps = _objectSpread2$1(_objectSpread2$1({}, registeredInput), {}, {
-    onChange: function onChange(e) {
-      registeredInput.onChange(e);
-      option(step.onChange).map(function (onChange) {
-        return onChange({
-          rawValues: getValues(),
-          value: e.target.value,
-          setValue: _setValue
-        });
-      });
-    }
-  });
-
   switch (step.type) {
     case type.string:
       switch (step.format) {
         case format.text:
-          return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-            render: step.render,
-            field: {
-              parent: parent,
-              setValue: function setValue(key, value) {
-                return _setValue(key, value);
-              },
-              rawValues: getValues(),
-              value: getValues(entry),
-              onChange: function onChange(v) {
-                return _setValue(entry, v);
-              }
-            },
-            error: error
-          }, /*#__PURE__*/React__default["default"].createElement("textarea", _extends({
-            type: "text",
-            id: entry,
-            className: classNames__default["default"](classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null
-          }, step.props, {
+          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
             defaultValue: defaultValue,
-            placeholder: step.placeholder
-          }, inputProps)));
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React__default["default"].createElement("textarea", {
+            type: "text",
+            className: classNames__default["default"](classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }));
 
         case format.code:
         case format.singleLineCode:
           var Component = step.format === format.code ? CodeInput : SingleLineCode;
-          return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-            name: entry,
-            control: control,
-            render: function render(_ref7) {
-              var field = _ref7.field;
-              return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-                render: step.render,
-                field: _objectSpread2$1({
-                  parent: parent,
-                  setValue: function setValue(key, value) {
-                    return _setValue(key, value);
-                  },
-                  rawValues: getValues()
-                }, field),
-                error: error
-              }, /*#__PURE__*/React__default["default"].createElement(Component, _extends({
-                className: classNames__default["default"](_defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-                readOnly: functionalProperty(entry, step.disabled) ? true : false,
-                onChange: function onChange(e) {
-                  field.onChange(e);
-                  option(step.onChange).map(function (onChange) {
-                    return onChange({
-                      rawValues: getValues(),
-                      value: e,
-                      setValue: _setValue
-                    });
-                  });
-                },
-                value: field.value,
-                defaultValue: defaultValue
-              }, step.props)));
-            }
-          });
+          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React__default["default"].createElement(Component, {
+            className: classNames__default["default"](_defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }));
 
         case format.markdown:
-          return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-            name: entry,
-            control: control,
-            render: function render(_ref8) {
-              var field = _ref8.field;
-              return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-                render: step.render,
-                field: _objectSpread2$1({
-                  parent: parent,
-                  setValue: function setValue(key, value) {
-                    return _setValue(key, value);
-                  },
-                  rawValues: getValues()
-                }, field),
-                error: error
-              }, /*#__PURE__*/React__default["default"].createElement(MarkdownInput, _extends({}, step.props, {
-                className: classNames__default["default"](_defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
-                onChange: function onChange(e) {
-                  field.onChange(e);
-                  option(step.onChange).map(function (onChange) {
-                    return onChange({
-                      rawValues: getValues(),
-                      value: e,
-                      setValue: _setValue
-                    });
-                  });
-                },
-                value: field.value,
-                defaultValue: defaultValue
-              }, step)));
-            }
-          });
+          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React__default["default"].createElement(MarkdownInput, {
+            className: classNames__default["default"](_defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }));
 
         case format.buttonsSelect:
         case format.select:
-          return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-            name: entry,
-            control: control,
-            render: function render(_ref9) {
-              var field = _ref9.field;
-              return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-                render: step.render,
-                field: _objectSpread2$1({
-                  parent: parent,
-                  setValue: function setValue(key, value) {
-                    return _setValue(key, value);
-                  },
-                  rawValues: getValues()
-                }, field),
-                error: error
-              }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({}, step.props, step, {
-                className: classNames__default["default"](classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-                disabled: functionalProperty(entry, step.disabled),
-                value: field.value,
-                possibleValues: step.options,
-                defaultValue: defaultValue,
-                httpClient: httpClient,
-                onChange: function onChange(value) {
-                  field.onChange(value);
-                  option(step.onChange).map(function (onChange) {
-                    return onChange({
-                      rawValues: getValues(),
-                      value: value,
-                      setValue: _setValue
-                    });
-                  });
-                }
-              })));
-            }
-          });
+          {
+            return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
+              defaultValue: defaultValue,
+              step: step,
+              entry: entry
+            }, /*#__PURE__*/React__default["default"].createElement(SelectInput, {
+              className: classNames__default["default"](classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+              disabled: functionalProperty(entry, step.disabled),
+              possibleValues: step.options,
+              httpClient: httpClient,
+              isMulti: step.isMulti,
+              createOption: step.createOption,
+              transformer: step.transformer,
+              buttons: step.format === format.buttonsSelect
+            }));
+          }
 
         default:
-          return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-            render: step.render,
-            field: {
-              parent: parent,
-              setValue: function setValue(key, value) {
-                return _setValue(key, value);
-              },
-              rawValues: getValues(),
-              value: getValues(entry),
-              onChange: function onChange(v) {
-                return _setValue(entry, v, {
-                  shouldValidate: true
-                });
-              }
-            },
-            error: error
-          }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
-            type: step.format || 'text',
-            id: entry,
-            className: classNames__default["default"](classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
+          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
             defaultValue: defaultValue,
-            placeholder: step.placeholder
-          }, inputProps)));
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React__default["default"].createElement("input", {
+            type: step.format || 'text',
+            className: classNames__default["default"](classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }));
       }
 
     case type.number:
       switch (step.format) {
         case format.buttonsSelect:
         case format.select:
-          return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-            name: entry,
-            control: control,
-            render: function render(_ref10) {
-              var field = _ref10.field;
-              return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-                render: step.render,
-                field: _objectSpread2$1({
-                  parent: parent,
-                  setValue: function setValue(key, value) {
-                    return _setValue(key, value);
-                  },
-                  rawValues: getValues()
-                }, field),
-                error: error
-              }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({}, step.props, step, {
-                className: classNames__default["default"](classes.content, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
-                onChange: function onChange(e) {
-                  field.onChange(e);
-                  option(step.onChange).map(function (onChange) {
-                    return onChange({
-                      rawValues: getValues(),
-                      value: e,
-                      setValue: _setValue
-                    });
-                  });
-                },
-                value: field.value,
-                possibleValues: step.options,
-                defaultValue: defaultValue,
-                httpClient: httpClient
-              })));
-            }
-          });
+          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, {
+            className: classNames__default["default"](classes.content, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+            possibleValues: step.options,
+            httpClient: httpClient,
+            isMulti: step.isMulti,
+            createOption: step.createOption,
+            onCreateOption: step.onCreateOption,
+            transformer: step.transformer,
+            buttons: step.format === format.buttonsSelect
+          }));
 
         default:
-          return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-            render: step.render,
-            field: {
-              parent: parent,
-              setValue: function setValue(key, value) {
-                return _setValue(key, value);
-              },
-              rawValues: getValues(),
-              value: getValues(entry),
-              onChange: function onChange(v) {
-                return _setValue(entry, v);
-              }
-            },
-            error: error
-          }, /*#__PURE__*/React__default["default"].createElement("input", _extends({}, step.props, {
+          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React__default["default"].createElement("input", {
             type: step.format || 'number',
-            id: entry,
-            className: classNames__default["default"](classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
-            name: entry,
-            placeholder: step.placeholder,
-            defaultValue: defaultValue
-          }, inputProps)));
+            className: classNames__default["default"](classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }));
       }
 
     case type.bool:
-      return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-        name: entry,
-        control: control,
-        render: function render(_ref11) {
-          var field = _ref11.field;
-          return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-            render: step.render,
-            field: _objectSpread2$1({
-              parent: parent,
-              setValue: function setValue(key, value) {
-                return _setValue(key, value);
-              },
-              rawValues: getValues()
-            }, field),
-            error: error
-          }, /*#__PURE__*/React__default["default"].createElement(BooleanInput, _extends({}, step.props, {
-            className: classNames__default["default"](_defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
-            onChange: function onChange(e) {
-              field.onChange(e);
-              option(step.onChange).map(function (onChange) {
-                return onChange({
-                  rawValues: getValues(),
-                  value: e,
-                  setValue: _setValue
-                });
-              });
-            },
-            value: field.value
-          })));
-        }
-      });
+      return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
+        defaultValue: defaultValue,
+        step: step,
+        entry: entry
+      }, /*#__PURE__*/React__default["default"].createElement(BooleanInput, {
+        className: classNames__default["default"](_defineProperty$1({}, classes.input__invalid, errorDisplayed))
+      }));
 
     case type.object:
       switch (step.format) {
         case format.buttonsSelect:
         case format.select:
-          return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-            name: entry,
-            control: control,
-            defaultValue: step.defaultValue,
-            render: function render(_ref12) {
-              var field = _ref12.field;
-              return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-                render: step.render,
-                field: _objectSpread2$1({
-                  parent: parent,
-                  setValue: function setValue(key, value) {
-                    return _setValue(key, value);
-                  },
-                  rawValues: getValues()
-                }, field),
-                error: error
-              }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({}, step.props, step, {
-                className: classNames__default["default"](classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
-                onChange: function onChange(e) {
-                  field.onChange(e);
-                  option(step.onChange).map(function (onChange) {
-                    return onChange({
-                      rawValues: getValues(),
-                      value: e,
-                      setValue: _setValue
-                    });
-                  });
-                },
-                value: field.value,
-                possibleValues: step.options,
-                httpClient: httpClient
-              })));
-            }
-          });
+          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, {
+            className: classNames__default["default"](classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+            possibleValues: step.options,
+            httpClient: httpClient,
+            isMulti: step.isMulti,
+            createOption: step.createOption,
+            onCreateOption: step.onCreateOption,
+            transformer: step.transformer,
+            buttons: step.format === format.buttonsSelect
+          }));
 
         case format.form:
           //todo: disabled ?
@@ -29895,35 +29777,20 @@ var Step = function Step(_ref6) {
           }));
 
         case format.code:
-          return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-            name: entry,
-            control: control,
-            render: function render(_ref13) {
-              var field = _ref13.field;
-              return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-                render: step.render,
-                field: _objectSpread2$1({
-                  parent: parent,
-                  setValue: function setValue(key, value) {
-                    return _setValue(key, value);
-                  },
-                  rawValues: getValues()
-                }, field),
-                error: error
-              }, /*#__PURE__*/React__default["default"].createElement(CodeInput, _extends({}, step.props, step, {
+          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry,
+            component: function component(field, props) {
+              return /*#__PURE__*/React__default["default"].createElement(CodeInput, _extends({}, props, {
                 className: classNames__default["default"](_defineProperty$1({}, classes.input__invalid, error)),
-                readOnly: functionalProperty(entry, step.disabled) ? true : false,
                 onChange: function onChange(e) {
                   var v;
 
                   try {
                     v = JSON.parse(e);
                   } catch (err) {
-                    setError(step.label, {
-                      type: 'manual',
-                      message: err
-                    });
-                    v = {};
+                    v = e;
                   }
 
                   field.onChange(v);
@@ -29935,105 +29802,51 @@ var Step = function Step(_ref6) {
                     });
                   });
                 },
-                value: _typeof$1(field.value) === 'object' ? JSON.stringify(field.value, null, 2) : field.value,
-                defaultValue: defaultValue
-              })));
+                value: field.value === null ? null : _typeof$1(field.value) === 'object' ? JSON.stringify(field.value, null, 2) : field.value
+              }));
             }
           });
 
         default:
-          return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-            name: entry,
-            control: control,
-            defaultValue: step.defaultValue,
-            render: function render(_ref14) {
-              var field = _ref14.field;
-              return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-                render: step.render,
-                field: _objectSpread2$1({
-                  parent: parent,
-                  setValue: function setValue(key, value) {
-                    return _setValue(key, value);
-                  },
-                  rawValues: getValues()
-                }, field),
-                error: error
-              }, /*#__PURE__*/React__default["default"].createElement(ObjectInput, _extends({}, step.props, step, {
-                className: classNames__default["default"](_defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-                readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
-                onChange: function onChange(e) {
-                  field.onChange(e);
-                  option(step.onChange).map(function (onChange) {
-                    return onChange({
-                      rawValues: getValues(),
-                      value: e,
-                      setValue: _setValue
-                    });
-                  });
-                },
-                value: field.value,
-                possibleValues: step.options
-              })));
-            }
-          });
+          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React__default["default"].createElement(ObjectInput, {
+            className: classNames__default["default"](_defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+            possibleValues: step.options
+          }));
       }
 
     case type.date:
-      return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-        name: entry,
-        control: control,
-        defaultValue: step.defaultValue,
-        render: function render(_ref15) {
-          var field = _ref15.field;
-          return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-            render: step.render,
-            field: _objectSpread2$1({
-              parent: parent,
-              setValue: function setValue(key, value) {
-                return _setValue(key, value);
-              },
-              rawValues: getValues()
-            }, field),
-            error: error
-          }, /*#__PURE__*/React__default["default"].createElement(reactRainbowComponents.DatePicker, _extends({}, step.props, {
-            id: "datePicker-1",
-            className: classNames__default["default"](classes.datepicker, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
-            value: field.value,
-            onChange: function onChange(e) {
-              field.onChange(e);
-              option(step.onChange).map(function (onChange) {
-                return onChange({
-                  rawValues: getValues(),
-                  value: e,
-                  setValue: _setValue
-                });
-              });
-            },
-            formatStyle: "large"
-          })));
-        }
-      });
+      return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
+        defaultValue: defaultValue,
+        step: step,
+        entry: entry
+      }, /*#__PURE__*/React__default["default"].createElement(reactRainbowComponents.DatePicker, {
+        className: classNames__default["default"](classes.datepicker, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+        formatStyle: "large"
+      }));
 
     case type.file:
       return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
         name: entry,
         control: control,
-        render: function render(_ref16) {
-          var field = _ref16.field;
-
-          var FileInput = function FileInput(_ref17) {
-            var onChange = _ref17.onChange;
+        render: function render(_ref10) {
+          var field = _ref10.field;
 
-            var _useState = React.useState(false),
-                _useState2 = _slicedToArray(_useState, 2),
-                uploading = _useState2[0],
-                setUploading = _useState2[1];
+          var FileInput = function FileInput(_ref11) {
+            var onChange = _ref11.onChange;
 
-            var _useState3 = React.useState(undefined),
+            var _useState3 = React.useState(false),
                 _useState4 = _slicedToArray(_useState3, 2),
-                input = _useState4[0],
-                setInput = _useState4[1];
+                uploading = _useState4[0],
+                setUploading = _useState4[1];
+
+            var _useState5 = React.useState(undefined),
+                _useState6 = _slicedToArray(_useState5, 2),
+                input = _useState6[0],
+                setInput = _useState6[1];
 
             var setFiles = function setFiles(e) {
               var files = e.target.files;
@@ -30071,28 +29884,11 @@ var Step = function Step(_ref6) {
             }).join(" , ")));
           };
 
-          return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-            render: step.render,
-            field: _objectSpread2$1({
-              parent: parent,
-              setValue: function setValue(key, value) {
-                return _setValue(key, value);
-              },
-              rawValues: getValues()
-            }, field),
-            error: error
-          }, /*#__PURE__*/React__default["default"].createElement(FileInput, {
-            onChange: function onChange(e) {
-              field.onChange(e);
-              option(step.onChange).map(function (onChange) {
-                return onChange({
-                  rawValues: getValues(),
-                  value: e,
-                  setValue: _setValue
-                });
-              });
-            }
-          }));
+          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React__default["default"].createElement(FileInput, null));
         }
       });
 
@@ -30101,18 +29897,17 @@ var Step = function Step(_ref6) {
   }
 };
 
-var ArrayStep = function ArrayStep(_ref18) {
-  var entry = _ref18.entry,
-      step = _ref18.step,
-      component = _ref18.component,
-      disabled = _ref18.disabled;
+var ArrayStep = function ArrayStep(_ref12) {
+  var entry = _ref12.entry,
+      step = _ref12.step,
+      component = _ref12.component,
+      disabled = _ref12.disabled;
   var classes = useCustomStyle();
 
   var _useFormContext3 = reactHookForm.useFormContext(),
       getValues = _useFormContext3.getValues,
-      setValue = _useFormContext3.setValue;
-      _useFormContext3.watch;
-      var control = _useFormContext3.control,
+      setValue = _useFormContext3.setValue,
+      control = _useFormContext3.control,
       trigger = _useFormContext3.trigger,
       formState = _useFormContext3.formState;
 
@@ -30130,15 +29925,11 @@ var ArrayStep = function ArrayStep(_ref18) {
 
   var _useFieldArray = reactHookForm.useFieldArray({
     control: control,
-    // control props comes from useForm (optional: if you are using FormContext)
-    name: entry // unique name for your Field Array
-    // keyName: "id", default to "id", you can change the key name
-
+    name: entry
   }),
       fields = _useFieldArray.fields,
       append = _useFieldArray.append,
       remove = _useFieldArray.remove;
-      _useFieldArray.update;
 
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fields.map(function (field, idx) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -30148,11 +29939,15 @@ var ArrayStep = function ArrayStep(_ref18) {
       style: {
         position: 'relative'
       }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        width: '95%'
+      }
     }, component(_objectSpread2$1(_objectSpread2$1({
       key: field.id
     }, field), {}, {
       defaultValue: values[idx]
-    }), idx), /*#__PURE__*/React__default["default"].createElement("button", {
+    }), idx)), /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
       style: {
         position: 'absolute',
@@ -30174,10 +29969,11 @@ var ArrayStep = function ArrayStep(_ref18) {
     type: "button",
     className: classNames__default["default"](classes.btn, classes.btn_blue, classes.btn_sm, classes.mt_5, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
     onClick: function onClick() {
+      var newValue = cleanInputArray({}, getValues(entry), step.flow, step.schema);
       append({
-        value: step.addableDefaultValue || defaultVal(step.type)
-      });
-      trigger(entry);
+        value: step.addableDefaultValue || (newValue ? newValue : defaultVal())
+      }); // trigger(entry);
+
       option(step.onChange).map(function (onChange) {
         return onChange({
           rawValues: getValues(),
@@ -30192,37 +29988,38 @@ var ArrayStep = function ArrayStep(_ref18) {
   }, error.message)));
 };
 
-var NestedForm = function NestedForm(_ref19) {
+var NestedForm = function NestedForm(_ref13) {
   var _classNames16;
 
-  var schema = _ref19.schema,
-      flow = _ref19.flow,
-      parent = _ref19.parent,
-      inputWrapper = _ref19.inputWrapper,
-      maybeCustomHttpClient = _ref19.maybeCustomHttpClient,
-      errorDisplayed = _ref19.errorDisplayed,
-      value = _ref19.value,
-      step = _ref19.step,
-      functionalProperty = _ref19.functionalProperty,
-      index = _ref19.index;
+  var schema = _ref13.schema,
+      flow = _ref13.flow,
+      parent = _ref13.parent,
+      inputWrapper = _ref13.inputWrapper,
+      maybeCustomHttpClient = _ref13.maybeCustomHttpClient,
+      errorDisplayed = _ref13.errorDisplayed,
+      value = _ref13.value,
+      step = _ref13.step,
+      functionalProperty = _ref13.functionalProperty,
+      index = _ref13.index;
 
   var _useFormContext4 = reactHookForm.useFormContext(),
       getValues = _useFormContext4.getValues,
       setValue = _useFormContext4.setValue,
-      watch = _useFormContext4.watch,
-      trigger = _useFormContext4.trigger;
+      watch = _useFormContext4.watch;
+      _useFormContext4.trigger;
       _useFormContext4.formState;
 
-  var _useState5 = React.useState(!!step.collapsed),
-      _useState6 = _slicedToArray(_useState5, 2),
-      collapsed = _useState6[0],
-      setCollapsed = _useState6[1];
+  var _useState7 = React.useState(!!step.collapsed),
+      _useState8 = _slicedToArray(_useState7, 2),
+      collapsed = _useState8[0],
+      setCollapsed = _useState8[1];
+
+  var classes = useCustomStyle(); // TODO - voir ce qui se passe et à quoi ça sert
+  // const v = getValues(parent);
+  // useEffect(() => {
+  //   trigger(parent)
+  // }, [JSON.stringify(v)])
 
-  var classes = useCustomStyle();
-  var v = getValues(parent);
-  React.useEffect(function () {
-    trigger(parent);
-  }, [JSON.stringify(v)]);
   var schemaAndFlow = option(step.conditionalSchema).map(function (condiSchema) {
     var ref = option(condiSchema.ref).map(function (ref) {
       return getValues(ref);
@@ -30247,8 +30044,8 @@ var NestedForm = function NestedForm(_ref19) {
   });
   var prevSchema = usePrevious(schemaAndFlow.schema);
   React.useEffect(function () {
-    if (!!prevSchema && JSON.stringify(prevSchema) !== JSON.stringify(schemaAndFlow.schema)) {
-      var def = getDefaultValues(schemaAndFlow.flow, schemaAndFlow.schema);
+    if (!!prevSchema && !deepEqual__default["default"](prevSchema, schemaAndFlow.schema)) {
+      var def = getDefaultValues(schemaAndFlow.flow, schemaAndFlow.schema, getValues(parent));
       setValue(parent, def, {
         shouldValidate: false
       });
@@ -30314,10 +30111,10 @@ var NestedForm = function NestedForm(_ref19) {
     onClick: function onClick() {
       return setCollapsed(!collapsed);
     }
-  }), computedSandF.map(function (_ref20, idx) {
-    var step = _ref20.step,
-        visibleStep = _ref20.visibleStep,
-        entry = _ref20.entry;
+  }), computedSandF.map(function (_ref14, idx) {
+    var step = _ref14.step,
+        visibleStep = _ref14.visibleStep,
+        entry = _ref14.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"));