@maif/react-forms 1.0.53 → 1.0.56

package/README.md

@@ -18,12 +18,12 @@ yarn add @maif/react-forms
 ```
 
 # Usage
-You must define a form flow (this is just a javascript array which that represent the rendering order of the form fields) and a schema (that is define all field of your form with type or constraints for example)
+You must define a form flow (this is just a javascript array which represents the rendering order of the form fields) and a schema (that defines all fields of your form with types or constraints for example)
 
 ## example
 
 ```javascript
-import { Form, type, format, constraints } from 'react-forms'
+import { Form, type, format, constraints } from '@maif/react-forms'
 
 export const Example = () => { 
   const schema = {
@@ -64,7 +64,7 @@ export const Example = () => {
 ## schema properties
 
 - **type** (required): the type of value. It provided by the imported object `type`. It could be just string like `string`, `number`, `bool`, `object`, `date` or `file`
-- **format**: Over the type you can display a special format for the field. It provided by the imported object `format` or just a string
+- **format**: Over the type you can display a special format for the field. It is provided by the imported object `format` or just a string
   - `select`: display a [react-select](https://react-select.com/home) field with provided options
   - `buttonsSelect`: display a buttons group, drawn with the same options than the format `select`
   - `code`: if the type is `string`, display a code input (draw with [react-ace](https://github.com/securingsincity/react-ace)) (add a props.setRef to get ace editor ref)
@@ -226,6 +226,7 @@ By default all fields of the form are nullable (they can accept `null` or `undef
     - [`constraints.test(name: string, message?:string, test: (val: any) => boolean | Promise<boolean>)`](#constraintstestname-string-messagestring-test-val-any--boolean--promiseboolean)
     - [`constraints.when(ref: string, test: (val: any) => boolean, then: any = [], otherwise: any = [])`](#constraintswhenref-string-test-val-any--boolean-then-any---otherwise-any--)
     - [`constraints.oneOf(arrayOfValues: any[], message?:string)`](#constraintsoneofarrayofvalues-any-messagestring)
+    - [`constraints.ref(ref: any)`](#constraintsrefrefany)
   - [string](#string)
   - [string or number](#string-or-number)
   - [number](#number)
@@ -279,6 +280,7 @@ the following methods works for all type types of value.
 
 #### `constraints.oneOf(arrayOfValues: any[], message?:string)`
   Whitelist a set of values and display an error under field if the provided value is not contains in this set.
+  Values can also be a [`reference`](#constraintsrefrefany) of value
 
   ```javascript
   constraints.oneOf(['foo', 'bar'], 'not foo or bar :(')
@@ -287,6 +289,33 @@ the following methods works for all type types of value.
   {type: 'oneOf', arrayOfValues: ['foo', 'bar'], message: 'not foo or bar :('}
   ```
 
+#### `constraints.ref(ref:any)`
+  Some constraints accepts reference as property. This methods create a reference to another field.
+  Refs are evaluated in the proper order so that the ref value is resolved before the field using the ref (be careful of circular dependencies!).
+
+   ```javascript
+    const schema = {
+      dad_age: { type: type.number},
+      son_age: {
+          type: type.number,
+          constraints: [
+            constraints.lessThan(constraints.ref('dad_age'), 'too old')
+          ]
+        }
+    }
+  ```
+  ```javascript
+const schema = {
+      dad_age: { type: 'number'},
+      son_age: {
+          type: 'number',
+          constraints: [
+            {type: 'lessThan', ref: { ref: 'dad_age' }, message: 'too old !'}
+          ]
+        }
+    }
+  ```
+
 ### string
 the following methods works for string values. All methods for [mixed](#mixed) are available.
 
@@ -324,13 +353,13 @@ the following methods works for string or number values. All methods for [mixed]
 
 
 #### `constraints.min(ref: number | Reference<number>, message: string)`
-Set the minimum value allowed and display an error if the provided value (for a number) or the length of the string is bigger.
+Set the minimum value allowed and display an error if the provided value (for a number) or the length of the string is bigger. Provided value can be a number or a [`reference`](#constraintsrefrefany) to a number
 ```javascript
 {type: 'min', ref: 1, message: 'too small'}
 ```
 
 #### `constraints.max(ref: number | Reference<number>, message: string)`
-Set the maximun value allowed and display an error if provided value (for a number) or the length of the string is smaller.
+Set the maximun value allowed and display an error if provided value (for a number) or the length of the string is smaller. value can be a number or a [`reference`](#constraintsrefrefany) to a number
 ```javascript
 {type: 'max', ref: 5, message: 'too high'}
 ```
@@ -356,13 +385,13 @@ The value must be aa integer number and display an error if it's not.
 ```
 
 #### `constraints.lessThan(ref: number | Reference<number>, message: string)`
-Set the maximun value allowed and display an error if provided value (for a number) or the length of the string is smaller.
+Set the maximun value allowed and display an error if provided value (for a number) or the length of the string is smaller. value can be a number or a [`reference`](#constraintsrefrefany) to a number
 ```javascript
 {type: 'lessThan', ref: 5, message: 'less please'}
 ```
 
 #### `constraints.moreThan(ref: number | Reference<number>, message: string)`
-Set the minimum value allowed and display an error if provided value (for a number) or the length of the string is bigger.
+Set the minimum value allowed and display an error if provided value (for a number) or the length of the string is bigger. value can be a number or a [`reference`](#constraintsrefrefany) to a number
 ```javascript
 {type: 'moreThan', ref: 5, message: 'more please'}
 ```
@@ -371,7 +400,7 @@ Set the minimum value allowed and display an error if provided value (for a numb
 the following methods works for basic types if the format is define to `array`. All methods for [mixed](#mixed) are available.
 
 #### `constraints.length(value: number | Reference<number>, message?:string)`
-Set the length of the array and display an error if it's different.
+Set the length of the array and display an error if it's different. value can be a number or a [`reference`](#constraintsrefrefany) to a number
 ```javascript
 {type: 'length', ref: 5, message: 'this array must have 5 elements'}
 ```

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 { useController, useFormContext, useForm, FormProvider, Controller, useFieldArray, useWatch } from 'react-hook-form';
+import { useFormContext, useController, useForm, FormProvider, Controller, useFieldArray, useWatch } from 'react-hook-form';
 import { DatePicker } from 'react-rainbow-components';
 import ReactToolTip from 'react-tooltip';
 import { v4 } from 'uuid';
@@ -74,7 +74,8 @@ var _matches = function matches() {
   var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This field does not match the pattern";
   return function (r) {
     return r.matches(regexp, {
-      message: message
+      message: message,
+      excludeEmptyString: false
     });
   };
 }; //string & number
@@ -215,7 +216,7 @@ var _oneOf = function oneOf(arrayOfValues) {
   return function (r) {
     return r.oneOf(arrayOfValues.map(maybeRef), message);
   };
-};
+}; //todo: rename by notOneOf
 
 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(', '));
@@ -936,6 +937,9 @@ var arrayFlatten = function arrayFlatten(array) {
 
   return array;
 };
+var isDefined = function isDefined(value) {
+  return value !== null && value !== undefined;
+};
 
 var valueToSelectOption = function valueToSelectOption(value) {
   var possibleValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -970,6 +974,9 @@ var valueToSelectOption = function valueToSelectOption(value) {
 };
 
 var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues;
+
   var classes = useCustomStyle();
   var possibleValues = (props.possibleValues || []).map(function (v) {
     return props.transformer ? typeof props.transformer === 'function' ? props.transformer(v) : {
@@ -1009,9 +1016,24 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
 
       if (cond) {
         setLoading(true);
-        var promise = isPromise(props.optionsFrom) ? props.optionsFrom : props.httpClient(props.optionsFrom, 'GET').then(function (r) {
-          return r.json();
-        });
+        var promise;
+
+        if (isPromise(props.optionsFrom)) {
+          promise = props.optionsFrom;
+        } else if (typeof props.optionsFrom === 'function') {
+          var result = props.optionsFrom({
+            rawValues: getValues(),
+            value: getValues(props.id)
+          });
+          promise = isPromise(result) ? result : props.httpClient(result, 'GET').then(function (r) {
+            return r.json();
+          });
+        } else {
+          promise = props.httpClient(props.optionsFrom, 'GET').then(function (r) {
+            return r.json();
+          });
+        }
+
         promise.then(function (values) {
           return values.map(function (x) {
             return props.transformer ? props.transformer(x) : valueToSelectOption(x, values, props.isMulti, props.transformer);
@@ -1098,7 +1120,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
       value: value,
       isDisabled: props.disabled,
       placeholder: props.placeholder,
-      isClearable: true,
       onChange: onChange,
       options: values,
       onCreateOption: function onCreateOption(option) {
@@ -1113,7 +1134,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
       name: "".concat(props.label, "-search"),
       isLoading: loading,
       value: value,
-      isClearable: true,
       defaultValue: value,
       isDisabled: props.disabled,
       placeholder: props.placeholder,
@@ -28863,18 +28883,28 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
           return s.condition === ref;
         }
       });
-      return option(filterSwitch).getOrElse(condiSchema["switch"].find(function (s) {
+      return option(filterSwitch).orElse(condiSchema["switch"].find(function (s) {
         return s["default"];
-      }));
-    }).getOrElse({}),
+      })).getOrElse({
+        schema: {},
+        flow: []
+      });
+    }).getOrElse({
+      schema: {},
+      flow: []
+    }),
         schema = _option$map$getOrElse.schema,
         flow = _option$map$getOrElse.flow;
 
-    var _subResolver2 = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawData);
+    var realFlow = flow || Object.keys(schema);
 
-    return constraints.reduce(function (resolver, constraint) {
-      return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
-    }, yup.object().shape(_subResolver2.shape, dependencies));
+    if (realFlow.length) {
+      var _subResolver2 = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawData);
+
+      return constraints.reduce(function (resolver, constraint) {
+        return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
+      }, yup.object().shape(_subResolver2.shape, dependencies));
+    }
   } else {
     return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
@@ -28928,22 +28958,21 @@ var CustomizableInput$1 = /*#__PURE__*/React.memo(function (props) {
 
   return props.children;
 }, function (prev, next) {
-  if (next.render) {
+  if (next.render || next.conditionalSchema) {
     return false;
   }
 
   return prev.field.value === next.field.value && next.errorDisplayed === prev.errorDisplayed;
 });
 var ControlledInput = function ControlledInput(_ref) {
-  var defaultValue = _ref.defaultValue,
-      step = _ref.step,
+  var step = _ref.step,
       entry = _ref.entry,
       children = _ref.children,
       component = _ref.component,
       errorDisplayed = _ref.errorDisplayed;
 
   var _useController = useController({
-    defaultValue: defaultValue || null,
+    defaultValue: isDefined(step.defaultValue) ? step.defaultValue : null,
     name: entry
   }),
       field = _useController.field;
@@ -29103,8 +29132,8 @@ var CustomizableInput = function CustomizableInput(props) {
   return props.children;
 };
 
-var defaultVal = function defaultVal(value, array, defaultValue) {
-  if (!!defaultValue) return defaultValue;
+var defaultVal = function defaultVal(value, array, defaultValue, type) {
+  if (isDefined(defaultValue)) return defaultValue;
   if (!!array) return [];
   return value;
 };
@@ -29141,9 +29170,17 @@ var cleanInputArray = function cleanInputArray(obj, defaultValues, flow, subSche
         key = _ref5[0],
         step = _ref5[1];
 
-    var v;
-    if (obj) v = obj[key];
-    if ((step.type === type.bool && v === null || step.type !== type.bool && !v) && defaultValues) v = defaultValues[key];
+    var v = null;
+
+    if (obj) {
+      v = obj[key];
+    }
+
+    var maybeDefaultValue = defaultValues[key];
+
+    if (!v && isDefined(maybeDefaultValue)) {
+      v = maybeDefaultValue;
+    }
 
     if (step.array && !step.render) {
       return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, (v || []).map(function (value) {
@@ -29305,21 +29342,20 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      initialReseted = _useState2[0],
-      setReset = _useState2[1];
+      initialReseted = _useState2[0];
+      _useState2[1]; // useEffect(() => {
+  //   reset(cleanInputArray(value, defaultValues, flow, schema))
+  //   setReset(true)
+  // }, [reset])
 
-  useEffect(function () {
-    _reset(cleanInputArray(value, defaultValues, flow, schema));
 
-    setReset(true);
-  }, [_reset]);
   useEffect(function () {
-    initialReseted && trigger();
+    trigger();
   }, [trigger, initialReseted]);
   var _handleSubmit = methods.handleSubmit,
-      _methods$formState = methods.formState,
-      errors = _methods$formState.errors,
-      dirtyFields = _methods$formState.dirtyFields,
+      _methods$formState = methods.formState;
+      _methods$formState.errors;
+      var dirtyFields = _methods$formState.dirtyFields,
       _reset = methods.reset,
       trigger = methods.trigger,
       getValues = methods.getValues,
@@ -29327,7 +29363,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
   var prev = usePrevious(value);
   var prevSchema = usePrevious(schema);
   useEffect(function () {
-    if (!deepEqual(value, prev) || !deepEqual(schema, prevSchema)) {
+    if (prev && prevSchema && !deepEqual(value, prev) || !deepEqual(schema, prevSchema)) {
       _reset(_objectSpread2$1({}, cleanInputArray(value, defaultValues, flow, schema)));
     }
   }, [value, schema]);
@@ -29380,9 +29416,6 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
       return null;
     }
 
-    _typeof$1(entry) === 'object' ? undefined : entry.split('.').reduce(function (object, key) {
-      return object && object[key];
-    }, errors);
     var visibleStep = option(step).map(function (s) {
       return s.visible;
     }).map(function (visible) {
@@ -29670,9 +29703,10 @@ var Step = function Step(_ref8) {
               step: step,
               entry: entry,
               errorDisplayed: errorDisplayed
-            }, /*#__PURE__*/React.createElement(SelectInput, {
+            }, /*#__PURE__*/React.createElement(SelectInput, _extends({
               className: classNames(classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-              disabled: functionalProperty(entry, step.disabled),
+              disabled: functionalProperty(entry, step.disabled)
+            }, step.props, {
               possibleValues: step.options,
               httpClient: httpClient,
               isMulti: step.isMulti,
@@ -29680,7 +29714,7 @@ var Step = function Step(_ref8) {
               transformer: step.transformer,
               buttons: step.format === format.buttonsSelect,
               optionsFrom: step.optionsFrom
-            }));
+            })));
           }
 
         default:
@@ -29704,8 +29738,9 @@ var Step = function Step(_ref8) {
             step: step,
             entry: entry,
             errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React.createElement(SelectInput, {
-            className: classNames(classes.content, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+          }, /*#__PURE__*/React.createElement(SelectInput, _extends({
+            className: classNames(classes.content, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
             isMulti: step.isMulti,
@@ -29714,7 +29749,7 @@ var Step = function Step(_ref8) {
             transformer: step.transformer,
             buttons: step.format === format.buttonsSelect,
             optionsFrom: step.optionsFrom
-          }));
+          })));
 
         default:
           return /*#__PURE__*/React.createElement(ControlledInput, {
@@ -29730,7 +29765,6 @@ var Step = function Step(_ref8) {
 
     case type.bool:
       return /*#__PURE__*/React.createElement(ControlledInput, {
-        defaultValue: defaultValue,
         step: step,
         entry: entry,
         errorDisplayed: errorDisplayed
@@ -29747,8 +29781,9 @@ var Step = function Step(_ref8) {
             step: step,
             entry: entry,
             errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React.createElement(SelectInput, {
-            className: classNames(classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+          }, /*#__PURE__*/React.createElement(SelectInput, _extends({
+            className: classNames(classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
             isMulti: step.isMulti,
@@ -29757,7 +29792,7 @@ var Step = function Step(_ref8) {
             transformer: step.transformer,
             buttons: step.format === format.buttonsSelect,
             optionsFrom: step.optionsFrom
-          }));
+          })));
 
         case format.form:
           //todo: disabled ?
@@ -30032,7 +30067,7 @@ var ArrayStep = function ArrayStep(_ref11) {
 };
 
 var NestedForm = function NestedForm(_ref12) {
-  var _classNames17;
+  var _step$conditionalSche, _classNames17;
 
   var schema = _ref12.schema,
       flow = _ref12.flow,
@@ -30049,8 +30084,6 @@ var NestedForm = function NestedForm(_ref12) {
       getValues = _useFormContext4.getValues,
       setValue = _useFormContext4.setValue,
       watch = _useFormContext4.watch;
-      _useFormContext4.trigger;
-      _useFormContext4.formState;
 
   var _useState7 = useState(!!step.collapsed),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -30058,6 +30091,7 @@ var NestedForm = function NestedForm(_ref12) {
       setCollapsed = _useState8[1];
 
   var classes = useCustomStyle();
+  useWatch(step === null || step === void 0 ? void 0 : (_step$conditionalSche = step.conditionalSchema) === null || _step$conditionalSche === void 0 ? void 0 : _step$conditionalSche.ref);
   var schemaAndFlow = option(step.conditionalSchema).map(function (condiSchema) {
     var ref = option(condiSchema.ref).map(function (ref) {
       return getValues(ref);
@@ -30073,9 +30107,16 @@ var NestedForm = function NestedForm(_ref12) {
         return s.condition === ref;
       }
     });
-    return option(filterSwitch).getOrElse(condiSchema["switch"].find(function (s) {
+    var schemaAndFlow = option(filterSwitch).orElse(condiSchema["switch"].find(function (s) {
       return s["default"];
-    }));
+    })).getOrElse({
+      schema: {},
+      flow: []
+    });
+    return {
+      schema: schemaAndFlow.schema,
+      flow: schemaAndFlow.flow || Object.keys(schemaAndFlow.schema)
+    };
   }).getOrElse({
     schema: schema,
     flow: flow
@@ -30117,7 +30158,7 @@ var NestedForm = function NestedForm(_ref12) {
   }, []);
   var bordered = computedSandF.filter(function (x) {
     return x.visibleStep;
-  }).length > 1 && step.label !== null;
+  }).length >= 1 && step.label !== null;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames((_classNames17 = {}, _defineProperty$1(_classNames17, classes.nestedform__border, bordered), _defineProperty$1(_classNames17, classes.border__error, !!errorDisplayed), _classNames17)),
     style: {

package/lib/index.js

@@ -108,7 +108,8 @@ var _matches = function matches() {
   var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This field does not match the pattern";
   return function (r) {
     return r.matches(regexp, {
-      message: message
+      message: message,
+      excludeEmptyString: false
     });
   };
 }; //string & number
@@ -249,7 +250,7 @@ var _oneOf = function oneOf(arrayOfValues) {
   return function (r) {
     return r.oneOf(arrayOfValues.map(maybeRef), message);
   };
-};
+}; //todo: rename by notOneOf
 
 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(', '));
@@ -970,6 +971,9 @@ var arrayFlatten = function arrayFlatten(array) {
 
   return array;
 };
+var isDefined = function isDefined(value) {
+  return value !== null && value !== undefined;
+};
 
 var valueToSelectOption = function valueToSelectOption(value) {
   var possibleValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -1004,6 +1008,9 @@ var valueToSelectOption = function valueToSelectOption(value) {
 };
 
 var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, _) {
+  var _useFormContext = reactHookForm.useFormContext(),
+      getValues = _useFormContext.getValues;
+
   var classes = useCustomStyle();
   var possibleValues = (props.possibleValues || []).map(function (v) {
     return props.transformer ? typeof props.transformer === 'function' ? props.transformer(v) : {
@@ -1043,9 +1050,24 @@ var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
 
       if (cond) {
         setLoading(true);
-        var promise = isPromise(props.optionsFrom) ? props.optionsFrom : props.httpClient(props.optionsFrom, 'GET').then(function (r) {
-          return r.json();
-        });
+        var promise;
+
+        if (isPromise(props.optionsFrom)) {
+          promise = props.optionsFrom;
+        } else if (typeof props.optionsFrom === 'function') {
+          var result = props.optionsFrom({
+            rawValues: getValues(),
+            value: getValues(props.id)
+          });
+          promise = isPromise(result) ? result : props.httpClient(result, 'GET').then(function (r) {
+            return r.json();
+          });
+        } else {
+          promise = props.httpClient(props.optionsFrom, 'GET').then(function (r) {
+            return r.json();
+          });
+        }
+
         promise.then(function (values) {
           return values.map(function (x) {
             return props.transformer ? props.transformer(x) : valueToSelectOption(x, values, props.isMulti, props.transformer);
@@ -1132,7 +1154,6 @@ var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
       value: value,
       isDisabled: props.disabled,
       placeholder: props.placeholder,
-      isClearable: true,
       onChange: onChange,
       options: values,
       onCreateOption: function onCreateOption(option) {
@@ -1147,7 +1168,6 @@ var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
       name: "".concat(props.label, "-search"),
       isLoading: loading,
       value: value,
-      isClearable: true,
       defaultValue: value,
       isDisabled: props.disabled,
       placeholder: props.placeholder,
@@ -28897,18 +28917,28 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
           return s.condition === ref;
         }
       });
-      return option(filterSwitch).getOrElse(condiSchema["switch"].find(function (s) {
+      return option(filterSwitch).orElse(condiSchema["switch"].find(function (s) {
         return s["default"];
-      }));
-    }).getOrElse({}),
+      })).getOrElse({
+        schema: {},
+        flow: []
+      });
+    }).getOrElse({
+      schema: {},
+      flow: []
+    }),
         schema = _option$map$getOrElse.schema,
         flow = _option$map$getOrElse.flow;
 
-    var _subResolver2 = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawData);
+    var realFlow = flow || Object.keys(schema);
 
-    return constraints.reduce(function (resolver, constraint) {
-      return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
-    }, yup__namespace.object().shape(_subResolver2.shape, dependencies));
+    if (realFlow.length) {
+      var _subResolver2 = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawData);
+
+      return constraints.reduce(function (resolver, constraint) {
+        return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
+      }, yup__namespace.object().shape(_subResolver2.shape, dependencies));
+    }
   } else {
     return constraints.reduce(function (resolver, constraint) {
       return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
@@ -28962,22 +28992,21 @@ var CustomizableInput$1 = /*#__PURE__*/React__default["default"].memo(function (
 
   return props.children;
 }, function (prev, next) {
-  if (next.render) {
+  if (next.render || next.conditionalSchema) {
     return false;
   }
 
   return prev.field.value === next.field.value && next.errorDisplayed === prev.errorDisplayed;
 });
 var ControlledInput = function ControlledInput(_ref) {
-  var defaultValue = _ref.defaultValue,
-      step = _ref.step,
+  var step = _ref.step,
       entry = _ref.entry,
       children = _ref.children,
       component = _ref.component,
       errorDisplayed = _ref.errorDisplayed;
 
   var _useController = reactHookForm.useController({
-    defaultValue: defaultValue || null,
+    defaultValue: isDefined(step.defaultValue) ? step.defaultValue : null,
     name: entry
   }),
       field = _useController.field;
@@ -29137,8 +29166,8 @@ var CustomizableInput = function CustomizableInput(props) {
   return props.children;
 };
 
-var defaultVal = function defaultVal(value, array, defaultValue) {
-  if (!!defaultValue) return defaultValue;
+var defaultVal = function defaultVal(value, array, defaultValue, type) {
+  if (isDefined(defaultValue)) return defaultValue;
   if (!!array) return [];
   return value;
 };
@@ -29175,9 +29204,17 @@ var cleanInputArray = function cleanInputArray(obj, defaultValues, flow, subSche
         key = _ref5[0],
         step = _ref5[1];
 
-    var v;
-    if (obj) v = obj[key];
-    if ((step.type === type.bool && v === null || step.type !== type.bool && !v) && defaultValues) v = defaultValues[key];
+    var v = null;
+
+    if (obj) {
+      v = obj[key];
+    }
+
+    var maybeDefaultValue = defaultValues[key];
+
+    if (!v && isDefined(maybeDefaultValue)) {
+      v = maybeDefaultValue;
+    }
 
     if (step.array && !step.render) {
       return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, (v || []).map(function (value) {
@@ -29339,21 +29376,20 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      initialReseted = _useState2[0],
-      setReset = _useState2[1];
+      initialReseted = _useState2[0];
+      _useState2[1]; // useEffect(() => {
+  //   reset(cleanInputArray(value, defaultValues, flow, schema))
+  //   setReset(true)
+  // }, [reset])
 
-  React.useEffect(function () {
-    _reset(cleanInputArray(value, defaultValues, flow, schema));
 
-    setReset(true);
-  }, [_reset]);
   React.useEffect(function () {
-    initialReseted && trigger();
+    trigger();
   }, [trigger, initialReseted]);
   var _handleSubmit = methods.handleSubmit,
-      _methods$formState = methods.formState,
-      errors = _methods$formState.errors,
-      dirtyFields = _methods$formState.dirtyFields,
+      _methods$formState = methods.formState;
+      _methods$formState.errors;
+      var dirtyFields = _methods$formState.dirtyFields,
       _reset = methods.reset,
       trigger = methods.trigger,
       getValues = methods.getValues,
@@ -29361,7 +29397,7 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
   var prev = usePrevious(value);
   var prevSchema = usePrevious(schema);
   React.useEffect(function () {
-    if (!deepEqual__default["default"](value, prev) || !deepEqual__default["default"](schema, prevSchema)) {
+    if (prev && prevSchema && !deepEqual__default["default"](value, prev) || !deepEqual__default["default"](schema, prevSchema)) {
       _reset(_objectSpread2$1({}, cleanInputArray(value, defaultValues, flow, schema)));
     }
   }, [value, schema]);
@@ -29414,9 +29450,6 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
       return null;
     }
 
-    _typeof$1(entry) === 'object' ? undefined : entry.split('.').reduce(function (object, key) {
-      return object && object[key];
-    }, errors);
     var visibleStep = option(step).map(function (s) {
       return s.visible;
     }).map(function (visible) {
@@ -29704,9 +29737,10 @@ var Step = function Step(_ref8) {
               step: step,
               entry: entry,
               errorDisplayed: errorDisplayed
-            }, /*#__PURE__*/React__default["default"].createElement(SelectInput, {
+            }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
               className: classNames__default["default"](classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
-              disabled: functionalProperty(entry, step.disabled),
+              disabled: functionalProperty(entry, step.disabled)
+            }, step.props, {
               possibleValues: step.options,
               httpClient: httpClient,
               isMulti: step.isMulti,
@@ -29714,7 +29748,7 @@ var Step = function Step(_ref8) {
               transformer: step.transformer,
               buttons: step.format === format.buttonsSelect,
               optionsFrom: step.optionsFrom
-            }));
+            })));
           }
 
         default:
@@ -29738,8 +29772,9 @@ var Step = function Step(_ref8) {
             step: step,
             entry: entry,
             errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, {
-            className: classNames__default["default"](classes.content, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
+            className: classNames__default["default"](classes.content, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
             isMulti: step.isMulti,
@@ -29748,7 +29783,7 @@ var Step = function Step(_ref8) {
             transformer: step.transformer,
             buttons: step.format === format.buttonsSelect,
             optionsFrom: step.optionsFrom
-          }));
+          })));
 
         default:
           return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
@@ -29764,7 +29799,6 @@ var Step = function Step(_ref8) {
 
     case type.bool:
       return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-        defaultValue: defaultValue,
         step: step,
         entry: entry,
         errorDisplayed: errorDisplayed
@@ -29781,8 +29815,9 @@ var Step = function Step(_ref8) {
             step: step,
             entry: entry,
             errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, {
-            className: classNames__default["default"](classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
+            className: classNames__default["default"](classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+          }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
             isMulti: step.isMulti,
@@ -29791,7 +29826,7 @@ var Step = function Step(_ref8) {
             transformer: step.transformer,
             buttons: step.format === format.buttonsSelect,
             optionsFrom: step.optionsFrom
-          }));
+          })));
 
         case format.form:
           //todo: disabled ?
@@ -30066,7 +30101,7 @@ var ArrayStep = function ArrayStep(_ref11) {
 };
 
 var NestedForm = function NestedForm(_ref12) {
-  var _classNames17;
+  var _step$conditionalSche, _classNames17;
 
   var schema = _ref12.schema,
       flow = _ref12.flow,
@@ -30083,8 +30118,6 @@ var NestedForm = function NestedForm(_ref12) {
       getValues = _useFormContext4.getValues,
       setValue = _useFormContext4.setValue,
       watch = _useFormContext4.watch;
-      _useFormContext4.trigger;
-      _useFormContext4.formState;
 
   var _useState7 = React.useState(!!step.collapsed),
       _useState8 = _slicedToArray(_useState7, 2),
@@ -30092,6 +30125,7 @@ var NestedForm = function NestedForm(_ref12) {
       setCollapsed = _useState8[1];
 
   var classes = useCustomStyle();
+  reactHookForm.useWatch(step === null || step === void 0 ? void 0 : (_step$conditionalSche = step.conditionalSchema) === null || _step$conditionalSche === void 0 ? void 0 : _step$conditionalSche.ref);
   var schemaAndFlow = option(step.conditionalSchema).map(function (condiSchema) {
     var ref = option(condiSchema.ref).map(function (ref) {
       return getValues(ref);
@@ -30107,9 +30141,16 @@ var NestedForm = function NestedForm(_ref12) {
         return s.condition === ref;
       }
     });
-    return option(filterSwitch).getOrElse(condiSchema["switch"].find(function (s) {
+    var schemaAndFlow = option(filterSwitch).orElse(condiSchema["switch"].find(function (s) {
       return s["default"];
-    }));
+    })).getOrElse({
+      schema: {},
+      flow: []
+    });
+    return {
+      schema: schemaAndFlow.schema,
+      flow: schemaAndFlow.flow || Object.keys(schemaAndFlow.schema)
+    };
   }).getOrElse({
     schema: schema,
     flow: flow
@@ -30151,7 +30192,7 @@ var NestedForm = function NestedForm(_ref12) {
   }, []);
   var bordered = computedSandF.filter(function (x) {
     return x.visibleStep;
-  }).length > 1 && step.label !== null;
+  }).length >= 1 && step.label !== null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]((_classNames17 = {}, _defineProperty$1(_classNames17, classes.nestedform__border, bordered), _defineProperty$1(_classNames17, classes.border__error, !!errorDisplayed), _classNames17)),
     style: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.53",
+  "version": "1.0.56",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/index.js",
@@ -56,7 +56,7 @@
     ]
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": "^17.0.2 || 18"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
@@ -98,7 +98,6 @@
     "@codemirror/theme-one-dark": "^0.19.1",
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@hookform/resolvers": "2.4.0",
-    "@maif/react-forms": "^1.0.37-rc.1",
     "@popperjs/core": "^2.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",