@maif/react-forms 1.1.0 → 1.1.3

package/README.md

@@ -100,6 +100,26 @@ export const Example = () => {
   ```javascript
   ({rawValues, value, setValue}) => if (value.length) { setValue('entry', false) }
   ```
+- **onAfterChange**: a callback function to the value change.
+  ```javascript
+  ({entry, value, rawValues, previousValue, getValue, setValue, onChange, informations}) => {
+    const otherEntryVal = getValue('otherEntry')
+    console.debug({entry, value, rawValues, otherEntryVal})
+    setValue('anotherEntry', v + 1)
+    const {path, parent, index} = informations
+    console.debug({path, parent, index})
+  }
+  ```
+  where :
+  - entry [string] is the updated entry of schema
+  - value [any] is the actual value of your entry
+  - previousValue [any] is the previous value of your entry
+  - rawValues [any] is the actual value of antire form
+  - getValue [function] is a function to get value of a form entry
+  - setValue [function] is a function to set value of a form entry
+  - onSave [function] is a function to update actual entry
+  - informations [Information] is an object to get information about the actual entry (path, index and parent informations)
+
 - **render**: a function to completely custom the rendering of form field 
   ```javascript
   ({rawValues, value, onChange, error, setValue, parent}) => <input type="text" className="is-invalid" value={value} onChange={e => onChange(e.target.value)} />

package/lib/esm/index.js

@@ -1,14 +1,15 @@
 import * as yup from 'yup';
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect, useImperativeHandle } from 'react';
+import React__default, { 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 { useFormContext, useController, useForm, FormProvider, Controller, useFieldArray, useWatch } from 'react-hook-form';
+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 CreatableSelect from 'react-select/creatable';
 import Select from 'react-select';
 import hash$1 from 'object-hash';
@@ -278,7 +279,7 @@ const useHashEffect = (func, deps) => {
         const depsHash = cleanHash(deps);
         const prevDepsHash = cleanHash(prevDeps.current);
         if (depsHash !== prevDepsHash) {
-            prevDeps.current = deps;
+            prevDeps.current = Object.assign({}, deps);
             func();
         }
     }, deps); /* FIXME deps or [deps] ? */
@@ -27921,7 +27922,7 @@ const ControlledInput = (inputProps) => {
             return prop;
         }
     };
-    const props = Object.assign(Object.assign(Object.assign({}, field), step.props), { id: entry, readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null, placeholder: step.placeholder, onChange: (e) => {
+    const props = Object.assign(Object.assign({ name: field.name }, step.props), { id: entry, readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null, placeholder: step.placeholder, onChange: (e) => {
             const value = (() => {
                 if (!e) {
                     if (step.type === type.bool ||
@@ -27958,27 +27959,45 @@ const usePrevious = (value) => {
     // Return previous value (happens before update in useEffect above)
     return ref.current;
 };
-const BasicWrapper = ({ entry, className, help, children, render, functionalProperty, label }) => {
+const BasicWrapper = ({ entry, children, render, functionalProperty, step }) => {
+    const { formState, watch } = useFormContext();
     if (typeof entry === 'object') {
         return children;
     }
-    const computedLabel = functionalProperty(entry, label === null ? null : label || entry);
+    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();
-    const { formState } = useFormContext();
     // 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;
     if (render) {
-        return render({ entry, label: computedLabel, error, help, children });
+        return render({ entry, label: computedLabel, error, help: step === null || step === void 0 ? void 0 : step.help, children });
     }
     return (React__default.createElement("div", { className: 'mrf-mt_10', style: { position: 'relative' } },
         computedLabel && React__default.createElement("label", { className: 'mrf-flex mrf-ai_center mrf-mb_5', htmlFor: entry },
             React__default.createElement("span", null, computedLabel),
-            help && React__default.createElement(React__default.Fragment, null,
+            (step === null || step === void 0 ? void 0 : step.help) && React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(ReactToolTip, { html: true, place: 'bottom', id: id }),
-                React__default.createElement("span", { className: 'mrf-flex mrf-ai_center', "data-html": true, "data-tip": help, "data-for": id },
+                React__default.createElement("span", { className: 'mrf-flex mrf-ai_center', "data-html": true, "data-tip": step === null || step === void 0 ? void 0 : step.help, "data-for": id },
                     React__default.createElement(HelpCircle, { style: { color: 'gray', width: 17, marginLeft: '.5rem', cursor: 'help' } })))),
         children,
         error && React__default.createElement("div", { className: classNames('mrf-feedback', { ['mrf-txt_red']: !!errorDisplayed }) }, error.message)));
@@ -28089,16 +28108,18 @@ const validate = (flow, schema, value) => {
         abortEarly: false
     });
 };
-const Watcher = ({ options, control, schema, onSubmit, handleSubmit }) => {
+const Watcher = React__default.memo(({ options, control, schema, onSubmit, handleSubmit }) => {
     const data = useWatch({ control });
+    const realSubmit = (d) => handleSubmit(() => {
+        onSubmit(d);
+    })();
+    const debouncedSubmit = useCallback(debounce(realSubmit, 250, { leading: true }), []);
     useHashEffect(() => {
-        if (options.autosubmit) {
-            handleSubmit(() => {
-                onSubmit(cleanOutputArray(data, schema));
-            })();
+        if (options === null || options === void 0 ? void 0 : options.autosubmit) {
+            debouncedSubmit(data);
         }
     }, [data]);
-    if (options.watch) {
+    if (options === null || options === void 0 ? void 0 : options.watch) {
         if (typeof options.watch === 'function') {
             options.watch(cleanOutputArray(data, schema));
         }
@@ -28109,7 +28130,9 @@ const Watcher = ({ options, control, schema, onSubmit, handleSubmit }) => {
         }
     }
     return null;
-};
+}, () => {
+    return true;
+});
 const Form = React__default.forwardRef(function Form({ schema, flow, value, inputWrapper, onSubmit, onError = () => { }, footer, style = {}, className, options = {}, nostyle }, ref) {
     const formFlow = flow || Object.keys(schema);
     const maybeCustomHttpClient = (url, method) => {
@@ -28179,25 +28202,7 @@ const Form = React__default.forwardRef(function Form({ schema, flow, value, inpu
                     console.error(`no step found for the entry "${entry}" in the given schema. Your form might not work properly. Please fix it`);
                     return null;
                 }
-                const visibleStep = option(step)
-                    .map((s) => s.visible)
-                    .map((visible) => {
-                    let value;
-                    switch (typeof visible) {
-                        case 'object':
-                            value = getValues(visible.ref);
-                            return option(visible.test).map(test => test(value, idx)).getOrElse(value);
-                        case 'boolean':
-                            return visible;
-                        default:
-                            return true;
-                    }
-                })
-                    .getOrElse(true);
-                if (!visibleStep) {
-                    return null;
-                }
-                return (React__default.createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, label: step === null || step === void 0 ? void 0 : step.label, help: step === null || step === void 0 ? void 0 : step.help, render: inputWrapper },
+                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 })));
             }),
             React__default.createElement(Footer, { render: footer, reset: () => reset(defaultValues), valid: handleSubmit(data => onSubmit(cleanOutputArray(data, schema)), onError), actions: options.actions }))));
@@ -28214,8 +28219,8 @@ const Footer = (props) => {
         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 Step = (props) => {
-    let { entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, parent, onAfterChange } = props;
-    const { formState: { errors, dirtyFields, touchedFields, isSubmitted }, control, trigger, getValues, setValue, watch, register } = useFormContext();
+    let { entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, parent, parentInformations } = 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) => {
@@ -28224,32 +28229,15 @@ const Step = (props) => {
                 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 visibleStep = option(stp)
-                .map(s => s.visible)
-                .map(visible => {
-                let value;
-                switch (typeof visible) {
-                    case 'object':
-                        value = getValues(visible.ref);
-                        return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                    case 'boolean':
-                        return visible;
-                    default:
-                        return true;
-                }
-            })
-                .getOrElse(true);
-            if (!visibleStep) {
-                return null;
-            }
-            return (React__default.createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, label: stp === null || stp === void 0 ? void 0 : stp.label, help: stp === null || stp === void 0 ? void 0 : stp.help, 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 })));
+            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();
@@ -28263,11 +28251,12 @@ const Step = (props) => {
             step.onAfterChange({
                 entry,
                 value: getValues(entry),
-                rawValues: newData,
+                rawValues: getValues(),
                 previousValue: currentData,
                 getValue: (e) => getValues(e),
                 setValue,
-                onChange: (v) => setValue(entry, v)
+                onChange: (v) => setValue(entry, v),
+                informations
             });
     }
     if (step.array) {
@@ -28276,7 +28265,7 @@ const Step = (props) => {
             }, error: !!error },
             React__default.createElement(ArrayStep, { entry: entry, step: step, disabled: functionalProperty(entry, step.disabled || false), 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 }));
+                    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 }));
                 }) })));
     }
     switch (step.type) {
@@ -28296,7 +28285,7 @@ const Step = (props) => {
                 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, transformer: step.transformer, buttons: step.format === format.buttonsSelect, optionsFrom: step.optionsFrom }))));
+                        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 }))));
                 }
                 default:
                     return (React__default.createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
@@ -28324,7 +28313,7 @@ const Step = (props) => {
                 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 }) } },
-                        React__default.createElement(NestedForm, { schema: step.schema, flow: flow, step: step, parent: entry, inputWrapper: inputWrapper, maybeCustomHttpClient: httpClient, value: getValues(entry) || defaultValue, index: index, functionalProperty: functionalProperty, errorDisplayed: errorDisplayed })));
+                        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 })}*/
@@ -28415,9 +28404,9 @@ const ArrayStep = ({ entry, step, component, disabled }) => {
                 }, disabled: disabled }, "Add"),
             error && React__default.createElement("div", { className: "mrf-invalid-feedback" }, error.message))));
 };
-const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient, errorDisplayed, value, step, functionalProperty, index }) => {
+const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient, errorDisplayed, value, step, functionalProperty, informations }) => {
     var _a;
-    const { getValues, setValue, watch, control, formState: { errors, dirtyFields, touchedFields } } = useFormContext();
+    const { getValues, setValue, control, formState: { errors, dirtyFields, touchedFields } } = useFormContext();
     const [collapsed, setCollapsed] = useState(!!step.collapsed);
     useWatch({ name: ((_a = step === null || step === void 0 ? void 0 : step.conditionalSchema) === null || _a === void 0 ? void 0 : _a.ref) || "", control });
     const schemaAndFlow = option(step.conditionalSchema)
@@ -28444,29 +28433,15 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
     }, [schemaAndFlow.schema]);
     const computedSandF = schemaAndFlow.flow.reduce((acc, entry) => {
         const step = (typeof entry === "string") ? schemaAndFlow.schema[entry] : schemaAndFlow.schema[entry.label];
-        const visibleStep = option(step)
-            .map(s => s.visible)
-            .map(visible => {
-            switch (typeof visible) {
-                case 'object':
-                    const value = watch(visible.ref);
-                    return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                case 'boolean':
-                    return visible;
-                default:
-                    return true;
-            }
-        })
-            .getOrElse(true);
-        return [...acc, { step, visibleStep, entry }];
+        return [...acc, { step, entry }];
     }, []);
-    const bordered = computedSandF.filter(x => x.visibleStep).length >= 1 && step.label !== null;
+    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' } },
         !!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, visibleStep, entry }, idx) => {
+        computedSandF.map(({ step, entry }, idx) => {
             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;
@@ -28479,31 +28454,13 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
                         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 visibleStep = option(stp)
-                        .map(s => s.visible)
-                        .map(visible => {
-                        let value;
-                        switch (typeof visible) {
-                            case 'object':
-                                value = getValues(visible.ref);
-                                return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                            case 'boolean':
-                                return visible;
-                            default:
-                                return true;
-                        }
-                    })
-                        .getOrElse(true);
-                    if (!visibleStep) {
-                        return null;
-                    }
-                    return (React__default.createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, help: stp === null || stp === void 0 ? void 0 : stp.help, render: inputWrapper },
+                    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) || !visibleStep }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, help: step.help, 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 })));
+            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 })));
         })));
 };
 function extractFlowString(entry) {

package/lib/index.d.ts

@@ -0,0 +1,367 @@
+/// <reference types="react" />
+import * as yup_lib_types from 'yup/lib/types';
+import * as yup from 'yup';
+import { AnySchema, StringSchema, NumberSchema, ArraySchema, TestFunction } from 'yup';
+import Reference from 'yup/lib/Reference';
+import * as yup_lib_object from 'yup/lib/object';
+import React from 'react';
+
+declare const type: {
+    readonly string: "string";
+    readonly number: "number";
+    readonly bool: "bool";
+    readonly date: "date";
+    readonly object: "object";
+    readonly file: "file";
+    readonly json: "json";
+};
+declare let typeValues: ("string" | "number" | "object" | "json" | "bool" | "date" | "file")[];
+declare type Type = typeof typeValues[number];
+
+declare const format: {
+    readonly array: "array";
+    readonly select: "select";
+    readonly code: "code";
+    readonly markdown: "markdown";
+    readonly text: "textarea";
+    readonly textarea: "textarea";
+    readonly email: "email";
+    readonly password: "password";
+    readonly hidden: "hidden";
+    readonly form: "form";
+    readonly buttonsSelect: "buttons";
+    readonly singleLineCode: "singleLineCode";
+};
+declare let formatValues: ("markdown" | "email" | "array" | "select" | "code" | "textarea" | "password" | "hidden" | "form" | "buttons" | "singleLineCode")[];
+declare type Format = typeof formatValues[number];
+
+declare type Constraint = (resolver: any, key: string, dependencies: any[]) => AnySchema;
+declare type NumberRef = Reference<number> | number;
+declare const required: (message?: string) => (r: AnySchema) => any;
+declare const url: (message?: string) => (r: StringSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined>;
+declare const email: (message?: string) => (r: StringSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined>;
+declare const uuid: (message?: string) => (r: StringSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined>;
+declare const matches: (regexp?: RegExp, message?: string) => (r: StringSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined>;
+declare const min: (ref: NumberRef, message?: string) => (r: StringSchema | NumberSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined> | yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const max: (ref: NumberRef, message?: string) => (r: StringSchema | NumberSchema) => yup.StringSchema<string | undefined, yup_lib_types.AnyObject, string | undefined> | yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const positive: (message?: string) => (r: NumberSchema) => yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const negative: (message?: string) => (r: NumberSchema) => yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const integer: (message?: string) => (r: NumberSchema) => yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const lessThan: (ref: NumberRef, message?: string) => (r: NumberSchema, key: any, dependencies: Array<[any, Reference]>) => yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const moreThan: (ref: NumberRef, message?: string) => (r: NumberSchema, key: any, dependencies: Array<[any, Reference]>) => yup.NumberSchema<number | undefined, yup_lib_types.AnyObject, number | undefined>;
+declare const length: (ref: NumberRef, message?: string) => (r: ArraySchema<any>) => yup.ArraySchema<any, yup_lib_types.AnyObject, any[] | undefined, any[] | undefined>;
+declare const supportedFormat: (arrayOfValues: string[], message?: string) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const unsupportedFormat: (arrayOfValues: string[], message?: string) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const maxSize: (ref: Reference, message?: string) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const test: (name: string, message: string | undefined, test: TestFunction<any, object>) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const when: (ref: string, test: TestFunction<any, object>, then?: Constraint[], otherwise?: Constraint[]) => (r: AnySchema, key: string, dependencies: any[]) => yup.AnySchema<any, any, any>;
+declare const oneOf: (arrayOfValues: any[], message?: string) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const blacklist: (arrayOfValues: any[], message?: string) => (r: AnySchema) => yup.AnySchema<any, any, any>;
+declare const ref: (ref: string) => Reference<unknown>;
+declare const jsonConstraints: Record<string, any>;
+declare type TConstraintType = keyof typeof jsonConstraints;
+
+type constraints_d_Constraint = Constraint;
+declare const constraints_d_required: typeof required;
+declare const constraints_d_url: typeof url;
+declare const constraints_d_email: typeof email;
+declare const constraints_d_uuid: typeof uuid;
+declare const constraints_d_matches: typeof matches;
+declare const constraints_d_min: typeof min;
+declare const constraints_d_max: typeof max;
+declare const constraints_d_positive: typeof positive;
+declare const constraints_d_negative: typeof negative;
+declare const constraints_d_integer: typeof integer;
+declare const constraints_d_lessThan: typeof lessThan;
+declare const constraints_d_moreThan: typeof moreThan;
+declare const constraints_d_length: typeof length;
+declare const constraints_d_supportedFormat: typeof supportedFormat;
+declare const constraints_d_unsupportedFormat: typeof unsupportedFormat;
+declare const constraints_d_maxSize: typeof maxSize;
+declare const constraints_d_test: typeof test;
+declare const constraints_d_when: typeof when;
+declare const constraints_d_oneOf: typeof oneOf;
+declare const constraints_d_blacklist: typeof blacklist;
+declare const constraints_d_ref: typeof ref;
+declare const constraints_d_jsonConstraints: typeof jsonConstraints;
+type constraints_d_TConstraintType = TConstraintType;
+declare namespace constraints_d {
+  export {
+    constraints_d_Constraint as Constraint,
+    constraints_d_required as required,
+    constraints_d_url as url,
+    constraints_d_email as email,
+    constraints_d_uuid as uuid,
+    constraints_d_matches as matches,
+    constraints_d_min as min,
+    constraints_d_max as max,
+    constraints_d_positive as positive,
+    constraints_d_negative as negative,
+    constraints_d_integer as integer,
+    constraints_d_lessThan as lessThan,
+    constraints_d_moreThan as moreThan,
+    constraints_d_length as length,
+    constraints_d_supportedFormat as supportedFormat,
+    constraints_d_unsupportedFormat as unsupportedFormat,
+    constraints_d_maxSize as maxSize,
+    constraints_d_test as test,
+    constraints_d_when as when,
+    constraints_d_oneOf as oneOf,
+    constraints_d_blacklist as blacklist,
+    constraints_d_ref as ref,
+    constraints_d_jsonConstraints as jsonConstraints,
+    constraints_d_TConstraintType as TConstraintType,
+  };
+}
+
+interface PropType {
+    onChange?: (v: boolean) => void;
+    value?: boolean;
+    readOnly?: boolean;
+}
+declare const BooleanInput: React.ForwardRefExoticComponent<PropType & React.RefAttributes<HTMLInputElement>>;
+
+declare const Collapse: (props: {
+    initCollapsed?: boolean;
+    collapsed?: boolean;
+    errored: boolean;
+    label?: React.ReactNode;
+    inline?: any;
+    children: React.ReactNode;
+    lineEnd?: boolean;
+}) => JSX.Element;
+
+declare type SelectOption = {
+    label: string;
+    value: any;
+};
+declare const SelectInput: <T extends {
+    [x: string]: any;
+}>(props: {
+    possibleValues?: T[] | undefined;
+    transformer?: {
+        label: string;
+        value: string;
+    } | ((v: T) => SelectOption) | undefined;
+    value?: any;
+    defaultValue?: any;
+    isMulti?: boolean | undefined;
+    optionsFrom?: string | Promise<T[]> | ((param: {
+        rawValues: object;
+        value: any;
+    }) => string | Promise<T[]>) | undefined;
+    fetchCondition?: (() => boolean) | undefined;
+    id?: string | undefined;
+    httpClient?: ((url: string, method: string) => Promise<Response>) | undefined;
+    onChange?: ((options: any[] | any) => void) | undefined;
+    onCreateOption?: ((option: string) => T) | undefined;
+    buttons: boolean;
+    disabled?: boolean | undefined;
+    createOption?: boolean | undefined;
+    label?: string | undefined;
+    placeholder?: React.ReactNode;
+    className: string;
+}) => JSX.Element;
+
+declare type InternalState = {
+    [x: string]: {
+        key: string;
+        value: any;
+    };
+};
+declare const ObjectInput: (props: {
+    value?: object | undefined;
+    onChange?: ((value: InternalState) => void) | undefined;
+    defaultKeyValue?: {
+        key: string;
+        value: string;
+    } | undefined;
+    className: string;
+    disabled?: boolean | undefined;
+    placeholderKey?: string | undefined;
+    placeholderValue?: string | undefined;
+}) => JSX.Element;
+
+declare type LanguageMode = "javascript" | "css" | "json" | "html" | "markdown";
+
+declare function CodeInput({ onChange, value, mode, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle, setRef }: {
+    onChange?: (v: string) => void;
+    value?: string;
+    mode?: LanguageMode;
+    tabSize?: number;
+    readOnly?: boolean;
+    showLinesNumber?: boolean;
+    highlightLine?: boolean;
+    themeStyle?: {
+        height: string;
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        minWidth: string;
+        maxWidth: string;
+    };
+    setRef?: (editor: any) => void;
+}): JSX.Element;
+
+declare const MarkdownInput: (props: {
+    value?: string | undefined;
+    preview?: boolean | undefined;
+    className: string;
+    readOnly?: boolean | undefined;
+    onChange?: ((value: string) => void) | undefined;
+}) => JSX.Element;
+
+declare function SingleLineCode({ onChange, value, mode, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle }: {
+    onChange?: (newValue: string) => void;
+    value?: string;
+    mode?: LanguageMode;
+    tabSize?: number;
+    readOnly?: boolean;
+    showLinesNumber?: boolean;
+    highlightLine?: boolean;
+    themeStyle?: {
+        height: string;
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        minWidth: string;
+        maxWidth: string;
+    };
+}): JSX.Element;
+
+interface OptionActionItem {
+    display?: boolean;
+    label?: string;
+}
+interface OptionActions {
+    reset?: OptionActionItem;
+    submit?: OptionActionItem;
+}
+declare type HttpClient = (url: string, method: string) => Promise<Response>;
+interface Option {
+    httpClient?: HttpClient;
+    watch?: boolean | ((param: any) => void);
+    autosubmit?: boolean;
+    actions?: OptionActions;
+    showErrorsOnStart?: boolean;
+}
+interface Schema {
+    [key: string]: SchemaEntry;
+}
+declare type SchemaRenderType = ({ rawValues, value, onChange, error, setValue, parent }: {
+    rawValues?: any;
+    value?: any;
+    onChange?: (param: object) => void;
+    error?: boolean;
+    parent?: string;
+    setValue?: (data: any) => void;
+}) => JSX.Element;
+interface ConditionnalSchemaElement {
+    default?: boolean;
+    condition?: ({ rawValues, ref }: {
+        rawValues: {
+            [x: string]: any;
+        };
+        ref: any;
+    }) => boolean | any;
+    schema: Schema;
+    flow: Array<FlowObject | string>;
+}
+interface ConditionnalSchema {
+    ref: string;
+    switch: ConditionnalSchemaElement[];
+}
+interface SchemaEntry {
+    schema?: Schema;
+    type: Type;
+    format?: Format;
+    array?: boolean;
+    createOption?: boolean;
+    onCreateOption?: (option: string) => any;
+    isMulti?: boolean;
+    defaultKeyValue?: object;
+    visible?: boolean | {
+        ref: string;
+        test: (b: any, idx?: number) => boolean;
+    };
+    disabled?: boolean | ((prop: {
+        rawValues: {
+            [x: string]: any;
+        };
+        value: any;
+    }) => boolean);
+    label?: React.ReactNode | ((prop: {
+        rawValues: {
+            [x: string]: any;
+        };
+        value: any;
+    }) => React.ReactNode);
+    placeholder?: string;
+    defaultValue?: any;
+    help?: string;
+    className?: string;
+    style?: object;
+    onChange?: (param: object) => void;
+    render?: SchemaRenderType;
+    itemRender?: SchemaRenderType;
+    props?: object;
+    options?: Array<any | {
+        label: string;
+        value: any;
+    }>;
+    optionsFrom?: string;
+    transformer?: ((v: any) => SelectOption) | {
+        label: string;
+        value: string;
+    };
+    conditionalSchema?: ConditionnalSchema;
+    constraints?: Array<Constraint | {
+        type: TConstraintType;
+        message?: string;
+    }>;
+    flow?: Array<string | FlowObject>;
+    onAfterChange?: (obj: {
+        entry: string;
+        value: object;
+        rawValues: object;
+        previousValue?: object;
+        getValue: (entry: string) => any;
+        setValue: (entry: string, value: any) => void;
+        onChange: (v: any) => void;
+        informations?: Informations;
+    }) => void;
+    visibleOnCollapse?: boolean;
+    addableDefaultValue?: any;
+    collapsed?: boolean;
+    collapsable?: boolean;
+}
+interface FlowObject {
+    label: string;
+    flow: Flow;
+    collapse: boolean;
+}
+declare type Flow = Array<string | FlowObject>;
+interface Informations {
+    path: string;
+    parent?: Informations;
+    index?: number;
+}
+declare const validate: (flow: string[], schema: Schema, value: object) => Promise<yup_lib_object.AssertsShape<yup_lib_object.Assign<yup_lib_object.ObjectShape, yup_lib_object.ObjectShape>>>;
+declare const Form: React.ForwardRefExoticComponent<{
+    schema: Schema;
+    flow: Array<string | FlowObject>;
+    value?: object | undefined;
+    inputWrapper?: ((props: object) => JSX.Element) | undefined;
+    onSubmit: (obj: object) => void;
+    onError?: (() => void) | undefined;
+    footer?: ((props: {
+        reset: () => void;
+        valid: () => void;
+    }) => JSX.Element) | undefined;
+    style?: object | undefined;
+    className?: string | undefined;
+    options?: Option | undefined;
+    nostyle: boolean;
+} & React.RefAttributes<unknown>>;
+
+export { BooleanInput, CodeInput, Collapse, ConditionnalSchema, Flow, Form, Format, MarkdownInput, ObjectInput, Schema, SchemaEntry, SelectInput, SelectOption, SingleLineCode, Type, constraints_d as constraints, format, type, validate };

package/lib/index.js

@@ -12,6 +12,7 @@ var reactHookForm = require('react-hook-form');
 var reactRainbowComponents = require('react-rainbow-components');
 var ReactToolTip = require('react-tooltip');
 var uuid$1 = require('uuid');
+var debounce = require('lodash.debounce');
 var CreatableSelect = require('react-select/creatable');
 var Select = require('react-select');
 var hash$1 = require('object-hash');
@@ -46,6 +47,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var deepEqual__default = /*#__PURE__*/_interopDefaultLegacy(deepEqual);
 var ReactToolTip__default = /*#__PURE__*/_interopDefaultLegacy(ReactToolTip);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var CreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(CreatableSelect);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash$1);
@@ -313,7 +315,7 @@ const useHashEffect = (func, deps) => {
         const depsHash = cleanHash(deps);
         const prevDepsHash = cleanHash(prevDeps.current);
         if (depsHash !== prevDepsHash) {
-            prevDeps.current = deps;
+            prevDeps.current = Object.assign({}, deps);
             func();
         }
     }, deps); /* FIXME deps or [deps] ? */
@@ -27956,7 +27958,7 @@ const ControlledInput = (inputProps) => {
             return prop;
         }
     };
-    const props = Object.assign(Object.assign(Object.assign({}, field), step.props), { id: entry, readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null, placeholder: step.placeholder, onChange: (e) => {
+    const props = Object.assign(Object.assign({ name: field.name }, step.props), { id: entry, readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null, placeholder: step.placeholder, onChange: (e) => {
             const value = (() => {
                 if (!e) {
                     if (step.type === type.bool ||
@@ -27993,27 +27995,45 @@ const usePrevious = (value) => {
     // Return previous value (happens before update in useEffect above)
     return ref.current;
 };
-const BasicWrapper = ({ entry, className, help, children, render, functionalProperty, label }) => {
+const BasicWrapper = ({ entry, children, render, functionalProperty, step }) => {
+    const { formState, watch } = reactHookForm.useFormContext();
     if (typeof entry === 'object') {
         return children;
     }
-    const computedLabel = functionalProperty(entry, label === null ? null : label || entry);
+    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 = uuid$1.v4();
-    const { formState } = reactHookForm.useFormContext();
     // 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;
     if (render) {
-        return render({ entry, label: computedLabel, error, help, children });
+        return render({ entry, label: computedLabel, error, help: step === null || step === void 0 ? void 0 : step.help, children });
     }
     return (React__default["default"].createElement("div", { className: 'mrf-mt_10', style: { position: 'relative' } },
         computedLabel && React__default["default"].createElement("label", { className: 'mrf-flex mrf-ai_center mrf-mb_5', htmlFor: entry },
             React__default["default"].createElement("span", null, computedLabel),
-            help && React__default["default"].createElement(React__default["default"].Fragment, null,
+            (step === null || step === void 0 ? void 0 : step.help) && React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement(ReactToolTip__default["default"], { html: true, place: 'bottom', id: id }),
-                React__default["default"].createElement("span", { className: 'mrf-flex mrf-ai_center', "data-html": true, "data-tip": help, "data-for": id },
+                React__default["default"].createElement("span", { className: 'mrf-flex mrf-ai_center', "data-html": true, "data-tip": step === null || step === void 0 ? void 0 : step.help, "data-for": id },
                     React__default["default"].createElement(reactFeather.HelpCircle, { style: { color: 'gray', width: 17, marginLeft: '.5rem', cursor: 'help' } })))),
         children,
         error && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-feedback', { ['mrf-txt_red']: !!errorDisplayed }) }, error.message)));
@@ -28124,16 +28144,18 @@ const validate = (flow, schema, value) => {
         abortEarly: false
     });
 };
-const Watcher = ({ options, control, schema, onSubmit, handleSubmit }) => {
+const Watcher = React__default["default"].memo(({ options, control, schema, onSubmit, handleSubmit }) => {
     const data = reactHookForm.useWatch({ control });
+    const realSubmit = (d) => handleSubmit(() => {
+        onSubmit(d);
+    })();
+    const debouncedSubmit = React.useCallback(debounce__default["default"](realSubmit, 250, { leading: true }), []);
     useHashEffect(() => {
-        if (options.autosubmit) {
-            handleSubmit(() => {
-                onSubmit(cleanOutputArray(data, schema));
-            })();
+        if (options === null || options === void 0 ? void 0 : options.autosubmit) {
+            debouncedSubmit(data);
         }
     }, [data]);
-    if (options.watch) {
+    if (options === null || options === void 0 ? void 0 : options.watch) {
         if (typeof options.watch === 'function') {
             options.watch(cleanOutputArray(data, schema));
         }
@@ -28144,7 +28166,9 @@ const Watcher = ({ options, control, schema, onSubmit, handleSubmit }) => {
         }
     }
     return null;
-};
+}, () => {
+    return true;
+});
 const Form = React__default["default"].forwardRef(function Form({ schema, flow, value, inputWrapper, onSubmit, onError = () => { }, footer, style = {}, className, options = {}, nostyle }, ref) {
     const formFlow = flow || Object.keys(schema);
     const maybeCustomHttpClient = (url, method) => {
@@ -28214,25 +28238,7 @@ const Form = React__default["default"].forwardRef(function Form({ schema, flow,
                     console.error(`no step found for the entry "${entry}" in the given schema. Your form might not work properly. Please fix it`);
                     return null;
                 }
-                const visibleStep = option(step)
-                    .map((s) => s.visible)
-                    .map((visible) => {
-                    let value;
-                    switch (typeof visible) {
-                        case 'object':
-                            value = getValues(visible.ref);
-                            return option(visible.test).map(test => test(value, idx)).getOrElse(value);
-                        case 'boolean':
-                            return visible;
-                        default:
-                            return true;
-                    }
-                })
-                    .getOrElse(true);
-                if (!visibleStep) {
-                    return null;
-                }
-                return (React__default["default"].createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, label: step === null || step === void 0 ? void 0 : step.label, help: step === null || step === void 0 ? void 0 : step.help, render: inputWrapper },
+                return (React__default["default"].createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, render: inputWrapper, step: step },
                     React__default["default"].createElement(Step, { key: idx, entry: entry, step: step, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty })));
             }),
             React__default["default"].createElement(Footer, { render: footer, reset: () => reset(defaultValues), valid: handleSubmit(data => onSubmit(cleanOutputArray(data, schema)), onError), actions: options.actions }))));
@@ -28249,8 +28255,8 @@ const Footer = (props) => {
         isSubmitDisplayed && React__default["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 Step = (props) => {
-    let { entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, parent, onAfterChange } = props;
-    const { formState: { errors, dirtyFields, touchedFields, isSubmitted }, control, trigger, getValues, setValue, watch, register } = reactHookForm.useFormContext();
+    let { entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, parent, parentInformations } = props;
+    const { formState: { errors, dirtyFields, touchedFields, isSubmitted }, control, getValues, setValue, watch } = reactHookForm.useFormContext();
     if (entry && typeof entry === 'object') {
         const errored = extractFlowString(entry).some(step => !!errors[step] && (dirtyFields[step] || touchedFields[step]));
         return (React__default["default"].createElement(Collapse, Object.assign({}, entry, { errored: errored }), entry.flow.map((en, entryIdx) => {
@@ -28259,32 +28265,15 @@ const Step = (props) => {
                 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 visibleStep = option(stp)
-                .map(s => s.visible)
-                .map(visible => {
-                let value;
-                switch (typeof visible) {
-                    case 'object':
-                        value = getValues(visible.ref);
-                        return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                    case 'boolean':
-                        return visible;
-                    default:
-                        return true;
-                }
-            })
-                .getOrElse(true);
-            if (!visibleStep) {
-                return null;
-            }
-            return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, label: stp === null || stp === void 0 ? void 0 : stp.label, help: stp === null || stp === void 0 ? void 0 : stp.help, render: inputWrapper },
-                React__default["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 })));
+            return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, render: inputWrapper },
+                React__default["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();
@@ -28298,11 +28287,12 @@ const Step = (props) => {
             step.onAfterChange({
                 entry,
                 value: getValues(entry),
-                rawValues: newData,
+                rawValues: getValues(),
                 previousValue: currentData,
                 getValue: (e) => getValues(e),
                 setValue,
-                onChange: (v) => setValue(entry, v)
+                onChange: (v) => setValue(entry, v),
+                informations
             });
     }
     if (step.array) {
@@ -28311,7 +28301,7 @@ const Step = (props) => {
             }, error: !!error },
             React__default["default"].createElement(ArrayStep, { entry: entry, step: step, disabled: functionalProperty(entry, step.disabled || false), component: ((props, idx) => {
                     var _a;
-                    return (React__default["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 }));
+                    return (React__default["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 }));
                 }) })));
     }
     switch (step.type) {
@@ -28331,7 +28321,7 @@ const Step = (props) => {
                 case format.buttonsSelect:
                 case format.select: {
                     return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
-                        React__default["default"].createElement(SelectInput, Object.assign({ className: classNames__default["default"]('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, transformer: step.transformer, buttons: step.format === format.buttonsSelect, optionsFrom: step.optionsFrom }))));
+                        React__default["default"].createElement(SelectInput, Object.assign({ className: classNames__default["default"]('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 }))));
                 }
                 default:
                     return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
@@ -28359,7 +28349,7 @@ const Step = (props) => {
                 case format.form: //todo: disabled ?
                     const flow = option(step.flow).getOrElse(option(step.schema).map(s => Object.keys(s)).getOrElse([]));
                     return (React__default["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 }) } },
-                        React__default["default"].createElement(NestedForm, { schema: step.schema, flow: flow, step: step, parent: entry, inputWrapper: inputWrapper, maybeCustomHttpClient: httpClient, value: getValues(entry) || defaultValue, index: index, functionalProperty: functionalProperty, errorDisplayed: errorDisplayed })));
+                        React__default["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["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, component: (field, props) => (React__default["default"].createElement(CodeInput, Object.assign({}, props, { 
                             /* TODO className={classNames(step.className, { 'mrf-input__invalid': !!error })}*/
@@ -28450,9 +28440,9 @@ const ArrayStep = ({ entry, step, component, disabled }) => {
                 }, disabled: disabled }, "Add"),
             error && React__default["default"].createElement("div", { className: "mrf-invalid-feedback" }, error.message))));
 };
-const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient, errorDisplayed, value, step, functionalProperty, index }) => {
+const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient, errorDisplayed, value, step, functionalProperty, informations }) => {
     var _a;
-    const { getValues, setValue, watch, control, formState: { errors, dirtyFields, touchedFields } } = reactHookForm.useFormContext();
+    const { getValues, setValue, control, formState: { errors, dirtyFields, touchedFields } } = reactHookForm.useFormContext();
     const [collapsed, setCollapsed] = React.useState(!!step.collapsed);
     reactHookForm.useWatch({ name: ((_a = step === null || step === void 0 ? void 0 : step.conditionalSchema) === null || _a === void 0 ? void 0 : _a.ref) || "", control });
     const schemaAndFlow = option(step.conditionalSchema)
@@ -28479,29 +28469,15 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
     }, [schemaAndFlow.schema]);
     const computedSandF = schemaAndFlow.flow.reduce((acc, entry) => {
         const step = (typeof entry === "string") ? schemaAndFlow.schema[entry] : schemaAndFlow.schema[entry.label];
-        const visibleStep = option(step)
-            .map(s => s.visible)
-            .map(visible => {
-            switch (typeof visible) {
-                case 'object':
-                    const value = watch(visible.ref);
-                    return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                case 'boolean':
-                    return visible;
-                default:
-                    return true;
-            }
-        })
-            .getOrElse(true);
-        return [...acc, { step, visibleStep, entry }];
+        return [...acc, { step, entry }];
     }, []);
-    const bordered = computedSandF.filter(x => x.visibleStep).length >= 1 && step.label !== null;
+    const bordered = computedSandF.length >= 1 && step.label !== null;
     return (React__default["default"].createElement("div", { className: classNames__default["default"]({ ['mrf-nestedform__border']: bordered, ['mrf-border__error']: !!errorDisplayed }), style: { position: 'relative' } },
         !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed &&
             React__default["default"].createElement(reactFeather.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["default"].createElement(reactFeather.ChevronUp, { size: 30, className: 'mrf-cursor_pointer', style: { position: 'absolute', top: -35, right: 0, zIndex: 100 }, strokeWidth: "2", onClick: () => setCollapsed(!collapsed) }),
-        computedSandF.map(({ step, visibleStep, entry }, idx) => {
+        computedSandF.map(({ step, entry }, idx) => {
             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;
@@ -28514,31 +28490,13 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
                         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 visibleStep = option(stp)
-                        .map(s => s.visible)
-                        .map(visible => {
-                        let value;
-                        switch (typeof visible) {
-                            case 'object':
-                                value = getValues(visible.ref);
-                                return option(visible.test).map(test => test(value, index)).getOrElse(value);
-                            case 'boolean':
-                                return visible;
-                            default:
-                                return true;
-                        }
-                    })
-                        .getOrElse(true);
-                    if (!visibleStep) {
-                        return null;
-                    }
-                    return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, help: stp === null || stp === void 0 ? void 0 : stp.help, render: inputWrapper },
+                    return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, render: inputWrapper },
                         React__default["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["default"].createElement(BasicWrapper, { key: `${entry}.${idx}`, className: classNames__default["default"]({ ['mrf-display__none']: (collapsed && !step.visibleOnCollapse) || !visibleStep }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, help: step.help, render: inputWrapper },
-                React__default["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 })));
+            return (React__default["default"].createElement(BasicWrapper, { key: `${entry}.${idx}`, className: classNames__default["default"]({ ['mrf-display__none']: (collapsed && !step.visibleOnCollapse) }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, step: step, render: inputWrapper },
+                React__default["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 })));
         })));
 };
 function extractFlowString(entry) {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",
-  "types": "lib/index.js",
+  "types": "lib/index.d.ts",
   "source": "src/index.ts",
   "author": "MAIF team",
   "keywords": [
@@ -32,8 +32,8 @@
     "README.md"
   ],
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
+    "build": "tsc --emitDeclarationOnly && rollup -c",
+    "dev": "tsc --emitDeclarationOnly && rollup -c -w",
     "test": "jest",
     "tdd": "jest --watch"
   },
@@ -68,6 +68,14 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.24",
+    "@types/lodash.debounce": "4.0.7",
+    "@types/node": "^16.3.0",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
     "@types/object-hash": "^2.2.1",
     "@types/showdown": "^2.0.0",
     "@types/uuid": "^8.3.4",
@@ -87,6 +95,7 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
@@ -107,20 +116,14 @@
     "@codemirror/theme-one-dark": "^0.19.1",
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@hookform/resolvers": "2.4.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^16.3.0",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
     "classnames": "2.3.0",
     "fast-deep-equal": "^3.1.3",
     "highlight.js": "^11.5.1",
+    "lodash.debounce": "4.0.8",
     "moment": "2.29.1",
     "object-hash": "3.0.0",
     "react-feather": "2.0.9",
-    "react-hook-form": "7.29.0",
+    "react-hook-form": "7.32.1",
     "react-rainbow-components": "1.26.0",
     "react-select": "5.2.1",
     "react-tooltip": "4.2.21",