@maif/react-forms 1.0.37-rc.1 → 1.0.40

package/lib/esm/index.js

@@ -10,6 +10,7 @@ import { v4 } from 'uuid';
 import { createUseStyles } from 'react-jss';
 import CreatableSelect from 'react-select/creatable';
 import Select from 'react-select';
+import deepEqual from 'fast-deep-equal';
 import showdown from 'showdown';
 import '@fortawesome/fontawesome-free/css/all.css';
 import 'highlight.js/styles/monokai.css';
@@ -181,29 +182,6 @@ var _maxSize = function maxSize(ref) {
   };
 }; //mixed
 
-var _nullable = function nullable() {
-  return function (r) {
-    return r.nullable().optional().transform(function (v) {
-      var _r$describe = r.describe(),
-          type = _r$describe.type;
-
-      switch (type) {
-        case 'string':
-        case 'number':
-          return (v || '').toString().length <= 0 ? null : v;
-
-        case 'object':
-          return Object.keys(v || {}).length === 0 ? null : v;
-
-        default:
-          return v;
-      }
-
-      return v;
-    });
-  };
-};
-
 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;
@@ -241,9 +219,9 @@ var _oneOf = function oneOf(arrayOfValues) {
 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' + Date.now(), message, function (value) {
+    return r.test('blacklist', message, function (value) {
       return !arrayOfValues.some(function (f) {
-        return value.includes(f);
+        return (value || '').includes(f);
       });
     });
   };
@@ -375,9 +353,6 @@ var jsonConstraints = {
   },
   ref: function ref(val) {
     return _ref21(val.ref);
-  },
-  nullable: function nullable() {
-    return _nullable();
   }
 };
 
@@ -399,7 +374,6 @@ var constraints = /*#__PURE__*/Object.freeze({
   supportedFormat: _supportedFormat,
   unsupportedFormat: _unsupportedFormat,
   maxSize: _maxSize,
-  nullable: _nullable,
   test: _test,
   when: _when,
   oneOf: _oneOf,
@@ -668,6 +642,9 @@ var style = (_style = {
   d_none: {
     display: "none"
   },
+  flexWrap: {
+    flexWrap: 'wrap'
+  },
   flex: {
     display: "flex"
   },
@@ -765,6 +742,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",
@@ -780,6 +766,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",
@@ -798,7 +792,7 @@ var useCustomStyle = function useCustomStyle() {
   return classes;
 };
 
-var BooleanInput = function BooleanInput(_ref) {
+var BooleanInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames;
 
   var onChange = _ref.onChange,
@@ -821,15 +815,22 @@ var BooleanInput = function BooleanInput(_ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(classes.switch_button_on)
-  })), !value && /*#__PURE__*/React.createElement("div", {
+  })), !value && value !== null && /*#__PURE__*/React.createElement("div", {
     className: classNames(classes.content_switch_button_off),
     onClick: function onClick() {
       return handleClick(true);
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(classes.switch_button_off)
+  })), value === null && /*#__PURE__*/React.createElement("div", {
+    className: classNames(classes.content_switch_button_null),
+    onClick: function onClick() {
+      return handleClick(true);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(classes.switch_button_null)
   })));
-};
+});
 
 var Collapse = function Collapse(props) {
   var _classNames4;
@@ -920,38 +921,6 @@ var None = {
   }
 };
 
-var deepEqual = function deepEqual(obj1, obj2) {
-  if (obj1 === obj2) return true;
-
-  if (_typeof$1(obj1) !== 'object' || _typeof$1(obj2) !== 'object' || obj1 == null || obj2 == null) {
-    return false;
-  }
-
-  var keysA = Object.keys(obj1);
-  var keysB = Object.keys(obj2);
-
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-
-  var result = true;
-  keysA.forEach(function (key) {
-    if (!keysB.includes(key)) {
-      result = false;
-    }
-
-    if (typeof obj1[key] === 'function' || typeof obj2[key] === 'function') {
-      if (obj1[key].toString() !== obj2[key].toString()) {
-        result = false;
-      }
-    }
-
-    if (!deepEqual(obj1[key], obj2[key])) {
-      result = false;
-    }
-  });
-  return result;
-};
 var isPromise = function isPromise(value) {
   return Boolean(value && typeof value.then === 'function');
 };
