@maif/react-forms 1.1.1 → 1.1.2

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

@@ -27921,7 +27921,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 +27960,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;
     }
@@ -28186,7 +28185,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 +28214,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 +28225,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 +28246,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 +28260,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 +28280,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 +28308,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 +28399,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 +28455,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.d.ts

@@ -328,6 +328,7 @@ interface SchemaEntry {
         getValue: (entry: string) => any;
         setValue: (entry: string, value: any) => void;
         onChange: (v: any) => void;
+        informations?: Informations;
     }) => void;
     visibleOnCollapse?: boolean;
     addableDefaultValue: any;
@@ -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;

package/lib/index.js

@@ -27956,7 +27956,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 +27995,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;
     }
@@ -28221,7 +28220,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 +28249,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 +28260,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 +28281,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 +28295,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 +28315,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 +28343,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 +28434,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 +28490,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.2",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/index.d.ts",
@@ -121,7 +121,7 @@
     "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",