@maif/react-forms 1.1.1 → 1.1.4

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';
@@ -177,13 +178,18 @@ const BooleanInput = React__default.forwardRef(({ onChange, value, readOnly }, r
             onChange === null || onChange === void 0 ? void 0 : onChange(value);
         }
     };
-    return (React__default.createElement("div", { className: classNames({ ['mrf-cursor_pointer']: !readOnly, ['mrf-cursor_not_allowed']: readOnly }) },
-        !!value && React__default.createElement("div", { className: classNames('mrf-content_switch_button_on'), onClick: () => handleClick(false) },
-            React__default.createElement("div", { className: classNames('mrf-switch_button_on') })),
-        !value && value !== null && React__default.createElement("div", { className: classNames('mrf-content_switch_button_off'), onClick: () => handleClick(true) },
-            React__default.createElement("div", { className: classNames('mrf-switch_button_off') })),
-        value === null && React__default.createElement("div", { className: classNames('mrf-content_switch_button_null'), onClick: () => handleClick(true) },
-            React__default.createElement("div", { className: classNames('mrf-switch_button_null') }))));
+    let className = classNames("mrf-content_switch", {
+        "mrf-content_switch_button_on": !!value,
+        "mrf-content_switch_button_off": !value && value !== null,
+        "mrf-content_switch_button_null": value === null,
+        "mrf-cursor_pointer": !readOnly,
+        "mrf-cursor_not_allowed": readOnly,
+    });
+    let callback = () => handleClick(true);
+    if (!!value) {
+        callback = () => handleClick(false);
+    }
+    return React__default.createElement("input", { type: "checkbox", className: className, onChange: callback });
 });
 
 const Collapse = (props) => {
@@ -278,7 +284,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 +27927,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 ||
@@ -27960,7 +27966,6 @@ const usePrevious = (value) => {
 };
 const BasicWrapper = ({ entry, children, render, functionalProperty, step }) => {
     const { formState, watch } = useFormContext();
-    console.debug({ entry, step });
     if (typeof entry === 'object') {
         return children;
     }
@@ -28108,16 +28113,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));
         }
@@ -28128,7 +28135,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) => {
@@ -28186,7 +28195,6 @@ const Form = React__default.forwardRef(function Form({ schema, flow, value, inpu
         trigger,
         methods: Object.assign(Object.assign({}, methods), { data: () => cleanOutputArray(getValues(), schema) })
     }));
-    console.debug({ formFlow });
     return (React__default.createElement(FormProvider, Object.assign({}, methods),
         React__default.createElement(Watcher, { options: options, control: methods.control, schema: schema, onSubmit: onSubmit, handleSubmit: handleSubmit }),
         React__default.createElement("form", { className: className || `mrf-pr_15 mrf-w_100`, onSubmit: handleSubmit(data => {
@@ -28216,8 +28224,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) => {
@@ -28227,13 +28235,14 @@ const Step = (props) => {
                 return null;
             }
             return (React__default.createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, render: inputWrapper },
-                React__default.createElement(Step, { entry: en, step: stp, schema: schema, inputWrapper: inputWrapper, httpClient: httpClient, defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue, functionalProperty: functionalProperty })));
+                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();
@@ -28247,11 +28256,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) {
@@ -28260,7 +28270,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) {
@@ -28280,7 +28290,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 },
@@ -28308,7 +28318,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 })}*/
@@ -28399,9 +28409,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)
@@ -28455,7 +28465,7 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
                 // TODO return collapse, then entry will always be a string in below return
             }
             return (React__default.createElement(BasicWrapper, { key: `${entry}.${idx}`, className: classNames({ ['mrf-display__none']: (collapsed && !step.visibleOnCollapse) }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, step: step, render: inputWrapper },
-                React__default.createElement(Step, { key: `step.${entry}.${idx}`, entry: `${parent}.${entry}`, realEntry: entry, step: schemaAndFlow.schema[entry], parent: parent, schema: schemaAndFlow.schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, defaultValue: value && value[entry], functionalProperty: functionalProperty })));
+                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.css

@@ -294,6 +294,10 @@
   margin-left: 5px;
 }
 