@@ -967,7 +936,7 @@ 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;
   }
 
@@ -995,7 +964,7 @@ var valueToSelectOption = function valueToSelectOption(value) {
   });
 };
 
-var SelectInput = function SelectInput(props) {
+var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
   var classes = useCustomStyle();
   var possibleValues = (props.possibleValues || []).map(function (v) {
     return props.transformer ? typeof props.transformer === 'function' ? props.transformer(v) : {
@@ -1102,7 +1071,7 @@ var SelectInput = function SelectInput(props) {
         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.createElement("button", {
         key: idx,
         type: "button",
@@ -1150,7 +1119,7 @@ var SelectInput = function SelectInput(props) {
       readOnly: props.disabled ? 'readOnly' : null
     }));
   }
-};
+});
 
 var ObjectInput = function ObjectInput(props) {
   var _useState = useState(),
@@ -23657,7 +23626,7 @@ const Emoji = {
         }]
 };
 
-const data$1 = /*@__PURE__*/defineLanguageFacet({ block: { open: "<!--", close: "-->" } });
+const data = /*@__PURE__*/defineLanguageFacet({ block: { open: "<!--", close: "-->" } });
 const commonmark = /*@__PURE__*/parser.configure({
     props: [
         /*@__PURE__*/styleTags({
@@ -23693,12 +23662,12 @@ const commonmark = /*@__PURE__*/parser.configure({
             Document: () => null
         }),
         /*@__PURE__*/languageDataProp.add({
-            Document: data$1
+            Document: data
         })
     ]
 });
 function mkLang(parser) {
-    return new Language(data$1, parser, parser.nodeSet.types.find(t => t.name == "Document"));
+    return new Language(data, parser, parser.nodeSet.types.find(t => t.name == "Document"));
 }
 /**
 Language support for strict CommonMark.
@@ -28537,7 +28506,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]);
@@ -28546,67 +28515,6 @@ function CodeInput(_ref) {
   });
 }
 
-window.hljs = window.hljs || hljs;
-
-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() {
-      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.Converter({
   omitExtraWLInCodeBlocks: true,
   ghCompatibleHeaderId: true,
@@ -28617,20 +28525,15 @@ var converter = new showdown.Converter({
   requireSpaceBeforeHeadingText: true,
   ghMentions: true,
   emoji: true,
-  ghMentionsLink: '/{u}',
-  extensions: [DaikokuExtension]
+  ghMentionsLink: '/{u}'
 });
 var MarkdownInput = function MarkdownInput(props) {
-  var _useState = useState(false),
+  var _useState = useState(props.preview),
       _useState2 = _slicedToArray(_useState, 2),
       preview = _useState2[0],
       setPreview = _useState2[1];
 
-  var _useState3 = useState(undefined),
-      _useState4 = _slicedToArray(_useState3, 2),
-      editor = _useState4[0];
-      _useState4[1];
-
+  var ref = useRef();
   useEffect(function () {
     if (preview) {
       showPreview();
@@ -28639,162 +28542,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.highlightElement(block);
     });
   };
 
@@ -28812,21 +28680,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.createElement("i", {
         className: "fas fa-".concat(command.icon)
@@ -28837,7 +28706,7 @@ var MarkdownInput = function MarkdownInput(props) {
   var classes = useCustomStyle();
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(props.className)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !props.readOnly && /*#__PURE__*/React.createElement("div", {
     style: {
       marginBottom: 10
     }
@@ -28862,9 +28731,13 @@ var MarkdownInput = function MarkdownInput(props) {
       return setPreview(true);
     }
   }, "Preview"))), /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.flex)
