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

package/lib/esm/index.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import classNames from 'classnames';
 import { Eye, EyeOff, PlusCircle, MinusCircle, Trash2, ChevronDown, ChevronUp, HelpCircle, Loader, Upload } from 'react-feather';
-import { useForm, FormProvider, useFormContext, Controller, useFieldArray } from 'react-hook-form';
+import { useController, useFormContext, useForm, FormProvider, Controller, useFieldArray, useWatch } from 'react-hook-form';
 import { DatePicker } from 'react-rainbow-components';
 import ReactToolTip from 'react-tooltip';
 import { v4 } from 'uuid';
@@ -29,7 +29,8 @@ var format = {
   select: 'select',
   code: 'code',
   markdown: 'markdown',
-  text: 'text',
+  text: 'textarea',
+  textarea: 'textarea',
   email: 'email',
   password: 'password',
   hidden: 'hidden',
@@ -182,7 +183,24 @@ var _maxSize = function maxSize(ref) {
 
 var _nullable = function nullable() {
   return function (r) {
-    return r.nullable().optional();
+    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;
+    });
   };
 };
 
@@ -220,12 +238,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' + Date.now(), message, function (value) {
+      return !arrayOfValues.some(function (f) {
+        return value.includes(f);
+      });
+    });
+  };
+};
+
+var _ref21 = function ref(_ref) {
   return yup.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 ###
 
 
@@ -338,8 +367,14 @@ var jsonConstraints = {
         message = _ref19$message === void 0 ? "This value must be one of ".concat(arrayOfValues.join(', ')) : _ref19$message;
     return _oneOf(arrayOfValues, message);
   },
+  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);
+  },
   ref: function ref(val) {
-    return _ref20(val.ref);
+    return _ref21(val.ref);
   },
   nullable: function nullable() {
     return _nullable();
@@ -368,7 +403,8 @@ var constraints = /*#__PURE__*/Object.freeze({
   test: _test,
   when: _when,
   oneOf: _oneOf,
-  ref: _ref20,
+  blacklist: _blacklist,
+  ref: _ref21,
   jsonConstraints: jsonConstraints
 });
 
@@ -650,6 +686,9 @@ var style = (_style = {
   jc_flex_end: {
     justifyContent: "flex-end"
   },
+  jc_flex_start: {
+    justifyContent: "flex-start"
+  },
   ac_center: {
     alignContent: "center"
   },
@@ -697,7 +736,6 @@ var style = (_style = {
     marginLeft: '20px'
   }
 }), _defineProperty$1(_style, "nestedform__border", {
-  backgroundColor: 'ghostWhite',
   borderLeft: '2px solid lightGray',
   paddingLeft: '0.5rem',
   marginLeft: '0.5rem',
@@ -882,29 +920,48 @@ 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;
+var deepEqual = function deepEqual(obj1, obj2) {
+  if (obj1 === obj2) return true;
 
-  for (var _i = 0, _keysA = keysA; _i < _keysA.length; _i++) {
-    var key = _keysA[_i];
-    if (!keysB.includes(key)) return false;
+  if (_typeof$1(obj1) !== 'object' || _typeof$1(obj2) !== 'object' || obj1 == null || obj2 == null) {
+    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;
-    }
+  var keysA = Object.keys(obj1);
+  var keysB = Object.keys(obj2);
+
+  if (keysA.length !== keysB.length) {
+    return false;
   }
 
-  return true;
+  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');
 };
+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] : [];
@@ -1039,7 +1096,7 @@ var SelectInput = function SelectInput(props) {
     return onChange(v);
   };
 
-  if (props.format === format.buttonsSelect) {
+  if (props.buttons) {
     return /*#__PURE__*/React.createElement("div", {
       style: {
         display: 'flex'
@@ -1082,6 +1139,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,
@@ -23599,7 +23657,7 @@ const Emoji = {
         }]
 };
 
-const data = /*@__PURE__*/defineLanguageFacet({ block: { open: "<!--", close: "-->" } });
+const data$1 = /*@__PURE__*/defineLanguageFacet({ block: { open: "<!--", close: "-->" } });
 const commonmark = /*@__PURE__*/parser.configure({
     props: [
         /*@__PURE__*/styleTags({
@@ -23635,12 +23693,12 @@ const commonmark = /*@__PURE__*/parser.configure({
             Document: () => null
         }),
         /*@__PURE__*/languageDataProp.add({
-            Document: data
+            Document: data$1
         })
     ]
 });
 function mkLang(parser) {
-    return new Language(data, parser, parser.nodeSet.types.find(t => t.name == "Document"));
+    return new Language(data$1, parser, parser.nodeSet.types.find(t => t.name == "Document"));
 }
 /**
 Language support for strict CommonMark.
@@ -28428,7 +28486,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 +28569,6 @@ var DaikokuExtension = function DaikokuExtension() {
     type: 'lang',
     regex: /@@@/g,
     replace: function replace() {
-      console.log('@@@');
       return '</div>';
     }
   }; // @@@warning
@@ -28855,10 +28912,12 @@ function SingleLineCode(_ref) {
 }
 
 var _resolvers;
-var resolvers = (_resolvers = {}, _defineProperty$1(_resolvers, type.string, function () {
-  return yup.string();
+var resolvers = (_resolvers = {}, _defineProperty$1(_resolvers, type.string, function (typeErrorMessage) {
+  return yup.string().typeError(typeErrorMessage || 'Value must be a string');
 }), _defineProperty$1(_resolvers, type.number, function (typeErrorMessage) {
-  return yup.number().typeError(typeErrorMessage || 'Value must be a number');
+  return yup.number().transform(function (v) {
+    return isNaN(v) ? null : v;
+  }).typeError(typeErrorMessage || 'Value must be a number');
 }), _defineProperty$1(_resolvers, type.bool, function () {
   return yup.bool();
 }), _defineProperty$1(_resolvers, type.object, function () {
@@ -28955,6 +29014,79 @@ var getShapeAndDependencies = function getShapeAndDependencies(flow, schema) {
   };
 };
 
+var CustomizableInput$1 = function CustomizableInput(props) {
+  if (props.render) {
+    return props.render(_objectSpread2$1(_objectSpread2$1({}, props.field), {}, {
+      error: props.error
+    }));
+  }
+
+  return props.children;
+};
+
+var ControlledInput = function ControlledInput(_ref) {
+  var defaultValue = _ref.defaultValue,
+      step = _ref.step,
+      entry = _ref.entry,
+      children = _ref.children,
+      component = _ref.component;
+
+  var _useController = useController({
+    defaultValue: defaultValue || null,
+    name: entry
+  }),
+      field = _useController.field;
+
+  var _useFormContext = 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) {
+      field.onChange(!e ? null : e.target ? e.target.value || null : e);
+      option(step.onChange).map(function (onChange) {
+        return onChange({
+          rawValues: getValues(),
+          value: e.target.value,
+          setValue: _setValue
+        });
+      });
+    },
+    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({
+      parent: parent,
+      setValue: function setValue(key, value) {
+        return _setValue(key, value);
+      },
+      rawValues: getValues()
+    }, field),
+    error: error
+  }, component ? component(field, props) : /*#__PURE__*/React.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
@@ -29046,33 +29178,16 @@ var CustomizableInput = function CustomizableInput(props) {
   return props.children;
 };
 
-var defaultVal = function defaultVal(t, array, defaultValue) {
+var defaultVal = function defaultVal(value, t, 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) {
+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];
@@ -29081,15 +29196,25 @@ 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.type, 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];
@@ -29101,10 +29226,10 @@ 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));
     }
@@ -29118,26 +29243,27 @@ var cleanOutputArray = function cleanOutputArray(obj, subSchema) {
         v = _curr[1];
 
     if (Array.isArray(v)) {
-      var isArray = option(subSchema).orElse(schema).map(function (s) {
+      var isArray = option(subSchema) //        .orElse(schema) TODO : schema is undefined
+      .map(function (s) {
         return s[key];
       }).map(function (entry) {
         return !!entry.array && !entry.render;
       }).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));
+      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v === undefined ? null : v));
     }
   }, {});
 };
@@ -29153,20 +29279,42 @@ var validate = function validate(flow, schema, value) {
     abortEarly: false
   });
 };
