@maif/react-forms 1.1.4 → 1.2.2

package/lib/esm/index.js

@@ -1,22 +1,27 @@
 import * as yup from 'yup';
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect, useCallback, useImperativeHandle } from 'react';
+import React__default, { forwardRef, useState, useRef, useEffect, useCallback, useImperativeHandle } from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import classNames from 'classnames';
 import deepEqual from 'fast-deep-equal';
-import { Eye, EyeOff, PlusCircle, MinusCircle, Trash2, ChevronDown, ChevronUp, HelpCircle, Loader, Upload } from 'react-feather';
+import PropTypes from 'prop-types';
 import { useFormContext, useController, useWatch, useForm, FormProvider, Controller, useFieldArray } from 'react-hook-form';
-import { DatePicker } from 'react-rainbow-components';
 import ReactToolTip from 'react-tooltip';
 import { v4 } from 'uuid';
 import debounce from 'lodash.debounce';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import TextField from '@mui/material/TextField';
 import CreatableSelect from 'react-select/creatable';
 import Select from 'react-select';
 import hash$1 from 'object-hash';
 import showdown from 'showdown';
 import '@fortawesome/fontawesome-free/css/all.css';
 import 'highlight.js/styles/monokai.css';
-import hljs from 'highlight.js';
+import hljs from 'highlight.js/lib/core';
 
 const type = {
     string: "string",
@@ -44,7 +49,9 @@ const format = {
     hidden: "hidden",
     form: "form",
     buttonsSelect: "buttons",
-    singleLineCode: "singleLineCode"
+    singleLineCode: "singleLineCode",
+    datetime: "datetime-local",
+    time: "time"
 };
 function stringTuple(...data) {
     return data;
@@ -172,25 +179,365 @@ var constraints = /*#__PURE__*/Object.freeze({
     jsonConstraints: jsonConstraints
 });
 
-const BooleanInput = React__default.forwardRef(({ onChange, value, readOnly }, ref) => {
+function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+
+function _objectWithoutProperties$8(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$8(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$8(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var HelpCircle = forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$8(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default.createElement("svg", _extends$8({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "12",
+    y1: "17",
+    x2: "12.01",
+    y2: "17"
+  }));
+});
+HelpCircle.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+HelpCircle.displayName = 'HelpCircle';
+
+function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+
+function _objectWithoutProperties$7(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$7(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$7(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Loader = forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$7(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default.createElement("svg", _extends$7({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default.createElement("line", {
+    x1: "12",
+    y1: "2",
+    x2: "12",
+    y2: "6"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "12",
+    y1: "18",
+    x2: "12",
+    y2: "22"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "4.93",
+    y1: "4.93",
+    x2: "7.76",
+    y2: "7.76"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "16.24",
+    y1: "16.24",
+    x2: "19.07",
+    y2: "19.07"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "2",
+    y1: "12",
+    x2: "6",
+    y2: "12"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "18",
+    y1: "12",
+    x2: "22",
+    y2: "12"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "4.93",
+    y1: "19.07",
+    x2: "7.76",
+    y2: "16.24"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "16.24",
+    y1: "7.76",
+    x2: "19.07",
+    y2: "4.93"
+  }));
+});
+Loader.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Loader.displayName = 'Loader';
+
+function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+
+function _objectWithoutProperties$6(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$6(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$6(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Upload = forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$6(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default.createElement("svg", _extends$6({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default.createElement("path", {
+    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+  }), /*#__PURE__*/React__default.createElement("polyline", {
+    points: "17 8 12 3 7 8"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "12",
+    y1: "3",
+    x2: "12",
+    y2: "15"
+  }));
+});
+Upload.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Upload.displayName = 'Upload';
+
+function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+
+function _objectWithoutProperties$5(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$5(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$5(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ChevronDown = forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$5(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default.createElement("svg", _extends$5({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default.createElement("polyline", {
+    points: "6 9 12 15 18 9"
+  }));
+});
+ChevronDown.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+ChevronDown.displayName = 'ChevronDown';
+
+function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+
+function _objectWithoutProperties$4(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$4(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$4(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ChevronUp = forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$4(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default.createElement("svg", _extends$4({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default.createElement("polyline", {
+    points: "18 15 12 9 6 15"
+  }));
+});
+ChevronUp.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+ChevronUp.displayName = 'ChevronUp';
+
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+
+function _objectWithoutProperties$3(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$3(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$3(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Trash2 = forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$3(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default.createElement("svg", _extends$3({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default.createElement("polyline", {
+    points: "3 6 5 6 21 6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "10",
+    y1: "11",
+    x2: "10",
+    y2: "17"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "14",
+    y1: "11",
+    x2: "14",
+    y2: "17"
+  }));
+});
+Trash2.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Trash2.displayName = 'Trash2';
+
+const BooleanInput = ({ onChange, value, readOnly, className, errorDisplayed }) => {
     const handleClick = (value) => {
         if (!readOnly) {
             onChange === null || onChange === void 0 ? void 0 : onChange(value);
         }
     };
-    let className = classNames("mrf-content_switch", {
+    let classes = classNames("mrf-content_switch", className, {
         "mrf-content_switch_button_on": !!value,
         "mrf-content_switch_button_off": !value && value !== null,
         "mrf-content_switch_button_null": value === null,
         "mrf-cursor_pointer": !readOnly,
         "mrf-cursor_not_allowed": readOnly,
+        "mrf-input__invalid": !!errorDisplayed
     });
     let callback = () => handleClick(true);
     if (!!value) {
         callback = () => handleClick(false);
     }
-    return React__default.createElement("input", { type: "checkbox", className: className, onChange: callback });
+    return React__default.createElement("input", { type: "checkbox", className: classes, onChange: callback });
+};
+
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+
+function _objectWithoutProperties$2(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var EyeOff = forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$2(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default.createElement("svg", _extends$2({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default.createElement("path", {
+    d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "1",
+    y1: "1",
+    x2: "23",
+    y2: "23"
+  }));
 });
+EyeOff.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+EyeOff.displayName = 'EyeOff';
+
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+
+function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Eye = forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$1(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default.createElement("svg", _extends$1({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default.createElement("path", {
+    d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+  }), /*#__PURE__*/React__default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  }));
+});
+Eye.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Eye.displayName = 'Eye';
 
 const Collapse = (props) => {
     const [collapsed, setCollapsed] = useState(props.initCollapsed || props.collapsed);
@@ -340,12 +687,14 @@ const SelectInput = (props) => {
     }
     const possibleValues = (props.possibleValues || [])
         .map(v => transformOption(v));
-    const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState(true);
     const [values, setValues] = useState(possibleValues);
-    const [value, setValue] = useState(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti));
+    const [value, setValue] = useState();
     useEffect(() => {
-        setValue(valueToSelectOption(props.value, values, props.isMulti));
-    }, [props.value, values]);
+        if (!loading && values.length) {
+            setValue(valueToSelectOption(props.value || props.defaultValue, values, props.isMulti));
+        }
+    }, [props.value, values, props.defaultValue, loading]);
     useEffect(() => {
         if (props.optionsFrom) {
             const cond = option(props.fetchCondition)
@@ -365,9 +714,7 @@ const SelectInput = (props) => {
                     promise = props.httpClient(props.optionsFrom, 'GET').then(r => r.json());
                 }
                 promise
-                    .then((values) => {
-                    return values.map(x => transformOption(x));
-                })
+                    .then((values) => values.map(x => transformOption(x)))
                     .then((values) => {
                     setValues(values);
                     setValue(values.find((item) => {
@@ -385,6 +732,7 @@ const SelectInput = (props) => {
         else {
             setValues((props.possibleValues || [])
                 .map(v => transformOption(v)));
+            setTimeout(() => setLoading(false), 250);
         }
     }, [props.optionsFrom, props.possibleValues]);
     const onChange = (changes) => {
@@ -429,13 +777,58 @@ const SelectInput = (props) => {
         })));
     }
     if (props.createOption) {
-        return (React__default.createElement(CreatableSelect, Object.assign({}, props, { name: `${props.label}-search`, isLoading: loading, value: value, isDisabled: props.disabled, placeholder: props.placeholder, onChange: onChange, options: values, onCreateOption: option => handleCreate(option, props.onCreateOption), classNamePrefix: "react-form-select", className: props.className })));
+        return (React__default.createElement(CreatableSelect, Object.assign({}, props, { name: `${props.label}-search`, isLoading: loading, value: value, isDisabled: loading || props.disabled, placeholder: props.placeholder, onChange: onChange, options: values, onCreateOption: option => handleCreate(option, props.onCreateOption), classNamePrefix: "react-form-select", className: props.className })));
     }
     else {
-        return (React__default.createElement(Select, Object.assign({}, props, { name: `${props.label}-search`, isLoading: loading, value: value, defaultValue: value, isDisabled: props.disabled, placeholder: props.placeholder, options: values, onChange: onChange, classNamePrefix: "react-form-select", className: props.className })));
+        return (React__default.createElement(Select, Object.assign({}, props, { name: `${props.label}-search`, isLoading: loading, value: value, defaultValue: value, isDisabled: loading || props.disabled, placeholder: props.placeholder, options: values, onChange: onChange, classNamePrefix: "react-form-select", className: props.className })));
     }
 };
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var PlusCircle = forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "12",
+    y1: "8",
+    x2: "12",
+    y2: "16"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "8",
+    y1: "12",
+    x2: "16",
+    y2: "12"
+  }));
+});
+PlusCircle.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+PlusCircle.displayName = 'PlusCircle';
+
 const ObjectInput = (props) => {
     const [internalState, setInternalState] = useState({});
     useEffect(() => {
@@ -495,7 +888,7 @@ const ObjectInput = (props) => {
             React.createElement("input", { disabled: props.disabled, type: "text", className: 'mrf-w_50 mrf-input', placeholder: props.placeholderKey, value: key, onChange: e => changeKey(id, e.target.value) }),
             React.createElement("input", { disabled: props.disabled, type: "text", className: 'mrf-w_50 mrf-input', placeholder: props.placeholderValue, value: value, onChange: e => changeValue(id, e.target.value) }),
             React.createElement("button", { disabled: props.disabled, type: "button", className: 'mrf-flex mrf-btn mrf-btn_red mrf-btn_sm mrf-ml_10', onClick: () => remove(id) },
-                React.createElement(MinusCircle, null)),
+                React.createElement(PlusCircle, null)),
             idx === Object.keys(internalState).length - 1 && (React.createElement("button", { disabled: props.disabled, type: "button", className: 'mrf-flex mrf-btn mrf-btn_blue mrf-btn_sm mrf-ml_5', onClick: addNext },
                 React.createElement(PlusCircle, null))))))));
 };
@@ -27638,7 +28031,7 @@ function CodeInput({ onChange, value, mode = 'javascript', tabSize = 2, readOnly
     width: '-1',
     minWidth: '-1',
     maxWidth: '-1',
-}, setRef }) {
+}, className, setRef }) {
     const ref = useRef();
     const [editor, setEditor] = useState();
     useEffect(() => {
@@ -27668,7 +28061,7 @@ function CodeInput({ onChange, value, mode = 'javascript', tabSize = 2, readOnly
             });
         }
     }, [value]);
-    return React__default.createElement("div", { ref: ref });
+    return React__default.createElement("div", { className: className, ref: ref });
 }
 
 const converter = new showdown.Converter({
@@ -27903,7 +28296,7 @@ const getShapeAndDependencies = (flow, schema, dependencies = [], rawData = {})
 
 const CustomizableInput$1 = React.memo((props) => {
     if (props.render) {
-        return (props.render(Object.assign(Object.assign({}, props.field), { error: props.error })));
+        return (props.render(Object.assign(Object.assign({}, props.field), { error: props.error, informations: props.informations })));
     }
     return props.children;
 }, (prev, next) => {
@@ -27913,15 +28306,16 @@ const CustomizableInput$1 = React.memo((props) => {
     return (prev.field.value === next.field.value && next.errorDisplayed === prev.errorDisplayed && cleanHash(next.step) === cleanHash(prev.step));
 });
 const ControlledInput = (inputProps) => {
-    const { step, entry, children, component, errorDisplayed = false } = inputProps;
+    const { step, entry, children, component, errorDisplayed = false, informations } = inputProps;
     const { field } = useController({
         defaultValue: isDefined(step.defaultValue) ? step.defaultValue : null,
         name: entry
     });
     const { getValues, setValue, formState: { errors } } = useFormContext();
+    const error = entry.split('.').reduce((acc, curr) => acc && acc[curr], errors);
     const functionalProperty = (entry, prop) => {
         if (typeof prop === 'function') {
-            return prop({ rawValues: getValues(), value: getValues(entry) });
+            return prop({ rawValues: getValues(), value: getValues(entry), informations, error, getValue: (key) => getValues(key) });
         }
         else {
             return prop;
@@ -27949,8 +28343,7 @@ const ControlledInput = (inputProps) => {
             option(step.onChange)
                 .map(onChange => onChange({ rawValues: getValues(), value, setValue }));
         }, value: field.value });
-    const error = entry.split('.').reduce((acc, curr) => acc && acc[curr], errors);
-    return React.createElement(CustomizableInput$1, { render: step.render, step: step, field: Object.assign({ parent, setValue: (key, value) => setValue(key, value), rawValues: getValues() }, field), error: error, errorDisplayed: errorDisplayed }, component ? component(field, props) : React.cloneElement(children, Object.assign({}, props)));
+    return React.createElement(CustomizableInput$1, { render: step.render, step: step, field: Object.assign({ setValue: (key, value) => setValue(key, value), rawValues: getValues(), getValue: (key) => getValues(key) }, field), error: error, errorDisplayed: errorDisplayed, informations: informations }, component ? component(field, props) : React.cloneElement(children, Object.assign({}, props)));
 };
 
 const usePrevious = (value) => {
@@ -27964,36 +28357,22 @@ const usePrevious = (value) => {
     // Return previous value (happens before update in useEffect above)
     return ref.current;
 };
-const BasicWrapper = ({ entry, children, render, functionalProperty, step }) => {
-    const { formState, watch } = useFormContext();
+const BasicWrapper = ({ entry, children, render, functionalProperty, step, informations }) => {
+    const { formState } = useFormContext();
     if (typeof entry === 'object') {
         return children;
     }
-    const visibleStep = option(step)
-        .map(s => s.visible)
-        .map(visible => {
-        let value;
-        switch (typeof visible) {
-            case 'object':
-                value = watch(visible.ref);
-                return option(visible.test).map(test => test(value)).getOrElse(value);
-            case 'boolean':
-                return visible;
-            default:
-                return true;
-        }
-    })
-        .getOrElse(true);
-    if (!visibleStep) {
-        return null;
-    }
-    const computedLabel = functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry);
-    const id = v4();
     // FIXME not sure it works as intended with more two or more parts
     const error = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.errors);
     const isDirty = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.dirtyFields);
     const isTouched = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.touchedFields);
     const errorDisplayed = formState.isSubmitted || isDirty || isTouched;
+    const visibleStep = functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.visible) === undefined ? true : step.visible, informations, error);
+    if (!visibleStep) {
+        return null;
+    }
+    const computedLabel = functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, informations);
+    const id = v4();
     if (render) {
         return render({ entry, label: computedLabel, error, help: step === null || step === void 0 ? void 0 : step.help, children });
     }
@@ -28009,7 +28388,7 @@ const BasicWrapper = ({ entry, children, render, functionalProperty, step }) =>
 };
 const CustomizableInput = (props) => {
     if (props.render) {
-        return (props.render(Object.assign(Object.assign({}, props.field), { error: props.error })));
+        return (props.render(Object.assign(Object.assign({}, props), { error: props.error })));
     }
     return props.children;
 };
@@ -28170,7 +28549,7 @@ const Form = React__default.forwardRef(function Form({ schema, flow, value, inpu
     //   reset(cleanInputArray(value, defaultValues, flow, schema))
     //   setReset(true)
     // }, [reset])
-    const { handleSubmit, formState: { errors, dirtyFields }, reset, trigger, getValues, watch } = methods;
+    const { handleSubmit, reset, trigger, getValues } = methods;
     useEffect(() => {
         if (!!options.showErrorsOnStart) {
             trigger();
@@ -28179,9 +28558,9 @@ const Form = React__default.forwardRef(function Form({ schema, flow, value, inpu
     useHashEffect(() => {
         reset(Object.assign({}, cleanInputArray(value, defaultValues, flow, schema)));
     }, [value, schema]);
-    const functionalProperty = (entry, prop) => {
+    const functionalProperty = (entry, prop, informations, error) => {
         if (typeof prop === 'function') {
-            return prop({ rawValues: getValues(), value: getValues(entry) }); // FIXME why ???
+            return prop({ rawValues: getValues(), value: getValues(entry), informations, getValue: (key) => getValues(key), error });
         }
         else {
             return prop;
@@ -28202,13 +28581,17 @@ const Form = React__default.forwardRef(function Form({ schema, flow, value, inpu
                 onSubmit(clean);
             }, onError) },
             formFlow.map((entry, idx) => {
-                const step = typeof entry === "object" ? undefined : schema[entry];
+                if (typeof entry === 'object') {
+                    return (React__default.createElement(CollapsedStep, { key: idx, entry: entry, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty }));
+                }
+                const step = schema[entry];
                 if (!step && typeof entry === 'string') {
                     console.error(`no step found for the entry "${entry}" in the given schema. Your form might not work properly. Please fix it`);
                     return null;
                 }
-                return (React__default.createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, render: inputWrapper, step: step },
-                    React__default.createElement(Step, { key: idx, entry: entry, step: step, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty })));
+                const informations = { path: entry };
+                return (React__default.createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, render: inputWrapper, step: step, informations: informations },
+                    React__default.createElement(Step, { key: idx, entry: entry, step: step, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty, informations: informations })));
             }),
             React__default.createElement(Footer, { render: footer, reset: () => reset(defaultValues), valid: handleSubmit(data => onSubmit(cleanOutputArray(data, schema)), onError), actions: options.actions }))));
 });
@@ -28223,26 +28606,32 @@ const Footer = (props) => {
         ((_k = (_j = props.actions) === null || _j === void 0 ? void 0 : _j.reset) === null || _k === void 0 ? void 0 : _k.display) && React__default.createElement("button", { className: 'mrf-btn mrf-btn_red', type: "button", onClick: props.reset }, ((_m = (_l = props.actions) === null || _l === void 0 ? void 0 : _l.reset) === null || _m === void 0 ? void 0 : _m.label) || 'Reset'),
         isSubmitDisplayed && React__default.createElement("button", { className: 'mrf-btn mrf-btn_green mrf-ml_10', type: "submit" }, ((_p = (_o = props.actions) === null || _o === void 0 ? void 0 : _o.submit) === null || _p === void 0 ? void 0 : _p.label) || 'Save')));
 };
+const CollapsedStep = (props) => {
+    let { entry, schema, inputWrapper, httpClient, functionalProperty } = props;
+    const { formState: { errors, dirtyFields, touchedFields } } = useFormContext();
+    const errored = extractFlowString(entry).some(step => !!errors[step] && (dirtyFields[step] || touchedFields[step]));
+    //FIXME: get collapse errors
+    return (React__default.createElement(Collapse, Object.assign({}, entry, { errored: errored }), entry.flow.map((en, entryIdx) => {
+        if (typeof en === 'object') {
+            return (React__default.createElement(CollapsedStep, Object.assign({ key: entryIdx }, props, { entry: en })));
+        }
+        const stp = schema[en];
+        if (!stp && typeof en === 'string') {
+            console.error(`no step found for the entry "${en}" in the given schema. Your form might not work properly. Please fix it`);
+            return null;
+        }
+        const informations = { path: en };
+        return (React__default.createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, render: inputWrapper, informations: informations },
+            React__default.createElement(Step, { entry: en, step: stp, schema: schema, inputWrapper: inputWrapper, httpClient: httpClient, defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue, functionalProperty: functionalProperty, informations: informations })));
+    })));
+};
 const Step = (props) => {
-    let { entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, parent, parentInformations } = props;
+    let { entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, informations } = props;
     const { formState: { errors, dirtyFields, touchedFields, isSubmitted }, control, getValues, setValue, watch } = useFormContext();
-    if (entry && typeof entry === 'object') {
-        const errored = extractFlowString(entry).some(step => !!errors[step] && (dirtyFields[step] || touchedFields[step]));
-        return (React__default.createElement(Collapse, Object.assign({}, entry, { errored: errored }), entry.flow.map((en, entryIdx) => {
-            const stp = typeof en === "object" ? undefined : schema[en]; // TODO Factorise this logic
-            if (!stp && typeof en === 'string') {
-                console.error(`no step found for the entry "${en}" in the given schema. Your form might not work properly. Please fix it`);
-                return null;
-            }
-            return (React__default.createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, render: inputWrapper },
-                React__default.createElement(Step, { entry: en, step: stp, schema: schema, inputWrapper: inputWrapper, httpClient: httpClient, defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue, functionalProperty: functionalProperty, parentInformations: parentInformations })));
-        })));
-    }
     const error = entry.split('.').reduce((acc, curr) => acc && acc[curr], errors);
     const isDirty = entry.split('.').reduce((acc, curr) => acc && acc[curr], dirtyFields);
     const isTouched = entry.split('.').reduce((acc, curr) => acc && acc[curr], touchedFields);
     const errorDisplayed = (!!error && (isSubmitted || isDirty || isTouched));
-    const informations = { path: entry, parent: parentInformations, index };
     step = step;
     if (step.onAfterChange) {
         const data = watch();
@@ -28265,64 +28654,60 @@ const Step = (props) => {
             });
     }
     if (step.array) {
-        return (React__default.createElement(CustomizableInput, { render: step.render, field: {
-                setValue: (key, value) => setValue(key, value), rawValues: getValues(), value: getValues(entry), onChange: (v) => setValue(entry, v)
-            }, error: !!error },
-            React__default.createElement(ArrayStep, { entry: entry, step: step, disabled: functionalProperty(entry, step.disabled || false), component: ((props, idx) => {
+        return (React__default.createElement(CustomizableInput, { render: step.render, rawValues: getValues(), value: getValues(entry), onChange: (v) => setValue(entry, v), setValue: (key, value) => setValue(key, value), getValue: (key) => getValues(key), informations: informations, error: !!error },
+            React__default.createElement(ArrayStep, { entry: entry, step: step, disabled: functionalProperty(entry, step.disabled || false, informations, error), component: ((props, idx) => {
                     var _a;
-                    return (React__default.createElement(Step, { entry: `${entry}.${idx}.value`, step: Object.assign(Object.assign({}, (schema[realEntry || entry])), { render: step.itemRender, onChange: undefined, array: false, onAfterChange: step.onAfterChange }), schema: schema, inputWrapper: inputWrapper, httpClient: httpClient, defaultValue: (_a = props.defaultValue) === null || _a === void 0 ? void 0 : _a.value, index: idx, functionalProperty: functionalProperty, parentInformations: informations }));
+                    return (React__default.createElement(Step, { entry: `${entry}.${idx}.value`, step: Object.assign(Object.assign({}, (schema[realEntry || entry])), { render: step.itemRender, onChange: undefined, array: false, onAfterChange: step.onAfterChange }), schema: schema, inputWrapper: inputWrapper, httpClient: httpClient, defaultValue: (_a = props.defaultValue) === null || _a === void 0 ? void 0 : _a.value, index: idx, functionalProperty: functionalProperty, informations: { path: entry, parent: informations, index: idx } }));
                 }) })));
     }
     switch (step.type) {
         case type.string:
             switch (step.format) {
                 case format.text:
-                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         React__default.createElement("textarea", { className: classNames('mrf-input', step.className, { 'mrf-mrf-input__invalid': !!errorDisplayed }) })));
                 case format.code:
                 case format.singleLineCode:
                     const Component = step.format === format.code ? CodeInput : SingleLineCode;
-                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
-                        React__default.createElement(Component /*TODO try to pass className down OR use built in mechanism to display error classNames(step.className, { 'mrf-input__invalid': !!errorDisplayed })}*/, null)));
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
+                        React__default.createElement(Component, { className: classNames(step === null || step === void 0 ? void 0 : step.className, { 'mrf-input__invalid': !!error }) })));
                 case format.markdown:
-                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         React__default.createElement(MarkdownInput, { className: classNames(step.className, { 'mrf-input__invalid': !!errorDisplayed }) })));
                 case format.buttonsSelect:
                 case format.select: {
-                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
-                        React__default.createElement(SelectInput, Object.assign({ className: classNames('mrf-flex_grow_1', step.className, { 'mrf-input__invalid': !!errorDisplayed }), disabled: functionalProperty(entry, step.disabled || false) }, step.props, { possibleValues: step.options, httpClient: httpClient, isMulti: step.isMulti, createOption: step.createOption, onCreateOption: step.onCreateOption, transformer: step.transformer, buttons: step.format === format.buttonsSelect, optionsFrom: step.optionsFrom }))));
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
+                        React__default.createElement(SelectInput, Object.assign({ className: classNames('mrf-flex_grow_1', step.className, { 'mrf-input__invalid': !!errorDisplayed }), disabled: functionalProperty(entry, step.disabled || false, informations, error) }, step.props, { possibleValues: step.options, httpClient: httpClient, isMulti: step.isMulti, createOption: step.createOption, onCreateOption: step.onCreateOption, transformer: step.transformer, buttons: step.format === format.buttonsSelect, optionsFrom: step.optionsFrom }))));
                 }
                 default:
-                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         React__default.createElement("input", { type: step.format || 'text', className: classNames('mrf-input', step.className, { 'mrf-input__invalid': !!errorDisplayed }) })));
             }
         case type.number:
             switch (step.format) {
                 case format.buttonsSelect:
                 case format.select:
-                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         React__default.createElement(SelectInput, Object.assign({ className: classNames('mrf-content', step.className, { 'mrf-input__invalid': !!errorDisplayed }) }, step.props, { possibleValues: step.options, httpClient: httpClient, isMulti: step.isMulti, createOption: step.createOption, onCreateOption: step.onCreateOption, transformer: step.transformer, buttons: step.format === format.buttonsSelect, optionsFrom: step.optionsFrom }))));
                 default:
-                    return React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                    return React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         React__default.createElement("input", { type: step.format || 'number', className: classNames('mrf-input', step.className, { 'mrf-input__invalid': !!errorDisplayed }) }));
             }
         case type.bool:
-            return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
-                React__default.createElement(BooleanInput /* TODO see how to pass error down className={classNames(step.className, { 'mrf-input__invalid': !!errorDisplayed })}*/, null)));
+            return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
+                React__default.createElement(BooleanInput, { className: step.className, errorDisplayed: errorDisplayed })));
         case type.object:
             switch (step.format) {
                 case format.buttonsSelect:
                 case format.select:
-                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         React__default.createElement(SelectInput, Object.assign({ className: classNames('mrf-flex_grow_1', step.className, { 'mrf-input__invalid': !!errorDisplayed }) }, step.props, { possibleValues: step.options, httpClient: httpClient, isMulti: step.isMulti, createOption: step.createOption, onCreateOption: step.onCreateOption, transformer: step.transformer, buttons: step.format === format.buttonsSelect, optionsFrom: step.optionsFrom }))));
                 case format.form: //todo: disabled ?
                     const flow = option(step.flow).getOrElse(option(step.schema).map(s => Object.keys(s)).getOrElse([]));