-  }, injectButtons())), !preview && /*#__PURE__*/React.createElement(CodeInput, props), preview && /*#__PURE__*/React.createElement("div", {
-    className: "api-description",
+    className: classNames(classes.flex, classes.flexWrap)
+  }, injectButtons())), !preview && /*#__PURE__*/React.createElement(CodeInput, _extends({}, props, {
+    setRef: function setRef(e) {
+      return ref.current = e;
+    }
+  })), preview && /*#__PURE__*/React.createElement("div", {
+    className: "preview",
     dangerouslySetInnerHTML: {
       __html: converter.makeHtml(props.value)
     }
@@ -28913,17 +28786,17 @@ function SingleLineCode(_ref) {
 
 var _resolvers;
 var resolvers = (_resolvers = {}, _defineProperty$1(_resolvers, type.string, function (typeErrorMessage) {
-  return yup.string().typeError(typeErrorMessage || 'Value must be a string');
+  return yup.string().nullable().optional().typeError(typeErrorMessage || 'Value must be a string');
 }), _defineProperty$1(_resolvers, type.number, function (typeErrorMessage) {
-  return yup.number().transform(function (v) {
+  return yup.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.bool();
+  return yup.bool().nullable().optional();
 }), _defineProperty$1(_resolvers, type.object, function () {
-  return yup.object();
+  return yup.object().nullable().optional();
 }), _defineProperty$1(_resolvers, type.date, function (typeErrorMessage) {
-  return yup.date().typeError(typeErrorMessage || 'Value must be a date');
+  return yup.date().nullable().optional().typeError(typeErrorMessage || 'Value must be a date');
 }), _defineProperty$1(_resolvers, type.file, function () {
   return yup.mixed();
 }), _resolvers);
@@ -28950,6 +28823,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.object();
+    }
+
     var _subResolver = getShapeAndDependencies(props.flow || Object.keys(props.schema), props.schema, dependencies, rawData);
 
     return constraints.reduce(function (resolver, constraint) {
@@ -29000,11 +28877,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.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));
   }, {});
@@ -29014,7 +28903,8 @@ var getShapeAndDependencies = function getShapeAndDependencies(flow, schema) {
   };
 };
 
-var CustomizableInput$1 = function CustomizableInput(props) {
+var CustomizableInput$1 = /*#__PURE__*/React.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
@@ -29022,8 +28912,9 @@ var CustomizableInput$1 = function CustomizableInput(props) {
   }
 
   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,
@@ -29058,22 +28949,36 @@ var ControlledInput = function ControlledInput(_ref) {
     readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
     placeholder: step.placeholder,
     onChange: function onChange(e) {
-      field.onChange(!e ? null : e.target ? e.target.value || null : 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: e.target.value,
+          value: value,
           setValue: _setValue
         });
       });
     },
-    value: field.value || ''
+    value: field.value
   });
 
   var error = entry.split('.').reduce(function (acc, curr) {
     return acc && acc[curr];
   }, errors);
-  console.log("render controlled input " + entry);
   return /*#__PURE__*/React.createElement(CustomizableInput$1, {
     render: step.render,
     field: _objectSpread2$1({
@@ -29093,7 +28998,7 @@ var usePrevious = function usePrevious(value) {
   var ref = useRef(); // Store current value in ref
 
   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)
 
@@ -29178,14 +29083,14 @@ var CustomizableInput = function CustomizableInput(props) {
   return props.children;
 };
 
-var defaultVal = function defaultVal(value, t, array, defaultValue) {
+var defaultVal = function defaultVal(value, array, defaultValue) {
   if (!!defaultValue) return defaultValue;
   if (!!array) return [];
   return value;
 };
 
 var getDefaultValues = function getDefaultValues(flow, schema, value) {
-  return flow.reduce(function (acc, key) {
+  return (flow || []).reduce(function (acc, key) {
     if (_typeof$1(key) === 'object') {
       return _objectSpread2$1(_objectSpread2$1({}, acc), getDefaultValues(key.flow, schema, value));
     }
@@ -29196,7 +29101,7 @@ var getDefaultValues = function getDefaultValues(flow, schema, value) {
       return acc;
     }
 
-    return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, defaultVal(value ? value[key] : null, 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)));
   }, {});
 };
 
@@ -29218,7 +29123,7 @@ var cleanInputArray = function cleanInputArray(obj, defaultValues, flow, subSche
 
     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) {
@@ -29231,7 +29136,7 @@ var cleanInputArray = function cleanInputArray(obj, defaultValues, flow, subSche
 
       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);
 };
@@ -29263,7 +29168,7 @@ var cleanOutputArray = function cleanOutputArray(obj, subSchema) {
 
       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 === undefined ? null : v));
+      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v));
     }
   }, {});
 };