-var Form = /*#__PURE__*/React.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;
+  var data = useWatch({
+    control: control
+  });
+
+  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.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);
 
@@ -29185,7 +29333,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     });
   };
 
-  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),
@@ -29200,50 +29348,49 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     resolver: function resolver(data, context, options) {
       return yupResolver(_resolver(data))(data, context, options);
     },
-    defaultValues: cleanInputArray(value, defaultValues, schema),
+    defaultValues: cleanInputArray(value, defaultValues, flow, schema),
     shouldFocusError: false,
-    mode: 'onChange'
+    mode: 'onSubmit' // onChange triggers re-rendering
+
   });
   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;
   useEffect(function () {
+    console.log('re-render cauz trigger');
     trigger();
   }, [trigger]);
   useEffect(function () {
-    if (value) {
-      _reset(cleanInputArray(value, defaultValues, schema));
-    }
+    console.log('re-render cauz value/reset changed');
+
+    _reset(cleanInputArray(value, defaultValues, flow, schema));
   }, [value, _reset]);
   useEffect(function () {
-    _reset(cleanInputArray(value, defaultValues, schema));
+    console.log('re-render cauz schema changed');
+
+    _reset(cleanInputArray(value, defaultValues, flow, schema));
   }, [schema]);
-  var data = watch();
-  var prevData = usePrevious(data);
-  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)();
-    }
-  }, [data]);
 