-                    return (React__default.createElement(CustomizableInput, { render: step.render, field: { parent, setValue: (key, value) => setValue(key, value), rawValues: getValues(), value: getValues(entry), onChange: (v) => setValue(entry, v, { shouldValidate: true }) } },
+                    return (React__default.createElement(CustomizableInput, { render: step.render, rawValues: getValues(), value: getValues(entry), onChange: (v) => setValue(entry, v, { shouldValidate: true }), setValue: (key, value) => setValue(key, value), getValue: (key) => getValues(key), informations: informations },
                         React__default.createElement(NestedForm, { schema: step.schema, flow: flow, step: step, parent: entry, inputWrapper: inputWrapper, maybeCustomHttpClient: httpClient, value: getValues(entry) || defaultValue, functionalProperty: functionalProperty, errorDisplayed: errorDisplayed, informations: informations })));
                 case format.code:
-                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, component: (field, props) => (React__default.createElement(CodeInput, Object.assign({}, props, { 
-                            /* TODO className={classNames(step.className, { 'mrf-input__invalid': !!error })}*/
-                            onChange: (e) => {
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations, component: (field, props) => (React__default.createElement(CodeInput, Object.assign({}, props, { className: classNames(step === null || step === void 0 ? void 0 : step.className, { 'mrf-input__invalid': !!error }), onChange: (e) => {
                                 let v;
                                 try {
                                     v = JSON.parse(e);
@@ -28335,12 +28720,28 @@ const Step = (props) => {
                                     .map(onChange => onChange({ rawValues: getValues(), value: v, setValue }));
                             }, value: field.value === null ? null : ((typeof field.value === 'object') ? JSON.stringify(field.value, null, 2) : field.value) }))) }));
                 default:
-                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         React__default.createElement(ObjectInput, { className: classNames(step.className, { 'mrf-input__invalid': !!errorDisplayed }) })));
             }
         case type.date:
-            return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
-                React__default.createElement(DatePicker, { className: classNames('mrf-datepicker', step.className, { 'mrf-input__invalid': !!errorDisplayed }), formatStyle: "large" })));
+            switch (step.format) {
+                case format.datetime:
+                    console.debug('datetime');
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, informations: informations, component: (field) => {
+                            return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns },
+                                React__default.createElement(DateTimePicker, { value: field.value, onChange: field.onChange, renderInput: (params) => React__default.createElement(TextField, Object.assign({}, params)) })));
+                        } }));
+                case format.time:
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, informations: informations, component: (field) => {
+                            return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns },
+                                React__default.createElement(TimePicker, { value: field.value, onChange: field.onChange, renderInput: (params) => React__default.createElement(TextField, Object.assign({}, params)) })));
+                        } }));
+                default:
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, informations: informations, component: (field) => {
+                            return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns },
+                                React__default.createElement(DatePicker, { value: field.value, onChange: field.onChange, renderInput: (params) => React__default.createElement(TextField, Object.assign({}, params)) })));
+                        } }));
+            }
         case type.file:
             return (React__default.createElement(Controller, { name: entry, control: control, render: ({ field }) => {
                     const FileInput = ({ onChange }) => {
@@ -28358,19 +28759,17 @@ const Step = (props) => {
                         const files = field.value || [];
                         return (React__default.createElement("div", { className: classNames('mrf-flex', 'mrf-ai_center', step === null || step === void 0 ? void 0 : step.className, { 'mrf-input__invalid': !!error }) },
                             React__default.createElement("input", { ref: (r) => setInput(r), type: "file", multiple: true, className: 'mrf-d_none', onChange: setFiles }),
-                            React__default.createElement("button", { type: "button", className: 'mrf-btn mrf-btn_sm mrf-flex mrf-ai_center', disabled: uploading || functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.disabled) || false), onClick: trigger },
+                            React__default.createElement("button", { type: "button", className: 'mrf-btn mrf-btn_sm mrf-flex mrf-ai_center', disabled: uploading || functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.disabled) || false, informations, error), onClick: trigger },
                                 uploading && React__default.createElement(Loader, null),
                                 !uploading && React__default.createElement(Upload, null),
                                 React__default.createElement("span", { className: 'mrf-ml_5' }, "Select file(s)")),
                             React__default.createElement("span", { className: 'mrf-ml_5' }, files.length <= 0 ? 'No files selected' : files.map(r => r.name).join(" , "))));
                     };
-                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                    return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         React__default.createElement(FileInput, null)));
                 } }));
         case type.json:
