intelicoreact 1.4.13 → 1.4.14

package/dist/Functions/useFormTools/index.js

@@ -1,30 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useFormTools;
-
 var _react = require("react");
-
 var _ArrayWithObjects = _interopRequireDefault(require("./form-drivers/ArrayWithObjects"));
-
 var _ObjectWithIterableObjects = _interopRequireDefault(require("./form-drivers/ObjectWithIterableObjects"));
-
 var _ObjectWithNamedKeyObjects = _interopRequireDefault(require("./form-drivers/ObjectWithNamedKeyObjects"));
-
 var _General = _interopRequireDefault(require("./functions/General"));
-
 var _RenderFields = _interopRequireDefault(require("./functions/RenderFields"));
-
 // eslint-disable-next-line no-unused-vars
+
 const DefaultFocusControllerProps = {
   setAutoFocus: true,
   onlyEmptyFieldAutoFocus: false
 };
-
 function useFormTools() {
   let {
     form,
@@ -36,7 +28,8 @@ function useFormTools() {
     FocusControllerProps = DefaultFocusControllerProps,
     goToNextFieldOnEnterPressed = true
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  FocusControllerProps = { ...DefaultFocusControllerProps,
+  FocusControllerProps = {
+    ...DefaultFocusControllerProps,
     ...FocusControllerProps
   };
   const FormDataDrivers = {
@@ -51,21 +44,16 @@ function useFormTools() {
       handlers: _ObjectWithNamedKeyObjects.default
     }
   };
-
   const getFormDataDriver = name => {
     var _FormDataDrivers$name, _Object$values$find;
-
     return FormDataDriver || ((_FormDataDrivers$name = FormDataDrivers[name]) === null || _FormDataDrivers$name === void 0 ? void 0 : _FormDataDrivers$name.handlers) || ((_Object$values$find = Object.values(FormDataDrivers).find(df => df.default === true)) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.handlers) || (() => ({}));
   };
-
   const getFormDataDriverInstance = function (name) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
-
     return getFormDataDriver(name)(...args);
   };
-
   const {
     getFieldClassName,
     updateFormField
@@ -84,11 +72,11 @@ function useFormTools() {
     form,
     setForm,
     FormFields
-  }); ///////////////////////////////////////////////////////////////
-  //--- OnChange Observer ---//--- START ---//
+  });
 
+  ///////////////////////////////////////////////////////////////
+  //--- OnChange Observer ---//--- START ---//
   const [onChangeObservers, setOnChangeObservers] = (0, _react.useState)({});
-
   const addOnChangeObserver = (key, cb) => {
     let observerId = null;
     setOnChangeObservers(state => {
@@ -100,7 +88,6 @@ function useFormTools() {
     });
     return observerId;
   };
-
   const removeOnChangeObserver = (key, id) => {
     setOnChangeObservers(state => {
       //Set Default Value
@@ -109,7 +96,6 @@ function useFormTools() {
       return state;
     });
   };
-
   const onChangeObserver = (key, value) => {
     if (!onChangeObservers[key] || typeof onChangeObservers[key] !== "object") return;
     const Observers = onChangeObservers[key];
@@ -121,67 +107,61 @@ function useFormTools() {
       return null;
     });
   };
-
   const onFieldChange = (key, value) => {
     var _getFormField;
-
     if (value === ((_getFormField = getFormField(key)) === null || _getFormField === void 0 ? void 0 : _getFormField.value)) return false;
     onChangeObserver(key, value);
-    setFormField(field => ({ ...field,
+    setFormField(field => ({
+      ...field,
       error: "",
       value
     }), key);
-  }; //--- OnChange Observer ---//--- END ---//
+  };
+  //--- OnChange Observer ---//--- END ---//
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
-  //--- Form Submit Blocker ---//--- START ---//
-
 
+  //--- Form Submit Blocker ---//--- START ---//
   const [formSubmitBlockers, setFormSubmitBlockers] = (0, _react.useState)([]);
-
   const toggleFormSubmitBlock = (key, value) => {
     setFormSubmitBlockers(state => state.includes(key) || !value ? [...state.filter(k => k !== key)] : [...state, key]);
   };
+  const clearFormSubmitBlockers = () => setFormSubmitBlockers([]);
+  //--- Form Submit Blocker ---//--- END ---//
 
-  const clearFormSubmitBlockers = () => setFormSubmitBlockers([]); //--- Form Submit Blocker ---//--- END ---//
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
+
   //--- Property Observer Blocker ---//--- START ---//
   // const [propertyObservers, setPropertyObservers] = useState({});
   // function addPropertyObserver () {
   // };
   //--- Property Observer Blocker ---//--- END ---//
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
-  //--- Render Fields Controller ---//--- START ---//
-
 
+  //--- Render Fields Controller ---//--- START ---//
   const [isFormFieldsAdded, setIsFormFieldsAdded] = (0, _react.useState)(false);
   const [renderFormFields, setRenderFormFieldsState] = (0, _react.useState)([]);
-
   const setRenderFormFields = data => {
-    setIsFormFieldsAdded(true); // eslint-disable-next-line no-use-before-define
-
-    removeRenderFields(renderFormFields); // eslint-disable-next-line no-use-before-define
-
+    setIsFormFieldsAdded(true);
+    // eslint-disable-next-line no-use-before-define
+    removeRenderFields(renderFormFields);
+    // eslint-disable-next-line no-use-before-define
     resetIsInitFocused();
     setRenderFormFieldsState(data);
   };
-
   const addRenderFields = fields => {
     setRenderFormFieldsState(state => [...state, ...fields]);
   };
-
   const removeRenderFields = fields => {
     setRenderFormFieldsState(state => state.filter(field => !fields.includes(field)));
   };
-
   const [isFormRendered, setIsFormRendered] = (0, _react.useState)(false);
-
   const submitIsFormRendered = () => setIsFormRendered(true);
-
   const resetIsFormRendered = () => setIsFormRendered(false);
-
   const onEnterDown = async e => {
     if (!goToNextFieldOnEnterPressed) return false;
     const focusable = document.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
@@ -196,12 +176,10 @@ function useFormTools() {
     const nextItem = focusable[nextIndex];
     nextItem.focus();
   };
-
   const onKeyDown = function () {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     const event = args.reduce((e, item) => {
       if ((item === null || item === void 0 ? void 0 : item.nativeEvent) instanceof KeyboardEvent) return item;
       return e;
@@ -210,70 +188,61 @@ function useFormTools() {
     const {
       keyCode
     } = event;
-
     switch (keyCode) {
       //OnEnterDown
       case 13:
         onEnterDown(event);
         break;
-
       default:
         break;
     }
-  }; //On Type Change
-
+  };
 
+  //On Type Change
   (0, _react.useEffect)(() => {
     resetIsFormRendered();
-  }, [FormType]); //On Render Fields Change
+  }, [FormType]);
 
+  //On Render Fields Change
   (0, _react.useEffect)(() => {
-    if (isFormFieldsAdded) resetIsFormRendered(false); //Add Form Fields
+    if (isFormFieldsAdded) resetIsFormRendered(false);
 
+    //Add Form Fields
     if (renderFormFields.length !== 0) {
       setFormFields(fields => {
         return renderFormFields.reduce((result, key) => {
           var _field$className;
-
           const fieldData = getFieldData(key);
           const field = getFormField(key) ? getFormField(key) : fieldData;
-
-          if (!(field !== null && field !== void 0 && field.className) || (field === null || field === void 0 ? void 0 : (_field$className = field.className) === null || _field$className === void 0 ? void 0 : _field$className.indexOf(getFieldClassName(key, FormType))) === -1) {
+          if (!(field !== null && field !== void 0 && field.className) || (field === null || field === void 0 || (_field$className = field.className) === null || _field$className === void 0 ? void 0 : _field$className.indexOf(getFieldClassName(key, FormType))) === -1) {
             field.className = "".concat(field === null || field === void 0 ? void 0 : field.className, " ").concat(getFieldClassName(key, FormType));
           }
-
           if (typeof (fieldData === null || fieldData === void 0 ? void 0 : fieldData.label) === "object") {
             field.label = fieldData.label[FormType] || fieldData.label.default;
           }
-
           field.ref = /*#__PURE__*/(0, _react.createRef)();
           field.wrapperRef = /*#__PURE__*/(0, _react.createRef)();
           field.isValueChangedByUser = false;
-
           if (goToNextFieldOnEnterPressed) {
             const onKeyDownProp = field.onKeyDown || (() => {});
-
             field.onKeyDown = function () {
               onKeyDown(...arguments);
               onKeyDownProp(...arguments);
             };
-          } //Is Field Value Changed By USER
-          // eslint-disable-next-line no-use-before-define
-
+          }
 
+          //Is Field Value Changed By USER
+          // eslint-disable-next-line no-use-before-define
           addOnFieldRenderedObserver(key, () => {
-            var _getFormField2, _getFormField2$ref, _getFormField2$ref$cu;
-
-            const element = (_getFormField2 = getFormField(key)) === null || _getFormField2 === void 0 ? void 0 : (_getFormField2$ref = _getFormField2.ref) === null || _getFormField2$ref === void 0 ? void 0 : (_getFormField2$ref$cu = _getFormField2$ref.current) === null || _getFormField2$ref$cu === void 0 ? void 0 : _getFormField2$ref$cu.querySelector((field === null || field === void 0 ? void 0 : field.focusSelector) || "input");
-
+            var _getFormField2;
+            const element = (_getFormField2 = getFormField(key)) === null || _getFormField2 === void 0 || (_getFormField2 = _getFormField2.ref) === null || _getFormField2 === void 0 || (_getFormField2 = _getFormField2.current) === null || _getFormField2 === void 0 ? void 0 : _getFormField2.querySelector((field === null || field === void 0 ? void 0 : field.focusSelector) || "input");
             const handler = () => setFormField({
               isValueChangedByUser: true
             }, key);
-
-            element === null || element === void 0 ? void 0 : element.addEventListener("paste", handler, {
+            element === null || element === void 0 || element.addEventListener("paste", handler, {
               once: true
             });
-            element === null || element === void 0 ? void 0 : element.addEventListener("keypress", handler, {
+            element === null || element === void 0 || element.addEventListener("keypress", handler, {
               once: true
             });
           }, true);
@@ -283,7 +252,6 @@ function useFormTools() {
     }
   }, [renderFormFields]);
   const [onFormRenderObservers, setOnFormRenderObservers] = (0, _react.useState)([]);
-
   const addOnFormRenderObserver = function (cb) {
     let {
       once = false
@@ -293,23 +261,21 @@ function useFormTools() {
       once,
       isWorkedOut: false
     }]);
-  }; // eslint-disable-next-line no-unused-vars
-
-
+  };
+  // eslint-disable-next-line no-unused-vars
   const updateOnFormRenderObserver = (key, data) => {
     setOnFormRenderObservers(state => {
       const copy = [...state];
-      copy[key] = { ...state[key],
+      copy[key] = {
+        ...state[key],
         ...data
       };
       return copy;
     });
   };
-
   const removeOnFormRenderObserver = key => {
     setOnFormRenderObservers(state => state.slice().filter((v, i) => i !== key));
   };
-
   const onFormRenderWorker = () => {
     // eslint-disable-next-line default-param-last
     onFormRenderObservers.map(function () {
@@ -326,9 +292,9 @@ function useFormTools() {
       });
       return null;
     });
-  }; //On Form Rendered
-
+  };
 
+  //On Form Rendered
   (0, _react.useEffect)(() => {
     if (!isFormRendered && onFormRenderObservers.length) {
       const formFieldsKeys = getFormFieldsKeys(form);
@@ -336,56 +302,53 @@ function useFormTools() {
         if (!formFieldsKeys.includes(key)) result = false;
         return result;
       }, true);
-
       if (isAllFieldsRendered) {
         submitIsFormRendered(true);
         onFormRenderWorker();
       }
     }
-  }, [form, renderFormFields, onFormRenderObservers]); //--- Render Fields Controller ---//--- END ---//
+  }, [form, renderFormFields, onFormRenderObservers]);
+  //--- Render Fields Controller ---//--- END ---//
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
-  //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- START ---//
 
+  //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- START ---//
   const hightliteErrorLabels = () => {
     const fields = getFormFieldsAsArray();
     const filtered = fields === null || fields === void 0 ? void 0 : fields.reduce((result, field) => {
       if (field !== null && field !== void 0 && field.errorLabelHightlite) {
         // eslint-disable-next-line no-use-before-define
-        result.push({ ...field,
+        result.push({
+          ...field,
           className: getFieldClassName(field === null || field === void 0 ? void 0 : field.key, FormType)
         });
       }
-
       return result;
     }, []);
-    filtered === null || filtered === void 0 ? void 0 : filtered.map(field => {
+    filtered === null || filtered === void 0 || filtered.map(field => {
       const formField = document.querySelector(".".concat(field === null || field === void 0 ? void 0 : field.className));
       if (!formField) return null;
       formField.classList.remove("errorLabelHightlite");
-
       if (field !== null && field !== void 0 && field.error) {
         formField.classList.add("errorLabelHightlite");
       }
-
       return null;
     });
   };
-
   (0, _react.useEffect)(() => {
     hightliteErrorLabels();
-  }, [form]); //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- END ---//
+  }, [form]);
+  //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- END ---//
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
-  //--- Fields Focus Controller ---//--- START ---//
 
+  //--- Fields Focus Controller ---//--- START ---//
   const [isInitFocused, setIsInitFocused] = (0, _react.useState)(false);
   const [autoFocusedField, setAutoFocusedField] = (0, _react.useState)(null);
-
   const setFirstFieldInitFocused = () => setIsInitFocused(true);
-
   const resetIsInitFocused = () => setIsInitFocused(false);
-
   const toggleFieldFocus = function (_ref) {
     let {
       key,
@@ -397,20 +360,16 @@ function useFormTools() {
     if (!key && !field) return null;
     if (!argForm) argForm = form;
     const formField = field || getFormField(key, argForm);
-
     if (!formField || !formField.ref) {
       return false;
     }
-
     if (action === "focus" && FocusControllerProps.onlyEmptyFieldAutoFocus && Boolean(formField === null || formField === void 0 ? void 0 : formField.value)) return null;
     setTimeout(() => {
-      var _formField$ref$curren, _formField$ref$curren2;
-
-      (_formField$ref$curren = formField.ref.current) === null || _formField$ref$curren === void 0 ? void 0 : (_formField$ref$curren2 = _formField$ref$curren.querySelector((formField === null || formField === void 0 ? void 0 : formField.focusSelector) || "input")) === null || _formField$ref$curren2 === void 0 ? void 0 : _formField$ref$curren2[action]();
+      var _formField$ref$curren;
+      (_formField$ref$curren = formField.ref.current) === null || _formField$ref$curren === void 0 || (_formField$ref$curren = _formField$ref$curren.querySelector((formField === null || formField === void 0 ? void 0 : formField.focusSelector) || "input")) === null || _formField$ref$curren === void 0 || _formField$ref$curren[action]();
       cb();
     }, 50);
   };
-
   const setFieldFocus = _ref2 => {
     let {
       key,
@@ -425,7 +384,6 @@ function useFormTools() {
       field
     }, "focus");
   };
-
   const setFieldBlur = _ref3 => {
     let {
       key,
@@ -440,93 +398,73 @@ function useFormTools() {
       field
     }, "blur");
   };
-
   const setFirstFieldFocus = () => {
     var _field;
-
     let field = null;
-
     for (let i = 0; i < renderFormFields.length && !field; ++i) {
       const key = renderFormFields[i];
       const tmpField = getFormField(key);
       if (tmpField && !(tmpField !== null && tmpField !== void 0 && tmpField.disabled)) field = tmpField;
     }
-
     if (!field) return false;
-
     if (FocusControllerProps.onlyEmptyFieldAutoFocus && Boolean((_field = field) === null || _field === void 0 ? void 0 : _field.value)) {
       setFirstFieldInitFocused();
       return false;
     }
-
     setAutoFocusedField(field.key);
-
     const callback = () => {
       setFormField({
         value: field.value
       }, field.key);
       setFirstFieldInitFocused();
     };
-
     setTimeout(() => setFieldFocus({
       key: field.key,
       cb: callback,
       form
     }), 50);
   };
-
   const [onFieldFocusCallbacks, setOnFieldFocusCallbacks] = (0, _react.useState)({});
-
   const addOnFieldFocusCallback = (key, cb) => {
     setOnFieldFocusCallbacks(state => {
-      const stateCopy = { ...state
+      const stateCopy = {
+        ...state
       };
       if (!state[key]) stateCopy[key] = [];
       stateCopy[key].push(cb);
       return stateCopy;
     });
   };
-
   const callOnFieldFocusCallbacks = key => {
     var _onFieldFocusCallback;
-
     if (!Array.isArray(onFieldFocusCallbacks[key])) return null;
-    (_onFieldFocusCallback = onFieldFocusCallbacks[key]) === null || _onFieldFocusCallback === void 0 ? void 0 : _onFieldFocusCallback.map(cb => cb());
+    (_onFieldFocusCallback = onFieldFocusCallbacks[key]) === null || _onFieldFocusCallback === void 0 || _onFieldFocusCallback.map(cb => cb());
   };
-
   const [focusOnRenderFields, setFocusOnRenderFields] = (0, _react.useState)([]);
-
   const addFocusFieldOnRender = (key, cb) => {
     setFocusOnRenderFields(state => [...state, key]);
     if (cb) addOnFieldFocusCallback(key, cb);
   };
-
   const removeFocusFieldOnRender = key => {
     setFocusOnRenderFields(state => state.filter(field => field !== key));
   };
-
   (0, _react.useEffect)(() => {
     if (FocusControllerProps.setAutoFocus && !isInitFocused && !autoFocusedField && isFormRendered) setFirstFieldFocus();
-
     if (focusOnRenderFields.length) {
       var _getFormFieldsKeys;
-
-      (_getFormFieldsKeys = getFormFieldsKeys(form)) === null || _getFormFieldsKeys === void 0 ? void 0 : _getFormFieldsKeys.map(key => {
-        var _getFormField3, _getFormField3$value;
-
-        if (focusOnRenderFields.includes(key) && ((_getFormField3 = getFormField(key)) === null || _getFormField3 === void 0 ? void 0 : (_getFormField3$value = _getFormField3.value) === null || _getFormField3$value === void 0 ? void 0 : _getFormField3$value.length) === 0) {
+      (_getFormFieldsKeys = getFormFieldsKeys(form)) === null || _getFormFieldsKeys === void 0 || _getFormFieldsKeys.map(key => {
+        var _getFormField3;
+        if (focusOnRenderFields.includes(key) && ((_getFormField3 = getFormField(key)) === null || _getFormField3 === void 0 || (_getFormField3 = _getFormField3.value) === null || _getFormField3 === void 0 ? void 0 : _getFormField3.length) === 0) {
           const cb = () => {
             removeFocusFieldOnRender(key);
             callOnFieldFocusCallbacks(key);
           };
-
           setFieldFocus({
             key,
             form,
             cb
           });
         }
-
         return null;
       });
     }
@@ -536,22 +474,25 @@ function useFormTools() {
   }, [isInitFocused]);
   (0, _react.useEffect)(() => {
     resetIsInitFocused();
-  }, [FormType]); //Remove Focus From Autocomplete field !!! TODO
+  }, [FormType]);
+
+  //Remove Focus From Autocomplete field !!! TODO
   // useEffect(() => {
   //   if (!autoFocusedField) return null;
   //   const field = getFormField(autoFocusedField);
+
   //   if (field?.value !== '' && !field?.isValueChangedByUser) {
   //     setFieldBlur({key: autoFocusedField, form});
   //   }
   // }, [autoFocusedField, form]);
   //--- Fields Focus Controller ---//--- END ---//
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
-  //--- OnFieldRendered Observer ---//--- START ---//
 
+  //--- OnFieldRendered Observer ---//--- START ---//
   const [onFieldRenderedObservers, setOnFieldRenderedObservers] = (0, _react.useState)({});
   const [isFieldObserversReset, setIsFieldObserversReset] = (0, _react.useState)(false);
-
   const resetOnFieldRenderObserversWorkedOut = () => {
     if (!isFieldObserversReset && renderFormFields.length) {
       renderFormFields.map(key => {
@@ -563,7 +504,6 @@ function useFormTools() {
       setIsFieldObserversReset(true);
     }
   };
-
   const addOnFieldRenderedObserver = function (key, cb) {
     let isOnceCallable = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     let observerId = null;
@@ -579,18 +519,17 @@ function useFormTools() {
     });
     return observerId;
   };
-
   const updateOnFieldRenderedObserver = (key, id, data) => {
     setOnFieldRenderedObservers(state => {
       //Set Default Value
       if (!state[key]) return state;
-      state[key][id] = { ...state[key][id],
+      state[key][id] = {
+        ...state[key][id],
         ...data
       };
       return state;
     });
   };
-
   const removeOnFieldRenderedObserver = (key, id) => {
     setOnFieldRenderedObservers(state => {
       //Set Default Value
@@ -599,7 +538,6 @@ function useFormTools() {
       return state;
     });
   };
-
   const onFieldRenderedObserver = (key, data) => {
     if (!onFieldRenderedObservers[key] || typeof onFieldRenderedObservers[key] !== "object") return;
     const Observers = onFieldRenderedObservers[key];
@@ -620,14 +558,11 @@ function useFormTools() {
       return null;
     });
   };
-
   const onRenderObserverWorker = () => {
     var _getFormFieldsKeys2;
-
     return (_getFormFieldsKeys2 = getFormFieldsKeys(form)) === null || _getFormFieldsKeys2 === void 0 ? void 0 : _getFormFieldsKeys2.map(key => {
       //OnFieldRendered
       const fieldData = getFormField(key);
-
       if (!(fieldData !== null && fieldData !== void 0 && fieldData.isOnRenderObserversWorkedOut)) {
         onFieldRenderedObserver(key, fieldData);
         return {
@@ -635,26 +570,28 @@ function useFormTools() {
           isWorkedOut: true
         };
       }
-
       return {
         key,
         isWorkedOut: false
       };
     });
   };
-
   (0, _react.useEffect)(() => {
     resetOnFieldRenderObserversWorkedOut();
     onRenderObserverWorker();
   }, [form]);
   (0, _react.useEffect)(() => {
     setIsFieldObserversReset(false);
-  }, [FormType]); //--- OnFieldRendered Observer ---//--- END ---//
+  }, [FormType]);
+  //--- OnFieldRendered Observer ---//--- END ---//
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
+
   //Detect What Changed || TRY TO DO
   // const compare = async (prev, current) => {
   //   if (!prev) return current;
+
   //   return new Promise((resolve) => {
   //     Object.keys(current).reduce((result, key, i, arr) => {
   //       //If PROPERTY is NOT EXISTS BEFORE
@@ -672,20 +609,22 @@ function useFormTools() {
   //       else if (prev[key] !== current[key]) {
   //         result[key] = current[key];
   //       }
+
   //       if (i === arr.length-1) {
   //         resolve(result);
   //       }
+
   //       return result;
   //     }, {});
   //   });
   // };
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
-  //--- WindowScrollController ---//--- START ---//
 
+  //--- WindowScrollController ---//--- START ---//
   const scrollToField = _ref5 => {
     var _field2, _field3, _wrapperRef$current;
-
     let {
       key = null,
       field = null,
@@ -694,20 +633,22 @@ function useFormTools() {
     if (!key && !field) return false;
     if (!argForm) argForm = form;
     if (!field) field = getFormField(key, argForm);
-    const wrapperRef = ((_field2 = field) === null || _field2 === void 0 ? void 0 : _field2.wrapperRef) || ((_field3 = field) === null || _field3 === void 0 ? void 0 : _field3.ref); // eslint-disable-next-line no-unsafe-optional-chaining
-
+    const wrapperRef = ((_field2 = field) === null || _field2 === void 0 ? void 0 : _field2.wrapperRef) || ((_field3 = field) === null || _field3 === void 0 ? void 0 : _field3.ref);
+    // eslint-disable-next-line no-unsafe-optional-chaining
     const {
       top: topOffset
-    } = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.getBoundingClientRect();
+    } = wrapperRef === null || wrapperRef === void 0 || (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.getBoundingClientRect();
     const scrollTop = Math.abs(Math.abs(topOffset) - Math.abs(window.scrollY)) - 16;
     window.scrollTo({
       top: scrollTop
     });
-  }; //--- WindowScrollController ---//--- END ---//
+  };
+
+  //--- WindowScrollController ---//--- END ---//
+
   ///////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////
 
-
   const addErrorsToForm = function (errors) {
     let argForm = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : form;
     if (!argForm) argForm = form;
@@ -723,7 +664,6 @@ function useFormTools() {
       }, fields);
     });
   };
-
   return {
     FormDataDrivers,
     //OnChangeObserver
@@ -738,6 +678,7 @@ function useFormTools() {
     isFormSubmitBlocked: Boolean(formSubmitBlockers.length),
     //Property Observers
     // addPropertyObserver,
+
     //Render Fields
     renderFormFields,
     setRenderFormFields,