@@ -29283,10 +29188,22 @@ var validate = function validate(flow, schema, value) {
 var Watcher = function Watcher(_ref7) {
   var options = _ref7.options,
       control = _ref7.control,
-      schema = _ref7.schema;
+      schema = _ref7.schema,
+      onSubmit = _ref7.onSubmit,
+      handleSubmit = _ref7.handleSubmit;
+      _ref7.getValues;
+      _ref7.watch;
   var data = useWatch({
     control: control
   });
+  var prev = usePrevious(data);
+  useEffect(function () {
+    if (!!options.autosubmit) {
+      if (!deepEqual(data, prev)) handleSubmit(function () {
+        onSubmit(cleanOutputArray(data, schema));
+      })();
+    }
+  }, [data]);
 
   if (options.watch) {
     if (typeof options.watch === 'function') {
@@ -29348,38 +29265,38 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     resolver: function resolver(data, context, options) {
       return yupResolver(_resolver(data))(data, context, options);
     },
-    defaultValues: cleanInputArray(value, defaultValues, flow, schema),
     shouldFocusError: false,
-    mode: 'onSubmit' // onChange triggers re-rendering
-
+    mode: 'onChange'
   });
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      initialReseted = _useState2[0],
+      setReset = _useState2[1];
+
+  useEffect(function () {
+    _reset(cleanInputArray(value, defaultValues, flow, schema));
+
+    setReset(true);
+  }, [_reset]);
+  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,
       trigger = methods.trigger,
-      getValues = methods.getValues;
+      getValues = methods.getValues,
+      watch = methods.watch;
+  var prev = usePrevious(value);
+  var prevSchema = usePrevious(schema);
   useEffect(function () {
-    console.log('re-render cauz trigger');
-    trigger();
-  }, [trigger]);
-  useEffect(function () {
-    console.log('re-render cauz value/reset changed');
-
-    _reset(cleanInputArray(value, defaultValues, flow, schema));
-  }, [value, _reset]);
-  useEffect(function () {
-    console.log('re-render cauz schema changed');
-
-    _reset(cleanInputArray(value, defaultValues, flow, schema));
-  }, [schema]);
-
-  if (!!options.autosubmit) {
-    _handleSubmit(function (data) {
-      return onSubmit(cleanOutputArray(data, schema));
-    }, onError)();
-  }
+    if (!deepEqual(value, prev) || !deepEqual(schema, prevSchema)) {
+      _reset(_objectSpread2$1({}, cleanInputArray(value, defaultValues, flow, schema)));
+    }
+  }, [value, schema]);
 
   var functionalProperty = function functionalProperty(entry, prop) {
     if (typeof prop === 'function') {
@@ -29400,9 +29317,6 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
           onSubmit(clean);
         }, onError)();
       },
-      rawData: function rawData() {
-        return cleanOutputArray(data, schema);
-      },
       trigger: trigger,
       methods: methods
     };