-            return (React__default.createElement(ControlledInput, { step: step, entry: entry, component: (field, props) => (React__default.createElement(CodeInput, Object.assign({}, props, { 
-                    /* TODO className={classNames({ 'mrf-input__invalid': !!error })} */
-                    onChange: (v) => {
+            return (React__default.createElement(ControlledInput, { step: step, entry: entry, informations: informations, component: (field, props) => (React__default.createElement(CodeInput, Object.assign({}, props, { className: classNames(step === null || step === void 0 ? void 0 : step.className, { 'mrf-input__invalid': !!error }), onChange: (v) => {
                         field.onChange(v);
                         option(step === null || step === void 0 ? void 0 : step.onChange)
                             .map(onChange => onChange({ rawValues: getValues(), value: v, setValue }));
@@ -28441,31 +28840,21 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
         return [...acc, { step, entry }];
     }, []);
     const bordered = computedSandF.length >= 1 && step.label !== null;
-    return (React__default.createElement("div", { className: classNames({ ['mrf-nestedform__border']: bordered, ['mrf-border__error']: !!errorDisplayed }), style: { position: 'relative' } },
+    return (React__default.createElement("div", { className: classNames(step.className, { ['mrf-nestedform__border']: bordered, ['mrf-border__error']: !!errorDisplayed }), style: { position: 'relative' } },
         !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed &&
             React__default.createElement(ChevronDown, { size: 30, className: 'mrf-cursor_pointer', style: { position: 'absolute', top: -35, right: 0, zIndex: 100 }, strokeWidth: "2", onClick: () => setCollapsed(!collapsed) }),
         !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed &&
             React__default.createElement(ChevronUp, { size: 30, className: 'mrf-cursor_pointer', style: { position: 'absolute', top: -35, right: 0, zIndex: 100 }, strokeWidth: "2", onClick: () => setCollapsed(!collapsed) }),
         computedSandF.map(({ step, entry }, idx) => {
+            if (typeof entry === 'object') {
+                return (React__default.createElement(CollapsedStep, { key: idx, entry: entry, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty }));
+            }
             if (!step && typeof entry === 'string') {
                 console.error(`no step found for the entry "${entry}" in the given schema. Your form might not work properly. Please fix it`);
                 return null;
             }
-            if (typeof entry === "object") {
-                const errored = extractFlowString(entry).some(step => !!errors[step] && (dirtyFields[step] || touchedFields[step])); /* FIXME does it works in case of Flow object ? Need to do a "flatMap" to retrieve all leafs string of flows objects */
-                return React__default.createElement(Collapse, Object.assign({}, entry, { errored: errored }), entry.flow.map((en, entryIdx) => {
-                    const stp = typeof en === "object" ? undefined : schema[en];
-                    if (!stp && typeof en === 'string') {
-                        console.error(`no step found for the entry "${en}" in the given schema. Your form might not work properly. Please fix it`);
-                        return null;
-                    }
-                    return (React__default.createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, render: inputWrapper },
-                        React__default.createElement(Step, { entry: en, step: stp, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue, functionalProperty: functionalProperty })));
-                }));
-                // TODO return collapse, then entry will always be a string in below return
-            }
-            return (React__default.createElement(BasicWrapper, { key: `${entry}.${idx}`, className: classNames({ ['mrf-display__none']: (collapsed && !step.visibleOnCollapse) }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, step: step, render: inputWrapper },
-                React__default.createElement(Step, { key: `step.${entry}.${idx}`, entry: `${parent}.${entry}`, realEntry: entry, step: schemaAndFlow.schema[entry], parent: parent, schema: schemaAndFlow.schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, defaultValue: value && value[entry], functionalProperty: functionalProperty, parentInformations: informations })));
+            return (React__default.createElement(BasicWrapper, { key: `${entry}.${idx}`, className: classNames({ ['mrf-display__none']: (collapsed && !step.visibleOnCollapse) }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, step: step, render: inputWrapper, informations: { path: entry, parent: informations } },
+                React__default.createElement(Step, { key: `step.${entry}.${idx}`, entry: `${parent}.${entry}`, realEntry: entry, step: schemaAndFlow.schema[entry], schema: schemaAndFlow.schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, defaultValue: value && value[entry], functionalProperty: functionalProperty, informations: { path: entry, parent: informations } })));
         })));
 };
 function extractFlowString(entry) {