+.mrf-content_switch {
+  appearance: none;
+}
+
 .mrf-content_switch_button_on {
   width: 35px;
   height: 22px;
@@ -305,6 +309,18 @@
   justify-content: flex-end;
 }
 
+.mrf-content_switch_button_on::before {
+  content: "";
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  background-color: var(--form-bg-color, #fff);
+  border-radius: 20px;
+  border: 1px solid var(--success-hover-color, #1e7e34);
+  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
+  margin-top: -1px;
+}
+
 .mrf-content_switch_button_off {
   width: 35px;
   height: 22px;
@@ -316,6 +332,18 @@
   justify-content: flex-start;
 }
 
+.mrf-content_switch_button_off::before {
+  content: "";
+  background-color: var(--form-bg-color, #fff);
+  border-radius: 20px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--error-hover-color, #bd2130);
+  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
+  margin-top: -1px;
+}
+
 .mrf-content_switch_button_null {
   width: 35px;
   height: 22px;
@@ -327,34 +355,16 @@
   justify-content: flex-start;
 }
 
-.mrf-switch_button_on {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  background-color: var(--form-bg-color, #fff);
-  border-radius: 20px;
-  border: 1px solid var(--success-hover-color, #1e7e34);
-  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
-}
-
-.mrf-switch_button_off {
+.mrf-content_switch_button_null::before {
+  content: "";
   background-color: var(--form-bg-color, #fff);
   border-radius: 20px;
   cursor: pointer;
   width: 20px;
   height: 20px;
-  border: 1px solid var(--error-hover-color, #bd2130);
-  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
-}
-
-.mrf-switch_button_null {
-  background-color: var(--form-bg-color, #fff);
-  border-radius: 20px;
-  cursor: pointer;
-  width: 22px;
-  height: 22px;
   margin-top: -1px;
   margin-left: -1px;
   border: 1px solid var(--neutral-hover-color, #5c636a);
   box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
+  margin-top: -1px;
 }

package/lib/index.d.ts

@@ -138,7 +138,7 @@ declare type SelectOption = {
 declare const SelectInput: <T extends {
     [x: string]: any;
 }>(props: {
-    possibleValues: T[];
+    possibleValues?: T[] | undefined;
     transformer?: {
         label: string;
         value: string;
@@ -146,10 +146,10 @@ declare const SelectInput: <T extends {
     value?: any;
     defaultValue?: any;
     isMulti?: boolean | undefined;
-    optionsFrom: string | Promise<T[]> | ((param: {
+    optionsFrom?: string | Promise<T[]> | ((param: {
         rawValues: object;
         value: any;
-    }) => string | Promise<T[]>);
+    }) => string | Promise<T[]>) | undefined;
     fetchCondition?: (() => boolean) | undefined;
     id?: string | undefined;
     httpClient?: ((url: string, method: string) => Promise<Response>) | undefined;
@@ -302,24 +302,24 @@ interface SchemaEntry {
     className?: string;
     style?: object;
     onChange?: (param: object) => void;
-    render: SchemaRenderType;
+    render?: SchemaRenderType;
     itemRender?: SchemaRenderType;
-    props: object;
-    options: Array<any | {
+    props?: object;
+    options?: Array<any | {
         label: string;
         value: any;
     }>;
-    optionsFrom: string;
-    transformer: ((v: any) => SelectOption) | {
+    optionsFrom?: string;
+    transformer?: ((v: any) => SelectOption) | {
         label: string;
         value: string;
     };
-    conditionalSchema: ConditionnalSchema;
-    constraints: Array<Constraint | {
+    conditionalSchema?: ConditionnalSchema;
+    constraints?: Array<Constraint | {
         type: TConstraintType;
         message?: string;
     }>;
-    flow: Array<string | FlowObject>;
+    flow?: Array<string | FlowObject>;
     onAfterChange?: (obj: {
         entry: string;
         value: object;
@@ -328,9 +328,10 @@ interface SchemaEntry {
         getValue: (entry: string) => any;
         setValue: (entry: string, value: any) => void;
         onChange: (v: any) => void;
+        informations?: Informations;
     }) => void;
     visibleOnCollapse?: boolean;
-    addableDefaultValue: any;
+    addableDefaultValue?: any;
     collapsed?: boolean;
     collapsable?: boolean;
 }
@@ -340,6 +341,11 @@ interface FlowObject {
     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;
@@ -348,7 +354,10 @@ declare const Form: React.ForwardRefExoticComponent<{
     inputWrapper?: ((props: object) => JSX.Element) | undefined;
     onSubmit: (obj: object) => void;
     onError?: (() => void) | undefined;
-    footer?: ((props: object) => JSX.Element) | undefined;
+    footer?: ((props: {
+        reset: () => void;
+        valid: () => void;
+    }) => JSX.Element) | undefined;
     style?: object | undefined;
     className?: string | undefined;
     options?: Option | undefined;

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);
@@ -212,13 +214,18 @@ const BooleanInput = React__default["default"].forwardRef(({ onChange, value, re
             onChange === null || onChange === void 0 ? void 0 : onChange(value);
         }
     };
-    return (React__default["default"].createElement("div", { className: classNames__default["default"]({ ['mrf-cursor_pointer']: !readOnly, ['mrf-cursor_not_allowed']: readOnly }) },
-        !!value && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-content_switch_button_on'), onClick: () => handleClick(false) },
-            React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-switch_button_on') })),
-        !value && value !== null && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-content_switch_button_off'), onClick: () => handleClick(true) },
-            React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-switch_button_off') })),
-        value === null && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-content_switch_button_null'), onClick: () => handleClick(true) },
-            React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-switch_button_null') }))));
+    let className = classNames__default["default"]("mrf-content_switch", {
+        "mrf-content_switch_button_on": !!value,
+        "mrf-content_switch_button_off": !value && value !== null,
+        "mrf-content_switch_button_null": value === null,
+        "mrf-cursor_pointer": !readOnly,
+        "mrf-cursor_not_allowed": readOnly,
+    });
+    let callback = () => handleClick(true);
+    if (!!value) {
+        callback = () => handleClick(false);
+    }
+    return React__default["default"].createElement("input", { type: "checkbox", className: className, onChange: callback });
 });
 
 const Collapse = (props) => {
@@ -313,7 +320,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 +27963,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 ||
@@ -27995,7 +28002,6 @@ const usePrevious = (value) => {
 };
 const BasicWrapper = ({ entry, children, render, functionalProperty, step }) => {
     const { formState, watch } = reactHookForm.useFormContext();
-    console.debug({ entry, step });
     if (typeof entry === 'object') {
         return children;
     }
@@ -28143,16 +28149,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));
         }
@@ -28163,7 +28171,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) => {
@@ -28221,7 +28231,6 @@ const Form = React__default["default"].forwardRef(function Form({ schema, flow,
         trigger,
         methods: Object.assign(Object.assign({}, methods), { data: () => cleanOutputArray(getValues(), schema) })
     }));
-    console.debug({ formFlow });
     return (React__default["default"].createElement(reactHookForm.FormProvider, Object.assign({}, methods),
         React__default["default"].createElement(Watcher, { options: options, control: methods.control, schema: schema, onSubmit: onSubmit, handleSubmit: handleSubmit }),
         React__default["default"].createElement("form", { className: className || `mrf-pr_15 mrf-w_100`, onSubmit: handleSubmit(data => {
@@ -28251,8 +28260,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) => {
@@ -28262,13 +28271,14 @@ const Step = (props) => {
                 return null;
             }
             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 })));
+                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();
@@ -28282,11 +28292,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) {
@@ -28295,7 +28306,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) {
@@ -28315,7 +28326,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 },
@@ -28343,7 +28354,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 })}*/
@@ -28434,9 +28445,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)
@@ -28490,7 +28501,7 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
                 // 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) }), 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 })));
+                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,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/index.d.ts",
@@ -72,6 +72,7 @@
     "@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",
@@ -118,10 +119,11 @@
     "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",