-  if (options.watch) {
-    if (typeof options.watch === 'function') {
-      options.watch(watch());
+  if (!!options.autosubmit) {
+    _handleSubmit(function (data) {
+      return onSubmit(cleanOutputArray(data, schema));
+    }, onError)();
+  }
+
+  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;
     }
-  }
+  };
 
   useImperativeHandle(ref, function () {
     return {
@@ -29260,19 +29407,11 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
       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.createElement(FormProvider, methods, /*#__PURE__*/React.createElement("form", {
+  return /*#__PURE__*/React.createElement(FormProvider, methods, /*#__PURE__*/React.createElement(Watcher, {
+    options: options,
+    control: methods.control,
+    schema: schema
+  }), /*#__PURE__*/React.createElement("form", {
     className: className || "".concat(classes.pr_15, " ").concat(classes.w_100),
     onSubmit: _handleSubmit(function (data) {
       var clean = cleanOutputArray(data, schema);
@@ -29294,6 +29433,8 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref5, 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) {
@@ -29373,17 +29514,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 = useFormContext(),
@@ -29396,8 +29538,10 @@ 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;
+
+  console.log("re-render : " + entry);
 
   if (entry && _typeof$1(entry) === 'object') {
     var errored = entry.flow.some(function (step) {
@@ -29421,6 +29565,7 @@ var Step = function Step(_ref6) {
       }).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);
@@ -29466,6 +29611,30 @@ 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(newData, currentData)) 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.createElement(CustomizableInput, {
@@ -29484,13 +29653,14 @@ var Step = function Step(_ref6) {
     }, /*#__PURE__*/React.createElement(ArrayStep, {
       entry: entry,
       step: step,
-      defaultValue: step.defaultValue || defaultVal(step.type),
+      defaultValue: step.defaultValue || null,
       disabled: functionalProperty(entry, step.disabled),
       component: function component(props, idx) {
         var _props$defaultValue;
 
         return /*#__PURE__*/React.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,
@@ -29508,325 +29678,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.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.createElement("textarea", _extends({
-            type: "text",
-            id: entry,
-            className: classNames(classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null
-          }, step.props, {
+          return /*#__PURE__*/React.createElement(ControlledInput, {
             defaultValue: defaultValue,
-            placeholder: step.placeholder
-          }, inputProps)));
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React.createElement("textarea", {
+            type: "text",
+            className: classNames(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.createElement(Controller, {
-            name: entry,
-            control: control,
-            render: function render(_ref7) {
-              var field = _ref7.field;
-              return /*#__PURE__*/React.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.createElement(Component, _extends({
-                className: classNames(_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.createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React.createElement(Component, {
+            className: classNames(_defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }));
 
         case format.markdown:
-          return /*#__PURE__*/React.createElement(Controller, {
-            name: entry,
-            control: control,
-            render: function render(_ref8) {
-              var field = _ref8.field;
-              return /*#__PURE__*/React.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.createElement(MarkdownInput, _extends({}, step.props, {
-                className: classNames(_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.createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React.createElement(MarkdownInput, {
+            className: classNames(_defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }));
 
         case format.buttonsSelect:
         case format.select:
-          return /*#__PURE__*/React.createElement(Controller, {
-            name: entry,
-            control: control,
-            render: function render(_ref9) {
-              var field = _ref9.field;
-              return /*#__PURE__*/React.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.createElement(SelectInput, _extends({}, step.props, step, {
-                className: classNames(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.createElement(ControlledInput, {
+              defaultValue: defaultValue,
+              step: step,
+              entry: entry
+            }, /*#__PURE__*/React.createElement(SelectInput, {
+              className: classNames(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.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.createElement("input", _extends({
-            type: step.format || 'text',
-            id: entry,
-            className: classNames(classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-            readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
+          return /*#__PURE__*/React.createElement(ControlledInput, {
             defaultValue: defaultValue,
-            placeholder: step.placeholder
-          }, inputProps)));
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React.createElement("input", {
+            type: step.format || 'text',
+            className: classNames(classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }));
       }
 
     case type.number:
       switch (step.format) {
         case format.buttonsSelect:
         case format.select:
-          return /*#__PURE__*/React.createElement(Controller, {
-            name: entry,
-            control: control,
-            render: function render(_ref10) {
-              var field = _ref10.field;
-              return /*#__PURE__*/React.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.createElement(SelectInput, _extends({}, step.props, step, {
-                className: classNames(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.createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React.createElement(SelectInput, {
+            className: classNames(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.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.createElement("input", _extends({}, step.props, {
+          return /*#__PURE__*/React.createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React.createElement("input", {
             type: step.format || 'number',
-            id: entry,
-            className: classNames(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(classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }));
       }
 
     case type.bool:
-      return /*#__PURE__*/React.createElement(Controller, {
-        name: entry,
-        control: control,
-        render: function render(_ref11) {
-          var field = _ref11.field;
-          return /*#__PURE__*/React.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.createElement(BooleanInput, _extends({}, step.props, {
-            className: classNames(_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.createElement(ControlledInput, {
+        defaultValue: defaultValue,
+        step: step,
+        entry: entry
+      }, /*#__PURE__*/React.createElement(BooleanInput, {
+        className: classNames(_defineProperty$1({}, classes.input__invalid, errorDisplayed))
+      }));
 
     case type.object:
       switch (step.format) {
         case format.buttonsSelect:
         case format.select:
-          return /*#__PURE__*/React.createElement(Controller, {
-            name: entry,
-            control: control,
-            defaultValue: step.defaultValue,
-            render: function render(_ref12) {
-              var field = _ref12.field;
-              return /*#__PURE__*/React.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.createElement(SelectInput, _extends({}, step.props, step, {
-                className: classNames(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.createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React.createElement(SelectInput, {
+            className: classNames(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 ?
@@ -29862,35 +29833,20 @@ var Step = function Step(_ref6) {
           }));
 
         case format.code:
-          return /*#__PURE__*/React.createElement(Controller, {
-            name: entry,
-            control: control,
-            render: function render(_ref13) {
-              var field = _ref13.field;
-              return /*#__PURE__*/React.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.createElement(CodeInput, _extends({}, step.props, step, {
+          return /*#__PURE__*/React.createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry,
+            component: function component(field, props) {
+              return /*#__PURE__*/React.createElement(CodeInput, _extends({}, props, {
                 className: classNames(_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);
@@ -29902,95 +29858,41 @@ 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.createElement(Controller, {
-            name: entry,
-            control: control,
-            defaultValue: step.defaultValue,
-            render: function render(_ref14) {
-              var field = _ref14.field;
-              return /*#__PURE__*/React.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.createElement(ObjectInput, _extends({}, step.props, step, {
-                className: classNames(_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.createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React.createElement(ObjectInput, {
+            className: classNames(_defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+            possibleValues: step.options
+          }));
       }
 
     case type.date:
-      return /*#__PURE__*/React.createElement(Controller, {
-        name: entry,
-        control: control,
-        defaultValue: step.defaultValue,
-        render: function render(_ref15) {
-          var field = _ref15.field;
-          return /*#__PURE__*/React.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.createElement(DatePicker, _extends({}, step.props, {
-            id: "datePicker-1",
-            className: classNames(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.createElement(ControlledInput, {
+        defaultValue: defaultValue,
+        step: step,
+        entry: entry
+      }, /*#__PURE__*/React.createElement(DatePicker, {
+        className: classNames(classes.datepicker, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+        formatStyle: "large"
+      }));
 
     case type.file:
       return /*#__PURE__*/React.createElement(Controller, {
         name: entry,
         control: control,
-        render: function render(_ref16) {
-          var field = _ref16.field;
+        render: function render(_ref10) {
+          var field = _ref10.field;
 
-          var FileInput = function FileInput(_ref17) {
-            var onChange = _ref17.onChange;
+          var FileInput = function FileInput(_ref11) {
+            var onChange = _ref11.onChange;
 
             var _useState = useState(false),
                 _useState2 = _slicedToArray(_useState, 2),
@@ -30038,28 +29940,11 @@ var Step = function Step(_ref6) {
             }).join(" , ")));
           };
 
-          return /*#__PURE__*/React.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.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.createElement(ControlledInput, {
+            defaultValue: defaultValue,
+            step: step,
+            entry: entry
+          }, /*#__PURE__*/React.createElement(FileInput, null));
         }
       });
 
@@ -30068,18 +29953,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 = 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;
 
@@ -30105,7 +29989,6 @@ var ArrayStep = function ArrayStep(_ref18) {
       fields = _useFieldArray.fields,
       append = _useFieldArray.append,
       remove = _useFieldArray.remove;
-      _useFieldArray.update;
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, fields.map(function (field, idx) {
     return /*#__PURE__*/React.createElement("div", {
@@ -30115,15 +29998,19 @@ var ArrayStep = function ArrayStep(_ref18) {
       style: {
         position: 'relative'
       }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '95%'
+      }
     }, component(_objectSpread2$1(_objectSpread2$1({
       key: field.id
     }, field), {}, {
       defaultValue: values[idx]
-    }), idx), /*#__PURE__*/React.createElement("button", {
+    }), idx)), /*#__PURE__*/React.createElement("button", {
       type: "button",
       style: {
         position: 'absolute',
-        top: '-8px',
+        top: '2px',
         right: 0
       },
       className: classNames(classes.btn, classes.btn_red, classes.btn_sm, classes.ml_5),
@@ -30142,7 +30029,7 @@ var ArrayStep = function ArrayStep(_ref18) {
     className: classNames(classes.btn, classes.btn_blue, classes.btn_sm, classes.mt_5, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
     onClick: function onClick() {
       append({
-        value: step.addableDefaultValue || defaultVal(step.type)
+        value: step.addableDefaultValue || defaultVal(null, step.type)
       });
       trigger(entry);
       option(step.onChange).map(function (onChange) {
@@ -30159,25 +30046,25 @@ 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 = useFormContext(),
       getValues = _useFormContext4.getValues,
       setValue = _useFormContext4.setValue,
-      watch = _useFormContext4.watch,
-      trigger = _useFormContext4.trigger;
+      watch = _useFormContext4.watch;
+      _useFormContext4.trigger;
       _useFormContext4.formState;
 
   var _useState5 = useState(!!step.collapsed),
@@ -30185,11 +30072,12 @@ var NestedForm = function NestedForm(_ref19) {
       collapsed = _useState6[0],
       setCollapsed = _useState6[1];
 
-  var classes = useCustomStyle();
-  var v = getValues(parent);
-  useEffect(function () {
-    trigger(parent);
-  }, [JSON.stringify(v)]);
+  var classes = useCustomStyle(); // TODO - voir ce qui se passe et à quoi ça sert
+  // const v = getValues(parent);
+  // useEffect(() => {
+  //   trigger(parent)
+  // }, [JSON.stringify(v)])
+
   var schemaAndFlow = option(step.conditionalSchema).map(function (condiSchema) {
     var ref = option(condiSchema.ref).map(function (ref) {
       return getValues(ref);
@@ -30214,7 +30102,7 @@ var NestedForm = function NestedForm(_ref19) {
   });
   var prevSchema = usePrevious(schemaAndFlow.schema);
   useEffect(function () {
-    if (!!prevSchema && JSON.stringify(prevSchema) !== JSON.stringify(schemaAndFlow.schema)) {
+    if (!!prevSchema && !deepEqual(prevSchema, schemaAndFlow.schema)) {
       var def = getDefaultValues(schemaAndFlow.flow, schemaAndFlow.schema);
       setValue(parent, def, {
         shouldValidate: false
@@ -30281,10 +30169,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"));