@@ -29410,7 +29324,10 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
   return /*#__PURE__*/React.createElement(FormProvider, methods, /*#__PURE__*/React.createElement(Watcher, {
     options: options,
     control: methods.control,
-    schema: schema
+    schema: schema,
+    onSubmit: onSubmit,
+    handleSubmit: _handleSubmit,
+    watch: methods.watch
   }), /*#__PURE__*/React.createElement("form", {
     className: className || "".concat(classes.pr_15, " ").concat(classes.w_100),
     onSubmit: _handleSubmit(function (data) {
@@ -29433,8 +29350,6 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     }).map(function (visible) {
       switch (_typeof$1(visible)) {
         case 'object':
-          console.log('watch from visibleStep');
-
           var _value = watch(step.visible.ref);
 
           return option(step.visible.test).map(function (test) {
@@ -29541,8 +29456,6 @@ var Step = function Step(_ref9) {
       watch = _useFormContext2.watch;
       _useFormContext2.register;
 
-  console.log("re-render : " + entry);
-
   if (entry && _typeof$1(entry) === 'object') {
     var errored = entry.flow.some(function (step) {
       return !!errors[step] && (dirtyFields[step] || touchedFields[step]);
@@ -29565,7 +29478,6 @@ var Step = function Step(_ref9) {
       }).map(function (visible) {
         switch (_typeof$1(visible)) {
           case 'object':
-            console.log("watch of collapse");
             var value = watch(visible.ref);
             return option(visible.test).map(function (test) {
               return test(value, index);
@@ -29614,14 +29526,13 @@ var Step = function Step(_ref9) {
   var onAfterChangeFunc = onAfterChange || step.onAfterChange || step.on_after_change;
 
   if (onAfterChangeFunc) {
-    var _data = watch();
-
+    var data = watch();
     var d = entry.replace('[', '.').replace(']', '').split('.').reduce(function (acc, curr) {
       return acc && acc[curr];
-    }, _data) || {};
+    }, data) || {};
     var currentData = usePrevious(cleanOutputArray(d, schema));
     var newData = cleanOutputArray(d, schema);
-    if (!deepEqual(newData, currentData)) onAfterChangeFunc({
+    if (!deepEqual(newData, currentData) || newData !== undefined && currentData === undefined) onAfterChangeFunc({
       entry: entry,
       previousValue: currentData,
       value: getValues(entry),
@@ -29653,7 +29564,6 @@ var Step = function Step(_ref9) {
     }, /*#__PURE__*/React.createElement(ArrayStep, {
       entry: entry,
       step: step,
-      defaultValue: step.defaultValue || null,
       disabled: functionalProperty(entry, step.disabled),
       component: function component(props, idx) {
         var _props$defaultValue;
@@ -29894,15 +29804,15 @@ var Step = function Step(_ref9) {
           var FileInput = function FileInput(_ref11) {
             var onChange = _ref11.onChange;
 
-            var _useState = useState(false),
-                _useState2 = _slicedToArray(_useState, 2),
-                uploading = _useState2[0],
-                setUploading = _useState2[1];
-
-            var _useState3 = useState(undefined),
+            var _useState3 = useState(false),
                 _useState4 = _slicedToArray(_useState3, 2),
-                input = _useState4[0],
-                setInput = _useState4[1];
+                uploading = _useState4[0],
+                setUploading = _useState4[1];
+
+            var _useState5 = useState(undefined),
+                _useState6 = _slicedToArray(_useState5, 2),
+                input = _useState6[0],
+                setInput = _useState6[1];
 
             var setFiles = function setFiles(e) {
               var files = e.target.files;
@@ -29981,10 +29891,7 @@ var ArrayStep = function ArrayStep(_ref12) {
 
   var _useFieldArray = 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,
@@ -30028,10 +29935,11 @@ var ArrayStep = function ArrayStep(_ref12) {
     type: "button",
     className: classNames(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(null, step.type)
-      });
-      trigger(entry);
+        value: step.addableDefaultValue || (newValue ? newValue : defaultVal())
+      }); // trigger(entry);
+
       option(step.onChange).map(function (onChange) {
         return onChange({
           rawValues: getValues(),
@@ -30067,10 +29975,10 @@ var NestedForm = function NestedForm(_ref13) {
       _useFormContext4.trigger;
       _useFormContext4.formState;
 
-  var _useState5 = useState(!!step.collapsed),
-      _useState6 = _slicedToArray(_useState5, 2),
-      collapsed = _useState6[0],
-      setCollapsed = _useState6[1];
+  var _useState7 = 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);
@@ -30103,7 +30011,7 @@ var NestedForm = function NestedForm(_ref13) {
   var prevSchema = usePrevious(schemaAndFlow.schema);
   useEffect(function () {
     if (!!prevSchema && !deepEqual(prevSchema, schemaAndFlow.schema)) {
-      var def = getDefaultValues(schemaAndFlow.flow, schemaAndFlow.schema);
+      var def = getDefaultValues(schemaAndFlow.flow, schemaAndFlow.schema, getValues(parent));
       setValue(parent, def, {
         shouldValidate: false
       });